@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');.containerWebsite {
    overflow: hidden;
    max-width: 100vw;
    max-height: 100vh;
    min-height: 100vh;
    position: relative;
}

.flashcards-page .pageContainer {
    padding-right: 50px;
    padding-left: 50px;
}

.flagChoosenMenu {
    position: absolute !important;
    right: 80px;
    top: 25px;
    z-index: 10 !important;
}

.paramsMainContainer .flagChoosenMenu {
    right: 40px;
}


.paramsBack .flagHomeReponsive {
    position: absolute;
    right: 40px;
    top: 25px;
    display: block;
}

.homePage .flagHomeReponsive {
    display: block !important;
}

.loginChangeLang {
    position: absolute;
    top: 20px;
    right: 20px;
}

@media screen and (max-width: 768px) {

    .paramsBack .flagHomeReponsive {
        display: block;
        top: 18px;
        position: absolute;
        left: 100px;
    }

    .newBellNotifsContainer,
    .flagChoosenMenu {
        display: none;
    }

    .LargeCrossIcon.responsiveLang {
        right: 65px;
        top: 113px;
    }
}

@media screen and (max-width: 767px) {
    .loginChangeLang {
        top: 25px;
    }
}

@media screen and (max-height: 600px) {
    .loginChangeLang {
        top: 10px;
    }
}


/* slider */


/* THE BUTTON SWITCH */

/* Bloc en attente */
/* Neutralise l'espace du bloc source pendant l'overlay */
[data-ia-pending="true"] {
  position: relative;
  color: transparent !important;   /* cache le texte réel */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 2px;                  /* supprime la hauteur du texte réel */
}

/* Ancien texte rouge avec fond */
[data-ia-old]::before {
  content: attr(data-ia-old);
  display: block;
  background-color: rgba(255, 199, 199, 0.3);
  color: #b91c1c;
  text-decoration: line-through;
  padding: 2px 4px;
  border-radius: 6px;
  white-space: pre-wrap;
  line-height: 1.5;
  margin: 0;                       /* ← supprime l’écart */
}

/* Nouveau texte bleu (streaming) */
[data-ia-draft]::after {
  content: attr(data-ia-draft);
  display: block;
  background-color: rgba(191, 219, 254, 0.35);
  color: #1e3a8a;
  padding: 2px 4px;
  border-radius: 6px;
  white-space: pre-wrap;
  line-height: 1.5;
  margin: 0;                       /* ← supprime l’écart */
}


[data-radix-popper-content-wrapper] {
  z-index: 9999 !important;
}


.custom-upload-popup {
    background-color: white;
}

.player-name {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.player-name::after {
    content: ".";
    color: rgb(139 92 246); /* text-primary color */
    font-size: 3rem;
    line-height: 1;
    font-weight: 600;
    margin-left: 2px;
 padding-bottom: 10px;
}

.player-name.flex-row-reverse::after {
    margin-left: 0;
    margin-right: 2px;
}

@keyframes scoreAnimation {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-4px);
    }
    100% {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.score-animation {
    animation: scoreAnimation 2s  ease-in forwards;
}:root {
  --color-primary: #0077ff;
  --color-secondary: #ff6bce;
  --color-background: #ffffff;
  --color-foreground: #191919;

  /* Notion */
  --color-notion-menu: #e2e2e2c1;
}

/* mode dark */
.dark {
  --color-primary: #4a90e2;
  --color-background: #0a0a0a;
  --color-foreground: #f5f5f5;

  /* Notion */
}

.filterIconDrag {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  position: relative;
}


.filterIconDrag::before {
  content: 'oui';
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: green;
  right: 0px;
}#root {
  min-height: 100dvh !important;
  position: relative;
}

.blueText {
  color: #4870e2;
}

.backContainer {
  background-color: white;
  position: relative;
  overflow: hidden;
}

.pageContainer {
  background-color: white;

  margin-left: 80px;
  min-height: 100vh;
}

.homeFlex {
  display: flex;
}

.bubbleNotifs {
  background-color: #3f71ee;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  position: absolute;
  right: -5px;
  top: -2px;
}

/* === ===================== === */
/* === PROFILE CONTAINER === */
/* === ===================== === */
/* NEW CSS */

.homeFlex {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inputQuestion {
  display: flex;
  background-color: #ecf0f3;
  height: 40px;
  width: 553px;
  margin-top: 15px;
  border-radius: 20px;
}

.inputQuestion input {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
  margin-right: 15px;
}

.inputQuestion .loupe {
  width: 28px;
  margin-left: 15px;
  margin-right: 10px;
}

.main-content {
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mainContainerHome {
  max-width: 1500px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
  margin-top: 30px;
}

@media screen and (max-width: 1400px) {
  .mainContainerHome {
    margin-top: 40px;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 991px) {
  .mainContainerHome {
    grid-template-columns: repeat(2, 1fr);
  }

  .pageContainer {
    min-height: 100vh;
    width: inherit;
    overflow: hidden;
  }

}

@media screen and (max-width: 767px) {
  .mainContainerHome {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 30px;
    margin-top: 50px;
  }

  .pageContainer {
    margin-left: 0px;
  }

  .mainContainerHome {
    max-width: 95%;
  }

  @media screen and (max-width: 600px) {
    .mainContainerHome {
      max-width: 95%;
      grid-template-columns: repeat(1, 1fr);
    }
  }

  @media screen and (max-width: 500px) {
    .mainContainerHome {
      max-width: 95%;
      grid-template-columns: repeat(1, 1fr);
    }
  }
}

.homePage .hookButton {
  display: flex;
  position: absolute;
  left: 10px;
  background-color: #fdf1e1;
  align-items: center;
  justify-content: center;
  padding: 5px 5px;
  gap: 10px;
  top: 20px;
  border-radius: 20px;
  padding-right: 20px;
  color: #f99609;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  z-index: 0;

  svg {
    background-color: #f9dbb3;
    height: 27px;
    width: 27px;
    border-radius: 50%;
    padding: 4px;
  }

  @media screen and (max-width: 990px) {
    padding: 4px 4px;
    font-size: 12px;
    gap: 5px;
    padding-right: 10px;

    svg {
      background-color: #f9dbb3;
      height: 27px;
      width: 27px;
    }
  }
}

.hookButton.hookButtonRepsonsive {
  display: none;
}

@media screen and (max-width: 767px) {
  .hookButton.hookButtonFull {
    display: none;
  }

  .singleHomePage .hookButton.hookButtonRepsonsive {
    display: flex;
    top: 15px;
    left: 70px;

    svg {
      background-color: #f9dbb3;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      padding: 6px;
    }
  }
}

@media screen and (max-width: 500px) {
  .singleHomePage .hookButton.hookButtonRepsonsive {
    display: flex;
    margin: auto;
  }
}
/* TwoLevelAISearch.css */
.ai-search-container {
  position: relative;
  width: 100%;
  max-width: 730px;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 16px 0 24px;
  border-radius: 30px;
  box-shadow: 1px 1px 18.3px 4px #ecf0f3;

  margin-top: 25px;
  margin-bottom: -25px;
}

.IAPage .ai-search-container {
  margin-bottom: 10px;
}

.ai-search-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #202124;
  resize: none;
  overflow-y: auto;
  max-height: 200px;
  /* ajuste selon ton besoin */
  min-height: 38px;
  /* hauteur initiale */
  height: auto;
  padding: 10px 0;
  line-height: 1.5;
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Barre de recherche principale */
.ai-search-bar {
  display: flex;
  align-items: flex-start;
  /* Modifié pour aligner au début avec le textarea extensible */
  justify-content: space-between;
  min-height: 56px;
  /* Changé de height fixe à min-height */
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.ai-search-container:hover {
  box-shadow: 0 1px 10px rgba(32, 33, 36, 0.25);
}

.ai-search-placeholder {
  color: #5f6368;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-search-actions {
  display: flex;
  align-items: flex-start;
  /* Aligné au début pour s'aligner avec le textarea */
  gap: 12px;
  padding-top: 8px;
  /* Ajouter un peu d'espace en haut */
}

.ai-mic-button,
.ai-icon-button {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ai-mic-button {
  color: #5f6368;
}

.ai-mic-button.listening {
  background-color: rgba(255, 0, 0, 0.1);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.2);
}

.ai-mic-button:hover {
  background-color: rgba(60, 64, 67, 0.08);
}

/* Options secondaires */
.ai-search-options {
  display: flex;
  align-items: center;
  margin-top: 0px;
  gap: 8px;
  padding: 0 0px;
  padding-bottom: 10px;
}

.ai-option-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 100px;
  height: 35px;
  padding: 0 10px;
  color: #5f6368;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
  border: 1px solid #5f636842;
  position: relative;
}

.ai-option-button span {
  color: #5f6368 !important;
}

.ai-option-button:first-child {
  padding: 0;
  width: 35px;
}

.ai-option-button:last-child {
  padding: 0;
  width: 35px;
  margin-left: auto;
}

.ai-option-button:hover {
  background-color: #e8eaed;
}

.ai-option-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-stop-button {
  color: #dc2626 !important;
  border-color: #dc2626 !important;
  animation: pulse 1.5s ease-in-out infinite;
}

.ai-stop-button:hover {
  animation: none
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.option-with-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.option-with-text svg {
  flex-shrink: 0;
}

.option-with-text span {
  white-space: nowrap;
}

/* Suggestions en chips */
.ai-suggestion-chips {
  display: flex;
  align-items: center;
  margin-top: 15px;
  gap: 10px;
  padding: 0 4px;
  flex-wrap: wrap;
}

.ai-suggestion-chip {
  background-color: #f1f3f4;
  border-radius: 100px;
  height: 36px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #5f6368;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-suggestion-chip:hover {
  background-color: #e8eaed;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .ai-search-container {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.15);
    width: 95vw;
  }

  .ai-search-bar {
    min-height: 50px;
  }

  .ai-option-button span {
    display: none;
  }

  .ai-option-button {
    width: 35px !important;
    padding: 0 !important;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .ai-suggestion-chips {
    gap: 6px;
  }

  .ai-suggestion-chip {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }
}

.ai-search-container {
  /* Styles pour les fichiers uploadés */
  .uploaded-files-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background-color: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .uploaded-file {
    display: flex;
    align-items: center;
    background-color: #e3e3e3;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    max-width: 100%;
    gap: 6px;
  }

  .uploaded-file span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }

  .remove-file {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .remove-file:hover {
    color: #ff4747;
  }

  /* Styles pour la progression d'upload */
  .upload-progress {
    margin: 8px 0;
    padding-bottom: 20px;
    width: 100%;
  }

  .progress-bar {
    height: 6px;
    background-color: #e3e3e3;
    border-radius: 3px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background-color: #4285f4;
    transition: width 0.3s ease;
  }

  .progress-text {
    font-size: 12px;
    color: #666;
    margin-bottom: -30px !important;
    text-align: center;
  }

  /* Animation pour le loader */
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin {
    animation: spin 1s linear infinite;
  }

  /* file add and delete */
  /* Ajoutez ce CSS à votre fichier TwoLevelAISearch.css */

  .file-indicator {
    display: flex;
    align-items: center;
    background-color: #e6f2ff;
    /* Bleu clair */
    color: #0066cc;
    /* Bleu foncé pour le texte */
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.3s ease-in-out;
    margin-top: 10px;
    margin-bottom: -10px;
    margin-right: 40px;
  }

  .file-icon {
    margin-right: 8px;
    color: #0066cc;
  }

  .file-indicator span {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }

  .file-icon-wrapper {
    width: 20px !important;
  }

  .remove-file-btn {
    background: transparent;
    border: none;
    color: #0066cc;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
  }

  .remove-file-btn:hover {
    background-color: rgba(0, 102, 204, 0.1);
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .numberDocs {
    position: absolute;
    background-color: #4285f4;
    padding: 10px;
    height: 2px;
    width: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 10px;
    border-radius: 50%;
    top: -6px;
    right: -7px;
  }
}

/* Ajoutez ce CSS à votre fichier IAPage.css */

.attached-file {
  display: flex;
  align-items: center;
  background-color: #e6f2ff;
  color: #0066cc;
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  max-width: fit-content;
}

.attached-file .file-icon {
  margin-right: 8px;
  color: #0066cc;
}

.attached-file span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Assurez-vous que les documents attachés s'affichent avant le contenu du message */
.message-content {
  display: flex;
  flex-direction: column;
}

/* Style spécifique pour les bulles de l'utilisateur */
.message.user .attached-file {
  background-color: #e3f1ff;
  color: #0055aa;
  margin-left: auto;
}

/* Style spécifique pour les bulles de l'assistant */
.message.assistant .attached-file {
  background-color: #e6f2ff;
  color: #0066cc;
}.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}
.driver-popover {
  background-color: #f9fbff !important;
  border: 1px solid #dbeafe !important;
  border-left: 5px solid #4870E2 !important;
  border-radius: 10px !important;
  padding: 20px !important;
  max-width: 380px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
  font-family: 'Inter', sans-serif;
  color: #1e293b;
}

.driver-popover-title {
  font-size: 18px;
  font-weight: 600;
  color: #4870E2;
  margin-bottom: 10px;
}

.driver-popover-description {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.driver-popover-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.driver-popover-footer button {
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}

.driver-next-btn {
  background-color: #4870E2;
  color: white;
}

.driver-next-btn:hover {
  background-color: #365cc8;
}

.driver-prev-btn,
.driver-close-btn {
  background-color: transparent;
  color: #4870E2;
  border: 1px solid #4870E2;
}

.driver-prev-btn:hover,
.driver-close-btn:hover {
  background-color: #e6edff;
}
  /* Main container */
  .containerRegister {
    background-color: #ffffff;
    min-height: 100dvh;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .containerRegister, .passwordParameters {
    /* Register1.css */

    

    /* Ajoutez ce CSS à votre fichier Register1.css */

    .password-criteria-container {
      overflow: hidden;
      transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
      max-height: 300px;
      /* Valeur suffisamment grande pour contenir tout le contenu */
      opacity: 1;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .password-criteria {
      margin-top: 15px;
      padding: 0px 5px;
      border-radius: 8px;
      animation: fadeIn 0.3s ease-in-out;
    }

    .mail_register_container {
      margin-bottom: 10px;
    }

    .martopNegativeInput {
      margin-top: -10px !important;
    }

    .inputFocusedRegister {
      border: 1px #3868E0 solid;
    }

    .eye-password-component {
      width: 22px;
      cursor: pointer;
    }

    .criteria-item {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      color: #64748b;
      font-size: 14px;
    }

    .criteria-icon {
      margin-right: 8px;
      flex-shrink: 0;
    }

    .criteria-item.valid {
      color: #3868E0;
    }

    .text-primary {
      color: #3868E0;
      font-weight: 600;
    }

    .container-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;

    }

    /* Header styles */
    .academia-header {
      text-align: center;
      margin-bottom: 20px;
      margin-top: 40px;
    }

    .academia-title {
      font-size: 2.8rem;
      font-weight: 800;
      margin-bottom: 5px;
      color: #333333;
    }

    .dot {
      color: #3868E0;
    }

    .academia-tagline {
      font-size: 14px;
      color: black;
      font-weight: 600;
      margin: 0;
    }

    /* Card styles */
    .register-card {
      background-color: #ffffff;
      border-radius: 50px;
      width: 100%;
      max-width: 680px;
      box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
      position: relative;
      padding: 20px 0;
      margin-bottom: 20px;
    }

    /* Back button */
    .back-button-container {
      position: absolute;
      top: 20px;
      left: 20px;
    }

    .back-button-register {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #EBF3FD;
      border-radius: 20px;
      padding: 11px;
      margin-left: 5px;
      margin-top: 5px;
    }

    /* Card content */
    .card-content {
      padding: 40px 30px 30px;
      max-width: 500px;
      margin: auto;
    }

    .register-title {
      font-size: 26px;
      font-weight: 800;
      text-align: center;
      margin-bottom: 10px;
      color: #333333;
    }

    .account-link {
      text-align: center;
      font-size: 14px;
      color: black;
      font-weight: 600 !important;
    }

    .connect-link {
      color: #3868E0;
      text-decoration: none;
      font-weight: 500;
    }

    .connect-link:hover {
      text-decoration: underline;
    }

    /* Form styles */
    .register-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: -10px;
    }

    .form-group {
      width: 100%;
    }

    .icon_register_component {
      width: 20px;
    }

    .input-container {
      display: flex;
      align-items: center;
      background-color: #eceff3;
      border-radius: 15px;
      position: relative;
      height: 50px;
      width: 100%;
      overflow: hidden;
    }

    .icon-container {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;
      padding: 8px 12px;
      border-radius: 10px;
      margin-left: 6px;
      margin-right: 10px;
      flex-shrink: 0;
    }

    .form-input {
      flex: 1;
      height: 100%;
      padding: 0 40px 0 10px;
      border: none;
      font-size: 14px;
      color: #333333;
      width: calc(100% - 50px);
      box-sizing: border-box;
      font-weight: 600;
    }

    .form-input:focus {
      outline: none;
    }

    .form-input::placeholder {
      color: #C7C7CB;
    }

    .eye-button {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      padding: 5px;
      z-index: 2;
    }

    /* Password validation styling */
    .password-validation-container {
      margin-top: 12px;
      padding-left: 8px;
    }

    .validation-item {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      color: #A0A9B8;
      font-size: 13px;
    }

    .validation-item.valid {
      color: #3868E0;
    }

    .check-icon {
      margin-right: 8px;
      flex-shrink: 0;
    }

    .validation-item:not(.valid) .check-icon {
      color: #A0A9B8;
    }

    .validation-item.valid .check-icon {
      color: #3868E0;
    }

    

    /* Footer */
    .footer {
      text-align: center;
      margin-top: 10px;
    }

    .copyright {
      font-size: 12px;
      color: black;
      font-weight: 600;
      margin: 0;
      text-transform: uppercase;
      padding-bottom: 20px;
    }

  }

  /* Responsive styles */
  @media (max-width: 767px) {

    .containerRegister .academia-header,
    .containerRegister .footer {
      display: none !important;
    }

    .containerRegister {
      height: 100dvh;
      min-height: inherit;
      overflow: hidden !important;
    }

    .containerRegister .register-card {
      position: relative;
      padding: 0px;
      margin: 0px;
      display: flex;
      height: 90vh;
      width: 100vw;
      margin-top: -50px;
      box-shadow: inherit;
      border-radius: 0px;
      align-items: center;
      justify-content: center;
      border: none !important;
    }

    .back-button-container {
      /* margin-top: 20px; */
    }

    .register-title {
      font-size: 32px !important;
      margin-bottom: 25px !important;
    }

    .containerRegister .card-content {
      width: 500px;
      margin: auto;
    }

    .register-form {
      width: 100%;
    }

    .eye-password-component {
      margin-right: 15px;
    }

    .form-input {
      padding: 0px !important;
      padding-right: 10px !important;
    }

    .container-content {
      margin: 0px !important;
      margin-top: -30px !important;
    }
  }

  @media (max-width: 500px) {
    .back-button-register {
      width: 35px;
      height: 35px;
    }
  }

  .containerRegister input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #eceff3 inset !important;
    box-shadow: 0 0 0px 1000px #eceff3 inset !important;
    -webkit-text-fill-color: #000 !important;
  }

  /* Create account button */
  .create-account-button {
    background-color: #EBF3FD;
    color: #3868E0;
    border: none;
    border-radius: 15px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }

  .create-account-button:hover {
    background-color: #D6E4FF;
  }

  .containerRegister .error-message {
    color: #dc3545;
    font-size: 12px;
    margin-left: 10px;
  }

  .containerRegister .error-message-mail {
    margin-top: 0px !important;
    margin-bottom: 0px;
  }

  .form-input-to-hide {
    display: none;
  }.containerRegister {
    .middleContainerFiliere .title-blue-register {
        color: #0077FF;
        font-weight: 600;
        text-align: center;
        margin-top: -5px;
    }

    .mail_register_container {
        margin-top: 40px;
    }

    .containerChoiceFiliere {
        display: flex;
        width: 100%; /* Assure que le conteneur prend toute la largeur disponible */
        gap: 20px;
        margin-top: 20px;
    }

    .containerChoiceFiliere.promo {
      margin-top: 0px;
    }

    .icon_register_component.username {
        padding: 1px;
    }
    .icon_register_component.promocode {
        padding: 0px;
        width: 22px;
    }
    
    .containerChoiceFiliere .filiere {
        flex: 1;
        text-align: center;
        padding: 10px;
        background-color: #ECF0F3;
        border-radius: 15px;
        color: black;
        font-weight: 600;
        cursor: pointer;
        padding-left: 0px;
    }

    .containerChoiceFiliere .filiere.active {
        color: #0077FF;
    }

    .form-input.code-promo {
        padding: 0px !important;
    }

    /* The switch - the box around the slider */
    .switch {
    position: relative;
    display: inline-block;
    min-width: 45px;
    max-width: 45px;
    height: 22px;
    margin-right: 15px;
  }
  
  /* Hide default HTML checkbox */
    .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
    .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
    .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
    input:checked + .slider {
    background-color: black;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px black;
  }
  
    input:checked + .slider:before {
    -webkit-transform: translateX(23px);
    -ms-transform: translateX(23px);
    transform: translateX(23px);
  }
  
  /* Rounded sliders */
    .slider.round {
    border-radius: 34px;
  }
  
    .slider.round:before {
    border-radius: 50%;
  }

  .freetryActivated {
    position: absolute;
    left: 72px;
    font-size: 10px;
    background-color: none !important;
    bottom: 2px;
    color: #0077FF;
  }

  .error-message {
    margin-top: -5px;
  }

  .error-message.status {
    margin-top: 5px;
    text-align: start;
    margin-bottom: -10px;
  }

  .create-account-button {
    margin-top: 15px;
  }


  .containerChoiceFiliere .filiere.promoContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .containerChoiceFiliere .freetrialLabel {
    font-size: 14px;
    padding-left: 15px;
  }

  .containerChoiceFiliere .switch {
    margin-right: 5px !important;
  }

  @media (max-width: 768px) {
    .containerChoiceFiliere .freetrialLabel {
      font-size: 12px;
    }

    .containerChoiceFiliere .switch {
      margin-right: 0px !important;
    }

    .containerChoiceFiliere .freetrialLabel {
      padding-left: 10px;
    }

    .switch {
      position: relative;
      display: inline-block;
      min-width: 35px;
      max-width: 35px;
      height: 20px;
      margin-right: 10px;
    }
    
      .slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 2px;
      bottom: 2px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(15px);
      -ms-transform: translateX(15px);
      transform: translateX(15px);
    }
  }
}
.registerfiveContainer form {
  width: 47vw;
}



.registerfiveContainer #payment-element {
  margin-bottom: 24px;
}

/* Buttons and links */
.registerfiveContainer button {
  background: #3F71EE;
  color: #ffffff;
  border-radius: 10px;
  border: 0;
  padding: 7px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  margin-top: 15px;
}


.registerfiveContainer button:disabled {
  opacity: 0.5;
  cursor: default;
}




#card-element-container {
    border-radius: 7px;
    background-color: #F2F2FD;
    padding: 12px;
    margin-top: 10px;
}

/* custom.css */
.custom-swal-button {
  background-color: #4870E2 !important; /* Change la couleur de fond du bouton */
}



@media only screen and (max-width: 1221px)  {

  .registerfiveContainer form {
    width: 70vw;
  }
  
}


@media only screen and (max-width: 500px)  {
  .registerfiveContainer form {
    width: 93vw;
  }
}
.registerfiveContainer{
    background-color: white;
    width: 100vw;
    height: 100vh;
    position: relative;
}

/* .containerRegister {
    background: linear-gradient(0.25turn, #ffffff, #ffffff) !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative !important;
} */


.registerfiveContainer .headerRegister5 .fleche{
    margin-left: 2%;
    width: 54px;
    height: 45px;
    cursor: pointer;
    margin-top: 20px;
}

.registerfiveContainer .ChoixAbonnementHeader{
    padding-top: 35px;
    padding-left: 90px;

}

.registerfiveContainer .PrixPlusAbonnement{
    display: flex;
    justify-content: space-between;
    width: 93%;
}

.registerfiveContainer .ChoixAbonnementHeader .cardtitle{
    font-size: 23px;

}

.registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail{
    max-width: 55%;
    height: 60px;
    background-color: #F2F2FD;
    margin-top: 6px;
    border-radius: 10px;
}

.registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail2{
    width: 22%;
}




.registerfiveContainer .ChoixAbonnementHeader .BleuDUR{
    font-size: 25px;
    color: #4870E2;
    font-weight: 600;
    width: 35%;
}

.registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail p{
    padding: 10px;
    padding-left: 40px;
}

.registerfiveContainer .ChoixAbonnementHeader .PrixExacte{
    width: 41%;
    height: 145px;
    background-color: #F2F2FD;
    border-radius: 15px;
    margin-top: -75px;
    padding: 25px;
}

.registerfiveContainer .ChoixAbonnementHeader .PrixExacte .cardtitle{
    font-size: 25px;
    width: 100%;
}

.registerfiveContainer .ChoixAbonnementHeader .PrixExacte .Engagement{
    font-size: 20px;
    width: 100%;
    margin-bottom: 10px;
}

.registerfiveContainer .ChoixAbonnementHeader .PrixExacte .Prix{
    font-size: 25px;
    display: flex;
    justify-content: end;
    width: 98%;
    font-weight: 400;
}

.registerfiveContainer .ChoixAbonnementHeader .Facturation{
    margin-top: 30px;
}

.registerfiveContainer .ChoixAbonnementHeader .Facturation .containerDetailFacturation{
    width: 85%;
    height: 520px;
    background-color: #F2F2FD;
    border-radius: 15px;
    margin-top: 15px;
}

.registerfiveContainer .LES5INPUT {
    display: block;
    padding: 17px;
    padding-left: 30px;
    
}

.registerfiveContainer .LES5INPUT .LabelSOlO{
    margin-top: 15px;
    width: 100%;
    
}

.registerfiveContainer .LESLABEL{
    color: #161616;
    font-size: 20px;
    margin-bottom: 0px;
}
.registerfiveContainer .INPUT1 {
    width: 55%;
    padding: 13px;
    border-color: #ffffff;
}

.registerfiveContainer .INPUT2 {
    width: 95%;
    padding: 13px;
    border-color: #ffffff;
}


.registerfiveContainer .LESFLEX {
    display: flex;
}

.registerfiveContainer .LESFLEX .INPUTDROITE {
    margin-left: 20px;
}



.NomAbonnementDetail .form-control{
    position: absolute;
    top: 10px;
    
}


/* POUR LES TERMINALEEEE */
/* POUR LES TERMINALEEEE */

/* POUR LES TERMINALEEEE */
/* POUR LES TERMINALEEEE */

.styled-select {
    width: 183%;
    height: 65px;
    color: #4870E2;
    border: none;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #F2F2FD;
    border-radius: 10px;
    cursor: pointer;
    z-index: 1;
    padding: 10px;
    padding-left: 40px;
    font-size: 23px;
    font-weight: 600;
  
}

.styled-select:focus {
    outline: none;
}

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

.select-title::after {
    content: '⌵'; /* Utilise un caractère pour simuler une flèche */
    position: absolute;
    left: 170%; /* Ajustez en fonction de la distance souhaitée du bord */
    top: 45%;
    transform: translateY(-50%);
    pointer-events: none; /* Empêche les clics sur la pseudo-flèche */
    color: #456FE7;
    font-size: 25px;
    z-index: 5;
}

/* Style sans la flèche */
.no-arrow .select-title::after {
    content: none; /* Supprime la flèche */
}


/* POUR LES TERMINALEEEE */
/* POUR LES TERMINALEEEE */

/* POUR LES TERMINALEEEE */
/* POUR LES TERMINALEEEE */



.ChoixAbonnementHeader .Condition{
    padding: 20px;
    padding-left: 25px;
}

.ChoixAbonnementHeader .Condition .lesCondition{
    margin-left: 20px;
    color: #161616;
    font-size: 18px;
}

.ChoixAbonnementHeader .Condition .lesCondition span{
    color:#3F71EE ;
    font-weight: 400;
    cursor: pointer;
}
 
.ChoixAbonnementHeader .Condition .LEcheck{
    width: 17px;
    cursor: pointer; /* Change le curseur pour indiquer que c'est cliquable */

}

.ChoixAbonnementHeader .Lecheckout{
    width: 47vw;

}


.ChoixAbonnementHeader .Lecheckout .PAymentSecu{
    color:#161616;
    font-weight: 600;
    margin-top: 20px;
}

.ChoixAbonnementHeader .PAymentSecu{
    text-align: center; 
}

.ChoixAbonnementHeader .PAymentSecu .lePayment{
    margin-bottom: 0px;
}

.ChoixAbonnementHeader .Visa{
    width: 75px;
}

.ChoixAbonnementHeader .vraiCadenasBleu{
    width: 25px;
    margin-right: 5px;
}

.ChoixAbonnementHeader .paymentSecuCadenas{
    display: flex;
    justify-content: center;
}



@media only screen and (max-width: 1496px)  {
    .registerfiveContainer .ChoixAbonnementHeader .Facturation .containerDetailFacturation{
        width: 95%;
    }

    .styled-select {
        width: 183%;
        margin-top: 0px;
        height: 60px;
    }

    .select-title::after {
        left: 160%; /* Ajustez en fonction de la distance souhaitée du bord */
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .cardtitle{
        font-size: 20px;
        width: 100%;
    }

    .registerfiveContainer .ChoixAbonnementHeader .BleuDUR{
        font-size: 22px;
        color: #4870E2;
        font-weight: 600;
    }

    
}

@media only screen and (max-width: 1221px)  {

    .ChoixAbonnementHeader .Lecheckout{
        width: 70vw;
    
    }
}



@media only screen and (max-width: 1131px)  {

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte{
        width: 41%;
        background-color: #F2F2FD;
        border-radius: 15px;
        margin-top: -72px;
        padding: 25px;
    }
    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .cardtitle{
        font-size: 23px;
        width: 100%;
    }
    
    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .Engagement{
        font-size: 17px;
    }

    .registerfiveContainer .ChoixAbonnementHeader{
        padding-left: 40px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .Prix{
        font-size: 20px;
        margin-top: 25px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .cardtitle{
        font-size: 22px;
    }
    .registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail span{
        font-size: 22px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail{
        width: 35%;
        height: 60px;
        background-color: #F2F2FD;
        margin-top: 8px;
        border-radius: 10px;
    }
    .registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail p{
        margin-top: 4px;
    }
    
    .styled-select {
        width: 130%;
        margin-top: 2px;
        height: 50px;
    }

    .select-title::after {
        left: 120%; /* Ajustez en fonction de la distance souhaitée du bord */
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte{
        width: 45%;
    }

    .registerfiveContainer .ChoixAbonnementHeader .BleuDUR{
        font-size: 20px;
    }
}

@media only screen and (max-width: 1050px)  {

    .styled-select {
        width: 110%;
        margin-top: 2px;
        height: 50px;
    }

    .select-title::after {
        left: 110%; /* Ajustez en fonction de la distance souhaitée du bord */
    }
}

@media only screen and (max-width: 963px)  {

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .cardtitle{
        font-size: 20px;
        width: 100%;
    }
    
    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .Engagement{
        font-size: 15px;
    }

    .registerfiveContainer .ChoixAbonnementHeader{
        padding-left: 40px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .Prix{
        font-size: 20px;
        margin-top: 20px;
    }
    .select-title::after {
        left: 100%; /* Ajustez en fonction de la distance souhaitée du bord */
    }

    .styled-select {
        height: 48px;
        padding: 10px;
        padding-left: 23px;
    }
}

@media only screen and (max-width: 885px)  {


    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .cardtitle{
        font-size: 18px;
        width: 100%;
    }
    
    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .Engagement{
        font-size: 13px;
    }

    .registerfiveContainer .ChoixAbonnementHeader{
        padding-left: 40px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .cardtitle{
        font-size: 20px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail span{
        font-size: 18px;
        
    }
    .registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail span p{
        font-size: 18px;
        margin-top: 3px;
    }
    .registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail{
        width: 35%;
        height: 50px;
        background-color: #F2F2FD;
        margin-top: 8px;
        border-radius: 10px; 
    }

    .registerfiveContainer .INPUT1 {
        width: 55%;
        padding: 10px;
        border-color: #ffffff;
    }
    
    .registerfiveContainer .INPUT2 {
        width: 95%;
        padding: 10px;
        border-color: #ffffff;
    }

    .registerfiveContainer .LESLABEL{
        font-size: 18px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .Facturation .containerDetailFacturation{
        width: 95%;
        height: 470px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte{
        width: 41%;
        background-color: #F2F2FD;
        border-radius: 15px;
        margin-top: -72px;
        padding: 25px;
        height: 130px;
    }

    .select-title::after {
        left: 100%; /* Ajustez en fonction de la distance souhaitée du bord */
    }

    .styled-select {
        height: 48px;
        padding: 2px;
        padding-left: 23px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .BleuDUR{
        font-size: 15px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .cardtitle{
        font-size: 12px;
        width: 100%;
    }


}

@media only screen and (max-width: 800px)  {
    .registerfiveContainer .ChoixAbonnementHeader .Facturation .containerDetailFacturation{
        width: 95%;
    }

    .registerfiveContainer .PrixPlusAbonnement{
        display: flex;
        justify-content: space-between;
        width: 95%;
    }


    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .Prix{
        font-size: 18px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .cardtitle{
        font-size: 15px;
        width: 100%;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte{
        width: 50%;

    }
    .registerfiveContainer .INPUT1 {
        padding: 8px;
    }
    
    .registerfiveContainer .INPUT2 {
        padding: 8px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail span p{
        font-size: 16px;
        margin-top: 3px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .cardtitle{
        font-size: 17px;
    }

    .select-title::after {
        left: 95% /* Ajustez en fonction de la distance souhaitée du bord */
    }
    .styled-select {
        height: 50px;
        margin-top: 0px;
    }
    
}

@media only screen and (max-width: 690px)  {
    .styled-select {
        font-size: 18px;
        width: 110%;
        
    }

}


@media only screen and (max-width: 646px)  {
    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .Prix{
        margin-top: -10px;
        font-size: medium;
    }
    
}

@media only screen and (max-width: 570px)  {

    .registerfiveContainer .ChoixAbonnementHeader .BleuDUR{
        font-size: 13px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .cardtitle{
        font-size: 12px;
    }

    .styled-select {
        font-size: 15px;
        width: 110%;
    }

    .select-title::after {
        top: 45% /* Ajustez en fonction de la distance souhaitée du bord */;
        
        font-size: 18px;
    }


}


@media only screen and (max-width: 800px)  {
    .registerfiveContainer .ChoixAbonnementHeader .Facturation .containerDetailFacturation{
        width: 95%;
        border-radius: 8px;
        height: 680px
    }
    .registerfiveContainer .PrixPlusAbonnement{
        display: block;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte{
        width: 100%;
        height: 115px;
        margin-top: 0px;
    }

    .registerfiveContainer .ChoixAbonnementHeader{
        padding-top: 35px;
        padding-left: 12px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .Engagement{
        font-size: 14px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .Prix{
        font-size: 20px;
        margin-top: 5px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .cardtitle{
        margin-bottom: 0px;
        font-size: 23px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail span p{
        font-size: 23px;
        margin-top: 0px;
        padding-top: 8px;
        padding-left: 15px;

    }

    .registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail{
        width: 90%;
        height: 50px;
        margin-top: 10px;
        margin-bottom: 25px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .cardtitle{
        font-size: 20px;
        width: 100%;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte {
        padding: 15px;
    }

    .registerfiveContainer .headerRegister5 .fleche{
        margin-left: 0%;
        width: 50px;
        height: 43px;
    }

    .registerfiveContainer .INPUT1 {
        padding: 7px;
        width: 95%;
    }
    
    .registerfiveContainer .INPUT2 {
        padding: 7px;
        width: 95%;
    }

    .registerfiveContainer .LES5INPUT {
        display: block;
        padding: 17px;
        padding-left: 20px;
        
    }
    .registerfiveContainer .LESFLEX {
        display: block;
    }

    .registerfiveContainer .LESFLEX .INPUTDROITE {
        margin-left: 0px;
    }

    .ChoixAbonnementHeader .Condition .lesCondition{
        margin-left: 20px;
        color: #161616;
        font-size: 13px;
    }


    .ChoixAbonnementHeader .Lecheckout{
        width: 93vw;
    }

    .registerfiveContainer .ChoixAbonnementHeader .BleuDUR{
        font-size: 20px;
    }

    .registerfiveContainer .ChoixAbonnementHeader .PrixExacte .cardtitle{
        font-size: 15px;
        width: 100%;
    }

    .styled-select {
        font-size: 20px;
        width: 180%;

    }
    

}

@media only screen and (max-width: 800px)  {
    .select-title::after {
        left:160% /* Ajustez en fonction de la distance souhaitée du bord */
    }

    .styled-select {
        font-size: 20px;
        width: 180%;
    }

    .registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail{
        width: 60%;

    }
}

@media only screen and (max-width: 700px)  {


    .styled-select {
        font-size: 20px;
        width: 180%;
    }

    .registerfiveContainer .ChoixAbonnementHeader .NomAbonnementDetail{
        width: 60%;

    }
}

@media only screen and (max-width: 380px)  {
    .styled-select {
        font-size: 15px;
    }

}


@media only screen and (max-width: 333px)  {
    .registerfiveContainer .ChoixAbonnementHeader .BleuDUR{
        font-size: 17px;
    }

    .styled-select {
        font-size: 10px;
    }
}.ConditionContainer {
    position: fixed; /* Utilisez fixed pour que l'élément reste visible lors du scroll */
    width: 100vw;
    height: 100vh;
    background-color: rgba(20, 33, 61, 0.6); /* Fond semi-transparent pour mettre en avant la notification */
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 111111111111111111111 !important;
}

.backContainer1 .sidenBarCSS{
    z-index: 3;
}

.ConditionContainerBloc {
    position: relative;
    background-color: white;
    width: 100%;
    height: 100%; /* Ajustez automatiquement la hauteur en fonction du contenu */
    margin: auto;
    border-radius: 0px;
    padding: 70px;
    animation: fadeIn 0.2s ease-out; /* Animation pour l'apparition */
    overflow-y: scroll;
}

.ConditionContainer .fleche{
    width: 45px;
    position: absolute;
    top:2%;
    left:1%;
    cursor: pointer;
}

.ConditionContainer .lesP{
    font-size: 17px;
}

.ConditionContainer .lesCondition{
    color: black;
    font-size: 20px;
}

.ConditionContainer .LEcheck{
    width: 17px;
    cursor: pointer;
}

.ConditionContainer .titrePol{
    margin-top: 15px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}



/* Notif Examen petit ecrannnnnnnnnnnnnn */
/* Notif Examen petit ecrannnnnnnnnnnnnn */
/* Notif Examen petit ecrannnnnnnnnnnnnn */


@media only screen and (max-width: 990px) {
    .ConditionContainerBloc {
        width: 600px;
        height: 400px; /* Ajustez automatiquement la hauteur en fonction du contenu */
    }
}


@media only screen and (max-width: 767px) {
    /* .backContainer1 .sidenBarCSS{
        z-index: 3;
    } */
}

@media only screen and (max-width: 665px) {
    .ConditionContainerBloc {
        width: 100vw;
        height: 100vh; 
        padding: 45px;
        overflow-y: scroll;
    }

    .ConditionContainer .fleche{
        width: 40px;
        position: absolute;
        top:1%;
        left:1%;
    }

    .ConditionContainer .lesCondition{
        color: black;
        font-size: 15px;
    }


}

@media only screen and (max-width: 430px) {


    .ConditionContainerBloc h4 {
        font-size: 18px; /* Augmenter la taille de la police */
    }
    

}

@media only screen and (max-width: 330px) {


    .ConditionContainerBloc h4 {
        font-size: 18px; /* Augmenter la taille de la police */
    }

    .ConditionContainer .lesCondition{
        color: black;
        font-size: 12px;
    }
    

}




/* poppins */
.mainContainer {
    width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
    background: linear-gradient(0.25turn, #deeaff 25%, #F1ECEF 75%);
}
.backgroundWave {
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 0;
    max-width: 1100px;
    overflow: hidden;
}
.backgroundPerson {
    position: absolute;
    right: -90px;
    /* top: 0vh; */
    bottom: 0px;
    margin-bottom: 0px;
    z-index: 0;
    overflow: hidden;
    max-width: 1000px;
    object-fit: cover;
    height: 100%;
    width: 100%; 
    object-fit: contain;
    object-position: bottom;
}
.inputField {
    background-color: #69696900 !important;
    border: 0px;
    font-size: 14;
    outline: none;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #69696900 inset !important;
    -webkit-text-fill-color: black !important;
    transition: background-color 5000s ease-in-out 0s;
}
.loginContainer, .loginContainer *{
    z-index: 100000000 !important;
}
.loginContainer {
    width: 550px;
    padding-top: 8vh;
    /* margin-top: -15vh; */
}
.titleName {
    font-size: 70px;
    z-index: 100000 !important;
    max-width: 330px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.inputContainer {
    background-color: #5f5f5f14;
    position: relative;
    z-index: 1;
}
.cursor {
    cursor: pointer;
}
.checkBox {

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    width: 13px;
    height: 13px;

    padding: 2px;

    border: 2px #4970E2 solid;
    border-radius: 3px;
    position: relative;

}
.checkBox:checked {
    background-color: white;
    border: 2px #4970E2 solid;

}
.checkBox:checked::after {
    content: "";

    position: absolute;

    width: 6px;
    height: 6px;
    background-color: #4970E2;
    border-radius: 1px;
    transform: translate(-9%, -9%);
}
.connectionText {
    font-weight: 600;
    color: white;
    background-color: #4970E2;
    cursor: pointer;
    border: none;
}
.connectionText.disabled {
    opacity: 0.6;
}
.passwordText {
    color: #4970E2;
    cursor: pointer;
    font-weight: 600;
}
.icon, .appleIcon {
    cursor: pointer;
}
.appleIcon {
    margin-top: -2px;
}
a {
    text-decoration: none !important;
    cursor: pointer;
}
.errorText {
    color: red;
    position: absolute;
    bottom: -15px;
    right: 0px;
}
.googleButtonOff {
    background-color: rgba(255, 0, 0, 0) !important;
    border: 1px solid rgba(255, 0, 0, 0);
    box-shadow: none;
}
@media screen and (max-width: 768px) {
    .loginContainer {
        margin-top: 0vh;
    }
}
@media screen and (max-width: 576px) {
    .backgroundWave {
        right: -160px;
        min-width: 460px;
    }
    
    .backgroundPerson {
        right: -170px;
        min-width: 400px;
        display: none;
    }

    .loginContainer {
        width: 300px;
    }

    .connectionText {
        font-size: 14px;
    }
    
    .passwordText {
        font-size: 12px;
    }

    .loginContainer .buttonContainerLogin {
        font-size: 12px;
    }

    .errorText {
        color: red;
        position: relative;
        padding-bottom: 20px;
    }
}
@media screen and (max-width: 380px) {
    .backgroundPerson {
        display: none;
    }
}
@media (min-width: 768px) and (max-height: 650px) {
    .loginContainer {
        height: 20px;
        margin-top: -50px;
    }
}
.loginRegister .container-content {
    margin-top: 50px !important;
}
.loginRegister {
    max-height: 100dvh;
}
.loginRegister .PasswordForget {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #80838B;
    /* margin-top: 10px; */
    margin-bottom: -10px;
    cursor: pointer;
}
.loginRegister .buttonContainerLogin {
    font-size: 15px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    border-radius: 15px;
    border: 1px solid gray;
    margin-bottom: 0px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.loginRegister .account-link {
    margin-top: 20px;
}
.loginRegister .register-title {
    font-size: 30px !important;
}
.loginRegister .connect-link {
    font-weight: 600 !important;
}

.recoverMailInput {
    width: 100vw;
    height: 100vh;
    z-index: 100000001;
    position: absolute;
    top: 0px;
    left: 0px;
}

.recoverPassword {
    top: 0px !important;
    text-align: center;
    width: 100%;
    background-color: red;
}

.recoverPasswordContainer *{
    margin: auto;
    /* background-color: green !important; */
}

.recoverPasswordContainer h4 {
    margin-bottom: 0px !important;
    font-size: 27px !important;
    margin-bottom: -10px !important;
    font-weight: 800 !important;
}

.recoverPassword span {
    color: #4870e2;
}

.recoverPasswordContainer .logoCorporis {
    width: 200px;
    margin: inherit;
    width: 200px;
    margin-top: -40px;
    margin-bottom: -35px;
}

.inputRecoverMail {
    color: #161616;
    width: 300px;
    text-align: left;
}

.inputRecoverMail p {
    margin-bottom: -5px;
}

.inputRecoverMail input {
    width: 100% !important;
}

.recoverPassword .sendButton {
    padding: 2px 0px;
    width: 120px;
    font-weight: 700;
    color: white;
    font-size: 18px;
    text-align: center;
    background-color: #4870e2;
    border-radius: 20px;
    cursor: pointer;
}

.recoverPasswordContainer .returnArrow {
    position: absolute;
    width: 40px;
    left: 30px;
    top: 30px;
    cursor: pointer;
}

.textReset {
    margin-top: 10px !important;
}

@media only screen and (max-width: 407px)  {
    .recoverPasswordContainer {
        height: 480px !important;
    }

    .recoverPasswordContainer h4 {
        font-size: 20px !important;
    }

    .inputRecoverMail {
        width: 100%;
    }
}

.invalidContainer {
    height: 100vh;
    width: 90vw;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    margin: auto;
    text-align: center;
}

.invalidContainer h1 {
    margin-top: -100px;
    font-size: 40px;
    margin-bottom: 30px;
}.promo-mini {
  margin: 16px 0;
}

.promo-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.promo-input-shadcn {
  flex: 1;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.spin-icon {
  color: #6b7280;
  animation: spin 1s linear infinite;
}

.check-icon {
  color: #10b981;
}

.x-icon {
  color: #ef4444;
}

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

.error-text {
  color: #ef4444;
  font-size: 13px;
  margin-top: 6px;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .promo-input-row {
    flex-wrap: wrap;
  }
}
/* CSS avec chat du bot pleine largeur */
.IAPage {
  position: relative;
}

/* Base layout */
.IAPage.search-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #ffffff;
  overflow: hidden;
}

.IAPage .expanded-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: stretch;
  transition: opacity 0.3s ease;
}

.IAPage .expanded-view.visible {
  opacity: 1;
  pointer-events: all;
}

.IAPage .expanded-view.hidden {
  opacity: 0;
  pointer-events: none;
}

.IAPage .expanded-content {
  background-color: white;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  overflow: hidden;
  max-height: 100vh;
}

/* Header styling */
.IAPage .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  background-color: #ffffff;
  z-index: 10;
  height: 56px;
}

.IAPage .header .title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.IAPage .header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #202123;
}

.IAPage .close-button {
  cursor: pointer;
  color: #6b7280;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  transition: all 0.2s ease;
}

.IAPage .close-button:hover {
  background-color: #f3f4f6;
  color: #111827;
}

/* Main container layout */
.IAPage .ai-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  height: calc(100vh - 56px);
  background-color: #f7f7f8;
}

/* Sidebar styling */
.IAPage .sidebar {
  width: 260px;
  background-color: #ffffff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.IAPage .sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.IAPage .sidebar-header h3 {
  margin: 0 0 12px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #202123;
}

.IAPage .new-conversation-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #0077ff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.2s;
}

.IAPage .new-conversation-btn:hover {
  background-color: #0066dd;
}

.IAPage .conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.IAPage .conversation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  color: #4b5563;
  transition: background-color 0.2s;
}

.IAPage .conversation-item:hover {
  background-color: #ececf1;
}

.IAPage .conversation-item.active {
  background-color: #ececf1;
  font-weight: 600;
  color: #202123;
}

.IAPage .delete-conversation {
  visibility: hidden;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.IAPage .conversation-item:hover .delete-conversation {
  visibility: visible;
}

.IAPage .delete-conversation:hover {
  color: #ef4444;
  background-color: #fee2e2;
}

/* Chat area */
.IAPage .chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  overflow: auto;
  width: 100%;
  background-color: white;
}

.IAPage .toggle-conversations {
  position: fixed;
  top: 68px; /* 56px (header) + 12px (margin) */
  left: 12px;
  z-index: 15;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: none;
}

.IAPage .messages-container {
  flex: 1;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  background-color: white;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f3f4f6;
  max-width: 900px;
  margin: auto;
  width: 100%;
}

.IAPage .messages-container::-webkit-scrollbar {
  width: 6px;
}

.IAPage .messages-container::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.IAPage .messages-container::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 6px;
}

/* Message styling - Full width bot messages */
.IAPage .message {
  display: flex;
  margin-bottom: 12px;
  animation: fadeIn 0.3s ease-out;
  position: relative;
}

.IAPage .message.user {
  margin-left: auto;
  margin-right: 16px;
  max-width: 70%;
}

.IAPage .message.assistant {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.IAPage .bot-logo-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
}

.IAPage .bot-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f0f0f0;
  overflow: hidden;
  object-fit: cover;
  border: 1px solid rgba(174, 174, 174, 0.5);
}

.IAPage .bot-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.IAPage .bot-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.IAPage .spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid #e0e0e0;
  border-top: 2px solid #0077ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.IAPage .message-content {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  border-top-right-radius: 0px !important;
}

.IAPage .message.user .message-content {
  background-color: #0077ff;
  color: white;
  border-top-right-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.IAPage .message.assistant .message-content {
  flex: 1;
  width: auto;
  padding: 16px;
  border-radius: 8px;
  margin-top: 0;
}

/* Add message tails for user messages */
.IAPage .message.user:after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid #0077ff;
  border-right: 8px solid transparent;
}

/* Typing indicator */
.IAPage .typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0;
}

.IAPage .typing-indicator span {
  width: 6px;
  height: 6px;
  background-color: #6e6e80;
  border-radius: 50%;
  display: inline-block;
  animation: typing 1.4s infinite ease-in-out both;
}

.IAPage .typing-indicator span:nth-child(1) {
  animation-delay: 0s;
}

.IAPage .typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.IAPage .typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%,
  100% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Input area */
.IAPage .input-area {
  display: flex;
  align-items: center;
  margin: 0 auto;
  border-radius: 8px;
  position: sticky;
  bottom: 0px;
  z-index: 10;
  border-radius: 30px;
  height: auto;
  box-sizing: border-box;
}

.IAPage .message-input {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 50px 12px 16px;
  font-size: 1rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 24px;
  max-height: 200px;
}

.IAPage .message-input:focus {
  border-color: #0077ff;
  box-shadow: 0 0 0 2px rgba(0, 119, 255, 0.1);
}

.IAPage .send-button {
  position: absolute;
  right: 28px;
  background-color: transparent;
  color: #0077ff;
  border: none;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.IAPage .send-button:hover {
  background-color: rgba(0, 119, 255, 0.1);
}

.IAPage .send-button:disabled {
  color: #d1d5db;
  background-color: transparent;
  cursor: not-allowed;
}

/* Markdown formatting in messages */
.IAPage .message-content p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.IAPage .message-content p:last-child {
  margin-bottom: 0;
}

.IAPage .message-content strong {
  font-weight: 600;
}

.IAPage .message-content em {
  font-style: italic;
}

.IAPage .message-content pre {
  background-color: #f7f7f8;
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 16px 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
}

.IAPage .message.user .message-content pre {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.IAPage .message-content code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}

.IAPage .message.user .message-content code {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.IAPage .message.assistant .message-content code {
  background-color: #f7f7f8;
  color: #202123;
}

.IAPage .message-content pre code {
  background-color: transparent;
  padding: 0;
}

.IAPage .message-content ul,
.IAPage .message-content ol {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.IAPage .message-content li {
  margin-bottom: 0.5rem;
}

.IAPage .message-content h1,
.IAPage .message-content h2,
.IAPage .message-content h3,
.IAPage .message-content h4,
.IAPage .message-content h5,
.IAPage .message-content h6 {
  margin: 1.5rem 0 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.IAPage .message-content h1 {
  font-size: 1.5rem;
}

.IAPage .message-content h2 {
  font-size: 1.3rem;
}

.IAPage .message-content h3 {
  font-size: 1.2rem;
}

.IAPage .message-content h4 {
  font-size: 1.1rem;
}

.IAPage .message-content blockquote {
  border-left: 3px solid #d1d5db;
  padding-left: 1rem;
  margin: 1rem 0;
  color: #6b7280;
}

.IAPage .message-content hr {
  border: none;
  margin: 10px 0px;
}

.IAPage .message.user .message-content blockquote {
  border-left: 3px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
}

.IAPage .message-content a {
  text-decoration: underline;
}

.IAPage .message.user .message-content a {
  color: #ffffff;
}

.IAPage .message.assistant .message-content a {
  color: #0077ff;
}

.IAPage .message-content a:hover {
  text-decoration: none;
}

.IAPage .message-content table {
  border-collapse: collapse;
  margin: 1rem 0;
  width: 100%;
}

.IAPage .message-content table th,
.IAPage .message-content table td {
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
  text-align: left;
}

.IAPage .message-content table th {
  background-color: #f7f7f8;
  font-weight: 600;
}

.IAPage .message.user .message-content table th,
.IAPage .message.user .message-content table td {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.IAPage .message.user .message-content table th {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Empty state and prompt suggestions */
.IAPage .empty-state {
  margin: auto;
  font-size: 20px;
  font-weight: 500;
}

.IAPage .empty-state h3 {
  margin: 16px 0 8px;
  color: #202123;
  font-weight: 600;
  font-size: 1.2rem;
}

.IAPage .empty-state p {
  color: #6b7280;
  margin-bottom: 2rem;
  max-width: 500px;
}

.IAPage .prompt-suggestions {
  margin-top: 1.5rem;
  width: 100%;
  max-width: 600px;
}

.IAPage .prompt-suggestions h3 {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #6b7280;
  text-align: center;
  font-weight: normal;
}

.IAPage .suggestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  width: 100%;
}

.IAPage .suggestion-box {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: #f7f7f8;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.IAPage .suggestion-box:hover {
  background-color: #eff6ff;
  transform: translateY(-2px);
  border-color: #0077ff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.IAPage .suggestion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: #e9ecef;
  border-radius: 50%;
  margin-right: 1rem;
  color: #495057;
  flex-shrink: 0;
}

.IAPage .suggestion-text {
  flex: 1;
}

.IAPage .suggestion-text h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: #202123;
}

.IAPage .suggestion-text p {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0;
}

/* Loading overlay */
.IAPage .loading-overlay {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.IAPage .loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.IAPage .spinner-circle {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #0077ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.IAPage .loading-spinner p {
  font-size: 1rem;
  color: #4b5563;
  margin: 0;
}

/* Token counter */
.IAPage .remainConversationText {
  color: #6b7280;
  font-size: 0.75rem;
  position: absolute;
  top: 20px;
  right: 60px;
}

/* Responsive design */
@media (max-width: 880px) {
  .IAPage .sidebar {
    position: absolute;
    z-index: 20;
    width: 80%;
    max-width: 280px;
    height: 100%;
    transform: translateX(-100%);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  }

  .IAPage .sidebar.visible {
    transform: translateX(0);
  }

  .IAPage .toggle-conversations {
    display: flex;
  }

  .IAPage .message.user {
    max-width: 80%;
  }

  .IAPage .bot-logo-container {
    display: none;
  }

  .IAPage .bot-logo {
    display: none;
  }

  .IAPage .message.assistant .message-content {
    padding: 12px;
  }

  .IAPage .input-area {
    max-width: 100%;
    margin-bottom: 4px;
    padding: 8px 12px;
  }

  .IAPage .message-input {
    padding: 10px 40px 10px 12px;
    font-size: 0.95rem;
  }

  .IAPage .send-button {
    right: 16px;
  }

  .IAPage .suggestion-grid {
    grid-template-columns: 1fr;
  }

  .IAPage .suggestion-box {
    padding: 0.75rem;
  }

  .IAPage .suggestion-icon {
    width: 32px;
    height: 32px;
    margin-right: 0.75rem;
  }

  .IAPage .remainConversationText {
    font-size: 0.7rem;
    right: 50px;
  }

  .IAPage .delete-conversation {
    visibility: visible;
  }

  .IAPage .messages-container {
    padding: 10px;
  }
}

/* Fix for body when chat is active */
body.chat-active {
  overflow: hidden;
}

.IAPage {
  .containerDocs {
    width: 100vw;
    height: 100vh;
    position: absolute;
    margin: auto;
    background-color: #5c5c5c80;
  }

  .containerDocs {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .uploadBox {
    width: 100%;
    position: relative;
    max-width: 500px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 80dvh;
    gap: 1.25rem;
  }

  .uploadBox h1 {
    margin-top: 10px;
    text-align: center;
    font-weight: 500;
    font-size: 28px;
  }

  .uploadBox .subtitle {
    font-size: 11.5px;
    margin-top: -20px;
    text-align: center;
    color: #636363c9;
    margin-bottom: 5px;
  }

  .uploadStats {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-top: -10px;
    margin-bottom: -10px;

    * {
      color: #0077ffe8;
      font-weight: 500;
      font-size: 14px;
    }
  }

  .uploadArea {
    border: 2px dashed #5c5c5c69;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    position: relative;
  }

  .uploadIcon {
    width: 55px;
    height: 60px;
    background: url("/upload-icon.svg") center center no-repeat;
    background-size: contain;
    /* margin: 0 auto 1rem; */
    margin: auto;
    margin-top: -10px;
    margin-bottom: 10px;

    svg {
      width: 100%;
      height: 100%;
      
      fill: #0052b0 !important;
    }
  }

  .uploadText {
    font-size: 14px;
    color: #555;
  }

  .uploadLink {
    color: #0077ff;
    font-weight: 600;
    cursor: pointer;
  }

  .uploadSub {
    font-size: 11px;
    font-weight: 500;
    color: #818181e6;
  }

  .fileList {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 1rem;

    /* Cache scrollbar (fonctionne sur Webkit + Firefox + Edge) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }

  .fileList::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }

  .fileItem {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px rgba(128, 128, 128, 0.305) solid;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    position: relative;
  }

  .fileInfo {
    display: flex;
    align-items: center;
    flex-grow: 1;
    gap: 0.7rem;

    svg * {
      fill: rgba(71, 71, 71, 0.487);
    }
  }

  .fileIcon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background-color: #ccc;
  }

  .fileIcon.pdf {
    background-color: #e57373;
  }

  .fileIcon.img {
    background-color: #64b5f6;
  }

  .fileIcon.fig {
    background-color: #ba68c8;
  }

  .fileName {
    font-weight: 500;
    font-size: 14px;
    color: #333;
    word-break: break-all;
  }

  .progressBar {
    flex: 1;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
  }

  .progress {
    height: 100%;
    background-color: #0077ff;
    transition: width 0.3s ease;
  }

  .fileProgress {
    font-size: 12px;
    color: #666;
    min-width: 40px;
    text-align: right;
  }

  .removeBtn {
    background: none;
    border: none;
    font-size: 16px;
    color: #999;
    cursor: pointer;
  }

  .completed .fileDone {
    font-size: 13px;
    color: #4caf50;
    margin-left: auto;
    font-weight: 500;
  }

  .uploadActions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }

  .cancelBtn {
    background: none;
    border: none;
    color: #999;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
  }

  .attachBtn {
    background-color: #0077ff;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    color: white;
    font-weight: 600;
    font-size: 14px;
  }

  .uploadActions {
    margin-top: auto;
  }

  .uploading svg {
    width: 20px;
  }
}
/* Fond du modal */
.recording-modal-backdrop {
    position: fixed;
    inset: 0;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

/* Conteneur circulaire central avec halo animé */
.recording-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
    background-color: rgb(235, 235, 235);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


/* Texte et micro au centre */
.recording-status {
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 30px;
    padding: 6px 15px;
    padding-right: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.recording-status span {
    color: white !important;
}

/* Micro bouton central */
.mic-btn {
    background: #0f0f0f;
    border: none;
    border-radius: 50%;
    padding: 8px;
    /* color: rgb(46, 213, 255); */
    color: #0f0;
    cursor: pointer;
    transition: background 0.3s;
}

.mic-btn:hover {
    background: #111;
}

/* Boutons en bas (téléphone, options...) */
.bottom-buttons {
    display: flex;
    margin-top: 24px;
    gap: 20px;
}

/* Boutons génériques */
.control-btn {
    background: white;
    cursor: pointer;
    border: none;
    z-index: 100;
    border-radius: 50%;
    padding: 12px !important;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.control-btn:hover {
    transform: scale(1.1);
}

/* Bouton vitesse si présent */
.speed-btn {
    background: #0f0;
    color: black;
    font-weight: bold;
}

/* Animation du cercle externe */
@keyframes rotateRing {
    0% {
        transform: rotate(0deg);
    }

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

/* Animation pulsation */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.05);
        opacity: 0.2;
    }
}

/* Fermeture (croix) */
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: white;
    z-index: 10;
}

/* Conteneur horizontal micro + options */
.middleButtonContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Désactivation micro */
.disabled {
    background-color: #ffabab;
}

.disabled svg {
    color: red;
}

.blobContainer {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}


.iaButtonContainer {
    position: fixed;
    bottom: 130px;
    font-size: 12px;
    font-weight: 600;
    gap: 8px;
    border-radius: 30px;
    cursor: pointer;
    padding-right: 20px;
    margin: auto;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(240, 245, 255, 0.8));
    box-shadow:
        inset 0 0 4px rgba(255, 255, 255, 0.5),
        0 0px 10px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.4);
    height: 38px;
    color: #222;
    transition: all 0.2s ease-in-out;
}



@media (max-width: 767px) {
    .iaButtonContainer {
        bottom: 140px
    }
}

.blobVocalActual {
    position: absolute;
}.sidenBarCSS {
    /* z-index: 100000000 !important; */
    position: relative;
}

/* 
.sidenBarCSS * {
    position: relative;
    z-index: 1;
} */

.sidebarContainer {
    min-height: 100dvh;
    max-height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: #F0F4F9;
    position: fixed;
    top: 0px;
    width: 80px;
}

.topContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.userPicture {
    border-radius: 50%;
    object-fit: cover;
    min-width: 60px;
    min-height: 60px;
}

.iconsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #161616;
    width: 40px;
    height: 40px;
}

.iconsContainer.active .icon, .iconsContainer.active .icon * {
    fill: #4870E2;
}

.iconsContainer.active::before {
    content: "";
    height: 40px;
    width: 3px;
    position: absolute;
    background-color: #3F71EE;
    right: 60px;
    border-radius: 20px;
    transform-origin: center;
    animation: sidebarIndicatorReveal 0.25s ease;
}

.sidebar-active-indicator {
    will-change: transform, opacity;
    transform-origin: center;
    animation: sidebarIndicatorReveal 0.25s ease;
}

@keyframes sidebarIndicatorReveal {
    0% {
        transform: scaleY(0.2);
        opacity: 0;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* RESPONSIVE MENU */

.topContainerResponsive {
    height: 70px;
    background: white;
    z-index: 10 !important;
    position: relative;
    min-width: 100vw;
}

.whiteBack {
    background-color: white !important;
}


.iconMenu {
    cursor: pointer;
}

.containerMenuResponsive,
.responsiveContainer {
    width: 100vw;
    height: 10vh;
    overflow: hidden;
    background-color: white;
    flex-direction: column;
    /* padding-bottom: 40px; */
    margin-top: -1000px;
    position: relative;
    transition: all 0.5s;
    z-index: 100000000000000100000000000000 !important;
    right: 0px;
}

.menuActive {
    background-color: white;
}

.menuContainerLineResponsive {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    position: relative;
}

.menuContainerLineResponsive .icon {
    margin-top: 10px;
}

.menuContainerLineResponsive.active, .menuContainerLineResponsive.active .icon * {
    color: #4870E2;
    fill: #4870E2;
}

.containerMenuResponsive.active,
.containerMenuResponsive.active .responsiveContainer {
    margin-top: -42px;
    /* position: fixed; */
    top: 0px;
    transition: all 0.4s;
    height: 100dvh;
    overflow: hidden;
    overflow: hidden;
}

.responsiveContainer {
    width: 100%;
    padding: 0 40px;
    position: fixed;
    top: 0px;
}

.buttonsResponsiveContainer {
    margin-top: 160px;
}

.buttonsResponsiveContainer p {
    font-size: 28px;
    font-weight: 600;
}

.lineContainer {
    display: flex;
    align-items: center;
    position: relative;
}

.buttonsResponsiveContainer p:hover {
    color: #4870E2;
}

.titleMenu {
    font-size: 18px;
    margin-left: 25px;
}

.LargeCrossIcon {
    margin-right: 2px;
    position: absolute;
    right: 25px;
    margin-top: -80px !important;
    top: 120px;
}

.iconContainer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.sidenBarCSS .searchbar {
    background-color: white;
    height: 30px;
    margin-right: 15px;
    display: flex;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
}

.sidenBarCSS .searchbar input {
    outline: none;
    border: none;
    width: 100%;
}

.sidenBarCSS .searchIcon {
    width: 20px;
    height: 18px;
    margin: auto;
    margin-right: 10px;
}

@keyframes apparitionActive {
    0% {
        height: 0%
    }

    100% {
        height: 80%
    }
}

@media screen and (max-width: 767px) {
    .containerMenuResponsive.active .responsiveContainer {
        margin-top: -12px;
    }

    .buttonsResponsiveContainer {
        margin-top: 100px;
    }
}

@media screen and (max-width: 440px) {
    .paramsBack .iconContainer {
        width: 100%;
        padding-left: 80px;
    }

    .iconContainer {
        width: 100%;
        padding-left: 0px;
    }

    .sidenBarCSS .searchbar {
        margin-right: auto;
        margin-left: auto;
        width: 70%;
    }

    .containerMenuResponsive .menuContainerLineResponsive {
        margin-right: 0px;
        left: -10px;
    }

    .containerMenuResponsive .menuContainerLineResponsive p {
        font-size: 25px;
    }
}

@media screen and (max-width: 410px) {

    .containerMenuResponsive .menuContainerLineResponsive p {
        font-size: 22px;
    }
}

@media screen and (max-width: 370px) {

    .containerMenuResponsive .menuContainerLineResponsive p {
        font-size: 20px;
    }
}

@media screen and (max-width: 352px) {

    .containerMenuResponsive .menuContainerLineResponsive p {
        font-size: 18px;
    }
}


@media screen and (max-width: 380px) {
    .sidenBarCSS .searchbar {
        width: 60%
    }
}

.sidenBarCSS .bellContainer {
    width: 23px;
    margin-top: 4px;
    margin-right: 10px;
}

.sidenBarCSS .back-arrow-container {
    position: absolute;
    left: 0px;
    width: 30px;
    top: 5px;
    background-color: #EBF3FD;
    padding: 6px;
    border-radius: 50%;
}



@media screen and (max-width: 768px) {}.SkeletonLogo {
    border-radius: 50%;
    height: 110px;
    width: 110px;
    margin-top: 18px;
}

.blockSeanceSkeleton {
    width: 80%;
    height: 15px;
    margin-top: 55px;
}

.blockNameSkeleton {
    width: 100%;
    height: 20px;
    margin-top: 10px;
}

.skeleton-loader {
    background-color: #ddd;
}

.ProgressSeanceSkeleton {
    width: 150px;
    height: 10px;
    margin-top: 25px;

}

.skeleton-loader::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;                /* Commence hors du bloc */
    height: 100%;
    width: 100%;
    background-image: linear-gradient(
      90deg,
      rgba(221, 221, 221, 0) 0%,
      rgba(255, 255, 255, 0.566) 50%,
      rgba(221, 221, 221, 0) 100%
    );
    animation: loading 2.5s infinite;
  }
  
  @keyframes loading {
    from {
      left: -100%;
    }
    to {
      left: 100%;
    }
}

@media only screen and (max-width: 1350px)  {
    .SkeletonLogo {
        height: 95px;
        width: 95px;
        margin-top: 25px;
    }
}

@media only screen and (max-width: 1160px)  {
    .ProgressSeanceSkeleton {
        width: 115px;
    }
}

@media only screen and (max-width: 959px)  {
    .ProgressSeanceSkeleton {
        width: 160px;
    }
}

@media only screen and (max-width: 805px)  {
    .ProgressSeanceSkeleton {
        width: 110px;
    }
}

@media only screen and (max-width: 768px)  {
    .SkeletonLogo {
        height: 80px;
        width: 80px;
    }
}

@media only screen and (max-width: 658px)  {
    .ProgressSeanceSkeleton {
        width: 160px;
    }
    .SkeletonLogo {
        height: 90px;
        width: 90px;
    }
}

@media only screen and (max-width: 490px)  {
    .SkeletonLogo {
        height: 80px;
        width: 80px;
    }
}

@media only screen and (max-width: 377px)  {
    .ProgressSeanceSkeleton {
        width: 160px;
        height: 10px;
    }
    .SkeletonLogo {
        /* margin-top: 30px; */
        height: 85px;
        width: 85px;
    }
}

@media only screen and (max-width: 351px)  {
    .ProgressSeanceSkeleton {
        width: 130px;
        height: 10px;
    }

    .blockNameSkeleton {
        width: 90%;
    }
}


/* Objectif */

.imgSkeleton {
    border-radius: 50%;
    height: 100px !important;
    width: 100px !important;
}

.objectifSkeleton {
    height: 10px;
    width: 300px;
    border-radius: 5px;
    margin-top: 20px;
}
.objectifPage{
    padding-top: 200px;
}

/* HEADER */

.headerBar {
    background: linear-gradient(0.25turn,#deeaff, #F4EBEC 90%);
    min-width: 100%;
    height: 230px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 40px;
    padding-left: 180px;
}

.objectifHeader {
    padding-bottom: 0px;
}

.iconThemeContainer img {
    max-width: 70px;
    max-height: 70px;
    min-width: 70px;
    min-height: 70px;
    background-color: red;
}

.seanceText {
    display: flex;
    font-size: 24px;
    font-weight: 500;
    align-items: center;
    margin-top: 10px;
}


/* OBJECTIFS */

.objectifsContainer {
    padding-bottom: 20px;
    padding-top: 15px;
    margin-top: 20px;
    border-radius: 10px;
    margin-left: 100px;
    
    position: relative;
    overflow: hidden;
}

.objectifsContainer h4 {
    color: black;
    font-size: 30px;
    font-weight: 700;

}

.objectifsList {
    margin-top: 20px;
    position: relative;
    overflow: hidden;
    width: auto;

}

.objectifLine {
    display: flex;
    color: black;
    font-size: 15px;
    font-weight: 300;
    margin-right: 50px;
    position: relative;
    text-justify: distribute;
}

.objectifInput{
    margin-top: 4px !important;
}

.objectifLine p {
    margin-left: 20px;
    max-width: 600px;
    font-weight: 500;
}

.seeMoreButton {
    color: black;
    position: absolute;
    right: 30px;
    bottom: 15px;
    font-size: 30px;
    font-weight: 800;
    cursor: pointer;
    max-width: 25px;
    transform: rotate(90deg);
    margin-bottom: 10px;
}

.closeMoreButton {
    transform: rotate(-180deg);
}

.appleIcon {
    color: black;
}


/* BUTTON NAVIGATION */
.navigationButtonContainer {
    display: flex;
    padding-top: 70px;
    width: 80%;
    margin: auto;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;
}

.blockNavButton {
    background-color: #f0f4fc;
    width: 47.5%;
    font-size: 30px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px;
    border-radius: 15px;
    cursor: pointer;
}

.blockNavButton.rightseeMore {
    margin-left: 13px;
}
.blockNavButton.leftseeMore {
    margin-right: 13px;
}

.blockNavButton:active {
    box-shadow: #e9e9e9 -1px -1px;
}

/* PROGRESSION BAR */

.progressionContainer {
    display: none;
    position: absolute;
    right: 120px;
    width: 200px;
    height: 194px;
    border-radius: 10px;
    /* display: flex; */
    flex-direction: column;
    overflow: hidden;
}

.progressionContainer h5 {
    padding: 18px;
    padding-bottom: 10px;
    padding-left: 0px;
    width: 100%;
    color: black;
    text-align: start;
    border-radius: 10px;
    margin-left: 5px;
    font-weight: 800;
}

.statsLine {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    min-width: 180px;
}

.statsIcon {
    width: 30px;
}

.barProgression {
    width: 90px;
    background-color: black;
    height: 4px;
    border-radius: 10px;
}

.statsNumber {
    font-size: 12px;
    font-weight: 600;
    padding-top: 7px;
    margin-right: 10px;
}

.headerObjectifsStatsContainer {
    position: relative;
    background-color: #F8FAFB;
    min-height: 180px;
}

.objectifsPage .seanceText p {
    color: black;
    font-weight: 700;
    font-size: 30px;
}

.objectifsPage span.hideOnPhone {
    color: black;
    font-weight: 700;
}

.logoCategory{
    width: 100px;
    height: 110px;
    object-fit: cover;
    padding-top: 10px;
}

.logoCategory.objectiflogo {
    width: 110px;
    height: 130px;
}

@media only screen and (max-width: 1170px)  {

    .headerBar {
        height: 230px;
        padding-top: 30px;
        display: flex;
        justify-content: center;
        padding-left: 0px;
    }

    .navigationButtonContainer {
        width: 100%;
    }

    .progressionContainer {
        position: relative;
        flex-direction: row;
        width: 700px;
        margin: auto;
        height: auto;
        justify-content: space-between;
        right: inherit;
    }

    .statsContainer {
        display: flex;
        width: 65%;
    }

    .progressionContainer h5 {
        width: 200px;
        height: 100%;
        margin-bottom: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .statsLine {
        width: 190px;
        margin-bottom: 0px;
        margin-right: 20px;
    }

    .headerObjectifsStatsContainer {
        background-color: white;
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 10px;
    }

    .progressionContainer {
        margin-top: -30px;
        background-color: red;
    }

    .progressionContainer, .objectifsContainer {
        background-color: #F8FAFB;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 0px;
    }

    .objectifsContainer {
        background-color: #F8FAFB;
        padding: 20px 20px;
        margin-top: 15px;
        margin-left: auto;
        margin-right: auto;
    }

}

@media only screen and (max-width: 767px)  {
    .objectifsPage .headerBar {
        height: 180px;
        /* margin-top: -10px; */
        padding-bottom: 40px;
        width: 100vw;
        margin-right: 0px;
        margin-left: 0px;
    }
}



@media only screen and (max-width: 705px)  {
    .objectifsContainer, .objectifsList {
        padding-bottom: 30px;
    }

    .navigationButtonContainer {
        padding-bottom: 50px;
    }
}

@media only screen and (max-width: 650px)  {
    .progressionContainer {
        display: none;
    }
}

@media only screen and (max-width: 690px)  {

    span.hideOnPhone.seanceTextToHide {
        display: none;
    }


    .headerObjectifsStatsContainer {
        margin-top: -35px;
        width: 95%;
    }

    .navigationButtonContainer {
        display: block;
        padding-top: 0px;
        margin-left: 0px;
        width: 95%;
        margin-right: auto;
        margin-left: auto;
    }

    .blockNavButton {
        margin-top: 25px;
        height: 40px;
        font-size: 28px;
    }

    .blockNavButton.rightseeMore, .blockNavButton.leftseeMore {
        margin-right: auto;
        margin-left: auto;
        width: 100%;
    }

    .blockNavButton.rightseeMore {
        margin-top: 15px;
    }

    .seeMoreButton {
        width: 20px;
        bottom: 5px;
        right: 10px;
    }


    .seeMoreButton {
        margin-right: 10px;
    }

}

@media only screen and (max-width: 570px)  {
    .objectifsPage span.hideOnPhone {
        display: none;
    }

    .objectifsPage .seanceText .blueText::after {
        content: "\A"; /* This inserts a line break */
        white-space: pre; /* This makes sure the line break is respected */
    }

    .objectifsPage .seanceText p {
        font-size: 24px;
    }

    .objectifsPage .headerBar {
        justify-content: flex-start;
        padding-left: 30px;
        margin-top: 10px;
    }


}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox-wrapper-13 input[type=checkbox] {
        min-height: 16px !important;
        min-width: 16px !important;
        max-height: 16px !important;
        max-width: 16px !important;
    }

    .objectifLine.checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked:after {
        width: 5px;
        height: 12px;
        border: 1px solid #000000;
        border-top: 0;
        border-left: 0;
        top: -4px;
        background-color: #F8FAFB;
    }

    .objectifLine.checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked:before {
        content: '';
        background-color: #F8FAFB;
    }
}


@media only screen and (max-width: 575px){
    .navigationButtonContainer {
        padding-bottom: 100px;
    }
}.bellNotifsContainer {
    position: absolute;
    right: 40px;
    top: 40px;
    z-index: 10000000000000000000 !important;
}

.bellIcon {
    border-radius: 50%;
    background-color: #F0F4F9;
    padding: 6px;
    cursor: pointer;
}

@media screen and (max-width: 991px) {
    .bellNotifsContainer {
        position: absolute;
        right: -40px;
        top: 20px;
        z-index: 10000000000000000000 !important;
    }
}.seanceHome {
  .seancePageHome {
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
  }

  /* Menu */
  .head1 {
    width: 100%;
    margin-top: -20px;
  }

  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 20px;
  }

  /* Navigation par onglets */
  .modern-header {
    flex: 1;
    max-width: 400px;
  }

  .nav-tabs {
    display: flex;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    border-bottom: none !important;
  }

  .nav-tab {
    position: relative;
    padding: 12px 20px;
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    color: #626976a2;
    cursor: pointer;
    transition: all 0.25s ease;
    border-radius: 12px 12px 0 0;
    background: transparent;
  }

  .nav-tab span {
    position: relative;
    z-index: 2;
  }

  .nav-tab.active {
    color: #0077ff;
    border-bottom: 2px solid #0077ff;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: scaleX(0.8);
    }

    to {
      opacity: 1;
      transform: scaleX(1);
    }
  }

  /* Conteneur de recherche et notifications */
  .search-notification-container {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 10px;
    margin-top: 10px;
  }

  .trainingSectionContainerHomeSeance {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-color: rgba(245, 222, 179, 0);
    margin-top: -20px;

    .ts-wrap {
      margin-top: 20px;
      padding: 5px 5px;
      box-shadow: inherit !important;

      .card {
        box-shadow: 0px 0px 0px 2px #ecf0f3;
      }
    }
  }
  .titleSectionTraining {
    text-align: left;
    width: 80%;
    margin-left: 20px;
    font-size: 20px;
    font-weight: 600;
    color: #4a5568;
  }

  .FirstTitleSection {
    width: 100%;
  }

  .EnsembleNotificationC .newBellNotifsContainer {
    right: inherit;
    top: 10px;
    height: 100%;
    width: 20px;
  }

  /* Bouton de recherche */
  .search-button {
    background-color: #f0f4f9;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  .search-button:hover {
    background-color: #e6edf5;
    color: #3563e9;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  }

  .search-button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  /* Conteneur de l'input de recherche */
  /* Conteneur de l'input de recherche */
  .search-input-container {
    display: flex;
    align-items: center;
    background-color: #f0f4f9;
    border-radius: 30px;
    padding: 5px 5px 5px 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    width: 240px;
    position: relative;
    height: 42px;
    /* Pour assurer la même hauteur que le bouton de recherche */
  }

  .search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: 15px;
    color: #333;
    outline: none;
    width: calc(100% - 40px);
    /* Pour laisser de l'espace au bouton de fermeture */
    min-width: 0;
    /* Très important pour éviter les problèmes de flex */
  }

  /* Responsive */
  @media (max-width: 768px) {
    .titleSectionTraining {
      margin-left: 40px !important;
    }

    .FirstTitleSection {
      width: 80% !important;

      padding-left: 20px;
      margin-left: 20px !important;
      margin-right: auto !important;
    }

    .header-container {
      padding: 0 10px;
    }

    .slide-content {
      transition: transform 0.3s ease-in-out;
    }

    .search-notification-container {
      display: none;
    }

    .nav-tab {
      padding: 14px 0;
      font-size: 15px;
    }

    .search-input-container {
      width: 180px;
    }

    .nav-tabs {
      margin-top: -20px;
      margin-bottom: 15px;
    }

    .nav-tab.active {
      border-bottom: 2px solid #0077ff;
    }

    .nav-tab span {
      width: 100%;
      text-align: center;
    }

    .titleSectionTraining {
      text-align: left;
      margin-left: 0px !important;
      margin-top: 20px;
      width: 100%;
    }
  }

  @media (max-width: 480px) {
    .header-container {
      flex-direction: column;
      align-items: stretch;
      gap: 15px;
    }

    .modern-header {
      max-width: 100%;
    }

    .search-notification-container {
      justify-content: space-between;
      padding: 0 5px;
    }

    .search-input-container {
      width: 100%;
      max-width: 220px;
    }

    .search-button {
      width: 38px;
      height: 38px;
    }
  }

  .search-close-btn {
    background: none;
    border: none;
    color: #a0aec0;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: color 0.2s ease;
    flex-shrink: 0;
    /* Empêche le bouton de rétrécir */
  }

  .search-close-btn:hover {
    color: #4a5568;
  }

  .ComingSoon {
    padding-left: 20px;
    margin-top: 20px;
    font-weight: 600;
  }

  .EnsembleNotificationC {
    margin-right: 10px;
  }

  .EnsembleNotificationC .newBellNotifsContainer {
    margin: auto;
    height: 100%;
    width: 40px;
    align-items: center;
    justify-content: center;
    display: flex;
  }
}
.header-container {
  position: relative;
}

.matterPageHome {
  margin-top: 40px;
}

.matterPageHome {
  .category-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    align-items: stretch;
  }

  .category-card {
    height: auto;
    min-height: 222px;
    padding: 13px 18px 40px 0px;
    min-height: 160px !important;
    max-height: 200px !important;
    box-shadow: 1px 1px 15.3px 0px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer;
  }

  .category-list {
    position: relative;
  }

  .category-card:hover {
    box-shadow: 1px 1px 40.3px 0px rgba(0, 0, 0, 0.1) !important;
  }

  .seanceLogo {
    min-width: 80px;
    min-height: 80px;
    max-width: 80px;
    max-height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }

  .category-name {
    margin-right: 5px !important;
  }

  @media only screen and (max-width: 1250px) {
    .category-grid {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }

  @media only screen and (max-width: 940px) {
    .category-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      margin-top: 10px;
      max-width: 100vh;
    }

    .seanceLogo {
      min-width: 80px;
      min-height: 80px;
      max-width: 80px;
      max-height: 80px;
    }
  }

  @media only screen and (max-width: 767px) {
    .seanceLogo {
      /* margin-left: auto; */
      min-width: 70px;
      min-height: 70px;
      max-width: 70px;
      max-height: 70px;
    }

    .no-categories-container {
      gap: 20px;
    }
  }

  @media only screen and (max-width: 450px) {
    .category-header {
      padding: 0px !important;
      justify-content: left !important;
      position: relative;
      margin: 0px !important;
      margin-bottom: 40px !important;
    }
    .category-name {
      padding: 0px !important;
      margin: 0px !important;
      margin-left: 15px !important;
      width: 90% !important;
      /* padding-left: 15px !important; */
      width: 150px !important;
      max-width: 50% !important;
    }
    .seanceLogo {
      /* margin-left: auto; */
      min-width: 55px;
      min-height: 55px;
      max-width: 55px;
      max-height: 55px;
    }
  }

  @media only screen and (max-width: 400px) {
    /* .category-grid {
            grid-template-columns: repeat(1, 1fr) !important;
        } */

    .seanceLogo {
    }
  }

  .no-categories-container {
    display: flex;
    gap: 50px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    /* background-color: #f9f9f9; */
    border-radius: 12px;
    border: 1px dashed #ccc;
    text-align: center;
    color: #555;
    margin: 20px auto;
    width: 100%;
  }

  .no-categories-icon {
    font-size: 3rem;
  }

  .no-categories-text {
    font-size: 1rem;
    line-height: 1.5;
  }

  .no-categories-text strong {
    color: #3f71ee;
  }
}
.enregistrementPage {

    .nav-tab {
        margin-top: 0px;
        padding-top: 0px;
    }

    .header-container {
        padding: 0px;
    }

    .subMenuEnregistrement {
        color: rgb(103, 103, 103);
        display: flex;
        font-size: 24px;
        gap: 35px;
        font-weight: 500;
        cursor: pointer;
    }
    .subMenuEnregistrement h3.active {
        color: #0077FF;
    }

    .contentContainer {
        margin-top: 30px;
    }

    .nav-tab {
        display: block;
    }

    
    @media only screen and (max-width: 767px) {
        padding: 0 20px;
        
        .nav-tab {
            font-size: 25px;
            margin-top: -20px;
            box-shadow: none !important;
            border: none !important;
            /* display: block !important; */
            flex: inherit !important;
        }

        .subMenuEnregistrement h3 {
            font-size: 20px;
        }

        .modern-header {
            margin-bottom: -10px;
        }
    }
}.video-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999 !important;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.video-popup-overlay {

    .video-popup-container {
        width: 100%;
        height: 100%;
        margin-left: 80px;
        background-color: white;
        border-radius: 24px 24px 0 0;
        padding: 24px 0px;
        padding-left: 0px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
        transform: translateY(100%);
        transition: transform 0.4s ease-out;
        padding-top: 50px;
        overflow: auto;
        max-height: 100dvh;
    }

    .video-popup-container.visible {
        transform: translateY(0);
    }

    .video-popup-container.closing {
        transform: translateY(100%);
    }

    .video-popup-close {
        position: absolute;
        top: 16px;
        right: 20px;
        font-size: 24px;
        background: none;
        border: none;
        cursor: pointer;
        background-color: #d7e9ff;
        padding: 0px 11px 2px 11px;
        border-radius: 20px;
        color: #0077FF;
        font-weight: 500;
    }


    .video-frame-wrapper {
        flex: 1 1 0;
        /* prend l’espace disponible */
        max-width: 960px;
        /* limite la largeur sur grand écran */
        aspect-ratio: 16 / 9;
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        min-width: 300px;
        /* optionnel pour éviter d’être trop petit */
    }


    .video-frame-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 16px;
    }

    .chapter-wrapper {
        width: 260px;
        flex-shrink: 0;
        position: static;
        margin-top: 20px;
    }

    .chapter-header {
        background: #f5f8fc;
        border-radius: 12px;
        padding: 8px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        color: #1a1a1a;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
        cursor: pointer;
    }

    .chapter-toggle {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s ease;
        padding: 0;
    }

    .arrow-icon {
        transition: transform 0.3s ease, margin-top 0.3s ease;
        margin-top: -5px;
    }

    .arrow-icon.rotate {
        transform: rotate(180deg);
        margin-top: 2px;
    }



    .chapter-list {
        margin-top: 15px;
        background: #f5f8fc;
        border-radius: 12px;
        padding: 8px 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
        max-height: 300px;
        overflow-y: auto;
    }

    .chapter-list ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .chapter-list li {
        font-size: 13px;
        font-weight: 600;
        color: #1a1a1a;
        padding: 10px;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .chapter-list li:hover {
        background-color: #e4efff;
    }

    .videoContainer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 24px;
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        flex-wrap: wrap;
    }

    .videoTitle {
        font-size: 20px;
        font-weight: 600;
        margin-top: 20px;
        margin-left: 20px;
    }

    @media only screen and (max-width: 1100px) {
        .videoContainer {
            display: block;
        }

        .video-frame-wrapper {
            margin-top: 20px !important;
        }

        .chapter-wrapper {
            position: absolute;
            right: 30px;
            top: 60px;
            width: auto;
            align-items: end;
            display: flex;
            justify-content: flex-end;
            width: 100%;
            flex-direction: column;
        }

        .chapter-list {
            max-width: 250px;
        }

        .chapter-header {
            width: 120px;
            height: 35px;
            font-size: 12px;
        }

        .chapter-toggle {
            width: 20px;
            height: 20px;
        }

        .chapter-toggle svg {
            width: 19px;
            height: 19px;
            margin-top: -1px;
        }
    }


    @media only screen and (max-width: 767px) {
        .video-popup-container {
            box-shadow: inherit;
            width: 100vw !important;
            margin: 0px !important;
            padding-right: 0px !important;
            padding-left: 0px !important;
            padding-top: 75px;
        }

        .videoTitle {
            margin-left: 0px;
        }

        .videoContainer {
            padding: 0 0px;
        }

        .video-popup-close {
            /* right: 4vw; */
            display: none;
        }

        .video-frame-wrapper {
            margin-top: 40px !important;
        }

        .chapter-wrapper {
            left: 0px;
            top: 45px;
            align-items: start;
            width: 100%;
            padding: 0 0px;
            
        }
        
        .chapter-header {
            width: 100%;
            height: 32px;
            margin-top: 2px;
            box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
        }
    }

    @media only screen and (max-width: 550px) {
    }
}.pdfreader .video-popup-container {
    margin-top: 100px !important;
    padding-top: 20px;
}



.video-popup-container {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 24px 24px 0 0;
    padding-top: 60px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.4s ease-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.video-popup-container.visible {
    transform: translateY(0);
}

.video-popup-container.closing {
    transform: translateY(100%);
}

.video-popup-close {
    position: absolute;
    top: 16px;
    right: 24px;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
    transition: color 0.2s ease;
    z-index: 1000;
}

.video-popup-close:hover {
    color: #0056b3;
}

.pdfreader {
.pdf-controls {
    position: fixed;
    top: 20px;
    right: 10px;
    transform: translateX(-50%);
    background: #ffffff00;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 16px;
    z-index: 10000;
}

.pdf-controls button {
    background: #d7e9ff;
    color: #0077FF;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pdf-controls button:hover {
    background: #0056b3;
}

.pdf-controls span {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    width: 40px;
    text-align: center;
    background-color: white;
}

.pdf-document-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 30px 0;
    display: flex;
    margin-top: 0px !important;
    flex-direction: column;
    align-items: center;
    scroll-behavior: smooth;
    touch-action: auto;
    background-color: white;
}

.react-pdf__Page {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    background: white;
    margin-bottom: 24px;
    border-radius: 12px;
    overflow: hidden;
}

.react-pdf__Page canvas {
    border-radius: 12px;
    max-width: 100%;
    height: auto !important;
}
}

@media only screen and (max-width: 767px) {
    .pdf-controls {
        margin-top: 41px;
        margin-right: 0px;
        right: -40px !important;
        display: none !important;
        /* left: 0px !important; */
    }

    .pdf-controls button {
        padding: 3px 10px !important;
    }

    .pdf-document-wrapper {
        padding-top: 41px !important;
    }
}.flashcardList-main-container.section {
  width: 100%;
  max-width: 100%;
  /* Réduit légèrement la largeur maximale */
  margin: 80px auto 0;
  display: flex;
  flex-direction: column;
  padding: 0 0px;
  box-sizing: border-box;
  padding-bottom: 50px !important;
  min-height: 100dvh;
}

.pageContainer.flashcardList {
  width: 100vw;
  max-width: 100vw;
  padding: 0 50px !important;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow: hidden;
}

.cards-container .review-card,
.cards-container .category-card {
  min-width: 230px;
}

.flashcardList-main-container {
  @media (min-width: 1024px) {
    .section {
      max-width: 100%;
      /* S'assure que la section ne dépasse pas l'écran */
      box-sizing: border-box;
      /* Inclut padding et border dans la largeur totale */
    }
  }

  /* Header */
  .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
  }

  .header-title {
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    color: var(--primary-black);
    margin-bottom: 0;
  }

  @media (min-width: 768px) {
    .header-title {
      font-size: 22px;
    }
  }

  .filter-nav {
    display: none;
  }

  @media (min-width: 767px) {
    .filter-nav {
      display: flex;
      gap: 16px;
    }
  }

  @media (max-width: 767px) {
    .header {
      display: none;
    }
  }

  .filter-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    transition: color 0.3s;
    color: var(--primary-black);
  }

  .filter-button.active {
    color: var(--primary-blue);
  }

  .filter-button-text {
    font-weight: 600;
    font-size: 16px;
  }

  /* Cards container */
  .cards-container {
    width: 100%;
    display: flex;
    gap: 16px;
  }

  /* Review card */
  .review-card {
    cursor: pointer;
    width: 222px;
    min-height: 144px;
    border-radius: 24px;
    background-color: white;
    box-shadow: 1px 1px 48.3px 4px rgba(0, 0, 0, 0.1);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  @media (max-width: 768px) {
    .review-card {
      width: 165px;
      padding: 8px;
    }
  }

  .review-count {
    font-size: 45px;
    font-weight: bold;
    color: var(--primary-blue);
    margin-top: 12px;
  }

  @media (max-width: 768px) {
    .review-count {
      font-size: 40px;
    }
  }

  .review-text {
    font-size: 16px;
    font-weight: 600;
  }

  @media (max-width: 768px) {
    .review-text {
      font-size: 14px;
    }
  }

  .review-text-highlight {
    color: var(--primary-blue);
  }

  .review-icon-container {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 8px;
    background-color: #ebf3fd;
    border-radius: 50%;
    transition: box-shadow 0.3s;
  }

  .review-icon-container:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .review-icon {
    width: 30px;
    height: 30px;
  }

  @media (max-width: 768px) {
    .review-icon {
      width: 12px;
      height: 12px;
    }
  }

  /* Category card */
  .category-card {
    cursor: pointer;
    width: 290px;
    min-height: 144px;
    border-radius: 24px;
    box-shadow: 1px 1px 48.3px 4px rgba(0, 0, 0, 0.1);
    background-color: white;
    padding: 5px 16px;
    display: flex;
    padding-left: 0px !important;
    flex-direction: column;
    position: relative;
  }

  @media (max-width: 768px) {
    .category-card {
      width: 185px;
    }
  }

  .category-header {
    width: 100%;
    display: flex;
    margin-bottom: 12px;
    position: absolute;
    right: 15px;
  }

  .cards-container .category-delete-icon {
    cursor: pointer;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 10px;
    right: 0px;
  }

  @media (max-width: 768px) {
    .category-delete-icon {
      width: 18px;
      height: 18px;
    }
  }

  .category-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 42px;
    margin-top: auto;
    margin-bottom: auto;
  }

  .category-color-bar {
    width: 6px;
    height: 85px;
    border-radius: 9999px;
    margin-bottom: 4px;
  }

  .category-name {
    margin: 0 25px;
    font-weight: 600;
    font-size: 25px;
    color: var(--primary-black);
  }

  @media (max-width: 768px) {
    .category-name {
      margin: 0 12px;
      font-size: 18px;
    }
  }

  .category-color-circle-outer {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid;
    padding: 1px;
  }

  @media (max-width: 768px) {
    .category-color-circle-outer {
      width: 7.5px;
      height: 7.5px;
    }
  }

  .category-color-circle-inner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }

  /* Mobile filters */
  .mobile-filters {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
  }

  @media (min-width: 768px) {
    .mobile-filters {
      display: none;
    }
  }

  /* Card grid */
  .card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    /* Réduit l'espacement */
    margin-top: 32px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  @media (min-width: 1024px) {
    .card-grid {
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
      gap: 16px;
    }
  }

  @media (min-width: 1536px) {
    .card-grid {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      max-width: 1200px;
      /* Limite la largeur maximale de la grille */
      margin-right: auto;
      margin-left: auto;
    }
  }

  .card-grid-item {
    width: 100%;
    max-width: none;
    /* Suppression de la largeur maximale pour occuper toute la largeur */
    position: relative;
  }

  .card-grid-item-expanded {
    /* Configuration par défaut pour les grands écrans (3 colonnes) */
    grid-column: span 2;
    grid-row: span 2;
    max-width: 100%;
    min-height: 582px;
    position: relative;
    z-index: 10;
  }

  /* Configuration pour écrans moyens (2 colonnes) */
  @media (max-width: 1535px) and (min-width: 1024px) {
    .card-grid-item-expanded {
      grid-column: span 2;
      /* Prend toute la largeur sur 2 colonnes */
      grid-row: span 2;
    }
  }

  /* Configuration pour petits écrans (1 colonne) */
  @media (max-width: 1023px) {
    .card-grid-item-expanded {
      grid-column: 1;
      /* Force à prendre toute la largeur */
      grid-row: span 1;
      /* Réduit la hauteur pour les petits écrans */
      min-height: 450px;
      /* Hauteur légèrement réduite pour mobile */
    }

    .card-expanded {
      min-height: 450px;
      padding: 15px 20px;
    }

    .card-text-input {
      height: 80px;
    }
  }

  /* Expanded card */
  .card-expanded {
    width: 100%;
    height: 100%;
    min-height: 582px;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    background-color: white;
    padding: 20px 32px;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
    /* Inclut padding dans largeur */
  }

  @media (max-width: 768px) {
    .card-expanded {
      padding: 15px;
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
  }

  .card-category {
    font-size: 14px;
    font-weight: 600;
    background-color: #e2e8f0;
    padding: 2px 12px;
    border-radius: 9999px;
  }

  .card-difficulty {
    padding: 2px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: capitalize;
  }

  .card-difficulty-easy {
    background-color: #dcfce7;
    color: #166534;
  }

  .card-difficulty-medium {
    background-color: #fef3c7;
    color: #854d0e;
  }

  .card-difficulty-hard {
    background-color: #fee2e2;
    color: #991b1b;
  }

  .card-body {
    display: flex;
    flex-direction: column;
    margin-bottom: 56px;
  }

  .card-side-label {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .card-text-input {
    width: 100%;
    height: 97px;
    border-radius: 15px;
    border: 1px solid #ecf0f3;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .card-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
  }

  .card-button-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
  }

  .card-edit-button {
    cursor: pointer;
    width: 100%;
    min-width: 180px;
    height: 48px;
    border-radius: 16px;
    background-color: #ebf3fd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-blue);
    transition: background-color 0.3s;
    border: none;
  }

  .card-edit-button:hover {
    background-color: #dcedfb;
  }

  @media (min-width: 640px) {
    .card-edit-button {
      width: 279px;
    }
  }

  .card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
  }

  .card-delete-button {
    cursor: pointer;
    color: #ef4444;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    background: none;
    border: none;
  }

  .card-modify-button {
    cursor: pointer;
    min-width: 103px;
    height: 27px;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-blue);
    background-color: white;
  }

  /* Closed card */
  .card-close {
    width: 100%;
    min-height: 205px;
    height: auto;
    border-radius: 24px;
    box-shadow: 1px 1px 48.3px 4px rgba(0, 0, 0, 0.1);
    background-color: white;
    padding: 20px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  @media (max-width: 640px) {
    .card-close {
      padding: 12px 16px;
    }
  }

  .card-text {
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .card-front-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-black);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .card-back-text {
    font-size: 16px;
    font-weight: 600;
    color: #c7c7cb;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  /* Pagination */
  .pagination {
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin-top: 76px;
    margin-bottom: 40px;
  }

  .show-all-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-blue);
    margin-right: 4px;
  }

  .arrow-icon {
    cursor: pointer;
    width: 24px;
    height: 24px;
  }

  .editIcon {
    position: absolute;
    bottom: 20px;
    right: 16px;
  }

  /*  Variables  */
  :root {
    --primary-black: #1e1e1e;
    --primary-blue: #3b82f6;
  }
}

@media (max-width: 1024px) {
  .card-grid-item {
    width: 83vw !important;
  }
}

@media (max-width: 991px) {
  .card-grid-item {
    width: 90vw !important;
  }
}

@media (max-width: 870px) {
  .pageContainer.flashcardList {
    padding: 0 20px !important;
  }
  .card-grid-item {
    width: 95vw !important;
  }
}

@media (max-width: 810px) {
  .card-grid-item {
    width: 94vw !important;
  }
}

@media (max-width: 768px) {
  .flashcardList-main-container.section {
    padding-top: 5px;
    margin-top: 0px;
  }
}

@media (max-width: 636px) {
  .card-grid-item {
    width: 93vw !important;
  }
}

@media (max-width: 536px) {
  .card-grid-item {
    width: 92vw !important;
  }
}

@media (max-width: 490px) {
  .card-grid-item {
    width: 91vw !important;
  }
}

@media (max-width: 400px) {
  .card-grid-item {
    width: 89vw !important;
  }
}

@media (max-width: 360px) {
  .card-grid-item {
    width: 88vw !important;
  }
}

@media (max-width: 460px) {
  .flashcardList-main-container .mobile-filters {
    margin-top: 165px;
  }

  .cards-container {
    /* margin-top: 110px; */
  }
}

.flashcardList-main-container .card-close .card-front-text,
.flashcardList-main-container .card-close .card-back-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; /* Force l'affichage sur une seule ligne */
  max-width: 100%;
}

/* Style pour les textareas en mode édition */
.flashcardList-main-container
  .card-expanded
  .card-text-input
  textarea.card-input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  resize: none; /* Empêche le redimensionnement manuel */
  padding: 0;
  white-space: normal; /* Permet le retour à la ligne */
  word-wrap: break-word; /* Gère les mots longs */
  overflow-y: auto; /* Ajoute défilement si nécessaire */
  background-color: transparent;
  box-sizing: border-box;
}

/* Ajustements pour mobile et tablette */
@media (max-width: 1023px) {
  /* Mode édition */
  .flashcardList-main-container .card-expanded .card-text-input {
    height: auto;
    min-height: 80px;
  }

  .flashcardList-main-container
    .card-expanded
    .card-text-input
    textarea.card-input {
    min-height: 60px;
  }

  /* Mode normal - maintenir la troncature */
  .flashcardList-main-container .card-close .card-front-text,
  .flashcardList-main-container .card-close .card-back-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 1023px) {
  .flashcardList-main-container .card-expanded .card-text-input {
    min-height: 100px;
  }
}

/* Modifications pour .cards-container sur mobile */

/* Assurer que le conteneur prend toute la largeur */
.flashcardList-main-container .cards-container {
  width: 100%;
  display: flex;
  gap: 16px;
}

/* Ajustements pour mobile */
@media (max-width: 768px) {
  .flashcardList-main-container .cards-container {
    width: 100%;
    max-width: 100vw;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divise en deux colonnes égales */
    gap: 8px;
  }

  /* Plus besoin de calculer manuellement les largeurs avec Grid */
  .flashcardList-main-container .review-card,
  .flashcardList-main-container .category-card {
    width: 100%; /* Chaque carte prendra 100% de sa colonne */
    min-width: 0; /* Permet aux éléments de rétrécir en dessous de leur largeur minimale par défaut */
    box-sizing: border-box;
  }

  .category-color-circle-outer {
    width: 30px !important;
    height: 30px !important;
  }
}

/* Ajustements pour très petits écrans */
@media (max-width: 460px) {
  .flashcardList-main-container .cards-container {
    width: 90vw;
  }
}

@media (max-width: 385px) {
  .flashcardList-main-container .cards-container {
    width: 88vw;
  }
}

@media (max-width: 320px) {
  .flashcardList-main-container .cards-container {
    width: 87vw;
  }
}
.matter-page {
    position: relative;

    .logomatiere {
        width: 80px;
        height: 80px;
        object-fit: cover;
    }

    .category-content {
        justify-content: space-between;
    }

    .nameAndLineStyle {
        display: flex;
        align-items: center;
    }

    .category-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        align-items: center;
    }

    .seances-container {
        margin-top: 40px;
        display: grid;
        position: relative;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        background-color: white;
        max-width: 100vw;
        /* Ne dépasse jamais la largeur de la fenêtre */
        width: 100%;
        box-sizing: border-box;
    }

    .singleSeance:hover {
        box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.061);
    }

    .singleSeance {
        cursor: pointer;
        width: 100%;
        padding-bottom: 30px;
        margin-bottom: 5px;
        margin-top: 5px;
        box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.061);
        background-color: white !important;
        border-radius: 20px;
        position: relative;

        .timerContainer {
            display: flex;
            position: absolute;
            right: 10px;
            top: 10px;

            .timer {
                font-size: 11px;
                color: #bebebe;
                margin-left: 5px;
                font-weight: 600;
            }
        }


        .barAndName {
            display: flex;
            align-items: center;
            padding-top: 30px;
        }

        .nameContainer {
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
            /* Ajoute ça pour casser les mots longs */
            word-break: break-word;
            margin-left: 20px;
            margin-right: 20px;
            font-size: 27px;
            font-weight: 600;

            display: -webkit-box;
            -webkit-line-clamp: 1;
            /* nombre de lignes avant coupure */
            -webkit-box-orient: vertical;
            overflow: hidden;

        }

        .bar {
            background-color: rgb(230, 230, 230);
            width: 6px;
            height: 70px;
            border-radius: 20px;
        }

        .lineProgressionContainer {
            margin-top: 20px;
            padding: 0 40px;
        }

        .singleProgression {}

        .progressionTitle {
            font-size: 11px;
            font-weight: 500;
            color: #bebebe;
        }

        .subProgressionContainer {
            display: flex;
        }

        .progressionBack {
            width: 100%;
            max-width: 150px;
            height: 3px;
            margin-top: 6px;
            border-radius: 20px;
            background-color: #ECF0F3;
            margin-right: 10px;
        }

        .progressionBack.second {
            margin-right: 12px;
        }

        .progressionBack.second .progression {
            margin-right: 12px;
            background-color: #00BE64;
        }

        .progression {
            height: 100%;
            background-color: #0077FF;
        }
    }

    .category-card {
        cursor: inherit;
    }

    @media (max-width: 1100px) {
        .seances-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .cards-container {
        display: flex;
    }

    @media (max-width: 767px) {

        .back-arrow2 {
            display: none;
        }
        .header-title {
            margin-top: 10px;
        }

        .matterContainer {
            padding: 0px 20px;
            margin-top: 30px;
        }


        .category-name {
            font-size: 25px !important;
        }

        .category-card {
            width: 100%;
        }
    }

    @media (max-width: 560px) {
        .seances-container {
            grid-template-columns: repeat(1, 1fr);
            gap: 10px;
        }
    }

    @media (max-width: 460px) {
        .seances-container {
            grid-template-columns: repeat(1, 1fr);
            /* margin-top: 180px; */
        }
    }
}

.lockIcon {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 20px;
    bottom: 20px;
}.flashcardsPageContainer {
  .newBellNotifsContainer {

    position: absolute;
    right: 30px !important;
    z-index: 10000000000000000000 !important;
    cursor: pointer;
  }

  .header {
    max-width: 90;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 23px;
  }
  
  .back-arrow {
    cursor: pointer;
    position: absolute;
    width: 39px;
    height: 39px;
    left: 110px;
    top: 25px;
    background-color: #EBF3FD;
    padding: 10px;
    border-radius: 30px;
  }
  
  .header-text {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-top: 36px;
    margin-bottom: 40px;
  }
  
  .header-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    text-align: center;
    margin-bottom: 10px;
  }
  
  .header-title-dot {
    color: #2563EB; /* primary-blue */
  }
  
  .header-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    text-align: center;
  }
  
  .header-subtitle-highlight {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    color: #2563EB; /* primary-blue */
  }
  
  .header-icons {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    right: 40px;
    top: 25px;
  }
  
  .search-icon {
    cursor: pointer;
    display: none;
    width: 37px;
    height: 37px;
    background-color: #EBF3FD;
    padding: 5px;
    border-radius: 10px;
    margin-right: -10px !important;
  }
  
  .bell-icon {
    cursor: pointer;
    width: 30px !important;
    height: 30px !important;
  }
  
  .hamburger-icon {
    cursor: pointer;
    display: block;
    width: 24px;
    height: 24px;
  }
  
  @media (min-width: 768px) {
    .header {
      margin-bottom: 48px;
      margin-top: 0;
    }
  
    .header-text {
      display: flex;
    }
  
    .search-icon {
      display: block;
    }
  
    .bell-icon {
      width: 32px;
      height: 32px;
    }
  
    .hamburger-icon {
      display: none;
    }
  }
}.avoidOrverflowScroll {
    overflow: hidden !important;
}

.singleseance-page {

    .back-arrow2 {
        left: 40px;
    }

    .newBellNotifsContainer {
        z-index: 1000 !important;
    }

    .singleseanceSubcontainer {
        position: relative;
        /* margin-left: 80px; */
    }

    .singleseanceContainer {
        padding: 0px 50px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .header {
        display: flex;
        justify-content: inherit;

        h1 {
            margin-left: 20px;
            font-size: 25px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .logomatiere {
        width: 100px;
    }

    .objectifsTitle {
        margin-top: 20px;
        font-weight: 600;
    }

    .objectifSection {
        padding: 20px;
        position: relative;
        background-color: #eff0f1;
        font-weight: 500;
        font-size: 14px;
        margin-top: 10px;
        border-radius: 15px;

        .singleObjectif {
            display: flex;
            align-items: center;
            position: relative;
            margin-top: 3px;
        }

        p {
            margin-left: 15px;
            margin-top: 3px;
            padding-top: 1px;
        }

        .showMoreButtonContainer {
            text-align: right;
            position: absolute;
            right: 15px;
            bottom: 15px;
        }

        .showMoreButton {
            background-color: transparent;
            border: none;
            color: #4870E2;
            cursor: pointer;
            font-weight: 600;
        }
    }

    .contenuContainer {
        /* margin-top: 10px; */
    }

    .littleTitle {
        color: #c3c3c3;
        font-size: 15px;
        font-weight: 500;
    }








    /* titre de la page */


    .seance-title {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        font-size: 24px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .seance-title .matiere,
    .seance-title .seancename {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .separator {
        margin: 0 6px;
    }

    @media only screen and (max-width: 1000px) {
        .rightButtonContainer {
            width: 100px !important;
        }

        .singleseanceContainer {
            padding: 0 0px;
        }
    }

    @media only screen and (max-width: 767px) {
        .logomatiere {
            width: 80px;
        }

        .singleObjectif {
            font-size: 12px;
        }

        .header {
            margin-top: 10px;
        }

        .singleseanceContainer {
            padding: 0 20px;
        }

        .rightButtonContainer {
            width: 100px !important;
        }

        .progressionBarContainer {
            width: 100px;
        }

        .objectifSection {
            padding-bottom: 40px !important;
        }

        .seance-title {
            flex-direction: column;
            align-items: flex-start;
            white-space: normal;
            /* autorise le retour à la ligne */
            text-overflow: initial;
        }

        .separator {
            display: none;
        }

        .seance-title .matiere,
        .seance-title .seancename {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }
    }



    @media only screen and (max-width: 487px) {
        .singleseanceContainer {}
    }

    @media only screen and (max-width: 381px) {
        .singleseanceContainer {}
    }

    .no-content-message {
        font-style: italic;
        color: #888;
        padding-left: 10px;
        margin-top: 5px;
    }
}

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

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

.rotate-reset {
    animation: spinOnce 0.6s ease-in-out;
}


/* Checkbox */
.singleseance-page {
    .checkbox-wrapper-13 input[type=checkbox]:checked:after {
        width: 7px;
        height: 15px;
        border: 1px solid black;
        /* couleur par défaut */
        border-top: 0;
        border-left: 0;
        left: 9px;
        top: -6px;
        transform: rotate(var(--r, 20deg));
        content: '';
        display: block;
        background-color: #E6EDF9;
        position: absolute;
    }

    .checkbox-wrapper-13 input[type=checkbox]:checked {
        --r: 43deg;
    }


    @supports (-webkit-appearance: none) or (-moz-appearance: none) {
        .checkbox-wrapper-13 input[type="checkbox"].objectifInput {
            min-height: 16px !important;
            min-width: 16px !important;
            max-height: 16px !important;
            max-width: 16px !important;
        }

        .checkbox-wrapper-13 input[type="checkbox"].objectifInput:checked::after {
            content: '';
            position: absolute;
            top: -4px;
            left: 10px;
            width: 5px;
            height: 12px;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg);
            background-color: #eff0f1 !important;
        }

        .checkbox-wrapper-13 input[type="checkbox"].objectifInput:checked::before {
            content: '';
            background-color: #eff0f1 !important;
        }
    }
}

/* Paillette save animation */
.favorite-toggle:checked+.svg-icon {
    animation: bounceScale 0.4s ease-out;
}

@keyframes bounceScale {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.2);
    }

    60% {
        transform: scale(0.9);
    }

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


/* ------------------------- */
/* SKELETON STYLE GENERAL    */
/* ------------------------- */

.skeleton-box {
    background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: shimmer 5.4s ease-in-out infinite;
    border-radius: 10px;
}

@keyframes shimmer {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

/* ------------------------- */
/* HEADER SKELETON           */
/* ------------------------- */

.skeleton-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.skeleton-logo {
    width: 100px;
    height: 60px;
    border-radius: 10px;
}

.skeleton-title {
    height: 25px;
    margin-left: 20px;
    width: 60%;
}

/* ------------------------- */
/* OBJECTIF SKELETON         */
/* ------------------------- */

.skeleton-objectif-container {
    background-color: #eff0f1;
    padding: 20px;
    border-radius: 15px;
    margin-top: 10px;
}

.skeleton-objectif-line {
    height: 18px;
    width: 80%;
    margin-bottom: 12px;
}

/* ------------------------- */
/* CONTENU (VIDÉO / FICHE)   */
/* ------------------------- */

.skeleton-contenu {
    height: 40px;
    background-color: white;
    border-radius: 10px;
    padding: 0px 10px;
    box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.061);
    margin-top: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skeleton-logo-box {
    width: 35px;
    height: 30px;
    border-radius: 13px;
    flex-shrink: 0;
}

.skeleton-text {
    height: 14px;
    width: 50%;
    margin-left: 10px;
    flex-grow: 1;
}

.skeleton-progress-bar {
    height: 5px;
    width: 150px;
    margin-top: 3px;
    border-radius: 10px;
}

.skeleton-checkbox {
    width: 32px;
    height: 25px;
    border-radius: 15px;
    border: 1px solid #ccc;
}

.skeleton-right {
    display: flex;
    gap: 10px;
    align-items: center;
}


/* subcontainer video etc .. */
.subContenuContainer {
    background-color: white;
    border-radius: 10px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* espacement entre éléments */
    padding: 0px 10px;
    box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.061);
    margin-top: 7px;
    cursor: pointer;
}

.subContenuContainer:hover {
    box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.061);
}

.subContenuContainer {
    .firstline {
        display: flex;
        align-items: center;
        justify-content: start;
        overflow: hidden;
        width: 100%;
    }

    .contenuName {
        font-size: 14px;
        font-weight: 600;
        margin-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rightButtonContainer {
        width: 150px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 100%;
    }

    .svg-toggle input {
        display: none;
        position: relative;
        cursor: pointer;
    }

    .svg-toggle .svg-icon {
        color: white;
        /* remplissage par défaut */
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .svg-toggle input:checked+.svg-icon {
        color: #007BFF;
        /* remplissage actif */
    }

    .customCheckbox {
        cursor: pointer !important;
    }

    .customCheckbox input {
        display: none;
        cursor: pointer !important;
    }

    .customCheckbox .checkmark {
        margin-top: 5px;
        margin-right: 10px;
        display: flex;
        width: 32px;
        height: 25px;
        display: inline-block;
        border-radius: 15px;
        background-color: transparent;
        border: 1px solid #ccc;
        position: relative;
        transition: all 0.2s ease;
    }

    /* Fond bleu clair + coche quand activé */
    .customCheckbox input:checked+.checkmark {
        background-color: #EEF5FF;
        border-color: transparent;
    }

    .customCheckbox input:checked+.checkmark::after {
        content: '';
        position: absolute;
        top: 4px;
        left: 12px;
        width: 6px;
        height: 12px;
        border: solid #007BFF;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .progressionAndSave {
        display: flex;
        /* gap: 0.75rem; */
        flex-shrink: 0;
        align-items: center;
        height: 100%;
        position: relative;
    }

    .progressionSeanceContainer p {
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 3px;
    }

    .progressionBarContainer {
        height: 5px;
        width: 150px;
        margin-top: 0px;
        background-color: #EBF3FD;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }

    .progressionBar {
        background-color: #4870E2;
        height: 100%;
        transition: width 0.6s ease;
    }

    .progressionBar.success {
        background-color: #00BE64;
    }

    .logoContenu {
        flex-shrink: 0;
        width: 35px;
        height: 30px;
        background-color: #EBF3FD;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0077FF;
    }

    .downloadSVG {
        margin-right: 10px;
    }

    @media only screen and (max-width: 600px) {
        .subContenuContainer {
            display: block;
            height: 100px;
            padding: 10px 10px;
        }

        .contenuName {
            font-size: 12px;
        }

        .progressionAndSave {
            height: 70px;
            justify-content: space-between;
        }

        .progressionSeanceContainer {
            width: 100%;
            margin-top: -10px;
        }

        .progressionBarContainer {
            width: 100%;
        }

        .progressionSeanceContainer p {
            font-size: 11px;
            font-weight: 600;
            margin-bottom: 7px;
        }
    }
}

@media only screen and (max-width: 600px) {
    .subContenuContainer {
        display: block;
        height: 100px;
        padding: 10px 10px;
    }

    .rightButtonContainer {
        /* width: 160px !important; */
    }


    .contenuName {
        font-size: 12px;
    }

    .objectifsTitle {
        margin-top: 0px;
    }

    .progressionAndSave {
        height: 70px;
        justify-content: space-between;
    }

    .progressionSeanceContainer {
        width: 100%;
        margin-top: -10px;
    }

    .progressionBarContainer {
        width: 100%;
    }

    .progressionSeanceContainer p {
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 7px;
    }

    @media only screen and (max-width: 1000px) {
        .rightButtonContainer {
            width: 100px !important;
        }
    }

    @media only screen and (max-width: 767px) {
        .rightButtonContainer {
            width: 100px !important;
        }
    }
}


.subContenuContainer>p {
    flex-grow: 1;
    margin: 0;
}.subMenuSeance {
    margin-top: -40px;
    padding-left: 13%;
    display: flex;  
}

.subMenuSeance h3{
    margin-right: 50px;
    cursor: pointer;
    border-radius: 3px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 600;
}

.subMenuSeance h3.active {
    border-bottom: 3px #4870E2 solid;
}

.videoAndFicheContainer{
    max-width: 90%;
    display: flex;
    justify-content: center;
    overflow-y: scroll; /* Empêche le défilement vertical */
    overflow-x: hidden;
}

.logoSeanceSingleSeance{
    width: 110px;
    height: 230px;
}


.titleSingleSeanceCourse{
    font-weight: 600;
    font-size: 33px;
}


.subMenuSeance .enregistrement{
    display: none;
}

.pageContainer .shortText{
    display: none;
    
}






@media only screen and (min-width: 1544px)  {
    .videoAndFicheContainer {
        max-width: 100%;
    }
}

@media only screen and (max-width: 1250px)  {
    .videoAndFicheContainer {
        max-width: 100%;
    }
}

@media only screen and (max-width: 1170px)  {
    .videoAndFicheContainer {
        max-width: 100%;
    }
}

@media only screen and (max-width: 1024px)  {
    .videoAndFicheContainer {
        width: 100vw;
    }
}

@media only screen and (max-width: 991px)  {


    .backContainer5 .pageContainer{
        width: auto;
        height: auto;
    }
}

@media only screen and (max-width: 767px)  {
    .subMenuSeance .enregistrement{
        width: 30px;
        height: 25px;
        cursor: pointer;
        margin-top: 5px;
        display: block;
    }

    .videoAndFicheContainer{
        display: block;
        overflow-y: scroll; /* Empêche le défilement vertical */
        overflow-x: hidden;
        margin: auto;
        padding: auto;
    }
}

@media only screen and (max-width: 690px)  {
    .logoSeanceSingleSeance{
        width: 90px;
        height: 190px;
    }
    
    
    .titleSingleSeanceCourse{
        font-size: 28px;
    }

    .subMenuSeance h3{
        margin-right: 50px;
        cursor: pointer;
        border-radius: 3px;
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        font-weight: 600;
        font-size: 18px;
        margin-top: 10px;
        
    }
    .subMenuSeance .enregistrement{
        width: 30px;
        height: 25px;
        cursor: pointer;
        margin-top: 10px;
        display: block;
    }

    .pageContainer .headerBar{
        height: 170px;
    }
    

}


@media only screen and (max-width: 520px)  {
    .logoSeanceSingleSeance{
        width: 85px;
        height: 175px;
    }
    
    .titleSingleSeanceCourse{
        font-size: 20px;
    }

    .pageContainer .headerBar{
        height: 170px;
    }

    .shortText {
        font-size: 25px !important;
    }


}

@media only screen and (max-width: 435px)  {

    
    .titleSingleSeanceCourse{
        font-size: 18px;
    }

    .pageContainer .headerBar{
        height: 170px;
        justify-content: flex-start;
        padding-left: 30px;
    }

    .pageContainer .fullText{
        /* display: none; */
    }

    .pageContainer .shortText{
        display: block;
  
    }
    
}

@media only screen and (max-width: 380px)  {

    .titleSingleSeanceCourse{
        padding-right: 20px;
    }


}.VideoContainer{
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
    width: 77vw;
    position: relative;
}


.VideoContainer .Leliendelavideo{
    object-fit: cover;
    border-radius: 19px;
    width:55vw;
    height:57vh;
    overflow: hidden;
}


.VideoContainer .VideoCoupe{
    background-color:#161616 ;
    border-radius: 7px;
    height: 45px;
    display: flex;
    color: white;
    width: 18vw;
    margin-left: 1px;
}
.VideoContainer .seeMoreButton2{
    position: absolute;
    width: 30px;
    cursor: pointer;
    top:25%;
    right: 3%;
}

.descriptionContainer {
    height: 87px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limite à 3 lignes */
    -webkit-box-orient: vertical;
    white-space: normal; /* S'assure que le texte se découpe bien en plusieurs lignes */
}

.descriptionContainerOpen {
    height: auto !important; /* S'ajuste automatiquement à la taille du texte */
    overflow: visible;
    -webkit-line-clamp: unset; /* Supprime la limitation du nombre de lignes */
}


.descriptionContainer .seeMoreButton{
    color: black;
    position: absolute;
    right: 30px;
    bottom: 0px;
    font-size: 30px;
    font-weight: 800;
    cursor: pointer;
    max-width: 15px;
    transform: rotate(90deg);
    margin-bottom: 10px;
}

.descriptionContainer .seeMoreButton2{
    color: black;
    position: absolute;
    right: 30px;
    bottom: 10px;
    font-size: 30px;
    font-weight: 800;
    cursor: pointer;
    max-width: 15px;
    transform: rotate(90deg);
}

.descriptionContainer .closeMoreButton {
    transform: rotate(-90deg);
}

.VideoContainer .SousVideo{
    cursor: pointer;
    padding: 18px;
    background-color: #F5F5F7;
    margin: auto;
    font-weight: 600;
}


.VideoContainer .SousVideo.active::after{
    background-color: #8b8b8b67;
}


.VideoContainer .SousVideo.active{
    background-color: #8b8b8b67;
}


.VideoContainer .Videochapitre{
    padding: 11px;
    padding-left: 20px;
    font-weight: 700;
    font-size: 19px;
}


.VideoContainer .LesSousChapitres{
    overflow-y: scroll;
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px; 
    /* scrollbar-width: none; */
    height: 190px;

}

.VideoContainer .LesSousVideo{
    overflow-y: scroll;
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;  
    /* scrollbar-width: none; */
    max-height: 300px;
}


/* En savoir plus */

.VideoContainer .EnsavoirPlus{
    margin-top: 15px;
}

.VideoContainer .DetailChapitre .LesSousChapitres{
    margin-left: 5px;
    margin-right: 5px;
}

.VideoContainer .LesSousVideo{
    margin-left: 5px;
    margin-right: 5px;
    
}



.VideoContainer .enregistrement{
    width: 40px;
    height: 30px;
    position: absolute; /* Change `absolute` to `fixed` */
    right: 100px;
    top: 25px;
    cursor: pointer;
    
    /* Temp */
    display: none;
}


.LesLikeplusTotre{
    margin-top: 10px;
    position: relative;
}

.descriptionContainer{
    background-color: #eeeef1;
    width:59vw;
    margin-top: 15px;
    border-radius: 10px;
    padding: 10px;
    z-index: 11111;
}


.descriptionContainer2{
    background-color: #eeeef1;
    width:59vw;
    height:max-content;
    border-radius: 10px;
    margin-top: -15px;
    padding: 10px;
    padding-bottom: 20px;
}

.tailledesc2{
    width:50vw;
}

.descirpiton{
    padding: 10px;   
}


.seeMoreButton3{
    position: absolute;
    right: 25px;
    bottom:5px;
    cursor: pointer;
    z-index: 1111111111;
}

.seeMoreButton4{
    position: absolute;
    right: 25px;
    bottom:-50px;
    cursor: pointer;
    z-index: 1111111111;
}

.petittelephone {
    display: none;
}

.LesLikeplusTotre h4{
    font-weight: 550;
    font-size: 23px;
    margin-bottom: 30px;
}

.thumbnail {
    width: 60px; /* Ajustez la largeur selon vos besoins */
    height: 35px; /* Ajustez la hauteur selon vos besoins */
    margin-right: 20px; /* Espace entre l'image et le texte */
    vertical-align: middle; /* Alignement vertical */
    border-radius: 8px;
}

.VideoContainer .SousVideo{
    width: 100%;
}

.petittelephone {
    width: 95vw;
    padding-left:10px ;
    padding-right:20px ;
    justify-content: space-between;

}

.VideoContainer .enregistrement2{
    display: block;
    width: 35px;
    height: 30px;    
}



@media only screen and (max-width: 1290px)  {


    .VideoContainer .LesSousChapitres{
        overflow-y: scroll;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px; 
        scrollbar-width: none;
        height: 210px;
    
    }
    
    .VideoContainer .LesSousVideo{
        overflow-y: scroll;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;  
        scrollbar-width: none;
    }

    .VideoContainer .enregistrement{
        width: 40px;
        height: 30px;
        position: absolute;
        right: 70px;
        top: 25px;
        cursor: pointer;
    
    }

    .VideoContainer .Leliendelavideo{
        border-radius: 20px;
        width:59vw;
        height:56vh;
    }

    .VideoContainer{
        width: 83vw;
        position: relative;
    }
}

@media only screen and (max-width: 1195px)  {
    
    .VideoContainer .Leliendelavideo{
        border-radius: 20px;
        width:60vw;
        height:55vh;
    }
}

@media only screen and (max-width: 1169px)  {
    


    .VideoContainer .Leliendelavideo{
        border-radius: 20px;
        width:61vw;
        height:55vh;
    }
}

@media only screen and (max-width: 1138px)  {
    
    .VideoContainer .Leliendelavideo{
        border-radius: 20px;
        width:60vw;
        height:53vh;
    }
}

@media only screen and (max-width: 1115px)  {
    
    .VideoContainer .Leliendelavideo{
        border-radius: 20px;
        width:57vw;
        height:50vh;
    }
}

@media only screen and (max-width: 1105px)  {
    
    .VideoContainer .Leliendelavideo{
        border-radius: 20px;
        width:53vw;
        height:45vh;
    }

    .VideoContainer{
        width: 77vw;
    }
}

@media only screen and (max-width: 1070px)  {
    
    .VideoContainer .Leliendelavideo{
        border-radius: 20px;
        width:55vw;
        height:45vh;
    }

    .VideoContainer{
        width: 77vw;
    }
}

@media only screen and (max-width: 1024px)  {
    .VideoContainer{
        display: block;
        width: 73vw;
    }



    .descriptionContainer2{
        background-color: #eeeef1;
        width:73vw;
        border-radius: 10px;
        margin-top: -15px;
    }

    .descriptionContainer{
        background-color: #eeeef1;
        width:73vw;

    }

    .tailledesc2{
        width:90%;
    }

    .ChapEns{
        display: flex;
        margin-top: 10px;
        justify-content: end;
    }

    .VideoContainer .EnsavoirPlus{
        margin-top: 0px;
        
    }

    .VideoContainer .seeMoreButton2{
        right: 10px;
    }

    .TitreVideo{
        margin-top: -50px;
        margin-bottom: 50px;
        position: relative;
    }

    .VideoContainer .enregistrement{
        left: -7px;
        top: -15px;
        width: 30px;
        height: 25px;
    }

    .VideoContainer .SousVideo{
        font-size: small;
    }  

    .VideoContainer .EnsavoirPlus .LesSousVideo{
        position: relative;
        margin-right: 5px;
    }  
    
    .LesLikeplusTotre h4{
        font-weight: 550;
        font-size: 19px;
        margin-bottom: 30px;
        position: relative;
    }

    .VideoContainer .VideoCoupe{
        border-radius: 7px;
        width: 16vw;
    }

    .VideoContainer .Videochapitre{
        padding-left: 13px;
        font-size: 17px;
    }

    .VideoContainer .Leliendelavideo{
        width:75vw;
        height:60vh;
    }
}

@media only screen and (max-width: 1010px)  {
    .VideoContainer .SousVideo{
        padding: 10px;
    }

    .VideoContainer{
        width: 70vw;
    }

    .VideoContainer .Leliendelavideo{
        object-fit: cover;
        border-radius: 20px;
        width:70vw;
        height:55vh;
    }

}

@media only screen and (max-width: 992px)  {
    .VideoContainer .SousVideo{
        padding: 10px;
    }

    .VideoContainer{
        width: 70vw;
    }

    .VideoContainer .Leliendelavideo{
        object-fit: cover;
        border-radius: 20px;
        width:75vw;
        height:58vh;
    }

}

@media only screen and (max-width: 992px)  {
    .VideoContainer .SousVideo{
        padding: 10px;
    }

    .VideoContainer{
        width: 70vw;
    }

    .VideoContainer .Leliendelavideo{
        object-fit: cover;
        border-radius: 20px;
        width:65vw;
        height:50vh;
    }

    .VideoContainer{
        width: 65vw;
    }
}


@media only screen and (max-width: 992px)  {
    .VideoContainer .SousVideo{
        padding: 10px;
    }
    .VideoContainer .Leliendelavideo{
        object-fit: cover;
        border-radius: 20px;
        width:74vw;
        height:56vh;
    }

    .VideoContainer{
        width: 75vw;
    }
}

@media only screen and (max-width: 975px)  {
    .VideoContainer .SousVideo{
        padding: 10px;
    }
    .VideoContainer .Leliendelavideo{
        object-fit: cover;
        border-radius: 20px;
        width:64vw;
        height:48vh;
    }

    .VideoContainer{
        width: 65vw;
    }
}
@media only screen and (max-width: 950px)  {

    .VideoContainer .seeMoreButton2{
        width: 25px;
        top:30%;
        right: 3%;
    }
    .VideoContainer .Leliendelavideo{
        object-fit: cover;
        border-radius: 20px;
        width:64vw;
        height:47vh;
    }
    
}

@media only screen and (max-width: 935px)  {
    .VideoContainer .SousVideo{
        padding: 10px;
    }
    .VideoContainer .Leliendelavideo{
        object-fit: cover;
        border-radius: 20px;
        width:69vw;
        height:50vh;
    }

    .VideoContainer{
        width: 70vw;
    }
}

@media only screen and (max-width: 910px)  {


    .VideoContainer .SousVideo{
        font-size: small;
    }  

    .TitreVideo{
        margin-top: -50px;
        margin-bottom: 50px;
        position: relative;
    }

    .VideoContainer h5{
        font-size: 16px;
    }    



    .VideoContainer .seeMoreButton2{
        width: 25px;
        top:30%;
    }

    .LesLikeplusTotre h4{
        font-weight: 550;
        font-size: 18px;
    }

    .VideoContainer .Leliendelavideo{
        object-fit: cover;
        border-radius: 20px;
        width:69vw;
        height:48vh;
    }

    .VideoContainer{
        width: 70vw;
    }
}

@media only screen and (max-width: 875px)  {
    .VideoContainer .Leliendelavideo{
        width:69vw;
        height:47vh;
    }
}


@media only screen and (max-width: 852px)  {
    .VideoContainer .Leliendelavideo{
        width:69vw;
        height:45vh;
    }
}


@media only screen and (max-width: 830px)  {

    .LesLikeplusTotre h4{
        font-weight: 550;
        font-size: 15px;
    }

    .VideoContainer .Videochapitre{
        padding-left: 13px;
        font-size: 15px;
    }


    .VideoContainer .VideoCoupe{
        border-radius: 7px;
        height: 39px;
        display: flex;
        color: white;
    }

    .VideoContainer .Leliendelavideo{
        width:70vw;
        height:45vh;
    }
}

@media only screen and (max-width: 805px)  {

    .VideoContainer .Leliendelavideo{
        width:70vw;
        height:43vh;
    }
}

@media only screen and (max-width: 769px)  {

    .VideoContainer .Leliendelavideo{
        width:70vw;
        height:42vh;
    }
}

@media only screen and (max-width: 768px)  {

    .VideoContainer .SousVideo{
        margin: auto;
        font-size: small;
    }  

    .TitreVideo{
        margin-top: -50px;
        margin-bottom: 50px;
        position: relative;
    }

    .VideoContainer h5{
        font-size: 16px;
    }    

}



@media only screen and (max-width: 767px)  {

    .VideoContainer .Leliendelavideo{
        width:100vw;
        max-height:60vh;
        border-radius: 0px;
    } 

    .ChapEns{
        width: 98vw;
        display: flex;
    }



    .TitreVideo{
        margin-left: 10px;
        
    }

    .VideoContainer .enregistrement{
        margin-left: 10px;
    }

    .descriptionContainer{
        background-color: #eeeef1;
        width:100vw;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .descriptionContainer2{
        background-color: #eeeef1;
        width:100vw;
        border-radius: 0px;
        margin-top: -34px;
        margin-bottom: 30px;
    }

    .ChapEns{
        display: none;

    }

    .TitreVideo2{
        display: block;
    }

    .TitreVideo{
        display: none; 
    }

     .petittelephone {
        display: flex;
        margin-left: 5px;
        margin-top: 15px;
    }
    .VideoContainer .enregistrement2{
        display: block;
        width: 35px;
        height: 30px;
    }

    .VideoContainer .enregistrement{
        display: none;
    }

    .seeMoreButton3{
        position: absolute;
        right: 25px;
        bottom: 10px;
        cursor: pointer;
    }

    .VideoContainer .Leliendelavideo{
        object-fit: cover;
        width:100vw;
        height:100vh;
    }

    .tailledesc2{
        width:80vw;
    }

    

}

@media only screen and (max-width: 725px)  {
    .VideoContainer .Videochapitre{
        font-size: small;
        padding: 13px;
    } 

    .VideoContainer .VideoCoupe{
        border-radius: 7px;
        height: 40px;
    }
}

@media only screen and (max-width: 690px)  {

    .VideoContainer .Videochapitre{
        font-size: 11px;
        padding: 13px;
    }

    .VideoContainer .seeMoreButton2{
        width: 25px;
        top:28%;
        right: 3%;
    }
}
@media only screen and (max-width: 655px){
    .seeMoreButton3{
        position: absolute;
        right: 25px;
        bottom: 10px;
        cursor: pointer;
    }

    .descriptionContainer{
        background-color: #eeeef1;
        width:100vw;
        margin-top: 30px;
        margin-bottom: 30px;
    }

}



@media only screen and (max-width: 600px){

    .petittelephone {
        display: flex;
        margin-left: 5px;
        margin-top: 15px;
    }
    .VideoContainer .enregistrement2{
        display: block;
        width: 35px;
        height: 30px;
    }

    .VideoContainer .enregistrement{
        display: none;
    }


    /* .ChapEns{
        width: 98vw;
        display: flex;
        justify-content: start;
        margin-left: 5px;
    } */

    .ChapEns{
        display: none;

    }

    .TitreVideo2{
        display: block;
    }

    .TitreVideo{
        display: none; 
    }

    .VideoContainer .VideoCoupe{
        height: 40px;
        width: 36vw; 
    }

    .VideoContainer .Videochapitre{
        padding: 10px;
    } 
    
    .VideoContainer .seeMoreButton2{
        right: 20px;
        top: 12px;
    }

    .VideoContainer .Leliendelavideo{
        width:100vw;
        height:45vh;
        border-radius: 0px;
    }

}

@media only screen and (max-width: 530px)  {


    .seeMoreButton3{
        position: absolute;
        right: 25px;
        bottom: 10px;
        cursor: pointer;
    }

    .descriptionContainer{
        background-color: #eeeef1;
        width:100vw;
        /* height: 25vh; */
        margin-top: 30px;
        margin-bottom: 30px;
    }
}


@media only screen and (max-width: 480px)  {

    .VideoContainer .Leliendelavideo{
        width:100vw;
        height:40vh;
        border-radius: 0px;
    }
}
@media only screen and (max-width: 480px)  {

    .descriptionContainer{
        background-color: #eeeef1;
        width:100vw;
        /* min-height: 28vh; */
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 420px)  {

    .TitreVideo2 h4{
        display: block;
        font-size:18px;
    }

}

@media only screen and (max-width: 375px)  {


    .VideoContainer .seeMoreButton2{
        right: 10px;
        top: 15px;
        font-size: small;
        margin-left: 5px;
    }

    .descriptionContainer{
        background-color: #eeeef1;
        width:100vw;
        margin-top: 30px;
        margin-bottom: 30px;
        /* min-height: 35vh; */
    }

    .VideoContainer .Leliendelavideo{
        width:100vw;
        height:29vh;
        border-radius: 0px;
    }
}


@media only screen and (max-width: 355px)  {


    .descriptionContainer{
        background-color: #eeeef1;
        width:100vw;
        margin-top: 30px;
        margin-bottom: 30px;

    }

    .TitreVideo2 h4{
        display: block;
        font-size:18px;
    }
    .VideoContainer .Leliendelavideo{
        width:100vw;
        height:30vh;
        border-radius: 0px;
    }
}

@media only screen and (max-width: 320px)  {

    .petittelephone {
        display: flex;
        margin-left: 5px;
        margin-top: 15px;
    }

    .TitreVideo2 h4{
        display: block;
        font-size:15px;
    }

    .VideoContainer .enregistrement2{
        display: block;
        width: 30px;
        height: 25px;
    }

    .TitreVideo{
        display: none; 
    }

    .VideoContainer .VideoCoupe h5{
        font-size: small;
    }

    .VideoContainer .Videochapitre{
        padding: 11px;
    } 
    
    .VideoContainer .seeMoreButton2{
        right: 10px;
        top: 12px;
    }


    .descriptionContainer{
        background-color: #eeeef1;
        width:100vw;
        height: 38vh;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .VideoContainer .LesSousVideo{
        border-radius: 0px;
    }
    .VideoContainer .LesSousChapitres{
        border-radius: 0px;
    }
}.FicheExamContainer .emptyFile {
    max-width: 50vw;
    background-color: red;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.FicheExamContainer .ficheExamen {
    width: 100vw;
    height: 100vh;
    min-width: 100%;
}


/* .completePage {
    width: 100vw;
} */

.fullFile {
    width: 100vw;
    z-index: 10000;
    height: 100vh;
}

.fullFile .ficheExamen{
    width: 100px;
}

.FicheExamContainer .filePageDisplay{
    overflow-y: 'auto';
    overflow-x: hidden;
    max-width: 50vw !important;
    min-width: 50vw !important;
    min-height: 100vh;
    max-height: 100vh;
    position: relative;
    border-right: 2px solid #4870E2;
    scale: 1;
}

.FicheExamContainer .filePageDisplay{
    overflow-y: 'auto';
    overflow-x: hidden;
    max-width: 50vw !important;
    min-width: 50vw !important;
    min-height: 100vh;
    max-height: 100vh;
    position: relative;
    border-right: 2px solid #4870E2;
    scale: 1;
}

.FicheExamContainer .fulldisplayPageFull {
    scale: 1.3;
    min-width: 100vw;
    max-width: 100vw;
}

.singlePage *{
    max-width: 100vw;
    margin: auto;
    scale: 1;
}

.singlePageFull *{
    max-width: 70vw;
    min-width: 70vw;
    min-height: 180vh;
    max-height: 180vh;
    scale: 1;
    margin: auto;
}
.videoAndFicheContainer *{
    position: relative;
}
.videoAndFicheContainer .FicheContainer{
    overflow: hidden;
    width: 80vw;
    justify-content: center;
    display: flex;
    height: 70vh;
    position: relative;
    margin-left: 70px;
    
}
.videoAndFicheContainer .telechargement{
    width: 70px;
    cursor: pointer;
    z-index: 1;
}   

.videoAndFicheContainer .TelechargementContainer{
    position: absolute;
    bottom: 20px;
    left: 0px;
}




/* .completePage {
    width: 100vw;
} *//* .completePage {
    width: 100vw;
} *//* .completePage {
    width: 100vw;
} *//* .completePage {
    width: 100vw;
} *//* .completePage {
    width: 100vw;
} */

.videoAndFicheContainer .tailleFiche{
    width: 88%;
    z-index: 0;
    height: 100vh;
}

.videoAndFicheContainer .enregistrement1{
    width: 40px;
    height: 30px;
    position: absolute;
    right: 50px;
    top:25px;
    cursor: pointer;

    /* Temp */
    display: none;
}



.videoAndFicheContainer .FicheExamContainer .emptyFile {
    max-width: 50vw;
    background-color: rgb(166, 144, 144);
    height: 50vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin-top: 3px;
    padding:auto ;
    margin: auto;
}


/* .completePage {
    width: 100vw;
} */


.videoAndFicheContainer .fullFile {
    width: 50vw;
    margin: auto;
    padding: auto;
    height: 100vh;
}



.videoAndFicheContainer .FicheExamContainer .filePageDisplay{
    overflow-y: scroll;
    overflow-x: hidden;
    max-width: 50vw !important;
    min-width: 50vw !important;
    min-height: 50vh;
    max-height: 60vh;
    position: relative;
    border-radius: 5px;
    border: none;
    scale: 1.3;
    scrollbar-width: none;
    padding-top: 80px;
    padding-bottom: 20px;
    /* Masque les barres de défilement */
    -ms-overflow-style: none;  /* Pour Internet Explorer et Edge */
    scrollbar-width: none;     /* Pour Firefox */

    
}


.videoAndFicheContainer .FicheExamContainer .fulldisplayPageFull {
    scale: 1.3;
    min-width: 100vw;
    max-width: 100vw;
}



@media only screen and (max-width: 1220px){
    .videoAndFicheContainer .FicheContainer{
        height: 67vh;
        width: 90vw;
        margin-left: 0px;
    }
    
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        overflow-x: hidden;
        max-width: 80vw !important;
        min-width: 60vw !important;
    }

    .videoAndFicheContainer .fullFile {
        width: 55vw;
        margin: auto;
        padding: auto;
        height: 100vh;
    }

    
}



@media only screen and (max-width: 1035px){
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        scale:1.4;
    }

    .videoAndFicheContainer .fullFile {
        width: 65vw;
        margin: auto;
        padding: auto;
        height: 100vh;
    }
}

@media only screen and (max-width: 930px){
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        scale:1.2;
        padding-top: 40px;
    }

    .videoAndFicheContainer .fullFile {
        width: 75vw;
        margin: auto;
        padding: auto;
        height: 100vh;
    }
}


@media only screen and (max-width: 850px){


    
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        overflow-y: 'auto';
        overflow-x: hidden;
        max-width: 73vw !important;
        min-width: 78vw !important;
        min-height: 68vh;
        max-height: 65vh;
        scale: 1;
        padding-top: 10px;
    }

    .videoAndFicheContainer .telechargement{
        width: 50px;
        cursor: pointer;
        z-index: 1;
    }   

    .videoAndFicheContainer .FicheContainer{
        width: 85vw;
    }

}



@media only screen and (max-width: 767px){
    .videoAndFicheContainer .enregistrement1{
        display: none;
    }

    .videoAndFicheContainer .FicheContainer{
        height: 60vh;
        width: 100vw;
        margin-left: 0px;
    }

    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        min-height: 30vh;
        max-height: 60vh;
        max-width: 85vw !important;
        min-width: 90vw !important;
        scale: 1;
    }

    .pageSingleFiche {
        min-height: 0vh !important ;
    }

    .videoAndFicheContainer .fullFile {
        width: 100vw;
    }

    .videoAndFicheContainer .telechargement{
        left: 10px;
    }   

}


@media only screen and (max-width: 690px){

    .videoAndFicheContainer .FicheContainer{
        height: 68vh;
        width: 100vw;
        display: block;
    }
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        min-height: 30vh;
        max-height: 70vh;
        max-width: 80vw !important;
        min-width: 100vw !important;
        scale: 1;
    }
}

@media only screen and (max-width: 615px){

    .videoAndFicheContainer .fullFile {
        width: 100vw;
    }
}



@media only screen and (max-width: 615px) {
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay {
        scale: 0.8;
    }
    .videoAndFicheContainer .singlePage * {
        max-width: 200vw;
    }
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        min-height: 30vh;
        max-height: 80vh;
        max-width: 10vw !important;
        min-width: 140vw !important;
        margin-left: -95px;
        margin-top: -40px;
    }
}

@media only screen and (max-width: 540px) {
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay {
        scale: 0.8; /* Réduction du scale */
    }

    .videoAndFicheContainer .singlePage * {
        max-width: 200vw;
    }

    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        min-height: 30vh;
        max-width: 10vw !important;
        min-width: 140vw !important;
        margin-left: -95px;
        margin-top: -30px;
    }
}

@media only screen and (max-width: 490px) {
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay {
        scale: 0.7; /* Réduction supplémentaire du scale */
    }
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        min-height: 30vh;
        max-height: 90vh;
        max-width: 10vw !important;
        min-width: 140vw !important;
        margin-left: -90px;
        margin-top: -80px;
    }

 
}

@media only screen and (max-width: 430px) {
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay {
        scale: 0.6; /* Encore une réduction du scale */
    }

    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        min-height: 30vh;
        max-height: 105vh;
        max-width: 10vw !important;
        min-width: 160vw !important;
        margin-left: -120px;
        margin-top: -170px;
        padding-bottom: 250px;
    }

    .videoAndFicheContainer .singlePage * {
        max-width: 240vw;
    }

    .videoAndFicheContainer .telechargement{
        left: 10px;
        top: 0px;
    }   

    .videoAndFicheContainer .FicheContainer{
        height: 58vh;
        width: 100vw;
        display: block;
    }

}

@media only screen and (max-width: 379px) {
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay {
        scale: 0.5; /* Finalement, réduction jusqu'à 0.5 */
    }

    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        min-height: 30vh;
        max-height: 130vh;
        max-width: 10vw !important;
        min-width: 180vw !important;
        margin-left: -140px;
        margin-top: -200px;
    }
}

@media only screen and (max-width: 340px) {
    .videoAndFicheContainer .FicheExamContainer .filePageDisplay {
        scale: 0.5; /* Finalement, réduction jusqu'à 0.5 */
    }

    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        min-height: 30vh;
        max-height: 140vh;
        max-width: 10vw !important;
        min-width: 200vw !important;
        margin-left: -150px;
        margin-top: -230px;
    }
}



/* @media only screen and (max-width: 490px){
    .videoAndFicheContainer .tailleFiche{
        margin-left: -410px;
        width: 45%;
    }   

    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        scale: 0.75;
        max-width: 140vw !important;
        min-width: 140vw !important;
        min-height: 80vh;
        max-height: 100vh;
        margin-top: -80px;
    }
}


@media only screen and (max-width: 400px){
    .videoAndFicheContainer .tailleFiche{
        margin-left: -410px;
        width: 45%;
       
    }   

    .videoAndFicheContainer .FicheExamContainer .filePageDisplay{
        scale: 0.75;
        max-width: 145vw !important;
        min-width: 145vw !important;

        margin-top: -80px;
    }



    .videoAndFicheContainer .telechargement{
        left: 110px;
    }  

  
} */




.seanceEntrainements .headerBar {
    height: 155px;
    padding-top: 70px;
}

.seanceText span.seanceTitleSpan {
    color: #4870E2;
    font-weight: 700;
}

.seanceEntrainements .headerBar * {
    font-weight: 700;
}

.traitSeparation {
    color: black;
    margin-left: 5px;
    margin-right: 5px;
}

.entrainementMainContainer {
    width: 95%;
    margin: auto;
    margin-top: 20px;
}

.entrainementTitleContainer {
    background-color: #f2f2fd;
    height: 100px;
    display: flex;
    align-items: center;
    padding-left: 50px;
    padding-right: 50px;
}

.entrainementTitleContainer h2 {
    width: 100%;
    font-weight: 700;
}


.singleExercise {
    background-color: #F4F6FB;
    margin-top: 20px;
    height: 70px;
    display: flex;
    align-items: center;
    padding-left: 50px;
    padding-right: 50px;
    justify-content: space-between;
}

.singleExercise .progressionContainerEntrainement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.singleExercise .pourcentage {
    font-size: 18px;
    font-weight: 700;
}

.singleExercise .progressionContainerEntrainement p {
    margin: auto;
    margin-right: 15px;
}

.singleExercise .progressionBar {
    min-width: 120px;
    height: 6px;
}

.singleExercise h4 {
    font-weight: 700;
}

@media screen and (max-width: 767px) {
    .seanceEntrainementPage .headerBar {
        height: 100px;
        margin-top: -20px;
        padding-bottom: 60px;
        width: 100vw;
        margin-right: 0px;
        margin-left: 0px;
    }

    .hideOnPhone{
        display: none;
    }

    .seanceEntrainementPage .headerBar{
        padding-top: 90px;
    }
}

@media screen and (max-width: 415px) {
    .seanceEntrainementPage .headerBar{
        padding-top: 120px;
        background-color: red;
        padding-right: 20px;

    }
}

.statsEntrainements {
    display: flex;
    margin-top: 10px;
    margin-right: 200px;
}

.statsEntrainements .statsLine {
    display: block;
}

.statsEntrainements .statsLineFlex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.statsEntrainements .statsLineFlex p {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 15px;
    font-weight: 800;
}

.statsEntrainements .barProgression {
    height: 8px;
    width: 110px;
}

.statsEntrainements .statsNumber {
    font-weight: 700;
}

.statsEntrainements .rightContainer {
    margin-left: 80px;
}

@media screen and (max-width: 1250px) {
    .statsEntrainements {
        margin-right: 20px;
    }
}

@media screen and (max-width: 960px) {
    .statsEntrainements {
        margin-right: 0px;
    }

    .statsEntrainements .rightContainer {
        margin-left: 0px;
    }
}

@media screen and (max-width: 690px) {
    .statsEntrainements {
        display: none;
    }
}.entrainementMainContainer {
    padding-bottom: 20px;
}
.reinitialisationContainer {
    display: flex;
    width: auto;
    margin: auto;
    cursor: pointer;
    width: auto;
}

.reinitialisationSVG{
    fill: #4870E2;
    width: 24px;
}

.reinitialisationContainer p {
    margin: auto;
    font-weight: 700;
    padding-left: 10px;
    white-space: nowrap
}

.entrainementTitleContainer {
    height: 100px;
    width: 100%;
}

.entrainementTitleContainer *{
    font-weight: 600;
}

.entrainementTitleContainer h2{
    margin-left: 20px;
    font-size: 29px;
    margin-top: 5px;
}

.validateButton {
    background-color: #4870E2;
    width: 160px;
    margin: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 30px;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.retourButton {
    width: 200px;
}

.validateButton:hover{
    opacity: 0.9;
}

.validateButton.disabled {
    opacity: 0.8;
    cursor: default;
}

.seanceEntrainements .seanceText {
    white-space: nowrap;
    width: auto;
}

.seanceEntrainements .seanceText p {
    white-space: nowrap;
    width: 100%;
    font-size: 30px;
}


@media only screen and (max-width: 960px)  {

    .entrainementTitleContainer {
        padding-left: 30px;
        padding-right: 30px;
    }

    .entrainementTitleContainer h2{
        margin-left: 0px;
        font-size: 25px;
        margin-top: 5px;
    }
}


@media only screen and (max-width: 767px)  {
    .quizPage .entrainementMainContainer {
        padding-bottom: 20px ;
    }
}

@media only screen and (max-width: 620px)  {
    .entrainementTitleContainer {
        padding-right: 30px;
        padding-left: 30px;
    }

    .seanceEntrainements .headerBar {
        margin-top: -40px;
    }

    .entrainementMainContainer {
        width: 100%;
    }
}

@media only screen and (max-width: 575px)  {
    .quizPage .entrainementMainContainer {
        padding-bottom: 60px ;
    }
}


@media only screen and (max-width: 540px)  {
    
    .singleExercise {
        padding-right: 30px;
        padding-left: 30px;
    }

    .entrainementTitleContainer h2{
        font-size: 23px;
    }

    .reinitialisationContainer {
        font-size: 16px;
    }

    .seanceEntrainements .seanceText *{
        font-size: 26px !important;
    }

    .seanceEntrainements .iconThemeContainer {
        width: 70px;
        height: 70px;
    }
}

@media only screen and (max-width: 420px)  {
    .singleExercise h4 {
        font-size: 20px;
    }

    .singleExercise .progressionBar {
        min-width: 100px !important;
        max-width: 100px !important;
    }

    .reinitialisationContainer {
        font-size: 14px;
    }

    .reinitialisationSVG {
        width: 20px;
    }

    .seanceEntrainements .seanceText *{
        font-size: 24px !important;
    }

    .seanceEntrainements .iconThemeContainer {
        width: 70px;
        height: 70px;
    }
}

@media only screen and (max-width: 380px)  {

    .entrainementTitleContainer h2{
        font-size: 20px;
    }

    .seanceEntrainements .seanceText *{
        font-size: 23px !important;
    }

    .seanceEntrainements .iconThemeContainer {
        width: 60px;
        height: 60px;
    }

    .singleExercise h4 {
        font-size: 18px;
    }

    .pourcentage {
        font-size: 15px;
    }

    .singleExercise .progressionBar {
        min-width: 80px !important;
        max-width: 80px !important;
    }
}.questionContainer {
    width: 97%;
    background-color: #F0F4FC;
    height: auto;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.questionHeader {
    height: 70px;
    padding-left: 70px;
    padding-right: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.questionHeader * {
    font-weight: 700;
}

.questionHeader h5{
    margin-top: 5px;
}

.questionFooter {
    min-height: 65px;
    padding-bottom: 25px;
}

.questionContent {
    height: auto;
    padding-left: 30px;
    padding-right: 40px;
    padding-top: 30px;
    padding-bottom: 20px;
    background: linear-gradient(to right, #e6edf9, #efecf1 70%);
    position: relative;
}

.optionsImage {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.imageContainer {
    min-height: 209px;
    min-width: 280px;
    max-height: 209px;
    max-width: 280px;
    margin-right: 20px;

    height: 215px;
    width: 420px;
    background-color: white;
    border-radius: 10px;
    object-fit: contain;
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
}

.questionText {
    font-weight: 700;
    font-size: 18px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: -5px;
    margin-bottom: 25px;
}

.questionText:first-letter {
    text-transform: capitalize;
}

.singleAnswerContainer {
    display: flex;
    align-items: center;
    margin-top: 15px;
}


.singleAnswerContainer label{
    margin-left: 25px;
    padding-right: 50px;
    font-weight: 500;
}

.singleAnswerContainer label.blueLabel {
    color: #4870E2;
}

.singleAnswerContainer label.blackLabel {
    color: black;
}

.questionFooter .titleCorrection {
    margin-left: 50px;
    margin-top: 18px;
    display: flex;
}

.questionFooter .checkCircle {
    width: 22px;
    height: 22px;
}

.questionFooter .correctionTitle {
    margin-left: 15px;
    font-size: 18px;
    margin-top: -3px;
    font-weight: 600;
    color: #4870E2;
}

.questionFooter .correctiontext {
    display: block;
    padding-bottom: 20px;
    margin-left: 115px;
    margin-right: 115px;
    font-family: inherit;
    font-weight: 500;
    font-size: 17px;
}

.scoreContainer {
    display: flex;
}

.scoreText {
    padding-left: 50px;
}


/* INPUT */


@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox-wrapper-13 input[type=checkbox] {
      --active: #275EFE;
      --active-inner: red;
      --focus: 2px rgba(39, 94, 254, .3);
      --border: #BBC1E1;
      --border-hover: #275EFE;
      --background: #fff;
      --disabled: #40549e;
      --disabled-inner: #E1E6F9;
      -webkit-appearance: none;
      -moz-appearance: none;
      min-height: 18px;
      min-width: 18px;
      max-height: 18px;
      max-width: 18px;
      border-radius: 3px;
      outline: none;
      display: inline-block;
      vertical-align: top;
      position: relative;
      margin: 0;
      cursor: pointer;
      border: 1px solid #222222;
      transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
      background-color: #1c212f00;
    }

    .checkbox-wrapper-13 input[type=checkbox]:after {
      content: "";
      display: block;
      left: 0;
      top: 0;
      position: absolute;
    }


    .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked:after {
        width: 7px;
        height: 15px;
        /* border: 1px solid #1c47c0; */
        border-top: 0;
        border-left: 0;
        left: 9px;
        top: -6px;
        transform: rotate(var(--r, 20deg));
        content: '';
        display: block;
        background-color: #E6EDF9;
    }
    
    .checkbox-wrapper-13 input[type=checkbox].blackInput:checked:after {
        border-color: black;
    }
      
    .checkbox-wrapper-13 input.blueInput{
        border: 1px solid #4870E2;
    }

    .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked:before {
        width: 7px;
        position: absolute;
        height: 15px;
        left: 13px;
        top: -5px;
        transform: rotate(var(--r, 20deg));
        content: '';
        display: block;
        background-color: #E6EDF9;
    }

    .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
      --r: 43deg;
    }


    /* ANSWERS COLOR */
    /* CHECKBOX */
    .checkbox-wrapper-13 input.answerInputred{
        border: 1px solid #FF5757;
    }
    .checkbox-wrapper-13 input[type=checkbox].answerInputred:checked:after {
        border-color: #FF5757;
    }

    .checkbox-wrapper-13 input.answerInputgreen{
        border: 1px solid #49BF69;
    }
    .checkbox-wrapper-13 input[type=checkbox].answerInputgreen:checked:after {
        border-color: #49BF69;
    }

    /* LABELS */
    .singleAnswerContainer label.answerInputred {
        color: #FF5757;
    }
    .singleAnswerContainer label.answerInputgreen {
        color: #49BF69;
    }
}

@media only screen and (max-width: 1015px)  {
    .optionsImage {
        flex-direction: column-reverse;
    }

    .imageContainer {
        margin-top: 20px;
        margin: auto;
        margin-bottom: 20px;
    }

    .singleAnswerContainer label{
        margin-left: 20px;
        padding-right: 0px;
    }

    .correctiontext {
        margin-left: 50px !important;
        margin-right: 50px !important;
    }
}


@media only screen and (max-width: 767px)  {
    .questionHeader {
        padding-left: 50px;
        padding-right: 50px;
    }

    .questionContainer {
        width: 100%;
    }

    .questionText {
        margin-left: 0px;
        margin-right: 0px;
        font-size: 17px;
    }

    .singleAnswerContainer label {
        font-size: 15px;
    }

    .correctionTitle {
        margin-left: 15px;
    }
    
    .correctiontext {
        margin-left: 30px !important;
        margin-right: 30px !important;
    }

    .titleCorrection {
        margin-left: 30px;
    }
}


@media only screen and (max-width: 620px)  {
    .questionContent {
        padding-left: 25px;
        padding-right: 25px;
    }

    .questionHeader {
        padding-left: 30px;
        padding-right: 30px;
    }
}


@media only screen and (max-width: 450px)  {
    .questionText {
        margin-left: 5px;
        font-size: 16px;
    }

    .questionContent {
        padding-left: 15px;
        padding-right: 15px;
    }
}



.zoomButton {
    width: 30px;
    position: absolute;
    z-index: 10000;
    right: -10px;
    top: -10px;
    cursor: pointer;
}

.maxContainerZoom {
    background-color: #14213dc7;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    
    z-index: 20000000000000000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.containerMiniImage {
    position: relative;
    margin-top: -100px;
    width: 800px;
    height: 600px;
}

.containerMiniImage .imageContainer {
    object-fit: contain;
    background-color: white;
    min-height: 600px;
    min-width: 800px;
    max-height: 600px;
    max-width: 800px;
}

.containerMiniImage .zoomButton {
    right: -10px;
    background-color: white;
    border-radius: 50%;
    width: 40px;
}


@media only screen and (max-width: 870px)  {
    .containerMiniImage {
        width: 700px;
        height: 600px;
    }

    .containerMiniImage .imageContainer {
        min-height: 600px;
        min-width: 700px;
        max-height: 600px;
        max-width: 700px;
    }
}


@media only screen and (max-width: 740px)  {
    .containerMiniImage {
        width: 500px;
        height: 400px;
    }

    .containerMiniImage .imageContainer {
        min-height: 400px;
        min-width: 500px;
        max-height: 400px;
        max-width: 500px;
    }
}


@media only screen and (max-width: 545px)  {
    .containerMiniImage {
        width: 400px;
        height: 300px;
    }

    .containerMiniImage .imageContainer {
        min-height: 300px;
        min-width: 400px;
        max-height: 300px;
        max-width: 400px;
    }
}


@media only screen and (max-width: 450px)  {
    .containerMiniImage {
        width: 300px;
        height: 200px;
    }

    .containerMiniImage .imageContainer {
        min-height: 200px;
        min-width: 300px;
        max-height: 200px;
        max-width: 300px;
    }
}.examPage{
    overflow-y: none;
    height: 100vh;
    display: flex;
}

.fullPageDiv {
    width: 100vw;
    padding-left: 50px;
    padding-right: 50px;
    margin-top: 20px;
}

.examPartRight span {
    color: #4870E2;
}

.examPartRight {
    overflow-y: auto;
    max-height: 100vh;
}

.examPage .retourArrow{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100000;
    width: 50px;
    cursor: pointer;
}

.zoomArrow {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 100000;
    width: 32px;
    cursor: pointer;
}

.dezoomArrow {
    position: fixed;
    top: 15px;
    left: 25px;
    z-index: 100000;
    width: 35px;
    cursor: pointer;
}

.examPartRight {
    background-color: white;
}

.examPartRight h3 {
    font-size: 28px;
    margin-top: 35px;
    margin-left: 40px;
}

.divisionPage {
    width: 50vw;
    position: relative;
}

.totalPage {
    width: 100vw;
    position: relative;
    position: absolute;
    z-index: 10000;
}

.examPartRight .questionHeaderExam {
    margin-top: 30px;
}

.examPartRight .questionHeaderExam .titleQuestionExam{
    color: #4870E2;
    text-decoration: underline;
    font-size: 17px;
    font-weight: 700;
}


.examPartRight .questionContentExam, .examPartRight .questionHeaderExam .titleQuestionExam{
    margin-left: 55px;
    margin-right: 50px;
}

.examPartRight .questionContentExam .questionTextExam {
    font-weight: 00;
    margin-top: 25px;
    font-weight: 600;
}


.examPartRight .singleAnswerContainerExam {
    display: flex;
    align-items: center;
    margin-top: 5px;
}


.examPartRight .singleAnswerContainerExam label{
    margin-left: 15px;
    width: 100%;
    color: #161616;
}

.examPartRight .validateButton {
    margin-top: -25px;
}

.buttonNextPreviousContainer {
    padding-top: 80px;
    padding-bottom: 20px;
    position: relative;

}

.nextQuestionsButton, .previousQuestionsButton{
    border-radius: 20px;
    padding-right: 28px;
    padding-left: 28px;
    padding-top: 13px;
    padding-bottom: 13px;
    border: none;
}

.nextQuestionsButton.finish, .previousQuestionsButton.finish {
    opacity: 0.8;
}

.previousQuestionsButton .triangle {
    border-bottom: 5px solid #161616;
    transform: rotate(-90deg);
}

.nextQuestionsButton .triangle {
    transform: rotate(90deg);
}

.triangle {
    width: 2px; /* Largeur nulle */
    height: 2px; /* Hauteur nulle */
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid white;
    border-radius: 10px;
}

.previousQuestionsButton {
    border: 1px solid black;
    background-color: white;
    position: absolute;
    top: 40%;
    left: 10px;
}

.nextQuestionsButton {
    background-color: #3F71EE;
    border: 1px solid #3F71EE;
    position: absolute;
    top: 40%;
    right: 10px;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox-wrapper-exam input[type=checkbox] {
      --active: #275EFE;
      --active-inner: red;
      --focus: 2px rgba(39, 94, 254, .3);
      --border: #BBC1E1;
      --border-hover: #275EFE;
      --background: #fff;
      --disabled: #40549e;
      --disabled-inner: #E1E6F9;
      -webkit-appearance: none;
      -moz-appearance: none;
      min-height: 17px;
      min-width: 17px;
      max-height: 17px;
      max-width: 17px;
      border-radius: 50%;
      background-color: hsla(219, 70%, 94%, 0.588);


      outline: none;
      display: inline-block;
      vertical-align: top;
      position: relative;
      margin: 0;
      cursor: pointer;
      border: 1px solid #dee0e5;
      transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

    .checkbox-wrapper-exam input[type=checkbox]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        background-color: red;
    }
    
    .checkbox-wrapper-exam input[type=checkbox].blackInput:checked {
        border-color: #4870E2;
        background-color: #4870E2;
    }
/*     
    .checkbox-wrapper-exam input.blueInput{
        border: 1px solid #4870E2;
    } */

    .checkbox-wrapper-exam input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
    }

  
    .checkbox-wrapper-exam input[type=checkbox]:not(.switch):checked:after {
        border-color: #4870E2;
        background-color: #4870E2;
        min-height: 17px;
        min-width: 17px;
        max-height: 17px;
        max-width: 17px;
        border-radius: 50%;
        top: -1px;
        left: -1px;
    }

    /* ANSWERS COLOR */
    /* CHECKBOX */
    .checkbox-wrapper-exam input.answerInputred{
        border: 1px solid #FF5757;
    }
    .checkbox-wrapper-exam input[type=checkbox].answerInputred:checked:after {
        border-color: #FF5757;
    }

    .checkbox-wrapper-exam input.answerInputgreen{
        border: 1px solid #49BF69;
    }
    .checkbox-wrapper-exam input[type=checkbox].answerInputgreen:checked:after {
        border-color: #49BF69;
    }

    /* LABELS */
    .singleAnswerContainerExam label.answerInputred {
        color: #FF5757;
    }
    .singleAnswerContainerExam label.answerInputgreen {
        color: #49BF69;
    }
}


.questionFooterExam {
    background-color: #EEF3FF;
    padding-top: 10px;
    width: 850px;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 20px;
}


.questionFooterExam .titleCorrection {
    margin-left: 20px;
    margin-top: 5px;
    display: flex;
}

.questionFooterExam .checkCircle {
    width: 22px;
    height: 22px;
}

.questionFooterExam .correctionTitle {
    margin-left: 15px;
    font-size: 18px;
    margin-top: -3px;
    font-weight: 600;
    color: #4870E2;
}

.questionFooterExam .correctiontext {
    padding-bottom: 20px;
    margin-top: -5px;
    margin-left: 20px;
    margin-right: 20px;
}


.validateButton.disable {
    width: 200px;
}.questionContainerExam {
    /* background-color: red; */
}

.questionContainerExam .scoreContainer {
    background-color: #eef3ff;
    color: #4870e2;
    width: 130px;
    height: 30px;
    font-size: 15px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    position: absolute;
    left: 780px;
    
}

.questionContainerExam .scoreContainer h5{
    font-size: 16px !important;
    margin: 0px;
}

.questionContainerExam .scoreContainer span {
    margin-left: 7px;
}/* Container principal */
.registerContainer {
    background-color: #f8f9fa; /* Fond blanc cassé */
    padding: 20px;
    box-sizing: border-box;
}

.formContainer {
    background-color: #ffffff; /* Fond blanc */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

/* Logo */
.logo {
    max-width: 120px;
}

/* Titre de la page */
.cardTitle {
    color: #333333;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 20px;
}

/* Description */
.description {
    color: #777777;
    font-size: 1rem;
    margin-top: 10px;
}

/* Conteneur de champs de saisie */
.inputContainer {
    margin-top: 30px;
}

/* Groupes de champs */
.inputGroup {
    margin-bottom: 20px;
}

.inputLabel {
    color: #333333;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
}

/* Champs de saisie */
.inputField {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-top: 8px;
    background-color: #f9f9f9;
}

.inputField:focus {
    border-color: #007bff;
    outline: none;
    background-color: #ffffff;
}

/* Erreurs */
.invalid-feedback {
    color: #e74c3c;
    font-size: 0.875rem;
    margin-top: 5px;
}

/* Contenu de la case à cocher pour afficher le mot de passe */
.showPasswordContainer {
    margin-top: 15px;
    display: flex;
    align-items: center;
}

.showPasswordLabel {
    font-size: 1rem;
    color: #555555;
    margin-left: 10px;
}

/* Bouton Suivant */
.submitButton {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submitButton:hover {
    background-color: #0056b3;
}

/* Médias */
@media (max-width: 480px) {
    .formContainer {
        width: 90%;
    }
    .logo {
        max-width: 100px;
    }
}


.resetPswd .register-title {
    margin-bottom: 40px !important;
}
/* TextEditor styles - à n'appliquer qu'à ce composant */
.text-editor-wrapper {
    /* Aucun style spécifique dans le code original */
    position: relative;
}

.text-editor-container {
    width: 100%;
    max-width: 444px;
    height: auto; /* Modifié pour s'adapter au contenu */
    min-height: 141px;
    background-color: white;
    border-radius: 15px;
    border: 1px solid #E2E8F0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.editor-content-wrapper {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 12px;
    padding-bottom: 24px; /* Augmenté pour faire place au compteur */
    position: relative;
    flex-grow: 1;
}

.editor-content {
    min-height: 80px;
    width: 100%;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
    color: #4a5568;
    overflow: visible;
    /* Supprimer tout défilement */
    overflow-y: hidden;
}

.editor-content:focus {
    outline: none;
}

/* Style pour l'affichage du placeholder */
.editor-content[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: #a0aec0;
    pointer-events: none;
}

.editor-toolbar {
    padding-left: 24px;
    padding-right: 24px;
    height: 23px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: auto;
    padding-bottom: 8px;
}

.toolbar-buttons {
    display: flex;
    gap: 16px;
}

.format-button {
    color: #718096;
    transition: color 0.3s;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.text-editor-wrapper .format-button:hover {
    color: #4a5568;
}

.text-editor-wrapper .icon {
    width: 16px;
    height: 16px;
}

.text-editor-wrapper .editor-placeholder {
    color: #a0aec0;
}

/* Supprimer tous les styles de barre de défilement */
/* 
.editor-content-wrapper::-webkit-scrollbar {
    width: 6px;
}

.editor-content-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.editor-content-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.editor-content-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}
*/

/* Styles pour le compteur de caractères */
.text-editor-wrapper .char-counter {
    position: absolute;
    bottom: 2px;
    right: 24px;
    font-size: 10px;
    color: #718096;
    background-color: white;
    padding: 2px 5px;
}

/* Styles pour l'alerte de limite atteinte */
.text-editor-wrapper .limit-warning {
    position: absolute;
    bottom: -15px;
    left: 10px;
    color: #0077FF;
    background-color: rgba(255, 255, 255, 0) !important;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 10px;
    text-align: center;
    z-index: 10;
    animation: fadeInOut 2s forwards;
    white-space: nowrap;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}


@media (max-width: 475px) {
    .text-editor-wrapper .limit-warning {
        background-color: red;
        max-width: 200px;
        overflow-wrap: break-word;
        word-wrap: break-word;
        white-space: normal;
        text-align: left;
        bottom: -20px;
    }
}/* CreateFlashcardPage.css */
/* Classe globale pour encapsuler tous les styles de cette page */

/* Variables pour les couleurs */
:root {
    --primary-blue: #3b72ff;
    --primary-black: #333333;
    --light-gray: #f9fafb;
    --card-bg: #ffffff;
    --easy-bg: #e6f6ea;
    --easy-text: #166434;
    --medium-bg: #FEF3C7;
    --medium-text: #92400D;
    --difficult-bg: #FEE2E2;
    --difficult-text: #991B1B;
    --border-light: #e5e7eb;
    --text-secondary: #64748b;
}

* {
    outline: none !important;
}

.UpdateFlashcardPage {
    /* .back-arrow {
        cursor: pointer;
        position: absolute;
        width: 39px;
        height: 39px;
        left: -2px;
        top: 25px;
        background-color: #EBF3FD;
        padding: 10px;
        border-radius: 30px;
    } */

    .flashcard-creator {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        width: 95vw;
        position: relative;
        background-color: #f9fafb;
        min-height: 100vh;
    }


    /* Header mobile */
    .mobile-header {
        display: none;
        width: 100%;
        flex-direction: column;
        margin: 0 36px;
    }

    @media (max-width: 767px) {
        .mobile-header {
            display: flex;
        }
    }

    /* Container principal */
    .little-container-flash-cards {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        padding-left: 2rem;
        margin: 0px;
    }

    @media (max-width: 767px) {
        .little-container-flash-cards {
            flex-direction: column;
            padding: 1rem;
        }
    }

    /* Conteneur pour l'aperçu de carte */
    .preview-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    @media (max-width: 1000px) {
        .preview-section {
            display: none;
        }
    }

    .arrow-back {
        cursor: pointer;
        width: 28px;
        height: 28px;
        margin-bottom: 20px;
        margin-top: 10px;
        position: absolute;
        top: 20px;
    }

    .card-preview {
        background-color: var(--card-bg);
        border-radius: 1rem;
        padding: 1rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        height: auto;
        min-height: 500px;
        display: flex;
        flex-direction: column;
        margin-top: auto;
        margin-bottom: auto;
    }

    .card-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        position: relative;
        height: 40px;
    }

    .category-tag {
        position: absolute;
        left: 0;
        top: 0;
        padding: 0.3rem 1rem;
        font-size: 14px;
        border-radius: 20px;
        color: var(--primary-black);
        border: 1px solid var(--border-light);
        font-weight: 600;
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .category-tag.mobile {
        width: auto;
    }

    .flip-card-btn {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--light-gray);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        z-index: 1;
        margin: auto;
        margin-top: 0px;
    }

    .flip-icon {
        cursor: pointer;
        width: 18px;
        height: 18px;
    }

    .level-tag {
        padding: 0.3rem 1.3rem;
        font-size: 14px;
        border-radius: 20px;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .level-tag.mobile {
        width: auto;
    }

    .level-tag.easy {
        background-color: var(--easy-bg);
        color: var(--easy-text);
    }

    .level-tag.medium {
        background-color: var(--medium-bg);
        color: var(--medium-text);
    }

    .level-tag.difficult {
        background-color: var(--difficult-bg);
        color: var(--difficult-text);
    }

    .card-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        text-align: center;
    }

    .content-title {
        font-weight: 500;
        max-width: 60%;
        font-size: 20px;
        color: #9ca3af;
        margin-bottom: 2rem;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        white-space: normal;
    }
    

    .image-wrapper {
        height: 200px;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .upload-zone {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 2px dashed #e5e7eb;
        border-radius: 0.5rem;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        width: 100% !important;
        max-width: 600px;
        height: 150px;
        margin: 0 auto;
        margin-top: 20px;
    }

    .upload-icon {
        cursor: pointer;
        width: 24px;
        height: 24px;
        margin-bottom: 0.5rem;
        opacity: 0.6;
    }

    .upload-text {
        font-size: 0.875rem;
        color: #9ca3af;
    }

    .delete-img-btn {
        margin-top: 1rem;
        position: absolute;
        color: #ef4444;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 14px;
        left: 40px;
    }

    .trash-icon {
        cursor: pointer;
        width: 16px;
        height: 16px;
    }

    /* Mobile preview container */
    .mobile-preview {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        margin-bottom: 1.5rem;
        background-color: var(--card-bg);
        border-radius: 1rem;
        overflow: hidden;
    }

    .mobile-card {
        padding: 1.5rem;
    }

    .blue-header {
        width: 100%;
        background-color: var(--primary-blue);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        color: white;
    }

    .plus-btn-container {
        cursor: pointer;
        border-radius: 50%;
        background-color: white;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
    }

    .plus-icon {
        cursor: pointer;
        width: 16px;
        height: 16px;
    }

    .header-text {
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }

    .button-row {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        background-color: var(--light-gray);
        color: var(--primary-blue);
        border-radius: 0.5rem;
        border: none;
        cursor: pointer;
        font-weight: 500;
        transition: background-color 0.2s;
    }

    .back-btn:hover {
        background-color: #e5e7eb;
    }

    .create-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1.5rem;
        background-color: var(--primary-blue);
        color: white;
        border-radius: 0.5rem;
        border: none;
        cursor: pointer;
        font-weight: 500;
        transition: background-color 0.2s;
        width: 100%;
        margin-top: -20px;
    }

    .create-btn:hover {
        background-color: #2563eb;
    }

    .preview-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        background-color: var(--light-gray);
        color: var(--primary-blue);
        border-radius: 0.5rem;
        border: none;
        cursor: pointer;
        font-weight: 500;
        transition: background-color 0.2s;
    }

    .preview-btn:hover {
        background-color: #e5e7eb;
    }

    @media (min-width: 768px) {

        .preview-btn,
        .back-btn {
            display: none;
        }

        .create-btn {
            min-width: 120px;
        }
    }

    /* Formulaire de création de carte */
    .form-section {
        height: 100vh;
        background-color: var(--card-bg);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        padding: 0;
        overflow-y: auto;
    }

    @media (max-width: 767px) {
        .form-section {
            width: 100%;
        }
    }

    .header-container {
        width: 100%;
    }

    .form-fields {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        width: 450px;
        max-width: 100%;
        overflow: hidden;
    }

    @media (max-width: 1000px) {
        .form-fields {
            width: 90vw;
        }
    }

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

    .form-label {
        font-weight: 700;
        font-size: 14px;
        color: var(--primary-black);
        margin-bottom: 0.5rem;
        display: block;
        position: relative;
    }

    /* Champ de catégorie */
    .category-row {
        position: relative;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
    }

    

    

    .color-picker-button {
        width: 36px;
        height: 35px;
    }

    .category-input {
        width: 100%;
        padding: 0.6rem 0.75rem;
        font-size: 1.05rem;
        outline: none !important;
        /* border-left: #0077FF 3px solid; */
        margin-top: 10px;
    }

    .color-picker {
        position: absolute;
        right: 10px;
        top: 30px;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
    }

    .palette-popup {
        position: absolute;
        left: 50%;
        top: calc(100% + 10px);
        transform: translateX(-50%);
        z-index: 10;
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border-light);
        padding: 1rem;
    }

    .color-grid {
        position: absolute;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px 15px;
        padding: 12px;
        background-color: white;
        border-radius: 16px;
        padding-top: 40px;
        padding-left: 40px;
        padding-right: 20px;
        padding-bottom: 20px;
        margin-top: -40px;
        margin-left: -5px;
        box-shadow: 0px 0px 5px #ECF0F3;
        right: 0px;
        top: 50px;
        z-index: 2;
        max-width: 300px;
      }
    
      .pipette-color {
        left: 15px !important;
      }

    .color-item {
        width: 24px;
        height: 24px;
        cursor: pointer;
        border-radius: 50%;
    }

    /* Sélection de la difficulté */
    .difficulty-row {
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.5rem;
    }

    .difficulty-row .form-label, .categorielabel {
        margin-top: auto;
        margin-bottom: auto;
        font-size: 1rem;
    }

    .difficulty-options {
        display: flex;
        margin-top: auto;
        margin-bottom: auto;
        border-radius: 2rem;
        width: fit-content;
        overflow: hidden;
    }

    .difficulty-btn {
        padding: 0.4rem 1rem;
        font-size: 14px;
        color: var(--primary-black);
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid var(--border-light);
    }

    .difficulty-btn:first-child {
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
    }

    .difficulty-btn:nth-child(3) {
        border-top-right-radius: 2rem;
        border-bottom-right-radius: 2rem;
    }

    .difficulty-btn.easy-btn {
        background-color: var(--easy-bg);
        color: var(--easy-text);
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border: none
    }

    .difficulty-btn.medium-btn {
        background-color: var(--medium-bg);
        color: var(--medium-text);
        border-radius: 0px;
        border: none
    }

    .difficulty-btn.difficult-btn {
        background-color: var(--difficult-bg);
        color: var(--difficult-text);
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border: none
    }

    /* Éditeurs de texte */
    .editor-container {
        margin-bottom: 1.5rem;
    }

    /* Ajustement pour les éditeurs de texte */
    /* Note: Ces styles peuvent nécessiter des ajustements selon l'implémentation réelle du TextEditor */
    div[role="textbox"] {
        border: 1px solid var(--border-light);
        border-radius: 0.5rem;
        padding: 0.75rem;
        min-height: 120px;
        width: 100%;
        background-color: white;
    }

    div[role="textbox"]:focus-within {
        border-color: var(--primary-blue);
        outline: none;
    }

    /* Adaptations mobiles supplémentaires */
    @media (max-width: 767px) {
        .little-container-flash-cards {
            padding: 0.5rem;
        }

        .flashcardContainerCreation {
            padding-bottom: 0px !important;
        }

        .mobile-preview,
        .form-section {
            box-shadow: none;
            border-radius: 0.5rem;
        }

        .form-fields {
            padding: 1rem;
            padding-bottom: 0px;
        }
    }

    /* Effets de focus et d'interaction */
    button:focus,
    input:focus {
        outline: 2px solid rgba(59, 114, 255, 0.3);
    }

    .upload-zone:hover {
        border-color: var(--primary-blue);
        background-color: rgba(59, 114, 255, 0.03);
    }

    /* Compatibilité avec le TextEditor */
    .text-editor-container {
        width: 100%;
    }
}



/* Styles pour la navigation entre flashcards */
.flashcard-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid #e5e7eb;
  }
  
  .flashcard-counter {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
  }
  
  .navigation-buttons {
    display: flex;
    gap: 0.5rem;
  }
  
  .nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6;
    border: none;
    color: #374151;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .nav-btn:hover:not(:disabled) {
    background-color: #e5e7eb;
  }
  
  .nav-btn:disabled {
    color: #d1d5db;
    cursor: not-allowed;
  }
  
  /* Styles pour les boutons de gestion des flashcards */
  .flashcard-management {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  
  .delete-flashcard-btn, .add-flashcard-btn {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .delete-flashcard-btn {
    background-color: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
  }
  
  .delete-flashcard-btn:hover:not(:disabled) {
    background-color: #fecaca;
  }
  
  .delete-flashcard-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .add-flashcard-btn {
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #d1fae5;
  }
  
  .add-flashcard-btn:hover {
    background-color: #d1fae5;
  }
  
  /* Ajustement pour les boutons de création */
  .button-row {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
  }
  
  .create-btn, .create-and-return-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
  }
  
  .create-btn {
    background-color: #eff6ff;
    color: #2563eb;
  }
  
  .create-btn:hover {
    background-color: #dbeafe;
  }
  
  .create-and-return-btn {
    background-color: #3b82f6;
    color: white;
  }
  
  .create-and-return-btn:hover {
    background-color: #2563eb;
  }
  
  /* Ajustements pour mobile */
  @media (max-width: 768px) {
    .flashcard-management.mobile {
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid #e5e7eb;
    }
    
    .button-row {
      margin-bottom: 1rem;
    }
    
    .navigation-buttons {
      gap: 1rem;
    }
    
    .nav-btn {
      width: 48px;
      height: 48px;
      font-size: 20px;
    }
  }
  
  /* Style pour la classe content-title (retour à la ligne automatique) */
  .content-title {
    font-weight: 500;
    max-width: 100%;
    font-size: 20px;
    color: #9ca3af;
    margin-bottom: 2rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
    overflow: auto;
    max-height: 180px;
  }

  .navIpadEtTel {
    display: none;
}


.create-and-return-btn {
    margin-top: -35px;
}

  @media (max-width: 1000px) {
    .form-section {
        width: 100% !important;
        position: relative;
    }

    .text-editor-container {
        width: 100% !important;
        max-width: inherit;
        position: relative;
    }

    .little-container-flash-cards {
    }

    .blue-header {
        padding-top: 80px !important;
    }

    .navIpadEtTel {
        display: flex;
    }

    .navIpadEtTel .nav-btn{
        width: 3rem;
        height: 3rem;
    }

    .flashcard-creator {
        height: 100%;
        width: 100vw !important;
        margin: 0px !important;
        padding: 0px !important;
    }

    .form-section {
        width: 100% !important;
        padding: 0px !important;
        margin: 0px !important;
    }
    .little-container-flash-cards {
        padding: 0px !important;
    }
}

@media (max-width: 767px) {
    .navIpadEtTel {
        border-top: none;
        margin-top: -15px;
    }

    .navIpadEtTel .nav-btn{
        width: 2.1rem;
        height: 2.1rem;
    }

    .flashcard-management {
        flex-direction: row;
        margin-top: 10px;
    }

    .flashcard-management * {
        width: 50%;
    }

    .blue-header {
        padding-top: 45px !important;
        margin-top: 20px;
        border-start-end-radius: 30px;
        border-top-left-radius: 30px;
    }
}

@media (max-width: 768px) {
    
    /* Appliquer -webkit-overflow-scrolling: touch pour améliorer le défilement sur iOS */
    .backContainer {
        height: 100%; /* Utiliser height:100% au lieu de 100vh pour iOS */
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* Améliore le défilement fluide sur iOS */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* Supprimer tout le comportement de défilement intégré */
    .pageContainer,
    .pageContainer.flashcardContainerCreation,
    .flashcardContainerCreation .flashcard-creator,
    .flashcardContainerCreation .form-section,
    .flashcardContainerCreation .little-container-flash-cards,
    .flashcardContainerCreation .mobile-preview,
    .flashcardContainerCreation .card-body,
    .flashcardContainerCreation .mobile-card,
    .flashcardContainerCreation .editor-container,
    .flashcardContainerCreation .text-editor-container {
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Style de l'en-tête sur mobile */
    .blue-header {
        padding-top: 30px !important;
        margin-bottom: 1rem;
    }
    
    /* Assurer que tous les conteneurs de texte s'adaptent correctement */
    .content-title {
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Correction pour le TextEditor et les champs de formulaire */
    .category-input {
        max-height: none !important;
    }
    
    /* Ajouter un peu de marge en bas pour garantir que tout le contenu est visible */
    .button-row {
        margin-bottom: 2rem;
    }
    
    /* Correction spécifique pour Safari iOS */
    @supports (-webkit-touch-callout: none) {
        /* Styles spécifiques à Safari iOS */
        .backContainer {
            position: fixed; /* Position fixe pour iOS */
            height: 100%; /* Utiliser height au lieu de vh pour iOS */
        }
        
        /* Ajouter un peu d'espace en bas pour s'assurer que tout est visible */
        .flashcardContainerCreation {
            padding-bottom: 50px !important;
        }
    }

    .category-input, .difficulty-options *, .editor-content {
        font-size: 14px !important;
    }
    .delete-flashcard-btn, .add-flashcard-btn {
        font-size: 12px;
    }


}

@media (min-width: 768px) {
.UpdateFlashcardPage {
    .back-arrow {
      cursor: pointer;
      position: absolute;
      width: 39px;
      height: 39px;
      left: -2px;
      top: 25px;
      background-color: #EBF3FD;
      padding: 10px;
      border-radius: 30px;
    }
  }
}


.categoryCreateForm {
    /* Champ de catégorie */
    .category-row {
        position: relative;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0px;
    }

    .category-selector {
        margin-top: -20px !important;
    }

    .category-dropdown-button {
        height: 40px !important;
        margin-top: 0px !important;
    }



    .color-picker-button {
        width: 35px;
        height: 35px;
    }

    .category-input {
        width: 100%;
        padding: 0.6rem 0.75rem;
        font-size: 1.05rem;
        outline: none !important;
    }

    .color-picker {
        position: absolute;
        right: 10px;
        top: 30px;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
    }

    .palette-popup {
        position: absolute;
        left: 50%;
        top: calc(100% + 10px);
        transform: translateX(-50%);
        z-index: 10;
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border-light);
        padding: 1rem;
    }

    .color-grid {
        position: absolute;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px 15px;
        padding: 12px;
        background-color: white;
        border-radius: 16px;
        padding-top: 40px;
        padding-left: 40px;
        padding-right: 20px;
        padding-bottom: 20px;
        margin-top: -40px;
        margin-left: -5px;
        box-shadow: 0px 0px 5px #ECF0F3;
        right: 0px;
        top: 50px;
        z-index: 2;
        max-width: 300px;
    }

    .pipette-color {
        left: 15px !important;
    }

    .color-item {
        width: 24px;
        height: 24px;
        cursor: pointer;
        border-radius: 50%;
    }

    /* Sélection de la difficulté */
    .difficulty-row {
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.5rem;
    }

    .difficulty-row .form-label, .categorielabel {
        margin-top: auto;
        margin-bottom: auto;
        font-size: 1rem;
    }

    .difficulty-options {
        display: flex;
        margin-top: auto;
        margin-bottom: auto;
        border-radius: 2rem;
        width: fit-content;
        overflow: hidden;
    }

    .difficulty-btn {
        padding: 0.4rem 1rem;
        font-size: 14px;
        color: var(--primary-black);
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid var(--border-light);
    }

    .difficulty-btn:first-child {
        border-top-left-radius: 2rem;
        border-bottom-left-radius: 2rem;
    }

    .difficulty-btn:nth-child(3) {
        border-top-right-radius: 2rem;
        border-bottom-right-radius: 2rem;
    }

    .difficulty-btn.easy-btn {
        background-color: var(--easy-bg);
        color: var(--easy-text);
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border: none
    }

    .difficulty-btn.medium-btn {
        background-color: var(--medium-bg);
        color: var(--medium-text);
        border-radius: 0px;
        border: none
    }

    .difficulty-btn.difficult-btn {
        background-color: var(--difficult-bg);
        color: var(--difficult-text);
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border: none
    }
}

.barVerticalNextToInput {
    width: 3px;
    height: 50px;
    background-color: red;
}

/* Ajoutez ces styles à votre fichier CSS */
.category-selector {
    position: relative;
    margin-bottom: 15px;
  
  
  .category-input-wrapper {
    display: flex;
    width: 100%;
    position: relative;
  }
  
  .category-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
  }
  
  .category-dropdown-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 30px;
    margin-top: 5px;
  }
  
  .category-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }
  
  .category-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .category-option:hover {
    background-color: #f5f5f5;
  }
  
  .category-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
  }
  
  .no-categories {
    padding: 10px;
    text-align: center;
    color: #666;
  }



}/* ToastNotification.css */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    max-width: 300px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(-20px);
    z-index: 100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 !important;
  }
  
  .toast-notification.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .toast-notification.hidden {
    opacity: 0;
    transform: translateY(-20px);
  }
  
  .toast-notification.error {
    background-color: #fff0f0;
    border-left: 4px solid #f87171;
    color: #b91c1c;
  }
  
  .toast-notification.success {
    background-color: #f0fff4;
    border-left: 4px solid #34d399;
    color: #047857;
  }
  
  .toast-notification.info {
    background-color: #f0f7ff;
    border-left: 4px solid #60a5fa;
    color: #1e40af;
  }
  
  .toast-content {
    display: flex;
    align-items: center;
  }
  
  .toast-message {
    font-size: 14px;
    font-weight: 500;
  }
  
  @media (max-width: 768px) {
    .toast-notification {
      top: auto;
      bottom: 20px;
      left: 20px;
      right: 20px;
      max-width: none;
    }
  }.success-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    background-color: #f5f7fa;
    font-family: 'Roboto', Arial, sans-serif;
    padding: 15px;
}

.success-container {
    .success-card {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        max-width: 585px;
        width: 100%;
        text-align: center;
        padding: 0;
        overflow: hidden;
    }

    /* Success content styling */
    .success-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
    }

    .success-icon-circle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 64px;
        height: 64px;
        background-color: rgba(46, 184, 114, 0.1);
        border-radius: 50%;
        margin: 40px auto 16px;
    }

    .success-icon-circle svg {
        width: 32px;
        height: 32px;
        color: #2eb872; /* Green color for the check icon */
    }

    .success-title {
        font-size: 22px;
        font-weight: 600;
        color: #333;
        margin: 8px 0;
    }

    .payment-amount {
        color: #666;
        font-size: 16px;
        margin: 4px 0 24px;
    }

    /* Payment info section */
    .payment-info-section {
        width: 100%;
        padding: 0 20px;
        margin-bottom: 24px;
    }

    .payment-info-title {
        text-align: left;
        font-size: 16px;
        font-weight: 500;
        color: #333;
        margin-bottom: 16px;
        margin-top: 10px;
    }

    .payment-info-grid {
        background-color: #fff;
        border: 1px solid #eaeaea;
        border-radius: 8px;
        overflow: hidden;
    }

    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 16px;
    }

    .info-row:last-child {
        border-bottom: none;
    }

    .info-label {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        text-align: left;
    }

    .info-value {
        font-size: 14px;
        color: black;
        padding: 2px 20px;
        border-radius: 4px;
        text-align: right;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Button styling */
    .dashboard-button {
        background-color: #f0f0f0;
        color: #333;
        border: none;
        padding: 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 15px;
        font-weight: 500;
        transition: background-color 0.2s;
        margin: 16px 20px 24px;
        width: calc(100% - 40px);
    }

    .dashboard-button:hover {
        background-color: #e0e0e0;
    }

    /* Error styling */
    .error-icon {
        font-size: 48px;
        margin-bottom: 16px;
        color: #e74c3c;
    }

    .error-container {
        padding: 32px 20px;
    }

    .back-button {
        background-color: #e74c3c;
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s;
        width: calc(100% - 40px);
    }

    .back-button:hover {
        background-color: #c0392b;
    }

    /* Loading spinner */
    .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px 20px;
    }

    .spinner {
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 4px solid #4a90e2;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin-bottom: 16px;
    }

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

/* Responsive adjustments */
@media screen and (max-width: 600px) {
    .success-container {
        padding: 0px;
    }

    .success-container .success-content {
        justify-content: space-between;
        height: 100dvh;
    }
    
    .success-container .success-top-container {
        margin: auto;
    }    

    .success-container .success-card {
        width: 100vw;
        height: 100dvh;;
        padding: 0px;
        margin: 0px;
    }
}.flashcardsPageContainer.collections-section {
  margin-top: 50px !important;
}

.flashcardsPageContainer {
  .k {}

  .collection-card {
    cursor: pointer;
    position: relative;
    min-width: 140px;
    max-width: 222px;
    height: 115px;
    background-color: white;
    border-radius: 1.5rem;
    padding: 0.5rem;
    box-shadow: 1px 1px 48.3px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
  }

  .collection-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  @media (min-width: 400px) {
    .collection-card {
      min-width: 165px;
    }
  }

  @media (min-width: 768px) {
    .collection-card {
      min-width: 240px;
      height: 144px;
      padding: 0 1.5rem 0px 1.5rem;
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
  }

  .card-count {
    color: #2563EB;
    font-weight: 700;
    font-size: 40px;
  }

  @media (min-width: 768px) {
    .card-count {
      font-size: 45px;
    }
  }

  .action-button {
    padding: 0.5rem;
    background-color: #EBF3FD;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
  }

  .action-button:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .card-title {
    margin-top: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-align: start;
  }

  @media (min-width: 768px) {
    .card-title {
      margin-top: 1.5rem;
      font-size: 16px;
    }
  }

  .highlighted-text {
    color: #2563EB;
  }


  @media (max-width: 768px) {
    .collection-card {
      padding: 0 1rem 0px 1rem;
      min-width: calc(50% - 10px);
      /* 50% de la largeur moins l'espace entre les deux */
      max-width: calc(50% - 10px);
      width: calc(50% - 10px);
      box-sizing: border-box;
    }
  }

  @media (max-width: 400px) {
    .card-title {
      font-size: 12px !important;
    }
  }
}

/* Ajoutez ceci pour que le conteneur parent distribue correctement les cartes */
.collections-grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

@media (max-width: 768px) {
  .collections-grid-container {
    gap: 10px;
    justify-content: space-between;
  }
}

.second-card-container {
  padding: 0px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .infoBlocActive {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .barInfo {
    width: 4px;
    height: 60px;
    border-radius: 20px;
    margin-right: 10px;
  }

  .nameSubcategory {
    font-size: 1.3rem;
    font-weight: 600;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .category-color-circle-outer {
    width: 40px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid;
    padding: 1px;
    margin-right: 10px;
  }

  .category-color-circle-inner {
    width: 27px;
    height: 25px;
    border-radius: 50%;
  }

  .delete-button {
    width: 15px;
    position: absolute;
    top: 10px !important;
    right: 20px !important;
  }
  
  .edit-button {
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 20px !important;
    right: 25px !important;
  }

  
  /* Ajustements pour les cartes de second type en dessous de 768px */
  @media (max-width: 768px) {
    .delete-button {
      width: 15px;
      position: absolute;
      top: 5px !important;
      right: 16px !important;
    }

    .edit-button {
      right: 20px !important;
    }

    .second-card-container {
      min-width: calc(50% - 10px) !important;
      max-width: calc(50% - 10px) !important;
      width: calc(50% - 10px) !important;
      box-sizing: border-box;
    }

    .nameSubcategory {
      font-size: 1.4rem;
    }

    .category-color-circle-outer {
      width: 30px;
      height: 25px;
    }

    .category-color-circle-inner {
      width: 26px;
      height: 20px;
    }
  }

  @media (max-width: 530px) {
    .nameSubcategory {
      font-size: 1.2rem;
    }
  }
}

.collection-card.editingDisplayNone {
  display: none;
}

.collection-card.editing {
  width: 100% !important;
  max-width: 500px !important;
}

.edit-form {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
}

.edit-input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  flex-grow: 1;
  margin-left: 8px;
  width: 100%;
}

.save-button {
  background-color: #2563EB;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  margin-left: 10px;
  font-weight: bold;
  transition: background-color 0.2s;
}

.save-button:hover {
  background-color: #2564ebc1;
}.flashcardsPageContainer {
  .k{}
  .collections-section {
    max-width: 1258px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .collections-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
  }
  
  .collections-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: #000000;
    margin-bottom: 0;
  }
  
  @media (min-width: 768px) {
    .collections-title {
      font-size: 22px;
    }
  }
  
  .desktop-nav {
    display: none;
    gap: 1rem;
  }
  
  @media (min-width: 768px) {
    .desktop-nav {
      display: flex;
    }
  }
  
  .collections-container {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    margin-bottom: 34px;
  }
  
  @media (min-width: 768px) {
    .collections-container {
      margin-bottom: 77px;
    }
  }
  
  .mobile-nav-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
  }
  
  @media (min-width: 768px) {
    .mobile-nav-container {
      display: none;
    }
  }
  
  .mobile-nav {
    display: flex;
    gap: 1rem;
  }
  
  .filter-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: color 0.3s ease;
    color: #000000;
    background: none;
    border: none;
    padding: 0;
  }
  
  .filter-button.active {
    color: #2563EB;
  }
  
  .filter-text {
    font-weight: 600;
    font-size: 14px;
  }
  
  @media (min-width: 768px) {
    .filter-text {
      font-size: 16px;
    }
  }
}.flashcardsPageContainer {
  .k {}

  .category-list {
    max-width: 1258px;
    max-width: 100%;
    margin: 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5rem;
  }

  .category-grid {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    width: 100%;
    padding-bottom: 20px;
  }

  /* Ajout de la media query pour les écrans en dessous de 767px */
  @media (max-width: 767px) {
    .category-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      /* Gap légèrement réduit pour les petits écrans */
    }
  }

  /* Correction de cette media query qui avait un problème de logique */
  @media (min-width: 640px) and (max-width: 1223px) {
    .category-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1224px) {
    .category-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .category-card {
    height: 240px;
    max-height: 240px;
    min-height: 240px;
    overflow: hidden;
    width: 100%;
    /* Assure que la carte prend toute la largeur disponible dans sa colonne */
    background-color: white;
    border-radius: 25px;
    padding: 0px 0px;
    box-shadow: 1px 1px 48.3px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    /* Empêche le contenu de déborder */
  }

  /* Ajuster la taille des cartes sur mobile */
  @media (max-width: 767px) {
    .category-card {
      min-width: unset;
      /* Enlever la largeur minimale */
      width: 100%;
      /* Permettre aux cartes de prendre 100% de leur container */
      min-height: 140px;
    }
  }

  .category-card .category-header {
    margin-top: 20px !important;
    display: flex;
    justify-content: space-between;
  }

  .category-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  @media (min-width: 768px) {
    .category-card {
      /* Rendre la hauteur adaptative */
      min-height: 222px;
      padding: 13px 18px 40px 0px;
    }
  }

  .delete-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    opacity: 1;
    top: 15px;
    right: 0px;
  }

  .delete-icon {
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
    height: 20px;
    width: 20px;
    margin: auto;
    padding: 1px;
    border-radius: 10px;
  }

  @media (min-width: 768px) {
    .delete-icon {
      width: 22px;
      height: 22px;
    }
  }

  .category-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 21px;
    width: 100%;
    /* S'assurer que l'en-tête prend toute la largeur */
    padding-right: 15px;
    /* Espace pour l'icône de suppression */
  }

  @media (min-width: 768px) {
    .category-header {
      margin-bottom: 15px;
    }
  }

  .category-stripe {
    width: 6px;
    height: 60px;
    border-radius: 9999px;
    position: absolute;
    flex-shrink: 0;
    /* Empêche la réduction de cet élément */
  }

  .category-name {
    margin: 0 22px;
    width: 100% !important;
    font-weight: 600;
    font-size: 20px;
    color: #000000;
    width: auto;
    /* Laisser la largeur s'adapter */
    max-width: calc(100% - 90px);
    /* Réserver de l'espace pour les autres éléments */
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Forcer le retour à la ligne */
    text-transform: capitalize;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ajuster la taille du texte et la marge sur mobile */
  @media (max-width: 767px) {
    .category-name {
      font-size: 14px;
      -webkit-line-clamp: 3;
      max-width: 40%;
    }
  }

  @media (min-width: 1536px) {
    .category-name {
      font-size: 25px;
    }
  }

  .category-dot-border {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border-width: 3px;
    padding: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    /* Empêche la réduction de cet élément */
  }

  .content_card_home {
    /* height: 100%; */
  }

  @media (max-width: 768px) {
    .category-dot-border {
      width: 30px;
      height: 30px;
    }
  }

  .category-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }

  .flashcard-count {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: end;
    margin-left: 25px;
    margin-top: auto;
    margin-bottom: -20px !important;
  }

  /* Ajuster les tailles pour mobile */
  @media (max-width: 767px) {
    .flashcard-count {
      margin-left: 15px;
      gap: 0.5rem;
    }
  }

  .count-number {
    font-size: 30px;
    font-weight: 600;
  }

  @media (max-width: 767px) {
    .count-number {
      font-size: 25px;
    }
  }

  @media (min-width: 768px) {
    .count-number {
      font-size: 40px;
    }
  }

  .count-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 11px;
  }

  @media (min-width: 768px) {
    .count-label {
      font-size: 16px;
    }
  }

  @media (max-width: 768px) {
    .content_card_home {
      padding-top: 0px !important;
      width: 100%;
      /* S'assurer que le contenu prend toute la largeur disponible */
    }

    .category-grid .category-card {
      height: auto !important;
      /* Hauteur adaptative */
      min-height: 140px;
      display: flex;
      justify-content: center;
    }

    .category-header {
      padding-bottom: 15px;
    }

    .flashcard-count {
      bottom: 25px;
      position: absolute;
    }

    .flashcard-count .count-label {
      margin-bottom: 7px;
    }

    .category-dot-border {
      width: 30px;
      height: 30px;
    }

    .category-dot {
      width: 20px;
      height: 20px;
    }
  }
}.flashcardsPageContainer {
    .k{}
    .creations.creationComponent {
      width: 95%;
      margin: auto;
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
    
  .creationComponent {
    /* Default category colors */
    .category-anatomie { background-color: #FED7D7; }
    .category-chimie { background-color: #BFDBFE; }
    .category-biologie { background-color: #BBF7D0; }
    .category-maths { background-color: #FED7AA; }
    .category-physique { background-color: #C7D2FE; }
    
    /* Level styles */
    .level {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.875rem;
    }
    
    .level-facile {
      background-color: #BBF7D0;
      color: #166534;
    }
    
    .level-moyen {
      background-color: #FED7AA;
      color: #9A3412;
    }
    
    .level-difficile {
      background-color: #FCA5A5;
      color: #991B1B;
    }
  }
}




.subcategory-page {
    margin-top: 40px;

    .homeFC {
        margin-top: 200px !important;
    }

}

.back-arrow2 {
    cursor: pointer;
    position: absolute;
    width: 39px;
    height: 39px;
    left: 120px;
    top: 30px;
    background-color: #EBF3FD;
    padding: 10px;
    border-radius: 30px;
}/* UploadGeneration.css */
.pageUploadGeneration {
    height: calc(100dvh - 64px) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Initial loading state */
.initial-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
}

.initial-loading-container p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.initial-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary, #883ae1);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.pageUploadGeneration {


    .uploadContainer {
        cursor: pointer;
        width: 80%;
        margin-top: 40px !important;
        height: 380px;
        border-radius: 20px;
        border: 1px #666 dashed;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: space-between; */
        padding: 50px;
    }

    .uploadContainer:hover {
        border-color: #007bff;
        border-width: 1px;
    }

    .uploadContainer h4 {
        margin-top: 10px;
        font-size: 19px;
        font-weight: 600;
    }

    .uploadContainer p {
        margin-top: 30px;
    }

    .uploadContainer p span {
        color: #007bff;
    }

    .uploadContainer p.footer {
        margin-top: auto;
        font-size: 12px;
    }

    .iconContainer {
        /* background-color: #EBF3FD; */
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .iconContainer svg {
        width: 25px;
        height: 25px;
    }

    .upload-link {
        color: #007bff;
        cursor: pointer;
        font-weight: 500;
        text-decoration: underline;
    }

    .file-types {
        color: #ccc;
        font-size: 12px;
        margin-top: 10px;
    }

    .mainContent {
        flex: 1 1 auto;
        display: flex;
        gap: 15px;
        padding: 10px 15px 0 15px;
        width: 100%;
        position: relative;
        z-index: 1;
        min-height: 0;
        /* important pour éviter les overflows dans certains cas */
    }


    .column {
        /* overflow: scroll; */
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        height: 100%;
        background: white;
        box-shadow: 0px 0px 16px rgba(152, 152, 152, 0.2);
        padding: 0px 0px 0 0;
        flex: 1;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .column.left {
        max-width: 300px;
        transition: max-width 0.4s ease, padding 0.4s ease, min-width 0.4s ease;
        min-width: 300px;
    }

    .column.left.collapsed * {
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .column.right {
        max-width: 300px;
        gap: 15px;

        transition: max-width 0.4s ease, padding 0.4s ease, min-width 0.4s ease;
        min-width: 300px;
    }

    .sectionHeader {
        color: #0077FF;
        font-size: 20px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 15px;
        width: 100%;
        border-bottom: #8b8b8b1a solid 1px;
    }

    .sectionHeader svg {
        cursor: pointer;
    }

    .sectionHeader p {
        font-weight: 500;
        font-size: 1.1rem;
    }

    .contentColumn {
        padding: 0 20px;
    }

    .selectAllRow {
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
    }

    .addSource {
        font-size: 12px;
        border: #666 dashed 1px;
        padding: 2px 10px;
        border-radius: 15px;
    }

    .addSource:hover {
        border-color: #0077FF;
        color: #0077FF;
    }

    .importButton,
    .saveButton {
        background-color: white;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 10px 16px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.2s;
        margin-bottom: 10px;
    }

    .importButton:hover,
    .saveButton:hover {
        background-color: #f0f0f0;
    }

    .centerBox {
        background: #f4f6fb;
        padding: 40px;
        border-radius: 20px;
        text-align: center;
        margin-bottom: 20px;
    }

    .noteCard {
        background: white;
        border-radius: 16px;
        padding: 15px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .noteIcon {
        background-color: #ffe066;
        color: #222;
        font-weight: bold;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .infoText {
        font-size: 13px;
        color: #666;
        margin-top: 10px;
    }

    .sourceList {
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .sourcesItemsContainer {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sourceItem {
        margin-top: 5px;
        border-radius: 8px;
        font-size: 13px;
        color: #333;
        display: flex;
        align-items: center;
        gap: 6px;
        width: 95%;
    }

    .errorDoc {
        font-size: 10px;
        color: red;
    }

    .deleteSourceBtn {
        margin-top: 5px;
    }

    .sourceItem input[type="checkbox"] {
        margin-left: 5px;
    }

    .sourceItem p {
        max-width: 75%;
        min-width: 75%;
    }



    .column.left.collapsed {
        max-width: 70px;
        min-width: 70px;
        padding: 20px 10px;
        align-items: center;

        .sectionHeader {
            margin-top: 15px;
        }

        .miniDocIcon {
            display: flex;
            align-items: center;
        }

        .miniDocIcon svg {
            width: 24px;
            height: 24px;
            cursor: pointer;
        }

        .miniDocIcon:hover>.titleHover {
            display: block;
        }

        .titleHover {
            display: none;
            position: absolute;
            left: 70px;
            z-index: 10;
            font-size: 13px;
            color: white;
            padding: 2px 10px;
            background-color: #666;
        }
    }

    .column.right.collapsed {
        max-width: 70px;
        min-width: 70px;
        padding: 20px 10px;
        align-items: center;

        .singleButton {
            width: auto;
        }

        .singleButton svg {
            width: 23px;
            height: 23px;
        }

        .singleButton p {
            font-size: 11px;
        }

        .sectionHeader {
            margin-top: 15px;
        }

        .miniNoteIcon {
            display: flex;
            align-items: center;
            position: relative;
            margin-bottom: 20px;
        }

        .miniNoteIcon:hover>.titleHover {
            display: block;
        }

        .titleHover {
            display: none;
            position: absolute;
            right: 70px;
            z-index: 10;
            font-size: 13px;
            color: white;
            padding: 2px 10px;
            background-color: #666;
            white-space: nowrap;
        }

        .noteIcon {
            background-color: #ffe066;
            color: #222;
            font-weight: bold;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
        }
    }


    .collapsedContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .iconOnly {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #0077FF;
    }


    .popupdropzone {
        .upload-limit-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 30px;
            width: 100%;
        }

        .upload-progress-full {
            background-color: #eee;
            height: 8px;
            border-radius: 20px;
            overflow: hidden;
            width: 100%;
        }

        .topLimit {
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            flex-direction: row-reverse;
            width: 100%;
        }

        .upload-fill {
            background-color: #0077ff;
            height: 100%;
            transition: width 0.3s ease;
        }

        .upload-fill.full {
            background-color: #F99609;
        }

        .upload-text {
            font-size: 14px;
            white-space: nowrap;
        }

        .upgrade-button {
            background-color: transparent;
            border: 1px solid #0077ff;
            color: #0077ff;
            padding: 4px 10px;
            font-size: 13px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .upgrade-button:hover {
            background-color: #0077ff;
            color: white;
        }

    }


    /* For tablets and phone */
    /* Mobile tab bar visible only on small screens */
    .mobile-tab-bar {
        display: none;
    }

    @media (max-width: 1200px) {
        .mobile-tab-bar {
            display: flex;
            justify-content: space-around;
            background-color: white;
            border-bottom: 1px solid #e0e0e0;
            padding: 0 0 10px 0;
        }

        .mobile-tab-bar button {
            flex: 1;
            padding: 10px 0;
            font-weight: 500;
            background: none;
            border: none;
            font-size: 14px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }

        .mobile-tab-bar button.active {
            border-bottom: 2px solid #0077ff;
            color: #0077ff;
        }

        .mainContent {
            flex-direction: column;
            gap: 0;
            padding: 0;
        }

        .sectionHeader {
            display: none;
        }

        .buttonTop {
            margin-top: 0px !important;
            justify-content: space-between;
        }

        .singleButton {
            flex: 1;
        }

        .sideContent {
            /* border-top: 1px solid rgba(236, 236, 236, 0.436); */
        }

        .column {
            min-width: 100vw !important;
            box-shadow: none;
        }

        .sourceItem input[type="checkbox"] {
            margin-left: auto;
            margin-right: 10px;
        }
    }




    .uploadContainer {
        cursor: pointer;
        width: 80%;
        margin-top: 30px !important;
        height: 280px;
        border-radius: 20px;
        border: 1px #666 dashed;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px;
    }

    .uploadContainer h4 {
        margin-top: 10px;
        font-size: 18px;
        font-weight: 600;
    }

    .uploadContainer p {
        margin-top: 30px;
        font-size: 14px;
    }

    .uploadContainer p span {
        color: #007bff;
    }

    .uploadContainer p.footer {
        margin-top: auto;
        font-size: 12px;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {



        .uploadContainer {
            width: 100%;
            padding: 20px;
            height: auto;
        }

        .upload-limit-bar {
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
        }





        .fichiersWord {
            display: none;
        }
    }

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

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slideDown {
        from {
            transform: translateY(0);
            opacity: 1;
        }

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




    /* For smaller mobile screens */
    @media (max-width: 480px) {

        .uploadContainer {
            width: 100%;
            height: auto;
            padding: 15px;
        }

        .uploadContainer.little {
            height: 300px;
        }

        .upload-limit-bar {
            width: 100%;
        }

        .upload-progress-full {
            background-color: green;
            height: 20px;
        }

        .upload-text {
            font-size: 12px;
        }

        .upgrade-button {
            width: 100%;
            margin-top: 10px;
            padding: 10px;
        }
    }

    /* Slide transition pour mobile tabs */
    .mobile-tab-content {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: transform 0.3s ease-in-out;
        will-change: transform;
    }

    .mobile-tab-wrapper {
        position: relative;
        width: 100%;
        flex: 1;
        overflow: hidden;
        height: 100%;
    }

    .backIcon {
        padding: 10px 20px;
        margin-bottom: -10px;

        .Icon {
            background-color: #EBF3FD;
            cursor: pointer;
            border-radius: 50%;
            padding: 3px;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @media (max-width: 768px) {
            .Icon {
                width: 30px;
                height: 30px;
            }
        }
    }

}


.popupSelectMatter {
    .category-select-scrollable {
        max-height: 150px;
        overflow-y: auto;
        margin-top: 20px;
    }

    .category-dropdown {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border-radius: 8px;
        border: 1px solid #ccc;
    }

    .popup-buttons {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
    }

    .confirm-button,
    .cancel-button {
        padding: 8px 16px;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
    }

    .confirm-button {
        background-color: #007bff;
        color: white;
    }

    .cancel-button {
        background-color: #e0e0e0;
        color: #333;
    }
}




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

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

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



/* popup */

.popupSpecial {
    .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        background: rgba(198, 198, 198, 0.686);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
    }

    .custom-upload-popup {
        animation: slideUp 0.3s ease-out forwards;
    }

    .custom-upload-popup.closing {
        animation: slideDown 0.3s ease-in forwards;
    }

    .curstom-upload-popup-category {
        height: 75vh;
        max-height: 90vh;
    }

    .custom-upload-popup {
        position: relative;
        border-radius: 16px;
        background: #fff;
        padding: 80px;
        width: 90vw;
        height: 90vh;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    }



    .custom-upload-popup h3 {
        margin-bottom: 10px;
        font-size: 24px;
        font-weight: 600;
        color: #222;
        padding-bottom: 20px;
    }

    .custom-upload-popup h3 span {
        color: #007bff;
    }

    .custom-upload-popup p {
        margin: 5px 0;
        font-weight: 500;
        font-size: 12px;
        color: #666;
    }

    /* Responsive Styles for Popup */
    .custom-upload-popup {
        position: relative;
        border-radius: 16px;
        background: #fff;
        padding: 40px;
        width: 90%;
        max-width: 1000px;
        height: auto;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    }

    .custom-upload-popup h3 {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 600;
        color: #222;
        padding-bottom: 20px;
    }

    .crossIcon {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 5px;
        border-radius: 50%;
        background-color: #EBF3FD;
        cursor: pointer;
    }

    .crossIcon svg {
        width: 25px;
        height: 25px;
        padding: 6px;
    }

    .custom-select-wrapper {
        width: 100%;
        margin: 20px 0;
        position: relative;
    }

    .custom-select {
        margin-top: 30px;
        margin-bottom: 30px;
        width: 100%;
        padding: 10px 12px;
        font-size: 16px;
        border-radius: 8px;
        border: 1px solid #ccc;
        appearance: none;
        background-color: #fff;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L8 8L15 1' stroke='%23999' stroke-width='2'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px;
        cursor: pointer;
    }

    .custom-select:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
    }

    @media (max-width: 1200px) {
        .popup-overlay {
            position: absolute;
            bottom: 0;
            top: auto;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }

    @media (max-width: 768px) {
        .popup-overlay {
            position: fixed;
            bottom: 0;
            top: auto;
            left: 0;
            right: 0;
            height: 100%;
            padding: 0;
            background: none;
            display: flex;
            justify-content: center;
            align-items: end;
            z-index: 100;
            background-color: rgba(114, 114, 114, 0.58);
        }

        .crossIcon {
            top: 16px;
            right: 16px;
            position: absolute;
        }


        .custom-upload-popup.delete {
            height: 30vh;
        }

        .custom-upload-popup {
            width: 100vw;
            height: 75vh;
            max-height: 90vh;
            border-radius: 20px 20px 0 0;
            box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
            padding: 24px 20px;
            background: #fff;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            overflow-y: auto;

            /* Animation d’entrée */
            animation: slideUp 0.3s ease-out forwards;
        }

        .custom-upload-popup.closing {
            /* Animation de sortie */
            animation: slideDown 0.3s ease-in forwards;
        }

        .delete .popup-buttons {
            margin-top: 30px;
        }

        .bottomPopup {
            overflow: scroll;
            height: 100%;
        }
    }

    @media (max-width: 480px) {
        .custom-upload-popup {
            padding: 20px 20px;
            width: 100vw;
        }
    }
}


.flashcard-anchor-page, .qcm-container-generation {
    @media (max-width: 768px) {
        .popup-overlay {
            position: absolute;
            bottom: 0;
            top: auto;
            left: 0;
            right: 0;
            height: 100%;
            padding: 0;
            background: none;
            display: flex;
            justify-content: center;
            align-items: end;
            z-index: 100;
            background-color: rgba(114, 114, 114, 0.58);
        }
    }
}
.sideContent {
  padding: 20px 20px;
  overflow: scroll;
}

.sideContent h1 {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.sideContent h1 span {
  color: #883ae1;
}

.sideContent {
  .contentEdit {
    font-weight: 600;
    font-size: 15px;

    .searchIcon {
      margin-left: 19px;
      margin-top: -2px;
      color: #0077ff;
      display: flex;
      align-items: start;
      justify-content: start;
      cursor: pointer;
      font-size: 10px;
      gap: 5px;

      span {
        color: #0077ff;
      }
    }

    .deleteIcon svg {
      width: 17px;
    }
    .deleteIcon svg:hover {
      color: #0077ff;
    }
  }

  .barSeparation {
    width: 100%;
    height: 2px;
    background-color: #c3c3c328;
  }

  .contentEdit.more .difficulty-options {
    margin-top: 10px;
  }

  .contentEdit h4 {
    font-size: 12px;
    color: #c3c3c3;
    display: flex;
    gap: 10px;
  }

  .contentEdit h4 svg * {
    stroke: #c3c3c3;
  }

  .colorName {
    margin-top: 15px;
    display: flex;
  }

  .colorName .bar {
    width: 3px;
    height: 35px;
    border-radius: 100px;
    background-color: #883ae1;
  }

  .colorName input {
    margin-left: 15px;
    font-size: 16px;
    width: 100%;
  }

  .inputSimple {
    margin-top: 10px;
    font-size: 16px;
    width: 100%;
  }

  .buttonGenerate {
    cursor: pointer;
    background-color: #faf5ff;
    color: #883ae1;
    font-weight: 600;
    font-size: 1rem;
    margin: auto;
    width: fit-content;
    padding: 8px 40px;
    border-radius: 10px;
    box-shadow: 0 0 2px #883ae15a;
    margin-top: 40px;
  }

  .buttonGenerate:hover {
    box-shadow: 0 0 4px #883ae15a;
  }

  /* Sélection de la difficulté */
  .difficulty-options {
    display: flex;
    border: 1px solid var(--border-light);
    border-radius: 9999px;
    overflow: hidden;
    width: 100%;
    /* ou une largeur fixe selon besoin */
    margin-top: 15px;
  }

  .difficulty-btn {
    flex: 1;
    padding: 0.3rem 1rem;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    border: none;
    background-color: transparent;
    color: var(--primary-black);
  }

  .difficulty-btn:not(:last-child) {
    border-right: 1px solid var(--border-light);
  }

  .difficulty-btn:nth-child(3) {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
  }

  .difficulty-btn.easy-btn {
    background-color: var(--easy-bg);
    color: var(--easy-text);
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border: none;
  }

  .difficulty-btn.medium-btn {
    background-color: var(--medium-bg);
    color: var(--medium-text);
    border-radius: 0px;
    border: none;
  }

  .difficulty-btn.difficult-btn {
    background-color: var(--difficult-bg);
    color: var(--difficult-text);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border: none;
  }
}

.loaderSvg {
  width: 100%;
  height: 100%;
  max-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.loaderSvg.fc svg * {
  fill: #883ae1;
}

.loaderSvg p {
  margin-top: 15px;
  font-size: 0.9rem;
}

.spinBloc {
  width: 25px;
}
.sideContent.qcm {
  span {
    color: #0077ff !important;
  }

  .colorName .bar {
    background-color: #0077ff;
  }

  .buttonGenerate {
    color: #0077ff;
    background-color: #ebf3fd;
  }
  .buttonGenerate:hover {
    box-shadow: 0 0 4px #0077ff;
  }
}

.questionTypeSwitch {
  margin-top: 25px;
  display: flex;
  border: 1px solid #e0e0e02e;
  border-radius: 9999px;
  overflow: hidden;
  width: 100%;
  background-color: #f8f9fb;
}

.switchButton {
  flex: 1;
  padding: 7px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  color: #333;
  transition: background-color 0.3s ease;
  text-align: center;
}

.switchButton:not(:last-child) {
  border-right: 1px solid #e0e0e084;
}

.switchButton.active {
  background-color: #eaf1ff;
  color: #0077ff;
  font-weight: 600;
}

/* Button horizontal scroll */

.mini-slider {
  width: 100%;
}

.mini-slider input[type="range"] {
  width: 100%;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  background: #0077ff25;
  outline: none;
  margin: 12px 0;
}

/* Le petit curseur rond */
.mini-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0077FF;
  cursor: pointer;
}
.mini-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
  cursor: pointer;
}

.mini-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #888;
}

.mini-labels span.active {
  color: #fff;
  font-weight: 600;
}


.margin5 {
    margin-left: 8px !important;
}


/* Premium button */

@property --animate-duration {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --Color {
  syntax: '<color>';
  initial-value: #0077FF;
}
 
@keyframes rotate {
  0% {
    --animate-duration: 0deg;
    --Color: #F99609;
  }
  100% {
    --animate-duration: 360deg;
    --Color: #F99609;
  }
}

.btnSpan {
    background-color: white;
    padding: 2px 10px;
    font-size: 8px;

    p {
        color: #F99609 !important;
    }
}

.under_button:after,
.under_button:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  height: 100%;
  border-radius: calc(100px + 1.5px);
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: conic-gradient(
    from var(--animate-duration) at 50% 50%,
    #ffff 0%,
    #ffff 20%,
    var(--Color) 50%,
    var(--Color) 66%,
    #ffff 100%
  );
  animation: rotate 3s infinite linear;
}
 
.under_button:before {
  animation: rotate 3s infinite linear;
  filter: blur(20px);
}.column {
    .buttonTop {
        display: flex;
        padding: 0 10px;
        margin-top: -10px;
        gap: 20px;
        justify-content: space-between;
    }

    .singleButton {
        display: flex;
        align-items: center;
        justify-content: start;
        width: 50%;
        padding: 5px 10px;
        font-weight: 600;
        border-radius: 10px;
        cursor: pointer;
    }

    .singleButton.fc {
        color: #883AE1;
        box-shadow: 0 0 0 2px #FAF5FF;

        svg {
            color: #883AE1;
            background-color: #F1E8FD;
        }
    }

    .singleButton.fc.active {
        background-color: #FAF5FF;
    }

    .singleButton.qcm {
        color: #0077FF;
        box-shadow: 0 0 0 2px #EBF3FD;

        svg {
            background-color: #EBF3FD;
        }
    }

    .singleButton.qcm.active {
        background-color: #F3F8FF;
    }

    .singleButton.chat-ia {
        color: #00BB2C;
        box-shadow: 0 0 0 2px #D9F5E0;

        svg {
            padding: 3px;
            background-color: #d4f9dd;
        }

        svg * {
            fill: #00BB2C;
        }
    }

    .singleButton.chat-ia.active {
        background-color: #e2fae8;
    }

    .singleButton svg {
        width: 25px;
        height: 25px;
        padding: 5px;
        border-radius: 50%;
    }

    .singleButton p {
        margin-left: 10px;
        font-size: 12px;
    }
}

.left * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.column.center {
  overflow: hidden;
  height: 100%;
  position: relative;
  /* width: 200px !important; */
  /* background-color: red; */
  container-name: minichat;
  container-type: inline-size;
  /* overflow: scroll; */

  .ficheNotionPart {
    /* margin-top: -20px !important; */
    position: relative !important;
  }

  .IA-anchor,
  .expanded-view {
    width: 100% !important;
    background-color: green;
    position: relative !important;
    overflow: hidden !important;
  }

  .generation-steps-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    animation: fadeInContainer 0.3s ease-out;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
    width: 100%;
  }

  .step-item {
    opacity: 0;
    font-size: 13px;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: flex;
    align-items: center;
    color: rgb(99, 99, 99);
    max-width: 280px;
    width: 100%;
    min-width: 0; /* Important pour permettre la réduction */

    svg {
      width: 15px;
      fill: rgb(99, 99, 99);
      flex-shrink: 0; /* L'icône ne se réduit pas */
    }
  }

  .step-item.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .step-index {
    font-weight: bold;
    margin-right: 0.5rem;
    flex-shrink: 0; /* L'index ne se réduit pas */
  }

  /* Nouveau : wrapper pour le texte qui peut se réduire */
  .step-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: auto;
    flex: 1;
    margin-left: 0.5rem;
    min-width: 0;
  }

  .step-done {
    font-weight: bold;
    font-size: 0.9em;
    flex-shrink: 0;
  }

  .step-pending {
    color: #6b7280;
    font-size: 1.2em;
    flex-shrink: 0;
    margin-right: 0.25rem;
  }

  @keyframes fadeInContainer {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.8;
    }
  }

  .uploadButtonIA {
    display: none;
  }

  @media (max-width: 767px) {
  }
}

.column.center .subtitle {
  font-size: 12px !important;
  margin-top: 10px;
}

.loaderSvg.center {
  margin-top: 50px;
}

.awaitCreation p {
  font-size: 1.4rem !important;
  font-weight: 600;
  color: rgb(68, 68, 68);
}

@container minichat (max-width: 1000px) {
  .input-area {
    position: relative;
    /* background-color: green; */
    width: 95%;
  }
  .ai-search-container {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.15);
    width: 200%;
    /* background-color: red; */
  }

  .ai-search-bar {
    min-height: 50px;
  }

  .ai-option-button span {
    display: none;
  }

  .ai-option-button {
    width: 35px !important;
    padding: 0 !important;
    justify-content: center;
  }
}
/* FlashcardView.css */
.flashcard-view {
  margin: auto;
  display: flex;
  justify-content: center;
  padding: 10px 0px 30px 0px;
  overflow: visible !important;
}

.flashcard-view {
  /* Card component styles */
  .main-card {
    width: 100;
    max-width: 530px;
    margin: auto;
    background-color: #FAF5FF;
    /* Couleur de la carte principale (active) */

    border-radius: 35px;
    box-shadow: 0 1px 5px rgba(194, 193, 193, 0.269);

    padding-top: 1.5rem;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    word-wrap: break-word;
    /* Pour la compatibilité avec les anciens navigateurs */
    overflow-wrap: break-word;
    /* Propriété standard moderne */
    max-height: 345px;
    min-height: 345px;
    overflow-y: auto;
    scrollbar-width: none;
    /* Pour Firefox */
    -ms-overflow-style: none;
    /* Pour Internet Explorer et Edge */
  }

  /* Style pour les cartes en arrière-plan */
  .background-card {
    background-color: white;
  }

  /* Vous pouvez également ajouter des styles pour le conteneur des cartes en arrière-plan */
  .background-container {
    /* Styles supplémentaires pour les conteneurs des cartes en arrière-plan si nécessaire */
  }

  /* Pour Chrome, Safari et autres navigateurs basés sur WebKit */
  .main-card::-webkit-scrollbar {
    display: none;
  }

  @media (min-width: 768px) {
    .main-card {
      padding-top: 2rem;
    }

    .card-label {
      margin-bottom: 40px;
    }
  }

  .flip-button {
    width: 24px;
    height: 22px;
    border-radius: 50%;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    border: none;
    cursor: pointer;
  }

  .flip-button.flipped {
    transform: rotate(180deg);
  }

  .flip-icon {
    cursor: pointer;
    width: 24px;
    height: 22px;
    transition: transform 0.3s;
  }

  .card-label {
    font-size: 14px;
    color: #000000;
    font-weight: 600;
    margin-bottom: 15px;
  }

  @media (max-width: 768px) {
    .card-content {
      margin-top: 0px !important;
    }
  }

  .card-content {
    text-align: center;
    font-size: 14px !important;
    font-weight: 600;
    max-width: 28rem;
    width: 100%;
    padding: 0 20px;
    margin-top: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
    position: relative;
    max-height: calc(100% - 100px);
  }

  .card-content::-webkit-scrollbar {
    width: 6px;
  }

  .card-content::-webkit-scrollbar-track {
    background: transparent;
  }

  .card-content::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
  }

  .card-content > div {
    width: 100%;
    padding-bottom: 30px;
  }

  @media (min-width: 768px) {
    .card-content {
      font-size: 15px !important;
    }
  }

  .flashcard-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  .flashcard-nav.left {
    left: 0;
  }

  .flashcard-nav.right {
    right: 0;
  }

  .flashcard-card-container {
    /* Custom properties for animation effects */
    --active: 0;
    --offset: 0;
    --direction: 0;
    --abs-offset: 0;

    /* These will be controlled via inline styles */
    /* pointer-events, opacity, and display are set dynamically */
  }



  @theme {
    --color-primary-blue: #0077FF;
    --color-primary-black: #191919;
    --color-pink-200: #FF6BCE;
    --color-red-200: #FECDD3;
    --color-orange-200: #FECDD3;
    --color-yellow-200: #FFD68A;
    --color-yellow-500: #FFEC44;
    --color-green-200: #00BB2C;
    --color-green-500: #A8E8A8;
    --color-purple-200: #8962FF;
    --color-purple-500: #C1C1FF;
    --color-teal-200: #CFAEB7;
    --color-blue-200: #7CC2FF;
    --color-indigo-200: #8962FF;
    --color-rose-200: #FF8484;

    --breakpoint-xs: 375px;
  }

  [contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: #9CA3AF;
    cursor: text;
  }

  [contenteditable]:focus {
    outline: none;
  }

  .flashcard-carousel {
    position: relative;
    max-width: 530px !important;
    width: 100%;
    border-radius: 35px !important;
    height: 200px !important;
    perspective: 500px;
    transform-style: preserve-3d;
  }

  .flashcard-card-container {
    position: absolute;
    width: 100%;
    height: 100%;
    transform:
      rotateY(calc(var(--offset) * 50deg)) scaleY(calc(1 + var(--abs-offset) * -0.4)) translateZ(calc(var(--abs-offset) * -30rem)) translateX(calc(var(--direction) * -5rem));
    filter: blur(calc(var(--abs-offset) * 1rem));
    transition: all 0.3s ease-out;
  }

  .cards {
    width: 100%;
    height: 100%;
    padding: 2rem;
    border-radius: 1rem;
    transition: all 0.3s ease-out;
  }

  .cards h2 {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 0 0 0.7em;
  }

  .cards p,
  .cards h2 {
    transition: all 0.3s ease-out;
    opacity: var(--active);
  }

  .flashcard-nav {
    color: white;
    font-size: 5rem;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    z-index: 2;
    cursor: pointer;
    user-select: none;
    background: unset;
    border: unset;
  }

  .flashcard-nav.left {
    transform: translateX(-100%) translatey(-50%);
  }

  .flashcard-nav.right {
    right: 0;
    transform: translateX(100%) translatey(-50%);
  }

  .count-text {
    border: solid 1px black;
    border-radius: 50px;
    padding: 1px 10px;
  }

  @media (max-width: 768px) {
    .flashcard-anchor-page .anchor-section .card-count {
      margin-top: -20px;
      margin-left: -20px !important;
    }

    .flashcard-anchor-page .anchor-section .main-card {
      width: 90vw !important;
    }

    .flashcard-anchor-page .anchor-section .header.flashcardsPageContainer {
      display: none;
    }

    .flashcard-anchor-page .progress-wrapper {
      width: 85vw;
      margin-top: 0px;
    }

    .anchor-section {
      padding: 0px;
    }

    .anchor-section .main-card {
      width: 80%;
      height: 350px !important;
      min-height: inherit;
      margin: auto;
    }

    .card-label {
      margin-bottom: 40px;
    }

    .card-content {
      max-width: 90%;
      font-size: 16px !important;
      padding: 0 15px;
    }
  }

  @media (max-width: 500px) {
    .card-content {
      font-size: 12px !important;
      padding: 0 10px;
    }

    .flashcard-carousel {
      height: 45dvh;
      max-height: 45dvh;
    }

    .card-label {
      margin-top: -10px;
      font-size: 14px;
      margin-bottom: 30px;
    }

    .main-card {
      min-height: 40dvh !important;
      height: 40dvh !important;
      max-height: 300px !important;
    }
  }
}

.flashcardsPageContainer .card-container .card {
  background-color: #F0F4F9;
  border: none;
  position: relative;
}

@media (max-width: 768px) {

  .card-description {
    width: 100%;
  }

  .flashcardsPageContainer .card-container .card {
    display: flex;
    align-items: center;
  }

  .card-container .card .card-title,
  .card-container .card .card-description {
    width: 100%;
    text-align: center;
  }
}


.top-right-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 3;
}

.editTextButton {
  font-size: 13px;
  height: 33px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.editTextButton:hover { background: #f9fafb; }

.editControls {
  display: inline-flex;
  gap: 8px;
}
.saveBtn, .cancelBtn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
}
.saveBtn { color: #155e75; border-color: #bae6fd; background: #ecfeff; }
.saveBtn:hover { filter: brightness(0.97); }
.cancelBtn { color: #7f1d1d; border-color: #fecaca; background: #fff1f2; }
.cancelBtn:hover { filter: brightness(0.97); }

.editArea { display: flex; flex-direction: column; gap: 8px; margin: auto; }
.editTabs { display: inline-flex; gap: 6px; }
.tabBtn {
  font-size: 12px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
}
.tabBtn.active { border-color: #3f71ee; color: #3f71ee; background: #eff4ff; }

.editTextarea {
  min-height: 160px; width: 100%;
  border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; line-height: 1.5;
  margin-top: 5px;
}
.editHint { font-size: 12px; color: #6b7280; }


.marginReset {
  margin-top: 0px !important;
}

.no-scroll-touch {
  touch-action: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

/* Badges overlay dans la carte */
.fc-badge {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 6px 10px;
  font-weight: 700;
  border-radius: 12px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

.fc-badge-right {
  background: rgba(32, 201, 150, 0.654);
  /* border: 1px solid rgba(32, 201, 151, 0.35); */
}

.fc-badge-left {
  background: rgba(255, 193, 7, 0.15);
  /* border: 1px solid rgba(255, 193, 7, 0.587); */
}

/* Optionnel : hover léger sur la carte active */
.main-card {
  position: relative;
  will-change: transform, filter, opacity;
}


.clickInfoReturn {
  position: absolute;
  bottom: 25px;
  font-weight: 600;
  font-size: 11px;
  color: gray;
}



.top-right-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 3;
}

.editTextButton {
  font-size: 13px;
  height: 33px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.editTextButton:hover { background: #f9fafb; }

.editControls {
  display: inline-flex;
  gap: 8px;
}
.saveBtn, .cancelBtn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
}
.saveBtn { color: #155e75; border-color: #bae6fd; background: #ecfeff; }
.saveBtn:hover { filter: brightness(0.97); }
.cancelBtn { color: #7f1d1d; border-color: #fecaca; background: #fff1f2; }
.cancelBtn:hover { filter: brightness(0.97); }

.editArea { display: flex; flex-direction: column; gap: 8px; margin: auto; }
.editTabs { display: inline-flex; gap: 6px; }
.tabBtn {
  font-size: 12px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
}
.tabBtn.active { border-color: #3f71ee; color: #3f71ee; background: #eff4ff; }

.editTextarea {
  min-height: 160px; width: 100%;
  border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; line-height: 1.5;
  margin-top: 5px;
  background: #fff;
}
.editHint { font-size: 12px; color: #6b7280; }


.marginReset {
  margin-top: 0px !important;
}/* AnchorPage.css */
.flashcard-anchor-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: scroll !important;

  section {
    flex: 1 1 auto; /* prend la hauteur dispo */
    display: flex;
    flex-direction: column;
    min-height: 0; /* important pour autoriser le shrink en flex */
  }

  #root {
    max-width: 100vw;
    height: auto;
    /* overflow-y: hidden; */
  }

  .back-arrow2 {
    cursor: pointer;
    position: absolute;
    width: 39px;
    height: 39px;
    left: 10px;
    top: 130px;
    background-color: #ebf3fd;
    padding: 10px;
    border-radius: 30px;
  }

  /* Common section styles */
  .loading-section,
  .error-section,
  .empty-section {
    margin-bottom: 75px;
  }

  .pageContainer.anchorPage {
    /* overflow: hidden; */
    position: relative;
    padding: 0px;
    margin-top: -85px !important;
    border: none !important;
    height: 100%;
  }

  .anchor-section {
    padding: 0px !important;
    min-height: 100dvh;
    margin: 0px !important;
    padding: 0px !important;
    width: 100%;
    margin: 20px auto 0px !important;
    max-width: 100%;
    overflow-x: hidden;
    border: none !important;
  }

  /* Loading state container */
  .loading-container {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
  }

  /* Error state container */
  .error-container,
  .empty-container {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;
  }

  .error-message {
    color: #ef4444;
  }

  .back-button {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    background-color: #3b82f6;
    color: white;
    cursor: pointer;
    border: none;
  }

  /* Main container */
  .max-width-container {
    max-width: 1258px;
    margin-left: 45px;
    margin-right: auto;
    padding-top: 40px;
  }

  /* Card count section */
  .card-count {
    margin-left: 4rem;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    margin-top: 70px;
  }

  .red-line {
    width: 4px;
    height: 3rem;
    margin-right: 0.75rem;
  }

  .page-title {
    font-size: 1.25rem;
    font-weight: 700;
  }

  .count-info {
    margin-left: 24px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .count-text {
    font-size: 0.875rem;
    color: #4b5563;
  }

  /* Difficulty badge styles */
  .difficulty-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
  }

  .difficulty-green {
    background-color: #dcfce7;
    color: #166534;
  }

  .difficulty-yellow {
    background-color: #fef9c3;
    color: #854d0e;
  }

  .difficulty-red {
    background-color: #fee2e2;
    color: #991b1b;
  }

  /* Progress bar container */
  .progress-container {
    width: 100%;
    max-width: 1258px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .progress-wrapper {
    width: 90%;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (min-width: 640px) {
    .progress-wrapper {
      /* width: 315px; */
    }
  }

  @media (min-width: 1024px) {
    .progress-wrapper {
      /* width: 726px; */
    }
  }

  .close-button {
    margin-right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
  }

  .progress-number {
    margin-left: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
  }

  /* Flashcard container */
  .flashcard-container {
    padding: 1.5rem 1rem;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    min-height: 500px;
    width: 100%;
    border: none !important;
  }

  @media (max-width: 768px) {
    .flashcard-container {
      max-width: 56rem;
      min-height: 0 !important;
      padding: 0.5rem;
      margin-top: 0;
    }
    .back-arrow2 {
      display: none;
    }
  }

  .flashcard-wrapper {
    position: relative !important;
    margin-top: 30px;
    width: 100%;
    height: fit-content !important;
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .flashcard-wrapper {
      margin-top: 0;
    }
  }

  @media (min-width: 768px) {
    .flashcard-wrapper {
      height: 400px;
    }
  }

  /* Flip button container */
  .flip-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  @media (min-width: 768px) {
    .flip-container {
      /* margin-top: 1rem; */
    }
  }

  .flip-text {
    color: #3b82f6;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
  }

  .eye-icon {
    cursor: pointer;
    width: 45px;
    height: 45px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 5px;
  }
  .eye-icon.flipped {
    background-color: #0077ff;
  }

  /* Navigation buttons */
  .navigation-buttons {
    display: flex;
    justify-content: space-between;
    width: 300px;
    margin: auto;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.1);
    padding: 10px 10px;
    border-radius: 15px;
    margin-top: -50px;
    z-index: 100000 !important;
    background-color: white;
  }

  .nav-button {
    cursor: pointer;
    padding: 0.4rem 1.5rem;
    width: 140px;
    height: 38px;
    border-radius: 15px;
    border: none;
  }

  .prev-button {
    background-color: #dbeafe;
    color: #3b82f6;
  }

  .prev-button.disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: default;
  }

  .next-button {
    background-color: #3b82f6;
    color: white;
  }

  .next-button.disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: default;
  }

  .finish-button {
    background-color: #3b82f6;
    color: white;
  }

  .anchor-section .back-arrow {
    left: 30px;
  }

  .progressAndTitle {
    padding: 0 30px;
  }

  @media (max-width: 768px) {
    .flashcard-container {
      margin-top: 20px;
    }

    .flip-container {
      /* margin-top: 70px; */
    }

    .navigation-buttons {
      max-width: 100vw;
      padding: 0px 20px;
    }
  }

  @media (max-width: 767px) {
    .main-card {
      max-height: 400px !important;
      min-height: inherit;
      min-height: 350px;
    }
  }

  @media (max-width: 500px) {
    .main-card {
      width: 90vw !important;
      margin: auto;
      max-height: 300px !important;
      min-height: inherit;
      min-height: 280px;
    }

    .nav-button {
      padding: 0px 0px !important;
      height: 30px;
      font-size: 13px;
    }

    .flip-text {
      font-size: 12px;
    }

    .eye-icon {
      width: 40px;
      padding: 10px;
      height: 40px;
    }

    .flashcard-container {
      /* justify-content: center;
      align-items: center; */
    }

    .flip-container {
      /* margin-top: -10px; */
    }
  }

  @media (max-width: 767px) {
    /* Main container */
    .max-width-container {
      margin-left: -45px;
      margin-top: -30px;
    }

    .progress-wrapper {
      width: 85%;
    }
  }

  .fc-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    padding: 14px 0 0;
  }

  .fc-btn {
    width: 70px;
    height: 55px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
      border-color 0.15s ease, opacity 0.15s;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    p {
      font-size: 10px;
    }
  }
  .fc-btn:hover {
    transform: translateY(-2px) scale(1.03);
  }
  .fc-btn:active {
    transform: scale(0.97);
  }
  .fc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Couleurs type Tinder */
  .fc-btn--revoir {
    color: #3aa7ff;
    border-color: rgb(58, 166, 255);
  } /* ⭐ */
  .fc-btn--trash {
    margin-top: 0px;
    color: #f99609;
    border-color: rgb(255, 165, 31);
  } /* ✖︎ */
  .fc-btn--appris {
    color: #2ad49f;
    border-color: rgb(42, 212, 158);
  } /* ❤︎ */

  .fc-btn--revoir:hover {
    color: white;
    background-color: rgb(58, 166, 255);
  }
  .fc-btn--trash:hover {
    color: white;
    background-color: rgb(255, 165, 31);
  }
  .fc-btn--appris:hover {
    color: white;
    background-color: rgb(42, 212, 158);
  }

  /* effet "hover" pendant le drag vers le bouton ciblé */
  .fc-btn--appris.intent {
    background: #e7f0ff;
    box-shadow: 0 8px 20px rgba(63, 113, 238, 0.18);
    transform: translateY(-1px);
    background-color: rgb(32, 201, 150) !important;
    color: white !important;
  }

  .fc-btn--trash.intent {
    background: #e7f0ff;
    box-shadow: 0 8px 20px rgba(63, 113, 238, 0.18);
    transform: translateY(-1px);
    background-color: rgb(255, 165, 31) !important;
    color: white !important;
  }

  @media (max-width: 768px) {
    .navigation-buttons {
      margin-top: 20px;
      padding: 10px 20px;
    }
  }
}
.selectmatter {
  h1 {
    margin-top: inherit !important;
  }
}

/* ====== Mise en page ====== */
.matter-content {
  width: 100%;
  height: calc(100dvh - 64px);
  padding: 24px 20px;
  padding-top: 20px;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
}

.matter-title {
  font-size: 37px;
  font-weight: 800;
  color: #121826;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  position: relative;
}

.matter-title::before {
  content: "";
  width: 5px;
  height: 50px;
  background-color: #0077ff;
  margin-right: 15px;
  border-radius: 15px !important;
}

/* Grille 3 colonnes */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  flex: 1;
  min-height: 0;
}

/* Cartes Étape */
.step-card {
  border-radius: 16px;
  padding: 18px 18px 20px;
  box-shadow: 0px 1px 48px 4px #ecf0f3,
    /* drop clair (maquette) */ 0px 4px 4px rgba(0, 0, 0, 0.05); /* ombre douce */
  display: flex;
  flex-direction: column;
  height: 100% !important;
  overflow: hidden !important;
  position: relative;

  /* ← animations */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease-in-out, transform 220ms ease-in-out;
}

.step-card.hide {
  opacity: 0.6 !important;
}

/* Header avec petit filet bleu */
.step-header {
  margin-bottom: 12px;
}

.step-subheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.step-line {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 4px; /* épaisseur de la barre */
  width: 0px !important; /* largeur initiale */
  background-color: #3f71ee; /* couleur de ta marque */
  border-radius: 0px;
  transition: width 0.6s ease; /* animation fluide */
}

.step-line.expanded {
  width: 100% !important; /* quand séance choisie → s'étend */
}

.step-title {
  font-size: 22px;
  font-weight: 800;
  color: #1f2937;
  margin: 0 0 4px;
}
.step-sub {
  margin: 0 0 10px;
  color: #9aa1ab;
  font-weight: 600;
}

/* Corps */
.step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Étape 1 — niveaux */
.grid-levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 6px;
}
.pill {
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pill.is-active {
  background: #2e7cf6;
  border-color: #2e7cf6;
  color: #fff;
}

/* Étape 2 — liste chapitres */
.list-select {
  display: grid;
  padding-right: 15px;
  gap: 12px;
  margin-bottom: 10px;
}
.list-item {
  position: relative;
  height: auto;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  font-weight: 600;
  color: #111827;
  text-align: left;
  padding: 10px 14px;
  font-size: 15px;
  list-style: none;
}
.list-item.is-active {
  background-color: #2e7cf6;
  color: white;
  box-shadow: 0 0 0 2px rgba(46, 124, 246, 0.15) inset;
}

/* Étape 3 — options + CTA */
.section-label {
  color: #6b7280;
  font-weight: 800;
  margin: 6px 0 6px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 15px;
  font-weight: 600;
}
.check-item input {
  width: 18px;
  height: 18px;
}

.step-footer {
  margin-top: auto;
  display: flex;
  position: relative;
}
.cta-start {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 95%;
  padding: 0 2px !important;
  border: none;
  border-radius: 12px;

  color: #53adf0;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0px 4px 4px #e5e5e5;

  border: 1px solid #e5e5e5;
  cursor: pointer;
}

/* ====== Mobile : une carte par écran + nav ====== */
.step-nav-mobile {
  display: none;
  gap: 12px;
  margin-top: 16px;
}
.btn-primary,
.btn-secondary {
  height: 46px;
  border-radius: 10px;
  padding: 0 16px;
  font-weight: 800;
  border: none;
}
.btn-primary {
  background: #2e7cf6;
  color: #fff;
}
.btn-secondary {
  background: #eef2f7;
  color: #374151;
}

.loadingCenter {
  height: 70%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-item.is-disabled {
  opacity: 0.5;
}
.check-item input[readonly] {
  pointer-events: none;
}

@media screen and (max-width: 991px) {
  .selectmatter .pageContainer {
    width: 100% !important;
  }

  .headerContent {
    margin-bottom: 30px;
  }

  .matter-title::before {
    height: 40px;
  }
  .matter-title {
    font-size: 32px !important;
  }
}

@media screen and (max-width: 767px) {
  .step-subheader {
    margin-top: 50px !important;
  }
}

.selectmatter .lockIcon {
  position: absolute;
  top: 10px;
}

.step-card {
  display: flex;
  flex-direction: column;
}

/* 2) Le conteneur du corps doit autoriser un enfant scrollable */
.step-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0; /* CRUCIAL pour que l'enfant puisse scroller */
}

.grid-matters-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;

  max-height: 400px; /* hauteur fixe ou max (ajuste selon ton design) */
  overflow-y: scroll !important; /* ✅ la barre est TOUJOURS visible */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #3f71ee #f1f1f1;
}

/* Chrome / Edge / Safari */
.grid-matters-scroll::-webkit-scrollbar {
  width: 80px;
}
.grid-matters-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.grid-matters-scroll::-webkit-scrollbar-thumb {
  background-color: #3f71ee;
  border-radius: 20px;
  border-radius: 4px;
}

.custom-scroll {
  position: relative;
  max-height: 400px;
  overflow: auto;
  /* masquer la native */
  scrollbar-width: none; /* Firefox */
}
.custom-scroll::-webkit-scrollbar {
  display: none;
} /* WebKit */

.custom-track {
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  width: 6px;
  background: #eef1f7; /* rail */
  border-radius: 6px;
}

.custom-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  background: #3f71ee; /* pouce */
  border-radius: 6px;
}

*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* Scrollbar optionnelle : plus jolie */
*::-webkit-scrollbar {
  height: 6px;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

.step-subheader button {
  display: none;
}

.nav-btn-primary,
.nav-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.nav-btn-primary {
  background: #3f71ee;
  color: #fff;
  border: none;
  border: 1px solid #3f71ee;
}
.nav-btn-primary:hover:not(:disabled) {
  background: #2f5bd1;
}
.nav-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nav-btn-secondary {
  background: #f3f4f6;
  color: #111;
  border: 1px solid #ddd;
}
.nav-btn-secondary:hover {
  background: #e5e7eb;
}

.step-footer-mobile {
  width: 100%;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 18px;
  justify-content: space-between;
  display: none;
  z-index: 100;
  background: linear-gradient(to top, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
  padding-top: 30px;
  padding-bottom: 20px;
}

@media (max-width: 1024px) {
  .step-subheader {
    margin-top: 30px;
  }

  .step-subheader button {
    display: block !important;
  }

  .backIcon {
    margin-top: 0px !important;
  }
  .matter-content {
    margin-top: 0px;
    overflow: hidden;
    position: relative;
  }

  .steps-grid {
    width: 100%;
    grid-template-columns: 1fr !important;
    overflow: hidden;
  }

  .step-card {
    position: absolute;
    border-radius: 0px;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100dvh;
    max-height: none !important;
    box-shadow: none !important;
    overflow: hidden;
    padding-bottom: 80px;
  }

  .step-card.is-active {
    display: flex;
  }
  .step-card.is-inactive {
    display: none;
  } /* montre 1 carte à la fois */
  .step-nav-mobile {
    display: flex;
    position: absolute;
    top: 0px;
    right: 0px;
    align-items: flex-end;
    justify-content: end;
  }
  .step-footer {
    display: none;
  } /* CTA en bas remplace */

  .step-footer-mobile {
    display: flex;
  }
}

@media (max-width: 1200px) {
  .matter-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* conteneur global */
.scroll-wrap {
  position: relative;
  overflow: hidden;
}

/* conteneur scollable natif (scrollbar masquée) */
.scroll-inner {
  overflow: auto;
  -webkit-overflow-scrolling: touch;   /* iOS Safari smooth */
  scrollbar-width: none;               /* Firefox: masque la native */
}
.scroll-inner::-webkit-scrollbar {     /* WebKit (Safari/Chrome) */
  width: 0;
  height: 0;
  background: transparent;
}

/* Piste custom (toujours visible) */
.custom-track {
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: none;
  border-radius: 8px;            /* arrondi rail */
  pointer-events: none;          /* clics passent au contenu */
  z-index: 1;                    /* au-dessus du contenu */
}

/* Pouce custom */
.custom-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  background: #3F71EE;          /* couleur pouce */
  border-radius: 8px;           /* arrondi pouce */
  /* optionnel: effet flottant */
  /* box-shadow: 0 0 0 2px #eef1f7 inset; */
}
.pdfviewer {
  overflow: hidden;
  height: 100%;
}

.exo-popup-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;

  /* position: relative; */
  width: 100% !important;
  /* padding: 0 30px; */

  .paddingPart {
    margin: 0 30px;
    flex: 1; /* prend tout l’espace disponible au-dessus du footer */
    overflow-y: auto;
    position: relative;
    /* background-color: yellow; */
    overflow-x: hidden;
  }

  .titleQCMContainer {
    display: flex;
    position: absolute;
    width: 100%;
    margin-top: 0px;
    align-items: center;
    overflow: hidden;
  }

  .titleQCM {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .popup-question-card {
    margin-top: 60px;
    /* background-color: green; */
  }

  .popup-question-card h5 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 600;
    margin-right: 30px;
  }

  .options-list {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-bottom: 24px;
  }

  .option {
    padding: 12px 20px;
    padding-left: 40px;
    border-radius: 8px;
    background: #f1f4f9;
    color: black;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    position: relative;
  }

  .correctAnswer {
    position: absolute;
    height: 100%;
    top: 0px;
    left: 10px;
    display: flex;
    align-items: center;
  }

  /* .option:hover:not(:disabled) {
    background: #0077FF;
    color: white;
  } */

  .option.selected {
    background: #0077ff;
    color: white;
    font-weight: 600;
  }

  .option.correct {
    background: #0077ff;
    color: white;
  }

  .option.wrong {
    background: #ff6a6adf;
    color: white;
    /* background: #fddede;
    border-color: #dc3545; */
  }

  .option:disabled {
    cursor: not-allowed;
  }

  .exo-popup-footer {
    /* background-color: red !important; */
    /* margin-bottom: 20px; */
    width: 100%;
    padding: 16px 40px;
    z-index: 1000;
    background: #d0e6ff;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    height: 100px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    justify-content: center;
  }

  .exo-popup-footer.correct {
    /* height: 180px; */
  }

  .correction-box {
    margin-bottom: 16px;
    width: 100%;
    margin: 0 50px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    height: 100%;

    .correctionTitle {
      font-size: 20px;
      font-weight: 600;
    }

    .correctionText {
      font-weight: 500;
      margin-top: 5px;
    }
  }

  .navigation-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 100%;
  }

  .navigation-buttons .returnButton {
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    border: none;
    background: #ebf3fd;
    color: #0077ff;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    margin: 0px;
    transition: background 0.3s;
  }

  .navigation-buttons button:disabled {
    background: #ccc;
    cursor: not-allowed;
  }

  .navigation-buttons .nextButton {
    background-color: #0077ff;
    padding: 8px 25px !important;
    height: 40px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 13px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
  }

  .nextButton.leave {
    background-color: #ff4810f3 !important;
  }

  .navigation-buttons .nextButton.disabled {
    background-color: #b3b3b3;
    box-shadow: none;
  }

  .popup-question-content {
    display: flex;
    align-items: stretch;
    /* <--- important pour que les enfants prennent toute la hauteur */
    position: relative;

    width: 100%;

    gap: 30px;
  }

  .left-popup-question {
    width: 70%;
  }

  /* Picture */
  .picturePart {
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
    position: relative;
    overflow: hidden;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 200px;
  }

  .picContainer {
    position: relative;
    width: 30%;
    max-width: 310px;
    height: 100%;
    position: relative;
    border-radius: 15px;
    margin: auto;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  }

  .upscalePicture {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
    z-index: 10;
  }

  @media only screen and (max-width: 1000px) {
    .popup-question-content {
      flex-direction: column-reverse;
    }

    .picContainer {
      width: 100%;
      max-width: inherit;
    }

    .left-popup-question {
      width: 100%;
    }

    .picturePart {
      min-height: 100px;
      max-height: 100px;
      object-fit: contain;
      position: relative;
      overflow: hidden;
      width: auto;
      margin: auto;
      border-radius: 15px;
    }

    .picturePart img {
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

    .titleQCM {
      font-size: 15px;
    }

    .popup-question-card h5 {
      font-size: 14px;
      margin-bottom: 20px;
      font-weight: 600;
    }

    .option {
      font-size: 12px;
    }
  }

  @media only screen and (max-width: 767px) {
    .exo-popup-footer {
      height: 60px;
    }

    .upscalePicture svg {
      width: 30px;
    }

    .upscalePicture {
      top: -15px;
    }

    .progress-bar {
      margin-top: 20px;
    }

    .exo-popup-footer.correct {
      /* height: inherit; */
    }

    
    .navigation-buttons .nextButton {
      padding: 2px 15px !important;
      height: 30px !important;
      display: flex;
      align-items: center;
      font-size: 10px;
    }

    .navigation-buttons .returnButton {
      min-width: 30px !important;
      min-height: 30px !important;
      max-width: 30px !important;
      max-height: 30px !important;
    }
  }

  /* Skeleton de base */
  .skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
    animation: skeleton-loading 1.4s ease-in-out infinite;
    border-radius: 6px;
  }

  /* Animation de chargement */
  @keyframes skeleton-loading {
    0% {
      background-position: -200px 0;
    }

    100% {
      background-position: calc(200px + 100%) 0;
    }
  }

  /* Skeleton titre question */
  .skeleton-title {
    height: 24px;
    width: 80%;
    margin-bottom: 30px;
  }

  /* Skeleton pour chaque option */
  .skeleton-option {
    height: 45px;
    width: 100%;
    margin-bottom: 12px;
  }
}

@media only screen and (max-width: 1000px) {
  .pdfviewer.video-popup-overlay {
    margin-right: 0px !important;
    margin-left: 0px !important;
  }
}

/* Image upscale */
.fullscreen-image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background: rgba(69, 69, 69, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullscreen-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 0 30px rgba(61, 61, 61, 0.6);
  padding: 10px;
}

.close-fullscreen {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 3rem;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
}

/* Correction phone */
.mobile-correction-box {
  display: block;
  padding: 16px;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 20px;
  border-radius: 15px;
  background-color: #f9f9f9;
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15);

  .correctionTitle {
    margin-left: 0px;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 10px;
  }

  .correctionText {
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  .mobile-correction-box {
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }

  /* Optionnel : ajuster le padding du popup pour laisser place à la correction en bas */
  .video-popup-container {
    padding-bottom: 120px;
    /* selon la hauteur de ta correction */
  }

  .exo-popup-footer .correction-box {
    display: none;
    /* cacher la correction dans le footer en mobile */
  }
}

.video-popup-container {
  position: relative;
  padding-bottom: 0px !important;
  overflow: inherit !important;
}

.numberContainer {
  font-weight: 600;
  font-size: 12px;
  border: 1px solid rgba(138, 135, 135, 0.556);
  border-radius: 20px;
  padding: 0 10px;
  height: 25px;
  display: inline-flex;
  /* ✅ permet d'être en ligne */
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  /* ✅ empêche les retours à la ligne */
  width: fit-content;
  /* ✅ ajuste exactement à son contenu */
  min-width: 70px;
  /* ✅ minimum garanti */
}

.exoPopup {
  .progress-bar {
    background: #eee !important;
    margin: inherit !important;
    border-radius: 4px;
    max-width: inherit !important;
    margin-left: 0px !important;
    width: 100% !important;
    margin: auto;
    margin-top: 48px !important;
    margin-bottom: -30px !important;
  }
}

.qcm-home-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.progress-fill {
  background: #007bff;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.bandeauSurContainer {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bandeauReprendre {
  margin-top: auto;
}

.footerButton {
  margin-bottom: 30px;
}

.resultContainer {
  height: 100%;
}

.notationSystem {
  width: 100%;
}

.notationSystem p,
.notationSystem span {
  font-size: 14px;
}

.examButton.disabled {
  background-color: #b3b3b335;
  box-shadow: none;
}

.nextButton.leave {
  background-color: #ff4810f3 !important;
  background-color: #0077ff;
  padding: 8px 25px !important;
  height: 40px;
  color: white;
  font-size: 12px;
  font-weight: 700;
  border-radius: 13px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}


.exo-popup-container .paddingPart {
      margin: 0 15px !important;
    }
.step-body {
  height: 100%;
}

.leBlocComplet {
  height: 100%;
  padding-top: 5px;
  position: relative;
}

.bottomPopup {
  display: flex;
  flex-direction: column;
  flex: auto;
}

.coursetraining {
  .column.right {
    min-width: 350px;
  }

  .uploadContainerSeance {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;
  }

  .upload-on-seance {
    box-shadow: none;
    width: 95%;
    position: relative;
    overflow: hidden;
    height: 90%;
    margin: auto;
    margin-top: 10px;
  }

  .pdfreader {
    position: relative;
    overflow: hidden;
  }

  .pdf-controls {
    position: absolute;
    right: -70px;
    top: 0px;
  }

  .pdf-document-wrapper {
    position: relative;
    min-height: 50dvh;
    margin: auto;
    text-align: center;
    overflow: scroll;
    height: 100%;
  }

  .pdf-loader {
    margin-top: 200px;

    svg {
      width: 30px;
      height: 30px;
      margin-top: 0px !important;
    }
  }

  /* ---- VIDEO ---- */

  /* Le wrapper reste un bloc normal, sans centrage */
  .video-frame-wrapper {
    padding: 0px 10px;
    width: 100%;
    margin: 0; /* colle en haut si le parent a des paddings */
    background: white;
    border-radius: 12px;
    overflow: scroll;
    padding-bottom: 20px;
  }

  /* L'iframe prend 100% de la largeur et garde un ratio 16:9 */
  .video-frame-wrapper iframe {
    display: block; /* évite les espaces baseline */
    width: 100%;
    height: auto; /* géré par aspect-ratio */
    aspect-ratio: 16 / 9; /* hauteur calculée automatiquement */
    border: 0;
    vertical-align: top; /* colle en haut de ligne si inline-block */
  }

  .video-frame-wrapper {
    position: relative;
    width: 100%;
  }
  .video-frame-wrapper iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9; /* ou height: 100% si le parent a une hauteur */
    border: 0;
  }
  .video-loader,
  .video-error {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;

    svg {
      width: 30px;
      height: 30px;
      margin-top: 0px !important;
    }
  }

  .menu-toggle {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* par défaut 2 */
    gap: 0.5rem;
    width: 100%;
  }

  .menu-item {
    width: 100%; /* occupe toute sa colonne */
    padding: 0.5rem 1rem;
    border-radius: 12px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .menu-item:hover {
    background: #f9fafb;
  }

  .menu-item.active {
    background: #007bff;
    border-color: #007bff;
    color: #fff;
  }

  .addButonCourse {
    background-color: #007bff;
    width: 100%;
    border-radius: 15px;
  }

  .addButonCourse.added {
    background-color: #4b5563;
  }

  .buttonTop {
    margin-top: -20px;
    width: 100%;
  }
}


.sectionHeader.rightSideSeance {
  margin-bottom: 0px;
}/* Notification styles - Modern design with improved animations */
.notification-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(20, 33, 61, 0.7);
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000000 !important;
    backdrop-filter: blur(4px);
    animation: overlayFadeIn 0.3s ease-out;
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

.notification-overlay {
    .notification-container {
        position: relative;
        background-color: white;
        width: 800px;
        max-width: 90vw;
        border-radius: 20px;
        padding: 60px 50px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .notification-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: linear-gradient(90deg, #3563E9, #4F80FF);
        animation: gradientShift 3s ease infinite;
    }

    @keyframes gradientShift {
        0%, 100% {
            background: linear-gradient(90deg, #3563E9, #4F80FF);
        }
        50% {
            background: linear-gradient(90deg, #4F80FF, #3563E9);
        }
    }

    .closeNotifContainer {
        position: absolute;
        right: -20px;
        top: -30px;
        width: 30px;
        height: 30px;
        color: #666;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .closeNotifContainer:hover {
        color: #000;
        transform: rotate(90deg) scale(1.1);
    }

    .closeNotifContainer:active {
        transform: rotate(90deg) scale(0.95);
    }

    .notification-content {
        display: flex;
        position: relative;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .notification-icon {
        margin-bottom: 24px;
        color: #3563E9;
        animation: iconBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    @keyframes iconBounce {
        0% {
            opacity: 0;
            transform: scale(0) rotate(-180deg);
        }
        50% {
            transform: scale(1.1) rotate(10deg);
        }
        100% {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
    }

    .notification-title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 20px;
        line-height: 1.3;
        animation: textFadeIn 0.5s ease-out 0.1s both;
    }

    .notification-content h4 {
        animation: textFadeIn 0.5s ease-out 0.1s both;
    }

    @keyframes textFadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .notification-text {
        font-size: 18px;
        line-height: 1.5;
        color: #333;
        margin-bottom: 16px;
        max-width: 90%;
        margin-top: 10px;
        animation: textFadeIn 0.5s ease-out 0.2s both;
    }

    .notification-subtext {
        font-size: 16px;
        line-height: 1.5;
        color: #666;
        margin-bottom: 20px;
        max-width: 80%;
        animation: textFadeIn 0.5s ease-out 0.3s both;
    }

    .blueText {
        color: #3563E9;
        font-weight: 700;
    }

    .upgrade-button {
        background-color: #3563E9;
        color: white;
        border: none;
        border-radius: 30px;
        padding: 12px 36px;
        font-size: 18px;
        font-weight: 600;
        margin: 15px 0;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 12px rgba(53, 99, 233, 0.3);
        animation: buttonSlideIn 0.5s ease-out 0.4s both;
        position: relative;
        overflow: hidden;
    }

    @keyframes buttonSlideIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .upgrade-button::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .upgrade-button:hover::before {
        left: 100%;
    }

    .upgrade-button:hover {
        background-color: #2a50c7;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(53, 99, 233, 0.4);
    }

    .upgrade-button:active {
        transform: translateY(0px) scale(0.98);
        box-shadow: 0 3px 8px rgba(53, 99, 233, 0.3);
    }

    .button-highlight {
        font-weight: 700;
    }

    .pricing-info {
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        animation: textFadeIn 0.5s ease-out 0.5s both;
    }

    .price {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .subscription-note {
        font-size: 14px;
        color: #777;
        position: relative;
    }

    .iconNotif {
        font-size: 12px;
        left: -20px;
        margin-top: 1px;
        position: absolute;
    }

    /* Responsive adjustments */
    @media only screen and (max-width: 990px) {
        .notification-container {
            padding: 50px 30px;
        }

        .notification-title,
        .notification-content h4 {
            font-size: 24px;
        }

        .notification-text {
            font-size: 16px;
        }

        .upgrade-button {
            padding: 10px 28px;
            font-size: 16px;
        }

        .price {
            font-size: 20px;
        }
    }

    @media only screen and (max-width: 767px) {
        .notification-container {
            max-width: 95vw;
            padding: 45px 25px 40px;
        }

        .notification-icon {
            margin-bottom: 20px;
        }

        .notification-icon svg {
            width: 40px;
            height: 40px;
        }

        .notification-title,
        .notification-content h4 {
            font-size: 22px;
            margin-bottom: 15px;
        }

        .notification-text,
        .notification-subtext {
            max-width: 100%;
        }

        .upgrade-button {
            padding: 10px 26px;
        }

        .closeNotifContainer {
            right: -10px;
            top: -25px;
        }

        .description2 {
            display: none;
        }
    }

    @media only screen and (max-width: 480px) {
        .notification-container {
            padding: 40px 20px 35px;
        }

        .notification-title,
        .notification-content h4 {
            font-size: 20px;
        }

        .notification-text {
            font-size: 15px;
        }

        .notification-subtext {
            font-size: 14px;
        }

        .price {
            font-size: 18px;
        }
    }

    .error-title {
        color: #F87171;
    }
}

.notification-content:has(.error-title) .closeNotifContainer {
    color: #F87171;
}

.notification-content:has(.error-title) .closeNotifContainer:hover {
    color: #EF4444;
}

/* Accessibility improvements */
.notification-overlay:focus-within .notification-container {
    outline: 2px solid #3563E9;
    outline-offset: 4px;
}

/* Smooth exit animation */
.notification-overlay.closing {
    animation: overlayFadeOut 0.3s ease-out forwards;
}

.notification-overlay.closing .notification-container {
    animation: slideDown 0.3s ease-out forwards;
}

@keyframes overlayFadeOut {
    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

@keyframes slideDown {
    to {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }
}/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-pan-x: initial;
      --tw-pan-y: initial;
      --tw-pinch-zoom: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: #fecdd3;
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-800: oklch(44.4% .177 26.899);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-red-950: oklch(25.8% .092 26.042);
    --color-orange-50: oklch(98% .016 73.684);
    --color-orange-100: #fde9cb;
    --color-orange-200: #f69e0d;
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: #f99609;
    --color-orange-600: oklch(64.6% .222 41.116);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-orange-800: oklch(47% .157 37.304);
    --color-orange-900: oklch(40.8% .123 38.172);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-amber-900: oklch(41.4% .112 45.904);
    --color-yellow-50: oklch(98.7% .026 102.212);
    --color-yellow-100: oklch(97.3% .071 103.193);
    --color-yellow-200: #ffd68a;
    --color-yellow-300: oklch(90.5% .182 98.111);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-yellow-500: #ffec44;
    --color-yellow-600: oklch(68.1% .162 75.834);
    --color-yellow-700: oklch(55.4% .135 66.442);
    --color-yellow-800: oklch(47.6% .114 61.907);
    --color-yellow-900: oklch(42.1% .095 57.708);
    --color-green-50: oklch(98.2% .018 155.826);
    --color-green-100: #d9f5e0;
    --color-green-200: #00bb2c;
    --color-green-300: oklch(87.1% .15 154.449);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-green-500: #a8e8a8;
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-700: oklch(52.7% .154 150.069);
    --color-green-800: oklch(44.8% .119 151.328);
    --color-green-900: oklch(39.3% .095 152.535);
    --color-emerald-50: oklch(97.9% .021 166.113);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-emerald-900: oklch(37.8% .077 168.94);
    --color-sky-50: oklch(97.7% .013 236.62);
    --color-sky-500: oklch(68.5% .169 237.323);
    --color-sky-600: oklch(58.8% .158 241.966);
    --color-sky-700: oklch(50% .134 242.749);
    --color-sky-800: oklch(44.3% .11 240.79);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: #ebf3fd;
    --color-blue-200: #7cc2ff;
    --color-blue-300: #d7e9ff;
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-blue-800: oklch(42.4% .199 265.638);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-blue-950: oklch(28.2% .091 267.935);
    --color-indigo-50: oklch(96.2% .018 272.314);
    --color-indigo-100: oklch(93% .034 272.788);
    --color-indigo-200: #8962ff;
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-indigo-700: oklch(45.7% .24 277.023);
    --color-indigo-800: oklch(39.8% .195 277.366);
    --color-indigo-900: oklch(35.9% .144 278.697);
    --color-violet-50: oklch(96.9% .016 293.756);
    --color-violet-100: oklch(94.3% .029 294.588);
    --color-violet-400: oklch(70.2% .183 293.541);
    --color-violet-500: oklch(60.6% .25 292.717);
    --color-violet-600: oklch(54.1% .281 293.009);
    --color-violet-700: oklch(49.1% .27 292.581);
    --color-purple-50: oklch(97.7% .014 308.299);
    --color-purple-100: #ece6ff;
    --color-purple-200: #883ae1;
    --color-purple-300: oklch(82.7% .119 306.383);
    --color-purple-400: oklch(71.4% .203 305.504);
    --color-purple-500: #c1c1ff;
    --color-purple-600: oklch(55.8% .288 302.321);
    --color-purple-700: oklch(49.6% .265 301.924);
    --color-purple-800: oklch(43.8% .218 303.724);
    --color-purple-900: oklch(38.1% .176 304.987);
    --color-fuchsia-500: oklch(66.7% .295 322.15);
    --color-pink-100: oklch(94.8% .028 342.258);
    --color-pink-200: #07f;
    --color-pink-500: oklch(65.6% .241 354.308);
    --color-pink-600: oklch(59.2% .249 .584);
    --color-rose-200: #ff8484;
    --color-rose-400: oklch(71.2% .194 13.428);
    --color-rose-500: oklch(64.5% .246 16.439);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: #f2f4f5;
    --color-gray-200: #e6e6e6;
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-gray-900: oklch(21% .034 264.665);
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% .001 286.375);
    --color-zinc-200: oklch(92% .004 286.32);
    --color-zinc-300: oklch(87.1% .006 286.286);
    --color-zinc-400: oklch(70.5% .015 286.067);
    --color-zinc-500: oklch(55.2% .016 285.938);
    --color-zinc-600: oklch(44.2% .017 285.786);
    --color-zinc-700: oklch(37% .013 285.805);
    --color-zinc-800: oklch(27.4% .006 286.033);
    --color-zinc-900: oklch(21% .006 285.885);
    --color-zinc-950: oklch(14.1% .005 285.823);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --breakpoint-2xl: 96rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-8xl: 6rem;
    --text-8xl--line-height: 1;
    --text-9xl: 8rem;
    --text-9xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --radius-xs: .125rem;
    --radius-sm: calc(var(--radius)  - 4px);
    --radius-md: calc(var(--radius)  - 2px);
    --radius-lg: var(--radius);
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --drop-shadow-lg: 0 4px 4px #00000026;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --font-lato: var(--font-lato), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-cairo: var(--font-cairo), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --color-border: hsl(var(--border));
    --color-input: hsl(var(--input));
    --color-ring: hsl(var(--ring));
    --color-background: hsl(var(--background));
    --color-foreground: hsl(var(--foreground));
    --color-primary: hsl(var(--primary));
    --color-primary-foreground: hsl(var(--primary-foreground));
    --color-secondary: hsl(var(--secondary));
    --color-secondary-foreground: hsl(var(--secondary-foreground));
    --color-destructive: hsl(var(--destructive));
    --color-destructive-foreground: hsl(var(--destructive-foreground));
    --color-muted: hsl(var(--muted));
    --color-muted-foreground: hsl(var(--muted-foreground));
    --color-accent: hsl(var(--accent));
    --color-accent-foreground: hsl(var(--accent-foreground));
    --color-popover: hsl(var(--popover));
    --color-popover-foreground: hsl(var(--popover-foreground));
    --color-card: hsl(var(--card));
    --color-card-foreground: hsl(var(--card-foreground));
    --color-primary-blue: #07f;
    --color-primary-black: #191919;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

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

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

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

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

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

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

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

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

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

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

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

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

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

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

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

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  *, :after, :before, ::backdrop {
    border-color: var(--color-border, currentColor);
  }

  ::file-selector-button {
    border-color: var(--color-border, currentColor);
  }

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

  * {
    border-color: var(--color-border);
    outline-color: color-mix(in srgb, hsl(var(--ring)) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  html {
    color-scheme: light dark;
  }

  * {
    transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
  }

  .dark {
    color-scheme: dark;
  }
}

@layer components;

@layer utilities {
  .\@container\/card-header {
    container: card-header / inline-size;
  }

  .\@container\/content {
    container: content / inline-size;
  }

  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-4 {
    inset: calc(var(--spacing) * 4);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .inset-y-1 {
    inset-block: calc(var(--spacing) * 1);
  }

  .start-0 {
    inset-inline-start: calc(var(--spacing) * 0);
  }

  .end-0 {
    inset-inline-end: calc(var(--spacing) * 0);
  }

  .end-3 {
    inset-inline-end: calc(var(--spacing) * 3);
  }

  .-top-1 {
    top: calc(var(--spacing) * -1);
  }

  .-top-2 {
    top: calc(var(--spacing) * -2);
  }

  .-top-3 {
    top: calc(var(--spacing) * -3);
  }

  .-top-4 {
    top: calc(var(--spacing) * -4);
  }

  .-top-5 {
    top: calc(var(--spacing) * -5);
  }

  .-top-6 {
    top: calc(var(--spacing) * -6);
  }

  .-top-7 {
    top: calc(var(--spacing) * -7);
  }

  .-top-12 {
    top: calc(var(--spacing) * -12);
  }

  .-top-px {
    top: -1px;
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1 {
    top: calc(var(--spacing) * 1);
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-3\.5 {
    top: calc(var(--spacing) * 3.5);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-5 {
    top: calc(var(--spacing) * 5);
  }

  .top-7 {
    top: calc(var(--spacing) * 7);
  }

  .top-14 {
    top: calc(var(--spacing) * 14);
  }

  .top-\[5px\] {
    top: 5px;
  }

  .top-\[12px\] {
    top: 12px;
  }

  .top-\[13px\] {
    top: 13px;
  }

  .top-\[50\%\] {
    top: 50%;
  }

  .top-auto {
    top: auto;
  }

  .top-full {
    top: 100%;
  }

  .-right-1 {
    right: calc(var(--spacing) * -1);
  }

  .-right-2 {
    right: calc(var(--spacing) * -2);
  }

  .-right-3 {
    right: calc(var(--spacing) * -3);
  }

  .-right-3\.5 {
    right: calc(var(--spacing) * -3.5);
  }

  .-right-8 {
    right: calc(var(--spacing) * -8);
  }

  .-right-12 {
    right: calc(var(--spacing) * -12);
  }

  .-right-\[16px\] {
    right: -16px;
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-0\.5 {
    right: calc(var(--spacing) * .5);
  }

  .right-1 {
    right: calc(var(--spacing) * 1);
  }

  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-5 {
    right: calc(var(--spacing) * 5);
  }

  .right-6 {
    right: calc(var(--spacing) * 6);
  }

  .right-\[-1\.5px\] {
    right: -1.5px;
  }

  .right-\[-8rem\] {
    right: -8rem;
  }

  .right-\[-11px\] {
    right: -11px;
  }

  .right-\[-70px\] {
    right: -70px;
  }

  .right-\[9px\] {
    right: 9px;
  }

  .right-\[54px\] {
    right: 54px;
  }

  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }

  .-bottom-12 {
    bottom: calc(var(--spacing) * -12);
  }

  .-bottom-px {
    bottom: -1px;
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-0\.5 {
    bottom: calc(var(--spacing) * .5);
  }

  .bottom-1 {
    bottom: calc(var(--spacing) * 1);
  }

  .bottom-1\.5 {
    bottom: calc(var(--spacing) * 1.5);
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }

  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-40 {
    bottom: calc(var(--spacing) * 40);
  }

  .bottom-\[65px\] {
    bottom: 65px;
  }

  .-left-0\.5 {
    left: calc(var(--spacing) * -.5);
  }

  .-left-1 {
    left: calc(var(--spacing) * -1);
  }

  .-left-3 {
    left: calc(var(--spacing) * -3);
  }

  .-left-3\.5 {
    left: calc(var(--spacing) * -3.5);
  }

  .-left-4 {
    left: calc(var(--spacing) * -4);
  }

  .-left-6 {
    left: calc(var(--spacing) * -6);
  }

  .-left-10 {
    left: calc(var(--spacing) * -10);
  }

  .-left-12 {
    left: calc(var(--spacing) * -12);
  }

  .-left-\[9999px\] {
    left: -9999px;
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-0\.5 {
    left: calc(var(--spacing) * .5);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-2\.5 {
    left: calc(var(--spacing) * 2.5);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .left-9 {
    left: calc(var(--spacing) * 9);
  }

  .left-12 {
    left: calc(var(--spacing) * 12);
  }

  .left-\[-1\.5px\] {
    left: -1.5px;
  }

  .left-\[-10\.5px\] {
    left: -10.5px;
  }

  .left-\[10px\] {
    left: 10px;
  }

  .left-\[26px\] {
    left: 26px;
  }

  .left-\[50\%\] {
    left: 50%;
  }

  .left-\[66px\] {
    left: 66px;
  }

  .z-0 {
    z-index: 0;
  }

  .z-1 {
    z-index: 1;
  }

  .z-9 {
    z-index: 9;
  }

  .z-10 {
    z-index: 10;
  }

  .z-11 {
    z-index: 11;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-51 {
    z-index: 51;
  }

  .z-60 {
    z-index: 60;
  }

  .z-70 {
    z-index: 70;
  }

  .z-100 {
    z-index: 100;
  }

  .z-500 {
    z-index: 500;
  }

  .z-\[1\] {
    z-index: 1;
  }

  .z-\[11\] {
    z-index: 11;
  }

  .z-\[100\] {
    z-index: 100;
  }

  .z-\[200\] {
    z-index: 200;
  }

  .z-\[1000\] {
    z-index: 1000;
  }

  .z-\[9999\] {
    z-index: 9999;
  }

  .z-\[10000\] {
    z-index: 10000;
  }

  .z-\[2147483647\] {
    z-index: 2147483647;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .order-first {
    order: -9999;
  }

  .order-last {
    order: 9999;
  }

  .col-3 {
    grid-column: 3;
  }

  .col-6 {
    grid-column: 6;
  }

  .col-11 {
    grid-column: 11;
  }

  .col-12 {
    grid-column: 12;
  }

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .col-start-2 {
    grid-column-start: 2;
  }

  .row-span-2 {
    grid-row: span 2 / span 2;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .\!m-0 {
    margin: calc(var(--spacing) * 0) !important;
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .m-4 {
    margin: calc(var(--spacing) * 4);
  }

  .m-auto {
    margin: auto;
  }

  .container {
    margin-inline: auto;
    padding-inline: 1rem;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: none;
    }
  }

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

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .-mx-px {
    margin-inline: -1px;
  }

  .mx-0 {
    margin-inline: calc(var(--spacing) * 0);
  }

  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }

  .mx-1\.5 {
    margin-inline: calc(var(--spacing) * 1.5);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }

  .mx-3\.5 {
    margin-inline: calc(var(--spacing) * 3.5);
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-\[20px\] {
    margin-inline: 20px;
  }

  .mx-\[25px\] {
    margin-inline: 25px;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mx-px {
    margin-inline: 1px;
  }

  .my-0 {
    margin-block: calc(var(--spacing) * 0);
  }

  .my-0\.5 {
    margin-block: calc(var(--spacing) * .5);
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-1\.5 {
    margin-block: calc(var(--spacing) * 1.5);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }

  .my-\[5px\] {
    margin-block: 5px;
  }

  .my-\[20px\] {
    margin-block: 20px;
  }

  .my-auto {
    margin-block: auto;
  }

  .my-px {
    margin-block: 1px;
  }

  .ms-1 {
    margin-inline-start: calc(var(--spacing) * 1);
  }

  .ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
  }

  .ms-3 {
    margin-inline-start: calc(var(--spacing) * 3);
  }

  .ms-4 {
    margin-inline-start: calc(var(--spacing) * 4);
  }

  .ms-5 {
    margin-inline-start: calc(var(--spacing) * 5);
  }

  .ms-10 {
    margin-inline-start: calc(var(--spacing) * 10);
  }

  .ms-\[6px\] {
    margin-inline-start: 6px;
  }

  .ms-\[7px\] {
    margin-inline-start: 7px;
  }

  .ms-\[30px\] {
    margin-inline-start: 30px;
  }

  .ms-auto {
    margin-inline-start: auto;
  }

  .me-1 {
    margin-inline-end: calc(var(--spacing) * 1);
  }

  .me-2 {
    margin-inline-end: calc(var(--spacing) * 2);
  }

  .me-4 {
    margin-inline-end: calc(var(--spacing) * 4);
  }

  .prose {
    color: var(--tw-prose-body);
    max-width: 65ch;
  }

  .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .prose :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-lead);
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    font-size: 1.25em;
    line-height: 1.6;
  }

  .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-links);
    font-weight: 500;
    text-decoration: underline;
  }

  .prose :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-bold);
    font-weight: 600;
  }

  .prose :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
  }

  .prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
    list-style-type: decimal;
  }

  .prose :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: upper-alpha;
  }

  .prose :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: lower-alpha;
  }

  .prose :where(ol[type="A" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: upper-alpha;
  }

  .prose :where(ol[type="a" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: lower-alpha;
  }

  .prose :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: upper-roman;
  }

  .prose :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: lower-roman;
  }

  .prose :where(ol[type="I" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: upper-roman;
  }

  .prose :where(ol[type="i" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: lower-roman;
  }

  .prose :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: decimal;
  }

  .prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
    list-style-type: disc;
  }

  .prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
    color: var(--tw-prose-counters);
    font-weight: 400;
  }

  .prose :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
    color: var(--tw-prose-bullets);
  }

  .prose :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    margin-top: 1.25em;
    font-weight: 600;
  }

  .prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-color: var(--tw-prose-hr);
    border-top-width: 1px;
    margin-top: 3em;
    margin-bottom: 3em;
  }

  .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-quotes);
    border-inline-start-width: .25rem;
    border-inline-start-color: var(--tw-prose-quote-borders);
    quotes: "“""”""‘""’";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-inline-start: 1em;
    font-style: italic;
    font-weight: 500;
  }

  .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *)):before {
    content: open-quote;
  }

  .prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *)):after {
    content: close-quote;
  }

  .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    margin-top: 0;
    margin-bottom: .888889em;
    font-size: 2.25em;
    font-weight: 800;
    line-height: 1.11111;
  }

  .prose :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-weight: 900;
  }

  .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.33333;
  }

  .prose :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-weight: 800;
  }

  .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    margin-top: 1.6em;
    margin-bottom: .6em;
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.6;
  }

  .prose :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-weight: 700;
  }

  .prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    margin-top: 1.5em;
    margin-bottom: .5em;
    font-weight: 600;
    line-height: 1.5;
  }

  .prose :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-weight: 700;
  }

  .prose :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .prose :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
    display: block;
  }

  .prose :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .prose :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-kbd);
    box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
    padding-top: .1875em;
    padding-inline-end: .375em;
    padding-bottom: .1875em;
    border-radius: .3125rem;
    padding-inline-start: .375em;
    font-family: inherit;
    font-size: .875em;
    font-weight: 500;
  }

  .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-code);
    font-size: .875em;
    font-weight: 600;
  }

  .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):before, .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):after {
    content: "`";
  }

  .prose :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
  }

  .prose :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-size: .875em;
  }

  .prose :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-size: .9em;
  }

  .prose :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
  }

  .prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-pre-code);
    background-color: var(--tw-prose-pre-bg);
    padding-top: .857143em;
    padding-inline-end: 1.14286em;
    padding-bottom: .857143em;
    border-radius: .375rem;
    margin-top: 1.71429em;
    margin-bottom: 1.71429em;
    padding-inline-start: 1.14286em;
    font-size: .875em;
    font-weight: 400;
    line-height: 1.71429;
    overflow-x: auto;
  }

  .prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    background-color: #0000;
    border-width: 0;
    border-radius: 0;
    padding: 0;
  }

  .prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)):before, .prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)):after {
    content: none;
  }

  .prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    table-layout: auto;
    width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: .875em;
    line-height: 1.71429;
  }

  .prose :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-th-borders);
  }

  .prose :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    vertical-align: bottom;
    padding-inline-end: .571429em;
    padding-bottom: .571429em;
    padding-inline-start: .571429em;
    font-weight: 600;
  }

  .prose :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-td-borders);
  }

  .prose :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-bottom-width: 0;
  }

  .prose :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    vertical-align: baseline;
  }

  .prose :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-top-width: 1px;
    border-top-color: var(--tw-prose-th-borders);
  }

  .prose :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    vertical-align: top;
  }

  .prose :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    text-align: start;
  }

  .prose :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .prose :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-captions);
    margin-top: .857143em;
    font-size: .875em;
    line-height: 1.42857;
  }

  .prose {
    --tw-prose-body: oklch(37.3% .034 259.733);
    --tw-prose-headings: oklch(21% .034 264.665);
    --tw-prose-lead: oklch(44.6% .03 256.802);
    --tw-prose-links: oklch(21% .034 264.665);
    --tw-prose-bold: oklch(21% .034 264.665);
    --tw-prose-counters: oklch(55.1% .027 264.364);
    --tw-prose-bullets: oklch(87.2% .01 258.338);
    --tw-prose-hr: oklch(92.8% .006 264.531);
    --tw-prose-quotes: oklch(21% .034 264.665);
    --tw-prose-quote-borders: oklch(92.8% .006 264.531);
    --tw-prose-captions: oklch(55.1% .027 264.364);
    --tw-prose-kbd: oklch(21% .034 264.665);
    --tw-prose-kbd-shadows: oklab(21% -.00316127 -.0338527 / .1);
    --tw-prose-code: oklch(21% .034 264.665);
    --tw-prose-pre-code: oklch(92.8% .006 264.531);
    --tw-prose-pre-bg: oklch(27.8% .033 256.848);
    --tw-prose-th-borders: oklch(87.2% .01 258.338);
    --tw-prose-td-borders: oklch(92.8% .006 264.531);
    --tw-prose-invert-body: oklch(87.2% .01 258.338);
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: oklch(70.7% .022 261.325);
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: oklch(70.7% .022 261.325);
    --tw-prose-invert-bullets: oklch(44.6% .03 256.802);
    --tw-prose-invert-hr: oklch(37.3% .034 259.733);
    --tw-prose-invert-quotes: oklch(96.7% .003 264.542);
    --tw-prose-invert-quote-borders: oklch(37.3% .034 259.733);
    --tw-prose-invert-captions: oklch(70.7% .022 261.325);
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: #ffffff1a;
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: oklch(87.2% .01 258.338);
    --tw-prose-invert-pre-bg: #00000080;
    --tw-prose-invert-th-borders: oklch(44.6% .03 256.802);
    --tw-prose-invert-td-borders: oklch(37.3% .034 259.733);
    font-size: 1rem;
    line-height: 1.75;
  }

  .prose :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .5em;
    margin-bottom: .5em;
  }

  .prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-start: .375em;
  }

  .prose :where(.prose > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .75em;
    margin-bottom: .75em;
  }

  .prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
  }

  .prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 1.25em;
  }

  .prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
  }

  .prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 1.25em;
  }

  .prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .75em;
    margin-bottom: .75em;
  }

  .prose :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .prose :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .5em;
    padding-inline-start: 1.625em;
  }

  .prose :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
  }

  .prose :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-start: 0;
  }

  .prose :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-end: 0;
  }

  .prose :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-top: .571429em;
    padding-inline-end: .571429em;
    padding-bottom: .571429em;
    padding-inline-start: .571429em;
  }

  .prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-start: 0;
  }

  .prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-end: 0;
  }

  .prose :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .prose :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
  }

  .prose :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 0;
  }

  .prose-sm {
    font-size: .875rem;
    line-height: 1.71429;
  }

  .prose-sm :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.14286em;
    margin-bottom: 1.14286em;
  }

  .prose-sm :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .888889em;
    margin-bottom: .888889em;
    font-size: 1.28571em;
    line-height: 1.55556;
  }

  .prose-sm :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.33333em;
    margin-bottom: 1.33333em;
    padding-inline-start: 1.11111em;
  }

  .prose-sm :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: .8em;
    font-size: 2.14286em;
    line-height: 1.2;
  }

  .prose-sm :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.6em;
    margin-bottom: .8em;
    font-size: 1.42857em;
    line-height: 1.4;
  }

  .prose-sm :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.55556em;
    margin-bottom: .444444em;
    font-size: 1.28571em;
    line-height: 1.55556;
  }

  .prose-sm :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.42857em;
    margin-bottom: .571429em;
    line-height: 1.42857;
  }

  .prose-sm :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-sm :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.71429em;
    margin-bottom: 1.71429em;
  }

  .prose-sm :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .prose-sm :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.71429em;
    margin-bottom: 1.71429em;
  }

  .prose-sm :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-top: .142857em;
    padding-inline-end: .357143em;
    padding-bottom: .142857em;
    border-radius: .3125rem;
    padding-inline-start: .357143em;
    font-size: .857143em;
  }

  .prose-sm :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-size: .857143em;
  }

  .prose-sm :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-size: .9em;
  }

  .prose-sm :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-size: .888889em;
  }

  .prose-sm :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-top: .666667em;
    padding-inline-end: 1em;
    padding-bottom: .666667em;
    border-radius: .25rem;
    margin-top: 1.66667em;
    margin-bottom: 1.66667em;
    padding-inline-start: 1em;
    font-size: .857143em;
    line-height: 1.66667;
  }

  .prose-sm :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-sm :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.14286em;
    margin-bottom: 1.14286em;
    padding-inline-start: 1.57143em;
  }

  .prose-sm :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .285714em;
    margin-bottom: .285714em;
  }

  .prose-sm :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-sm :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-start: .428571em;
  }

  .prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .571429em;
    margin-bottom: .571429em;
  }

  .prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.14286em;
  }

  .prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 1.14286em;
  }

  .prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.14286em;
  }

  .prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 1.14286em;
  }

  .prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .571429em;
    margin-bottom: .571429em;
  }

  .prose-sm :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.14286em;
    margin-bottom: 1.14286em;
  }

  .prose-sm :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.14286em;
  }

  .prose-sm :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .285714em;
    padding-inline-start: 1.57143em;
  }

  .prose-sm :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2.85714em;
    margin-bottom: 2.85714em;
  }

  .prose-sm :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-sm :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-sm :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose-sm :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
  }

  .prose-sm :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-size: .857143em;
    line-height: 1.5;
  }

  .prose-sm :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-end: 1em;
    padding-bottom: .666667em;
    padding-inline-start: 1em;
  }

  .prose-sm :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-start: 0;
  }

  .prose-sm :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-end: 0;
  }

  .prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-top: .666667em;
    padding-inline-end: 1em;
    padding-bottom: .666667em;
    padding-inline-start: 1em;
  }

  .prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-start: 0;
  }

  .prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-end: 0;
  }

  .prose-sm :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.71429em;
    margin-bottom: 1.71429em;
  }

  .prose-sm :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .prose-sm :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .666667em;
    font-size: .857143em;
    line-height: 1.33333;
  }

  .prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
  }

  .prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 0;
  }

  .\!-mt-\[0px\] {
    margin-top: 0 !important;
  }

  .\!mt-0 {
    margin-top: calc(var(--spacing) * 0) !important;
  }

  .\!mt-2 {
    margin-top: calc(var(--spacing) * 2) !important;
  }

  .\!mt-3 {
    margin-top: calc(var(--spacing) * 3) !important;
  }

  .\!mt-10 {
    margin-top: calc(var(--spacing) * 10) !important;
  }

  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }

  .-mt-4 {
    margin-top: calc(var(--spacing) * -4);
  }

  .-mt-\[1px\] {
    margin-top: -1px;
  }

  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-13 {
    margin-top: calc(var(--spacing) * 13);
  }

  .mt-15 {
    margin-top: calc(var(--spacing) * 15);
  }

  .mt-\[-20px\] {
    margin-top: -20px;
  }

  .mt-\[0\.75em\] {
    margin-top: .75em;
  }

  .mt-\[0px\] {
    margin-top: 0;
  }

  .mt-\[1\.4em\] {
    margin-top: 1.4em;
  }

  .mt-\[1\.6em\] {
    margin-top: 1.6em;
  }

  .mt-\[1em\] {
    margin-top: 1em;
  }

  .mt-\[4px\] {
    margin-top: 4px;
  }

  .mt-\[5px\] {
    margin-top: 5px;
  }

  .mt-\[10px\] {
    margin-top: 10px;
  }

  .mt-\[30px\] {
    margin-top: 30px;
  }

  .mt-\[34px\] {
    margin-top: 34px;
  }

  .mt-\[35px\] {
    margin-top: 35px;
  }

  .mt-\[36px\] {
    margin-top: 36px;
  }

  .mt-\[40px\] {
    margin-top: 40px;
  }

  .mt-\[60px\] {
    margin-top: 60px;
  }

  .mt-\[100px\] {
    margin-top: 100px;
  }

  .mt-\[200px\] {
    margin-top: 200px;
  }

  .mt-auto {
    margin-top: auto;
  }

  .mt-px {
    margin-top: 1px;
  }

  .-mr-0\.5 {
    margin-right: calc(var(--spacing) * -.5);
  }

  .-mr-3 {
    margin-right: calc(var(--spacing) * -3);
  }

  .mr-0 {
    margin-right: calc(var(--spacing) * 0);
  }

  .mr-0\.5 {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-\[2px\] {
    margin-right: 2px;
  }

  .mr-\[10px\] {
    margin-right: 10px;
  }

  .mr-\[30px\] {
    margin-right: 30px;
  }

  .mr-auto {
    margin-right: auto;
  }

  .-mb-1 {
    margin-bottom: calc(var(--spacing) * -1);
  }

  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }

  .mb-\[-20px\] {
    margin-bottom: -20px;
  }

  .mb-\[4px\] {
    margin-bottom: 4px;
  }

  .mb-\[10px\] {
    margin-bottom: 10px;
  }

  .mb-\[18px\] {
    margin-bottom: 18px;
  }

  .mb-\[20px\] {
    margin-bottom: 20px;
  }

  .mb-\[24px\] {
    margin-bottom: 24px;
  }

  .mb-\[34px\] {
    margin-bottom: 34px;
  }

  .mb-\[40px\] {
    margin-bottom: 40px;
  }

  .mb-auto {
    margin-bottom: auto;
  }

  .-ml-0\.5 {
    margin-left: calc(var(--spacing) * -.5);
  }

  .-ml-1 {
    margin-left: calc(var(--spacing) * -1);
  }

  .-ml-2 {
    margin-left: calc(var(--spacing) * -2);
  }

  .-ml-3 {
    margin-left: calc(var(--spacing) * -3);
  }

  .-ml-4 {
    margin-left: calc(var(--spacing) * -4);
  }

  .-ml-15 {
    margin-left: calc(var(--spacing) * -15);
  }

  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-3\! {
    margin-left: calc(var(--spacing) * 3) !important;
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-\[10px\] {
    margin-left: 10px;
  }

  .ml-\[30px\] {
    margin-left: 30px;
  }

  .ml-auto {
    margin-left: auto;
  }

  .ml-px {
    margin-left: 1px;
  }

  .box-border {
    box-sizing: border-box;
  }

  .box-content {
    box-sizing: content-box;
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

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

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

  .\[display\:-webkit-box\] {
    display: -webkit-box;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .flex\! {
    display: flex !important;
  }

  .flow-root {
    display: flow-root;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .table-caption {
    display: table-caption;
  }

  .table-cell {
    display: table-cell;
  }

  .table-row {
    display: table-row;
  }

  .field-sizing-content {
    field-sizing: content;
  }

  .field-sizing-fixed {
    field-sizing: fixed;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .\!size-3 {
    width: calc(var(--spacing) * 3) !important;
    height: calc(var(--spacing) * 3) !important;
  }

  .\!size-3\.5 {
    width: calc(var(--spacing) * 3.5) !important;
    height: calc(var(--spacing) * 3.5) !important;
  }

  .size-\(--cell-size\) {
    width: var(--cell-size);
    height: var(--cell-size);
  }

  .size-0 {
    width: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 0);
  }

  .size-0\.5 {
    width: calc(var(--spacing) * .5);
    height: calc(var(--spacing) * .5);
  }

  .size-1 {
    width: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 1);
  }

  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }

  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }

  .size-24 {
    width: calc(var(--spacing) * 24);
    height: calc(var(--spacing) * 24);
  }

  .size-96 {
    width: calc(var(--spacing) * 96);
    height: calc(var(--spacing) * 96);
  }

  .size-\[28px\] {
    width: 28px;
    height: 28px;
  }

  .size-\[40px\] {
    width: 40px;
    height: 40px;
  }

  .size-\[130px\] {
    width: 130px;
    height: 130px;
  }

  .size-auto {
    width: auto;
    height: auto;
  }

  .size-fit {
    width: fit-content;
    height: fit-content;
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .\!h-5 {
    height: calc(var(--spacing) * 5) !important;
  }

  .h-\(--cell-size\) {
    height: var(--cell-size);
  }

  .h-0 {
    height: calc(var(--spacing) * 0);
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .5);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-4\.5 {
    height: calc(var(--spacing) * 4.5);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-\[0\.1px\] {
    height: .1px;
  }

  .h-\[1\.5em\] {
    height: 1.5em;
  }

  .h-\[1\.15rem\] {
    height: 1.15rem;
  }

  .h-\[1px\] {
    height: 1px;
  }

  .h-\[2px\] {
    height: 2px;
  }

  .h-\[8px\] {
    height: 8px;
  }

  .h-\[19px\] {
    height: 19px;
  }

  .h-\[20px\] {
    height: 20px;
  }

  .h-\[22px\] {
    height: 22px;
  }

  .h-\[23px\] {
    height: 23px;
  }

  .h-\[23rem\] {
    height: 23rem;
  }

  .h-\[24px\] {
    height: 24px;
  }

  .h-\[25px\] {
    height: 25px;
  }

  .h-\[28px\] {
    height: 28px;
  }

  .h-\[32px\] {
    height: 32px;
  }

  .h-\[40px\] {
    height: 40px;
  }

  .h-\[45px\] {
    height: 45px;
  }

  .h-\[48px\] {
    height: 48px;
  }

  .h-\[50px\] {
    height: 50px;
  }

  .h-\[57px\] {
    height: 57px;
  }

  .h-\[58px\] {
    height: 58px;
  }

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

  .h-\[80px\] {
    height: 80px;
  }

  .h-\[85px\] {
    height: 85px;
  }

  .h-\[100\%\] {
    height: 100%;
  }

  .h-\[100dvh\] {
    height: 100dvh;
  }

  .h-\[100px\] {
    height: 100px;
  }

  .h-\[120px\] {
    height: 120px;
  }

  .h-\[200px\] {
    height: 200px;
  }

  .h-\[257px\] {
    height: 257px;
  }

  .h-\[344px\] {
    height: 344px;
  }

  .h-\[650px\] {
    height: 650px;
  }

  .h-\[calc\(100\%-1px\)\] {
    height: calc(100% - 1px);
  }

  .h-\[calc\(100\%_\+_8px\)\] {
    height: calc(100% + 8px);
  }

  .h-\[calc\(100dvh-60px\)\] {
    height: calc(100dvh - 60px);
  }

  .h-\[var\(--radix-select-trigger-height\)\] {
    height: var(--radix-select-trigger-height);
  }

  .h-auto {
    height: auto;
  }

  .h-dvh {
    height: 100dvh;
  }

  .h-fit {
    height: fit-content;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

  .h-svh {
    height: 100svh;
  }

  .\!max-h-\[100\%\] {
    max-height: 100% !important;
  }

  .max-h-\(--radix-dropdown-menu-content-available-height\) {
    max-height: var(--radix-dropdown-menu-content-available-height);
  }

  .max-h-\(--radix-select-content-available-height\) {
    max-height: var(--radix-select-content-available-height);
  }

  .max-h-14 {
    max-height: calc(var(--spacing) * 14);
  }

  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }

  .max-h-44 {
    max-height: calc(var(--spacing) * 44);
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-\[--radix-context-menu-content-available-height\] {
    max-height: --radix-context-menu-content-available-height;
  }

  .max-h-\[--radix-select-content-available-height\] {
    max-height: --radix-select-content-available-height;
  }

  .max-h-\[6lh\] {
    max-height: 6lh;
  }

  .max-h-\[22rem\] {
    max-height: 22rem;
  }

  .max-h-\[50vh\] {
    max-height: 50vh;
  }

  .max-h-\[60vh\] {
    max-height: 60vh;
  }

  .max-h-\[80vh\] {
    max-height: 80vh;
  }

  .max-h-\[90vh\] {
    max-height: 90vh;
  }

  .max-h-\[95vh\] {
    max-height: 95vh;
  }

  .max-h-\[120px\] {
    max-height: 120px;
  }

  .max-h-\[300px\] {
    max-height: 300px;
  }

  .max-h-\[400px\] {
    max-height: 400px;
  }

  .max-h-\[500px\] {
    max-height: 500px;
  }

  .max-h-\[calc\(100vh-4rem\)\] {
    max-height: calc(100vh - 4rem);
  }

  .max-h-\[min\(50dvh\,calc\(-24px\+var\(--radix-popper-available-height\)\)\)\] {
    max-height: min(50dvh, calc(-24px + var(--radix-popper-available-height)));
  }

  .max-h-\[min\(70vh\,320px\)\] {
    max-height: min(70vh, 320px);
  }

  .max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
    max-height: var(--radix-dropdown-menu-content-available-height);
  }

  .max-h-full {
    max-height: 100%;
  }

  .max-h-screen {
    max-height: 100vh;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-4 {
    min-height: calc(var(--spacing) * 4);
  }

  .min-h-14 {
    min-height: calc(var(--spacing) * 14);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-96 {
    min-height: calc(var(--spacing) * 96);
  }

  .min-h-\[1lh\] {
    min-height: 1lh;
  }

  .min-h-\[8rem\] {
    min-height: 8rem;
  }

  .min-h-\[9rem\] {
    min-height: 9rem;
  }

  .min-h-\[24px\] {
    min-height: 24px;
  }

  .min-h-\[25px\] {
    min-height: 25px;
  }

  .min-h-\[42px\] {
    min-height: 42px;
  }

  .min-h-\[50\%\] {
    min-height: 50%;
  }

  .min-h-\[50dvh\] {
    min-height: 50dvh;
  }

  .min-h-\[68px\] {
    min-height: 68px;
  }

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

  .min-h-\[80px\] {
    min-height: 80px;
  }

  .min-h-\[90dvh\] {
    min-height: 90dvh;
  }

  .min-h-\[100dvh\] {
    min-height: 100dvh;
  }

  .min-h-\[100px\] {
    min-height: 100px;
  }

  .min-h-\[120px\] {
    min-height: 120px;
  }

  .min-h-\[144px\] {
    min-height: 144px;
  }

  .min-h-\[180px\] {
    min-height: 180px;
  }

  .min-h-\[200px\] {
    min-height: 200px;
  }

  .min-h-\[400px\] {
    min-height: 400px;
  }

  .min-h-\[calc\(100vh-4rem\)\] {
    min-height: calc(100vh - 4rem);
  }

  .min-h-\[calc\(100vh-48px-36px-16px-32px\)\] {
    min-height: calc(100vh - 132px);
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .min-h-svh {
    min-height: 100svh;
  }

  .\!w-5 {
    width: calc(var(--spacing) * 5) !important;
  }

  .w-\(--cell-size\) {
    width: var(--cell-size);
  }

  .w-\(--radix-dropdown-menu-trigger-width\) {
    width: var(--radix-dropdown-menu-trigger-width);
  }

  .w-\(--sidebar-width\) {
    width: var(--sidebar-width);
  }

  .w-0\.5 {
    width: calc(var(--spacing) * .5);
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-1\/3 {
    width: 33.3333%;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-2\/3 {
    width: 66.6667%;
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-4\.5 {
    width: calc(var(--spacing) * 4.5);
  }

  .w-4\/5 {
    width: 80%;
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-5\/6 {
    width: 83.3333%;
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-7\/12 {
    width: 58.3333%;
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-10\/12 {
    width: 83.3333%;
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-11\/12 {
    width: 91.6667%;
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-15 {
    width: calc(var(--spacing) * 15);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-52 {
    width: calc(var(--spacing) * 52);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-96 {
    width: calc(var(--spacing) * 96);
  }

  .w-100 {
    width: calc(var(--spacing) * 100);
  }

  .w-\[1px\] {
    width: 1px;
  }

  .w-\[2px\] {
    width: 2px;
  }

  .w-\[3\.25rem\] {
    width: 3.25rem;
  }

  .w-\[5px\] {
    width: 5px;
  }

  .w-\[6px\] {
    width: 6px;
  }

  .w-\[9px\] {
    width: 9px;
  }

  .w-\[14px\] {
    width: 14px;
  }

  .w-\[16px\] {
    width: 16px;
  }

  .w-\[23px\] {
    width: 23px;
  }

  .w-\[24px\] {
    width: 24px;
  }

  .w-\[28px\] {
    width: 28px;
  }

  .w-\[32px\] {
    width: 32px;
  }

  .w-\[40px\] {
    width: 40px;
  }

  .w-\[48px\] {
    width: 48px;
  }

  .w-\[50px\] {
    width: 50px;
  }

  .w-\[58px\] {
    width: 58px;
  }

  .w-\[70\%\] {
    width: 70%;
  }

  .w-\[80\%\] {
    width: 80%;
  }

  .w-\[80px\] {
    width: 80px;
  }

  .w-\[85\%\] {
    width: 85%;
  }

  .w-\[90\%\] {
    width: 90%;
  }

  .w-\[90px\] {
    width: 90px;
  }

  .w-\[95vw\] {
    width: 95vw;
  }

  .w-\[180px\] {
    width: 180px;
  }

  .w-\[200px\] {
    width: 200px;
  }

  .w-\[240px\] {
    width: 240px;
  }

  .w-\[290px\] {
    width: 290px;
  }

  .w-\[300px\] {
    width: 300px;
  }

  .w-\[307px\] {
    width: 307px;
  }

  .w-\[320px\] {
    width: 320px;
  }

  .w-\[330px\] {
    width: 330px;
  }

  .w-\[380px\] {
    width: 380px;
  }

  .w-\[400px\] {
    width: 400px;
  }

  .w-\[var\(--sidebar-width\)\] {
    width: var(--sidebar-width);
  }

  .w-auto {
    width: auto;
  }

  .w-dvw {
    width: 100dvw;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-max {
    width: max-content;
  }

  .w-px {
    width: 1px;
  }

  .w-screen {
    width: 100vw;
  }

  .w-sm {
    width: var(--container-sm);
  }

  .max-w-\(--breakpoint-toast-mobile\) {
    max-width: var(--breakpoint-toast-mobile);
  }

  .max-w-\(--skeleton-width\) {
    max-width: var(--skeleton-width);
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-52 {
    max-width: calc(var(--spacing) * 52);
  }

  .max-w-\[--skeleton-width\] {
    max-width: --skeleton-width;
  }

  .max-w-\[70vw\] {
    max-width: 70vw;
  }

  .max-w-\[72px\] {
    max-width: 72px;
  }

  .max-w-\[80vw\] {
    max-width: 80vw;
  }

  .max-w-\[90\%\] {
    max-width: 90%;
  }

  .max-w-\[90vw\] {
    max-width: 90vw;
  }

  .max-w-\[92\%\] {
    max-width: 92%;
  }

  .max-w-\[92vw\] {
    max-width: 92vw;
  }

  .max-w-\[95vw\] {
    max-width: 95vw;
  }

  .max-w-\[100px\] {
    max-width: 100px;
  }

  .max-w-\[100vw\] {
    max-width: 100vw;
  }

  .max-w-\[120px\] {
    max-width: 120px;
  }

  .max-w-\[140px\] {
    max-width: 140px;
  }

  .max-w-\[150px\] {
    max-width: 150px;
  }

  .max-w-\[170px\] {
    max-width: 170px;
  }

  .max-w-\[180px\] {
    max-width: 180px;
  }

  .max-w-\[190px\] {
    max-width: 190px;
  }

  .max-w-\[200px\] {
    max-width: 200px;
  }

  .max-w-\[248px\] {
    max-width: 248px;
  }

  .max-w-\[250px\] {
    max-width: 250px;
  }

  .max-w-\[517px\] {
    max-width: 517px;
  }

  .max-w-\[700px\] {
    max-width: 700px;
  }

  .max-w-\[800px\] {
    max-width: 800px;
  }

  .max-w-\[900px\] {
    max-width: 900px;
  }

  .max-w-\[1400px\] {
    max-width: 1400px;
  }

  .max-w-\[1500px\] {
    max-width: 1500px;
  }

  .max-w-\[calc\(100\%-2\.5rem\)\] {
    max-width: calc(100% - 2.5rem);
  }

  .max-w-\[calc\(100\%-2rem\)\] {
    max-width: calc(100% - 2rem);
  }

  .max-w-\[calc\(100vw-1\.5rem\)\] {
    max-width: calc(100vw - 1.5rem);
  }

  .max-w-\[calc\(100vw-24px\)\] {
    max-width: calc(100vw - 24px);
  }

  .max-w-\[var\(--skeleton-width\)\] {
    max-width: var(--skeleton-width);
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-full\! {
    max-width: 100% !important;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-none {
    max-width: none;
  }

  .max-w-prose {
    max-width: 65ch;
  }

  .max-w-screen-2xl {
    max-width: var(--breakpoint-2xl);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .min-w-\(--cell-size\) {
    min-width: var(--cell-size);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }

  .min-w-9 {
    min-width: calc(var(--spacing) * 9);
  }

  .min-w-10 {
    min-width: calc(var(--spacing) * 10);
  }

  .min-w-32 {
    min-width: calc(var(--spacing) * 32);
  }

  .min-w-56 {
    min-width: calc(var(--spacing) * 56);
  }

  .min-w-60 {
    min-width: calc(var(--spacing) * 60);
  }

  .min-w-\[3rem\] {
    min-width: 3rem;
  }

  .min-w-\[4ch\] {
    min-width: 4ch;
  }

  .min-w-\[8rem\] {
    min-width: 8rem;
  }

  .min-w-\[24px\] {
    min-width: 24px;
  }

  .min-w-\[50px\] {
    min-width: 50px;
  }

  .min-w-\[60px\] {
    min-width: 60px;
  }

  .min-w-\[70px\] {
    min-width: 70px;
  }

  .min-w-\[92px\] {
    min-width: 92px;
  }

  .min-w-\[100\%\] {
    min-width: 100%;
  }

  .min-w-\[100px\] {
    min-width: 100px;
  }

  .min-w-\[120px\] {
    min-width: 120px;
  }

  .min-w-\[125px\] {
    min-width: 125px;
  }

  .min-w-\[130px\] {
    min-width: 130px;
  }

  .min-w-\[160px\] {
    min-width: 160px;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[220px\] {
    min-width: 220px;
  }

  .min-w-\[230px\] {
    min-width: 230px;
  }

  .min-w-\[240px\] {
    min-width: 240px;
  }

  .min-w-\[260px\] {
    min-width: 260px;
  }

  .min-w-\[280px\] {
    min-width: 280px;
  }

  .min-w-\[300px\] {
    min-width: 300px;
  }

  .min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width);
  }

  .min-w-full {
    min-width: 100%;
  }

  .min-w-max {
    min-width: max-content;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-none {
    flex: none;
  }

  .flex-shrink-0, .shrink-0 {
    flex-shrink: 0;
  }

  .flex-grow, .grow {
    flex-grow: 1;
  }

  .grow-0 {
    flex-grow: 0;
  }

  .basis-full {
    flex-basis: 100%;
  }

  .table-fixed {
    table-layout: fixed;
  }

  .caption-bottom {
    caption-side: bottom;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .origin-\(--radix-dropdown-menu-content-transform-origin\) {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
  }

  .origin-\(--radix-hover-card-content-transform-origin\) {
    transform-origin: var(--radix-hover-card-content-transform-origin);
  }

  .origin-\(--radix-popover-content-transform-origin\) {
    transform-origin: var(--radix-popover-content-transform-origin);
  }

  .origin-\(--radix-select-content-transform-origin\) {
    transform-origin: var(--radix-select-content-transform-origin);
  }

  .origin-\(--radix-tooltip-content-transform-origin\) {
    transform-origin: var(--radix-tooltip-content-transform-origin);
  }

  .origin-\[--radix-context-menu-content-transform-origin\] {
    transform-origin: --radix-context-menu-content-transform-origin;
  }

  .origin-\[--radix-dropdown-menu-content-transform-origin\] {
    transform-origin: --radix-dropdown-menu-content-transform-origin;
  }

  .origin-\[--radix-hover-card-content-transform-origin\] {
    transform-origin: --radix-hover-card-content-transform-origin;
  }

  .origin-\[--radix-select-content-transform-origin\] {
    transform-origin: --radix-select-content-transform-origin;
  }

  .origin-\[--radix-tooltip-content-transform-origin\] {
    transform-origin: --radix-tooltip-content-transform-origin;
  }

  .origin-left {
    transform-origin: 0;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-2 {
    --tw-translate-x: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-96 {
    --tw-translate-x: calc(var(--spacing) * -96);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-px {
    --tw-translate-x: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[-50\%\] {
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-px {
    --tw-translate-x: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[calc\(-50\%_-_2px\)\] {
    --tw-translate-y: calc(-50% - 2px);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-106 {
    --tw-scale-x: 106%;
    --tw-scale-y: 106%;
    --tw-scale-z: 106%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-110 {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .-rotate-45 {
    rotate: -45deg;
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .rotate-0 {
    rotate: none;
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .rotate-\[230deg\] {
    rotate: 230deg;
  }

  .rotate-\[270deg\] {
    rotate: 270deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-\[contentSlideDownReverse_0\.6s_ease-in-out_forwards\] {
    animation: .6s ease-in-out forwards contentSlideDownReverse;
  }

  .animate-\[contentSlideUpReverse_0\.6s_ease-in-out_forwards\] {
    animation: .6s ease-in-out forwards contentSlideUpReverse;
  }

  .animate-\[fadeOut_0\.3s_ease-out_forwards\] {
    animation: .3s ease-out forwards fadeOut;
  }

  .animate-\[monthFadeIn_0\.6s_ease-out_forwards\] {
    animation: .6s ease-out forwards monthFadeIn;
  }

  .animate-bounce {
    animation: var(--animate-bounce);
  }

  .animate-caret-blink {
    animation: 1.25s ease-out infinite caret-blink;
  }

  .animate-in {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }

  .animate-ping {
    animation: var(--animate-ping);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-col-resize {
    cursor: col-resize;
  }

  .cursor-crosshair {
    cursor: crosshair;
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-grabbing {
    cursor: grabbing;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-ns-resize {
    cursor: ns-resize;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-row-resize {
    cursor: row-resize;
  }

  .cursor-text {
    cursor: text;
  }

  .touch-pan-y {
    --tw-pan-y: pan-y;
    touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
  }

  .touch-auto {
    touch-action: auto;
  }

  .touch-manipulation {
    touch-action: manipulation;
  }

  .touch-none {
    touch-action: none;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .scroll-my-1 {
    scroll-margin-block: calc(var(--spacing) * 1);
  }

  .scroll-py-1 {
    scroll-padding-block: calc(var(--spacing) * 1);
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-outside {
    list-style-position: outside;
  }

  .list-decimal {
    list-style-type: decimal;
  }

  .list-disc {
    list-style-type: disc;
  }

  .list-none {
    list-style-type: none;
  }

  .appearance-none {
    appearance: none;
  }

  .auto-rows-min {
    grid-auto-rows: min-content;
  }

  .\[grid-template-columns\:1\.3fr_1fr\] {
    grid-template-columns: 1.3fr 1fr;
  }

  .\[grid-template-columns\:1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .\[grid-template-columns\:1fr_minmax\(auto\,500px\)\] {
    grid-template-columns: 1fr minmax(auto, 500px);
  }

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

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

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

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

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

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

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

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

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

  .grid-cols-\[0_1fr\] {
    grid-template-columns: 0 1fr;
  }

  .grid-cols-\[repeat\(10\,1fr\)\] {
    grid-template-columns: repeat(10, 1fr);
  }

  .grid-rows-\[auto_auto\] {
    grid-template-rows: auto auto;
  }

  .\!flex-col {
    flex-direction: column !important;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-row-reverse {
    flex-direction: row-reverse;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-items-center {
    place-items: center;
  }

  .\!items-start {
    align-items: flex-start !important;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-evenly {
    justify-content: space-evenly;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-items-start {
    justify-items: start;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-\[6px\] {
    gap: 6px;
  }

  .gap-\[10px\] {
    gap: 10px;
  }

  .gap-\[12px\] {
    gap: 12px;
  }

  .gap-\[15px\] {
    gap: 15px;
  }

  .gap-\[16px\] {
    gap: 16px;
  }

  .gap-\[20px\] {
    gap: 20px;
  }

  .gap-\[30px\] {
    gap: 30px;
  }

  .gap-\[50px\] {
    gap: 50px;
  }

  .gap-px {
    gap: 1px;
  }

  :where(.space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-1 {
    column-gap: calc(var(--spacing) * 1);
  }

  :where(.-space-x-1 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.-space-x-px > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(-1px * var(--tw-space-x-reverse));
    margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-1 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-2 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-4 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }

  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * .5);
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-border > :not(:last-child)) {
    border-color: var(--color-border);
  }

  :where(.divide-gray-100 > :not(:last-child)) {
    border-color: var(--color-gray-100);
  }

  .self-center {
    align-self: center;
  }

  .self-end {
    align-self: flex-end;
  }

  .self-start {
    align-self: flex-start;
  }

  .self-stretch {
    align-self: stretch;
  }

  .justify-self-end {
    justify-self: flex-end;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-scroll {
    overflow: scroll;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-x-scroll {
    overflow-x: scroll;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overflow-y-scroll {
    overflow-y: scroll;
  }

  .overscroll-contain {
    overscroll-behavior: contain;
  }

  .scroll-smooth {
    scroll-behavior: smooth;
  }

  .\!rounded-2xl {
    border-radius: var(--radius-2xl) !important;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-\[2px\] {
    border-radius: 2px;
  }

  .rounded-\[4px\] {
    border-radius: 4px;
  }

  .rounded-\[6px\] {
    border-radius: 6px;
  }

  .rounded-\[8px\] {
    border-radius: 8px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-\[12px\] {
    border-radius: 12px;
  }

  .rounded-\[13px\] {
    border-radius: 13px;
  }

  .rounded-\[14px\] {
    border-radius: 14px;
  }

  .rounded-\[15px\] {
    border-radius: 15px;
  }

  .rounded-\[18px\] {
    border-radius: 18px;
  }

  .rounded-\[20px\] {
    border-radius: 20px;
  }

  .rounded-\[24px\] {
    border-radius: 24px;
  }

  .rounded-\[35px\] {
    border-radius: 35px;
  }

  .rounded-\[50\%\] {
    border-radius: 50%;
  }

  .rounded-\[100px\] {
    border-radius: 100px;
  }

  .rounded-\[calc\(var\(--radius\)-5px\)\] {
    border-radius: calc(var(--radius)  - 5px);
  }

  .rounded-\[inherit\] {
    border-radius: inherit;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: calc(var(--radius)  + 4px);
  }

  .rounded-xs {
    border-radius: var(--radius-xs);
  }

  .rounded-t-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }

  .rounded-t-\[35px\] {
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
  }

  .rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }

  .rounded-t-md {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
  }

  .rounded-l-lg {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }

  .rounded-l-md {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .rounded-l-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .rounded-r-md {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .rounded-r-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .rounded-tr-full {
    border-top-right-radius: 3.40282e38px;
  }

  .rounded-b-2xl {
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
  }

  .rounded-b-md {
    border-bottom-right-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .rounded-br-full {
    border-bottom-right-radius: 3.40282e38px;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-0\! {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-\[6px\] {
    border-style: var(--tw-border-style);
    border-width: 6px;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .border-t-0\! {
    border-top-style: var(--tw-border-style) !important;
    border-top-width: 0 !important;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-b-4 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 4px;
  }

  .border-b-\[3px\] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 3px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-0 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0;
  }

  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-none\! {
    --tw-border-style: none !important;
    border-style: none !important;
  }

  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }

  .border-\[\#E6EEFF\] {
    border-color: #e6eeff;
  }

  .border-\[\#ccc\] {
    border-color: #ccc;
  }

  .border-\[\#ddd\] {
    border-color: #ddd;
  }

  .border-\[\#e5e7eb\] {
    border-color: #e5e7eb;
  }

  .border-\[rgba\(138\,135\,135\,0\.556\)\] {
    border-color: #8a87878e;
  }

  .border-amber-400 {
    border-color: var(--color-amber-400);
  }

  .border-amber-500 {
    border-color: var(--color-amber-500);
  }

  .border-amber-500\/20 {
    border-color: #f99c0033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/20 {
      border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }

  .border-blue-100 {
    border-color: var(--color-blue-100);
  }

  .border-blue-200 {
    border-color: var(--color-blue-200);
  }

  .border-blue-400 {
    border-color: var(--color-blue-400);
  }

  .border-blue-500 {
    border-color: var(--color-blue-500);
  }

  .border-blue-600 {
    border-color: var(--color-blue-600);
  }

  .border-border {
    border-color: var(--color-border);
  }

  .border-border\/50 {
    border-color: color-mix(in srgb, hsl(var(--border)) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/50 {
      border-color: color-mix(in oklab, var(--color-border) 50%, transparent);
    }
  }

  .border-current {
    border-color: currentColor;
  }

  .border-gray-100 {
    border-color: var(--color-gray-100);
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .border-gray-400 {
    border-color: var(--color-gray-400);
  }

  .border-gray-800 {
    border-color: var(--color-gray-800);
  }

  .border-gray-900 {
    border-color: var(--color-gray-900);
  }

  .border-green-100 {
    border-color: var(--color-green-100);
  }

  .border-green-200 {
    border-color: var(--color-green-200);
  }

  .border-green-300 {
    border-color: var(--color-green-300);
  }

  .border-green-400 {
    border-color: var(--color-green-400);
  }

  .border-green-400\/50 {
    border-color: #05df7280;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-400\/50 {
      border-color: color-mix(in oklab, var(--color-green-400) 50%, transparent);
    }
  }

  .border-green-500 {
    border-color: var(--color-green-500);
  }

  .border-indigo-200 {
    border-color: var(--color-indigo-200);
  }

  .border-input {
    border-color: var(--color-input);
  }

  .border-muted {
    border-color: var(--color-muted);
  }

  .border-muted-foreground {
    border-color: var(--color-muted-foreground);
  }

  .border-muted-foreground\/20 {
    border-color: color-mix(in srgb, hsl(var(--muted-foreground)) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-muted-foreground\/20 {
      border-color: color-mix(in oklab, var(--color-muted-foreground) 20%, transparent);
    }
  }

  .border-muted-foreground\/30 {
    border-color: color-mix(in srgb, hsl(var(--muted-foreground)) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-muted-foreground\/30 {
      border-color: color-mix(in oklab, var(--color-muted-foreground) 30%, transparent);
    }
  }

  .border-muted-foreground\/50 {
    border-color: color-mix(in srgb, hsl(var(--muted-foreground)) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-muted-foreground\/50 {
      border-color: color-mix(in oklab, var(--color-muted-foreground) 50%, transparent);
    }
  }

  .border-orange-200 {
    border-color: var(--color-orange-200);
  }

  .border-orange-400 {
    border-color: var(--color-orange-400);
  }

  .border-orange-500 {
    border-color: var(--color-orange-500);
  }

  .border-pink-200 {
    border-color: var(--color-pink-200);
  }

  .border-primary {
    border-color: var(--color-primary);
  }

  .border-primary-blue {
    border-color: var(--color-primary-blue);
  }

  .border-primary-foreground\/10 {
    border-color: color-mix(in srgb, hsl(var(--primary-foreground)) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary-foreground\/10 {
      border-color: color-mix(in oklab, var(--color-primary-foreground) 10%, transparent);
    }
  }

  .border-primary-foreground\/20 {
    border-color: color-mix(in srgb, hsl(var(--primary-foreground)) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary-foreground\/20 {
      border-color: color-mix(in oklab, var(--color-primary-foreground) 20%, transparent);
    }
  }

  .border-primary\/10 {
    border-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/10 {
      border-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }

  .border-primary\/20 {
    border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/20 {
      border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }

  .border-primary\/50 {
    border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/50 {
      border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
    }
  }

  .border-purple-100 {
    border-color: var(--color-purple-100);
  }

  .border-purple-200 {
    border-color: var(--color-purple-200);
  }

  .border-purple-400 {
    border-color: var(--color-purple-400);
  }

  .border-purple-500 {
    border-color: var(--color-purple-500);
  }

  .border-purple-600 {
    border-color: var(--color-purple-600);
  }

  .border-red-100 {
    border-color: var(--color-red-100);
  }

  .border-red-200 {
    border-color: var(--color-red-200);
  }

  .border-red-400 {
    border-color: var(--color-red-400);
  }

  .border-red-500 {
    border-color: var(--color-red-500);
  }

  .border-sidebar-border {
    border-color: hsl(var(--sidebar-border));
  }

  .border-slate-200 {
    border-color: var(--color-slate-200);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-violet-500 {
    border-color: var(--color-violet-500);
  }

  .border-violet-500\/20 {
    border-color: #8d54ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-violet-500\/20 {
      border-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
    }
  }

  .border-violet-600 {
    border-color: var(--color-violet-600);
  }

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

  .border-white\/10 {
    border-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .border-white\/20 {
    border-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/20 {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .border-white\/30 {
    border-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/30 {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .border-white\/60 {
    border-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/60 {
      border-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .border-yellow-200 {
    border-color: var(--color-yellow-200);
  }

  .border-yellow-300 {
    border-color: var(--color-yellow-300);
  }

  .border-yellow-400 {
    border-color: var(--color-yellow-400);
  }

  .border-yellow-400\/50 {
    border-color: #fac80080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-yellow-400\/50 {
      border-color: color-mix(in oklab, var(--color-yellow-400) 50%, transparent);
    }
  }

  .border-yellow-500 {
    border-color: var(--color-yellow-500);
  }

  .border-zinc-100 {
    border-color: var(--color-zinc-100);
  }

  .border-zinc-200 {
    border-color: var(--color-zinc-200);
  }

  .border-zinc-300 {
    border-color: var(--color-zinc-300);
  }

  .border-t-transparent {
    border-top-color: #0000;
  }

  .border-b-border {
    border-bottom-color: var(--color-border);
  }

  .border-b-gray-300 {
    border-bottom-color: var(--color-gray-300);
  }

  .border-b-gray-500 {
    border-bottom-color: var(--color-gray-500);
  }

  .border-b-highlight, .border-b-highlight\/35 {
    border-bottom-color: var(--highlight);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-b-highlight\/35 {
      border-bottom-color: color-mix(in oklab, var(--highlight) 35%, transparent);
    }
  }

  .border-b-highlight\/\[\.7\] {
    border-bottom-color: var(--highlight);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-b-highlight\/\[\.7\] {
      border-bottom-color: color-mix(in oklab, var(--highlight) 70%, transparent);
    }
  }

  .border-b-highlight\/\[\.36\] {
    border-bottom-color: var(--highlight);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-b-highlight\/\[\.36\] {
      border-bottom-color: color-mix(in oklab, var(--highlight) 36%, transparent);
    }
  }

  .border-b-purple-100 {
    border-bottom-color: var(--color-purple-100);
  }

  .border-l-blue-500 {
    border-left-color: var(--color-blue-500);
  }

  .border-l-transparent {
    border-left-color: #0000;
  }

  .\!bg-blue-50\/70 {
    background-color: #eff6ffb3 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!bg-blue-50\/70 {
      background-color: color-mix(in oklab, var(--color-blue-50) 70%, transparent) !important;
    }
  }

  .\!bg-gray-100\/70 {
    background-color: #f2f4f5b3 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!bg-gray-100\/70 {
      background-color: color-mix(in oklab, var(--color-gray-100) 70%, transparent) !important;
    }
  }

  .\!bg-green-50\/70 {
    background-color: #f0fdf4b3 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!bg-green-50\/70 {
      background-color: color-mix(in oklab, var(--color-green-50) 70%, transparent) !important;
    }
  }

  .\!bg-muted {
    background-color: var(--color-muted) !important;
  }

  .\!bg-primary {
    background-color: var(--color-primary) !important;
  }

  .\!bg-purple-50\/70 {
    background-color: #faf5ffb3 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!bg-purple-50\/70 {
      background-color: color-mix(in oklab, var(--color-purple-50) 70%, transparent) !important;
    }
  }

  .\!bg-transparent {
    background-color: #0000 !important;
  }

  .\!bg-white {
    background-color: var(--color-white) !important;
  }

  .bg-\(--cellBackground\) {
    background-color: var(--cellBackground);
  }

  .bg-\[\#3F71EE\] {
    background-color: #3f71ee;
  }

  .bg-\[\#007bff\] {
    background-color: #007bff;
  }

  .bg-\[\#9affff\] {
    background-color: #9affff;
  }

  .bg-\[\#9bc8ff\] {
    background-color: #9bc8ff;
  }

  .bg-\[\#9bfb9b\] {
    background-color: #9bfb9b;
  }

  .bg-\[\#BA88F1\] {
    background-color: #ba88f1;
  }

  .bg-\[\#E7F0FF\] {
    background-color: #e7f0ff;
  }

  .bg-\[\#EBF3FD\] {
    background-color: #ebf3fd;
  }

  .bg-\[\#EFF4FF\] {
    background-color: #eff4ff;
  }

  .bg-\[\#F2F7FF\] {
    background-color: #f2f7ff;
  }

  .bg-\[\#FF8C00\] {
    background-color: #ff8c00;
  }

  .bg-\[\#b79eff\] {
    background-color: #b79eff;
  }

  .bg-\[\#bae4a3\] {
    background-color: #bae4a3;
  }

  .bg-\[\#d0e6ff\] {
    background-color: #d0e6ff;
  }

  .bg-\[\#d4b5ff\] {
    background-color: #d4b5ff;
  }

  .bg-\[\#d7e9ff\] {
    background-color: #d7e9ff;
  }

  .bg-\[\#eee\] {
    background-color: #eee;
  }

  .bg-\[\#f1f4f9\] {
    background-color: #f1f4f9;
  }

  .bg-\[\#f3f4f6\] {
    background-color: #f3f4f6;
  }

  .bg-\[\#f9f9f9\] {
    background-color: #f9f9f9;
  }

  .bg-\[\#fbfbfb\] {
    background-color: #fbfbfb;
  }

  .bg-\[\#fcc4a9\] {
    background-color: #fcc4a9;
  }

  .bg-\[\#ff9ce4\] {
    background-color: #ff9ce4;
  }

  .bg-\[\#ff939a\] {
    background-color: #ff939a;
  }

  .bg-\[\#ffb29d\] {
    background-color: #ffb29d;
  }

  .bg-\[\#ffec96\] {
    background-color: #ffec96;
  }

  .bg-\[rgb\(230\,230\,230\)\] {
    background-color: #e6e6e6;
  }

  .bg-\[rgba\(0\,0\,0\,0\.5\)\] {
    background-color: #00000080;
  }

  .bg-accent {
    background-color: var(--color-accent);
  }

  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-amber-200 {
    background-color: var(--color-amber-200);
  }

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

  .bg-amber-500\/5 {
    background-color: #f99c000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/5 {
      background-color: color-mix(in oklab, var(--color-amber-500) 5%, transparent);
    }
  }

  .bg-amber-500\/10 {
    background-color: #f99c001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/10 {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }

  .bg-amber-600 {
    background-color: var(--color-amber-600);
  }

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

  .bg-background\/80 {
    background-color: color-mix(in srgb, hsl(var(--background)) 80%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/80 {
      background-color: color-mix(in oklab, var(--color-background) 80%, transparent);
    }
  }

  .bg-background\/90 {
    background-color: color-mix(in srgb, hsl(var(--background)) 90%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/90 {
      background-color: color-mix(in oklab, var(--color-background) 90%, transparent);
    }
  }

  .bg-background\/95 {
    background-color: color-mix(in srgb, hsl(var(--background)) 95%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/95 {
      background-color: color-mix(in oklab, var(--color-background) 95%, transparent);
    }
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/10 {
    background-color: #0000001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/10 {
      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }

  .bg-black\/40 {
    background-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/40 {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-black\/80 {
    background-color: #000c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/80 {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }

  .bg-blue-200 {
    background-color: var(--color-blue-200);
  }

  .bg-blue-200\/20 {
    background-color: #7cc2ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-200\/20 {
      background-color: color-mix(in oklab, var(--color-blue-200) 20%, transparent);
    }
  }

  .bg-blue-300 {
    background-color: var(--color-blue-300);
  }

  .bg-blue-400 {
    background-color: var(--color-blue-400);
  }

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

  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }

  .bg-blue-800 {
    background-color: var(--color-blue-800);
  }

  .bg-border {
    background-color: var(--color-border);
  }

  .bg-card {
    background-color: var(--color-card);
  }

  .bg-current {
    background-color: currentColor;
  }

  .bg-destructive {
    background-color: var(--color-destructive);
  }

  .bg-destructive\/10 {
    background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/10 {
      background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
    }
  }

  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }

  .bg-emerald-200\/80 {
    background-color: #a4f4cfcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-200\/80 {
      background-color: color-mix(in oklab, var(--color-emerald-200) 80%, transparent);
    }
  }

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

  .bg-emerald-500\/10 {
    background-color: #00bb7f1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/10 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
  }

  .bg-foreground {
    background-color: var(--color-foreground);
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }

  .bg-gray-200\/30 {
    background-color: #e6e6e64d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-200\/30 {
      background-color: color-mix(in oklab, var(--color-gray-200) 30%, transparent);
    }
  }

  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }

  .bg-gray-300\/25 {
    background-color: #d1d5dc40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-300\/25 {
      background-color: color-mix(in oklab, var(--color-gray-300) 25%, transparent);
    }
  }

  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }

  .bg-gray-400\/25 {
    background-color: #99a1af40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-400\/25 {
      background-color: color-mix(in oklab, var(--color-gray-400) 25%, transparent);
    }
  }

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

  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }

  .bg-gray-700\/20 {
    background-color: #36415333;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-gray-700\/20 {
      background-color: color-mix(in oklab, var(--color-gray-700) 20%, transparent);
    }
  }

  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }

  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }

  .bg-green-50 {
    background-color: var(--color-green-50);
  }

  .bg-green-100 {
    background-color: var(--color-green-100);
  }

  .bg-green-300 {
    background-color: var(--color-green-300);
  }

  .bg-green-400 {
    background-color: var(--color-green-400);
  }

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

  .bg-green-600 {
    background-color: var(--color-green-600);
  }

  .bg-green-700 {
    background-color: var(--color-green-700);
  }

  .bg-highlight, .bg-highlight\/15 {
    background-color: var(--highlight);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-highlight\/15 {
      background-color: color-mix(in oklab, var(--highlight) 15%, transparent);
    }
  }

  .bg-highlight\/25 {
    background-color: var(--highlight);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-highlight\/25 {
      background-color: color-mix(in oklab, var(--highlight) 25%, transparent);
    }
  }

  .bg-highlight\/30 {
    background-color: var(--highlight);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-highlight\/30 {
      background-color: color-mix(in oklab, var(--highlight) 30%, transparent);
    }
  }

  .bg-highlight\/45 {
    background-color: var(--highlight);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-highlight\/45 {
      background-color: color-mix(in oklab, var(--highlight) 45%, transparent);
    }
  }

  .bg-highlight\/\[\.13\] {
    background-color: var(--highlight);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-highlight\/\[\.13\] {
      background-color: color-mix(in oklab, var(--highlight) 13%, transparent);
    }
  }

  .bg-indigo-100 {
    background-color: var(--color-indigo-100);
  }

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

  .bg-inherit {
    background-color: inherit;
  }

  .bg-input {
    background-color: var(--color-input);
  }

  .bg-muted {
    background-color: var(--color-muted);
  }

  .bg-muted-foreground\/10 {
    background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/10 {
      background-color: color-mix(in oklab, var(--color-muted-foreground) 10%, transparent);
    }
  }

  .bg-muted-foreground\/20 {
    background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/20 {
      background-color: color-mix(in oklab, var(--color-muted-foreground) 20%, transparent);
    }
  }

  .bg-muted-foreground\/25 {
    background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 25%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/25 {
      background-color: color-mix(in oklab, var(--color-muted-foreground) 25%, transparent);
    }
  }

  .bg-muted-foreground\/40 {
    background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 40%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/40 {
      background-color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
    }
  }

  .bg-muted\/30 {
    background-color: color-mix(in srgb, hsl(var(--muted)) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/30 {
      background-color: color-mix(in oklab, var(--color-muted) 30%, transparent);
    }
  }

  .bg-muted\/40 {
    background-color: color-mix(in srgb, hsl(var(--muted)) 40%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/40 {
      background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
    }
  }

  .bg-muted\/50 {
    background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/50 {
      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
    }
  }

  .bg-muted\/60 {
    background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/60 {
      background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
    }
  }

  .bg-muted\/80 {
    background-color: color-mix(in srgb, hsl(var(--muted)) 80%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/80 {
      background-color: color-mix(in oklab, var(--color-muted) 80%, transparent);
    }
  }

  .bg-orange-50 {
    background-color: var(--color-orange-50);
  }

  .bg-orange-100 {
    background-color: var(--color-orange-100);
  }

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

  .bg-orange-600 {
    background-color: var(--color-orange-600);
  }

  .bg-pink-100 {
    background-color: var(--color-pink-100);
  }

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

  .bg-popover {
    background-color: var(--color-popover);
  }

  .bg-popover\/90 {
    background-color: color-mix(in srgb, hsl(var(--popover)) 90%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-popover\/90 {
      background-color: color-mix(in oklab, var(--color-popover) 90%, transparent);
    }
  }

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

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

  .bg-primary-foreground\/10 {
    background-color: color-mix(in srgb, hsl(var(--primary-foreground)) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary-foreground\/10 {
      background-color: color-mix(in oklab, var(--color-primary-foreground) 10%, transparent);
    }
  }

  .bg-primary\/5 {
    background-color: color-mix(in srgb, hsl(var(--primary)) 5%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/5 {
      background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
    }
  }

  .bg-primary\/10 {
    background-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }

  .bg-primary\/20 {
    background-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/20 {
      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }

  .bg-primary\/40 {
    background-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/40 {
      background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
    }
  }

  .bg-purple-50 {
    background-color: var(--color-purple-50);
  }

  .bg-purple-100 {
    background-color: var(--color-purple-100);
  }

  .bg-purple-300 {
    background-color: var(--color-purple-300);
  }

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

  .bg-purple-600 {
    background-color: var(--color-purple-600);
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-100 {
    background-color: var(--color-red-100);
  }

  .bg-red-200\/80 {
    background-color: #fecdd3cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-200\/80 {
      background-color: color-mix(in oklab, var(--color-red-200) 80%, transparent);
    }
  }

  .bg-red-400 {
    background-color: var(--color-red-400);
  }

  .bg-red-400\/50 {
    background-color: #ff656880;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-400\/50 {
      background-color: color-mix(in oklab, var(--color-red-400) 50%, transparent);
    }
  }

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

  .bg-red-600 {
    background-color: var(--color-red-600);
  }

  .bg-red-700 {
    background-color: var(--color-red-700);
  }

  .bg-ring {
    background-color: var(--color-ring);
  }

  .bg-rose-400 {
    background-color: var(--color-rose-400);
  }

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

  .bg-secondary {
    background-color: var(--color-secondary);
  }

  .bg-sidebar {
    background-color: hsl(var(--sidebar-background));
  }

  .bg-sidebar-accent-foreground\/10 {
    background-color: hsl(var(--sidebar-accent-foreground));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-sidebar-accent-foreground\/10 {
      background-color: color-mix(in oklab, hsl(var(--sidebar-accent-foreground)) 10%, transparent);
    }
  }

  .bg-sidebar-accent\/30 {
    background-color: hsl(var(--sidebar-accent));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-sidebar-accent\/30 {
      background-color: color-mix(in oklab, hsl(var(--sidebar-accent)) 30%, transparent);
    }
  }

  .bg-sidebar-border {
    background-color: hsl(var(--sidebar-border));
  }

  .bg-sidebar-primary {
    background-color: hsl(var(--sidebar-primary));
  }

  .bg-sky-500\/70 {
    background-color: #00a5efb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-sky-500\/70 {
      background-color: color-mix(in oklab, var(--color-sky-500) 70%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-violet-50 {
    background-color: var(--color-violet-50);
  }

  .bg-violet-100 {
    background-color: var(--color-violet-100);
  }

  .bg-violet-400 {
    background-color: var(--color-violet-400);
  }

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

  .bg-violet-500\/10 {
    background-color: #8d54ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-violet-500\/10 {
      background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
    }
  }

  .bg-violet-600 {
    background-color: var(--color-violet-600);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/10 {
    background-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .bg-white\/20 {
    background-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/20 {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .bg-white\/70 {
    background-color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/70 {
      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .bg-white\/80 {
    background-color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/80 {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .bg-white\/85 {
    background-color: #ffffffd9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/85 {
      background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }

  .bg-white\/90 {
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/90 {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .bg-yellow-50 {
    background-color: var(--color-yellow-50);
  }

  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }

  .bg-yellow-200 {
    background-color: var(--color-yellow-200);
  }

  .bg-yellow-400 {
    background-color: var(--color-yellow-400);
  }

  .bg-yellow-400\/20 {
    background-color: #fac80033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-yellow-400\/20 {
      background-color: color-mix(in oklab, var(--color-yellow-400) 20%, transparent);
    }
  }

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

  .bg-yellow-600 {
    background-color: var(--color-yellow-600);
  }

  .bg-zinc-50 {
    background-color: var(--color-zinc-50);
  }

  .bg-zinc-50\/60 {
    background-color: #fafafa99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-zinc-50\/60 {
      background-color: color-mix(in oklab, var(--color-zinc-50) 60%, transparent);
    }
  }

  .bg-zinc-100 {
    background-color: var(--color-zinc-100);
  }

  .bg-zinc-900\/50 {
    background-color: #18181b80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-zinc-900\/50 {
      background-color: color-mix(in oklab, var(--color-zinc-900) 50%, transparent);
    }
  }

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-\[linear-gradient\(90deg\,\#FF0000\,\#FFFF00\,\#00FF00\,\#00FFFF\,\#0000FF\,\#FF00FF\,\#FF0000\)\] {
    background-image: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
  }

  .from-\[\#60a5fa\] {
    --tw-gradient-from: #60a5fa;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[\#62a7fa\] {
    --tw-gradient-from: #62a7fa;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-amber-500 {
    --tw-gradient-from: var(--color-amber-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-amber-500\/10 {
    --tw-gradient-from: #f99c001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-amber-500\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }

  .from-amber-500\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-amber-500\/20 {
    --tw-gradient-from: #f99c0033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-amber-500\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }

  .from-amber-500\/20 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-background {
    --tw-gradient-from: var(--color-background);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-black\/80 {
    --tw-gradient-from: #000c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-black\/80 {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }

  .from-black\/80 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-blue-400 {
    --tw-gradient-from: var(--color-blue-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-blue-500 {
    --tw-gradient-from: var(--color-blue-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-emerald-50 {
    --tw-gradient-from: var(--color-emerald-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-gray-50 {
    --tw-gradient-from: var(--color-gray-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-gray-200 {
    --tw-gradient-from: var(--color-gray-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-gray-300 {
    --tw-gradient-from: var(--color-gray-300);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-gray-700\/60 {
    --tw-gradient-from: #36415399;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-gray-700\/60 {
      --tw-gradient-from: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
    }
  }

  .from-gray-700\/60 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-green-50 {
    --tw-gradient-from: var(--color-green-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-green-400 {
    --tw-gradient-from: var(--color-green-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-orange-400 {
    --tw-gradient-from: var(--color-orange-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-orange-500 {
    --tw-gradient-from: var(--color-orange-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-primary-blue {
    --tw-gradient-from: var(--color-primary-blue);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-primary\/5 {
    --tw-gradient-from: color-mix(in srgb, hsl(var(--primary)) 5%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/5 {
      --tw-gradient-from: color-mix(in oklab, var(--color-primary) 5%, transparent);
    }
  }

  .from-primary\/5 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-primary\/10 {
    --tw-gradient-from: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }

  .from-primary\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-primary\/20 {
    --tw-gradient-from: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }

  .from-primary\/20 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-purple-50 {
    --tw-gradient-from: var(--color-purple-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-purple-400 {
    --tw-gradient-from: var(--color-purple-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-purple-500 {
    --tw-gradient-from: var(--color-purple-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-red-50 {
    --tw-gradient-from: var(--color-red-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-red-400 {
    --tw-gradient-from: var(--color-red-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-red-500 {
    --tw-gradient-from: var(--color-red-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-sky-50 {
    --tw-gradient-from: var(--color-sky-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-sky-500 {
    --tw-gradient-from: var(--color-sky-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-sky-600 {
    --tw-gradient-from: var(--color-sky-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-violet-400 {
    --tw-gradient-from: var(--color-violet-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-violet-500\/10 {
    --tw-gradient-from: #8d54ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-violet-500\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
    }
  }

  .from-violet-500\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-violet-600 {
    --tw-gradient-from: var(--color-violet-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-white {
    --tw-gradient-from: var(--color-white);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-yellow-50 {
    --tw-gradient-from: var(--color-yellow-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-yellow-300 {
    --tw-gradient-from: var(--color-yellow-300);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-yellow-400 {
    --tw-gradient-from: var(--color-yellow-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .via-background {
    --tw-gradient-via: var(--color-background);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-gray-300 {
    --tw-gradient-via: var(--color-gray-300);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-indigo-50 {
    --tw-gradient-via: var(--color-indigo-50);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-indigo-500 {
    --tw-gradient-via: var(--color-indigo-500);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-primary\/5 {
    --tw-gradient-via: color-mix(in srgb, hsl(var(--primary)) 5%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-primary\/5 {
      --tw-gradient-via: color-mix(in oklab, var(--color-primary) 5%, transparent);
    }
  }

  .via-primary\/5 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-purple-500\/5 {
    --tw-gradient-via: #c1c1ff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-purple-500\/5 {
      --tw-gradient-via: color-mix(in oklab, var(--color-purple-500) 5%, transparent);
    }
  }

  .via-purple-500\/5 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-transparent {
    --tw-gradient-via: transparent;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-white {
    --tw-gradient-via: var(--color-white);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-white\/30 {
    --tw-gradient-via: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-white\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .via-white\/30 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-yellow-500 {
    --tw-gradient-via: var(--color-yellow-500);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-yellow-500\/5 {
    --tw-gradient-via: #ffec440d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-yellow-500\/5 {
      --tw-gradient-via: color-mix(in oklab, var(--color-yellow-500) 5%, transparent);
    }
  }

  .via-yellow-500\/5 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .to-\[\#7cc2ff\] {
    --tw-gradient-to: #7cc2ff;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#62a7fa\]\/70 {
    --tw-gradient-to: oklab(71.8903% -.0385202 -.135283 / .7);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#62a7fa\]\/80 {
    --tw-gradient-to: oklab(71.8903% -.0385202 -.135283 / .8);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-amber-50 {
    --tw-gradient-to: var(--color-amber-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-amber-600\/10 {
    --tw-gradient-to: #dd74001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-amber-600\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--color-amber-600) 10%, transparent);
    }
  }

  .to-amber-600\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-black\/50 {
    --tw-gradient-to: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-black\/50 {
      --tw-gradient-to: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .to-black\/50 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-blue-50 {
    --tw-gradient-to: var(--color-blue-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-blue-50\/30 {
    --tw-gradient-to: #eff6ff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-blue-50\/30 {
      --tw-gradient-to: color-mix(in oklab, var(--color-blue-50) 30%, transparent);
    }
  }

  .to-blue-50\/30 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-blue-200 {
    --tw-gradient-to: var(--color-blue-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-blue-600 {
    --tw-gradient-to: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-fuchsia-500 {
    --tw-gradient-to: var(--color-fuchsia-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-gray-50 {
    --tw-gradient-to: var(--color-gray-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-gray-100 {
    --tw-gradient-to: var(--color-gray-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-gray-200 {
    --tw-gradient-to: var(--color-gray-200);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-gray-400 {
    --tw-gradient-to: var(--color-gray-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-gray-500 {
    --tw-gradient-to: var(--color-gray-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-gray-800\/60 {
    --tw-gradient-to: #1e293999;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-gray-800\/60 {
      --tw-gradient-to: color-mix(in oklab, var(--color-gray-800) 60%, transparent);
    }
  }

  .to-gray-800\/60 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-green-100 {
    --tw-gradient-to: var(--color-green-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-green-600 {
    --tw-gradient-to: var(--color-green-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-indigo-100 {
    --tw-gradient-to: var(--color-indigo-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-indigo-500 {
    --tw-gradient-to: var(--color-indigo-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-indigo-600 {
    --tw-gradient-to: var(--color-indigo-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-muted\/20 {
    --tw-gradient-to: color-mix(in srgb, hsl(var(--muted)) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-muted\/20 {
      --tw-gradient-to: color-mix(in oklab, var(--color-muted) 20%, transparent);
    }
  }

  .to-muted\/20 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-orange-500 {
    --tw-gradient-to: var(--color-orange-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-orange-600 {
    --tw-gradient-to: var(--color-orange-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-primary\/10 {
    --tw-gradient-to: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-primary\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }

  .to-primary\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-purple-50 {
    --tw-gradient-to: var(--color-purple-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-purple-50\/30 {
    --tw-gradient-to: #faf5ff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-purple-50\/30 {
      --tw-gradient-to: color-mix(in oklab, var(--color-purple-50) 30%, transparent);
    }
  }

  .to-purple-50\/30 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-purple-500 {
    --tw-gradient-to: var(--color-purple-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-purple-600 {
    --tw-gradient-to: var(--color-purple-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-red-500 {
    --tw-gradient-to: var(--color-red-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-red-600 {
    --tw-gradient-to: var(--color-red-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-violet-500 {
    --tw-gradient-to: var(--color-violet-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-white {
    --tw-gradient-to: var(--color-white);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-yellow-500 {
    --tw-gradient-to: var(--color-yellow-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-yellow-600 {
    --tw-gradient-to: var(--color-yellow-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-yellow-700 {
    --tw-gradient-to: var(--color-yellow-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .\[mask-image\:radial-gradient\(white\,transparent_85\%\)\] {
    -webkit-mask-image: radial-gradient(#fff, #0000 85%);
    mask-image: radial-gradient(#fff, #0000 85%);
  }

  .bg-\[length\:250\%_100\%\,auto\] {
    background-size: 250% 100%, auto;
  }

  .bg-cover {
    background-size: cover;
  }

  .bg-clip-content {
    background-clip: content-box;
  }

  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }

  .bg-center {
    background-position: center;
  }

  .\[background-repeat\:no-repeat\,padding-box\] {
    background-repeat: no-repeat, padding-box;
  }

  .fill-blue-600 {
    fill: var(--color-blue-600);
  }

  .fill-border {
    fill: var(--color-border);
  }

  .fill-current {
    fill: currentColor;
  }

  .fill-foreground {
    fill: var(--color-foreground);
  }

  .fill-primary {
    fill: var(--color-primary);
  }

  .stroke-ring {
    stroke: var(--color-ring);
  }

  .stroke-1 {
    stroke-width: 1px;
  }

  .stroke-\[2\.5\] {
    stroke-width: 2.5px;
  }

  .stroke-\[3\], .stroke-\[3px\] {
    stroke-width: 3px;
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-3\! {
    padding: calc(var(--spacing) * 3) !important;
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .p-12 {
    padding: calc(var(--spacing) * 12);
  }

  .p-16 {
    padding: calc(var(--spacing) * 16);
  }

  .p-\[1px\] {
    padding: 1px;
  }

  .p-\[2px\] {
    padding: 2px;
  }

  .p-\[3px\] {
    padding: 3px;
  }

  .p-\[6px\] {
    padding: 6px;
  }

  .p-\[10px\] {
    padding: 10px;
  }

  .p-\[10px_15px_0_15px\] {
    padding: 10px 15px 0;
  }

  .p-\[14px\] {
    padding: 14px;
  }

  .p-\[16px\] {
    padding: 16px;
  }

  .p-\[40px_20px\] {
    padding: 40px 20px;
  }

  .p-px {
    padding: 1px;
  }

  .\!px-1 {
    padding-inline: calc(var(--spacing) * 1) !important;
  }

  .\!px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5) !important;
  }

  .\!px-4 {
    padding-inline: calc(var(--spacing) * 4) !important;
  }

  .px-\(--cell-size\) {
    padding-inline: var(--cell-size);
  }

  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .px-0\.5 {
    padding-inline: calc(var(--spacing) * .5);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }

  .px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }

  .px-\[0\.3em\] {
    padding-inline: .3em;
  }

  .px-\[10px\] {
    padding-inline: 10px;
  }

  .px-\[14px\] {
    padding-inline: 14px;
  }

  .px-\[16px\] {
    padding-inline: 16px;
  }

  .px-\[20px\] {
    padding-inline: 20px;
  }

  .px-\[25px\] {
    padding-inline: 25px;
  }

  .px-\[30px\] {
    padding-inline: 30px;
  }

  .px-\[40px\] {
    padding-inline: 40px;
  }

  .px-px {
    padding-inline: 1px;
  }

  .\!py-3 {
    padding-block: calc(var(--spacing) * 3) !important;
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .py-\[0\.2em\] {
    padding-block: .2em;
  }

  .py-\[1\.5px\] {
    padding-block: 1.5px;
  }

  .py-\[3px\] {
    padding-block: 3px;
  }

  .py-\[5px\] {
    padding-block: 5px;
  }

  .py-\[6px\] {
    padding-block: 6px;
  }

  .py-\[8px\] {
    padding-block: 8px;
  }

  .py-\[10px\] {
    padding-block: 10px;
  }

  .py-\[12px\] {
    padding-block: 12px;
  }

  .py-\[16px\] {
    padding-block: 16px;
  }

  .py-\[30px\] {
    padding-block: 30px;
  }

  .ps-2 {
    padding-inline-start: calc(var(--spacing) * 2);
  }

  .ps-3 {
    padding-inline-start: calc(var(--spacing) * 3);
  }

  .ps-5 {
    padding-inline-start: calc(var(--spacing) * 5);
  }

  .pe-1 {
    padding-inline-end: calc(var(--spacing) * 1);
  }

  .pe-4 {
    padding-inline-end: calc(var(--spacing) * 4);
  }

  .\!pt-2 {
    padding-top: calc(var(--spacing) * 2) !important;
  }

  .\!pt-4 {
    padding-top: calc(var(--spacing) * 4) !important;
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-0\.5 {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }

  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }

  .pt-\[10px\] {
    padding-top: 10px;
  }

  .pt-\[27px\] {
    padding-top: 27px;
  }

  .pt-\[30px\] {
    padding-top: 30px;
  }

  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }

  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }

  .pr-16 {
    padding-right: calc(var(--spacing) * 16);
  }

  .pr-20 {
    padding-right: calc(var(--spacing) * 20);
  }

  .pr-\[21px\] {
    padding-right: 21px;
  }

  .pr-\[25px\] {
    padding-right: 25px;
  }

  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }

  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }

  .pb-30 {
    padding-bottom: calc(var(--spacing) * 30);
  }

  .pb-36 {
    padding-bottom: calc(var(--spacing) * 36);
  }

  .pb-40 {
    padding-bottom: calc(var(--spacing) * 40);
  }

  .pb-50 {
    padding-bottom: calc(var(--spacing) * 50);
  }

  .pb-72 {
    padding-bottom: calc(var(--spacing) * 72);
  }

  .pb-\[10px\] {
    padding-bottom: 10px;
  }

  .pb-\[14px\] {
    padding-bottom: 14px;
  }

  .pb-\[20px\] {
    padding-bottom: 20px;
  }

  .pb-\[30px\] {
    padding-bottom: 30px;
  }

  .pb-\[50px\] {
    padding-bottom: 50px;
  }

  .pb-\[51\.25\%\] {
    padding-bottom: 51.25%;
  }

  .pb-\[56\.25\%\] {
    padding-bottom: 56.25%;
  }

  .pb-\[56\.0417\%\] {
    padding-bottom: 56.0417%;
  }

  .pb-\[60px\] {
    padding-bottom: 60px;
  }

  .pb-\[75\%\] {
    padding-bottom: 75%;
  }

  .pb-\[130px\] {
    padding-bottom: 130px;
  }

  .pb-\[calc\(80dvh\)\] {
    padding-bottom: 80dvh;
  }

  .pb-\[env\(safe-area-inset-bottom\,8px\)\] {
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }

  .pb-px {
    padding-bottom: 1px;
  }

  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }

  .pl-0\.5 {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }

  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }

  .pl-14 {
    padding-left: calc(var(--spacing) * 14);
  }

  .pl-\[16px\] {
    padding-left: 16px;
  }

  .pl-\[26px\] {
    padding-left: 26px;
  }

  .pl-\[32px\] {
    padding-left: 32px;
  }

  .pl-\[40px\] {
    padding-left: 40px;
  }

  .pl-\[50px\] {
    padding-left: 50px;
  }

  .pl-\[62px\] {
    padding-left: 62px;
  }

  .text-center {
    text-align: center;
  }

  .text-justify {
    text-align: justify;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .text-start {
    text-align: start;
  }

  .align-baseline {
    vertical-align: baseline;
  }

  .align-middle {
    vertical-align: middle;
  }

  .align-text-bottom {
    vertical-align: text-bottom;
  }

  .font-\[inherit\] {
    font-family: inherit;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }

  .text-8xl {
    font-size: var(--text-8xl);
    line-height: var(--tw-leading, var(--text-8xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-base\! {
    font-size: var(--text-base) !important;
    line-height: var(--tw-leading, var(--text-base--line-height)) !important;
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[0\.6rem\] {
    font-size: .6rem;
  }

  .text-\[0\.8rem\] {
    font-size: .8rem;
  }

  .text-\[0\.55rem\] {
    font-size: .55rem;
  }

  .text-\[0\.85rem\] {
    font-size: .85rem;
  }

  .text-\[3rem\] {
    font-size: 3rem;
  }

  .text-\[8px\] {
    font-size: 8px;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[14px\] {
    font-size: 14px;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .text-\[16px\] {
    font-size: 16px;
  }

  .text-\[18px\] {
    font-size: 18px;
  }

  .text-\[20px\] {
    font-size: 20px;
  }

  .text-\[22px\] {
    font-size: 22px;
  }

  .text-\[25px\] {
    font-size: 25px;
  }

  .text-\[27px\] {
    font-size: 27px;
  }

  .text-\[28px\] {
    font-size: 28px;
  }

  .text-\[36px\] {
    font-size: 36px;
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-\[1\.5\] {
    --tw-leading: 1.5;
    line-height: 1.5;
  }

  .leading-\[normal\] {
    --tw-leading: normal;
    line-height: normal;
  }

  .leading-loose {
    --tw-leading: var(--leading-loose);
    line-height: var(--leading-loose);
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .\!font-bold {
    --tw-font-weight: var(--font-weight-bold) !important;
    font-weight: var(--font-weight-bold) !important;
  }

  .\!font-semibold {
    --tw-font-weight: var(--font-weight-semibold) !important;
    font-weight: var(--font-weight-semibold) !important;
  }

  .font-\[500\] {
    --tw-font-weight: 500;
    font-weight: 500;
  }

  .font-\[600\] {
    --tw-font-weight: 600;
    font-weight: 600;
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-nowrap {
    text-wrap: nowrap;
  }

  .text-wrap {
    text-wrap: wrap;
  }

  .break-words {
    overflow-wrap: break-word;
  }

  .wrap-anywhere {
    overflow-wrap: anywhere;
  }

  .break-all {
    word-break: break-all;
  }

  .text-ellipsis {
    text-overflow: ellipsis;
  }

  .whitespace-normal {
    white-space: normal;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-line {
    white-space: pre-line;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .\!text-primary-foreground {
    color: var(--color-primary-foreground) !important;
  }

  .text-\[\#62a7fa\] {
    color: #62a7fa;
  }

  .text-\[\#0077FF\] {
    color: #07f;
  }

  .text-\[\#111\] {
    color: #111;
  }

  .text-\[\#333\] {
    color: #333;
  }

  .text-\[\#555\] {
    color: #555;
  }

  .text-\[\#111827\] {
    color: #111827;
  }

  .text-\[\#BA88F1\] {
    color: #ba88f1;
  }

  .text-accent-foreground {
    color: var(--color-accent-foreground);
  }

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

  .text-amber-600 {
    color: var(--color-amber-600);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-background {
    color: var(--color-background);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-blue-100 {
    color: var(--color-blue-100);
  }

  .text-blue-200 {
    color: var(--color-blue-200);
  }

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

  .text-blue-600 {
    color: var(--color-blue-600);
  }

  .text-blue-700 {
    color: var(--color-blue-700);
  }

  .text-blue-800 {
    color: var(--color-blue-800);
  }

  .text-blue-900 {
    color: var(--color-blue-900);
  }

  .text-card-foreground {
    color: var(--color-card-foreground);
  }

  .text-current {
    color: currentColor;
  }

  .text-destructive {
    color: var(--color-destructive);
  }

  .text-destructive-foreground {
    color: var(--color-destructive-foreground);
  }

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

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-foreground {
    color: var(--color-foreground);
  }

  .text-gray-100 {
    color: var(--color-gray-100);
  }

  .text-gray-200 {
    color: var(--color-gray-200);
  }

  .text-gray-300 {
    color: var(--color-gray-300);
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

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

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-gray-700 {
    color: var(--color-gray-700);
  }

  .text-gray-800 {
    color: var(--color-gray-800);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .text-green-200 {
    color: var(--color-green-200);
  }

  .text-green-300 {
    color: var(--color-green-300);
  }

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

  .text-green-600 {
    color: var(--color-green-600);
  }

  .text-green-700 {
    color: var(--color-green-700);
  }

  .text-green-800 {
    color: var(--color-green-800);
  }

  .text-indigo-600 {
    color: var(--color-indigo-600);
  }

  .text-inherit {
    color: inherit;
  }

  .text-muted-foreground {
    color: var(--color-muted-foreground);
  }

  .text-muted-foreground\/40 {
    color: color-mix(in srgb, hsl(var(--muted-foreground)) 40%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/40 {
      color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
    }
  }

  .text-muted-foreground\/50 {
    color: color-mix(in srgb, hsl(var(--muted-foreground)) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/50 {
      color: color-mix(in oklab, var(--color-muted-foreground) 50%, transparent);
    }
  }

  .text-muted-foreground\/70 {
    color: color-mix(in srgb, hsl(var(--muted-foreground)) 70%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/70 {
      color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
    }
  }

  .text-muted-foreground\/80 {
    color: color-mix(in srgb, hsl(var(--muted-foreground)) 80%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/80 {
      color: color-mix(in oklab, var(--color-muted-foreground) 80%, transparent);
    }
  }

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

  .text-neutral-700 {
    color: var(--color-neutral-700);
  }

  .text-neutral-900 {
    color: var(--color-neutral-900);
  }

  .text-orange-100 {
    color: var(--color-orange-100);
  }

  .text-orange-400 {
    color: var(--color-orange-400);
  }

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

  .text-orange-600 {
    color: var(--color-orange-600);
  }

  .text-orange-700 {
    color: var(--color-orange-700);
  }

  .text-orange-800 {
    color: var(--color-orange-800);
  }

  .text-orange-900 {
    color: var(--color-orange-900);
  }

  .text-pink-600 {
    color: var(--color-pink-600);
  }

  .text-popover-foreground {
    color: var(--color-popover-foreground);
  }

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

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

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

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

  .text-primary-foreground\! {
    color: var(--color-primary-foreground) !important;
  }

  .text-primary-foreground\/70 {
    color: color-mix(in srgb, hsl(var(--primary-foreground)) 70%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary-foreground\/70 {
      color: color-mix(in oklab, var(--color-primary-foreground) 70%, transparent);
    }
  }

  .text-primary-foreground\/80 {
    color: color-mix(in srgb, hsl(var(--primary-foreground)) 80%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary-foreground\/80 {
      color: color-mix(in oklab, var(--color-primary-foreground) 80%, transparent);
    }
  }

  .text-purple-200 {
    color: var(--color-purple-200);
  }

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

  .text-purple-600 {
    color: var(--color-purple-600);
  }

  .text-purple-700 {
    color: var(--color-purple-700);
  }

  .text-purple-800 {
    color: var(--color-purple-800);
  }

  .text-red-100 {
    color: var(--color-red-100);
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

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

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-red-700 {
    color: var(--color-red-700);
  }

  .text-red-800 {
    color: var(--color-red-800);
  }

  .text-red-900 {
    color: var(--color-red-900);
  }

  .text-secondary-foreground {
    color: var(--color-secondary-foreground);
  }

  .text-sidebar-foreground, .text-sidebar-foreground\/50 {
    color: hsl(var(--sidebar-foreground));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-sidebar-foreground\/50 {
      color: color-mix(in oklab, hsl(var(--sidebar-foreground)) 50%, transparent);
    }
  }

  .text-sidebar-foreground\/70 {
    color: hsl(var(--sidebar-foreground));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-sidebar-foreground\/70 {
      color: color-mix(in oklab, hsl(var(--sidebar-foreground)) 70%, transparent);
    }
  }

  .text-sidebar-primary-foreground {
    color: hsl(var(--sidebar-primary-foreground));
  }

  .text-sky-600 {
    color: var(--color-sky-600);
  }

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

  .text-slate-600 {
    color: var(--color-slate-600);
  }

  .text-slate-700 {
    color: var(--color-slate-700);
  }

  .text-subtle-foreground {
    color: hsl(var(--subtle-foreground));
  }

  .text-transparent {
    color: #0000;
  }

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

  .text-violet-600 {
    color: var(--color-violet-600);
  }

  .text-violet-700 {
    color: var(--color-violet-700);
  }

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

  .text-white\/30 {
    color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/30 {
      color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .text-white\/55 {
    color: #ffffff8c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/55 {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }

  .text-white\/70 {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-white\/85 {
    color: #ffffffd9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/85 {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }

  .text-white\/90 {
    color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/90 {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .text-yellow-100 {
    color: var(--color-yellow-100);
  }

  .text-yellow-300 {
    color: var(--color-yellow-300);
  }

  .text-yellow-400 {
    color: var(--color-yellow-400);
  }

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

  .text-yellow-600 {
    color: var(--color-yellow-600);
  }

  .text-yellow-700 {
    color: var(--color-yellow-700);
  }

  .text-yellow-800 {
    color: var(--color-yellow-800);
  }

  .text-yellow-900 {
    color: var(--color-yellow-900);
  }

  .text-zinc-400 {
    color: var(--color-zinc-400);
  }

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

  .text-zinc-600 {
    color: var(--color-zinc-600);
  }

  .text-zinc-800 {
    color: var(--color-zinc-800);
  }

  .text-zinc-900 {
    color: var(--color-zinc-900);
  }

  .text-zinc-950 {
    color: var(--color-zinc-950);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .no-underline {
    text-decoration-line: none;
  }

  .underline {
    text-decoration-line: underline;
  }

  .decoration-primary {
    -webkit-text-decoration-color: var(--color-primary);
    -webkit-text-decoration-color: var(--color-primary);
    text-decoration-color: var(--color-primary);
  }

  .decoration-\[0\.5px\] {
    text-decoration-thickness: .5px;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .placeholder-gray-400::placeholder {
    color: var(--color-gray-400);
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-10 {
    opacity: .1;
  }

  .opacity-20 {
    opacity: .2;
  }

  .opacity-30 {
    opacity: .3;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_-2px_10px_rgba\(0\,0\,0\,0\.05\)\] {
    --tw-shadow: 0 -2px 10px var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0px_10px_rgba\(0\,0\,0\,0\.15\)\] {
    --tw-shadow: 0 0px 10px var(--tw-shadow-color, #00000026);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_2px_8px_rgba\(0\,0\,0\,0\.12\)\] {
    --tw-shadow: 0 2px 8px var(--tw-shadow-color, #0000001f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_5px_10px_rgba\(0\,0\,0\,0\.2\)\] {
    --tw-shadow: 0 5px 10px var(--tw-shadow-color, #0003);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0px_2px_10px_theme\(colors\.gray\.300\)\] {
    --tw-shadow: 0px 2px 10px var(--tw-shadow-color, oklch(87.2% .01 258.338));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[1px_1px_9px_1px_\#ecf0f3\] {
    --tw-shadow: 1px 1px 9px 1px var(--tw-shadow-color, #ecf0f3);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[1px_1px_32px_0px_\#ecf0f3\] {
    --tw-shadow: 1px 1px 32px 0px var(--tw-shadow-color, #ecf0f3);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[1px_1px_48\.3px_4px_\#ecf0f3\] {
    --tw-shadow: 1px 1px 48.3px 4px var(--tw-shadow-color, #ecf0f3);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none\! {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[\#62a7fa\]\/30 {
    --tw-shadow-color: #62a7fa4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-\[\#62a7fa\]\/30 {
      --tw-shadow-color: color-mix(in oklab, oklab(71.8903% -.0385202 -.135283 / .3) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-\[rgba\(255\,_255\,_255\,_0\.1\)_0px_0\.5px_0px_0px_inset\,_rgb\(248\,_249\,_250\)_0px_1px_5px_0px_inset\,_rgb\(193\,_200\,_205\)_0px_0px_0px_0\.5px\,_rgb\(193\,_200\,_205\)_0px_2px_1px_-1px\,_rgb\(193\,_200\,_205\)_0px_1px_0px_0px\] {
    --tw-shadow-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-\[rgba\(255\,_255\,_255\,_0\.1\)_0px_0\.5px_0px_0px_inset\,_rgb\(248\,_249\,_250\)_0px_1px_5px_0px_inset\,_rgb\(193\,_200\,_205\)_0px_0px_0px_0\.5px\,_rgb\(193\,_200\,_205\)_0px_2px_1px_-1px\,_rgb\(193\,_200\,_205\)_0px_1px_0px_0px\] {
      --tw-shadow-color: color-mix(in oklab, #ffffff1a 0px .5px 0px 0px inset, #f8f9fa 0px 1px 5px 0px inset, #c1c8cd 0px 0px 0px .5px, #c1c8cd 0px 2px 1px -1px, #c1c8cd 0px 1px 0px 0px var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-blue-500\/50 {
    --tw-shadow-color: #3080ff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-blue-500\/50 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-green-500\/50 {
    --tw-shadow-color: #a8e8a880;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-green-500\/50 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-indigo-200\/60 {
    --tw-shadow-color: #8962ff99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-indigo-200\/60 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-200) 60%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-orange-500\/50 {
    --tw-shadow-color: #f9960980;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-orange-500\/50 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-purple-200\/50 {
    --tw-shadow-color: #883ae180;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-purple-200\/50 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-200) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-purple-500\/50 {
    --tw-shadow-color: #c1c1ff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-purple-500\/50 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-red-500\/50 {
    --tw-shadow-color: #fb2c3680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-red-500\/50 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-violet-400\/50 {
    --tw-shadow-color: #a685ff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-violet-400\/50 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-violet-400) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-violet-500\/10 {
    --tw-shadow-color: #8d54ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-violet-500\/10 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-violet-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-yellow-400\/50 {
    --tw-shadow-color: #fac80080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-yellow-400\/50 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yellow-400) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-yellow-500\/50 {
    --tw-shadow-color: #ffec4480;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-yellow-500\/50 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yellow-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-blue-400 {
    --tw-ring-color: var(--color-blue-400);
  }

  .ring-border {
    --tw-ring-color: var(--color-border);
  }

  .ring-emerald-200 {
    --tw-ring-color: var(--color-emerald-200);
  }

  .ring-emerald-500\/20 {
    --tw-ring-color: #00bb7f33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-emerald-500\/20 {
      --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }

  .ring-gray-900 {
    --tw-ring-color: var(--color-gray-900);
  }

  .ring-indigo-200 {
    --tw-ring-color: var(--color-indigo-200);
  }

  .ring-primary {
    --tw-ring-color: var(--color-primary);
  }

  .ring-ring {
    --tw-ring-color: var(--color-ring);
  }

  .ring-rose-200 {
    --tw-ring-color: var(--color-rose-200);
  }

  .ring-sidebar-ring {
    --tw-ring-color: hsl(var(--sidebar-ring));
  }

  .ring-transparent {
    --tw-ring-color: transparent;
  }

  .ring-white {
    --tw-ring-color: var(--color-white);
  }

  .ring-yellow-400 {
    --tw-ring-color: var(--color-yellow-400);
  }

  .ring-offset-1 {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .ring-offset-2 {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .ring-offset-background {
    --tw-ring-offset-color: var(--color-background);
  }

  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .outline-hidden {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .outline-0 {
    outline-style: var(--tw-outline-style);
    outline-width: 0;
  }

  .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, );
  }

  .blur-lg {
    --tw-blur: blur(var(--blur-lg));
    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, );
  }

  .blur-md {
    --tw-blur: blur(var(--blur-md));
    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, );
  }

  .blur-xl {
    --tw-blur: blur(var(--blur-xl));
    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, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    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, );
  }

  .drop-shadow-lg {
    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, #00000026));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
    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, ) !important;
  }

  .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 {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[1px\] {
    --tw-backdrop-blur: blur(1px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-xs {
    --tw-backdrop-blur: blur(var(--blur-xs));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -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, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,box-shadow\] {
    transition-property: color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[inset-inline\,width\] {
    transition-property: inset-inline, width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[left\,right\,width\] {
    transition-property: left, right, width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[margin\,opacity\] {
    transition-property: margin, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[transform\,opacity\,display\] {
    transition-property: transform, opacity, display;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\,height\,padding\] {
    transition-property: width, height, padding;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-none {
    transition-property: none;
  }

  .duration-75 {
    --tw-duration: 75ms;
    transition-duration: 75ms;
  }

  .duration-100 {
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-600 {
    --tw-duration: .6s;
    transition-duration: .6s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .duration-1000 {
    --tw-duration: 1s;
    transition-duration: 1s;
  }

  .duration-\[0\.28s\] {
    --tw-duration: .28s;
    transition-duration: .28s;
  }

  .ease-\[cubic-bezier\(\.4\,0\,\.2\,1\)\] {
    --tw-ease: cubic-bezier(.4, 0, .2, 1);
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-linear {
    --tw-ease: linear;
    transition-timing-function: linear;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .will-change-scroll {
    will-change: scroll-position;
  }

  .will-change-transform {
    will-change: transform;
  }

  .\[contain\:content\] {
    contain: content;
  }

  .animate-in {
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial;
    animation-name: enter;
    animation-duration: .15s;
  }

  .fade-in-0 {
    --tw-enter-opacity: 0;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

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

  .select-text {
    -webkit-user-select: text;
    user-select: text;
  }

  .\[--bg\:linear-gradient\(90deg\,\#0000_calc\(50\%-var\(--spread\)\)\,var\(--color-background\)\,\#0000_calc\(50\%\+var\(--spread\)\)\)\] {
    --bg: linear-gradient(90deg, #0000 calc(50% - var(--spread)), var(--color-background), #0000 calc(50% + var(--spread)));
  }

  .\[--cell-size\:--spacing\(8\)\] {
    --cell-size: calc(var(--spacing) * 8);
  }

  .\[-ms-overflow-style\:none\] {
    -ms-overflow-style: none;
  }

  .\[-webkit-box-orient\:vertical\] {
    -webkit-box-orient: vertical;
  }

  .\[-webkit-line-clamp\:2\] {
    -webkit-line-clamp: 2;
  }

  .\[front\:onAny\] {
    front: onAny;
  }

  .\[scrollbar-width\:none\] {
    scrollbar-width: none;
  }

  .\[tab-size\:2\] {
    tab-size: 2;
  }

  .duration-75 {
    animation-duration: 75ms;
  }

  .duration-100 {
    animation-duration: .1s;
  }

  .duration-150 {
    animation-duration: .15s;
  }

  .duration-200 {
    animation-duration: .2s;
  }

  .duration-300 {
    animation-duration: .3s;
  }

  .duration-500 {
    animation-duration: .5s;
  }

  .duration-600 {
    animation-duration: .6s;
  }

  .duration-700 {
    animation-duration: .7s;
  }

  .duration-1000 {
    animation-duration: 1s;
  }

  .duration-\[0\.28s\] {
    animation-duration: .28s;
  }

  .ease-\[cubic-bezier\(\.4\,0\,\.2\,1\)\], .ease-in-out {
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }

  .ease-linear {
    animation-timing-function: linear;
  }

  .ease-out {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
  }

  .fade-in, .fade-in-0 {
    --tw-enter-opacity: 0;
  }

  .paused {
    animation-play-state: paused;
  }

  .ring-inset {
    --tw-ring-inset: inset;
  }

  .running {
    animation-play-state: running;
  }

  .slide-in-from-bottom-2 {
    --tw-enter-translate-y: calc(2 * var(--spacing));
  }

  .slide-in-from-top-2 {
    --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
  }

  .zoom-in-95 {
    --tw-enter-scale: .95;
  }

  :is(.\*\:m-0 > *) {
    margin: calc(var(--spacing) * 0);
  }

  .group-first\/column\:-left-1:is(:where(.group\/column):first-child *) {
    left: calc(var(--spacing) * -1);
  }

  .group-first\/column\:pl-0:is(:where(.group\/column):first-child *) {
    padding-left: calc(var(--spacing) * 0);
  }

  .group-last\/column\:-right-1:is(:where(.group\/column):last-child *) {
    right: calc(var(--spacing) * -1);
  }

  .group-last\/column\:pr-0:is(:where(.group\/column):last-child *) {
    padding-right: calc(var(--spacing) * 0);
  }

  .group-last\/toolbar-group\:hidden\!:is(:where(.group\/toolbar-group):last-child *) {
    display: none !important;
  }

  .group-focus-within\:pointer-events-none:is(:where(.group):focus-within *) {
    pointer-events: none;
  }

  .group-focus-within\:top-0:is(:where(.group):focus-within *) {
    top: calc(var(--spacing) * 0);
  }

  .group-focus-within\:cursor-default:is(:where(.group):focus-within *) {
    cursor: default;
  }

  .group-focus-within\:text-xs:is(:where(.group):focus-within *) {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .group-focus-within\:font-medium:is(:where(.group):focus-within *) {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .group-focus-within\:text-foreground:is(:where(.group):focus-within *) {
    color: var(--color-foreground);
  }

  .group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) {
    opacity: 1;
  }

  @media (hover: hover) {
    .group-hover\:pointer-events-auto:is(:where(.group):hover *) {
      pointer-events: auto;
    }

    .group-hover\:block:is(:where(.group):hover *) {
      display: block;
    }

    .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * .5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-x-1:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:scale-105:is(:where(.group):hover *) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:scale-110:is(:where(.group):hover *) {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:scale-125:is(:where(.group):hover *) {
      --tw-scale-x: 125%;
      --tw-scale-y: 125%;
      --tw-scale-z: 125%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:bg-accent:is(:where(.group):hover *) {
      background-color: var(--color-accent);
    }

    .group-hover\:text-gray-400:is(:where(.group):hover *) {
      color: var(--color-gray-400);
    }

    .group-hover\:text-gray-600:is(:where(.group):hover *) {
      color: var(--color-gray-600);
    }

    .group-hover\:text-gray-700:is(:where(.group):hover *) {
      color: var(--color-gray-700);
    }

    .group-hover\:text-gray-800:is(:where(.group):hover *) {
      color: var(--color-gray-800);
    }

    .group-hover\:text-gray-900:is(:where(.group):hover *) {
      color: var(--color-gray-900);
    }

    .group-hover\:text-yellow-400:is(:where(.group):hover *) {
      color: var(--color-yellow-400);
    }

    .group-hover\:opacity-0:is(:where(.group):hover *) {
      opacity: 0;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *), .group-hover\/column\:opacity-100:is(:where(.group\/column):hover *), .group-hover\/lock\:opacity-100:is(:where(.group\/lock):hover *), .group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *), .group-hover\/message\:opacity-100:is(:where(.group\/message):hover *), .group-hover\/row\:opacity-100:is(:where(.group\/row):hover *) {
      opacity: 1;
    }
  }

  .group-has-data-\[resizing\=\"true\"\]\/row\:opacity-0:is(:where(.group\/row):has([data-resizing="true"]) *) {
    opacity: 0;
  }

  .group-has-\[\[data-col\=\"0\"\]\:hover\]\/table\:block:is(:where(.group\/table):has([data-col="0"]:hover) *), .group-has-\[\[data-col\=\"0\"\]\[data-resizing\=\"true\"\]\]\/table\:block:is(:where(.group\/table):has([data-col="0"][data-resizing="true"]) *), .group-has-\[\[data-col\=\"1\"\]\:hover\]\/table\:block:is(:where(.group\/table):has([data-col="1"]:hover) *), .group-has-\[\[data-col\=\"1\"\]\[data-resizing\=\"true\"\]\]\/table\:block:is(:where(.group\/table):has([data-col="1"][data-resizing="true"]) *), .group-has-\[\[data-col\=\"10\"\]\:hover\]\/table\:block:is(:where(.group\/table):has([data-col="10"]:hover) *), .group-has-\[\[data-col\=\"10\"\]\[data-resizing\=\"true\"\]\]\/table\:block:is(:where(.group\/table):has([data-col="10"][data-resizing="true"]) *), .group-has-\[\[data-col\=\"2\"\]\:hover\]\/table\:block:is(:where(.group\/table):has([data-col="2"]:hover) *), .group-has-\[\[data-col\=\"2\"\]\[data-resizing\=\"true\"\]\]\/table\:block:is(:where(.group\/table):has([data-col="2"][data-resizing="true"]) *), .group-has-\[\[data-col\=\"3\"\]\:hover\]\/table\:block:is(:where(.group\/table):has([data-col="3"]:hover) *), .group-has-\[\[data-col\=\"3\"\]\[data-resizing\=\"true\"\]\]\/table\:block:is(:where(.group\/table):has([data-col="3"][data-resizing="true"]) *), .group-has-\[\[data-col\=\"4\"\]\:hover\]\/table\:block:is(:where(.group\/table):has([data-col="4"]:hover) *), .group-has-\[\[data-col\=\"4\"\]\[data-resizing\=\"true\"\]\]\/table\:block:is(:where(.group\/table):has([data-col="4"][data-resizing="true"]) *), .group-has-\[\[data-col\=\"5\"\]\:hover\]\/table\:block:is(:where(.group\/table):has([data-col="5"]:hover) *), .group-has-\[\[data-col\=\"5\"\]\[data-resizing\=\"true\"\]\]\/table\:block:is(:where(.group\/table):has([data-col="5"][data-resizing="true"]) *), .group-has-\[\[data-col\=\"6\"\]\:hover\]\/table\:block:is(:where(.group\/table):has([data-col="6"]:hover) *), .group-has-\[\[data-col\=\"6\"\]\[data-resizing\=\"true\"\]\]\/table\:block:is(:where(.group\/table):has([data-col="6"][data-resizing="true"]) *), .group-has-\[\[data-col\=\"7\"\]\:hover\]\/table\:block:is(:where(.group\/table):has([data-col="7"]:hover) *), .group-has-\[\[data-col\=\"7\"\]\[data-resizing\=\"true\"\]\]\/table\:block:is(:where(.group\/table):has([data-col="7"][data-resizing="true"]) *), .group-has-\[\[data-col\=\"8\"\]\:hover\]\/table\:block:is(:where(.group\/table):has([data-col="8"]:hover) *), .group-has-\[\[data-col\=\"8\"\]\[data-resizing\=\"true\"\]\]\/table\:block:is(:where(.group\/table):has([data-col="8"][data-resizing="true"]) *), .group-has-\[\[data-col\=\"9\"\]\:hover\]\/table\:block:is(:where(.group\/table):has([data-col="9"]:hover) *), .group-has-\[\[data-col\=\"9\"\]\[data-resizing\=\"true\"\]\]\/table\:block:is(:where(.group\/table):has([data-col="9"][data-resizing="true"]) *), .group-has-\[\[data-resizer-left\]\:hover\]\/table\:block:is(:where(.group\/table):has([data-resizer-left]:hover) *), .group-has-\[\[data-resizer-left\]\[data-resizing\=\"true\"\]\]\/table\:block:is(:where(.group\/table):has([data-resizer-left][data-resizing="true"]) *) {
    display: block;
  }

  .group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar="menu-action"]) *) {
    padding-right: calc(var(--spacing) * 8);
  }

  .group-has-\[\[data-slot\=item-description\]\]\/item\:translate-y-0\.5:is(:where(.group\/item):has([data-slot="item-description"]) *) {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .group-has-\[\[data-slot\=item-description\]\]\/item\:self-start:is(:where(.group\/item):has([data-slot="item-description"]) *) {
    align-self: flex-start;
  }

  .group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.group\/input-group):has( > input) *) {
    padding-top: calc(var(--spacing) * 2.5);
  }

  .group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.group\/input-group):has( > input) *) {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .group-data-\[active\=true\]\/item\:opacity-100:is(:where(.group\/item)[data-active="true"] *) {
    opacity: 1;
  }

  .group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.group)[data-collapsible="icon"] *) {
    margin-top: calc(var(--spacing) * -8);
  }

  .group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible="icon"] *) {
    display: none;
  }

  .group-data-\[collapsible\=icon\]\:\!size-8:is(:where(.group)[data-collapsible="icon"] *) {
    width: calc(var(--spacing) * 8) !important;
    height: calc(var(--spacing) * 8) !important;
  }

  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+1rem\)\]:is(:where(.group)[data-collapsible="icon"] *), .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]:is(:where(.group)[data-collapsible="icon"] *) {
    width: calc(var(--sidebar-width-icon)  + 1rem);
  }

  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]:is(:where(.group)[data-collapsible="icon"] *) {
    width: calc(var(--sidebar-width-icon)  + 1rem + 2px);
  }

  .group-data-\[collapsible\=icon\]\:w-\[var\(--sidebar-width-icon\)\]:is(:where(.group)[data-collapsible="icon"] *) {
    width: var(--sidebar-width-icon);
  }

  .group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible="icon"] *) {
    overflow: hidden;
  }

  .group-data-\[collapsible\=icon\]\:\!p-0:is(:where(.group)[data-collapsible="icon"] *) {
    padding: calc(var(--spacing) * 0) !important;
  }

  .group-data-\[collapsible\=icon\]\:\!p-2:is(:where(.group)[data-collapsible="icon"] *) {
    padding: calc(var(--spacing) * 2) !important;
  }

  .group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible="icon"] *) {
    opacity: 0;
  }

  .group-data-\[collapsible\=offcanvas\]\:-start-\[calc\(var\(--sidebar-width\)\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
    inset-inline-start: calc(calc(var(--sidebar-width)) * -1);
  }

  .group-data-\[collapsible\=offcanvas\]\:-end-\[calc\(var\(--sidebar-width\)\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
    inset-inline-end: calc(calc(var(--sidebar-width)) * -1);
  }

  .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
    right: calc(var(--sidebar-width) * -1);
  }

  .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
    left: calc(var(--sidebar-width) * -1);
  }

  .group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.group)[data-collapsible="offcanvas"] *) {
    width: calc(var(--spacing) * 0);
  }

  .group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible="offcanvas"] *) {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
    pointer-events: none;
  }

  .group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled="true"] *), .group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.group\/input-group)[data-disabled="true"] *) {
    opacity: .5;
  }

  .group-data-\[focused\=true\]\/day\:relative:is(:where(.group\/day)[data-focused="true"] *) {
    position: relative;
  }

  .group-data-\[focused\=true\]\/day\:z-10:is(:where(.group\/day)[data-focused="true"] *) {
    z-index: 10;
  }

  .group-data-\[focused\=true\]\/day\:border-ring:is(:where(.group\/day)[data-focused="true"] *) {
    border-color: var(--color-ring);
  }

  .group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.group\/day)[data-focused="true"] *) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused="true"] *) {
    --tw-ring-color: color-mix(in srgb, hsl(var(--ring)) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused="true"] *) {
      --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
    }
  }

  .group-data-\[pressed\=true\]\:bg-accent:is(:where(.group)[data-pressed="true"] *) {
    background-color: var(--color-accent);
  }

  .group-data-\[pressed\=true\]\:text-accent-foreground:is(:where(.group)[data-pressed="true"] *) {
    color: var(--color-accent-foreground);
  }

  .group-data-\[side\=left\]\:-end-4:is(:where(.group)[data-side="left"] *) {
    inset-inline-end: calc(var(--spacing) * -4);
  }

  .group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side="left"] *) {
    right: calc(var(--spacing) * -4);
  }

  .group-data-\[side\=left\]\:border-r:is(:where(.group)[data-side="left"] *) {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .group-data-\[side\=left\]\:border-r-0:is(:where(.group)[data-side="left"] *) {
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
  }

  .group-data-\[side\=right\]\:start-0:is(:where(.group)[data-side="right"] *) {
    inset-inline-start: calc(var(--spacing) * 0);
  }

  .group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side="right"] *) {
    left: calc(var(--spacing) * 0);
  }

  .group-data-\[side\=right\]\:rotate-180:is(:where(.group)[data-side="right"] *) {
    rotate: 180deg;
  }

  .group-data-\[side\=right\]\:border-l:is(:where(.group)[data-side="right"] *) {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .group-data-\[state\=closed\]\:-rotate-90:is(:where(.group)[data-state="closed"] *) {
    rotate: -90deg;
  }

  .group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state="open"] *) {
    rotate: 180deg;
  }

  .group-data-\[state\=open\]\/collapsible\:rotate-90:is(:where(.group\/collapsible)[data-state="open"] *) {
    rotate: 90deg;
  }

  .group-data-\[variant\=floating\]\:rounded-lg:is(:where(.group)[data-variant="floating"] *) {
    border-radius: var(--radius-lg);
  }

  .group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant="floating"] *) {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .group-data-\[variant\=floating\]\:border-sidebar-border:is(:where(.group)[data-variant="floating"] *) {
    border-color: hsl(var(--sidebar-border));
  }

  .group-data-\[variant\=floating\]\:shadow:is(:where(.group)[data-variant="floating"] *) {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .group-\[\.is-assistant\]\:bg-secondary:is(:where(.group).is-assistant *) {
    background-color: var(--color-secondary);
  }

  .group-\[\.is-assistant\]\:text-foreground:is(:where(.group).is-assistant *) {
    color: var(--color-foreground);
  }

  .group-\[\.is-user\]\:ml-auto:is(:where(.group).is-user *) {
    margin-left: auto;
  }

  .group-\[\.is-user\]\:rounded-lg:is(:where(.group).is-user *) {
    border-radius: var(--radius-lg);
  }

  .group-\[\.is-user\]\:bg-primary:is(:where(.group).is-user *) {
    background-color: var(--color-primary);
  }

  .group-\[\.is-user\]\:bg-secondary:is(:where(.group).is-user *) {
    background-color: var(--color-secondary);
  }

  .group-\[\.is-user\]\:px-4:is(:where(.group).is-user *) {
    padding-inline: calc(var(--spacing) * 4);
  }

  .group-\[\.is-user\]\:py-3:is(:where(.group).is-user *) {
    padding-block: calc(var(--spacing) * 3);
  }

  .group-\[\.is-user\]\:text-foreground:is(:where(.group).is-user *) {
    color: var(--color-foreground);
  }

  .group-\[\.is-user\]\:text-primary-foreground:is(:where(.group).is-user *) {
    color: var(--color-primary-foreground);
  }

  @media (hover: hover) {
    .peer-hover\/menu-button\:text-sidebar-accent-foreground:is(:where(.peer\/menu-button):hover ~ *) {
      color: hsl(var(--sidebar-accent-foreground));
    }
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) {
    opacity: .5;
  }

  .peer-disabled\:opacity-70:is(:where(.peer):disabled ~ *) {
    opacity: .7;
  }

  .peer-has-\[\[role\=menuitem\]\]\/menu-group\:block:is(:where(.peer\/menu-group):has([role="menuitem"]) ~ *), .peer-has-\[\[role\=menuitemradio\]\]\/menu-group\:block:is(:where(.peer\/menu-group):has([role="menuitemradio"]) ~ *), .peer-has-\[\[role\=option\]\]\/menu-group\:block:is(:where(.peer\/menu-group):has([role="option"]) ~ *) {
    display: block;
  }

  .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground:is(:where(.peer\/menu-button)[data-active="true"] ~ *) {
    color: hsl(var(--sidebar-accent-foreground));
  }

  .peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.peer\/menu-button)[data-size="default"] ~ *) {
    top: calc(var(--spacing) * 1.5);
  }

  .peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.peer\/menu-button)[data-size="lg"] ~ *) {
    top: calc(var(--spacing) * 2.5);
  }

  .peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) {
    top: calc(var(--spacing) * 1);
  }

  .selection\:bg-primary ::selection {
    background-color: var(--color-primary);
  }

  .selection\:bg-primary::selection {
    background-color: var(--color-primary);
  }

  .selection\:bg-transparent ::selection {
    background-color: #0000;
  }

  .selection\:bg-transparent::selection {
    background-color: #0000;
  }

  .selection\:text-primary-foreground ::selection {
    color: var(--color-primary-foreground);
  }

  .selection\:text-primary-foreground::selection {
    color: var(--color-primary-foreground);
  }

  .file\:inline-flex::file-selector-button {
    display: inline-flex;
  }

  .file\:h-7::file-selector-button {
    height: calc(var(--spacing) * 7);
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000;
  }

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .file\:text-foreground::file-selector-button {
    color: var(--color-foreground);
  }

  .placeholder\:text-gray-400::placeholder {
    color: var(--color-gray-400);
  }

  .placeholder\:text-muted-foreground::placeholder {
    color: var(--color-muted-foreground);
  }

  .placeholder\:text-muted-foreground\/80::placeholder {
    color: color-mix(in srgb, hsl(var(--muted-foreground)) 80%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-muted-foreground\/80::placeholder {
      color: color-mix(in oklab, var(--color-muted-foreground) 80%, transparent);
    }
  }

  .before\:absolute:before {
    content: var(--tw-content);
    position: absolute;
  }

  .before\:z-10:before {
    content: var(--tw-content);
    z-index: 10;
  }

  .before\:box-border:before {
    content: var(--tw-content);
    box-sizing: border-box;
  }

  .before\:size-full:before {
    content: var(--tw-content);
    width: 100%;
    height: 100%;
  }

  .before\:cursor-text:before {
    content: var(--tw-content);
    cursor: text;
  }

  .before\:border-t:before {
    content: var(--tw-content);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .before\:border-r:before {
    content: var(--tw-content);
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .before\:border-b:before {
    content: var(--tw-content);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .before\:border-l:before {
    content: var(--tw-content);
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .before\:border-t-border:before {
    content: var(--tw-content);
    border-top-color: var(--color-border);
  }

  .before\:border-r-border:before {
    content: var(--tw-content);
    border-right-color: var(--color-border);
  }

  .before\:border-b-border:before {
    content: var(--tw-content);
    border-bottom-color: var(--color-border);
  }

  .before\:border-l-border:before {
    content: var(--tw-content);
    border-left-color: var(--color-border);
  }

  .before\:text-muted-foreground\/80:before {
    content: var(--tw-content);
    color: color-mix(in srgb, hsl(var(--muted-foreground)) 80%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .before\:text-muted-foreground\/80:before {
      color: color-mix(in oklab, var(--color-muted-foreground) 80%, transparent);
    }
  }

  .before\:content-\[\'\'\]:before {
    --tw-content: "";
    content: var(--tw-content);
  }

  .before\:content-\[attr\(placeholder\)\]:before {
    --tw-content: attr(placeholder);
    content: var(--tw-content);
  }

  .before\:select-none:before {
    content: var(--tw-content);
    -webkit-user-select: none;
    user-select: none;
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:-inset-2:after {
    content: var(--tw-content);
    inset: calc(var(--spacing) * -2);
  }

  .after\:inset-0:after {
    content: var(--tw-content);
    inset: calc(var(--spacing) * 0);
  }

  .after\:inset-y-0:after {
    content: var(--tw-content);
    inset-block: calc(var(--spacing) * 0);
  }

  .after\:start-1\/2:after {
    content: var(--tw-content);
    inset-inline-start: 50%;
  }

  .after\:-top-0\.5:after {
    content: var(--tw-content);
    top: calc(var(--spacing) * -.5);
  }

  .after\:-left-1:after {
    content: var(--tw-content);
    left: calc(var(--spacing) * -1);
  }

  .after\:left-1\/2:after {
    content: var(--tw-content);
    left: 50%;
  }

  .after\:z-1:after {
    content: var(--tw-content);
    z-index: 1;
  }

  .after\:ml-1\.5:after {
    content: var(--tw-content);
    margin-left: calc(var(--spacing) * 1.5);
  }

  .after\:block:after {
    content: var(--tw-content);
    display: block;
  }

  .after\:flex:after {
    content: var(--tw-content);
    display: flex;
  }

  .after\:inline-block:after {
    content: var(--tw-content);
    display: inline-block;
  }

  .after\:h-3:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 3);
  }

  .after\:h-16:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 16);
  }

  .after\:h-\[calc\(100\%\)\+4px\]:after {
    content: var(--tw-content);
    height: calc(100%) 4px;
  }

  .after\:w-3:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 3);
  }

  .after\:w-\[2px\]:after {
    content: var(--tw-content);
    width: 2px;
  }

  .after\:w-\[3px\]:after {
    content: var(--tw-content);
    width: 3px;
  }

  .after\:w-\[calc\(100\%\+8px\)\]:after {
    content: var(--tw-content);
    width: calc(100% + 8px);
  }

  .after\:rounded-\[6px\]:after {
    content: var(--tw-content);
    border-radius: 6px;
  }

  .after\:rounded-full:after {
    content: var(--tw-content);
    border-radius: 3.40282e38px;
  }

  .after\:rounded-sm:after {
    content: var(--tw-content);
    border-radius: var(--radius-sm);
  }

  .after\:bg-neutral-500\/10:after {
    content: var(--tw-content);
    background-color: #7373731a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .after\:bg-neutral-500\/10:after {
      background-color: color-mix(in oklab, var(--color-neutral-500) 10%, transparent);
    }
  }

  .after\:bg-primary:after {
    content: var(--tw-content);
    background-color: var(--color-primary);
  }

  .after\:bg-ring:after {
    content: var(--tw-content);
    background-color: var(--color-ring);
  }

  .after\:pb-\[var\(--aspect-ratio\)\]:after {
    content: var(--tw-content);
    padding-bottom: var(--aspect-ratio);
  }

  .after\:align-middle:after {
    content: var(--tw-content);
    vertical-align: middle;
  }

  .after\:opacity-0:after {
    content: var(--tw-content);
    opacity: 0;
  }

  .after\:content-\[\"\"\]:after {
    --tw-content: "";
    content: var(--tw-content);
  }

  .after\:content-\[\'_\'\]:after {
    --tw-content: " ";
    content: var(--tw-content);
  }

  @media (hover: hover) {
    .group-hover\:after\:opacity-100:is(:where(.group):hover *):after {
      content: var(--tw-content);
      opacity: 1;
    }
  }

  .group-data-\[collapsible\=offcanvas\]\:after\:start-full:is(:where(.group)[data-collapsible="offcanvas"] *):after {
    content: var(--tw-content);
    inset-inline-start: 100%;
  }

  .group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible="offcanvas"] *):after {
    content: var(--tw-content);
    left: 100%;
  }

  .first\:rounded-l-md:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .first\:border-l:first-child {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .first\:border-l-0:first-child {
    border-left-style: var(--tw-border-style);
    border-left-width: 0;
  }

  .last\:rounded-r-md:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .last\:border-r-0:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .focus-within\:border-border:focus-within {
    border-color: var(--color-border);
  }

  .focus-within\:ring-2:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-ring:focus-within {
    --tw-ring-color: var(--color-ring);
  }

  .focus-within\:ring-offset-2:focus-within {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  @media (hover: hover) {
    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-1:hover {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-\[1px\]:hover {
      --tw-translate-y: calc(1px * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-\[2px\]:hover {
      --tw-translate-y: calc(2px * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:scale-100:hover {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-110:hover {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-125:hover {
      --tw-scale-x: 125%;
      --tw-scale-y: 125%;
      --tw-scale-z: 125%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:cursor-pointer:hover {
      cursor: pointer;
    }

    .hover\:border-amber-200:hover {
      border-color: var(--color-amber-200);
    }

    .hover\:border-blue-200:hover {
      border-color: var(--color-blue-200);
    }

    .hover\:border-blue-300:hover {
      border-color: var(--color-blue-300);
    }

    .hover\:border-gray-200:hover {
      border-color: var(--color-gray-200);
    }

    .hover\:border-gray-300:hover {
      border-color: var(--color-gray-300);
    }

    .hover\:border-gray-400:hover {
      border-color: var(--color-gray-400);
    }

    .hover\:border-gray-500:hover {
      border-color: var(--color-gray-500);
    }

    .hover\:border-indigo-400:hover {
      border-color: var(--color-indigo-400);
    }

    .hover\:border-muted-foreground\/50:hover {
      border-color: color-mix(in srgb, hsl(var(--muted-foreground)) 50%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-muted-foreground\/50:hover {
        border-color: color-mix(in oklab, var(--color-muted-foreground) 50%, transparent);
      }
    }

    .hover\:border-primary:hover {
      border-color: var(--color-primary);
    }

    .hover\:border-primary-blue:hover {
      border-color: var(--color-primary-blue);
    }

    .hover\:border-primary\/50:hover {
      border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/50:hover {
        border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
      }
    }

    .hover\:border-purple-200:hover {
      border-color: var(--color-purple-200);
    }

    .hover\:bg-\[\#0056b3\]:hover {
      background-color: #0056b3;
    }

    .hover\:bg-\[\#e5e7eb\]:hover {
      background-color: #e5e7eb;
    }

    .hover\:bg-accent:hover {
      background-color: var(--color-accent);
    }

    .hover\:bg-background:hover {
      background-color: var(--color-background);
    }

    .hover\:bg-blue-50:hover {
      background-color: var(--color-blue-50);
    }

    .hover\:bg-blue-100:hover {
      background-color: var(--color-blue-100);
    }

    .hover\:bg-blue-500:hover {
      background-color: var(--color-blue-500);
    }

    .hover\:bg-blue-600:hover {
      background-color: var(--color-blue-600);
    }

    .hover\:bg-blue-700:hover {
      background-color: var(--color-blue-700);
    }

    .hover\:bg-destructive\/80:hover {
      background-color: color-mix(in srgb, hsl(var(--destructive)) 80%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/80:hover {
        background-color: color-mix(in oklab, var(--color-destructive) 80%, transparent);
      }
    }

    .hover\:bg-destructive\/90:hover {
      background-color: color-mix(in srgb, hsl(var(--destructive)) 90%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
      }
    }

    .hover\:bg-foreground\/90:hover {
      background-color: color-mix(in srgb, hsl(var(--foreground)) 90%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/90:hover {
        background-color: color-mix(in oklab, var(--color-foreground) 90%, transparent);
      }
    }

    .hover\:bg-gray-50:hover {
      background-color: var(--color-gray-50);
    }

    .hover\:bg-gray-100:hover {
      background-color: var(--color-gray-100);
    }

    .hover\:bg-gray-200:hover {
      background-color: var(--color-gray-200);
    }

    .hover\:bg-gray-300:hover {
      background-color: var(--color-gray-300);
    }

    .hover\:bg-gray-400:hover {
      background-color: var(--color-gray-400);
    }

    .hover\:bg-gray-500:hover {
      background-color: var(--color-gray-500);
    }

    .hover\:bg-gray-700:hover {
      background-color: var(--color-gray-700);
    }

    .hover\:bg-gray-800:hover {
      background-color: var(--color-gray-800);
    }

    .hover\:bg-gray-900:hover {
      background-color: var(--color-gray-900);
    }

    .hover\:bg-green-100:hover {
      background-color: var(--color-green-100);
    }

    .hover\:bg-green-700:hover {
      background-color: var(--color-green-700);
    }

    .hover\:bg-indigo-50:hover {
      background-color: var(--color-indigo-50);
    }

    .hover\:bg-muted:hover {
      background-color: var(--color-muted);
    }

    .hover\:bg-muted-foreground\/10:hover {
      background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 10%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted-foreground\/10:hover {
        background-color: color-mix(in oklab, var(--color-muted-foreground) 10%, transparent);
      }
    }

    .hover\:bg-muted-foreground\/15:hover {
      background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 15%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted-foreground\/15:hover {
        background-color: color-mix(in oklab, var(--color-muted-foreground) 15%, transparent);
      }
    }

    .hover\:bg-muted\/30:hover {
      background-color: color-mix(in srgb, hsl(var(--muted)) 30%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/30:hover {
        background-color: color-mix(in oklab, var(--color-muted) 30%, transparent);
      }
    }

    .hover\:bg-muted\/40:hover {
      background-color: color-mix(in srgb, hsl(var(--muted)) 40%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/40:hover {
        background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
      }
    }

    .hover\:bg-muted\/50:hover {
      background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/50:hover {
        background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
      }
    }

    .hover\:bg-muted\/80:hover {
      background-color: color-mix(in srgb, hsl(var(--muted)) 80%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/80:hover {
        background-color: color-mix(in oklab, var(--color-muted) 80%, transparent);
      }
    }

    .hover\:bg-orange-100:hover {
      background-color: var(--color-orange-100);
    }

    .hover\:bg-orange-700:hover {
      background-color: var(--color-orange-700);
    }

    .hover\:bg-primary\/10:hover {
      background-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/10:hover {
        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
      }
    }

    .hover\:bg-primary\/80:hover {
      background-color: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/80:hover {
        background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
      }
    }

    .hover\:bg-primary\/90:hover {
      background-color: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
      }
    }

    .hover\:bg-purple-50:hover {
      background-color: var(--color-purple-50);
    }

    .hover\:bg-purple-100:hover {
      background-color: var(--color-purple-100);
    }

    .hover\:bg-purple-200:hover {
      background-color: var(--color-purple-200);
    }

    .hover\:bg-purple-700:hover {
      background-color: var(--color-purple-700);
    }

    .hover\:bg-red-50:hover {
      background-color: var(--color-red-50);
    }

    .hover\:bg-red-100:hover {
      background-color: var(--color-red-100);
    }

    .hover\:bg-red-200:hover {
      background-color: var(--color-red-200);
    }

    .hover\:bg-red-600:hover {
      background-color: var(--color-red-600);
    }

    .hover\:bg-red-700:hover {
      background-color: var(--color-red-700);
    }

    .hover\:bg-secondary\/80:hover {
      background-color: color-mix(in srgb, hsl(var(--secondary)) 80%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/80:hover {
        background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
      }
    }

    .hover\:bg-sidebar-accent:hover {
      background-color: hsl(var(--sidebar-accent));
    }

    .hover\:bg-slate-100:hover {
      background-color: var(--color-slate-100);
    }

    .hover\:bg-transparent:hover {
      background-color: #0000;
    }

    .hover\:bg-violet-400\/90:hover {
      background-color: #a685ffe6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-violet-400\/90:hover {
        background-color: color-mix(in oklab, var(--color-violet-400) 90%, transparent);
      }
    }

    .hover\:bg-white:hover {
      background-color: var(--color-white);
    }

    .hover\:bg-white\/50:hover {
      background-color: #ffffff80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/50:hover {
        background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
      }
    }

    .hover\:bg-yellow-500:hover {
      background-color: var(--color-yellow-500);
    }

    .hover\:bg-yellow-700:hover {
      background-color: var(--color-yellow-700);
    }

    .hover\:bg-zinc-100:hover {
      background-color: var(--color-zinc-100);
    }

    .hover\:bg-zinc-200:hover {
      background-color: var(--color-zinc-200);
    }

    .hover\:from-gray-600\/70:hover {
      --tw-gradient-from: #4a5565b3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:from-gray-600\/70:hover {
        --tw-gradient-from: color-mix(in oklab, var(--color-gray-600) 70%, transparent);
      }
    }

    .hover\:from-gray-600\/70:hover {
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:from-sky-700:hover {
      --tw-gradient-from: var(--color-sky-700);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:from-violet-700:hover {
      --tw-gradient-from: var(--color-violet-700);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:to-gray-700\/70:hover {
      --tw-gradient-to: #364153b3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:to-gray-700\/70:hover {
        --tw-gradient-to: color-mix(in oklab, var(--color-gray-700) 70%, transparent);
      }
    }

    .hover\:to-gray-700\/70:hover {
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:to-indigo-700:hover {
      --tw-gradient-to: var(--color-indigo-700);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:to-purple-700:hover {
      --tw-gradient-to: var(--color-purple-700);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:text-accent-foreground:hover {
      color: var(--color-accent-foreground);
    }

    .hover\:text-blue-700:hover {
      color: var(--color-blue-700);
    }

    .hover\:text-foreground:hover {
      color: var(--color-foreground);
    }

    .hover\:text-gray-300:hover {
      color: var(--color-gray-300);
    }

    .hover\:text-gray-600:hover {
      color: var(--color-gray-600);
    }

    .hover\:text-gray-700:hover {
      color: var(--color-gray-700);
    }

    .hover\:text-gray-900:hover {
      color: var(--color-gray-900);
    }

    .hover\:text-muted-foreground:hover {
      color: var(--color-muted-foreground);
    }

    .hover\:text-muted-foreground\/80:hover {
      color: color-mix(in srgb, hsl(var(--muted-foreground)) 80%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-muted-foreground\/80:hover {
        color: color-mix(in oklab, var(--color-muted-foreground) 80%, transparent);
      }
    }

    .hover\:text-primary-blue:hover {
      color: var(--color-primary-blue);
    }

    .hover\:text-red-500:hover {
      color: var(--color-red-500);
    }

    .hover\:text-red-600:hover {
      color: var(--color-red-600);
    }

    .hover\:text-sidebar-accent-foreground:hover {
      color: hsl(var(--sidebar-accent-foreground));
    }

    .hover\:text-slate-700:hover {
      color: var(--color-slate-700);
    }

    .hover\:text-zinc-700:hover {
      color: var(--color-zinc-700);
    }

    .hover\:text-zinc-800:hover {
      color: var(--color-zinc-800);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-80:hover {
      opacity: .8;
    }

    .hover\:opacity-85:hover {
      opacity: .85;
    }

    .hover\:opacity-90:hover {
      opacity: .9;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }

    .hover\:shadow:hover {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
      --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-accent)));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_4px_12px_rgba\(0\,0\,0\,0\.18\)\]:hover {
      --tw-shadow: 0 4px 12px var(--tw-shadow-color, #0000002e);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_6px_16px_rgba\(0\,0\,0\,0\.12\)\]:hover {
      --tw-shadow: 0 6px 16px var(--tw-shadow-color, #0000001f);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-md:hover {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-sm:hover {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-xl:hover {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:ring-2:hover {
      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-gray-200\/50:hover {
      --tw-shadow-color: #e6e6e680;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-gray-200\/50:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-200) 50%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .hover\:ring-gray-300:hover {
      --tw-ring-color: var(--color-gray-300);
    }

    .hover\:ring-primary-blue:hover {
      --tw-ring-color: var(--color-primary-blue);
    }

    .hover\:ring-offset-2:hover {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }

    .hover\:brightness-105:hover {
      --tw-brightness: brightness(105%);
      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, );
    }

    .hover\:brightness-110:hover {
      --tw-brightness: brightness(110%);
      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
    }

    .group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:is(:where(.group)[data-collapsible="offcanvas"] *):hover, .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover:is(:where(.group)[data-collapsible="offcanvas"] *) {
      background-color: hsl(var(--sidebar-background));
    }

    .hover\:after\:bg-sidebar-border:hover:after {
      content: var(--tw-content);
      background-color: hsl(var(--sidebar-border));
    }
  }

  .focus\:border-\[\#62a7fa\]:focus {
    border-color: #62a7fa;
  }

  .focus\:border-blue-400:focus {
    border-color: var(--color-blue-400);
  }

  .focus\:border-blue-500:focus {
    border-color: var(--color-blue-500);
  }

  .focus\:border-emerald-500:focus {
    border-color: var(--color-emerald-500);
  }

  .focus\:border-gray-400:focus {
    border-color: var(--color-gray-400);
  }

  .focus\:border-green-400:focus {
    border-color: var(--color-green-400);
  }

  .focus\:border-purple-400:focus {
    border-color: var(--color-purple-400);
  }

  .focus\:border-purple-500:focus {
    border-color: var(--color-purple-500);
  }

  .focus\:border-transparent:focus {
    border-color: #0000;
  }

  .focus\:bg-accent:focus {
    background-color: var(--color-accent);
  }

  .focus\:bg-destructive\/15:focus {
    background-color: color-mix(in srgb, hsl(var(--destructive)) 15%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:bg-destructive\/15:focus {
      background-color: color-mix(in oklab, var(--color-destructive) 15%, transparent);
    }
  }

  .focus\:bg-white:focus {
    background-color: var(--color-white);
  }

  .focus\:text-accent-foreground:focus {
    color: var(--color-accent-foreground);
  }

  .focus\:text-destructive:focus {
    color: var(--color-destructive);
  }

  .focus\:ring-0:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-blue-500:focus {
    --tw-ring-color: var(--color-blue-500);
  }

  .focus\:ring-blue-500\/20:focus {
    --tw-ring-color: #3080ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-blue-500\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .focus\:ring-gray-500\/20:focus {
    --tw-ring-color: #6a728233;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-gray-500\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
    }
  }

  .focus\:ring-green-500\/20:focus {
    --tw-ring-color: #a8e8a833;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-green-500\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
    }
  }

  .focus\:ring-purple-500\/20:focus {
    --tw-ring-color: #c1c1ff33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-purple-500\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
    }
  }

  .focus\:ring-ring:focus {
    --tw-ring-color: var(--color-ring);
  }

  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus\:outline-hidden:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .focus\:outline-hidden:focus {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:border-ring:focus-visible {
    border-color: var(--color-ring);
  }

  .focus-visible\:border-violet-600:focus-visible {
    border-color: var(--color-violet-600);
  }

  .focus-visible\:opacity-100:focus-visible {
    opacity: 1;
  }

  .focus-visible\:shadow-lg:focus-visible {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-0:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-1:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-4:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-\[3px\]:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-destructive\/20:focus-visible {
    --tw-ring-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-destructive\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
    }
  }

  .focus-visible\:ring-gray-300:focus-visible {
    --tw-ring-color: var(--color-gray-300);
  }

  .focus-visible\:ring-green-100:focus-visible {
    --tw-ring-color: var(--color-green-100);
  }

  .focus-visible\:ring-indigo-500:focus-visible {
    --tw-ring-color: var(--color-indigo-500);
  }

  .focus-visible\:ring-ring:focus-visible {
    --tw-ring-color: var(--color-ring);
  }

  .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: color-mix(in srgb, hsl(var(--ring)) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/50:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
    }
  }

  .focus-visible\:ring-sidebar-ring:focus-visible {
    --tw-ring-color: hsl(var(--sidebar-ring));
  }

  .focus-visible\:ring-transparent:focus-visible {
    --tw-ring-color: transparent;
  }

  .focus-visible\:ring-violet-400\/35:focus-visible {
    --tw-ring-color: #a685ff59;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-violet-400\/35:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--color-violet-400) 35%, transparent);
    }
  }

  .focus-visible\:ring-offset-0:focus-visible {
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-white:focus-visible {
    --tw-ring-offset-color: var(--color-white);
  }

  .focus-visible\:outline-1:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .focus-visible\:outline-ring:focus-visible {
    outline-color: var(--color-ring);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:translate-y-\[1px\]:active, .active\:translate-y-px:active {
    --tw-translate-y: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .active\:border-b-0:active {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .active\:border-b-2:active {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .active\:bg-blue-50\/70:active {
    background-color: #eff6ffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-blue-50\/70:active {
      background-color: color-mix(in oklab, var(--color-blue-50) 70%, transparent);
    }
  }

  .active\:bg-gray-50\/70:active {
    background-color: #f9fafbb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-gray-50\/70:active {
      background-color: color-mix(in oklab, var(--color-gray-50) 70%, transparent);
    }
  }

  .active\:bg-gray-100\/70:active {
    background-color: #f2f4f5b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-gray-100\/70:active {
      background-color: color-mix(in oklab, var(--color-gray-100) 70%, transparent);
    }
  }

  .active\:bg-gray-300:active {
    background-color: var(--color-gray-300);
  }

  .active\:bg-purple-50\/70:active {
    background-color: #faf5ffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-purple-50\/70:active {
      background-color: color-mix(in oklab, var(--color-purple-50) 70%, transparent);
    }
  }

  .active\:bg-sidebar-accent:active {
    background-color: hsl(var(--sidebar-accent));
  }

  .active\:from-sky-800:active {
    --tw-gradient-from: var(--color-sky-800);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .active\:to-indigo-800:active {
    --tw-gradient-to: var(--color-indigo-800);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .active\:text-sidebar-accent-foreground:active {
    color: hsl(var(--sidebar-accent-foreground));
  }

  .active\:shadow-sm:active {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:bg-\[\#b3b3b3\]:disabled {
    background-color: #b3b3b3;
  }

  .disabled\:bg-gray-100:disabled {
    background-color: var(--color-gray-100);
  }

  .disabled\:bg-gray-300:disabled {
    background-color: var(--color-gray-300);
  }

  .disabled\:bg-muted:disabled {
    background-color: var(--color-muted);
  }

  .disabled\:bg-red-50:disabled {
    background-color: var(--color-red-50);
  }

  .disabled\:text-gray-400:disabled {
    color: var(--color-gray-400);
  }

  .disabled\:text-muted-foreground:disabled {
    color: var(--color-muted-foreground);
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:shadow-none:disabled {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  :where([data-side="left"]) .in-data-\[side\=left\]\:cursor-w-resize {
    cursor: w-resize;
  }

  :where([data-side="right"]) .in-data-\[side\=right\]\:cursor-e-resize {
    cursor: e-resize;
  }

  .has-focus\:border-ring:has(:focus) {
    border-color: var(--color-ring);
  }

  .has-focus\:ring-\[3px\]:has(:focus) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .has-focus\:ring-ring\/50:has(:focus) {
    --tw-ring-color: color-mix(in srgb, hsl(var(--ring)) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .has-focus\:ring-ring\/50:has(:focus) {
      --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
    }
  }

  .has-disabled\:opacity-50:has(:disabled) {
    opacity: .5;
  }

  .has-aria-disabled\:border-input:has([aria-disabled="true"]) {
    border-color: var(--color-input);
  }

  .has-aria-disabled\:bg-muted:has([aria-disabled="true"]) {
    background-color: var(--color-muted);
  }

  .has-data-readonly\:w-fit:has([data-readonly]) {
    width: fit-content;
  }

  .has-data-readonly\:cursor-default:has([data-readonly]) {
    cursor: default;
  }

  .has-data-readonly\:border-transparent:has([data-readonly]) {
    border-color: #0000;
  }

  .has-data-readonly\:focus-within\:\[box-shadow\:none\]:has([data-readonly]):focus-within {
    box-shadow: none;
  }

  .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot="card-action"]) {
    grid-template-columns: 1fr auto;
  }

  .has-data-\[variant\=inset\]\:bg-sidebar:has([data-variant="inset"]) {
    background-color: hsl(var(--sidebar-background));
  }

  .has-\[\[data-layout\=fixed\]\]\:h-svh:has([data-layout="fixed"]) {
    height: 100svh;
  }

  .has-\[\[data-slate-editor\]\:focus\]\:ring-2:has([data-slate-editor]:focus) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:border-ring:has([data-slot="input-group-control"]:focus-visible) {
    border-color: var(--color-ring);
  }

  .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-\[3px\]:has([data-slot="input-group-control"]:focus-visible) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot="input-group-control"]:focus-visible) {
    --tw-ring-color: color-mix(in srgb, hsl(var(--ring)) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot="input-group-control"]:focus-visible) {
      --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
    }
  }

  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive:has([data-slot][aria-invalid="true"]) {
    border-color: var(--color-destructive);
  }

  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid="true"]) {
    --tw-ring-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid="true"]) {
      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
    }
  }

  .has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant="inset"]) {
    background-color: hsl(var(--sidebar-background));
  }

  .has-\[\[role\=menuitem\]\]\:block:has([role="menuitem"]), .has-\[\[role\=menuitemradio\]\]\:block:has([role="menuitemradio"]), .has-\[\[role\=option\]\]\:block:has([role="option"]) {
    display: block;
  }

  .has-\[button\]\:flex:has(:is(button)) {
    display: flex;
  }

  .has-\[\+input\:not\(\:placeholder-shown\)\]\:pointer-events-none:has( + input:not(:placeholder-shown)) {
    pointer-events: none;
  }

  .has-\[\+input\:not\(\:placeholder-shown\)\]\:top-0:has( + input:not(:placeholder-shown)) {
    top: calc(var(--spacing) * 0);
  }

  .has-\[\+input\:not\(\:placeholder-shown\)\]\:cursor-default:has( + input:not(:placeholder-shown)) {
    cursor: default;
  }

  .has-\[\+input\:not\(\:placeholder-shown\)\]\:text-xs:has( + input:not(:placeholder-shown)) {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .has-\[\+input\:not\(\:placeholder-shown\)\]\:font-medium:has( + input:not(:placeholder-shown)) {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .has-\[\+input\:not\(\:placeholder-shown\)\]\:text-foreground:has( + input:not(:placeholder-shown)) {
    color: var(--color-foreground);
  }

  .has-\[\>\[data-align\=block-end\]\]\:h-auto:has( > [data-align="block-end"]) {
    height: auto;
  }

  .has-\[\>\[data-align\=block-end\]\]\:flex-col:has( > [data-align="block-end"]) {
    flex-direction: column;
  }

  .has-\[\>\[data-align\=block-start\]\]\:h-auto:has( > [data-align="block-start"]) {
    height: auto;
  }

  .has-\[\>\[data-align\=block-start\]\]\:flex-col:has( > [data-align="block-start"]) {
    flex-direction: column;
  }

  .has-\[\>\[data-slot\=button-group\]\]\:gap-2:has( > [data-slot="button-group"]) {
    gap: calc(var(--spacing) * 2);
  }

  .has-\[\>button\]\:mr-\[-0\.45rem\]:has( > button) {
    margin-right: -.45rem;
  }

  .has-\[\>button\]\:ml-\[-0\.45rem\]:has( > button) {
    margin-left: -.45rem;
  }

  .has-\[\>kbd\]\:mr-\[-0\.35rem\]:has( > kbd) {
    margin-right: -.35rem;
  }

  .has-\[\>kbd\]\:ml-\[-0\.35rem\]:has( > kbd) {
    margin-left: -.35rem;
  }

  .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has( > svg) {
    grid-template-columns: calc(var(--spacing) * 4) 1fr;
  }

  .has-\[\>svg\]\:gap-x-3:has( > svg) {
    column-gap: calc(var(--spacing) * 3);
  }

  .has-\[\>svg\]\:p-0:has( > svg) {
    padding: calc(var(--spacing) * 0);
  }

  .has-\[\>svg\]\:px-2:has( > svg) {
    padding-inline: calc(var(--spacing) * 2);
  }

  .has-\[\>svg\]\:px-2\.5:has( > svg) {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .has-\[\>textarea\]\:h-auto:has( > textarea) {
    height: auto;
  }

  .aria-checked\:bg-accent[aria-checked="true"] {
    background-color: var(--color-accent);
  }

  .aria-checked\:text-accent-foreground[aria-checked="true"] {
    color: var(--color-accent-foreground);
  }

  .aria-disabled\:pointer-events-none[aria-disabled="true"] {
    pointer-events: none;
  }

  .aria-disabled\:opacity-50[aria-disabled="true"] {
    opacity: .5;
  }

  .aria-expanded\:bg-accent[aria-expanded="true"] {
    background-color: var(--color-accent);
  }

  .aria-expanded\:text-foreground[aria-expanded="true"] {
    color: var(--color-foreground);
  }

  .aria-invalid\:border-destructive[aria-invalid="true"] {
    border-color: var(--color-destructive);
  }

  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
    --tw-ring-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
    }
  }

  .aria-selected\:text-muted-foreground[aria-selected="true"] {
    color: var(--color-muted-foreground);
  }

  .data-readonly\:w-fit[data-readonly] {
    width: fit-content;
  }

  :is(.\*\*\:data-slate-placeholder\:\!top-1\/2 *)[data-slate-placeholder] {
    top: 50% !important;
  }

  :is(.\*\*\:data-slate-placeholder\:top-\[auto_\!important\] *)[data-slate-placeholder] {
    top: auto !important;
  }

  :is(.\*\*\:data-slate-placeholder\:-translate-y-1\/2 *)[data-slate-placeholder] {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  :is(.\*\*\:data-slate-placeholder\:text-muted-foreground\/80 *)[data-slate-placeholder] {
    color: color-mix(in srgb, hsl(var(--muted-foreground)) 80%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :is(.\*\*\:data-slate-placeholder\:text-muted-foreground\/80 *)[data-slate-placeholder] {
      color: color-mix(in oklab, var(--color-muted-foreground) 80%, transparent);
    }
  }

  :is(.\*\*\:data-slate-placeholder\:opacity-100\! *)[data-slate-placeholder] {
    opacity: 1 !important;
  }

  .data-\[active-item\=true\]\:bg-gray-100[data-active-item="true"] {
    background-color: var(--color-gray-100);
  }

  .data-\[active\=true\]\:z-10[data-active="true"] {
    z-index: 10;
  }

  .data-\[active\=true\]\:border-ring[data-active="true"] {
    border-color: var(--color-ring);
  }

  .data-\[active\=true\]\:bg-muted[data-active="true"] {
    background-color: var(--color-muted);
  }

  .data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
    background-color: hsl(var(--sidebar-accent));
  }

  .data-\[active\=true\]\:font-medium[data-active="true"] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
    color: hsl(var(--sidebar-accent-foreground));
  }

  .data-\[active\=true\]\:ring-\[3px\][data-active="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
    --tw-ring-color: color-mix(in srgb, hsl(var(--ring)) 50%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
      --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
    }
  }

  .data-\[active\=true\]\:aria-invalid\:border-destructive[data-active="true"][aria-invalid="true"] {
    border-color: var(--color-destructive);
  }

  .data-\[active\=true\]\:aria-invalid\:ring-destructive\/20[data-active="true"][aria-invalid="true"] {
    --tw-ring-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[active\=true\]\:aria-invalid\:ring-destructive\/20[data-active="true"][aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
    }
  }

  .data-\[disabled\]\:pointer-events-none[data-disabled] {
    pointer-events: none;
  }

  .data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: .5;
  }

  .data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
    pointer-events: none;
  }

  .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
    opacity: .5;
  }

  .data-\[error\=true\]\:text-destructive[data-error="true"] {
    color: var(--color-destructive);
  }

  .data-\[highlighted\=true\]\:bg-accent[data-highlighted="true"] {
    background-color: var(--color-accent);
  }

  .data-\[inset\]\:pl-8[data-inset] {
    padding-left: calc(var(--spacing) * 8);
  }

  .data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
    height: 1px;
  }

  .data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
    width: 100%;
  }

  .data-\[orientation\=vertical\]\:h-auto[data-orientation="vertical"] {
    height: auto;
  }

  .data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
    height: 100%;
  }

  .data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
    width: 1px;
  }

  .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
    color: var(--color-muted-foreground);
  }

  .data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
    border-radius: var(--radius-md);
  }

  .data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
    background-color: var(--color-primary);
  }

  .data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
    color: var(--color-primary-foreground);
  }

  .data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
    border-radius: 0;
  }

  .data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
    background-color: var(--color-accent);
  }

  .data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
    color: var(--color-accent-foreground);
  }

  .data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
    border-radius: var(--radius-md);
  }

  .data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
    background-color: var(--color-primary);
  }

  .data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
    color: var(--color-primary-foreground);
  }

  .data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
    background-color: var(--color-primary);
  }

  .data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
    color: var(--color-primary-foreground);
  }

  .data-\[selected\=true\]\:rounded-none[data-selected="true"] {
    border-radius: 0;
  }

  .data-\[selected\=true\]\:bg-accent[data-selected="true"] {
    background-color: var(--color-accent);
  }

  .data-\[selected\=true\]\:bg-primary\/10[data-selected="true"] {
    background-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[selected\=true\]\:bg-primary\/10[data-selected="true"] {
      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }

  .data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
    color: var(--color-accent-foreground);
  }

  .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
    --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
  }

  .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
    --tw-translate-x: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
    --tw-enter-translate-x: calc(2 * var(--spacing));
  }

  .data-\[side\=right\]\:translate-x-1[data-side="right"] {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
    --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
  }

  .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
    --tw-enter-translate-y: calc(2 * var(--spacing));
  }

  .data-\[size\=default\]\:h-9[data-size="default"] {
    height: calc(var(--spacing) * 9);
  }

  .data-\[size\=sm\]\:h-8[data-size="sm"] {
    height: calc(var(--spacing) * 8);
  }

  :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
    color: color-mix(in srgb, hsl(var(--destructive)) 90%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
      color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
    }
  }

  :is(.\*\:data-\[slot\=block-selection\]\:left-2 > *)[data-slot="block-selection"] {
    left: calc(var(--spacing) * 2);
  }

  :is(.\*\*\:data-\[slot\=command-input-wrapper\]\:h-12 *)[data-slot="command-input-wrapper"] {
    height: calc(var(--spacing) * 12);
  }

  :is(.\*\*\:data-\[slot\=command-input-wrapper\]\:h-auto *)[data-slot="command-input-wrapper"] {
    height: auto;
  }

  :is(.\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  :is(.\*\:data-\[slot\=select-value\]\:flex > *)[data-slot="select-value"] {
    display: flex;
  }

  :is(.\*\:data-\[slot\=select-value\]\:items-center > *)[data-slot="select-value"] {
    align-items: center;
  }

  :is(.\*\:data-\[slot\=select-value\]\:gap-2 > *)[data-slot="select-value"] {
    gap: calc(var(--spacing) * 2);
  }

  .data-\[state\=active\]\:bg-background[data-state="active"] {
    background-color: var(--color-background);
  }

  .data-\[state\=active\]\:shadow-sm[data-state="active"] {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
    --tw-translate-x: calc(100% - 2px);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=checked\]\:border-primary[data-state="checked"] {
    border-color: var(--color-primary);
  }

  .data-\[state\=checked\]\:bg-accent[data-state="checked"] {
    background-color: var(--color-accent);
  }

  .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
    background-color: var(--color-primary);
  }

  .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
    color: var(--color-primary-foreground);
  }

  .data-\[state\=closed\]\:animate-collapsible-up[data-state="closed"] {
    animation: .2s ease-out collapsible-up;
  }

  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=closed\]\:opacity-0[data-state="closed"] {
    opacity: 0;
  }

  .data-\[state\=closed\]\:duration-300[data-state="closed"] {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
    --tw-exit-opacity: initial;
    --tw-exit-scale: initial;
    --tw-exit-rotate: initial;
    --tw-exit-translate-x: initial;
    --tw-exit-translate-y: initial;
    animation-name: exit;
    animation-duration: .15s;
  }

  .data-\[state\=closed\]\:duration-300[data-state="closed"] {
    animation-duration: .3s;
  }

  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
    --tw-exit-opacity: 0;
  }

  .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
    --tw-exit-translate-y: 100%;
  }

  .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
    --tw-exit-translate-x: -100%;
  }

  .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
    --tw-exit-translate-x: calc(1 / 2 * -100%);
  }

  .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
    --tw-exit-translate-x: 100%;
  }

  .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
    --tw-exit-translate-y: -100%;
  }

  .data-\[state\=closed\]\:slide-out-to-top-2[data-state="closed"] {
    --tw-exit-translate-y: calc(2 * var(--spacing) * -1);
  }

  .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
    --tw-exit-translate-y: calc(48% * -1);
  }

  .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
    --tw-exit-scale: .95;
  }

  .data-\[state\=on\]\:bg-accent[data-state="on"] {
    background-color: var(--color-accent);
  }

  .data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
    color: var(--color-accent-foreground);
  }

  .data-\[state\=open\]\:animate-collapsible-down[data-state="open"] {
    animation: .2s ease-out collapsible-down;
  }

  .data-\[state\=open\]\:animate-in[data-state="open"] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }

  .data-\[state\=open\]\:bg-accent[data-state="open"] {
    background-color: var(--color-accent);
  }

  .data-\[state\=open\]\:bg-secondary[data-state="open"] {
    background-color: var(--color-secondary);
  }

  .data-\[state\=open\]\:bg-sidebar-accent[data-state="open"] {
    background-color: hsl(var(--sidebar-accent));
  }

  .data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
    color: var(--color-accent-foreground);
  }

  .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
    color: var(--color-muted-foreground);
  }

  .data-\[state\=open\]\:text-sidebar-accent-foreground[data-state="open"] {
    color: hsl(var(--sidebar-accent-foreground));
  }

  .data-\[state\=open\]\:opacity-100[data-state="open"] {
    opacity: 1;
  }

  .data-\[state\=open\]\:duration-500[data-state="open"] {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .data-\[state\=open\]\:animate-in[data-state="open"] {
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial;
    animation-name: enter;
    animation-duration: .15s;
  }

  .data-\[state\=open\]\:duration-500[data-state="open"] {
    animation-duration: .5s;
  }

  .data-\[state\=open\]\:fade-in-0[data-state="open"] {
    --tw-enter-opacity: 0;
  }

  .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }

  .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
    --tw-enter-translate-x: -100%;
  }

  .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
    --tw-enter-translate-x: calc(1 / 2 * -100%);
  }

  .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
    --tw-enter-translate-x: 100%;
  }

  .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
    --tw-enter-translate-y: -100%;
  }

  .data-\[state\=open\]\:slide-in-from-top-2[data-state="open"] {
    --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
  }

  .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
    --tw-enter-translate-y: calc(48% * -1);
  }

  .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
    --tw-enter-scale: .95;
  }

  @media (hover: hover) {
    .data-\[state\=open\]\:hover\:bg-sidebar-accent[data-state="open"]:hover {
      background-color: hsl(var(--sidebar-accent));
    }

    .data-\[state\=open\]\:hover\:text-sidebar-accent-foreground[data-state="open"]:hover {
      color: hsl(var(--sidebar-accent-foreground));
    }
  }

  .data-\[state\=selected\]\:bg-muted[data-state="selected"] {
    background-color: var(--color-muted);
  }

  .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
    background-color: var(--color-input);
  }

  .data-\[type\=error\]\:text-red-600[data-type="error"] {
    color: var(--color-red-600);
  }

  .data-\[type\=success\]\:text-green-600[data-type="success"] {
    color: var(--color-green-600);
  }

  .data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
    color: var(--color-destructive);
  }

  .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
    background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
      background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
    }
  }

  .data-\[variant\=destructive\]\:focus\:text-destructive[data-variant="destructive"]:focus {
    color: var(--color-destructive);
  }

  @supports (backdrop-blur: var(--tw)) {
    .supports-backdrop-blur\:bg-background\/60 {
      background-color: color-mix(in srgb, hsl(var(--background)) 60%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .supports-backdrop-blur\:bg-background\/60 {
        background-color: color-mix(in oklab, var(--color-background) 60%, transparent);
      }
    }
  }

  @supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
    .supports-\[backdrop-filter\]\:bg-background\/60 {
      background-color: color-mix(in srgb, hsl(var(--background)) 60%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .supports-\[backdrop-filter\]\:bg-background\/60 {
        background-color: color-mix(in oklab, var(--color-background) 60%, transparent);
      }
    }

    .supports-\[backdrop-filter\]\:bg-background\/80 {
      background-color: color-mix(in srgb, hsl(var(--background)) 80%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .supports-\[backdrop-filter\]\:bg-background\/80 {
        background-color: color-mix(in oklab, var(--color-background) 80%, transparent);
      }
    }

    .supports-\[backdrop-filter\]\:bg-white\/60 {
      background-color: #fff9;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .supports-\[backdrop-filter\]\:bg-white\/60 {
        background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
      }
    }

    .supports-\[backdrop-filter\]\:backdrop-blur-md {
      --tw-backdrop-blur: blur(var(--blur-md));
      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    }
  }

  @media not all and (min-width: 1400px) {
    .max-\[1400px\]\:mt-10 {
      margin-top: calc(var(--spacing) * 10);
    }
  }

  @media not all and (min-width: 1250px) {
    .max-\[1250px\]\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media not all and (min-width: 1200px) {
    .max-\[1200px\]\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .max-\[1200px\]\:flex-col {
      flex-direction: column;
    }

    .max-\[1200px\]\:gap-0 {
      gap: calc(var(--spacing) * 0);
    }

    .max-\[1200px\]\:p-0 {
      padding: calc(var(--spacing) * 0);
    }
  }

  @media not all and (min-width: 1100px) {
    .max-\[1100px\]\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media not all and (min-width: 1000px) {
    .max-\[1000px\]\:mt-\[15px\] {
      margin-top: 15px;
    }

    .max-\[1000px\]\:mt-\[30px\] {
      margin-top: 30px;
    }

    .max-\[1000px\]\:w-full {
      width: 100%;
    }

    .max-\[1000px\]\:flex-col-reverse {
      flex-direction: column-reverse;
    }

    .max-\[1000px\]\:px-\[20px\] {
      padding-inline: 20px;
    }

    .max-\[1000px\]\:text-\[14px\] {
      font-size: 14px;
    }
  }

  @media not all and (min-width: 991px) {
    .max-\[991px\]\:static {
      position: static;
    }

    .max-\[991px\]\:z-auto {
      z-index: auto;
    }

    .max-\[991px\]\:min-h-\[calc\(100vh-4rem\)\] {
      min-height: calc(100vh - 4rem);
    }

    .max-\[991px\]\:w-auto {
      width: auto;
    }

    .max-\[991px\]\:overflow-hidden {
      overflow: hidden;
    }
  }

  @media not all and (min-width: 940px) {
    .max-\[940px\]\:mt-\[10px\] {
      margin-top: 10px;
    }

    .max-\[940px\]\:max-w-\[100vh\] {
      max-width: 100vh;
    }

    .max-\[940px\]\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media not all and (min-width: 900px) {
    .max-\[900px\]\:w-full {
      width: 100%;
    }
  }

  @media not all and (min-width: 768px) {
    .max-\[768px\]\:relative {
      position: relative;
    }

    .max-\[768px\]\:bottom-0 {
      bottom: calc(var(--spacing) * 0);
    }

    .max-\[768px\]\:left-0 {
      left: calc(var(--spacing) * 0);
    }

    .max-\[768px\]\:z-\[10\] {
      z-index: 10;
    }

    .max-\[768px\]\:mx-\[12px\] {
      margin-inline: 12px;
    }

    .max-\[768px\]\:block {
      display: block;
    }

    .max-\[768px\]\:w-full {
      width: 100%;
    }

    .max-\[768px\]\:max-w-\[100vw\] {
      max-width: 100vw;
    }

    .max-\[768px\]\:min-w-0 {
      min-width: calc(var(--spacing) * 0);
    }

    .max-\[768px\]\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }

    .max-\[768px\]\:text-\[18px\] {
      font-size: 18px;
    }
  }

  @media not all and (min-width: 767px) {
    .max-\[767px\]\:right-\[-40px\] {
      right: -40px;
    }

    .max-\[767px\]\:m-0 {
      margin: calc(var(--spacing) * 0);
    }

    .max-\[767px\]\:-mt-\[5px\] {
      margin-top: -5px;
    }

    .max-\[767px\]\:mt-\[25px\] {
      margin-top: 25px;
    }

    .max-\[767px\]\:mt-\[30px\] {
      margin-top: 30px;
    }

    .max-\[767px\]\:mt-\[41px\] {
      margin-top: 41px;
    }

    .max-\[767px\]\:mr-0 {
      margin-right: calc(var(--spacing) * 0);
    }

    .max-\[767px\]\:ml-0 {
      margin-left: calc(var(--spacing) * 0);
    }

    .max-\[767px\]\:flex {
      display: flex;
    }

    .max-\[767px\]\:hidden {
      display: none;
    }

    .max-\[767px\]\:h-\[30px\] {
      height: 30px;
    }

    .max-\[767px\]\:h-\[40px\] {
      height: 40px;
    }

    .max-\[767px\]\:h-\[60px\] {
      height: 60px;
    }

    .max-\[767px\]\:h-\[65px\] {
      height: 65px;
    }

    .max-\[767px\]\:w-\[30px\] {
      width: 30px;
    }

    .max-\[767px\]\:w-\[40px\] {
      width: 40px;
    }

    .max-\[767px\]\:w-\[65px\] {
      width: 65px;
    }

    .max-\[767px\]\:w-\[95dvw\] {
      width: 95dvw;
    }

    .max-\[767px\]\:max-w-\[85px\] {
      max-width: 85px;
    }

    .max-\[767px\]\:max-w-\[95\%\] {
      max-width: 95%;
    }

    .max-\[767px\]\:min-w-\[85px\] {
      min-width: 85px;
    }

    .max-\[767px\]\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .max-\[767px\]\:items-center {
      align-items: center;
    }

    .max-\[767px\]\:gap-\[20px\] {
      gap: 20px;
    }

    .max-\[767px\]\:p-\[10px\] {
      padding: 10px;
    }

    .max-\[767px\]\:px-\[12px\] {
      padding-inline: 12px;
    }

    .max-\[767px\]\:px-\[15px\] {
      padding-inline: 15px;
    }

    .max-\[767px\]\:py-\[2px\] {
      padding-block: 2px;
    }

    .max-\[767px\]\:py-\[3px\] {
      padding-block: 3px;
    }

    .max-\[767px\]\:pt-\[41px\] {
      padding-top: 41px;
    }

    .max-\[767px\]\:text-\[0\.5rem\] {
      font-size: .5rem;
    }

    .max-\[767px\]\:text-\[0\.8rem\] {
      font-size: .8rem;
    }

    .max-\[767px\]\:text-\[10px\] {
      font-size: 10px;
    }

    .max-\[767px\]\:text-\[14px\] {
      font-size: 14px;
    }

    .max-\[767px\]\:text-\[24px\] {
      font-size: 24px;
    }
  }

  @media not all and (min-width: 560px) {
    .max-\[560px\]\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .max-\[560px\]\:gap-\[10px\] {
      gap: 10px;
    }
  }

  @media not all and (min-width: 460px) {
    .max-\[460px\]\:w-\[90vw\] {
      width: 90vw;
    }

    .max-\[460px\]\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }

  @media not all and (min-width: 440px) {
    .max-\[440px\]\:mt-\[100px\] {
      margin-top: 100px;
    }
  }

  @media not all and (min-width: 385px) {
    .max-\[385px\]\:w-\[88vw\] {
      width: 88vw;
    }
  }

  @media not all and (min-width: 100px) {
    .max-\[100px\]\:text-\[12px\] {
      font-size: 12px;
    }
  }

  @media not all and (min-width: 64rem) {
    .max-lg\:mr-0 {
      margin-right: calc(var(--spacing) * 0);
    }

    .max-lg\:ml-0 {
      margin-left: calc(var(--spacing) * 0);
    }
  }

  @media not all and (min-width: 40rem) {
    .max-sm\:hidden {
      display: none;
    }
  }

  @media (min-width: 40rem) {
    .sm\:-top-2 {
      top: calc(var(--spacing) * -2);
    }

    .sm\:-top-4 {
      top: calc(var(--spacing) * -4);
    }

    .sm\:-top-7 {
      top: calc(var(--spacing) * -7);
    }

    .sm\:-right-36 {
      right: calc(var(--spacing) * -36);
    }

    .sm\:right-2 {
      right: calc(var(--spacing) * 2);
    }

    .sm\:right-4 {
      right: calc(var(--spacing) * 4);
    }

    .sm\:bottom-6 {
      bottom: calc(var(--spacing) * 6);
    }

    .sm\:left-11 {
      left: calc(var(--spacing) * 11);
    }

    .sm\:left-16 {
      left: calc(var(--spacing) * 16);
    }

    .sm\:left-\[34px\] {
      left: 34px;
    }

    .sm\:left-\[97px\] {
      left: 97px;
    }

    .sm\:order-1 {
      order: 1;
    }

    .sm\:order-2 {
      order: 2;
    }

    .sm\:mx-8 {
      margin-inline: calc(var(--spacing) * 8);
    }

    .sm\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .sm\:mt-4 {
      margin-top: calc(var(--spacing) * 4);
    }

    .sm\:mt-5 {
      margin-top: calc(var(--spacing) * 5);
    }

    .sm\:mt-6 {
      margin-top: calc(var(--spacing) * 6);
    }

    .sm\:mt-8 {
      margin-top: calc(var(--spacing) * 8);
    }

    .sm\:mt-10 {
      margin-top: calc(var(--spacing) * 10);
    }

    .sm\:mt-12 {
      margin-top: calc(var(--spacing) * 12);
    }

    .sm\:mr-1 {
      margin-right: calc(var(--spacing) * 1);
    }

    .sm\:mb-3 {
      margin-bottom: calc(var(--spacing) * 3);
    }

    .sm\:mb-\[20px\] {
      margin-bottom: 20px;
    }

    .sm\:ml-auto {
      margin-left: auto;
    }

    .sm\:block {
      display: block;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:hidden {
      display: none;
    }

    .sm\:inline {
      display: inline;
    }

    .sm\:size-3\.5 {
      width: calc(var(--spacing) * 3.5);
      height: calc(var(--spacing) * 3.5);
    }

    .sm\:size-5 {
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
    }

    .sm\:size-10 {
      width: calc(var(--spacing) * 10);
      height: calc(var(--spacing) * 10);
    }

    .sm\:h-1 {
      height: calc(var(--spacing) * 1);
    }

    .sm\:h-2\.5 {
      height: calc(var(--spacing) * 2.5);
    }

    .sm\:h-3\.5 {
      height: calc(var(--spacing) * 3.5);
    }

    .sm\:h-4 {
      height: calc(var(--spacing) * 4);
    }

    .sm\:h-5 {
      height: calc(var(--spacing) * 5);
    }

    .sm\:h-6 {
      height: calc(var(--spacing) * 6);
    }

    .sm\:h-7 {
      height: calc(var(--spacing) * 7);
    }

    .sm\:h-8 {
      height: calc(var(--spacing) * 8);
    }

    .sm\:h-9 {
      height: calc(var(--spacing) * 9);
    }

    .sm\:h-10 {
      height: calc(var(--spacing) * 10);
    }

    .sm\:h-12 {
      height: calc(var(--spacing) * 12);
    }

    .sm\:h-16 {
      height: calc(var(--spacing) * 16);
    }

    .sm\:h-20 {
      height: calc(var(--spacing) * 20);
    }

    .sm\:h-24 {
      height: calc(var(--spacing) * 24);
    }

    .sm\:h-48 {
      height: calc(var(--spacing) * 48);
    }

    .sm\:h-auto {
      height: auto;
    }

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

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

    .sm\:max-h-\[288px\] {
      max-height: 288px;
    }

    .sm\:max-h-\[340px\] {
      max-height: 340px;
    }

    .sm\:min-h-\[10rem\] {
      min-height: 10rem;
    }

    .sm\:min-h-\[90px\] {
      min-height: 90px;
    }

    .sm\:min-h-\[220px\] {
      min-height: 220px;
    }

    .sm\:w-1 {
      width: calc(var(--spacing) * 1);
    }

    .sm\:w-2\.5 {
      width: calc(var(--spacing) * 2.5);
    }

    .sm\:w-3\.5 {
      width: calc(var(--spacing) * 3.5);
    }

    .sm\:w-4 {
      width: calc(var(--spacing) * 4);
    }

    .sm\:w-5 {
      width: calc(var(--spacing) * 5);
    }

    .sm\:w-6 {
      width: calc(var(--spacing) * 6);
    }

    .sm\:w-7 {
      width: calc(var(--spacing) * 7);
    }

    .sm\:w-8 {
      width: calc(var(--spacing) * 8);
    }

    .sm\:w-9 {
      width: calc(var(--spacing) * 9);
    }

    .sm\:w-12 {
      width: calc(var(--spacing) * 12);
    }

    .sm\:w-16 {
      width: calc(var(--spacing) * 16);
    }

    .sm\:w-20 {
      width: calc(var(--spacing) * 20);
    }

    .sm\:w-24 {
      width: calc(var(--spacing) * 24);
    }

    .sm\:w-44 {
      width: calc(var(--spacing) * 44);
    }

    .sm\:w-48 {
      width: calc(var(--spacing) * 48);
    }

    .sm\:w-64 {
      width: calc(var(--spacing) * 64);
    }

    .sm\:w-72 {
      width: calc(var(--spacing) * 72);
    }

    .sm\:w-\[700px\] {
      width: 700px;
    }

    .sm\:w-auto {
      width: auto;
    }

    .sm\:max-w-\[85\%\] {
      max-width: 85%;
    }

    .sm\:max-w-\[160px\] {
      max-width: 160px;
    }

    .sm\:max-w-\[200px\] {
      max-width: 200px;
    }

    .sm\:max-w-\[420px\] {
      max-width: 420px;
    }

    .sm\:max-w-\[425px\] {
      max-width: 425px;
    }

    .sm\:max-w-\[540px\] {
      max-width: 540px;
    }

    .sm\:max-w-\[700px\] {
      max-width: 700px;
    }

    .sm\:max-w-\[min\(fit-content\,80\%\)\] {
      max-width: min(fit-content, 80%);
    }

    .sm\:max-w-lg {
      max-width: var(--container-lg);
    }

    .sm\:max-w-sm {
      max-width: var(--container-sm);
    }

    .sm\:min-w-\[150px\] {
      min-width: 150px;
    }

    .sm\:min-w-\[300px\] {
      min-width: 300px;
    }

    .sm\:flex-1 {
      flex: 1;
    }

    .sm\:translate-y-0 {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

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

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

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:flex-row-reverse {
      flex-direction: row-reverse;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }

    .sm\:justify-end {
      justify-content: flex-end;
    }

    .sm\:gap-0\.5 {
      gap: calc(var(--spacing) * .5);
    }

    .sm\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }

    .sm\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .sm\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }

    .sm\:gap-14 {
      gap: calc(var(--spacing) * 14);
    }

    :where(.sm\:space-y-1 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.sm\:space-y-4 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.sm\:space-y-6 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.sm\:space-y-8 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.sm\:space-x-2 > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }

    .sm\:rounded-lg {
      border-radius: var(--radius-lg);
    }

    .sm\:p-2 {
      padding: calc(var(--spacing) * 2);
    }

    .sm\:p-3 {
      padding: calc(var(--spacing) * 3);
    }

    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .sm\:p-5 {
      padding: calc(var(--spacing) * 5);
    }

    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .sm\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .sm\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .sm\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }

    .sm\:px-1\.5 {
      padding-inline: calc(var(--spacing) * 1.5);
    }

    .sm\:px-2 {
      padding-inline: calc(var(--spacing) * 2);
    }

    .sm\:px-2\.5 {
      padding-inline: calc(var(--spacing) * 2.5);
    }

    .sm\:px-3 {
      padding-inline: calc(var(--spacing) * 3);
    }

    .sm\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .sm\:px-14 {
      padding-inline: calc(var(--spacing) * 14);
    }

    .sm\:px-24 {
      padding-inline: calc(var(--spacing) * 24);
    }

    .sm\:px-\[max\(64px\,calc\(50\%-350px\)\)\] {
      padding-inline: max(64px, 50% - 350px);
    }

    .sm\:py-1\.5 {
      padding-block: calc(var(--spacing) * 1.5);
    }

    .sm\:py-2 {
      padding-block: calc(var(--spacing) * 2);
    }

    .sm\:py-4 {
      padding-block: calc(var(--spacing) * 4);
    }

    .sm\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }

    .sm\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }

    .sm\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }

    .sm\:pt-0 {
      padding-top: calc(var(--spacing) * 0);
    }

    .sm\:pt-2 {
      padding-top: calc(var(--spacing) * 2);
    }

    .sm\:pt-4 {
      padding-top: calc(var(--spacing) * 4);
    }

    .sm\:pt-5 {
      padding-top: calc(var(--spacing) * 5);
    }

    .sm\:pt-\[41px\] {
      padding-top: 41px;
    }

    .sm\:pr-\[47px\] {
      padding-right: 47px;
    }

    .sm\:pb-4 {
      padding-bottom: calc(var(--spacing) * 4);
    }

    .sm\:pl-2 {
      padding-left: calc(var(--spacing) * 2);
    }

    .sm\:pl-\[21px\] {
      padding-left: 21px;
    }

    .sm\:pl-\[33px\] {
      padding-left: 33px;
    }

    .sm\:pl-\[90px\] {
      padding-left: 90px;
    }

    .sm\:text-left {
      text-align: left;
    }

    .sm\:text-start {
      text-align: start;
    }

    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .sm\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .sm\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .sm\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .sm\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .sm\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .sm\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }

    .sm\:text-\[0\.65rem\] {
      font-size: .65rem;
    }

    .sm\:text-\[11px\] {
      font-size: 11px;
    }

    .sm\:text-\[15px\] {
      font-size: 15px;
    }

    .sm\:text-clip {
      text-overflow: clip;
    }

    .sm\:opacity-0 {
      opacity: 0;
    }

    .sm\:opacity-30 {
      opacity: .3;
    }

    .sm\:opacity-50 {
      opacity: .5;
    }

    @media (hover: hover) {
      .sm\:group-hover\:opacity-100:is(:where(.group):hover *), .sm\:group-hover\/container\:opacity-100:is(:where(.group\/container):hover *) {
        opacity: 1;
      }
    }
  }

  @media (min-width: 48rem) {
    .md\:sr-only {
      clip-path: inset(50%);
      white-space: nowrap;
      border-width: 0;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      position: absolute;
      overflow: hidden;
    }

    .md\:-top-4 {
      top: calc(var(--spacing) * -4);
    }

    .md\:-right-16 {
      right: calc(var(--spacing) * -16);
    }

    .md\:left-\[-10px\] {
      left: -10px;
    }

    .md\:order-1 {
      order: 1;
    }

    .md\:order-2 {
      order: 2;
    }

    .md\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }

    .md\:mx-8 {
      margin-inline: calc(var(--spacing) * 8);
    }

    .md\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .md\:mt-16 {
      margin-top: calc(var(--spacing) * 16);
    }

    .md\:mr-0 {
      margin-right: calc(var(--spacing) * 0);
    }

    .md\:mb-12 {
      margin-bottom: calc(var(--spacing) * 12);
    }

    .md\:ml-0 {
      margin-left: calc(var(--spacing) * 0);
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:hidden {
      display: none;
    }

    .md\:h-8 {
      height: calc(var(--spacing) * 8);
    }

    .md\:h-14 {
      height: calc(var(--spacing) * 14);
    }

    .md\:h-16 {
      height: calc(var(--spacing) * 16);
    }

    .md\:h-20 {
      height: calc(var(--spacing) * 20);
    }

    .md\:h-24 {
      height: calc(var(--spacing) * 24);
    }

    .md\:h-32 {
      height: calc(var(--spacing) * 32);
    }

    .md\:h-40 {
      height: calc(var(--spacing) * 40);
    }

    .md\:h-48 {
      height: calc(var(--spacing) * 48);
    }

    .md\:h-56 {
      height: calc(var(--spacing) * 56);
    }

    .md\:h-\[34px\] {
      height: 34px;
    }

    .md\:h-\[90\%\] {
      height: 90%;
    }

    .md\:h-fit {
      height: fit-content;
    }

    .md\:w-8 {
      width: calc(var(--spacing) * 8);
    }

    .md\:w-14 {
      width: calc(var(--spacing) * 14);
    }

    .md\:w-16 {
      width: calc(var(--spacing) * 16);
    }

    .md\:w-20 {
      width: calc(var(--spacing) * 20);
    }

    .md\:w-24 {
      width: calc(var(--spacing) * 24);
    }

    .md\:w-32 {
      width: calc(var(--spacing) * 32);
    }

    .md\:w-36 {
      width: calc(var(--spacing) * 36);
    }

    .md\:w-56 {
      width: calc(var(--spacing) * 56);
    }

    .md\:w-\[80\%\] {
      width: 80%;
    }

    .md\:w-\[92\%\] {
      width: 92%;
    }

    .md\:w-\[280px\] {
      width: 280px;
    }

    .md\:max-w-3xl {
      max-width: var(--container-3xl);
    }

    .md\:max-w-\[80\%\] {
      max-width: 80%;
    }

    .md\:max-w-\[180px\] {
      max-width: 180px;
    }

    .md\:max-w-\[250px\] {
      max-width: 250px;
    }

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

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

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

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:justify-between {
      justify-content: space-between;
    }

    .md\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .md\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .md\:gap-10 {
      gap: calc(var(--spacing) * 10);
    }

    .md\:rounded-3xl {
      border-radius: var(--radius-3xl);
    }

    .md\:border {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }

    .md\:border-l {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }

    .md\:p-2 {
      padding: calc(var(--spacing) * 2);
    }

    .md\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .md\:p-20 {
      padding: calc(var(--spacing) * 20);
    }

    .md\:p-\[10px\] {
      padding: 10px;
    }

    .md\:px-2 {
      padding-inline: calc(var(--spacing) * 2);
    }

    .md\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .md\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .md\:px-20 {
      padding-inline: calc(var(--spacing) * 20);
    }

    .md\:pb-4 {
      padding-bottom: calc(var(--spacing) * 4);
    }

    .md\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .md\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .md\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .md\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }

    .md\:text-8xl {
      font-size: var(--text-8xl);
      line-height: var(--tw-leading, var(--text-8xl--line-height));
    }

    .md\:text-9xl {
      font-size: var(--text-9xl);
      line-height: var(--tw-leading, var(--text-9xl--line-height));
    }

    .md\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .md\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .md\:text-\[1\.7rem\] {
      font-size: 1.7rem;
    }

    .md\:text-\[22px\] {
      font-size: 22px;
    }

    .md\:opacity-0 {
      opacity: 0;
    }

    .md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.peer)[data-variant="inset"] ~ *) {
      margin: calc(var(--spacing) * 2);
    }

    .md\:peer-data-\[variant\=inset\]\:ms-0:is(:where(.peer)[data-variant="inset"] ~ *) {
      margin-inline-start: calc(var(--spacing) * 0);
    }

    .md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant="inset"] ~ *) {
      margin-left: calc(var(--spacing) * 0);
    }

    .md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.peer)[data-variant="inset"] ~ *) {
      border-radius: calc(var(--radius)  + 4px);
    }

    .md\:peer-data-\[variant\=inset\]\:shadow:is(:where(.peer)[data-variant="inset"] ~ *), .md\:peer-data-\[variant\=inset\]\:shadow-sm:is(:where(.peer)[data-variant="inset"] ~ *) {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ms-2:is(:where(.peer)[data-variant="inset"] ~ *):is(:where(.peer)[data-state="collapsed"] ~ *) {
      margin-inline-start: calc(var(--spacing) * 2);
    }

    .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2:is(:where(.peer)[data-state="collapsed"] ~ *):is(:where(.peer)[data-variant="inset"] ~ *) {
      margin-left: calc(var(--spacing) * 2);
    }
  }

  .after\:md\:hidden:after {
    content: var(--tw-content);
  }

  @media (min-width: 48rem) {
    .after\:md\:hidden:after {
      display: none;
    }

    .md\:after\:hidden:after {
      content: var(--tw-content);
      display: none;
    }
  }

  @media (min-width: 64rem) {
    .lg\:visible {
      visibility: visible;
    }

    .lg\:absolute {
      position: absolute;
    }

    .lg\:relative {
      position: relative;
    }

    .lg\:sticky {
      position: sticky;
    }

    .lg\:top-0 {
      top: calc(var(--spacing) * 0);
    }

    .lg\:top-full {
      top: 100%;
    }

    .lg\:left-0 {
      left: calc(var(--spacing) * 0);
    }

    .lg\:z-10 {
      z-index: 10;
    }

    .lg\:order-1 {
      order: 1;
    }

    .lg\:order-2 {
      order: 2;
    }

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

    .lg\:-mt-22 {
      margin-top: calc(var(--spacing) * -22);
    }

    .lg\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .lg\:mb-4 {
      margin-bottom: calc(var(--spacing) * 4);
    }

    .lg\:mb-8 {
      margin-bottom: calc(var(--spacing) * 8);
    }

    .lg\:box-border {
      box-sizing: border-box;
    }

    .lg\:block {
      display: block;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:inline {
      display: inline;
    }

    .lg\:h-10 {
      height: calc(var(--spacing) * 10);
    }

    .lg\:h-24 {
      height: calc(var(--spacing) * 24);
    }

    .lg\:h-28 {
      height: calc(var(--spacing) * 28);
    }

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

    .lg\:min-h-\[12rem\] {
      min-height: 12rem;
    }

    .lg\:min-h-\[260px\] {
      min-height: 260px;
    }

    .lg\:min-h-\[calc\(100vh-32px-40px-32px\)\] {
      min-height: calc(100vh - 104px);
    }

    .lg\:w-10 {
      width: calc(var(--spacing) * 10);
    }

    .lg\:w-24 {
      width: calc(var(--spacing) * 24);
    }

    .lg\:w-28 {
      width: calc(var(--spacing) * 28);
    }

    .lg\:max-w-4xl {
      max-width: var(--container-4xl);
    }

    .lg\:max-w-full {
      max-width: 100%;
    }

    .lg\:translate-x-0 {
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

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

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

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

    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:items-center {
      align-items: center;
    }

    .lg\:justify-between {
      justify-content: space-between;
    }

    .lg\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .lg\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .lg\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }

    :where(.lg\:space-x-0 > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 0) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-x-reverse)));
    }

    .lg\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .lg\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .lg\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .lg\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }

    .lg\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .lg\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .lg\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }

    .lg\:py-5 {
      padding-block: calc(var(--spacing) * 5);
    }

    .lg\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }

    .lg\:pt-6 {
      padding-top: calc(var(--spacing) * 6);
    }

    .lg\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .lg\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .lg\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .lg\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .lg\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .lg\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .lg\:opacity-0 {
      opacity: 0;
    }

    .lg\:opacity-100 {
      opacity: 1;
    }

    @media (hover: hover) {
      .lg\:group-hover\:opacity-100:is(:where(.group):hover *) {
        opacity: 1;
      }
    }
  }

  @media (min-width: 80rem) {
    .xl\:max-h-\[75vh\] {
      max-height: 75vh;
    }

    .xl\:max-w-5xl {
      max-width: var(--container-5xl);
    }

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

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

    .xl\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }

  .rtl\:translate-x-1\/2:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  :where([data-side="left"]) .rtl\:in-data-\[side\=left\]\:cursor-e-resize:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    cursor: e-resize;
  }

  :where([data-side="right"]) .rtl\:in-data-\[side\=right\]\:cursor-w-resize:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    cursor: w-resize;
  }

  .rtl\:data-\[state\=checked\]\:-translate-x-\[calc\(100\%-2px\)\]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)[data-state="checked"] {
    --tw-translate-x: calc(calc(100% - 2px) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .dark\:block:is(.dark *) {
    display: block;
  }

  .dark\:hidden:is(.dark *) {
    display: none;
  }

  .dark\:border-0:is(.dark *) {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .dark\:border-blue-800:is(.dark *) {
    border-color: var(--color-blue-800);
  }

  .dark\:border-gray-600:is(.dark *) {
    border-color: var(--color-gray-600);
  }

  .dark\:border-gray-700:is(.dark *) {
    border-color: var(--color-gray-700);
  }

  .dark\:border-input:is(.dark *) {
    border-color: var(--color-input);
  }

  .dark\:border-neutral-800:is(.dark *) {
    border-color: var(--color-neutral-800);
  }

  .dark\:border-purple-800:is(.dark *) {
    border-color: var(--color-purple-800);
  }

  .dark\:border-transparent\!:is(.dark *) {
    border-color: #0000 !important;
  }

  .dark\:border-white\/5:is(.dark *) {
    border-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-white\/5:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .dark\:border-zinc-700:is(.dark *) {
    border-color: var(--color-zinc-700);
  }

  .dark\:border-zinc-800:is(.dark *) {
    border-color: var(--color-zinc-800);
  }

  .dark\:bg-amber-900\/20:is(.dark *) {
    background-color: #7b330633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-900\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-amber-900) 20%, transparent);
    }
  }

  .dark\:bg-amber-900\/30:is(.dark *) {
    background-color: #7b33064d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-900\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-amber-900) 30%, transparent);
    }
  }

  .dark\:bg-background:is(.dark *) {
    background-color: var(--color-background);
  }

  .dark\:bg-blue-600:is(.dark *) {
    background-color: var(--color-blue-600);
  }

  .dark\:bg-blue-900\/30:is(.dark *) {
    background-color: #1c398e4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-blue-900\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
    }
  }

  .dark\:bg-blue-950\/20:is(.dark *) {
    background-color: #16245633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-blue-950\/20:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-blue-950) 20%, transparent);
    }
  }

  .dark\:bg-destructive\/60:is(.dark *) {
    background-color: color-mix(in srgb, hsl(var(--destructive)) 60%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-destructive\/60:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-destructive) 60%, transparent);
    }
  }

  .dark\:bg-emerald-900\/30:is(.dark *) {
    background-color: #004e3b4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-emerald-900\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);
    }
  }

  .dark\:bg-gray-600:is(.dark *) {
    background-color: var(--color-gray-600);
  }

  .dark\:bg-gray-700:is(.dark *) {
    background-color: var(--color-gray-700);
  }

  .dark\:bg-gray-800:is(.dark *) {
    background-color: var(--color-gray-800);
  }

  .dark\:bg-gray-900:is(.dark *) {
    background-color: var(--color-gray-900);
  }

  .dark\:bg-green-500\/70:is(.dark *) {
    background-color: #a8e8a8b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-green-500\/70:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-green-500) 70%, transparent);
    }
  }

  .dark\:bg-green-900\/30:is(.dark *) {
    background-color: #0d542b4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-green-900\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent);
    }
  }

  .dark\:bg-input\/30:is(.dark *) {
    background-color: color-mix(in srgb, hsl(var(--input)) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-input\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
    }
  }

  .dark\:bg-muted:is(.dark *) {
    background-color: var(--color-muted);
  }

  .dark\:bg-neutral-900\/60:is(.dark *) {
    background-color: #17171799;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-neutral-900\/60:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-neutral-900) 60%, transparent);
    }
  }

  .dark\:bg-orange-900\/30:is(.dark *) {
    background-color: #7e2a0c4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-orange-900\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-orange-900) 30%, transparent);
    }
  }

  .dark\:bg-purple-900\/30:is(.dark *) {
    background-color: #59168b4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-purple-900\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-purple-900) 30%, transparent);
    }
  }

  .dark\:bg-red-500\/70:is(.dark *) {
    background-color: #fb2c36b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-red-500\/70:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-red-500) 70%, transparent);
    }
  }

  .dark\:bg-red-900\/30:is(.dark *) {
    background-color: #82181a4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-red-900\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
    }
  }

  .dark\:bg-red-950\/50:is(.dark *) {
    background-color: #46080980;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-red-950\/50:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-red-950) 50%, transparent);
    }
  }

  .dark\:bg-slate-700:is(.dark *) {
    background-color: var(--color-slate-700);
  }

  .dark\:bg-slate-800:is(.dark *) {
    background-color: var(--color-slate-800);
  }

  .dark\:bg-slate-900:is(.dark *) {
    background-color: var(--color-slate-900);
  }

  .dark\:bg-slate-900\/80:is(.dark *) {
    background-color: #0f172bcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-slate-900\/80:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent);
    }
  }

  .dark\:bg-transparent:is(.dark *) {
    background-color: #0000;
  }

  .dark\:bg-violet-600:is(.dark *) {
    background-color: var(--color-violet-600);
  }

  .dark\:bg-yellow-900\/30:is(.dark *) {
    background-color: #733e0a4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-yellow-900\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-yellow-900) 30%, transparent);
    }
  }

  .dark\:bg-zinc-800:is(.dark *) {
    background-color: var(--color-zinc-800);
  }

  .dark\:bg-zinc-900:is(.dark *) {
    background-color: var(--color-zinc-900);
  }

  .dark\:bg-zinc-950:is(.dark *) {
    background-color: var(--color-zinc-950);
  }

  .dark\:from-blue-600:is(.dark *) {
    --tw-gradient-from: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .dark\:from-neutral-900:is(.dark *) {
    --tw-gradient-from: var(--color-neutral-900);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .dark\:from-purple-900\/30:is(.dark *) {
    --tw-gradient-from: #59168b4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:from-purple-900\/30:is(.dark *) {
      --tw-gradient-from: color-mix(in oklab, var(--color-purple-900) 30%, transparent);
    }
  }

  .dark\:from-purple-900\/30:is(.dark *) {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .dark\:via-neutral-950:is(.dark *) {
    --tw-gradient-via: var(--color-neutral-950);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .dark\:to-black:is(.dark *) {
    --tw-gradient-to: var(--color-black);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .dark\:to-blue-800:is(.dark *) {
    --tw-gradient-to: var(--color-blue-800);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .dark\:to-indigo-900\/30:is(.dark *) {
    --tw-gradient-to: #312c854d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:to-indigo-900\/30:is(.dark *) {
      --tw-gradient-to: color-mix(in oklab, var(--color-indigo-900) 30%, transparent);
    }
  }

  .dark\:to-indigo-900\/30:is(.dark *) {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .dark\:text-amber-400:is(.dark *) {
    color: var(--color-amber-400);
  }

  .dark\:text-blue-300:is(.dark *) {
    color: var(--color-blue-300);
  }

  .dark\:text-blue-400:is(.dark *) {
    color: var(--color-blue-400);
  }

  .dark\:text-emerald-400:is(.dark *) {
    color: var(--color-emerald-400);
  }

  .dark\:text-foreground:is(.dark *) {
    color: var(--color-foreground);
  }

  .dark\:text-gray-100:is(.dark *) {
    color: var(--color-gray-100);
  }

  .dark\:text-gray-200:is(.dark *) {
    color: var(--color-gray-200);
  }

  .dark\:text-gray-300:is(.dark *) {
    color: var(--color-gray-300);
  }

  .dark\:text-gray-400:is(.dark *) {
    color: var(--color-gray-400);
  }

  .dark\:text-gray-500:is(.dark *) {
    color: var(--color-gray-500);
  }

  .dark\:text-gray-600:is(.dark *) {
    color: var(--color-gray-600);
  }

  .dark\:text-green-300:is(.dark *) {
    color: var(--color-green-300);
  }

  .dark\:text-green-400:is(.dark *) {
    color: var(--color-green-400);
  }

  .dark\:text-muted-foreground:is(.dark *) {
    color: var(--color-muted-foreground);
  }

  .dark\:text-neutral-100:is(.dark *) {
    color: var(--color-neutral-100);
  }

  .dark\:text-neutral-300:is(.dark *) {
    color: var(--color-neutral-300);
  }

  .dark\:text-neutral-400:is(.dark *) {
    color: var(--color-neutral-400);
  }

  .dark\:text-orange-400:is(.dark *) {
    color: var(--color-orange-400);
  }

  .dark\:text-orange-500:is(.dark *) {
    color: var(--color-orange-500);
  }

  .dark\:text-purple-300:is(.dark *) {
    color: var(--color-purple-300);
  }

  .dark\:text-purple-400:is(.dark *) {
    color: var(--color-purple-400);
  }

  .dark\:text-red-300:is(.dark *) {
    color: var(--color-red-300);
  }

  .dark\:text-red-500:is(.dark *) {
    color: var(--color-red-500);
  }

  .dark\:text-slate-200:is(.dark *) {
    color: var(--color-slate-200);
  }

  .dark\:text-slate-300:is(.dark *) {
    color: var(--color-slate-300);
  }

  .dark\:text-slate-400:is(.dark *) {
    color: var(--color-slate-400);
  }

  .dark\:text-violet-400:is(.dark *) {
    color: var(--color-violet-400);
  }

  .dark\:text-white:is(.dark *) {
    color: var(--color-white);
  }

  .dark\:text-yellow-400:is(.dark *) {
    color: var(--color-yellow-400);
  }

  .dark\:text-zinc-50:is(.dark *) {
    color: var(--color-zinc-50);
  }

  .dark\:text-zinc-400:is(.dark *) {
    color: var(--color-zinc-400);
  }

  .dark\:shadow-\[rgba\(255\,_255\,_255\,_0\.1\)_0px_0\.5px_0px_0px_inset\,_rgb\(26\,_29\,_30\)_0px_1px_5px_0px_inset\,_rgb\(76\,_81\,_85\)_0px_0px_0px_0\.5px\,_rgb\(76\,_81\,_85\)_0px_2px_1px_-1px\,_rgb\(76\,_81\,_85\)_0px_1px_0px_0px\]:is(.dark *) {
    --tw-shadow-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:shadow-\[rgba\(255\,_255\,_255\,_0\.1\)_0px_0\.5px_0px_0px_inset\,_rgb\(26\,_29\,_30\)_0px_1px_5px_0px_inset\,_rgb\(76\,_81\,_85\)_0px_0px_0px_0\.5px\,_rgb\(76\,_81\,_85\)_0px_2px_1px_-1px\,_rgb\(76\,_81\,_85\)_0px_1px_0px_0px\]:is(.dark *) {
      --tw-shadow-color: color-mix(in oklab, #ffffff1a 0px .5px 0px 0px inset, #1a1d1e 0px 1px 5px 0px inset, #4c5155 0px 0px 0px .5px, #4c5155 0px 2px 1px -1px, #4c5155 0px 1px 0px 0px var(--tw-shadow-alpha), transparent);
    }
  }

  .dark\:shadow-black\/30:is(.dark *) {
    --tw-shadow-color: #0000004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:shadow-black\/30:is(.dark *) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .dark\:shadow-purple-900\/30:is(.dark *) {
    --tw-shadow-color: #59168b4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:shadow-purple-900\/30:is(.dark *) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-900) 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .dark\:shadow-zinc-800:is(.dark *) {
    --tw-shadow-color: oklch(27.4% .006 286.033);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:shadow-zinc-800:is(.dark *) {
      --tw-shadow-color: color-mix(in oklab, var(--color-zinc-800) var(--tw-shadow-alpha), transparent);
    }
  }

  .dark\:prose-invert:is(.dark *) {
    --tw-prose-body: var(--tw-prose-invert-body);
    --tw-prose-headings: var(--tw-prose-invert-headings);
    --tw-prose-lead: var(--tw-prose-invert-lead);
    --tw-prose-links: var(--tw-prose-invert-links);
    --tw-prose-bold: var(--tw-prose-invert-bold);
    --tw-prose-counters: var(--tw-prose-invert-counters);
    --tw-prose-bullets: var(--tw-prose-invert-bullets);
    --tw-prose-hr: var(--tw-prose-invert-hr);
    --tw-prose-quotes: var(--tw-prose-invert-quotes);
    --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
    --tw-prose-captions: var(--tw-prose-invert-captions);
    --tw-prose-kbd: var(--tw-prose-invert-kbd);
    --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
    --tw-prose-code: var(--tw-prose-invert-code);
    --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
    --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
    --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
    --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
  }

  @media (hover: hover) {
    .dark\:hover\:bg-accent\/50:is(.dark *):hover {
      background-color: color-mix(in srgb, hsl(var(--accent)) 50%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-accent\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
      }
    }

    .dark\:hover\:bg-blue-950\/30:is(.dark *):hover {
      background-color: #1624564d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-blue-950\/30:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--color-blue-950) 30%, transparent);
      }
    }

    .dark\:hover\:bg-gray-600:is(.dark *):hover {
      background-color: var(--color-gray-600);
    }

    .dark\:hover\:bg-gray-700:is(.dark *):hover {
      background-color: var(--color-gray-700);
    }

    .dark\:hover\:bg-gray-800:is(.dark *):hover {
      background-color: var(--color-gray-800);
    }

    .dark\:hover\:bg-input\/50:is(.dark *):hover {
      background-color: color-mix(in srgb, hsl(var(--input)) 50%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-input\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--color-input) 50%, transparent);
      }
    }

    .dark\:hover\:bg-zinc-700:is(.dark *):hover {
      background-color: var(--color-zinc-700);
    }

    .dark\:hover\:text-accent-foreground:is(.dark *):hover {
      color: var(--color-accent-foreground);
    }

    .dark\:hover\:text-gray-300:is(.dark *):hover {
      color: var(--color-gray-300);
    }

    .dark\:hover\:text-slate-200:is(.dark *):hover {
      color: var(--color-slate-200);
    }

    .dark\:hover\:text-zinc-200:is(.dark *):hover {
      color: var(--color-zinc-200);
    }
  }

  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
    --tw-ring-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
    }
  }

  .dark\:focus-visible\:ring-offset-neutral-900:is(.dark *):focus-visible {
    --tw-ring-offset-color: var(--color-neutral-900);
  }

  .dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:is(.dark *):has([data-slot][aria-invalid="true"]) {
    --tw-ring-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:is(.dark *):has([data-slot][aria-invalid="true"]) {
      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
    }
  }

  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
    --tw-ring-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
    }
  }

  .dark\:data-\[active-item\=true\]\:bg-gray-800:is(.dark *)[data-active-item="true"] {
    background-color: var(--color-gray-800);
  }

  .dark\:data-\[active\=true\]\:aria-invalid\:ring-destructive\/40:is(.dark *)[data-active="true"][aria-invalid="true"] {
    --tw-ring-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:data-\[active\=true\]\:aria-invalid\:ring-destructive\/40:is(.dark *)[data-active="true"][aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
    }
  }

  .dark\:data-\[state\=active\]\:border-input:is(.dark *)[data-state="active"] {
    border-color: var(--color-input);
  }

  .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
    background-color: color-mix(in srgb, hsl(var(--input)) 30%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
      background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
    }
  }

  .dark\:data-\[state\=active\]\:text-foreground:is(.dark *)[data-state="active"] {
    color: var(--color-foreground);
  }

  .dark\:data-\[state\=checked\]\:bg-primary:is(.dark *)[data-state="checked"] {
    background-color: var(--color-primary);
  }

  .dark\:data-\[state\=checked\]\:bg-primary-foreground:is(.dark *)[data-state="checked"] {
    background-color: var(--color-primary-foreground);
  }

  .dark\:data-\[state\=unchecked\]\:bg-foreground:is(.dark *)[data-state="unchecked"] {
    background-color: var(--color-foreground);
  }

  .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(.dark *)[data-state="unchecked"] {
    background-color: color-mix(in srgb, hsl(var(--input)) 80%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(.dark *)[data-state="unchecked"] {
      background-color: color-mix(in oklab, var(--color-input) 80%, transparent);
    }
  }

  .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus {
    background-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus {
      background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
    }
  }

  @media print {
    .print\:hidden {
      display: none;
    }

    .print\:break-inside-avoid {
      break-inside: avoid;
    }

    .print\:placeholder\:text-transparent::placeholder {
      color: #0000;
    }
  }

  .\[\&_\.katex-display\]\:my-0 .katex-display {
    margin-block: calc(var(--spacing) * 0);
  }

  .\[\&_\.katex-display\]\:my-0\! .katex-display {
    margin-block: calc(var(--spacing) * 0) !important;
  }

  .\[\&_\.react-tweet-theme\]\:my-0 .react-tweet-theme {
    margin-block: calc(var(--spacing) * 0);
  }

  .\[\&_\.react-tweet-theme\]\:ring-2 .react-tweet-theme {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .\[\&_\.react-tweet-theme\]\:ring-ring .react-tweet-theme {
    --tw-ring-color: var(--color-ring);
  }

  .\[\&_\.react-tweet-theme\]\:ring-offset-2 .react-tweet-theme {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .\[\&_\>_\.lty-playbtn\]\:absolute > .lty-playbtn {
    position: absolute;
  }

  .\[\&_\>_\.lty-playbtn\]\:top-1\/2 > .lty-playbtn {
    top: 50%;
  }

  .\[\&_\>_\.lty-playbtn\]\:left-1\/2 > .lty-playbtn {
    left: 50%;
  }

  .\[\&_\>_\.lty-playbtn\]\:z-1 > .lty-playbtn {
    z-index: 1;
  }

  .\[\&_\>_\.lty-playbtn\]\:h-\[46px\] > .lty-playbtn {
    height: 46px;
  }

  .\[\&_\>_\.lty-playbtn\]\:w-\[70px\] > .lty-playbtn {
    width: 70px;
  }

  .\[\&_\>_\.lty-playbtn\]\:\[transform\:translate3d\(-50\%\,-50\%\,0\)\] > .lty-playbtn {
    transform: translate3d(-50%, -50%, 0);
  }

  .\[\&_\>_\.lty-playbtn\]\:rounded-\[14\%\] > .lty-playbtn {
    border-radius: 14%;
  }

  .\[\&_\>_\.lty-playbtn\]\:bg-\[\#212121\] > .lty-playbtn {
    background-color: #212121;
  }

  .\[\&_\>_\.lty-playbtn\]\:opacity-80 > .lty-playbtn {
    opacity: .8;
  }

  .\[\&_\>_\.lty-playbtn\]\:\[transition\:all_0\.2s_cubic-bezier\(0\,_0\,_0\.2\,_1\)\] > .lty-playbtn {
    transition: all .2s cubic-bezier(0, 0, .2, 1);
  }

  .\[\&_\>_\.lty-playbtn\]\:before\:absolute > .lty-playbtn:before {
    content: var(--tw-content);
    position: absolute;
  }

  .\[\&_\>_\.lty-playbtn\]\:before\:top-1\/2 > .lty-playbtn:before {
    content: var(--tw-content);
    top: 50%;
  }

  .\[\&_\>_\.lty-playbtn\]\:before\:left-1\/2 > .lty-playbtn:before {
    content: var(--tw-content);
    left: 50%;
  }

  .\[\&_\>_\.lty-playbtn\]\:before\:\[transform\:translate3d\(-50\%\,-50\%\,0\)\] > .lty-playbtn:before {
    content: var(--tw-content);
    transform: translate3d(-50%, -50%, 0);
  }

  .\[\&_\>_\.lty-playbtn\]\:before\:border-y-\[11px\] > .lty-playbtn:before {
    content: var(--tw-content);
    border-block-style: var(--tw-border-style);
    border-block-width: 11px;
  }

  .\[\&_\>_\.lty-playbtn\]\:before\:border-r-0 > .lty-playbtn:before {
    content: var(--tw-content);
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
  }

  .\[\&_\>_\.lty-playbtn\]\:before\:border-l-\[19px\] > .lty-playbtn:before {
    content: var(--tw-content);
    border-left-style: var(--tw-border-style);
    border-left-width: 19px;
  }

  .\[\&_\>_\.lty-playbtn\]\:before\:border-\[transparent_transparent_transparent_\#fff\] > .lty-playbtn:before {
    content: var(--tw-content);
    border-color: #0000 #0000 #0000 #fff;
  }

  .\[\&_\>_\.lty-playbtn\]\:before\:content-\[\"\"\] > .lty-playbtn:before {
    --tw-content: "";
    content: var(--tw-content);
  }

  .\[\&_\>_iframe\]\:absolute > iframe {
    position: absolute;
  }

  .\[\&_\>_iframe\]\:top-0 > iframe {
    top: calc(var(--spacing) * 0);
  }

  .\[\&_\>_iframe\]\:left-0 > iframe {
    left: calc(var(--spacing) * 0);
  }

  .\[\&_\>_iframe\]\:size-full > iframe {
    width: 100%;
    height: 100%;
  }

  .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
    color: var(--color-muted-foreground);
  }

  .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~ [cmdk-group] {
    padding-top: calc(var(--spacing) * 0);
  }

  .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
    height: calc(var(--spacing) * 5);
  }

  .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
    width: calc(var(--spacing) * 5);
  }

  .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
    height: calc(var(--spacing) * 12);
  }

  .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
    padding-inline: calc(var(--spacing) * 2);
  }

  .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
    padding-block: calc(var(--spacing) * 3);
  }

  .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
    height: calc(var(--spacing) * 5);
  }

  .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
    width: calc(var(--spacing) * 5);
  }

  .\[\&_button\:first-child\]\:rounded-bl-xl button:first-child {
    border-bottom-left-radius: calc(var(--radius)  + 4px);
  }

  .\[\&_code\]\:font-mono code {
    font-family: var(--font-mono);
  }

  .\[\&_code\]\:text-sm code {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .\[\&_code\]\:break-words code {
    overflow-wrap: break-word;
  }

  .\[\&_code\]\:whitespace-pre-wrap code {
    white-space: pre-wrap;
  }

  .\[\&_img\]\:size-full img {
    width: 100%;
    height: 100%;
  }

  .\[\&_img\]\:object-cover img {
    object-fit: cover;
  }

  .\[\&_p\]\:leading-relaxed p {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .\[\&_pre\]\:max-w-full pre {
    max-width: 100%;
  }

  .\[\&_pre\]\:overflow-x-auto pre {
    overflow-x: auto;
  }

  .\[\&_strong\]\:font-bold strong {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:size-3 svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .\[\&_svg\]\:size-4 svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_svg\]\:size-5 svg {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .\[\&_svg\]\:size-6 svg {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .\[\&_svg\]\:h-5 svg {
    height: calc(var(--spacing) * 5);
  }

  .\[\&_svg\]\:w-5 svg {
    width: calc(var(--spacing) * 5);
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_svg\]\:text-muted-foreground svg {
    color: var(--color-muted-foreground);
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*="text-"]) {
    color: var(--color-muted-foreground);
  }

  .\[\&_table\]\:w-full table {
    width: 100%;
  }

  .\[\&_tr\]\:border-b tr {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .\[\&_tr\:last-child\]\:border-0 tr:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .\[\&\+\[data-slot\=item-content\]\]\:flex-none + [data-slot="item-content"] {
    flex: none;
  }

  .\[\&\.lyt-activated\]\:cursor-\[unset\].lyt-activated {
    cursor: unset;
  }

  .\[\&\.lyt-activated\]\:before\:pointer-events-none.lyt-activated:before {
    content: var(--tw-content);
    pointer-events: none;
  }

  .\[\&\.lyt-activated\]\:before\:absolute.lyt-activated:before {
    content: var(--tw-content);
    position: absolute;
  }

  .\[\&\.lyt-activated\]\:before\:top-0.lyt-activated:before {
    content: var(--tw-content);
    top: calc(var(--spacing) * 0);
  }

  .\[\&\.lyt-activated\]\:before\:h-\[60px\].lyt-activated:before {
    content: var(--tw-content);
    height: 60px;
  }

  .\[\&\.lyt-activated\]\:before\:w-full.lyt-activated:before {
    content: var(--tw-content);
    width: 100%;
  }

  .\[\&\.lyt-activated\]\:before\:bg-\[url\(data\:image\/png\;base64\,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT\+OqFAAAAdklEQVQoz42QQQ7AIAgEF\/T\/D\+kbq\/RWAlnQyyazA4aoAB4FsBSA\/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg\=\=\)\].lyt-activated:before {
    content: var(--tw-content);
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==");
  }

  .\[\&\.lyt-activated\]\:before\:bg-top.lyt-activated:before {
    content: var(--tw-content);
    background-position: top;
  }

  .\[\&\.lyt-activated\]\:before\:bg-repeat-x.lyt-activated:before {
    content: var(--tw-content);
    background-repeat: repeat-x;
  }

  .\[\&\.lyt-activated\]\:before\:pb-\[50px\].lyt-activated:before {
    content: var(--tw-content);
    padding-bottom: 50px;
  }

  .\[\&\.lyt-activated\]\:before\:opacity-0.lyt-activated:before {
    content: var(--tw-content);
    opacity: 0;
  }

  .\[\&\.lyt-activated\]\:before\:\[transition\:all_0\.2s_cubic-bezier\(0\,_0\,_0\.2\,_1\)\].lyt-activated:before {
    content: var(--tw-content);
    transition: all .2s cubic-bezier(0, 0, .2, 1);
  }

  .\[\&\.lyt-activated_\>_\.lty-playbtn\]\:pointer-events-none.lyt-activated > .lty-playbtn {
    pointer-events: none;
  }

  .\[\&\.lyt-activated_\>_\.lty-playbtn\]\:opacity-0\!.lyt-activated > .lty-playbtn {
    opacity: 0 !important;
  }

  .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
    display: none;
  }

  .\[\&\:\:-webkit-scrollbar\]\:w-4::-webkit-scrollbar {
    width: calc(var(--spacing) * 4);
  }

  .\[\&\:\:-webkit-scrollbar-button\]\:hidden::-webkit-scrollbar-button {
    display: none;
  }

  .\[\&\:\:-webkit-scrollbar-button\]\:size-0::-webkit-scrollbar-button {
    width: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 0);
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:min-h-11::-webkit-scrollbar-thumb {
    min-height: calc(var(--spacing) * 11);
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb {
    border-radius: 3.40282e38px;
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:border-4::-webkit-scrollbar-thumb {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:border-solid::-webkit-scrollbar-thumb {
    --tw-border-style: solid;
    border-style: solid;
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:border-popover::-webkit-scrollbar-thumb {
    border-color: var(--color-popover);
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-muted::-webkit-scrollbar-thumb {
    background-color: var(--color-muted);
  }

  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-clip-padding::-webkit-scrollbar-thumb {
    background-clip: padding-box;
  }

  @media (hover: hover) {
    .\[\&\:\:-webkit-scrollbar-thumb\]\:hover\:bg-muted-foreground\/25::-webkit-scrollbar-thumb:hover {
      background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 25%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .\[\&\:\:-webkit-scrollbar-thumb\]\:hover\:bg-muted-foreground\/25::-webkit-scrollbar-thumb:hover {
        background-color: color-mix(in oklab, var(--color-muted-foreground) 25%, transparent);
      }
    }
  }

  .focus\:\[\&\:\:placeholder\]\:opacity-0:focus::placeholder {
    opacity: 0;
  }

  .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected="true"] button {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .\[\&\:has\(\[role\=option\]\)\]\:block:has([role="option"]) {
    display: block;
  }

  .\[\&\:hover_\>_\.lty-playbtn\]\:bg-\[red\]:hover > .lty-playbtn {
    background-color: red;
  }

  .\[\&\:hover_\>_\.lty-playbtn\]\:opacity-100:hover > .lty-playbtn {
    opacity: 1;
  }

  .\[\.border-b\]\:pb-3.border-b {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .\[\.border-b\]\:pb-6.border-b {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .\[\.border-t\]\:pt-3.border-t {
    padding-top: calc(var(--spacing) * 3);
  }

  .\[\.border-t\]\:pt-6.border-t {
    padding-top: calc(var(--spacing) * 6);
  }

  :is(.\*\*\:\[\.hljs-addition\]\:bg-\[\#f0fff4\] *).hljs-addition {
    background-color: #f0fff4;
  }

  :is(.\*\*\:\[\.hljs-addition\]\:text-\[\#22863a\] *).hljs-addition {
    color: #22863a;
  }

  :is(.dark\:\*\*\:\[\.hljs-addition\]\:bg-\[\#3c5743\]:is(.dark *) *).hljs-addition {
    background-color: #3c5743;
  }

  :is(.dark\:\*\*\:\[\.hljs-addition\]\:text-\[\#ceead5\]:is(.dark *) *).hljs-addition {
    color: #ceead5;
  }

  :is(.\*\*\:\[\.hljs-attr\,\.hljs-attribute\,\.hljs-literal\,\.hljs-meta\,\.hljs-number\,\.hljs-operator\,\.hljs-selector-attr\,\.hljs-selector-class\,\.hljs-selector-id\,\.hljs-variable\]\:text-\[\#005cc5\] *):is(.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-variable) {
    color: #005cc5;
  }

  :is(.dark\:\*\*\:\[\.hljs-attr\,\.hljs-attribute\,\.hljs-literal\,\.hljs-meta\,\.hljs-number\,\.hljs-operator\,\.hljs-selector-attr\,\.hljs-selector-class\,\.hljs-selector-id\,\.hljs-variable\]\:text-\[\#6596cf\]:is(.dark *) *):is(.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-variable) {
    color: #6596cf;
  }

  :is(.\*\*\:\[\.hljs-built\\\\\\\\_in\,\.hljs-symbol\]\:text-\[\#e36209\] *):is(.hljs-built\\_in, .hljs-symbol) {
    color: #e36209;
  }

  :is(.dark\:\*\*\:\[\.hljs-built\\\\\\\\_in\,\.hljs-symbol\]\:text-\[\#c3854e\]:is(.dark *) *):is(.hljs-built\\_in, .hljs-symbol) {
    color: #c3854e;
  }

  :is(.\*\*\:\[\.hljs-bullet\]\:text-\[\#735c0f\] *).hljs-bullet {
    color: #735c0f;
  }

  :is(.\*\*\:\[\.hljs-comment\,\.hljs-code\,\.hljs-formula\]\:text-\[\#6a737d\] *):is(.hljs-comment, .hljs-code, .hljs-formula), :is(.dark\:\*\*\:\[\.hljs-comment\,\.hljs-code\,\.hljs-formula\]\:text-\[\#6a737d\]:is(.dark *) *):is(.hljs-comment, .hljs-code, .hljs-formula) {
    color: #6a737d;
  }

  :is(.\*\*\:\[\.hljs-deletion\]\:bg-\[\#ffeef0\] *).hljs-deletion {
    background-color: #ffeef0;
  }

  :is(.\*\*\:\[\.hljs-deletion\]\:text-\[\#b31d28\] *).hljs-deletion {
    color: #b31d28;
  }

  :is(.dark\:\*\*\:\[\.hljs-deletion\]\:bg-\[\#473235\]:is(.dark *) *).hljs-deletion {
    background-color: #473235;
  }

  :is(.dark\:\*\*\:\[\.hljs-deletion\]\:text-\[\#e7c7cb\]:is(.dark *) *).hljs-deletion {
    color: #e7c7cb;
  }

  :is(.\*\*\:\[\.hljs-emphasis\]\:italic *).hljs-emphasis {
    font-style: italic;
  }

  :is(.\*\*\:\[\.hljs-keyword\,\.hljs-doctag\,\.hljs-template-tag\,\.hljs-template-variable\,\.hljs-type\,\.hljs-variable\.language\\\\\\\\_\]\:text-\[\#d73a49\] *):is(.hljs-keyword, .hljs-doctag, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language\\_) {
    color: #d73a49;
  }

  :is(.dark\:\*\*\:\[\.hljs-keyword\,\.hljs-doctag\,\.hljs-template-tag\,\.hljs-template-variable\,\.hljs-type\,\.hljs-variable\.language\\\\\\\\_\]\:text-\[\#ee6960\]:is(.dark *) *):is(.hljs-keyword, .hljs-doctag, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language\\_) {
    color: #ee6960;
  }

  :is(.\*\*\:\[\.hljs-name\,\.hljs-quote\,\.hljs-selector-tag\,\.hljs-selector-pseudo\]\:text-\[\#22863a\] *):is(.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo) {
    color: #22863a;
  }

  :is(.dark\:\*\*\:\[\.hljs-name\,\.hljs-quote\,\.hljs-selector-tag\,\.hljs-selector-pseudo\]\:text-\[\#36a84f\]:is(.dark *) *):is(.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo) {
    color: #36a84f;
  }

  :is(.\*\*\:\[\.hljs-regexp\,\.hljs-string\,\.hljs-meta_\.hljs-string\]\:text-\[\#032f62\] *):is(.hljs-regexp, .hljs-string, .hljs-meta .hljs-string) {
    color: #032f62;
  }

  :is(.dark\:\*\*\:\[\.hljs-regexp\,\.hljs-string\,\.hljs-meta_\.hljs-string\]\:text-\[\#3593ff\]:is(.dark *) *):is(.hljs-regexp, .hljs-string, .hljs-meta .hljs-string) {
    color: #3593ff;
  }

  :is(.\*\*\:\[\.hljs-section\]\:font-bold *).hljs-section {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  :is(.\*\*\:\[\.hljs-section\]\:text-\[\#005cc5\] *).hljs-section {
    color: #005cc5;
  }

  :is(.dark\:\*\*\:\[\.hljs-section\]\:text-\[\#61a5f2\]:is(.dark *) *).hljs-section {
    color: #61a5f2;
  }

  :is(.\*\*\:\[\.hljs-strong\]\:font-bold *).hljs-strong {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  :is(.\*\*\:\[\.hljs-title\,\.hljs-title\.class\\\\\\\\_\,\.hljs-title\.class\\\\\\\\_\.inherited\\\\\\\\_\\\\\\\\_\,\.hljs-title\.function\\\\\\\\_\]\:text-\[\#6f42c1\] *):is(.hljs-title, .hljs-title.class\\_, .hljs-title.class\\_.inherited\\_\\_, .hljs-title.function\\_) {
    color: #6f42c1;
  }

  :is(.dark\:\*\*\:\[\.hljs-title\,\.hljs-title\.class\\\\\\\\_\,\.hljs-title\.class\\\\\\\\_\.inherited\\\\\\\\_\\\\\\\\_\,\.hljs-title\.function\\\\\\\\_\]\:text-\[\#a77bfa\]:is(.dark *) *):is(.hljs-title, .hljs-title.class\\_, .hljs-title.class\\_.inherited\\_\\_, .hljs-title.function\\_) {
    color: #a77bfa;
  }

  :is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_next > svg), :is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_previous > svg) {
    rotate: 180deg;
  }

  .\[a\]\:transition-colors:is(a) {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  @media (hover: hover) {
    .\[a\]\:hover\:bg-accent\/50:is(a):hover {
      background-color: color-mix(in srgb, hsl(var(--accent)) 50%, transparent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .\[a\]\:hover\:bg-accent\/50:is(a):hover {
        background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
      }
    }
  }

  :is(.\*\:first\:\[span\]\:hidden > *):first-child:is(span) {
    display: none;
  }

  :is(.\*\:\[span\]\:last\:flex > *):is(span):last-child {
    display: flex;
  }

  :is(.\*\:\[span\]\:last\:items-center > *):is(span):last-child {
    align-items: center;
  }

  :is(.\*\:\[span\]\:last\:gap-2 > *):is(span):last-child {
    gap: calc(var(--spacing) * 2);
  }

  :is(.\*\:\[svg\]\:text-muted-foreground > *):is(svg) {
    color: var(--color-muted-foreground);
  }

  :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive[data-variant="destructive"] > *):is(svg) {
    color: var(--color-destructive) !important;
  }

  .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected="true"] button {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .\[\&\>\*\]\:focus-visible\:relative > :focus-visible {
    position: relative;
  }

  .\[\&\>\*\]\:focus-visible\:z-10 > :focus-visible {
    z-index: 10;
  }

  .\[\&\>\*\:first-child\]\:mt-0 > :first-child {
    margin-top: calc(var(--spacing) * 0);
  }

  .\[\&\>\*\:last-child\]\:mb-0 > :last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none > :not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-md > :not(:first-child) {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none > :not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .\[\&\>\*\:not\(\:first-child\)\]\:border-t-0 > :not(:first-child) {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .\[\&\>\*\:not\(\:first-child\)\]\:border-l-0 > :not(:first-child) {
    border-left-style: var(--tw-border-style);
    border-left-width: 0;
  }

  .\[\&\>\*\:not\(\:last-child\)\]\:rounded-r-md > :not(:last-child) {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .\[\&\>\*\:not\(\:last-child\)\]\:rounded-r-none > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none > :not(:last-child) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-md:has(:is(select[aria-hidden="true"]:last-child)) > [data-slot="select-trigger"]:last-of-type {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit > [data-slot="select-trigger"]:not([class*="w-"]) {
    width: fit-content;
  }

  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {
    --tw-translate-y: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>a\]\:underline > a {
    text-decoration-line: underline;
  }

  .\[\&\>a\]\:underline-offset-4 > a {
    text-underline-offset: 4px;
  }

  .\[\&\>a\:hover\]\:text-primary > a:hover {
    color: var(--color-primary);
  }

  .\[\&\>button\]\:hidden > button {
    display: none;
  }

  .\[\&\>button\]\:rounded-md > button {
    border-radius: var(--radius-md);
  }

  .\[\&\>button\]\:border-none\! > button {
    --tw-border-style: none !important;
    border-style: none !important;
  }

  .\[\&\>button\]\:bg-transparent\! > button {
    background-color: #0000 !important;
  }

  @media (hover: hover) {
    .\[\&\>button\]\:hover\:bg-secondary\! > button:hover {
      background-color: var(--color-secondary) !important;
    }
  }

  .\[\&\>div\]\:max-w-\[80\%\] > div {
    max-width: 80%;
  }

  .\[\&\>div\]\:pb-0 > div {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .\[\&\>div\>div\[style\]\]\:\!block > div > div[style] {
    display: block !important;
  }

  .\[\&\>img\]\:rounded-full > img {
    border-radius: 3.40282e38px;
  }

  .\[\&\>img\]\:bg-background > img {
    background-color: var(--color-background);
  }

  .\[\&\>img\]\:p-px > img {
    padding: 1px;
  }

  .\[\&\>img\]\:ring-1 > img {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .\[\&\>img\]\:ring-border > img {
    --tw-ring-color: var(--color-border);
  }

  .\[\&\>input\]\:flex-1 > input {
    flex: 1;
  }

  .has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has( > [data-align="block-end"]) > input {
    padding-top: calc(var(--spacing) * 3);
  }

  .has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has( > [data-align="block-start"]) > input {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-2:has( > [data-align="inline-end"]) > input {
    padding-right: calc(var(--spacing) * 2);
  }

  .has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-2:has( > [data-align="inline-start"]) > input {
    padding-left: calc(var(--spacing) * 2);
  }

  .\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\] > kbd {
    border-radius: calc(var(--radius)  - 5px);
  }

  .\[\&\>pre\]\:m-0 > pre {
    margin: calc(var(--spacing) * 0);
  }

  .\[\&\>pre\]\:bg-background\! > pre {
    background-color: var(--color-background) !important;
  }

  .\[\&\>pre\]\:p-4 > pre {
    padding: calc(var(--spacing) * 4);
  }

  .\[\&\>pre\]\:text-sm > pre {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .\[\&\>pre\]\:text-foreground\! > pre {
    color: var(--color-foreground) !important;
  }

  .\[\&\>span\]\:line-clamp-1 > span {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .\[\&\>span\]\:text-xs > span {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\[\&\>span\]\:opacity-70 > span {
    opacity: .7;
  }

  .\[\&\>span\:last-child\]\:truncate > span:last-child {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\[\&\>svg\]\:size-2\.5 > svg {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .\[\&\>svg\]\:size-3 > svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:size-3\.5 > svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&\>svg\]\:size-4 > svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&\>svg\]\:shrink-0 > svg {
    flex-shrink: 0;
  }

  .\[\&\>svg\]\:translate-y-0\.5 > svg {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .\[\&\>svg\]\:text-current > svg {
    color: currentColor;
  }

  .\[\&\>svg\]\:text-muted-foreground > svg {
    color: var(--color-muted-foreground);
  }

  .\[\&\>svg\]\:text-sidebar-accent-foreground > svg {
    color: hsl(var(--sidebar-accent-foreground));
  }

  .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 > svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 > svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .\[\&\[data-state\=open\]\>div\>div\>svg\]\:rotate-180[data-state="open"] > div > div > svg {
    rotate: 180deg;
  }

  [data-side="left"] .\[\[data-side\=left\]_\&\]\:cursor-w-resize {
    cursor: w-resize;
  }

  [data-side="left"][data-collapsible="offcanvas"] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-end-2 {
    inset-inline-end: calc(var(--spacing) * -2);
  }

  [data-side="left"][data-collapsible="offcanvas"] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
    right: calc(var(--spacing) * -2);
  }

  [data-side="left"][data-state="collapsed"] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
    cursor: e-resize;
  }

  [data-side="left"][data-state="collapsed"] .rtl\:\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    cursor: w-resize;
  }

  [data-side="right"] .\[\[data-side\=right\]_\&\]\:cursor-e-resize {
    cursor: e-resize;
  }

  [data-side="right"][data-collapsible="offcanvas"] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-start-2 {
    inset-inline-start: calc(var(--spacing) * -2);
  }

  [data-side="right"][data-collapsible="offcanvas"] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
    left: calc(var(--spacing) * -2);
  }

  [data-side="right"][data-state="collapsed"] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
    cursor: w-resize;
  }

  [data-side="right"][data-state="collapsed"] .rtl\:\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    cursor: e-resize;
  }

  [data-slot="card-content"] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent, [data-slot="popover-content"] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
    background-color: #0000;
  }
}

@font-face {
  font-family: KaTeX_AMS;
  font-style: normal;
  font-weight: 400;
  src: url("/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2") format("woff2"), url("/assets/KaTeX_AMS-Regular-DMm9YOAa.woff") format("woff"), url("/assets/KaTeX_AMS-Regular-DRggAlZN.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 700;
  src: url("/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2") format("woff2"), url("/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff") format("woff"), url("/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 400;
  src: url("/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2") format("woff2"), url("/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff") format("woff"), url("/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 700;
  src: url("/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2") format("woff2"), url("/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff") format("woff"), url("/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 400;
  src: url("/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2") format("woff2"), url("/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff") format("woff"), url("/assets/KaTeX_Fraktur-Regular-CB_wures.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 700;
  src: url("/assets/KaTeX_Main-Bold-Cx986IdX.woff2") format("woff2"), url("/assets/KaTeX_Main-Bold-Jm3AIy58.woff") format("woff"), url("/assets/KaTeX_Main-Bold-waoOVXN0.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 700;
  src: url("/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2") format("woff2"), url("/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff") format("woff"), url("/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 400;
  src: url("/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2") format("woff2"), url("/assets/KaTeX_Main-Italic-BMLOBm91.woff") format("woff"), url("/assets/KaTeX_Main-Italic-3WenGoN9.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 400;
  src: url("/assets/KaTeX_Main-Regular-B22Nviop.woff2") format("woff2"), url("/assets/KaTeX_Main-Regular-Dr94JaBh.woff") format("woff"), url("/assets/KaTeX_Main-Regular-ypZvNtVU.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
  src: url("/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2") format("woff2"), url("/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff") format("woff"), url("/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 400;
  src: url("/assets/KaTeX_Math-Italic-t53AETM-.woff2") format("woff2"), url("/assets/KaTeX_Math-Italic-DA0__PXp.woff") format("woff"), url("/assets/KaTeX_Math-Italic-flOr_0UB.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_SansSerif;
  font-style: normal;
  font-weight: 700;
  src: url("/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2") format("woff2"), url("/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff") format("woff"), url("/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_SansSerif;
  font-style: italic;
  font-weight: 400;
  src: url("/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2") format("woff2"), url("/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff") format("woff"), url("/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_SansSerif;
  font-style: normal;
  font-weight: 400;
  src: url("/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2") format("woff2"), url("/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff") format("woff"), url("/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Script;
  font-style: normal;
  font-weight: 400;
  src: url("/assets/KaTeX_Script-Regular-D3wIWfF6.woff2") format("woff2"), url("/assets/KaTeX_Script-Regular-D5yQViql.woff") format("woff"), url("/assets/KaTeX_Script-Regular-C5JkGWo-.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Size1;
  font-style: normal;
  font-weight: 400;
  src: url("/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2") format("woff2"), url("/assets/KaTeX_Size1-Regular-C195tn64.woff") format("woff"), url("/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Size2;
  font-style: normal;
  font-weight: 400;
  src: url("/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2") format("woff2"), url("/assets/KaTeX_Size2-Regular-oD1tc_U0.woff") format("woff"), url("/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Size3;
  font-style: normal;
  font-weight: 400;
  src: url("data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC") format("woff2"), url("/assets/KaTeX_Size3-Regular-CTq5MqoE.woff") format("woff"), url("/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Size4;
  font-style: normal;
  font-weight: 400;
  src: url("/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2") format("woff2"), url("/assets/KaTeX_Size4-Regular-BF-4gkZK.woff") format("woff"), url("/assets/KaTeX_Size4-Regular-DWFBv043.ttf") format("truetype");
}

@font-face {
  font-family: KaTeX_Typewriter;
  font-style: normal;
  font-weight: 400;
  src: url("/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2") format("woff2"), url("/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff") format("woff"), url("/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf") format("truetype");
}

.katex {
  text-indent: 0;
  text-rendering: auto;
  font: 1.21em / 1.2 KaTeX_Main, Times New Roman, serif;
}

.katex * {
  border-color: currentColor;
  -ms-high-contrast-adjust: none !important;
}

.katex .katex-version:after {
  content: "0.16.22";
}

.katex .katex-mathml {
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.katex .katex-html > .newline {
  display: block;
}

.katex .base {
  white-space: nowrap;
  width: min-content;
  position: relative;
}

.katex .base, .katex .strut {
  display: inline-block;
}

.katex .textbf {
  font-weight: 700;
}

.katex .textit {
  font-style: italic;
}

.katex .textrm {
  font-family: KaTeX_Main;
}

.katex .textsf {
  font-family: KaTeX_SansSerif;
}

.katex .texttt {
  font-family: KaTeX_Typewriter;
}

.katex .mathnormal {
  font-family: KaTeX_Math;
  font-style: italic;
}

.katex .mathit {
  font-family: KaTeX_Main;
  font-style: italic;
}

.katex .mathrm {
  font-style: normal;
}

.katex .mathbf {
  font-family: KaTeX_Main;
  font-weight: 700;
}

.katex .boldsymbol {
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
}

.katex .amsrm, .katex .mathbb, .katex .textbb {
  font-family: KaTeX_AMS;
}

.katex .mathcal {
  font-family: KaTeX_Caligraphic;
}

.katex .mathfrak, .katex .textfrak {
  font-family: KaTeX_Fraktur;
}

.katex .mathboldfrak, .katex .textboldfrak {
  font-family: KaTeX_Fraktur;
  font-weight: 700;
}

.katex .mathtt {
  font-family: KaTeX_Typewriter;
}

.katex .mathscr, .katex .textscr {
  font-family: KaTeX_Script;
}

.katex .mathsf, .katex .textsf {
  font-family: KaTeX_SansSerif;
}

.katex .mathboldsf, .katex .textboldsf {
  font-family: KaTeX_SansSerif;
  font-weight: 700;
}

.katex .mathitsf, .katex .mathsfit, .katex .textitsf {
  font-family: KaTeX_SansSerif;
  font-style: italic;
}

.katex .mainrm {
  font-family: KaTeX_Main;
  font-style: normal;
}

.katex .vlist-t {
  border-collapse: collapse;
  table-layout: fixed;
  display: inline-table;
}

.katex .vlist-r {
  display: table-row;
}

.katex .vlist {
  vertical-align: bottom;
  display: table-cell;
  position: relative;
}

.katex .vlist > span {
  height: 0;
  display: block;
  position: relative;
}

.katex .vlist > span > span {
  display: inline-block;
}

.katex .vlist > span > .pstrut {
  width: 0;
  overflow: hidden;
}

.katex .vlist-t2 {
  margin-right: -2px;
}

.katex .vlist-s {
  vertical-align: bottom;
  width: 2px;
  min-width: 2px;
  font-size: 1px;
  display: table-cell;
}

.katex .vbox {
  flex-direction: column;
  align-items: baseline;
  display: inline-flex;
}

.katex .hbox {
  width: 100%;
}

.katex .hbox, .katex .thinbox {
  flex-direction: row;
  display: inline-flex;
}

.katex .thinbox {
  width: 0;
  max-width: 0;
}

.katex .msupsub {
  text-align: left;
}

.katex .mfrac > span > span {
  text-align: center;
}

.katex .mfrac .frac-line {
  border-bottom-style: solid;
  width: 100%;
  display: inline-block;
}

.katex .hdashline, .katex .hline, .katex .mfrac .frac-line, .katex .overline .overline-line, .katex .rule, .katex .underline .underline-line {
  min-height: 1px;
}

.katex .mspace {
  display: inline-block;
}

.katex .clap, .katex .llap, .katex .rlap {
  width: 0;
  position: relative;
}

.katex .clap > .inner, .katex .llap > .inner, .katex .rlap > .inner {
  position: absolute;
}

.katex .clap > .fix, .katex .llap > .fix, .katex .rlap > .fix {
  display: inline-block;
}

.katex .llap > .inner {
  right: 0;
}

.katex .clap > .inner, .katex .rlap > .inner {
  left: 0;
}

.katex .clap > .inner > span {
  margin-left: -50%;
  margin-right: 50%;
}

.katex .rule {
  border: 0 solid;
  display: inline-block;
  position: relative;
}

.katex .hline, .katex .overline .overline-line, .katex .underline .underline-line {
  border-bottom-style: solid;
  width: 100%;
  display: inline-block;
}

.katex .hdashline {
  border-bottom-style: dashed;
  width: 100%;
  display: inline-block;
}

.katex .sqrt > .root {
  margin-left: .277778em;
  margin-right: -.555556em;
}

.katex .fontsize-ensurer.reset-size1.size1, .katex .sizing.reset-size1.size1 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size1.size2, .katex .sizing.reset-size1.size2 {
  font-size: 1.2em;
}

.katex .fontsize-ensurer.reset-size1.size3, .katex .sizing.reset-size1.size3 {
  font-size: 1.4em;
}

.katex .fontsize-ensurer.reset-size1.size4, .katex .sizing.reset-size1.size4 {
  font-size: 1.6em;
}

.katex .fontsize-ensurer.reset-size1.size5, .katex .sizing.reset-size1.size5 {
  font-size: 1.8em;
}

.katex .fontsize-ensurer.reset-size1.size6, .katex .sizing.reset-size1.size6 {
  font-size: 2em;
}

.katex .fontsize-ensurer.reset-size1.size7, .katex .sizing.reset-size1.size7 {
  font-size: 2.4em;
}

.katex .fontsize-ensurer.reset-size1.size8, .katex .sizing.reset-size1.size8 {
  font-size: 2.88em;
}

.katex .fontsize-ensurer.reset-size1.size9, .katex .sizing.reset-size1.size9 {
  font-size: 3.456em;
}

.katex .fontsize-ensurer.reset-size1.size10, .katex .sizing.reset-size1.size10 {
  font-size: 4.148em;
}

.katex .fontsize-ensurer.reset-size1.size11, .katex .sizing.reset-size1.size11 {
  font-size: 4.976em;
}

.katex .fontsize-ensurer.reset-size2.size1, .katex .sizing.reset-size2.size1 {
  font-size: .833333em;
}

.katex .fontsize-ensurer.reset-size2.size2, .katex .sizing.reset-size2.size2 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size2.size3, .katex .sizing.reset-size2.size3 {
  font-size: 1.16667em;
}

.katex .fontsize-ensurer.reset-size2.size4, .katex .sizing.reset-size2.size4 {
  font-size: 1.33333em;
}

.katex .fontsize-ensurer.reset-size2.size5, .katex .sizing.reset-size2.size5 {
  font-size: 1.5em;
}

.katex .fontsize-ensurer.reset-size2.size6, .katex .sizing.reset-size2.size6 {
  font-size: 1.66667em;
}

.katex .fontsize-ensurer.reset-size2.size7, .katex .sizing.reset-size2.size7 {
  font-size: 2em;
}

.katex .fontsize-ensurer.reset-size2.size8, .katex .sizing.reset-size2.size8 {
  font-size: 2.4em;
}

.katex .fontsize-ensurer.reset-size2.size9, .katex .sizing.reset-size2.size9 {
  font-size: 2.88em;
}

.katex .fontsize-ensurer.reset-size2.size10, .katex .sizing.reset-size2.size10 {
  font-size: 3.45667em;
}

.katex .fontsize-ensurer.reset-size2.size11, .katex .sizing.reset-size2.size11 {
  font-size: 4.14667em;
}

.katex .fontsize-ensurer.reset-size3.size1, .katex .sizing.reset-size3.size1 {
  font-size: .714286em;
}

.katex .fontsize-ensurer.reset-size3.size2, .katex .sizing.reset-size3.size2 {
  font-size: .857143em;
}

.katex .fontsize-ensurer.reset-size3.size3, .katex .sizing.reset-size3.size3 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size3.size4, .katex .sizing.reset-size3.size4 {
  font-size: 1.14286em;
}

.katex .fontsize-ensurer.reset-size3.size5, .katex .sizing.reset-size3.size5 {
  font-size: 1.28571em;
}

.katex .fontsize-ensurer.reset-size3.size6, .katex .sizing.reset-size3.size6 {
  font-size: 1.42857em;
}

.katex .fontsize-ensurer.reset-size3.size7, .katex .sizing.reset-size3.size7 {
  font-size: 1.71429em;
}

.katex .fontsize-ensurer.reset-size3.size8, .katex .sizing.reset-size3.size8 {
  font-size: 2.05714em;
}

.katex .fontsize-ensurer.reset-size3.size9, .katex .sizing.reset-size3.size9 {
  font-size: 2.46857em;
}

.katex .fontsize-ensurer.reset-size3.size10, .katex .sizing.reset-size3.size10 {
  font-size: 2.96286em;
}

.katex .fontsize-ensurer.reset-size3.size11, .katex .sizing.reset-size3.size11 {
  font-size: 3.55429em;
}

.katex .fontsize-ensurer.reset-size4.size1, .katex .sizing.reset-size4.size1 {
  font-size: .625em;
}

.katex .fontsize-ensurer.reset-size4.size2, .katex .sizing.reset-size4.size2 {
  font-size: .75em;
}

.katex .fontsize-ensurer.reset-size4.size3, .katex .sizing.reset-size4.size3 {
  font-size: .875em;
}

.katex .fontsize-ensurer.reset-size4.size4, .katex .sizing.reset-size4.size4 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size4.size5, .katex .sizing.reset-size4.size5 {
  font-size: 1.125em;
}

.katex .fontsize-ensurer.reset-size4.size6, .katex .sizing.reset-size4.size6 {
  font-size: 1.25em;
}

.katex .fontsize-ensurer.reset-size4.size7, .katex .sizing.reset-size4.size7 {
  font-size: 1.5em;
}

.katex .fontsize-ensurer.reset-size4.size8, .katex .sizing.reset-size4.size8 {
  font-size: 1.8em;
}

.katex .fontsize-ensurer.reset-size4.size9, .katex .sizing.reset-size4.size9 {
  font-size: 2.16em;
}

.katex .fontsize-ensurer.reset-size4.size10, .katex .sizing.reset-size4.size10 {
  font-size: 2.5925em;
}

.katex .fontsize-ensurer.reset-size4.size11, .katex .sizing.reset-size4.size11 {
  font-size: 3.11em;
}

.katex .fontsize-ensurer.reset-size5.size1, .katex .sizing.reset-size5.size1 {
  font-size: .555556em;
}

.katex .fontsize-ensurer.reset-size5.size2, .katex .sizing.reset-size5.size2 {
  font-size: .666667em;
}

.katex .fontsize-ensurer.reset-size5.size3, .katex .sizing.reset-size5.size3 {
  font-size: .777778em;
}

.katex .fontsize-ensurer.reset-size5.size4, .katex .sizing.reset-size5.size4 {
  font-size: .888889em;
}

.katex .fontsize-ensurer.reset-size5.size5, .katex .sizing.reset-size5.size5 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size5.size6, .katex .sizing.reset-size5.size6 {
  font-size: 1.11111em;
}

.katex .fontsize-ensurer.reset-size5.size7, .katex .sizing.reset-size5.size7 {
  font-size: 1.33333em;
}

.katex .fontsize-ensurer.reset-size5.size8, .katex .sizing.reset-size5.size8 {
  font-size: 1.6em;
}

.katex .fontsize-ensurer.reset-size5.size9, .katex .sizing.reset-size5.size9 {
  font-size: 1.92em;
}

.katex .fontsize-ensurer.reset-size5.size10, .katex .sizing.reset-size5.size10 {
  font-size: 2.30444em;
}

.katex .fontsize-ensurer.reset-size5.size11, .katex .sizing.reset-size5.size11 {
  font-size: 2.76444em;
}

.katex .fontsize-ensurer.reset-size6.size1, .katex .sizing.reset-size6.size1 {
  font-size: .5em;
}

.katex .fontsize-ensurer.reset-size6.size2, .katex .sizing.reset-size6.size2 {
  font-size: .6em;
}

.katex .fontsize-ensurer.reset-size6.size3, .katex .sizing.reset-size6.size3 {
  font-size: .7em;
}

.katex .fontsize-ensurer.reset-size6.size4, .katex .sizing.reset-size6.size4 {
  font-size: .8em;
}

.katex .fontsize-ensurer.reset-size6.size5, .katex .sizing.reset-size6.size5 {
  font-size: .9em;
}

.katex .fontsize-ensurer.reset-size6.size6, .katex .sizing.reset-size6.size6 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size6.size7, .katex .sizing.reset-size6.size7 {
  font-size: 1.2em;
}

.katex .fontsize-ensurer.reset-size6.size8, .katex .sizing.reset-size6.size8 {
  font-size: 1.44em;
}

.katex .fontsize-ensurer.reset-size6.size9, .katex .sizing.reset-size6.size9 {
  font-size: 1.728em;
}

.katex .fontsize-ensurer.reset-size6.size10, .katex .sizing.reset-size6.size10 {
  font-size: 2.074em;
}

.katex .fontsize-ensurer.reset-size6.size11, .katex .sizing.reset-size6.size11 {
  font-size: 2.488em;
}

.katex .fontsize-ensurer.reset-size7.size1, .katex .sizing.reset-size7.size1 {
  font-size: .416667em;
}

.katex .fontsize-ensurer.reset-size7.size2, .katex .sizing.reset-size7.size2 {
  font-size: .5em;
}

.katex .fontsize-ensurer.reset-size7.size3, .katex .sizing.reset-size7.size3 {
  font-size: .583333em;
}

.katex .fontsize-ensurer.reset-size7.size4, .katex .sizing.reset-size7.size4 {
  font-size: .666667em;
}

.katex .fontsize-ensurer.reset-size7.size5, .katex .sizing.reset-size7.size5 {
  font-size: .75em;
}

.katex .fontsize-ensurer.reset-size7.size6, .katex .sizing.reset-size7.size6 {
  font-size: .833333em;
}

.katex .fontsize-ensurer.reset-size7.size7, .katex .sizing.reset-size7.size7 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size7.size8, .katex .sizing.reset-size7.size8 {
  font-size: 1.2em;
}

.katex .fontsize-ensurer.reset-size7.size9, .katex .sizing.reset-size7.size9 {
  font-size: 1.44em;
}

.katex .fontsize-ensurer.reset-size7.size10, .katex .sizing.reset-size7.size10 {
  font-size: 1.72833em;
}

.katex .fontsize-ensurer.reset-size7.size11, .katex .sizing.reset-size7.size11 {
  font-size: 2.07333em;
}

.katex .fontsize-ensurer.reset-size8.size1, .katex .sizing.reset-size8.size1 {
  font-size: .347222em;
}

.katex .fontsize-ensurer.reset-size8.size2, .katex .sizing.reset-size8.size2 {
  font-size: .416667em;
}

.katex .fontsize-ensurer.reset-size8.size3, .katex .sizing.reset-size8.size3 {
  font-size: .486111em;
}

.katex .fontsize-ensurer.reset-size8.size4, .katex .sizing.reset-size8.size4 {
  font-size: .555556em;
}

.katex .fontsize-ensurer.reset-size8.size5, .katex .sizing.reset-size8.size5 {
  font-size: .625em;
}

.katex .fontsize-ensurer.reset-size8.size6, .katex .sizing.reset-size8.size6 {
  font-size: .694444em;
}

.katex .fontsize-ensurer.reset-size8.size7, .katex .sizing.reset-size8.size7 {
  font-size: .833333em;
}

.katex .fontsize-ensurer.reset-size8.size8, .katex .sizing.reset-size8.size8 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size8.size9, .katex .sizing.reset-size8.size9 {
  font-size: 1.2em;
}

.katex .fontsize-ensurer.reset-size8.size10, .katex .sizing.reset-size8.size10 {
  font-size: 1.44028em;
}

.katex .fontsize-ensurer.reset-size8.size11, .katex .sizing.reset-size8.size11 {
  font-size: 1.72778em;
}

.katex .fontsize-ensurer.reset-size9.size1, .katex .sizing.reset-size9.size1 {
  font-size: .289352em;
}

.katex .fontsize-ensurer.reset-size9.size2, .katex .sizing.reset-size9.size2 {
  font-size: .347222em;
}

.katex .fontsize-ensurer.reset-size9.size3, .katex .sizing.reset-size9.size3 {
  font-size: .405093em;
}

.katex .fontsize-ensurer.reset-size9.size4, .katex .sizing.reset-size9.size4 {
  font-size: .462963em;
}

.katex .fontsize-ensurer.reset-size9.size5, .katex .sizing.reset-size9.size5 {
  font-size: .520833em;
}

.katex .fontsize-ensurer.reset-size9.size6, .katex .sizing.reset-size9.size6 {
  font-size: .578704em;
}

.katex .fontsize-ensurer.reset-size9.size7, .katex .sizing.reset-size9.size7 {
  font-size: .694444em;
}

.katex .fontsize-ensurer.reset-size9.size8, .katex .sizing.reset-size9.size8 {
  font-size: .833333em;
}

.katex .fontsize-ensurer.reset-size9.size9, .katex .sizing.reset-size9.size9 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size9.size10, .katex .sizing.reset-size9.size10 {
  font-size: 1.20023em;
}

.katex .fontsize-ensurer.reset-size9.size11, .katex .sizing.reset-size9.size11 {
  font-size: 1.43981em;
}

.katex .fontsize-ensurer.reset-size10.size1, .katex .sizing.reset-size10.size1 {
  font-size: .24108em;
}

.katex .fontsize-ensurer.reset-size10.size2, .katex .sizing.reset-size10.size2 {
  font-size: .289296em;
}

.katex .fontsize-ensurer.reset-size10.size3, .katex .sizing.reset-size10.size3 {
  font-size: .337512em;
}

.katex .fontsize-ensurer.reset-size10.size4, .katex .sizing.reset-size10.size4 {
  font-size: .385728em;
}

.katex .fontsize-ensurer.reset-size10.size5, .katex .sizing.reset-size10.size5 {
  font-size: .433944em;
}

.katex .fontsize-ensurer.reset-size10.size6, .katex .sizing.reset-size10.size6 {
  font-size: .48216em;
}

.katex .fontsize-ensurer.reset-size10.size7, .katex .sizing.reset-size10.size7 {
  font-size: .578592em;
}

.katex .fontsize-ensurer.reset-size10.size8, .katex .sizing.reset-size10.size8 {
  font-size: .694311em;
}

.katex .fontsize-ensurer.reset-size10.size9, .katex .sizing.reset-size10.size9 {
  font-size: .833173em;
}

.katex .fontsize-ensurer.reset-size10.size10, .katex .sizing.reset-size10.size10 {
  font-size: 1em;
}

.katex .fontsize-ensurer.reset-size10.size11, .katex .sizing.reset-size10.size11 {
  font-size: 1.19961em;
}

.katex .fontsize-ensurer.reset-size11.size1, .katex .sizing.reset-size11.size1 {
  font-size: .200965em;
}

.katex .fontsize-ensurer.reset-size11.size2, .katex .sizing.reset-size11.size2 {
  font-size: .241158em;
}

.katex .fontsize-ensurer.reset-size11.size3, .katex .sizing.reset-size11.size3 {
  font-size: .281351em;
}

.katex .fontsize-ensurer.reset-size11.size4, .katex .sizing.reset-size11.size4 {
  font-size: .321543em;
}

.katex .fontsize-ensurer.reset-size11.size5, .katex .sizing.reset-size11.size5 {
  font-size: .361736em;
}

.katex .fontsize-ensurer.reset-size11.size6, .katex .sizing.reset-size11.size6 {
  font-size: .401929em;
}

.katex .fontsize-ensurer.reset-size11.size7, .katex .sizing.reset-size11.size7 {
  font-size: .482315em;
}

.katex .fontsize-ensurer.reset-size11.size8, .katex .sizing.reset-size11.size8 {
  font-size: .578778em;
}

.katex .fontsize-ensurer.reset-size11.size9, .katex .sizing.reset-size11.size9 {
  font-size: .694534em;
}

.katex .fontsize-ensurer.reset-size11.size10, .katex .sizing.reset-size11.size10 {
  font-size: .833601em;
}

.katex .fontsize-ensurer.reset-size11.size11, .katex .sizing.reset-size11.size11 {
  font-size: 1em;
}

.katex .delimsizing.size1 {
  font-family: KaTeX_Size1;
}

.katex .delimsizing.size2 {
  font-family: KaTeX_Size2;
}

.katex .delimsizing.size3 {
  font-family: KaTeX_Size3;
}

.katex .delimsizing.size4 {
  font-family: KaTeX_Size4;
}

.katex .delimsizing.mult .delim-size1 > span {
  font-family: KaTeX_Size1;
}

.katex .delimsizing.mult .delim-size4 > span {
  font-family: KaTeX_Size4;
}

.katex .nulldelimiter {
  width: .12em;
  display: inline-block;
}

.katex .delimcenter, .katex .op-symbol {
  position: relative;
}

.katex .op-symbol.small-op {
  font-family: KaTeX_Size1;
}

.katex .op-symbol.large-op {
  font-family: KaTeX_Size2;
}

.katex .accent > .vlist-t, .katex .op-limits > .vlist-t {
  text-align: center;
}

.katex .accent .accent-body {
  position: relative;
}

.katex .accent .accent-body:not(.accent-full) {
  width: 0;
}

.katex .overlay {
  display: block;
}

.katex .mtable .vertical-separator {
  min-width: 1px;
  display: inline-block;
}

.katex .mtable .arraycolsep {
  display: inline-block;
}

.katex .mtable .col-align-c > .vlist-t {
  text-align: center;
}

.katex .mtable .col-align-l > .vlist-t {
  text-align: left;
}

.katex .mtable .col-align-r > .vlist-t {
  text-align: right;
}

.katex .svg-align {
  text-align: left;
}

.katex svg {
  fill: currentColor;
  stroke: currentColor;
  fill-rule: nonzero;
  fill-opacity: 1;
  stroke-width: 1px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
  height: inherit;
  width: 100%;
  display: block;
  position: absolute;
}

.katex svg path {
  stroke: none;
}

.katex img {
  border-style: none;
  min-width: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
}

.katex .stretchy {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.katex .stretchy:after, .katex .stretchy:before {
  content: "";
}

.katex .hide-tail {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.katex .halfarrow-left {
  width: 50.2%;
  position: absolute;
  left: 0;
  overflow: hidden;
}

.katex .halfarrow-right {
  width: 50.2%;
  position: absolute;
  right: 0;
  overflow: hidden;
}

.katex .brace-left {
  width: 25.1%;
  position: absolute;
  left: 0;
  overflow: hidden;
}

.katex .brace-center {
  width: 50%;
  position: absolute;
  left: 25%;
  overflow: hidden;
}

.katex .brace-right {
  width: 25.1%;
  position: absolute;
  right: 0;
  overflow: hidden;
}

.katex .x-arrow-pad {
  padding: 0 .5em;
}

.katex .cd-arrow-pad {
  padding: 0 .55556em 0 .27778em;
}

.katex .mover, .katex .munder, .katex .x-arrow {
  text-align: center;
}

.katex .boxpad {
  padding: 0 .3em;
}

.katex .fbox, .katex .fcolorbox {
  box-sizing: border-box;
  border: .04em solid;
}

.katex .cancel-pad {
  padding: 0 .2em;
}

.katex .cancel-lap {
  margin-left: -.2em;
  margin-right: -.2em;
}

.katex .sout {
  border-bottom-style: solid;
  border-bottom-width: .08em;
}

.katex .angl {
  box-sizing: border-box;
  border-top: .049em solid;
  border-right: .049em solid;
  margin-right: .03889em;
}

.katex .anglpad {
  padding: 0 .03889em;
}

.katex .eqn-num:before {
  content: "(" counter(katexEqnNo) ")";
  counter-increment: katexEqnNo;
}

.katex .mml-eqn-num:before {
  content: "(" counter(mmlEqnNo) ")";
  counter-increment: mmlEqnNo;
}

.katex .mtr-glue {
  width: 50%;
}

.katex .cd-vert-arrow {
  display: inline-block;
  position: relative;
}

.katex .cd-label-left {
  text-align: left;
  display: inline-block;
  position: absolute;
  right: calc(50% + .3em);
}

.katex .cd-label-right {
  text-align: right;
  display: inline-block;
  position: absolute;
  left: calc(50% + .3em);
}

.katex-display {
  text-align: center;
  margin: 1em 0;
  display: block;
}

.katex-display > .katex {
  text-align: center;
  white-space: nowrap;
  display: block;
}

.katex-display > .katex > .katex-html {
  display: block;
  position: relative;
}

.katex-display > .katex > .katex-html > .tag {
  position: absolute;
  right: 0;
}

.katex-display.leqno > .katex > .katex-html > .tag {
  left: 0;
  right: auto;
}

.katex-display.fleqn > .katex {
  text-align: left;
  padding-left: 2em;
}

body {
  counter-reset: katexEqnNo mmlEqnNo;
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

.notranslate {
  translate: none !important;
}

grammarly-extension, grammarly-popups, grammarly-desktop-integration, [data-grammarly-shadow-root], [data-gr-ext-installed] {
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

[data-lastpass-icon-root], [data-lastpass-root], [data-1p-ignore], .onepassword-dialog {
  visibility: hidden !important;
  display: none !important;
}

#root * {
  font-synthesis: none;
}

@font-face {
  font-family: system-ui;
  font-display: swap;
}

body {
  font-display: swap;
}

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 14.5%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 14.5%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 14.5%;
  --primary: 0 0% 20.5%;
  --primary-foreground: 0 0% 98.5%;
  --secondary: 0 0% 97%;
  --secondary-foreground: 0 0% 20.5%;
  --muted: 0 0% 97%;
  --muted-foreground: 0 0% 55.6%;
  --accent: 0 0% 97%;
  --accent-foreground: 0 0% 20.5%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --success: 142.1 76.2% 36.3%;
  --success-foreground: 0 0% 98%;
  --border: 0 0% 92.2%;
  --input: 0 0% 92.2%;
  --ring: 0 0% 70.8%;
  --radius: .625rem;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 0 0% 14.5%;
  --sidebar-primary: 0 0% 20.5%;
  --sidebar-primary-foreground: 0 0% 98.5%;
  --sidebar-accent: 0 0% 97%;
  --sidebar-accent-foreground: 0 0% 20.5%;
  --sidebar-border: 0 0% 92.2%;
  --sidebar-ring: 0 0% 70.8%;
  --fc-small-font-size: .875em;
  --fc-page-bg-color: hsl(var(--border));
  --fc-neutral-bg-color: hsl(var(--border));
  --fc-neutral-text-color: hsl(var(--accent-foreground));
  --fc-border-color: hsl(var(--border));
  --fc-button-text-color: hsl(var(--background));
  --fc-button-bg-color: hsl(var(--primary));
  --fc-button-border-color: hsl(var(--primary));
  --fc-button-hover-bg-color: hsl(var(--primary) / .8);
  --fc-button-hover-border-color: hsl(var(--primary));
  --fc-button-active-bg-color: hsl(var(--primary) / .8);
  --fc-button-active-border-color: hsl(var(--primary) / 0);
  --fc-event-bg-color: hsl(var(--primary));
  --fc-event-border-color: hsl(var(--primary));
  --fc-event-text-color: hsl(var(--background));
  --fc-event-selected-overlay-color: hsl(var(--muted));
  --fc-more-link-bg-color: hsl(var(--muted));
  --fc-more-link-text-color: inherit;
  --fc-event-resizer-thickness: 8px;
  --fc-event-resizer-dot-total-width: 8px;
  --fc-event-resizer-dot-border-width: var(--radius);
  --fc-non-business-color: #d7d7d74d;
  --fc-bg-event-color: hsl(var(--success));
  --fc-bg-event-opacity: .3;
  --fc-highlight-color: #bce8f14d;
  --fc-today-bg-color: hsl(var(--primary) / .15);
  --fc-now-indicator-color: hsl(var(--destructive));
  --highlight: oklch(85.2% .199 91.936);
  --brand: oklch(62.3% .214 259.815);
  --sidebar: oklch(98.5% 0 0);
}

.dark {
  --background: oklch(14.5% 0 0);
  --foreground: oklch(98.5% 0 0);
  --card: oklch(20.5% 0 0);
  --card-foreground: oklch(98.5% 0 0);
  --popover: oklch(20.5% 0 0);
  --popover-foreground: oklch(98.5% 0 0);
  --primary: oklch(92.2% 0 0);
  --primary-foreground: oklch(20.5% 0 0);
  --secondary: oklch(26.9% 0 0);
  --secondary-foreground: oklch(98.5% 0 0);
  --muted: oklch(26.9% 0 0);
  --muted-foreground: oklch(70.8% 0 0);
  --accent: oklch(26.9% 0 0);
  --accent-foreground: oklch(98.5% 0 0);
  --destructive: oklch(70.4% .191 22.216);
  --destructive-foreground: 0 0% 98%;
  --success: 142.4 71.8% 29.2%;
  --success-foreground: 0 0% 98%;
  --border: oklch(100% 0 0 / .1);
  --input: oklch(100% 0 0 / .15);
  --ring: oklch(55.6% 0 0);
  --chart-1: oklch(48.8% .243 264.376);
  --chart-2: oklch(69.6% .17 162.48);
  --chart-3: oklch(76.9% .188 70.08);
  --chart-4: oklch(62.7% .265 303.9);
  --chart-5: oklch(64.5% .246 16.439);
  --highlight: oklch(85.2% .199 91.936);
  --brand: oklch(70.7% .165 254.624);
  --sidebar-background: oklch(20.5% 0 0);
  --sidebar: oklch(20.5% 0 0);
  --sidebar-foreground: oklch(98.5% 0 0);
  --sidebar-primary: oklch(48.8% .243 264.376);
  --sidebar-primary-foreground: oklch(98.5% 0 0);
  --sidebar-accent: oklch(26.9% 0 0);
  --sidebar-accent-foreground: oklch(98.5% 0 0);
  --sidebar-border: oklch(100% 0 0 / .1);
  --sidebar-ring: oklch(55.6% 0 0);
}

aside.EmojiPickerReact {
  --epr-emoji-size: 2rem;
  --epr-emoji-padding: .25rem;
  --epr-emoji-gap: .5rem;
  --epr-hover-bg-color: hsl(var(--accent));
  --epr-focus-bg-color: hsl(var(--accent));
  --epr-bg-color: hsl(var(--background));
  --epr-reactions-bg-color: hsl(var(--background));
  --epr-highlight-color: hsl(var(--primary));
  --epr-category-icon-active-color: hsl(var(--primary));
  --epr-category-label-bg-color: hsl(var(--background));
  --epr-text-color: hsl(var(--foreground));
  --epr-horizontal-padding: .75rem;
  --epr-search-input-bg-color: hsl(var(--muted));
  --epr-search-input-border-radius: var(--radius);
  --epr-search-input-padding: 0 40px;
  --epr-preview-text-size: .875rem;
  --epr-header-padding: var(--epr-horizontal-padding) var(--epr-horizontal-padding);
  --epr-picker-border-radius: var(--radius);
  --epr-picker-border-color: hsl(var(--border));
  --epr-skin-tone-outer-border-color: hsl(var(--border));
}

.EmojiPickerReact .epr-btn {
  border-radius: var(--radius);
}

.EmojiPickerReact .epr-btn:focus:before {
  border-radius: var(--radius);
  border-width: 1px;
}

::selection {
  color: hsl(var(--foreground));
  background-color: #a855f733;
}

html, body {
  font-family: Inter, sans-serif !important;
}

.dumy {
  color: #262626;
}

::-webkit-scrollbar {
  scrollbar-color: #262626;
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #262626;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: none;
}

.gradient {
  background: conic-gradient(from 230.29deg at 51.63% 52.16%, #2400ff 0deg, #0087ff 67.5deg, #6c279d 198.75deg, #1826a3 251.25deg, #3667c4 301.88deg, #691eff 360deg);
}

.not-found {
  box-shadow: 5px 5px #9612e24d;
}

.animate-shake {
  animation: .5s ease-in-out infinite shake;
}

@keyframes shake {
  0%, 100% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-15deg);
  }

  40% {
    transform: rotate(15deg);
  }

  60% {
    transform: rotate(-10deg);
  }

  80% {
    transform: rotate(10deg);
  }
}

.is-shaking {
  animation: .6s shakeX;
}

@keyframes shakeX {
  0% {
    transform: translateX(0);
  }

  15% {
    transform: translateX(-8px);
  }

  30% {
    transform: translateX(8px);
  }

  45% {
    transform: translateX(-6px);
  }

  60% {
    transform: translateX(6px);
  }

  75% {
    transform: translateX(-3px);
  }

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

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

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

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

  100% {
    transform: translateY(var(--slide-distance, -200px));
  }
}

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

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

@keyframes monthFadeOut {
  0% {
    opacity: 1;
    height: auto;
  }

  100% {
    opacity: 0;
    height: 0;
    overflow: hidden;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

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

@keyframes weekSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

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

@keyframes weekSlideInTop {
  0% {
    opacity: 0;
    transform: translateY(-100vh);
  }

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

@keyframes contentSlideUpReverse {
  0% {
    transform: translateY(var(--slide-distance, -200px));
  }

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

@keyframes contentSlideDownReverse {
  0% {
    opacity: 0;
    transform: translateY(100vh);
  }

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

@keyframes monthFadeIn {
  0% {
    opacity: 0;
    height: 0;
    overflow: hidden;
  }

  100% {
    opacity: 1;
    height: auto;
  }
}

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

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

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

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

.animate-slide-up {
  animation: .6s cubic-bezier(.4, 0, .2, 1) forwards contentSlideUp;
}

.animate-slide-down {
  animation: .6s cubic-bezier(.4, 0, .2, 1) forwards contentSlideDown;
}

.animate-month-fade {
  animation: .5s ease-out forwards monthFadeOut;
}

.animate-fade-in {
  opacity: 0;
  animation: .6s ease-out .3s forwards fadeIn;
}

.week-row {
  position: relative;
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-pan-x {
  syntax: "*";
  inherits: false
}

@property --tw-pan-y {
  syntax: "*";
  inherits: false
}

@property --tw-pinch-zoom {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

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

@keyframes ping {
  75%, 100% {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes bounce {
  0%, 100% {
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
    transform: translateY(-25%);
  }

  50% {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
    transform: none;
  }
}

@keyframes collapsible-down {
  from {
    height: 0;
  }

  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes collapsible-up {
  from {
    height: var(--radix-collapsible-content-height);
  }

  to {
    height: 0;
  }
}

@keyframes caret-blink {
  0%, 70%, 100% {
    opacity: 1;
  }

  20%, 50% {
    opacity: 0;
  }
}