@import "fonts.less";
@import "colors.less";

.system-foundryvtt-reve-de-dragon {
  @import "sheets.less";
  @import "item/monnaie.less";
  @import "item/munition.less";
  @import "item/tarot.less";
  @import "item/tete.less";
  @import "item/queue.less";
  @import "item/souffle.less";
  @import "item/ombre.less";
  @import "item/chant.less";
  @import "item/musique.less";
  @import "item/danse.less";
  @import "item/jeu.less";
  @import "item/recettealchimique.less";
  @import "item/recettecuisine.less";
  @import "item/arme.less";
  @import "item/armure.less";
  @import "item/objet.less";
  @import "item/conteneur.less";
  @import "item/nourritureboisson.less";
  @import "item/gemme.less";
  @import "item/extraitpoetique.less";
  @import "item/nombreastral.less";
  @import "item/casetmr.less";
  @import "item/sortreserve.less";
  @import "item/meditation.less";
  @import "item/oeuvre.less";
  @import "item/livre.less";
  @import "item/faune.less";
  @import "item/herbe.less";
  @import "item/plante.less";
  @import "item/ingredient.less";
  @import "item/service.less";
  @import "item/tache.less";
  @import "item/blessure.less";
  @import "item/maladie.less";
  @import "item/poison.less";
  @import "item/competence.less";
  @import "item/competencecreature.less";
  @import "item/potion.less";
  @import "item/signedraconique.less";
  @import "item/sort.less";
  @import "item/race.less";
  @import "item/rencontre.less";
  @import "item/empoignade.less";
  @import "item/possession.less";
  @import "roll-dialog.less";
  @import "roll-chat.less";

  .window-header {
    background: rgba(0, 0, 0, 0.75);
  }

  .journal-entry-content {
    background: url(../assets/ui/bg_left.webp) no-repeat left top;
    color: var(--rdd-color-text-primary);
  }

  .journal-page-header h1,
  .journal-page-header h2 .journal-page-header h3,
  .journal-page-header h4 {
    color: var(--rdd-color-text-primary);
  }

  .application .window-content {
    margin: 0;
    padding: 0.2rem;
  }
  .dialog-aide-commands .window-content {
    overflow-y: auto;
  }
  .window-app.sheet .window-content,
  .application.sheet .window-content {
    margin: 0.2rem;
    padding: 0;
  }

  .window-app.regles-optionnelles > .window-content,
  .window-app.dialog-encaissement-tables > .window-content,
  .window-app.options-avancees > .window-content,
  .window-app.status-effects > .window-content,
  .window-app.system-compendiums > .window-content,
  #regles-optionnelles > .window-content,
  #dialog-encaissement-tables > .window-content,
  #options-avancees > .window-content,
  #status-effects > .window-content,
  #system-compendiums > .window-content {
    overflow-y: auto;
  }

  .encaissement-tables {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    h2 { color: var(--rdd-color-text-primary); }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 4px 8px; border: 1px solid #7a7971; text-align: center; }
    th { background: rgba(0,0,0,0.1); font-weight: bold; }
    .type-cell { text-align: left; }
  }

  section.window-content div.dialog-buttons {
    margin-top: 1rem;
  }

  .strong-text {
    font-weight: bold;
  }
  i:is(.fas, .far, .fa-solid, .fa-regular, .fa-sharp) {
    font-size: smaller;
  }

  /* =================== En-têtes de feuilles ============ */
  .sheet-header h1.charname {
    height: 48px;
    padding: 0.1rem 0.1rem;
    margin: 0;
    margin-bottom: 0px;
    border: 0;
  }

  .window-app.sheet
    .window-content
    .sheet-header
    h1.charname
    input[type="text"],
  .application.sheet
    .window-content
    .sheet-header
    h1.charname
    input[type="text"] {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .sheet-header div.header-buttons {
    height: 48px;
    padding: 0.1rem 0.1rem;
    margin: 0;
    width: fit-content;
    flex: initial;
  }

  .sheet-header div.header-buttons img.button-img {
    padding: 0.1rem 0.1rem;
    margin: 0;
    width: fit-content;
  }

  .sheet-header div.tmr-buttons {
    padding: 0;
    margin: 0;
    flex: 0;
    flex-direction: column;
  }

  .sheet-header div.tmr-buttons img.button-img {
    max-width: 32px;
    padding: 0;
    margin-top: -8px;
    margin-bottom: -8px;
  }

  .sheet-header
    :is(.header-compteurs, .header-etats, .profile-img, .profile-img-token) {
    padding: 0 0.4rem;
  }
  .sheet-header div.header-etats {
    width: calc(40% - 32px - 1rem);
    height: 48px;
    max-width: fit-content;
    flex: initial;
    flex-grow: 3;
    div div {
      display: flex;
      flex-direction: row;
    }
  }

  .sheet-header :is(.profile-img, .profile-img-token) {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 110px;
    flex: 0 0 110px;
    height: 110px;
    width: 110px;
    padding: 0.2rem;
    object-fit: contain;
    background-color: var(--color-profile-border);
    border: 1px solid var(--color-profile-border);
  }

  .rdd-item-sheet-tarot img.profile-img {
    max-height: 600px;
    max-width: 200px;
    width: max-content;
    margin-right: 0px;
    object-fit: scale-down;
    border: none;
    margin-right: 5px;
    object-position: 50% 0;
    object-fit: contain;
  }
  img.equipement-inutilisable {
    vertical-align: bottom;
    max-width: 1.4rem;
    max-height: 1.4rem;
    border: 1px;
    background: center / contain no-repeat
      url("../icons/templates/icone_parchement_vierge.webp");
  }

  .sheet-header .header-compteurs {
    width: calc(60% - 110px - 1rem);
    text-align: right;
    max-width: fit-content;
  }

  .sheet-header .resource-content {
    width: 2rem;
  }

  /* =================== Navigation ============ */
  .sheet nav.sheet-tabs {
    font-size: 0.7rem;
    font-weight: bold;
    height: 4rem;
    flex: 0 0 4rem;
    margin: 0;
    padding: 0 0 0 0.1rem;
    text-align: center;
    text-transform: uppercase;
    line-height: 2rem;
    border-top: 0 none;
    border-bottom: 0 none;
    color: rgba(52, 52, 52, 0.95);
    background: rgb(245, 245, 240) url(../assets/ui/bg_menu.webp) no-repeat left
      top;
  }
  .sheet nav.sheet-tabs .item,
  nav.sheet-tabs .item {
    position: relative;
    padding: 0.1rem 0.2rem;
    color: rgba(52, 52, 52, 0.95);
  }

  .sheet nav.sheet-tabs .item.active {
    color: #4a0404;
    text-decoration: underline;
    text-shadow: none;
  }

  nav.sheet-tabs .item:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 2rem;
    width: 1px;
    border-right: 1px dashed rgba(52, 52, 52, 0.25);
  }

  /* =================== Fenêtre TMR (V2 dialog) ============ */
  .tmrdialog {
    width: fit-content !important;
    height: fit-content !important;
    max-height: 1024px;
  }
  .tmrdialog .window-content {
    margin: 0;
    padding: 0;
    width: fit-content;
    max-width: fit-content;
    overflow-y: auto;
  }
  .tmrdialog .dialog-content {
    display: contents;
  }
  .tmrdialog .tmr-map {
    width: min-content;
    max-height: 1024px;
    padding: 0;
    font-size: 0;
  }
  .tmrdialog .tmr-actions {
    width: 12rem;
    max-height: fit-content;
    vertical-align: top;
    flex-basis: inherit;
  }

  /* =================== Autres ============ */
  :is(section.scenes-sidebar, section.compendium-sidebar) li.directory-item.folder {
    a {
      text-shadow: 1px 1px 2px var(--rdd-color-text-primary);
      color: var( --color-background-chat-message);
    }
    a:hover {
      text-shadow: 1px 0px 0px #ff6600;
    }
  }
  .tabs .item.active,
  .blessures-list li ul li:first-child:hover,
  i.moral-radio-checkmark-off:hover,
  a:hover {
    text-shadow: 1px 0px 0px #ff6600;
    img {
      filter: drop-shadow(1px 0px 0px #ff6600);
    }
  }

  .rollable:hover,
  .rollable:focus {
    color: #000;
    text-shadow: 0 0 10px red;
    cursor: pointer;
  }

  table {
    border: 1px solid #7a7971;
  }

  .grid,
  .grid-2col {
    display: grid;
    grid-column: span 2 / span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin: 10px 0;
    padding: 0;
  }

  .grid-competence-archetype {
    display: grid;
    grid-column: span 3 / span 3;
    grid-template-columns: 2fr 2fr 1fr;
    gap: 0.5rem;
    margin: 0.5rem 0;
    padding: 0;
  }

  .grid-3col {
    grid-column: span 3 / span 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-4col {
    grid-column: span 4 / span 4;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-5col {
    grid-column: span 5 / span 5;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid-6col {
    grid-column: span 5 / span 5;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid-7col {
    grid-column: span 7 / span 7;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .grid-8col {
    grid-column: span 8 / span 8;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .grid-9col {
    grid-column: span 9 / span 9;
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .grid-10col {
    grid-column: span 10 / span 10;
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .grid-11col {
    grid-column: span 11 / span 11;
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .grid-12col {
    grid-column: span 12 / span 12;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .flex-group-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    padding: 0.1rem;
  }

  .flex-group-left {
    -webkit-box-align: start;
    -webkit-box-pack: start;
    -ms-flex-align: start;
    -ms-flex-pack: start;
    align-items: start;
    justify-content: flex-start;
    text-align: left;
  }

  .flex-group-top {
    vertical-align: top;
    align-self: start;
  }

  .flex-group-right {
    -webkit-box-align: end;
    -webkit-box-pack: end;
    -ms-flex-align: end;
    -ms-flex-pack: end;
    align-items: end;
    justify-content: flex-end;
    text-align: right;
  }

  .flex-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }

  .flex-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .flex-shrink {
    flex: "flex-shrink";
    flex-shrink: 0;
  }
  .flex-grow,
  .flex-grow-3 {
    display: flex;
    flex-grow: 3;
  }
  .flex-grow-0-5 {
    flex-grow: 0.5;
  }
  .flex-grow-1 {
    flex-grow: 1;
  }
  .flex-grow-2 {
    display: flex;
    flex-grow: 2;
  }
  .voyage-liste-survies {
    max-width: 12rem;
  }
  /* Styles limited to foundryvtt-reve-de-dragon sheets */
  .texte-dans-liste {
    text-align: left;
  }
  .equipement-nom {
    flex-grow: 4;
    flex-shrink: 2;
    margin: 0;
    text-align: left;
    display: ruby;
  }
  .equipement-valeur {
    margin: 0;
    flex-grow: 1;
    flex-shrink: 1;
    text-align: center;
  }
  .equipement-detail {
    margin: 0;
    flex-grow: 1;
    flex-shrink: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    min-width: max-content;
  }
  .conteneur-sature {
    color: #c00 !important;
    font-weight: bold;
  }
  .conteneur-capacity-bar {
    width: 5rem;
    height: 0.4rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.2rem;
    overflow: hidden;
    margin: 0 0.3rem;
  }
  .conteneur-capacity-fill {
    height: 100%;
    background: #4a90d9;
    border-radius: 0.2rem;
    transition: width 0.3s;
  }
  .conteneur-parent-badge {
    font-size: 0.7rem;
    color: #666;
    margin-left: 0.3rem;
    &::before {
      content: "(";
    }
    &::after {
      content: ")";
    }
  }

  .inventaire-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
  }
  .inventaire-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
  }
  .fortune-text {
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .sust-buttons .chat-card-button {
    margin: 0;
    font-size: 0.8rem;
    padding: 0.15rem 0.3rem 0rem 0.3rem;
  }

  .blessure-control {
    flex-grow: 1;
    flex-direction: row;
  }
  .blessure-soins {
    flex-direction: row;
    align-content: flex-start;
    justify-content: flex-start;
    margin-right: 2px;
    margin-left: 2px;
    padding: 2px;
  }
  input:is(.blessure-psdone, .blessure-scdone) {
    width: 20px;
  }
  input:is(.blessure-premiers_soins, .blessure-soins_complets) {
    width: calc(100% - 25px);
  }
  .blessure-jours {
    flex-direction: row;
    align-content: flex-start;
    justify-content: flex-start;
  }
  .blessure-localisation {
    flex-direction: row;
    align-content: flex-start;
    justify-content: flex-start;
  }
  .blessure-inactive {
    color: rgba(150, 150, 150, 0.4);
  }
  .blessure-active-2,
  .blessure-active-legere {
    color: rgba(60, 60, 60, 0.9);
    text-shadow: 1px 1px 4px rgba(60, 60, 60, 1);
  }
  .blessure-active-4,
  .blessure-active-grave {
    color: rgba(218, 126, 21, 0.9);
    text-shadow: 1px 1px 4px rgba(60, 60, 60, 1);
  }
  .blessure-active-6,
  .blessure-active-critique {
    color: rgba(173, 36, 26, 0.9);
    text-shadow: 1px 1px 4px rgba(60, 60, 60, 1);
  }
  .rdd-dialog.status-effects li {
      display: flex;
      flex-direction: row;
  }
  .rdd-dialog-select img.select-img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 48px;
    flex: 0 0 48px;
    max-height: 48px;
    max-width: 48px;
    border: 0;
    margin-right: 0.5rem;
    object-fit: cover;
    vertical-align: baseline;
  }

  .rdd-dialog-select li.select-choice {
    vertical-align: baseline;
    padding: 0.1rem;
  }

  .dialog-gerer-herbes {
    .competence-header { padding: 0 3px; }
    .equipement-nom { flex: 2; padding-left: calc(24px + 0.2rem); min-width: 0; }
    .equipement-detail {
      &:nth-child(2) { flex: 1.4; }
      &:nth-child(3) { flex: 0.5; }
      &:nth-child(4) { flex: 0.7; gap: 0.125rem; }
      &:nth-child(5) { flex: 1.6; }
    }
    .item-controls { flex: 0.8; }
    .list-item .equipement-nom { padding-left: 0; }
  }

  .dialog-gerer-potions {
    .competence-header { padding: 0 3px; }
    .equipement-nom { flex: 2.5; padding-left: calc(24px + 0.2rem); min-width: 0; }
    .equipement-nom span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .equipement-detail {
      &:nth-child(2) { flex: 1.2; }
      &:nth-child(3) { flex: 0.6; gap: 0.125rem; }
      &:nth-child(4) { flex: 1.4; }
    }
    .item-controls { flex: 0.8; }
    .list-item .equipement-nom { padding-left: 0; }
  }

  .dialog-gerer-ingredients {
    .competence-header { padding: 0 3px; }
    .equipement-nom { flex: 2; padding-left: calc(24px + 0.2rem); min-width: 0; }
    .equipement-detail {
      &:nth-child(2) { flex: 1.4; }
      &:nth-child(3) { flex: 0.7; gap: 0.125rem; }
      &:nth-child(4) { flex: 1.6; }
    }
    .item-controls { flex: 0.8; }
    .list-item .equipement-nom { padding-left: 0; }
  }

  .dialog-gerer-deniers {
    .competence-header { padding: 0 3px; }
    .equipement-nom { padding-left: calc(24px + 0.2rem); }
    .equipement-detail:nth-child(3) { gap: 0.125rem; }
    .equipement-detail:nth-child(4) { flex: 2; }
    .list-item .equipement-nom { padding-left: 0; }
  }

  .sust-buttons { display: flex; gap: 0.25rem; }

  .btn-voir-tables-encaissement { width: 100%; }

  .tab.hautreve { height: 100%; }

  .oeuvre-buttons { gap: 0.5rem; flex-wrap: wrap; }

  .status-pending { color: #999; }
  .status-rolling { color: #2196F3; }
  .status-success { color: #2a8a2a; }
  .status-failure { color: #c44; }

  .moral-low { font-size: 0.9rem; }

  .export-sort { flex-grow: 0.4; }

  .random-char-right { text-align: right; }
  .encart-sheet-body { margin-bottom: 3rem; }
  #statBlock { width: 100%; height: 200px; }
  .qty-amount { width: 100%; }
  .resultat-created { color: #2a8a2a; font-weight: bold; }

  .dice-img {
    border-width: 0;
    max-width: 1.5rem;
    max-height: 1.5rem;
    vertical-align: top;
  }

  .in-text-img {
    max-width: 1.2em;
    max-height: 1.2em;
    flex-grow: 0;
    margin-right: 0.2rem;
    vertical-align: bottom;
    border: none;
    padding: 0.1rem;
  }
  .context-menu-img {
    max-width: 2rem;
    max-height: 1rem;
    flex-grow: 0;
    margin: 0.2rem 0.3rem 0 0;
    vertical-align: middle;
    border: none;
    padding: 0rem;
  }

  .button-img {
    vertical-align: baseline;
    max-width: 32px;
    max-height: 32px;
    border-width: 0;
    border: 1px solid rgba(0, 0, 0, 0);
  }
  .img-signe-heure {
    vertical-align: bottom;
    max-width: 1.5em;
    max-height: 1.5em;
    border-width: 0;
    display: inline;
  }
  .dimmed {
    opacity: 50%;
  }
  .button-effect-img {
    vertical-align: baseline;
    max-width: 16px;
    max-height: 16px;
    border-width: 0;
  }
  .button-effect-info {
    vertical-align: baseline;
    width: 1.4rem;
    height: 1.4rem;
    background-color: var(--color-tooltip);
    padding: 0.2em;
    border-width: 0;
  }
  .grid-move-tmr {
    display: grid;
  }
  .move-tmr-topleft {
    grid-column: 2/2;
    grid-row: 2/4;
  }
  .move-tmr-top {
    grid-column: 3/3;
    grid-row: 1/3;
  }
  .move-tmr-topright {
    grid-column: 4/4;
    grid-row: 2/4;
  }
  .move-tmr-bottomleft {
    grid-column: 2/2;
    grid-row: 4/6;
  }
  .move-tmr-bottom {
    grid-column: 3/3;
    grid-row: 5/7;
  }
  .move-tmr-bottomright {
    grid-column: 4/4;
    grid-row: 4/6;
  }

  .tmr-move {
    max-height: 32px;
    max-width: 32px;
    border: 0;
    vertical-align: bottom;
  }
  :is(.button-img, .button-effect-img, .tmr-move):hover {
    color: var(--color-controls-hover);
    border: 1px solid var(--color-control-border-hover);
    text-shadow: 1px 0px 0px #ff6600;
    cursor: pointer;
  }

  .small-button-container {
    max-height: 16px;
    max-width: 16px;
    border: 0;
    vertical-align: bottom;
  }

  .foundryvtt-reve-de-dragon .sheet-header .header-fields {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .foundryvtt-reve-de-dragon .sheet-header h1.charname {
    height: 50px;
    padding: 0px;
    margin: 5px 0;
    border-bottom: 0;
  }

  .foundryvtt-reve-de-dragon .sheet-header h1.charname input {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .foundryvtt-reve-de-dragon .sheet-tabs {
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
  }

  .foundryvtt-reve-de-dragon .sheet-body,
  .foundryvtt-reve-de-dragon .sheet-body .tab {
    height: 100%;
  }

  .carac-label {
    font-weight: bold;
    flex-basis: 40%;
  }
  .rdd.sheet {
    .window-content {
      overflow: hidden;
      > form, > section {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
      }
      .sheet-body {
        overflow-y: auto;
        scrollbar-width: auto;
        scrollbar-color: auto;
        .tab {
          padding-bottom: 30px;
        }
        .competence-list {
          width: 100%;
        }
        .carac-list {
          width: 100%;
          flex-grow: 0;

          .caracteristique.streched {
            flex-wrap: nowrap;
            justify-content: stretch;
            flex-basis: 7.5em;
            width: max-content;
          }

          .caracteristique {
            flex-wrap: nowrap;
            justify-content: stretch;

            .carac-value {
              flex-basis: 2rem;
              flex-grow: 0;
            }
            .carac-xp {
              flex-basis: 13%;
              flex-grow: 0;
            }
            .derivee-label {
              flex-grow: 1;
            }
            .derivee-value {
              flex-grow: 0;
              flex-basis: 15%;
              margin-right: 0.2rem;
              margin-left: 0.2rem;
            }
          }
        }
      }
    }
  }

  fieldset {
    border-style: groove;
    border-width: 0.1rem;
    padding-inline: 0.2rem;
    padding-block: 0.1rem;
    margin-inline: 0.1rem;
    margin-block: 0.1rem;
  }

  .prosemirror {
    menu {
      background-color: var(--color-background-chat-message);
    }
  }

  :is(.app, .application).sheet{
    fieldset :is(label, input) {
      font-family: CaslonAntique;
      text-align: justify;
      font-size: 1rem;
      letter-spacing: 1px;
    }
    
    input.attribute-value {
      background-color: rgba(0, 0, 0, 0.05);
      border: 1px solid var(--color-border-light-tertiary);
      padding: 1px 3px;
      height: var(--form-field-height);
      border-radius: 3px;
    }
    
    div.form-group {
      clear: both;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin: 0.1rem 0;
      align-items: center;
    }

    div.form-group.large-editor {
      flex-direction: column;
      align-items: stretch;
    }

    .editor.prosemirror {
      height: fit-content;
      min-height: 12rem;
      overflow: auto;

      .editor-container {
        min-height: 12rem;
        height: calc(100% - 3rem);
        margin: 0;
        flex: none;
      }
    }
  }
  :is(.app, .application).sheet.journal-entry-page .editor.prosemirror{
    height: 100%;
    .editor-container {
      height: calc(100% - 6rem);
    }
  } 

  .large-editor {
    border: 2;
    height: fit-content;
    min-height: 12rem;
    padding: 0 3px;
  }

  .editor {
    border: 2;
    height: fit-content;
    min-height: 6rem;
    padding: 0 3px;
  }

  .medium-editor {
    border: 2;
    min-height: 9rem;
    padding: 0 3px;
    align-items: top;
  }

  .small-editor {
    border: 2;
    min-height: 4rem;
    padding: 0 3px;
  }

  .foundryvtt-reve-de-dragon.sheet
    :is(.large-editor, .editor, .medium-editor, .small-editor) {
    align-items: start;
  }

  .foundryvtt-reve-de-dragon.sheet
    :is(.large-editor, .editor, .medium-editor, .small-editor)
    .editor.prosemirror {
    align-items: normal;
  }

  .foundryvtt-reve-de-dragon .tox .tox-editor-container {
    background: #fff;
  }

  .foundryvtt-reve-de-dragon .tox .tox-edit-area {
    padding: 0 8px;
  }

  .foundryvtt-reve-de-dragon .resource-label {
    font-weight: bold;
    text-transform: uppercase;
  }

  .foundryvtt-reve-de-dragon .tabs {
    height: 40px;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
  }

  .foundryvtt-reve-de-dragon .tabs .item {
    line-height: 40px;
    font-weight: bold;
    color: rgba(52, 52, 52, 0.95);
  }

  .foundryvtt-reve-de-dragon .tabs .item.active {
    text-decoration: underline;
    text-shadow: none;
    color: #4a0404;
  }

  .foundryvtt-reve-de-dragon .item-list {
    list-style: none;
    padding: 0;
    overflow-y: auto;
  }
  .item-list-title {
    flex: 0;
  }

  .foundryvtt-reve-de-dragon .item-list .item-header {
    font-weight: bold;
  }

  .foundryvtt-reve-de-dragon .item-list .item img {
    display: inline;
  }

  .foundryvtt-reve-de-dragon .item-list .item-name {
    margin: 0;
  }

  .competence-list .item-controls,
  .competence-list .item-actions-controls {
    display: contents !important;
  }
  .competence-list .item-actions-controls.hidden-controls,
  .competence-list .item-controls.hidden-controls {
    display: none !important;
  }
  .competence-header .item-actions-controls{
    flex-shrink: 2;
    flex-grow: 2;
  }
  .item-actions-controls,
  .item-controls {
    margin: 0;
    flex-grow: 1;
    flex-shrink: 1;
    align-items: end;
    text-align: right;
    min-width: max-content;
    flex-basis: fit-content;
    vertical-align: baseline;
    img {
      vertical-align: text-bottom;
      display: inline;
      max-width: 1rem;
      max-height: 1rem;
      margin: 0 0.1rem;
      border: none;
      filter: invert(0.8);
    }

    i:is(.fas, .fa, .fa-solid, .fa-regular) {
      font-size: 0.8em;
      color: var(--color-controls-light);
    }

    a:hover {
      text-shadow: 1px 0px 0px #ff6600;
    }

    a img:hover{
      opacity: 0.6;
      filter: drop-shadow(1px 1px 1px #009966) invert(0.8);
    }

    a i:is(.fas, .far, .fa-solid, .fa-regular):hover {
      opacity: 0.6;
    }
  }

  .rdd-roll-dialog .description-sort {
    max-width: 550px;
  }
  .rdd-roll-dialog div.dialog-content input {
    font-size: 1rem;
  }
  .rdd-roll-dialog div.dialog-content input[type="checkbox"] {
    width: 1rem;
    vertical-align: sub;
  }
  .rdd-roll-part {
    align-items: center;
    border-radius: 0.5rem;
    padding: 3px;
    background: var(--gradient-gold);
  }
  .rdd-roll-sign {
    border-radius: 0.5rem;
    padding: 3px;
    background: var(--gradient-silver);
  }
  .rdd-roll-norm {
    border-radius: 0.5rem;
    padding: 3px;
    background: var(--gradient-green);
  }
  .rdd-roll-notSign,
  .rdd-roll-echec {
    border-radius: 0.5rem;
    padding: 3px;
    background: var(--gradient-red);
  }
  .rdd-roll-epart {
    border-radius: 0.5rem;
    padding: 3px;
    background: var(--gradient-violet);
  }
  .rdd-roll-etotal {
    border-radius: 0.5rem;
    padding: 3px;
    background: var(--gradient-purple-black);
  }
  .rdd-diviseur {
    border-radius: 0.5rem;
    padding: 3px;
    background: var(--gradient-red);
  }

  .rdd-niveau-requis {
    font-size: 0.8rem;
    text-align: right;
  }

  .placeholder-ajustements {
    flex-direction: column;
  }
  .table-resolution-carac {
    background-color: yellow;
  }

  .table-resolution-target {
    font-weight: bold;
    background-color: lightblue;
  }

  span.table-proba-reussite {
    font-size: 0.8rem;
    padding: 5px;
  }

  .poesie-extrait {
    max-height: 8rem;
    font-size: 0.8rem;
    font-style: italic;
    color: rgba(82, 17, 131, 0.9);
    overflow-y: scroll;
    width: 100%;
  }

  .poesie-reference {
    font-size: 0.7rem;
    text-align: right;
  }

  .type-compendium {
    font-size: 0.6rem;
  }
  .window-app.sheet .window-content .sheet-body,
  .application .window-content,
  .journal-entry .journal-sidebar {
    background: url(../assets/ui/bg_left.webp) no-repeat left top;
    color: var(--rdd-color-text-primary);

    label, .hint, .permissions-list, nav.tabs {
      color: var(--rdd-color-text-primary);
    }
    button .count,
    button {
      background-color: var(--background-color-button);
      color: var(--rdd-color-text-primary);
    }
  }

  /* ======================================== */
  /* Sheet  */
  .window-app .window-content,
  .application .window-content {
    background: url(../assets/ui/bg_left.webp) no-repeat left top;
    color: var(--rdd-color-text-primary);

    .sheet-header {
      background: #011d33 url(../assets/ui/bg_header.webp) no-repeat left top;

      label,
      .hint,
      .permissions-list,
      nav.tabs,
      nav.tabs button,
      nav.tabs button .count,
      div,
      button {
        color: rgba(255, 255, 255, 0.9);
      }
      input {
        //color: rgba(255, 255, 255, 0);
        color: rgba(255, 255, 255, 0.9);
        border: 0 none;
        margin-bottom: 0.2rem;
      }
      input[type="checkbox"] {
        // background-color: hsla(268, 41%, 56%, 0.9);
        color: rgba(255, 255, 255, 0.75);
      }
    }
  }

  :is(.window-app, .application).sheet .window-content :is(input[type="text"], input[type="number"], select) {
    background: var(--rdd-input-background);
    border: 1px solid var(--rdd-color-border-input);
    color: var(--rdd-color-text-primary);
  }
  :is(.window-app, .application).sheet .window-content .sheet-header :is(input[type="text"], input[type="number"], select) {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    border: 0 none;
  }

  :is(.window-app, .application).sheet .window-content .sheet-body
  :is(input.carac-value, input.carac-xp, input.derivee-value, input.competence-value, input.competence-xp, input.competence-carac, input.competence-damage, input.competence-archetype) {
    height: 1.6rem;
    line-height: normal;
    padding: 0 0.2rem;
  }

  input[type="number"] {
    text-align: right;
    padding-right: 0.5rem;
    max-width: 7rem;
  }

  select:is(.number-x, .number-x2, .number-x3, .number-x4, .number-x5) {
    padding-right: 0.2rem;
    text-align: center;
  }
  input:is(.number, .number-x, .number-x2, .number-x3, .number-x4, .number-x5) {
    padding-right: 0.2rem;
    text-align: right;
  }
  :is(input, select).number-x {
    max-width: 1.4rem;
    min-width: 1rem;
  }
  :is(input, select).number-x2 {
    max-width: 2.4rem;
    min-width: 2rem;
  }
  :is(input, select).number-x3 {
    max-width: 3.4rem;
    min-width: 3rem;
  }
  :is(input, select).number-x4 {
    max-width: 4.4rem;
    min-width: 4rem;
  }
  :is(input, select).number-x5 {
    max-width: 4.4rem;
  }

  form.rdddialogchrono input[type="datetime-local"] {
    min-width: 20px;
    padding: 0;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-border-dark);
    width: calc(100% - 2px);
    height: var(--form-field-height);
    margin: 0;
    color: var(--rdd-color-text-primary);
    border-radius: 0.2rem;
  }
  form.app-personnage-aleatoire {
    padding: 0.5rem 1rem;
    gap: 0.3rem;

    h2 {
      min-width: 30rem;
      font-family: CaslonAntique;
      font-size: 1.6rem;
      font-weight: normal;
      color: var(--rdd-color-text-primary);
      text-align: center;
      margin: 0 0 0.5rem 0;
      border-bottom: 1px solid var(--rdd-color-border-input) !important;
      padding-bottom: 0.3rem;
    }

    .random-field {
      display: flex !important;
      flex-direction: row;
      align-items: center;
      padding: 2px 0;
      gap: 0.3rem;

      > label {
        flex: 0 0 10rem !important;
        font-family: CaslonAntique;
        font-size: 1.2rem;
        font-weight: 700 !important;
        color: var(--rdd-color-text-primary);
        padding-left: 0.3rem;
        margin: 0;
      }

      > input,
      > select {
        flex: 1 !important;
        background: var(--rdd-input-background);
        border: 1px solid var(--rdd-color-border-input);
        color: var(--rdd-color-text-primary);
        padding: 2px 4px;
        border-radius: 0.2rem;
        font-family: CaslonAntique;
        font-size: 1.1rem;
        height: auto;
      }

      > input[type="number"] {
        max-width: 7rem;
        text-align: right;
        padding-right: 0.5rem;
      }

      .item-controls {
        flex: 0 0 auto;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 0.2rem;
        margin: 0;

        input[type="checkbox"] {
          flex: 0 0 16px !important;
          width: 16px;
          height: 16px;
          margin: 0;
        }

        a {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 1.6rem;
          height: 1.6rem;
          border-radius: 0.2rem;
          text-decoration: none;

          i {
            font-size: 0.9rem;
            color: var(--color-controls-light);
          }

          &:hover {
            text-shadow: 1px 0 0 #ff6600;
            i { opacity: 0.6; }
          }
        }
      }
    }

    .random-char-right {
      text-align: right;
      margin: 0.3rem 0;
    }

    hr {
      border: none;
      border-top: 1px solid var(--rdd-color-border-input) !important;
      margin: 0.4rem 0;
    }

    .flexrow.buttons {
      display: flex !important;
      flex-direction: row;
      gap: 0.5rem;
      justify-content: flex-end;

      button {
        flex: 0 0 auto;
        min-width: 10rem;
        padding: 0.3rem 1rem;
        font-family: CaslonAntique;
        font-size: 1.1rem;
      }
    }
  }
  .DialogChronologie {
    .rdddialogchrono {
      padding: 0.5rem 1rem;
      font-family: CaslonAntique;
      font-size: 1.1rem;

      .flexcol { gap: 0.3rem; }

      .form-group {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 2px 0;
        gap: 0.3rem;

        > label {
          flex: 0 0 8rem;
          font-weight: 700;
          color: var(--rdd-color-text-primary);
        }

        > input,
        > select,
        > textarea {
          flex: 1;
          background: var(--rdd-input-background);
          border: 1px solid var(--rdd-color-border-input);
          color: var(--rdd-color-text-primary);
          padding: 2px 4px;
          border-radius: 0.2rem;
          font-family: CaslonAntique;
          font-size: 1rem;
        }

        > textarea {
          min-height: 4rem;
          resize: vertical;
        }

        > select { height: auto; }

        &.chronologie-preset {
          label { flex: 0 0 8rem; }
          .timestamp-form {
            flex: 1;
            display: flex;
            flex-direction: row;
            gap: 0.2rem;
            align-items: center;
            select, input { flex: 1; }
          }
        }

        hr {
          flex: 1;
          border: none;
          border-top: 1px solid var(--rdd-color-border-input);
          margin: 0;
        }
      }

      button.chronologie-ajouter {
        width: 100%;
        padding: 0.3rem 1rem;
        font-family: CaslonAntique;
        font-size: 1.1rem;
        background: var(--background-custom-button);
        color: var(--major-button-color);
        border: 2px ridge #846109;
        border-radius: 0.2rem;
        cursor: pointer;

        &:hover {
          background: var(--background-custom-button-hover);
        }
      }

      .chronologie-preset-show,
      .chronologie-preset-hide {
        cursor: pointer;
        i { font-size: 0.9rem; color: var(--color-controls-light); }
        &:hover i { opacity: 0.6; }
      }
    }
  }
  .rdd-dialog-calendar-editor {
    padding: 0.5rem 1rem;
    font-family: CaslonAntique;
    font-size: 1.1rem;

    .flexcol.calendar-timestamp-edit {
      gap: 0.2rem;

      .flexrow {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.2rem;

        > label {
          flex: 0 0 8rem;
          font-weight: 700;
          color: var(--rdd-color-text-primary);
        }

        > input,
        > select {
          flex: 1;
          background: var(--rdd-input-background);
          border: 1px solid var(--rdd-color-border-input);
          color: var(--rdd-color-text-primary);
          padding: 2px 4px;
          border-radius: 0.2rem;
          font-family: CaslonAntique;
          font-size: 1rem;
        }

        > input[type="number"] {
          max-width: 4rem;
          text-align: right;
        }

        img {
          width: 1.2rem;
          height: 1.2rem;
        }
      }
    }
  }
  .rdd-calendar-astrologie {
    &.application .window-content {
      backdrop-filter: none;
    }
    form {
      gap: 0;
      > .flexcol { gap: 2px; }
      .form-group { margin: 0; }
      .chat-card-button { font-size: 0.7rem; padding: 1px 4px; }
      select { font-size: 0.7rem; padding: 0 2px; }
      label { font-size: 0.7rem; }
    }
    div.theme-astral {
      width: 14rem;
      margin: 0.2rem;
    }
    div.horloge-roue {
      position: relative;
      left: calc(50% - 6.5rem);
      width: 13rem;
      height: 13rem;
      div.horloge-heure {
        position: absolute;
        width: 1.8rem;
        height: 1.8rem;
        img.horloge-heure-img {
          width: 2rem;
          height: 2rem;
        }
      }
    }
    
      div.horloge-heure.heure-01 {
        top: calc(50% - 1rem + sin(-180deg) * 41%);
        left: calc(50% - 1rem + cos(-180deg) * 41%);
      }
      div.horloge-heure.heure-02 {
        top: calc(50% - 1rem + sin(-150deg) * 41%);
        left: calc(50% - 1rem + cos(-150deg) * 41%);
      }
      div.horloge-heure.heure-03 {
        top: calc(50% - 1rem + sin(-120deg) * 41%);
        left: calc(50% - 1rem + cos(-120deg) * 41%);
      }
      div.horloge-heure.heure-04 {
        top: calc(50% - 1rem + sin(-90deg) * 41%);
        left: calc(50% - 1rem + cos(-90deg) * 41%);
      }
      div.horloge-heure.heure-05 {
        top: calc(50% - 1rem + sin(-60deg) * 41%);
        left: calc(50% - 1rem + cos(-60deg) * 41%);
      }
      div.horloge-heure.heure-06 {
        top: calc(50% - 1rem + sin(-30deg) * 41%);
        left: calc(50% - 1rem + cos(-30deg) * 41%);
      }
      div.horloge-heure.heure-07 {
        top: calc(50% - 1rem + sin(-0deg) * 41%);
        left: calc(50% - 1rem + cos(-0deg) * 41%);
      }
      div.horloge-heure.heure-08 {
        top: calc(50% - 1rem + sin(30deg) * 41%);
        left: calc(50% - 1rem + cos(30deg) * 41%);
      }
      div.horloge-heure.heure-09 {
        top: calc(50% - 1rem + sin(60deg) * 41%);
        left: calc(50% - 1rem + cos(60deg) * 41%);
      }
      div.horloge-heure.heure-10 {
        top: calc(50% - 1rem + sin(90deg) * 41%);
        left: calc(50% - 1rem + cos(90deg) * 41%);
      }
      div.horloge-heure.heure-11 {
        top: calc(50% - 1rem + sin(120deg) * 41%);
        left: calc(50% - 1rem + cos(120deg) * 41%);
      }
      div.horloge-heure.heure-12 {
        top: calc(50% - 1rem + sin(150deg) * 41%);
        left: calc(50% - 1rem + cos(150deg) * 41%);
      }

      div.horloge-ajustement.heure-01 {
        top: calc(50% - 0.4rem + sin(180deg) * 28%);
        left: calc(50% - 0.4rem + cos(180deg) * 28%);
      }
      div.horloge-ajustement.heure-02 {
        top: calc(50% - 0.4rem + sin(-150deg) * 28%);
        left: calc(50% - 0.4rem + cos(-150deg) * 28%);
      }
      div.horloge-ajustement.heure-03 {
        top: calc(50% - 0.4rem + sin(-120deg) * 28%);
        left: calc(50% - 0.4rem + cos(-120deg) * 28%);
      }
      div.horloge-ajustement.heure-04 {
        top: calc(50% - 0.4rem + sin(-90deg) * 28%);
        left: calc(50% - 0.4rem + cos(-90deg) * 28%);
      }
      div.horloge-ajustement.heure-05 {
        top: calc(50% - 0.4rem + sin(-60deg) * 28%);
        left: calc(50% - 0.4rem + cos(-60deg) * 28%);
      }
      div.horloge-ajustement.heure-06 {
        top: calc(50% - 0.4rem + sin(-30deg) * 28%);
        left: calc(50% - 0.4rem + cos(-30deg) * 28%);
      }
      div.horloge-ajustement.heure-07 {
        top: calc(50% - 0.4rem + sin(0deg) * 28%);
        left: calc(50% - 0.4rem + cos(0deg) * 28%);
      }
      div.horloge-ajustement.heure-08 {
        top: calc(50% - 0.4rem + sin(30deg) * 28%);
        left: calc(50% - 0.4rem + cos(30deg) * 28%);
      }
      div.horloge-ajustement.heure-09 {
        top: calc(50% - 0.4rem + sin(60deg) * 28%);
        left: calc(50% - 0.4rem + cos(60deg) * 28%);
      }
      div.horloge-ajustement.heure-10 {
        top: calc(50% - 0.4rem + sin(90deg) * 28%);
        left: calc(50% - 0.4rem + cos(90deg) * 28%);
      }
      div.horloge-ajustement.heure-11 {
        top: calc(50% - 0.4rem + sin(120deg) * 28%);
        left: calc(50% - 0.4rem + cos(120deg) * 28%);
      }
      div.horloge-ajustement.heure-12 {
        top: calc(50% - 0.4rem + sin(150deg) * 28%);
        left: calc(50% - 0.4rem + cos(150deg) * 28%);
      }

  }

  .window-app .window-content,
  .window-app.sheet .window-content .sheet-body,
  .application .window-content {
    background: url(../assets/ui/bg_left.webp) no-repeat left top;
  }

  section.sheet-body {
    padding: 0.25rem 0.5rem;
  }

  .sheet header.sheet-header h1 {
    flex: 3;
  }
  .sheet header.sheet-header img.button-img {
    padding: 1px;
    margin: 1px;
  }

  .sheet .tab[data-tab] {
    padding: 0;
  }

  section.sheet-body:after {
    content: "";
    display: block;
    clear: both;
  }
  a.rdd-world-content-link i {
    color: var(--color-text-dark-inactive);
    margin-right: 0.25em;
  }
  a.rdd-world-content-link {
    background: hsla(280, 50%, 50%, 0.1);
    padding: 1px 4px;
    border: 1px solid var(--color-border-dark-tertiary);
    border-radius: 0.2rem;
    white-space: nowrap;
    word-break: break-all;
  }

  .content-link {
    background: hsla(45, 100%, 80%, 0.2);
    color: hsla(300, 70%, 20%, 0.8);
    font-weight: 560;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--color-border-dark-tertiary);
    border-radius: 0.2rem;
    white-space: nowrap;
    word-break: break-all;
    display: ruby;
  }
  a.roll-text i.fas {
    color: var(--color-text-dark-inactive);
    margin-right: 0.25em;
  }

  li label.compteur {
    display: inline-block;
    flex-direction: row;
  }
  .compteur span {
    display: inline-block;
    text-align: left;
    width: 2rem;
  }
  .compteur a i:is(.fas, .far):hover {
    opacity: 0.7;
  }

  .select-diff {
    display: inline-block;
    text-align: left;
    width: 50px;
  }
  .select-carac {
    display: inline-block;
    text-align: left;
    width: 100%;
    max-width: 90%;
  }

  :is(.window-app, .application).sheet
    .window-content
    :is(.tooltip, .tooltip-overflow):hover
    .tooltiptext {
    top: 2rem;
    left: 2rem;
    margin: 0;
    padding: 0.25rem;
  }

  :is(.window-app, .application).sheet .window-content .carac-value,
  :is(.window-app, .application).sheet .window-content .competence-xp {
    flex-grow: 0;
    margin: 0.05rem;
    flex-basis: 2rem;
    text-align: center;
  }
  :is(.window-app, .application).sheet .window-content .carac-value,
  :is(.window-app, .application).sheet .window-content .competence-value {
    flex-grow: 0;
    margin: 0.05rem;
    flex-basis: 2rem;
    text-align: center;
  }
  :is(.window-app, .application).sheet .window-content .carac-value,
  :is(.window-app, .application).sheet .window-content .competence-archetype {
    flex-grow: 0;
    margin: 0.05rem;
    flex-basis: 2rem;
    text-align: center;
  }
  :is(.window-app, .application).sheet .window-content .at-archetype {
    border-left: 3px solid var(--color-archetype-atteint, #b8860b);
  }
  :is(.window-app, .application).sheet .window-content .archetype-check {
    color: var(--color-archetype-atteint, #b8860b);
    font-size: 0.75rem;
    margin-left: 0.15rem;
  }
  :is(.window-app, .application).sheet .window-content .carac-value,
  :is(.window-app, .application).sheet .window-content .competence-xp-sort {
    flex-grow: 0;
    margin: 0.05rem;
    flex-basis: 2rem;
    text-align: center;
  }

  /* ======================================== */
  /* Global UI elements  */

  /* ======================================== */

  h1,
  h2,
  h3,
  h4 {
    font-weight: bold;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
  }
  ul,
  li {
    list-style-type: none;
  }
  .sheet .caracteristique li {
    margin: 0.1rem;
    padding: 0.2rem;
  }
  .sheet li {
    margin: 0.1rem;
    padding: 0.1rem;
  }
  .header-fields li {
    margin: 0;
    padding: 0;
  }
  :is(.sheet, div.fenetre-recherche div.section-filters-text) input.recherche {
    background-image: url("../assets/ui/icon-search.svg");
    background-position: 0.1rem 0.1rem;
    background-size: 1rem;
    background-repeat: no-repeat;
    padding: 0.1rem 0.1rem 0.1rem 1.2rem;
    max-height: 1.2rem;
  }

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

  .alterne-list > .list-item:hover {
    background: rgba(100, 100, 50, 0.25);
  }
  .alterne-list > .list-item:nth-child(even) {
    background: rgba(80, 60, 0, 0.1);
  }
  .alterne-list > .list-item:nth-child(odd) {
    background: rgba(160, 130, 100, 0.05);
  }

  .attribute-value.field-error,
  .list-item .field-error {
    background-color: var(--background-error);
  }
  .xp-level-up {
    margin: 0.1rem;
    box-shadow: inset 0px 0px 1px #00000096;
    border-radius: 0.2rem;
    padding: 0.1rem;
    flex: 1 1 5rem;
    background: var(--gradient-gold) !important;
  }
  .niveau-archetype {
    background: var(--gradient-silver-light) !important;
  }
  .item-controls i.fas.allouer-stress.level-up {
    color: var(--color-gold);
  }
  .item-action-controls i.fa-solid.allouer-stress.level-up {
    color: var(--color-gold);
  }
  .blessures-list ul {
    display: flex;
  }
  .blessures-list li {
    flex: 1;
    flex-basis: auto;
  }
  .blessures-list li ul li:first-child {
    flex: 0;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    cursor: pointer;
  }
  .list-item {
    margin: 0.1rem;
    box-shadow: inset 0px 0px 1px #00000096;
    border-radius: 0.2rem;
    padding: 0.1rem;
    flex: 1 1 1.5rem;
    display: flex;
    align-items: center !important;
  }
  .table-row {
    margin: 0.1rem;
    padding: 0.1rem;
    flex: 1 1 5rem;
  }
  .item-display-show {
    display: inline;
  }
  .item-display-hide {
    display: none;
  }
  .conteneur-type {
    background: rgba(200, 10, 100, 0.25);
  }

  .item-column {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    justify-content: center;
    text-align: center;
  }

  ul.list-item-margin1 li {
    margin-left: 0.8rem;
  }
  ul.list-item-margin2 li {
    margin-left: 1.6rem;
  }
  ul.list-item-margin3 li {
    margin-left: 2.4rem;
  }
  ul.list-item-margin4 li {
    margin-left: 3.2rem;
  }
  ul.list-item-margin5 li {
    margin-left: 4rem;
  }
  ul.list-item-margin6 li {
    margin-left: 4.8rem;
  }

  .grid-select-type-tmr {
    display: grid;
    grid-column: span 4 / span 4;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.1rem;
    margin: 0.1rem;
    padding: 0;
  }
  .grid-select-actor {
    display: grid;
    grid-column: span 2 / span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.1rem;
    margin: 0.1rem;
    padding: 0;
  }

  .sheet-competence-img {
    max-width: 24px;
    max-height: 24px;
    flex-grow: 0;
    margin-right: 0.2rem;
    vertical-align: bottom;
  }
  .competence-column {
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
    flex-grow: 0;
    flex-basis: 1;
  }
  div.competence-column div.categorie-competence {
    width: 100%;
  }
  .competence-header {
    align-content: flex-start;
    justify-content: flex-start;
    font-weight: bold;
    flex-grow: 0;
  }
  .astrologie-label,
  .generic-label,
  .subacteur-label,
  .list-item-label,
  .list-title-label {
    flex-grow: 2;
    display: flex;
    flex-direction: row;
  }
  .attribut-value,
  .carac-value {
    flex-grow: 0;
    flex-basis: 64px;
    margin-right: 4px;
    margin-left: 4px;
  }
  .sante-value,
  .competence-carac,
  .competence-damage,
  .competence-value {
    flex-grow: 0;
    flex-basis: 2rem;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
  }
  .initiative-value {
    flex-grow: 0;
    flex-basis: 3rem;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
  }
  .competence-xp {
    flex-grow: 0;
    flex-basis: 2rem;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
  }
  .item-label {
    font-weight: bold;
  }
  .pointsreve-value {
    flex-grow: 0;
    flex-basis: 64px;
    margin-right: 4px;
    margin-left: 4px;
  }
  .input-sante-header,
  .stress-style {
    flex-grow: 0;
    flex-basis: 64px;
    margin-right: 4px;
    margin-left: 4px;
  }

  /* ======================================== */
  table.table-nombres-astraux {
    border: 1px solid rgba(0, 0, 0, 0.5);
    font-size: 0.7rem;
    ol { margin: 0; padding: 0; list-style: none; }
  }
  table.table-nombres-astraux :is(th, td) {
    padding: 1px 3px;
    font-size: 0.7rem;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(102, 95, 122, 0.2);
    text-align: center;
    vertical-align: top;
  }
  table.table-nombres-astraux tr td.info-acteur {
    flex-direction: row;
    display: flex;
    font-size: 0.65rem;
    img { width: 1.2rem; height: 1.2rem; }
  }
  table.table-nombres-astraux tr:hover {
    background-color: hsla(38, 20%, 50%, 0.5);
  }

  /* ======================================== */
  .token-hud-ext {
    display: flex;
    flex: 0 !important;
    font-family: CaslonPro;
    font-weight: 600;
  }
  .token-hud-ext.left {
    justify-content: flex-start;
    flex-direction: column;
    position: absolute;
    top: 10rem;
    left: -9rem;
  }
  .token-hud-ext.soins {
    flex-direction: column;
    position: absolute;
    top: 15.5rem;
    left: -6rem;
    max-width: 8rem;
    line-height: 1rem;
  }

  .token-hud-ext.right {
    flex-direction: column;
    position: absolute;
    top: 4.6rem;
    left: 3.5rem;
  }
  div.control-icon.token-hud-icon {
    width: 9rem;
    height: fit-content;
    border-radius: 0.3rem;
    min-width: 8rem;
    flex-basis: auto;
    padding: 0;
    line-height: 1.6rem;
    margin: 0.2rem;

    display: flex;
    flex-direction: row;
    align-items: center;
    select,
    label {
      font-size: 1rem;
    }
  }
  /* ======================================== */
  .item-checkbox {
    height: 25px;
    border: 1px solid #736953a6;
    border-left: none;
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-controls);
    padding-top: 5px;
    margin-right: 0px;
    width: 45px;
    position: relative;
    left: 0px;
    text-align: center;
  }

  /* ======================================== */
  /* dialogue competence : Appel au moral */
  .diffAppelAuMoral {
    display: none !important;
  }

  .imgAppelAuMoral {
    height: 20px;
    width: 20px;
    border: none;
    outline: none;
    background-size: cover;
  }

  /* Tooltip container */
  .tooltipAppelAuMoral {
    position: relative;
    display: inline-block;
    border-bottom: 0;
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltipAppelAuMoral:hover .tooltipAppelAuMoralText {
    visibility: visible;
    opacity: 1;
  }

  /* Tooltip text */
  .tooltipAppelAuMoral .tooltipAppelAuMoralText {
    text-align: center;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    left: 25px;

    /* Fade in tooltip */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .tendre-moment {
    color: hsla(293, 72%, 44%, 0.8);
  }

  /* ======================================== */
  /* Fatigue CSS */
  .table-fatigue {
    table-layout: fixed;
    padding: 0;
    margin: 0;
  }
  .table-fatigue td {
    table-layout: fixed;
    width: 2px;
    height: 2px;
    padding: 0;
  }
  .table-fatigue .fatigue-used {
    background-color: DarkRed;
    border: 1px solid #999;
  }
  .table-fatigue .fatigue-none {
    background-color: Grey;
    border: 1px solid #999;
  }
  .table-fatigue .fatigue-free {
    border: 1px solid #999;
  }
  .table-fatigue .fatigue-malus {
    font-size: 0.8rem;
  }
  .flex-actions-bar {
    flex-grow: 2;
  }

  /* ======================================== */
  /* Sidebar CSS */
  #sidebar {
    .chat-message {
      font-size: 1rem;
    }
    background: rgb(105, 85, 65) url(../assets/ui/bg_sid_dark.webp) no-repeat
      right bottom;
    background-position: 100%;
    color: rgba(220, 220, 220, 0.75);
  }

  #sidebar-tabs > .collapsed,
  #chat-controls .chat-control-icon {
    color: rgba(220, 220, 220, 0.75);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
  }

  .sidebar-tab .directory-list .entity {
    border-top: 1px dashed rgba(0, 0, 0, 0.25);
    border-bottom: 0 none;
    padding: 0.2rem 0;
  }

  .sidebar-tab .directory-list .entity:hover {
    background: rgba(0, 0, 0, 0.05);
    cursor: pointer;
  }

  .chat-message {
    background: var(--color-background-chat-message);

    h4 {
      font-size: 0.9rem;
    }
    .message-content {
      text-align: justify;
    }
    header.message-header {
      .heure-rdd {
        font-size: 0.7rem;
        flex-grow: 3;
      }
      .message-metadata {
        flex-grow: 3.5;
      }
    }
    hr {
      margin: 0.2rem 0;
    }
  }
  .chat-message.whisper {
    background: var(--color-background-chat-whisper);
    border: 2px solid #545469;
  }

  .chat-icon {
    border: 0;
    padding: 2px 6px 2px 2px;
    float: left;
    max-width: 64px;
    max-height: 64px;
    height: 100%;
    object-fit: contain;
  }
  .post-item-compact {
    .tag {
      display: inline-block;
      background: rgba(0,0,0,0.05);
      border-radius: 3px;
      padding: 0 0.35rem;
      margin: 0.1rem;
      font-size: 0.75rem;
      white-space: nowrap;
    }
  }
  .chat-inline-icon {
    border: 0;
    padding: 0 0.2rem;
    vertical-align: text-top;
    display: inline;
  }

  .actor-img-small {
    max-width: 1.5rem;
    max-height: 1.5rem;
    flex-grow: 0;
    margin-right: 0.2rem;
    vertical-align: bottom;
  }

  #sidebar-tabs menu {
    button:is(
        [data-tab="chat"],
        [data-tab="combat"],
        [data-tab="scenes"],
        [data-tab="actors"],
        [data-tab="items"],
        [data-tab="journal"],
        [data-tab="cards"],
        [data-tab="tables"],
        [data-tab="placeables"],
        [data-tab="macros"],
        [data-tab="tables"],
        [data-tab="playlists"],
        [data-tab="compendium"],
        [data-tab="settings"]
      )::before {
      content: none;
    }

    button {
      background-repeat: no-repeat;
    }
    button[aria-pressed="false"] {
      background-color: hsla(30, 37%, 50%, 0.5);
    }
    button[aria-pressed="true"] {
      border: 1px solid hsla(15, 80%, 30%, 1);
      background-color: hsla(30, 100%, 90%, 0.6);
      box-shadow: 0 0 3px inset hsla(15, 80%, 30%, 1);
    }
    button[data-tab="chat"] {
      background-image: url("../assets/ui/icon_sidebar_chat.svg");
    }
    button[data-tab="combat"] {
      background-image: url("../assets/ui/icon_sidebar_fight.svg");
    }
    button[data-tab="scenes"] {
      background-image: url("../assets/ui/icon_sidebar_scene.svg");
    }
    button[data-tab="placeables"] {
      background-image: url("../assets/ui/icon_sidebar_placeables.svg");
    }
    button[data-tab="actors"] {
      background-image: url("../assets/ui/icon_sidebar_actor.svg");
    }
    button[data-tab="items"] {
      background-image: url("../assets/ui/icon_sidebar_item.svg");
    }
    button[data-tab="journal"] {
      background-image: url("../assets/ui/icon_sidebar_journal.svg");
    }
    button[data-tab="cards"] {
      background-image: url("../assets/ui/icon_sidebar_cards.svg");
    }
    button[data-tab="macros"] {
      background-image: url("../assets/ui/icon_sidebar_macros.svg");
    }
    button[data-tab="tables"] {
      background-image: url("../assets/ui/icon_sidebar_tables.svg");
    }
    button[data-tab="playlists"] {
      background-image: url("../assets/ui/icon_sidebar_music.svg");
    }
    button[data-tab="compendium"] {
      background-image: url("../assets/ui/icon_sidebar_compendium.svg");
    }
    button[data-tab="settings"] {
      background-image: url("../assets/ui/icon_sidebar_settings.svg");
    }
  }

  // #sidebar #sidebar-tabs i.fa-th-list {background: url("../assets/ui/icon_sidebar_rolltable.svg") no-repeat;}
  #combat #combat-controls {
    box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.5);
  }

  /*--------------------------------------------------------------------------*/
  /* Control, Tool, hotbar & navigation */

  #controls .scene-control,
  #controls .control-tool {
    box-shadow: 0 0 3px #000;
    margin: 0 0 8px;
    border-radius: 0;
    background: rgba(30, 25, 20, 1);
    background-origin: padding-box;
    border-image: url(../assets/ui/footer-button.webp) 10 repeat;
    border-image-width: 4px;
    border-image-outset: 0px;
  }
  #controls .control-tools {
    max-height: calc(100vh - 156px);
    height: auto;
  }
  #controls
    :is(
      .scene-control.active,
      .control-tool.active,
      .scene-control:hover,
      .control-tool:hover
    ) {
    background: rgba(72, 46, 28, 1);
    background-origin: padding-box;
    border-image: url(../assets/ui/footer-button.webp) 10 repeat;
    border-image-width: 4px;
    border-image-outset: 0px;
    box-shadow: 0 0 3px #ff6400;
  }

  #hotbar #action-bar #macro-list {
    border: 1px solid rgba(72, 46, 28, 1);
    box-shadow: 2px 2px 5px #000000;
  }

  #hotbar #action-bar .macro {
    border-image: url(../assets/ui/bg_control.webp) 21 repeat;
    border-image-slice: 6 6 6 6 fill;
    border-image-width: 6px 6px 6px 6px;
    border-image-outset: 0px 0px 0px 0px;
    border-radius: 0px;
  }

  #hotbar .bar-controls {
    background: rgba(30, 25, 20, 1);
    border: 1px solid rgba(72, 46, 28, 1);
  }

  #navigation #scene-list .scene.nav-item.active {
    background: rgba(72, 46, 28, 1);
  }

  #navigation #scene-list .scene.nav-item {
    background: rgba(30, 25, 20, 1);
    background-origin: padding-box;
    border-image: url(../assets/ui/footer-button.webp) 10 repeat;
    border-image-width: 4px;
    border-image-outset: 0px;
  }

  #navigation #scene-list .scene.view,
  #navigation #scene-list .scene.context {
    background: rgba(72, 46, 28, 1);
    background-origin: padding-box;
    border-image: url(../assets/ui/footer-button.webp) 10 repeat;
    border-image-width: 4px;
    border-image-outset: 0px;
    box-shadow: 0 0 3px #ff6400;
  }

  #navigation #nav-toggle {
    background: rgba(30, 25, 20, 1);
    background-origin: padding-box;
    border-image: url(../assets/ui/footer-button.webp) 10 repeat;
    border-image-width: 4px;
    border-image-outset: 0px;
  }

  div.horloge-roue div {
    position: absolute;
    border: none;
    pointer-events: all;
  }

  div.horloge-roue div.horloge-cercle {
    background: hsla(60, 20%, 90%, 0.8);
    top: 2%;
    left: 2%;
    width: 96%;
    height: 96%;
    border-radius: 50%;
  }

  div.horloge-roue div.horloge-cercle1 {
    background: var(--gradient-daylight);
    border: 0.2rem solid rgba(100, 45, 124, 0.6);
    top: 2%;
    left: 2%;
    width: 96%;
    height: 96%;
    border-radius: 50%;
  }

  div.horloge-roue div.horloge-cercle2 {
    border: 0.1rem solid rgba(100, 45, 124, 0.4);
    top: 17%;
    left: 17%;
    width: 66%;
    height: 66%;
    border-radius: 50%;
  }
  div.horloge-roue div.disque-astro {
    top: 28%;
    left: 28%;
    width: 44%;
    height: 44%;
  }
  div.horloge-roue div.horloge-aiguille-heure {
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
  }
  div.horloge-roue div.horloge-aiguille-minute {
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
  }
  div.horloge-roue div.horloge-ajustement {
    width: 0.8rem;
    height: 0.8rem;
    color: hsl(120, 50%, 15%);
    background-color: hsla(300, 100%, 95%, 0.4);
    font-size: 0.8rem;
    text-align: center;
    vertical-align: middle;
    border-radius: 0.2rem;
  }

  div.horloge-roue div img {
    border: none;
  }

  .calendar {
    display: inline-block;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    pointer-events: none;
    max-height: fit-content;


    header.window-header {
      min-width: fit-content;
      height: 1.4rem;
      pointer-events: all;
      h4 {
        font-size: 0.8rem;
      }
    }
    &.application .window-content {
      margin: 0;
      padding: 0;
      backdrop-filter: none;
      z-index: 100;
      flex-direction: column;
      min-width: 250px;
      height: fit-content;
      background: hsla(0, 0%, 0%, 0);
      background-image: none;
      font-family: "GoudyAcc";
      pointer-events: none;
      div.calendar-boutons-heure {
        display: grid;
        background: hsla(0, 0%, 20%, 1);
        color: hsla(0, 0%, 80%, 0.8);
        pointer-events: all;
      }
      div.horloge-digitale {
        pointer-events: all;
      }
      div.horloge-analogique {
        pointer-events: none;
      }
      div.horloge-analogique div.horloge-roue {
        pointer-events: all;
      }
    }

    div.horloge-roue {
      position: relative;
      margin-bottom: 7px;
      left: 0;
      width: 8rem;
      height: 8rem;
      div.horloge-heure {
        width: 1.4rem;
        height: 1.4rem;
        img.horloge-heure-img {
          width: 1.4rem;
          height: 1.4rem;
        }
      }
    }

    div.horloge-heure.heure-01 {
      top: calc(50% - 0.7rem + sin(-180deg) * 38%);
      left: calc(50% - 0.7rem + cos(-180deg) * 38%);
    }
    div.horloge-heure.heure-02 {
      top: calc(50% - 0.7rem + sin(-150deg) * 38%);
      left: calc(50% - 0.7rem + cos(-150deg) * 38%);
    }
    div.horloge-heure.heure-03 {
      top: calc(50% - 0.7rem + sin(-120deg) * 38%);
      left: calc(50% - 0.7rem + cos(-120deg) * 38%);
    }
    div.horloge-heure.heure-04 {
      top: calc(50% - 0.7rem + sin(-90deg) * 38%);
      left: calc(50% - 0.7rem + cos(-90deg) * 38%);
    }
    div.horloge-heure.heure-05 {
      top: calc(50% - 0.7rem + sin(-60deg) * 38%);
      left: calc(50% - 0.7rem + cos(-60deg) * 38%);
    }
    div.horloge-heure.heure-06 {
      top: calc(50% - 0.7rem + sin(-30deg) * 38%);
      left: calc(50% - 0.7rem + cos(-30deg) * 38%);
    }
    div.horloge-heure.heure-07 {
      top: calc(50% - 0.7rem + sin(-0deg) * 38%);
      left: calc(50% - 0.7rem + cos(-0deg) * 38%);
    }
    div.horloge-heure.heure-08 {
      top: calc(50% - 0.7rem + sin(30deg) * 38%);
      left: calc(50% - 0.7rem + cos(30deg) * 38%);
    }
    div.horloge-heure.heure-09 {
      top: calc(50% - 0.7rem + sin(60deg) * 38%);
      left: calc(50% - 0.7rem + cos(60deg) * 38%);
    }
    div.horloge-heure.heure-10 {
      top: calc(50% - 0.7rem + sin(90deg) * 38%);
      left: calc(50% - 0.7rem + cos(90deg) * 38%);
    }
    div.horloge-heure.heure-11 {
      top: calc(50% - 0.7rem + sin(120deg) * 38%);
      left: calc(50% - 0.7rem + cos(120deg) * 38%);
    }
    div.horloge-heure.heure-12 {
      top: calc(50% - 0.7rem + sin(150deg) * 38%);
      left: calc(50% - 0.7rem + cos(150deg) * 41%);
    }
  }

  .calendar-boutons-heure {
    .calendar-btn:is(.calendar-lyre, .calendar-vaisseau) img {
      color: hsla(0, 0%, 100%, 0.5);
      border: none;
      vertical-align: bottom;
      max-width: 1.2em;
      max-height: 1.2em;
      margin: 1px;
    }
    i {
      border: 1px solid rgba(0, 0, 0, 0);
    }
    a:hover {
      color: var(--color-controls-hover);
      border: 1px solid var(--color-control-border-hover);
      cursor: pointer;
    }
  }

  .calendar-1min {
    grid-column: 1/1;
  }
  .calendar-5min {
    grid-column: 2/2;
  }
  .calendar-15min {
    grid-column: 3/3;
  }
  .calendar-30min {
    grid-column: 4/4;
  }
  .calendar-60min {
    grid-column: 5/5;
  }
  .calendar-1heure {
    grid-column: 6/6;
  }
  .calendar-lyre {
    grid-column: 7/8;
  }
  .calendar-vaisseau {
    grid-column: 9/10;
  }
  :is(.calendar-lyre, .calendar-vaisseau) {
    display: flex;
    flex-direction: row;
  }
  div.horloge-analogique {
    border: none;
    margin: 0;
  }

  div.horloge-analogique.horloge-analogique-hidden {
    visibility: hidden;
  }

  div.horloge-digitale {
    color: #ccc;
    background: hsla(0, 0%, 20%, 1);
    text-align: center;
    width: 100%;
    :is(.calendar-heure-texte, .calendar-minute-texte) {
      font-size: 1rem;
      pointer-events: all;
      margin: 0;
    }
    a {
      border: 1px solid rgba(0, 0, 0, 0);
    }
    a:hover {
      color: var(--color-controls-hover);
      border: 1px solid var(--color-control-border-hover);
      cursor: pointer;
    }
  }

  div.calendar-timestamp-edit select.calendar-signe-heure {
    width: max-content;
  }

  /* Tooltip container */
  .tooltip {
    position: relative;
    display: inline-block;
  }
  .tooltip-overflow {
    display: inline-block;
  }

  .tooltip-dotted {
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }

  div.message-content span .tooltip-overflow {
    overflow: visible;
    position: absolute;
    span {
      overflow: visible;
      position: relative;
    }
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  :is(.tooltip, .tooltip-overflow):hover {
    .tooltiptext {
      visibility: visible;
      opacity: 1;
    }
  }
  /* html Tooltips html*/
  :is(.tooltip, .tooltip-overflow) {
    .tooltiptext {
      text-align: center;
      /* Position the tooltip text */
      position: absolute;
      z-index: 1;
      /* Fade in tooltip */
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .ttt-fatigue {
      width: 360px;

      background: rgba(30, 25, 20, 0.9);
      border-image: url(../assets/ui/bg_control.webp) 21 repeat;
      border-image-slice: 6 6 6 6 fill;
      border-image-width: 6px 6px 6px 6px;
      border-image-outset: 0px 0px 0px 0px;
      border-radius: 0px;

      font-size: 0.8rem;
      padding: 3px 0;
    }

    .ttt-ajustements {
      width: 10rem;
      background: var(--background-tooltip);
      border-radius: 0.5rem;
      font-size: 0.9rem;
      padding: 3px 0;
      div:nth-child(odd) {
        background: var(--background-tooltip-alt);
      }
      div img {
        display: inline;
        margin: 0;
        max-width: 1rem;
        max-height: 1rem;
        filter: invert(0.8);
      }
    }
  }

  aside#tooltip {
    max-width: 15rem;
    background: var(--background-tooltip);
    color: rgba(100, 100, 50, 0.85);
    font-size: 0.9rem;
    border-radius: 0.2rem;
    padding: 0.3rem;
    font-family: "CaslonAntique";
    
    h4{
      color: var(--rdd-color-text-primary);
    }

    span.reference {
      color: var(--color-tooltip);
      border: 1px solid var(--color-tooltip-faint);
    }
    
    .toolclip{
      p.faint {
         color: var(--color-tooltip);
       }
       span.reference{
         color: var(--color-tooltip);
         background-color: var(--color-controls-hover);
       }
    } 
  }

  .chat-card-info {
    font-size: 1.1rem;
    display: flex;
    flex-direction: row;

    img {
      margin: 0 0.5rem;
      max-width: 1rem;
      max-height: 1rem;
      filter: invert(0.8);
    }
  }

  .jet-astrologie {
    color: var(--major-button-color) !important;
  }
  
  
  .chat-card-button,
  .chat-card-button-checked,
  select.chat-card-select {
    border-radius: 0.2rem;
    cursor: pointer;
    font-family: CaslonPro;
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem 0rem 0.4rem;
    text-decoration: none;
    position: relative;
    margin: 0.3rem;
    
    border: 2px ridge #846109;
    display: inline-block;

    img {
      max-width: 1rem;
      max-height: 1rem;
    }
  }
  
  select.chat-card-select {
    width:  calc(100% - 0.6rem);
    color: var(--major-button-color);
    background-color: var(--background-color-custom-button);
    option {
      background-color: var(--background-color-custom-button);
    }
  }
  .chat-card-button {
    text-shadow: 1px 1px #4d3534;
    box-shadow: inset 1x 1px #a6827e;
    color: var(--major-button-color);
    background: var(--background-custom-button);
    background-color: var(--background-color-custom-button);

  }

  .chat-card-button-checked {
    text-shadow: 1px 1px hsla(202, 30%, 70%, 0.5);
    box-shadow: inset -1px -1px #a6827e;
    color: hsla(202, 42%, 14%, 0.7);
    background: var(--major-button-color);
    background-color: #7d5d3b00;
  }

  .chat-card-button:hover {
    background: var(--background-custom-button-hover);
  }

  .chat-card-button-checked:hover {
    background: var(--background-custom-button-hover);
  }

  .chat-card-button:active,
  .chat-card-button-checked:active {
    position: relative;
    top: 1px;
  }

  /* Dropdown Content (Hidden by Default) */
  .button-dropdown-content {
    display: none;
    position: absolute;
    width: max-content;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    background: var(--background-tooltip);
    overflow-y: scroll;
    max-height: 14rem;
    z-index: 10;
  }

  .button-dropdown {
    position: relative;
    display: inline-block;
  }
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .button-dropdown:hover .button-dropbutton {
    text-shadow: 1px 0px 0px #ff6600;
  }
  /* Show the dropdown menu on hover */
  .button-dropdown:hover .button-dropdown-content {
    display: block;
  }

  /* Links inside the dropdown */
  .button-dropdown-content a {
    color: black;
    padding: 0.2rem 0.4rem;
    text-decoration: none;
    display: block;
  }

  /* Change color of dropdown links on hover */
  .button-dropdown-content a:hover {
    background-color: #ddd;
  }

  /* ======== autocomplete ======= */
  .autocomplete {
    position: relative;
    display: inline-block;
  }

  .autocomplete-items {
    position: absolute;
    border: 1px solid var(--color-border-dark);
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
  }

  .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
  }

  /*when hovering an item:*/
  .autocomplete-items div:hover {
    background-color: #e9e9e9;
  }

  /*when navigating through the items using the arrow keys:*/
  .autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
  }

  /*************************************************************/
  #pause {
    font-family: CaslonAntique;
    font-size: 2rem;
    background: none;
  }
  #pause > h3 {
    color: #ccc;
  }
  #pause > img {
    content: url(../assets/ui/rdd_pause.webp);
    height: 256px;
    width: 256px;
    top: -75px;
    left: calc(50% - 132px);
  }

  #logo {
    content: url(../assets/ui/logo.webp);
    width: 80px;
    height: 68px;
  }

  div.vl {
    border: 1px solid;
    border-color: hsla(0, 0%, 0%, 0.5);
    height: inherit;
    min-height: max-content;
    margin-left: 0;
    margin-right: 0;
    width: 1px;
    flex-grow: 0;
  }
  div.fenetre-recherche div.zone-recherche {
    display: flex;
  }
  div.fenetre-recherche div.zone-recherche div.filtres {
    width: fit-content;
    min-width: 200px;
    float: left;
  }
  div.fenetre-recherche div.titre-resultats-recherche {
    flex-basis: 0;
    max-height: fit-content;
  }
  div.fenetre-recherche div.liste-resultats-recherche {
    display: flex;
    flex: auto;
    flex-flow: row wrap;
    flex-direction: row;
    align-content: flex-start;
  }
  div.fenetre-recherche div.liste-resultats-recherche div.resultat {
    width: fit-content;
    margin: 0.2rem 0.5rem;
  }

  .dialog-verifier-ingredients {
    .verifier-ingredients-header {
      margin-bottom: 0.5rem;
      p { margin: 0; }
    }
    table.verifier-ingredients-table {
      width: 100%;
      border-collapse: collapse;
      th, td {
        padding: 0.2rem 0.4rem;
        text-align: left;
        vertical-align: middle;
      }
      th {
        font-weight: bold;
        background: rgba(0,0,0,0.05);
      }
      tr.insuffisant {
        background: rgba(200, 50, 50, 0.08);
      }
      tr.suffisant {
        background: rgba(50, 180, 50, 0.05);
      }
      td.ingredient-status {
        text-align: center;
        width: 2rem;
      }
      td.ingredient-qty {
        text-align: center;
        width: 5rem;
      }
      td.ingredient-found {
        text-align: center;
        width: 8rem;
      }
      .status-ok { color: #2a8a2a; }
      .status-missing { color: #c44; }
      .found-none { color: #999; }
      .found-sources {
        font-size: 0.7rem;
        color: #666;
        margin: 0;
        padding: 0;
        list-style: none;
        li { margin: 0; padding: 0; }
      }
    }
    .verifier-ingredients-footer {
      margin-top: 0.5rem;
      text-align: center;
      .result-success { color: #2a8a2a; font-weight: bold; }
      .result-failure { color: #c44; font-weight: bold; }
    }
    .result-empty {
      text-align: center;
      color: #666;
      font-style: italic;
    }
  }

  .dialog-lancer-recette {
    .lancer-recette-header {
      margin-bottom: 0.5rem;
      p { margin: 0.1rem 0; }
      .lancer-recette-but { font-style: italic; color: #555; font-size: 0.9rem; }
    }
    .lancer-recette-section {
      margin: 0.5rem 0;
      h4 { margin: 0.2rem 0; font-size: 0.95rem; }
    }
    table.lancer-recette-ingredients, table.lancer-recette-etapes {
      width: 100%;
      border-collapse: collapse;
      th, td { padding: 0.15rem 0.3rem; text-align: left; vertical-align: middle; font-size: 0.85rem; }
      th { font-weight: bold; background: rgba(0,0,0,0.05); }
      .ing-ok td { color: #2a8a2a; }
      .ing-missing td { color: #c44; }
    }
    table.lancer-recette-etapes {
      td.etape-diff { text-align: center; width: 3rem; }
      td.etape-status { text-align: center; width: 2rem; }
      .etape-termes { font-style: italic; color: #555; margin-left: 0.3rem; }
      .etape-malus { color: #c44; font-size: 0.75rem; margin-left: 0.3rem; }
      tr.etape-success { background: rgba(42, 138, 42, 0.08); }
      tr.etape-failure { background: rgba(200, 68, 68, 0.08); }
      tr.etape-rolling { background: rgba(33, 150, 243, 0.05); }
    }
    .lancer-recette-progress {
      text-align: center;
      color: #2196F3;
      font-style: italic;
      margin: 0.3rem 0;
    }
    .lancer-recette-result {
      text-align: center;
      padding: 0.5rem;
      border-radius: 0.3rem;
      margin: 0.5rem 0;
      font-weight: bold;
      &.result-success { background: rgba(42, 138, 42, 0.1); color: #2a8a2a; }
      &.result-failure { background: rgba(200, 68, 68, 0.1); color: #c44; }
    }
    .lancer-recette-buttons {
      display: flex;
      gap: 0.3rem;
      justify-content: center;
      margin-top: 0.5rem;
      button {
        padding: 0.3rem 0.8rem;
        cursor: pointer;
      }
      button.lancer-operations { background: #4a90d9; color: #fff; border: none; border-radius: 0.2rem; }
      button.creer-resultat { background: #2a8a2a; color: #fff; border: none; border-radius: 0.2rem; }
    }
  }
}
