/*
@tailwind base;
@tailwind components;
@tailwind utilities;
*/

/*
Il vaut mieux utiliser @import que @tailwind si on a des @import
supplémentaires
*/

/* @layout base, components, utilities; */

/*
! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

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

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

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

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

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

/*
    Mettre ici les styles par défaut non intrusif pour notre application complète
    - pas de couleur de fond ni d'image de fond ni de dégradés
*/

/*
Les variables sont utilisables en tailwind  par :
    text-[--app-link-color]  // si pas d'ambiguïté
    text-[color:var(--app-link-color)]
    text-[color:var(--app-link-color)]
*/

:root {
  /* --main-font-color: @apply text-blue-900;  CECI NE FONCTIONNE PAS*/
  --app-main-fg-color: #000077;
  --app-main-bg-color: #F8FFF8;
  --app-font-color: #000077;
  --app-menu-fg-color: #A83232;
  --app-link-color: #0000AA;
  --app-link-color-hover: #A83232;
  /* --app-bg-header-color: #312E81;
    --app-bg-menu-color: #E8E8E8; */
  /* --app-h1-color: #A83232;
    --app-h1-link-color: #ee5d5d;
    --app-h1-link-color-hover: #f1a6a6; */
  --app-pre-fg-color: #226622;
  --app-pre-bg-color: #EEEEEE;
  --table-border-ext-color: #000077;
  --table-border-int-color: #E0E0E0;
  --table-bg-tbody-color: #FAFAFF;
  --table-bg-thead-color: #EEEEEE;
}

body {
  /* BIZARRE car ce max-width serait prioritaire sur mon layout memit !!?? */
  /* max-width: 70rem ; */
  margin: 0 auto ;
}

h1, h2, h3, h4, h5 {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1 {
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  font-size: 2.25rem;
  line-height: 2.5rem;
}

h2 {
  /* @apply my-12 py-2 px-4 text-[1.3rem] ; */
  /* @apply my-12 py-2 text-[1.3rem] ; */
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.3rem;
}

h3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 0.25rem;
  font-size: 1.5rem;
}

h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

h5 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.7em;
}

img {
  display: inline;
  /* car tailwind reset les images en display block */
  margin: 0;
  /* car la classe prose de typography ajoute de la marge */
}

pre {
  /*
    @apply text-sm p-2 ml-2 border-l-2 border-[--app-h1-color] bg-gray-100;
    */
  /* Les classes break-words ou break-all semblent sans effet ! */
  margin-left: 0.5rem;
  white-space: pre-wrap;
  word-break: break-all;
  border-left-width: 2px;
  border-color: var(--app-pre-fg-color);
  background-color: var(--app-pre-bg-color);
  padding: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--app-pre-fg-color);
}

/*
Les liens
*/

a {
  color: var(--app-link-color);
  text-decoration-line: underline;
}

a:hover {
  color: var(--app-link-color-hover);
  text-decoration-line: underline;
}

/*
Liste générique à la française : des listes avec tirets au lieu de points
avec le tiret moyen de unicode "\2013".

Les styles ci-dessous utilise les classes utilitaires de Tailwind, en
particulier la possibilté de délectionner les enfants directs <li> du <lu>
grace au sélecteur "[&>li]:" propre à Tailwind.
Cette fonctionnalité n'a aucun intérêt ici dans cette feuille de style séparée,
et pourrait être remplacée par un style cascade supplémentaire "ul > li"
Mais je la conserve comme exemple car elle peut être utilisés
direction pour modifier directement une balise <ul> particulière par
des classes inlines
*/

/* ul {
    @apply
        relative
        list-none
        pl-[1.0em]
        [&>li]:relative
        [&>li]:mb-2
        [&>li]:before:absolute
        [&>li]:before:content-['\2013']
        [&>li]:before:top-0
        [&>li]:before:-left-[1.0em]
        ;
} */

/* https://stackoverflow.com/questions/4373046/css-control-space-between-bullet-and-li */

/*
ul {
    @apply
        relative
        list-outside
        list-['\2013']
        pl-1
        [&>li]:pl-2
        [&>li]:mb-2
        ;
}
*/

ul {
  position: relative;
  list-style-position: outside;
  list-style-type: '\2013';
  padding-left: 0px;
}

ul>li {
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
}

ul>li::first-line {
  padding-left: 4rem;
}

/* Les ul imbriquées sont plus reserrées */

ul ul {
  margin-top: -0.5rem;
}

ul ul>li {
  margin-bottom: 0px;
  padding-left: 0.5rem;
}

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

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

/* Je complète par mes propre classes */

/*
 Définir ici des classes spécifiques à une zone, à une fonctionnalité ou à
 un composant particulier de notre application.

 Attention :
 Les layouts définissent une hiérachie de priorité dans l'ordre croissant
 de leur déclaration (base, components, utilities) de façon à pouvoir
 être surchargés facilement.
 Les feuilles de styles hors layout sont prioritaires sur les layouts.
 Les styles inlines sont prioritaires sur toute feuille de style.
 */

.btn {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  width: auto;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(248 250 252 / var(--tw-text-opacity));
  text-decoration-line: none;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(248 250 252 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.btn a {
  --tw-text-opacity: 1;
  color: rgb(248 250 252 / var(--tw-text-opacity));
  text-decoration-line: none;
}

/* Les alertes (formulaires, ...) */

.alert {
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.alert-info {
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}

@media (prefers-color-scheme: dark) {
  .alert-info {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity));
  }
}

.alert-danger {
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

@media (prefers-color-scheme: dark) {
  .alert-danger {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity));
  }
}

.alert-success {
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
}

@media (prefers-color-scheme: dark) {
  .alert-success {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity));
  }
}

.alert-warning {
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity));
}

@media (prefers-color-scheme: dark) {
  .alert-warning {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(253 224 71 / var(--tw-text-opacity));
  }
}

.alert-dark {
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

@media (prefers-color-scheme: dark) {
  .alert-dark {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity));
  }
}

/*
EXEMPLE DE https://flowbite.com/docs/components/alerts/

<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400" role="alert">
  <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
  <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400" role="alert">
  <span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300" role="alert">
  <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 text-sm text-gray-800 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-300" role="alert">
  <span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.
</div>
*/

/*
Les formulaires
Voir aussi :
https://github.com/tailwindlabs/tailwindcss-forms

Deux manière de personnaliser les styles d eformulaire avec ce fichier

1. affecter explicitement la classe "madi-form" à un fomulaire
1. affecter la classe "madi-form" à un parent d'un ou pde plusieurs formulaires

 */

/*
 PROBLEME :
 Ne pas appliquer la classe  madi-form au niveau du body sinon elle serait
 imposerée à tous les form et il faut force avec "!" à chaque classe utilitaire
 (bien que ce fichier est dans le level composnent !??)
 On pourait utliser .madi-form>form au lieu de .madi-form form
 On peut imposer une classe dans les macro symfony twig  form_start par :
 {{ form_start(form, {'attr': {'class': 'madi-form'}}) }}
 */

.madi-form form,
form.madi-form {
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  width: 91.666667%;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(170 170 170 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
  padding: 0.5rem;
}

.madi-form form label,
form.madi-form label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.madi-form form label.required,
form.madi-form label.required {
  /* @apply font-bold; */
}

.madi-form form label.required::before,
form.madi-form label.required::before {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  --tw-content: '* ';
  content: var(--tw-content);
}

/* TODO
:is(.madi-form form, form.madi-form) :is(input, textarea) {
    @apply
        rounded p-1
        border border-[#AAAAAA]
        w-full
        ;
}
*/

.madi-form form input,
form.madi-form input,
.madi-form form textarea,
form.madi-form textarea {
  width: 100%;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(170 170 170 / var(--tw-border-opacity));
  padding: 0.25rem;
}

/* Liste de tous les types d'input possibles */

/*
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
*/

.madi-form form select, form.madi-form select,
.madi-form form input[type=button], form.madi-form input[type=button],
.madi-form form input[type=checkbox], form.madi-form input[type=checkbox],
.madi-form form input[type=color], form.madi-form input[type=color],
.madi-form form input[type=date], form.madi-form input[type=date],
.madi-form form input[type=datetime-local], form.madi-form input[type=datetime-local],
.madi-form form input[type=file], form.madi-form input[type=file],
.madi-form form input[type=image], form.madi-form input[type=image],
.madi-form form input[type=month], form.madi-form input[type=month],
.madi-form form input[type=number], form.madi-form input[type=number],
.madi-form form input[type=radio], form.madi-form input[type=radio],
.madi-form form input[type=range], form.madi-form input[type=range],
.madi-form form input[type=reset], form.madi-form input[type=reset],
.madi-form form input[type=submit], form.madi-form input[type=submit],
.madi-form form input[type=tel], form.madi-form input[type=tel],
.madi-form form input[type=time], form.madi-form input[type=time],
.madi-form form input[type=week], form.madi-form input[type=week] {
  width: -moz-fit-content;
  width: fit-content;
  /* au lieu de w-full */
}

.madi-form form textarea,
form.madi-form textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Style d'affichage les CRUD (listes de fiches, détails d'une fiche, ... */

/*
Quelques guidelines :
- préfixer les variables CSS par --madi-crud-
- en cas d eproblème de mise au point, réduire les variations des borders
  à une seule taille et une seule couleurs pour table, thead, tbody, tr,
  td et th (car plus facile à controller avec collapse et évite de traiter
  de nombreux cas particuliers)
  SAUF QUE je suis passé à border-2 pour les row complètes et border-1 pour
  les cellules. Cela permet de différencier les séparation inter-row et
  intra-row (cas span entre plusieurs row d'un même groupe)
- (PEUT_ETRE) inutile d'ajouter des border pour le tr, car les td et th suffisent.

*/

:root {
  --madi-crud-border-color: #cbd5e1;
  /* slate-300*/
  --madi-crud-border-color2: #a0b0c0;
  /*   */
  --madi-crud-bg-thead-color: #F8F8F8;
  --madi-crud-bg-odd-color: #FFFFFC;
  --madi-crud-bg-even-color: #FCFCFF;
}

@media print {
  /* ATTENTION : SEMBLE NE PAS MARCHER */

  table.crud-list thead,
    table.crud-list tbody tr,
    table.crud-list tbody tr.odd,
    table.crud-list tbody tr.even,
    dl.crud-dump dt {
    background-color: white !important;
  }
}

/*
 * crud-list: classe affectée à la liste d'un CRUD (e.g. route `member`)
 * (une seule fiche par ligne de table eg. e.g route app_actu_index)
 */

table.crud-list {
  /* La couleur de border de la table serait écrasée par les couleur de td (car collapse) */
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}

table.crud-list thead {
  background-color: var(--madi-crud-bg-thead-color);
}

table.crud-list thead th {
  padding: 0.5rem;
  text-align: center;
}

/*
    Bordure des rows et positionnement vertical
*/

table.crud-list tbody tr {
  vertical-align: top;
}

table.crud-list  tr {
  border-width: 2px;
  border-color: var(--madi-crud-border-color2);
}

/*
    bg des rows paires et impaires par défaut (automatiques)
    En l'absence de classe odd ou even : on switch un row sur deux.
*/

table.crud-list tbody tr {
  background-color: var(--madi-crud-bg-odd-color);
}

table.crud-list tbody tr:nth-child(even) {
  background-color: var(--madi-crud-bg-even-color);
}

/*
    bg des rows paires et impaires explicites avec classes .odd et .even
    Les couleurs de fond pour les classe even et odd
    (permet de gérer souplement plusieurs <tr> par fiches
*/

table.crud-list tbody tr.odd {
  background-color: var(--madi-crud-bg-odd-color);
}

table.crud-list tbody tr.even {
  background-color: var(--madi-crud-bg-even-color);
}

/* bordure pour toutes les cellules */

table.crud-list thead tr th,
table.crud-list tbody tr td {
  border-color: madi-table-border-color;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

table.crud-list tbody a {
  color: inherit;
  text-decoration-line: none;
  --tw-text-opacity: 1;
  color: rgb(136 0 0 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

/* n'est plus utilisé dans memit, mais à garder comme exemple */

table.crud-list tbody tr td div.icons {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}

/*
* table.crud-dump: classe affecté à la fiche CRUD d'une entity.
* Style pour l'affichage des table <dl> détaillant une
* seule fiche (e.g route app_actu_show).
# Les tables pour une vue show sont générées automatiquement par la
* console de symfonu
*/

table.crud-dump {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}

table.crud-dump tr {
  border-width: 2px;
  border-color: var(--madi-crud-border-color2);
}

table.crud-dump tr th {
  border-width: 1px;
  border-color: var(--madi-crud-border-color);
  background-color: var(--madi-crud-bg-thead-color);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.625rem;
  text-align: right;
  vertical-align: top;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

table.crud-dump tr td {
  border-width: 1px;
  border-color: var(--madi-crud-border-color);
  background-color: var(--madi-crud-bg-even-color);
}

/*
* dl.crud-dump: classe affecté à la fiche CRUD d'une entity.
* Style pour l'affichage des liste de description <dl> détaillant une
* seule fiche (e.g route app_actu_show).
*/

dl.crud-dump {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 0.5rem;
  /*
    @apply
       [&>dt]:text-black [&>dt]:bg-white [&>dt]:mt-4 [&>dt]:px-2
       [&>dt]:text-xs [&>dt]:font-semibold
    ;
    @apply [&>dd]:bg-[#F4F4F4] [&>dd]:px-2 [&>dd]:border-2 [&>dd]:border-[#EEEEEE] ;
    */
  /* @apply [&>dt]:text-xl  [&>dt]:bg-violet-200 */
}

dl.crud-dump dt {
  margin-top: 0.75rem;
  margin-bottom: 0px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
  border-top-width: 1px;
  border-top-color: var(--madi-crud-border-color);
  background-color: var(--madi-crud-bg-thead-color);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

dl.crud-dump dd {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-right: 0.5rem;
  padding-left: 2rem;
  border-bottom-color: var(--madi-crud-border-color);
}

/*
Styles du bloc main (dont les styles pour l'impression)
*/

.main h1 {
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  font-size: 2.25rem;
  line-height: 2.5rem;
  --tw-text-opacity: 1;
  color: rgb(168 50 50 / var(--tw-text-opacity));
}

.main h2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  background-color: A83232;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.3rem;
  --tw-text-opacity: 1;
  color: rgb(168 50 50 / var(--tw-text-opacity));
}

@media print {
  .main h2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    border-width: 2px;
    border-color: var(--app-h1-color);
    background-image: none;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    color: var(--app-h1-color);
  }
}

.main h3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-bottom-width: 2px;
  border-color: var(--app-h1-color);
  padding-left: 0.25rem;
  font-size: 1.5rem;
  color: var(--app-h1-color);
}

@media print {
  .main h3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-bottom-width: 0px;
    border-top-width: 1px;
    padding-left: 0px;
    font-size: 1.3rem;
  }
}

.main h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--app-h1-color);
}

@media print {
  .main h4 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
  }
}

.main h5 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--app-h1-color);
}

/* Les liens des titres */

.main h1 a,
.main h2 a,
.main h3 a,
.main h4 a,
.main h5 a,
.main h6 a {
  /* @apply text-inherit hover:bg-slate-100 no-underline; */
  color: inherit;
  text-decoration-line: none;
}

.main h1 a:hover,
.main h2 a:hover,
.main h3 a:hover,
.main h4 a:hover,
.main h5 a:hover,
.main h6 a:hover {
  background-color: var(--app-h1-link-color);
}

/* Table générique avec border gris clair exgterne et par cellule */

.main table {
  border-collapse: collapse;
  background-color: var(--table-bg-tbody-color);
  /* @apply [&_th]:bg-blue-300 [&_th]:align-bottom;   OK FONCTIONNE */
  /* @apply [&_td]:bg-green-300;                      OK FONCTIONNE */
  /* @apply [&_td:nth-child(3)]:bg-orange-500;        OK FONCTIONNE */
}

.main table th,
.main table td {
  border-width: 1px;
  border-color: var(--table-border-int-color);
  padding: 0.5rem;
  vertical-align: top;
}

/*
 * menu : le menu vertical de gauche
 */

.menu {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
}

.menu h1 {
  padding-left: 2rem;
  font-size: 2rem;
  /*
    font-size: 2rem;
    padding-left: 2rem;
    color: inherit;
    background-color: transparent;
    */
}

.menu h2 {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0.5rem;
  margin-bottom: 0.375rem;
  padding: 0px;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: inherit;
}

.menu h3 {
  /* @apply  text-base pl-0 font-semibold; */
  /* @apply  text-base pl-0 mt-4 mb-0; */
  margin-top: 0.5rem;
  margin-bottom: 0px;
  padding-left: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
}

.menu a {
  color: inherit;
}

.menu a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
}

/* Les listes de module (autres que les rubriques ou onglets) */

.menu ul {
  margin: 0 ;
  padding: 0 ;
}

.menu ul li {
  margin: 0 ;
  list-style-type: none;
}

.menu ul li a {
  text-decoration: none;
  padding: 0 ;
}

.menu ul li a:hover {
  color: #000;
  background-color: inherit;
}

.menu ul.external_links li a,
.menu ul.external_links li a:visited {
  text-decoration: none;
  padding: 0 0 0 1ex;
  cursor: ne-resize;
}

.menu ul.external_links li a:hover {
  text-decoration: underline;
}

/* Cas particulier de la liste des liens dédiés à la navigation interne */

.menu ul.internal_links {
  border: 2px solid #ACA;
  border-right: none;
  padding: 1ex 0 1ex 0;
}

.menu  ul.external_links li {
  list-style-type:none;
}

.menu  ul.internal_links li a,
.menu  ul.internal_links li a:visited {
  color: inherit;
  background-color: inherit;
  text-decoration: none;
  padding: 0 0 0 1ex;
}

.menu  ul.internal_links li a:hover {
  color: #000;
  background-color: #E8E8E8;
  background-image: linear-gradient(
        to right, #E0E0E0 0%, #FFFFFF 80%, #FFFFFF 100%
    );
}

.menu ul.internal_links li.current a:hover,
.menu ul.internal_links li.current {
  color: black;
  background-color: #FFF;
  border: 1px solid #CCC;
}

/* .menu .intra {
    color: #40A;
    font-weight: inherit;
}
.menu .intra h2 {
    color: #40A;
    border-color: #40A;
} */

/* Affichage du login connecté  */

/* .menu .login {
    margin: -1ex -1ex 2ex -1ex;
    font-size: 80%;
    background-color: #FF8;
}
.menu .login span {
    font-size: 100%;
    color: blue;
} */

.visible {
  visibility: visible;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.right-0 {
  right: 0px;
}

.top-0 {
  top: 0px;
}

.order-1 {
  order: 1;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.order-none {
  order: 0;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

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

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.col-span-5 {
  grid-column: span 5 / span 5;
}

.col-span-6 {
  grid-column: span 6 / span 6;
}

.m-0 {
  margin: 0px;
}

.m-1 {
  margin: 0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-3 {
  margin: 0.75rem;
}

.m-4 {
  margin: 1rem;
}

.m-5 {
  margin: 1.25rem;
}

.m-6 {
  margin: 1.5rem;
}

.m-8 {
  margin: 2rem;
}

.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-8 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.\!mt-2 {
  margin-top: 0.5rem !important;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-0 {
  margin-left: 0px;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.ml-8 {
  margin-left: 2rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-0 {
  margin-right: 0px;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mr-6 {
  margin-right: 1.5rem;
}

.mr-8 {
  margin-right: 2rem;
}

.mt-0 {
  margin-top: 0px;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-0 {
  height: 0px;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-1\/2 {
  height: 50%;
}

.h-1\/3 {
  height: 33.333333%;
}

.h-1\/4 {
  height: 25%;
}

.h-1\/5 {
  height: 20%;
}

.h-1\/6 {
  height: 16.666667%;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-2\/3 {
  height: 66.666667%;
}

.h-2\/4 {
  height: 50%;
}

.h-2\/5 {
  height: 40%;
}

.h-2\/6 {
  height: 33.333333%;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-3\/4 {
  height: 75%;
}

.h-3\/5 {
  height: 60%;
}

.h-3\/6 {
  height: 50%;
}

.h-32 {
  height: 8rem;
}

.h-36 {
  height: 9rem;
}

.h-4 {
  height: 1rem;
}

.h-4\/5 {
  height: 80%;
}

.h-4\/6 {
  height: 66.666667%;
}

.h-40 {
  height: 10rem;
}

.h-44 {
  height: 11rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-5\/6 {
  height: 83.333333%;
}

.h-52 {
  height: 13rem;
}

.h-56 {
  height: 14rem;
}

.h-6 {
  height: 1.5rem;
}

.h-60 {
  height: 15rem;
}

.h-64 {
  height: 16rem;
}

.h-7 {
  height: 1.75rem;
}

.h-72 {
  height: 18rem;
}

.h-8 {
  height: 2rem;
}

.h-80 {
  height: 20rem;
}

.h-9 {
  height: 2.25rem;
}

.h-96 {
  height: 24rem;
}

.h-\[8rem\] {
  height: 8rem;
}

.h-auto {
  height: auto;
}

.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.w-0 {
  width: 0px;
}

.w-0\.5 {
  width: 0.125rem;
}

.w-1 {
  width: 0.25rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-1\/12 {
  width: 8.333333%;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-1\/4 {
  width: 25%;
}

.w-1\/5 {
  width: 20%;
}

.w-1\/6 {
  width: 16.666667%;
}

.w-10 {
  width: 2.5rem;
}

.w-10\/12 {
  width: 83.333333%;
}

.w-11 {
  width: 2.75rem;
}

.w-11\/12 {
  width: 91.666667%;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-2\/12 {
  width: 16.666667%;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-2\/4 {
  width: 50%;
}

.w-2\/5 {
  width: 40%;
}

.w-2\/6 {
  width: 33.333333%;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/12 {
  width: 25%;
}

.w-3\/4 {
  width: 75%;
}

.w-3\/5 {
  width: 60%;
}

.w-3\/6 {
  width: 50%;
}

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-4\/12 {
  width: 33.333333%;
}

.w-4\/5 {
  width: 80%;
}

.w-4\/6 {
  width: 66.666667%;
}

.w-40 {
  width: 10rem;
}

.w-44 {
  width: 11rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-5\/12 {
  width: 41.666667%;
}

.w-5\/6 {
  width: 83.333333%;
}

.w-52 {
  width: 13rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-6\/12 {
  width: 50%;
}

.w-60 {
  width: 15rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-7\/12 {
  width: 58.333333%;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-8\/12 {
  width: 66.666667%;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-9\/12 {
  width: 75%;
}

.w-96 {
  width: 24rem;
}

.w-\[10ex\] {
  width: 10ex;
}

.w-\[20rem\] {
  width: 20rem;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.w-screen {
  width: 100vw;
}

.min-w-\[9rem\] {
  min-width: 9rem;
}

.max-w-\[30rem\] {
  max-width: 30rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.flex-grow-0 {
  flex-grow: 0;
}

.grow-0 {
  flex-grow: 0;
}

.basis-0 {
  flex-basis: 0px;
}

.basis-0\.5 {
  flex-basis: 0.125rem;
}

.basis-1 {
  flex-basis: 0.25rem;
}

.basis-1\.5 {
  flex-basis: 0.375rem;
}

.basis-1\/12 {
  flex-basis: 8.333333%;
}

.basis-1\/2 {
  flex-basis: 50%;
}

.basis-1\/3 {
  flex-basis: 33.333333%;
}

.basis-1\/4 {
  flex-basis: 25%;
}

.basis-1\/5 {
  flex-basis: 20%;
}

.basis-1\/6 {
  flex-basis: 16.666667%;
}

.basis-10 {
  flex-basis: 2.5rem;
}

.basis-10\/12 {
  flex-basis: 83.333333%;
}

.basis-11 {
  flex-basis: 2.75rem;
}

.basis-11\/12 {
  flex-basis: 91.666667%;
}

.basis-12 {
  flex-basis: 3rem;
}

.basis-14 {
  flex-basis: 3.5rem;
}

.basis-16 {
  flex-basis: 4rem;
}

.basis-2 {
  flex-basis: 0.5rem;
}

.basis-2\.5 {
  flex-basis: 0.625rem;
}

.basis-2\/12 {
  flex-basis: 16.666667%;
}

.basis-2\/3 {
  flex-basis: 66.666667%;
}

.basis-2\/4 {
  flex-basis: 50%;
}

.basis-2\/5 {
  flex-basis: 40%;
}

.basis-2\/6 {
  flex-basis: 33.333333%;
}

.basis-20 {
  flex-basis: 5rem;
}

.basis-24 {
  flex-basis: 6rem;
}

.basis-28 {
  flex-basis: 7rem;
}

.basis-3 {
  flex-basis: 0.75rem;
}

.basis-3\.5 {
  flex-basis: 0.875rem;
}

.basis-3\/12 {
  flex-basis: 25%;
}

.basis-3\/4 {
  flex-basis: 75%;
}

.basis-3\/5 {
  flex-basis: 60%;
}

.basis-3\/6 {
  flex-basis: 50%;
}

.basis-32 {
  flex-basis: 8rem;
}

.basis-36 {
  flex-basis: 9rem;
}

.basis-4 {
  flex-basis: 1rem;
}

.basis-4\/12 {
  flex-basis: 33.333333%;
}

.basis-4\/5 {
  flex-basis: 80%;
}

.basis-4\/6 {
  flex-basis: 66.666667%;
}

.basis-40 {
  flex-basis: 10rem;
}

.basis-44 {
  flex-basis: 11rem;
}

.basis-48 {
  flex-basis: 12rem;
}

.basis-5 {
  flex-basis: 1.25rem;
}

.basis-5\/12 {
  flex-basis: 41.666667%;
}

.basis-5\/6 {
  flex-basis: 83.333333%;
}

.basis-52 {
  flex-basis: 13rem;
}

.basis-56 {
  flex-basis: 14rem;
}

.basis-6 {
  flex-basis: 1.5rem;
}

.basis-6\/12 {
  flex-basis: 50%;
}

.basis-60 {
  flex-basis: 15rem;
}

.basis-64 {
  flex-basis: 16rem;
}

.basis-7 {
  flex-basis: 1.75rem;
}

.basis-7\/12 {
  flex-basis: 58.333333%;
}

.basis-72 {
  flex-basis: 18rem;
}

.basis-8 {
  flex-basis: 2rem;
}

.basis-8\/12 {
  flex-basis: 66.666667%;
}

.basis-80 {
  flex-basis: 20rem;
}

.basis-9 {
  flex-basis: 2.25rem;
}

.basis-9\/12 {
  flex-basis: 75%;
}

.basis-96 {
  flex-basis: 24rem;
}

.basis-auto {
  flex-basis: auto;
}

.basis-full {
  flex-basis: 100%;
}

.basis-px {
  flex-basis: 1px;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.grid-flow-row {
  grid-auto-flow: row;
}

.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));
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.content-normal {
  align-content: normal;
}

.content-center {
  align-content: center;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-evenly {
  align-content: space-evenly;
}

.content-baseline {
  align-content: baseline;
}

.content-stretch {
  align-content: stretch;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-normal {
  justify-content: normal;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-stretch {
  justify-content: stretch;
}

.justify-items-start {
  justify-items: start;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-stretch {
  justify-items: stretch;
}

.gap-0 {
  gap: 0px;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-11 {
  gap: 2.75rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-14 {
  gap: 3.5rem;
}

.gap-16 {
  gap: 4rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-20 {
  gap: 5rem;
}

.gap-24 {
  gap: 6rem;
}

.gap-28 {
  gap: 7rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-32 {
  gap: 8rem;
}

.gap-36 {
  gap: 9rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-40 {
  gap: 10rem;
}

.gap-44 {
  gap: 11rem;
}

.gap-48 {
  gap: 12rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-52 {
  gap: 13rem;
}

.gap-56 {
  gap: 14rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-60 {
  gap: 15rem;
}

.gap-64 {
  gap: 16rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-72 {
  gap: 18rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-80 {
  gap: 20rem;
}

.gap-9 {
  gap: 2.25rem;
}

.gap-96 {
  gap: 24rem;
}

.gap-px {
  gap: 1px;
}

.gap-x-0 {
  -moz-column-gap: 0px;
       column-gap: 0px;
}

.gap-x-0\.5 {
  -moz-column-gap: 0.125rem;
       column-gap: 0.125rem;
}

.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}

.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}

.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}

.gap-x-11 {
  -moz-column-gap: 2.75rem;
       column-gap: 2.75rem;
}

.gap-x-12 {
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}

.gap-x-14 {
  -moz-column-gap: 3.5rem;
       column-gap: 3.5rem;
}

.gap-x-16 {
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}

.gap-x-20 {
  -moz-column-gap: 5rem;
       column-gap: 5rem;
}

.gap-x-24 {
  -moz-column-gap: 6rem;
       column-gap: 6rem;
}

.gap-x-28 {
  -moz-column-gap: 7rem;
       column-gap: 7rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-3\.5 {
  -moz-column-gap: 0.875rem;
       column-gap: 0.875rem;
}

.gap-x-32 {
  -moz-column-gap: 8rem;
       column-gap: 8rem;
}

.gap-x-36 {
  -moz-column-gap: 9rem;
       column-gap: 9rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-40 {
  -moz-column-gap: 10rem;
       column-gap: 10rem;
}

.gap-x-44 {
  -moz-column-gap: 11rem;
       column-gap: 11rem;
}

.gap-x-48 {
  -moz-column-gap: 12rem;
       column-gap: 12rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-52 {
  -moz-column-gap: 13rem;
       column-gap: 13rem;
}

.gap-x-56 {
  -moz-column-gap: 14rem;
       column-gap: 14rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-60 {
  -moz-column-gap: 15rem;
       column-gap: 15rem;
}

.gap-x-64 {
  -moz-column-gap: 16rem;
       column-gap: 16rem;
}

.gap-x-7 {
  -moz-column-gap: 1.75rem;
       column-gap: 1.75rem;
}

.gap-x-72 {
  -moz-column-gap: 18rem;
       column-gap: 18rem;
}

.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-x-80 {
  -moz-column-gap: 20rem;
       column-gap: 20rem;
}

.gap-x-9 {
  -moz-column-gap: 2.25rem;
       column-gap: 2.25rem;
}

.gap-x-96 {
  -moz-column-gap: 24rem;
       column-gap: 24rem;
}

.gap-x-px {
  -moz-column-gap: 1px;
       column-gap: 1px;
}

.gap-y-0 {
  row-gap: 0px;
}

.gap-y-0\.5 {
  row-gap: 0.125rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-1\.5 {
  row-gap: 0.375rem;
}

.gap-y-10 {
  row-gap: 2.5rem;
}

.gap-y-11 {
  row-gap: 2.75rem;
}

.gap-y-12 {
  row-gap: 3rem;
}

.gap-y-14 {
  row-gap: 3.5rem;
}

.gap-y-16 {
  row-gap: 4rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-2\.5 {
  row-gap: 0.625rem;
}

.gap-y-20 {
  row-gap: 5rem;
}

.gap-y-24 {
  row-gap: 6rem;
}

.gap-y-28 {
  row-gap: 7rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-3\.5 {
  row-gap: 0.875rem;
}

.gap-y-32 {
  row-gap: 8rem;
}

.gap-y-36 {
  row-gap: 9rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.gap-y-40 {
  row-gap: 10rem;
}

.gap-y-44 {
  row-gap: 11rem;
}

.gap-y-48 {
  row-gap: 12rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.gap-y-52 {
  row-gap: 13rem;
}

.gap-y-56 {
  row-gap: 14rem;
}

.gap-y-6 {
  row-gap: 1.5rem;
}

.gap-y-60 {
  row-gap: 15rem;
}

.gap-y-64 {
  row-gap: 16rem;
}

.gap-y-7 {
  row-gap: 1.75rem;
}

.gap-y-72 {
  row-gap: 18rem;
}

.gap-y-8 {
  row-gap: 2rem;
}

.gap-y-80 {
  row-gap: 20rem;
}

.gap-y-9 {
  row-gap: 2.25rem;
}

.gap-y-96 {
  row-gap: 24rem;
}

.gap-y-px {
  row-gap: 1px;
}

.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.self-baseline {
  align-self: baseline;
}

.justify-self-auto {
  justify-self: auto;
}

.justify-self-start {
  justify-self: start;
}

.justify-self-end {
  justify-self: end;
}

.justify-self-center {
  justify-self: center;
}

.justify-self-stretch {
  justify-self: stretch;
}

.overflow-auto {
  overflow: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-8 {
  border-width: 8px;
}

.\!border-y-0 {
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
}

.\!border-b-0 {
  border-bottom-width: 0px !important;
}

.\!border-t-0 {
  border-top-width: 0px !important;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-t-2 {
  border-top-width: 2px;
}

.\!border-\[--layout-color-dark-blue\] {
  border-color: var(--layout-color-dark-blue) !important;
}

.\!border-\[--layout-color-dark-green\] {
  border-color: var(--layout-color-dark-green) !important;
}

.border-\[--app-font-color\] {
  border-color: var(--app-font-color);
}

.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity));
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity));
}

.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity));
}

.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
}

.border-blue-50 {
  --tw-border-opacity: 1;
  border-color: rgb(239 246 255 / var(--tw-border-opacity));
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.border-blue-700 {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity));
}

.border-blue-800 {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity));
}

.border-blue-900 {
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity));
}

.border-blue-950 {
  --tw-border-opacity: 1;
  border-color: rgb(23 37 84 / var(--tw-border-opacity));
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
}

.border-gray-50 {
  --tw-border-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-border-opacity));
}

.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity));
}

.border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity));
}

.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
}

.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity));
}

.border-gray-900 {
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity));
}

.border-gray-950 {
  --tw-border-opacity: 1;
  border-color: rgb(3 7 18 / var(--tw-border-opacity));
}

.border-green-100 {
  --tw-border-opacity: 1;
  border-color: rgb(220 252 231 / var(--tw-border-opacity));
}

.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity));
}

.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity));
}

.border-green-400 {
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity));
}

.border-green-50 {
  --tw-border-opacity: 1;
  border-color: rgb(240 253 244 / var(--tw-border-opacity));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity));
}

.border-green-600 {
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity));
}

.border-green-700 {
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity));
}

.border-green-800 {
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity));
}

.border-green-900 {
  --tw-border-opacity: 1;
  border-color: rgb(20 83 45 / var(--tw-border-opacity));
}

.border-green-950 {
  --tw-border-opacity: 1;
  border-color: rgb(5 46 22 / var(--tw-border-opacity));
}

.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity));
}

.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity));
}

.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
}

.border-red-50 {
  --tw-border-opacity: 1;
  border-color: rgb(254 242 242 / var(--tw-border-opacity));
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
}

.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.border-red-700 {
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity));
}

.border-red-800 {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity));
}

.border-red-900 {
  --tw-border-opacity: 1;
  border-color: rgb(127 29 29 / var(--tw-border-opacity));
}

.border-red-950 {
  --tw-border-opacity: 1;
  border-color: rgb(69 10 10 / var(--tw-border-opacity));
}

.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity));
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity));
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity));
}

.border-slate-400 {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity));
}

.border-slate-50 {
  --tw-border-opacity: 1;
  border-color: rgb(248 250 252 / var(--tw-border-opacity));
}

.border-slate-500 {
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity));
}

.border-slate-600 {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity));
}

.border-slate-700 {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity));
}

.border-slate-800 {
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / var(--tw-border-opacity));
}

.border-slate-900 {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity));
}

.border-slate-950 {
  --tw-border-opacity: 1;
  border-color: rgb(2 6 23 / var(--tw-border-opacity));
}

.border-transparent {
  border-color: transparent;
}

.border-violet-500 {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity));
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.border-yellow-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 249 195 / var(--tw-border-opacity));
}

.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity));
}

.border-yellow-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / var(--tw-border-opacity));
}

.border-yellow-400 {
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / var(--tw-border-opacity));
}

.border-yellow-50 {
  --tw-border-opacity: 1;
  border-color: rgb(254 252 232 / var(--tw-border-opacity));
}

.border-yellow-500 {
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / var(--tw-border-opacity));
}

.border-yellow-600 {
  --tw-border-opacity: 1;
  border-color: rgb(202 138 4 / var(--tw-border-opacity));
}

.border-yellow-700 {
  --tw-border-opacity: 1;
  border-color: rgb(161 98 7 / var(--tw-border-opacity));
}

.border-yellow-800 {
  --tw-border-opacity: 1;
  border-color: rgb(133 77 14 / var(--tw-border-opacity));
}

.border-yellow-900 {
  --tw-border-opacity: 1;
  border-color: rgb(113 63 18 / var(--tw-border-opacity));
}

.border-yellow-950 {
  --tw-border-opacity: 1;
  border-color: rgb(66 32 6 / var(--tw-border-opacity));
}

.border-t-blue-500 {
  --tw-border-opacity: 1;
  border-top-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.bg-\[--layout-color-lite-blue\] {
  background-color: var(--layout-color-lite-blue);
}

.bg-\[--layout-color-lite-green\] {
  background-color: var(--layout-color-lite-green);
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}

.bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
}

.bg-blue-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
}

.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

.bg-blue-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
}

.bg-blue-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
}

.bg-blue-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(23 37 84 / var(--tw-bg-opacity));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}

.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}

.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

.bg-gray-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(3 7 18 / var(--tw-bg-opacity));
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}

.bg-green-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
}

.bg-green-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
}

.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

.bg-green-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}

.bg-green-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / var(--tw-bg-opacity));
}

.bg-green-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 83 45 / var(--tw-bg-opacity));
}

.bg-green-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 46 22 / var(--tw-bg-opacity));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

.bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}

.bg-red-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

.bg-red-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}

.bg-red-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
}

.bg-red-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
}

.bg-red-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(69 10 10 / var(--tw-bg-opacity));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}

.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
}

.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
}

.bg-slate-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
}

.bg-slate-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity));
}

.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
}

.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}

.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
}

.bg-slate-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity));
}

.bg-transparent {
  background-color: transparent;
}

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

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
}

.bg-yellow-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
}

.bg-yellow-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
}

.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}

.bg-yellow-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
}

.bg-yellow-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(161 98 7 / var(--tw-bg-opacity));
}

.bg-yellow-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(133 77 14 / var(--tw-bg-opacity));
}

.bg-yellow-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(113 63 18 / var(--tw-bg-opacity));
}

.bg-yellow-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(66 32 6 / var(--tw-bg-opacity));
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-\[18pt\] {
  padding-left: 18pt;
  padding-right: 18pt;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-0 {
  padding-left: 0px;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-12 {
  padding-left: 3rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pr-0 {
  padding-right: 0px;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pt-0 {
  padding-top: 0px;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.\!text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

.\!text-3xl {
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
}

.\!text-4xl {
  font-size: 2.25rem !important;
  line-height: 2.5rem !important;
}

.\!text-5xl {
  font-size: 3rem !important;
  line-height: 1 !important;
}

.\!text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

.\!text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

.\!text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.\!text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}

.\!text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-\[1\.8rem\] {
  font-size: 1.8rem;
}

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

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.\!text-red-500 {
  --tw-text-opacity: 1 !important;
  color: rgb(239 68 68 / var(--tw-text-opacity)) !important;
}

.text-\[--app-font-color\] {
  color: var(--app-font-color);
}

.text-\[--layout-color-dark-blue\] {
  color: var(--layout-color-dark-blue);
}

.text-\[--layout-color-dark-red\] {
  color: var(--layout-color-dark-red);
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity));
}

.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity));
}

.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.text-blue-50 {
  --tw-text-opacity: 1;
  color: rgb(239 246 255 / var(--tw-text-opacity));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}

.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity));
}

.text-blue-950 {
  --tw-text-opacity: 1;
  color: rgb(23 37 84 / var(--tw-text-opacity));
}

.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity));
}

.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-gray-50 {
  --tw-text-opacity: 1;
  color: rgb(249 250 251 / var(--tw-text-opacity));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

.text-gray-950 {
  --tw-text-opacity: 1;
  color: rgb(3 7 18 / var(--tw-text-opacity));
}

.text-green-100 {
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity));
}

.text-green-200 {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity));
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity));
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
}

.text-green-50 {
  --tw-text-opacity: 1;
  color: rgb(240 253 244 / var(--tw-text-opacity));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
}

.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity));
}

.text-green-950 {
  --tw-text-opacity: 1;
  color: rgb(5 46 22 / var(--tw-text-opacity));
}

.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity));
}

.text-red-100 {
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity));
}

.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity));
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.text-red-50 {
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / var(--tw-text-opacity));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity));
}

.text-red-950 {
  --tw-text-opacity: 1;
  color: rgb(69 10 10 / var(--tw-text-opacity));
}

.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity));
}

.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity));
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}

.text-slate-50 {
  --tw-text-opacity: 1;
  color: rgb(248 250 252 / var(--tw-text-opacity));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}

.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity));
}

.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}

.text-slate-950 {
  --tw-text-opacity: 1;
  color: rgb(2 6 23 / var(--tw-text-opacity));
}

.text-transparent {
  color: transparent;
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-yellow-100 {
  --tw-text-opacity: 1;
  color: rgb(254 249 195 / var(--tw-text-opacity));
}

.text-yellow-200 {
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / var(--tw-text-opacity));
}

.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity));
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity));
}

.text-yellow-50 {
  --tw-text-opacity: 1;
  color: rgb(254 252 232 / var(--tw-text-opacity));
}

.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity));
}

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity));
}

.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity));
}

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity));
}

.text-yellow-900 {
  --tw-text-opacity: 1;
  color: rgb(113 63 18 / var(--tw-text-opacity));
}

.text-yellow-950 {
  --tw-text-opacity: 1;
  color: rgb(66 32 6 / var(--tw-text-opacity));
}

.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);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.content-none {
  --tw-content: none;
  content: var(--tw-content);
}

/* Définir ici des classes utilitaires (ie. de bas niveau, sans sémantique) */

.stab {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.stabilo {
  /* pour compatibilité */
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.rstab {
  border-width: 2px;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.fstab {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.frstab {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

a.external {
  cursor: ne-resize;
}

img.icon {
  height: 1.2em;
  display: inline;
}

/* changer le curseur des liens quittant le site web */

ul.external a:hover,
li.external a:hover,
a.external:hover
{
  /* cursor: ne-resize; */
  cursor: alias;
}

ul.external a::after,
li.external a::after,
a.external::after
{
  content: "\2934";
  font-weight: bold;
}

/*
Pour le fonctionnement détaillé des layers en CSS
voir : https://css-tricks.com/css-cascade-layers/
La priorité des layouts suit l'ordre de leur déclaration :
base < components < utilities < tout style hors layout
 */

/*
Le layout "base" définit des styles de base qui seront écrasables par tous
les autres layouts.
Utile en particulier pour corriger certains comportements par défaut
- de tailwind : remise de img en inline au lieu de bloc
- et de typographpy : réduction espacement des <li>...
*/

/*
Quelques composants génériques (utilisables via des classes explicites.
Essayer de conserver l'aspect portable de ces fichiers (de Madi)
*/

/*
Les composants spécifiques à l'application
Le layout components définit des styles de bloc sémantique (ou du niveau
d'une page) qui doivent pouvoir être écrasés localement les autres
layouts (e.g. par les classes du layout utilities)
*/

/*
Mes css de la form memit-comp-content-xxx.css sont nécessaires pour
styler les fiches en base de données.
En effet, tailwind ne peut pas deviner automatiquement les classes effectivement
utilisées en base de données pour pouvoir les compiler.
*/

/* @import "mpro-comp-content-contacts.css" layer(components); */

/* @import "mpro-comp-content-course.css" layer(components); */

/* @import "mpro-comp-content-partners.css" layer(components); */

/* @import "mpro-comp-content-planning.css" layer(components); */

/* @import "mpro-comp-content-research.css" layer(components); */

/*
Le layout utilities doit définir des classes de bas niveau comme des
extension aux classes tailwind.
Ces classes doivent pouvoir écraser les classes de composants précédentes.
*/

/* Ce qui suit fonctionne. Mais ne pas y inclure de @import ! */

/*
@layer components {
    .menu {
        @apply !bg-red-300;
    }
}
*/

/*
Pour le uploader, on charge d'abord les styles du module, puis les
modifications éventuelles
*/

/*
    Styles dédiés à la fonctionnalité de chargement de fichier
*/

:root {
  --up-btn-bg-color: #DDF;
  --up-label-bg-color: #DDDDDD;
  --up-bg-color: #EEEEEE;
  --up-fg-color: #0000AA;
  --up-border-color: #0000AA;
  --up-border-tr-color: #CCCCCC;
}

div.uploader {
  background: var(--up-bg-color);
  color : var(--up-fg-color);
  padding: 1ex;
  border-color: var(--up-border-color);
  border: solid 1px;
}

/* On conserve les styles par défaut de l'application */

/*
div.uploader h1,
div.uploader h2 {
    xxxx;
}
*/

/* Un petit reset de précaution pour les icones */

div.uploader img {
  display: inline;
  margin: 0;
  padding: 0;
}

/* La classe label pour le texte associés à des liens ou formulaire */

div.uploader .label {
  display: inline-block;
  color:black;
  background:var(--up-label-bg-color);
  font-size: 85%;
  font-weight:bold;
  min-width: 9rem;
  padding: 6px 4px;
}

/* La classe buttons contient des liens d'actions */

div.uploader .buttons a {
  color: inherit;
  font-size: 90%;
  border: 1px solid #008;
  text-decoration: none;
  padding: 4px;
}

div.uploader .buttons a:hover {
  background-color: var(--up-btn-bg-color);
}

/* La classe path contient les liens très court à élargir (eg. "/") */

div.uploader .buttons.path a {
  padding: 2px 12px;
}

div.uploader form.uploader  {
  display: inline;
  border: none;
  background: inherit;
  background: transparent;
  padding: 0ex ;
}

div.uploader form.uploader input  {
  display: inline;
  background: transparent;
  border: none;
  padding: 0ex ;
}

div.uploader table.files {
  border-collapse: collapse ;
  border: solid 2px var(--up-border-color);
  font-size: 90%;
  color: inherit;
  background: transparent;
  width: 100%;
  margin: 1em auto;
  padding: 0 ;
}

div.uploader table.files tr {
  border: solid 2px var(--up-border-tr-color);
}

div.uploader table.files tr th,
div.uploader table.files tr td {
  border: solid 1px var(--up-border-tr-color);
}

div.uploader table.files tr:nth-child(2n+1) {
  background: #F0F0FF;
}

div.uploader table.files tr:nth-child(2n+2) {
  background: #FFF0F0;
}

div.uploader table.files th {
  padding: 1ex 0 1ex 0;
  text-align: center;
}

div.uploader table.files td {
  padding: 0.5ex 1ex;
  font-family: Courier;
  color: #008;
  /* border-left: solid 1px #008; */
  /* border-right: solid 1px #008; */
  /* border: solid 1px #008; */
}

div.uploader table.files th.button,
div.uploader table.files td.button {
  width: 7ex;
  text-align: center;
}

div.uploader table.files .button a img {
  height:1.1em;
  position:relative;
  bottom:-1px;
  border: none;
}

div.uploader table.files th.size {
  width: 9ex;
}

div.uploader table.files th.date {
  width: 24ex;
  min-width: 24ex;
  /* oui en plus de width ! */
}

div.uploader table.files td.button:hover {
  background-color: var(--up-btn-bg-color);
  /* text-decoration: none; */
}

div.uploader table.files td.size {
  text-align: right;
}

div.uploader table.files td.date {
  text-align: center;
}

div.uploader table.files td.file {
  color: inherit;
}

div.uploader table.files a {
  color: inherit;
  background: inherit;
  text-decoration: none;
}

div.uploader table.files a:link,
div.uploader table.files a:visited,
div.uploader table.files a:active {
  color: inherit;
}

div.uploader table.files  a:hover {
  background-color: var(--up-btn-bg-color);
  /* text-decoration: underline; */
  text-decoration: none;
}

div.uploader table.files .button a {
  color: inherit;
}

div.uploader table.files .button a:hover {
  /* color: yellow; */
  /* background-color: red; */
  text-decoration: none;
}

div.uploader .download.hint {
  font-size: 1.0rem;
  margin: 2ex 0ex 2ex 0ex;
  padding: 0.5ex 2ex ;
  color: #44AA44;
  background: #FFFFAA;
}

div.uploader .flash-msg {
  margin: 2ex 0ex 2ex 0ex;
  border: solid 2px red;
  padding: 1ex 5ex ;
  color: red;
  background: #FFFFDD;
}

/*
    Styles dédiés à la fonctionnalité de chargement de fichier
    N'ajouter ici que les modif complémentaire ou corrigeant les styles par
    défaut du module Uploader
*/

/* Aucune personnalisation pour l'instant. */

div.uploader h2 {
  /* font-size: 120%;
    color: #800;
    background: #FEE;
    text-align: center;
    border-top: solid 2px #800;
    border-bottom: 2px solid #800;
    padding: 1ex; */
  /* @apply
        text-4xl mt-8 mb-8 text-center
        text-[#A83232]
    ; */
}

/*
Les styles suivants sont hors layer. il sont donc prioritaire sur les layers
précédents.
De plus, ces styles hors layer sont toujours compilés par Tailwind (même s'ils
sont pas utilisés). Ceci est indispensable pour définir des styles pour les fiches
contents en base de données. En effet Tailwind n'y a pas accès pendant sa
compilation.
*/

/* Les styles en dur doivent être ajoutés après tous les @import */

body {
  background-color: inherit;
  /* background-color: skyblue; */
}

.selection\:bg-white *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.selection\:bg-white *::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.selection\:text-blue-700 *::-moz-selection {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

.selection\:text-blue-700 *::selection {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

.selection\:bg-white::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.selection\:bg-white::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.selection\:text-blue-700::-moz-selection {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

.selection\:text-blue-700::selection {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

@media (min-width: 640px) {
  .sm\:m-8 {
    margin: 2rem;
  }

  .sm\:text-\[2\.5rem\] {
    font-size: 2.5rem;
  }
}

@media (min-width: 768px) {
  .md\:block {
    display: block;
  }

  .md\:hidden {
    display: none;
  }

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

  .md\:p-4 {
    padding: 1rem;
  }
}

@media print {
  .print\:mt-2 {
    margin-top: 0.5rem;
  }

  .print\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  }

  .print\:bg-none {
    background-image: none;
  }

  .print\:text-\[--app-font-color\] {
    color: var(--app-font-color);
  }
}

.\[\&_\*\]\:m-1 * {
  margin: 0.25rem;
}

.\[\&_\*\]\:border-8 * {
  border-width: 8px;
}

.\[\&_\*\]\:border-gray-600 * {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity));
}

.\[\&_\*\]\:p-2 * {
  padding: 0.5rem;
}

.\[\&_a\:hover\]\:bg-blue-700 a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

.\[\&_a\:hover\]\:bg-green-700 a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}

.\[\&_a\:hover\]\:text-blue-50 a:hover {
  --tw-text-opacity: 1;
  color: rgb(239 246 255 / var(--tw-text-opacity));
}

.\[\&_a\:hover\]\:text-green-50 a:hover {
  --tw-text-opacity: 1;
  color: rgb(240 253 244 / var(--tw-text-opacity));
}

.\[\&_a\]\:rounded a {
  border-radius: 0.25rem;
}

.\[\&_a\]\:border-2 a {
  border-width: 2px;
}

.\[\&_a\]\:border-blue-700 a {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity));
}

.\[\&_a\]\:border-green-700 a {
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity));
}

.\[\&_a\]\:bg-blue-50 a {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}

.\[\&_a\]\:bg-green-50 a {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}

.\[\&_a\]\:px-1 a {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.\[\&_a\]\:text-blue-700 a {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

.\[\&_a\]\:text-green-700 a {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
}

.\[\&_a\]\:no-underline a {
  text-decoration-line: none;
}

.\[\&_div\]\:border-red-600 div {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.\[\&_fieldset\]\:m-2 fieldset {
  margin: 0.5rem;
}

.\[\&_fieldset\]\:rounded fieldset {
  border-radius: 0.25rem;
}

.\[\&_fieldset\]\:border-2 fieldset {
  border-width: 2px;
}

.\[\&_fieldset\]\:border-green-700 fieldset {
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity));
}

.\[\&_fieldset\]\:p-2 fieldset {
  padding: 0.5rem;
}

.\[\&_h2\]\:mt-0 h2 {
  margin-top: 0px;
}

.\[\&_legend\]\:rounded legend {
  border-radius: 0.25rem;
}

.\[\&_legend\]\:border-2 legend {
  border-width: 2px;
}

.\[\&_legend\]\:border-green-700 legend {
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity));
}

.\[\&_legend\]\:bg-green-50 legend {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}

.\[\&_legend\]\:px-2 legend {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_legend\]\:py-1\.5 legend {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_legend\]\:font-bold legend {
  font-weight: 700;
}

.\[\&_li_span\]\:text-sm li span {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.\[\&_li_span\]\:font-bold li span {
  font-weight: 700;
}

.\[\&_li_span\]\:text-black li span {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.\[\&_p\:last-child\]\:border-dotted p:last-child {
  border-style: dotted;
}

.\[\&_p\:not\(\:last-child\)\]\:border-dotted p:not(:last-child) {
  border-style: dotted;
}

.\[\&_p\]\:border-blue-600 p {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.\[\&_pre\]\:text-xs pre {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_td\]\:\!py-0 td {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}