@charset "UTF-8";
/* ===========================================
   Common Imports and Font Definitions
   ========================================== */
/*
select {
    transition: none !important;
    animation: none !important;
    background: white !important;
}
*/
/* ===========================================
      Global Styles (Outside body.etablissement)
      ========================================== */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f0f0f0;
}

/* Fade-in effect */
.fade-in {
  opacity: 0;
  animation: fadeInAnimation 0.5s forwards;
  /* Adjust duration as needed */
}

/* Fade-out effect */
.fade-out {
  opacity: 1;
  animation: fadeOutAnimation 0.5s forwards;
}

/* Fade-to-half effect */
.fade-half {
  opacity: 1;
  animation: fadeHalfAnimation 0.5s forwards;
}

/* Keyframes for animations */
@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOutAnimation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeHalfAnimation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}
/* ===========================================
      Common Utility Classes
      ========================================== */
.forced {
  background: red;
  color: white !important;
  border-radius: 10px;
}

.readonly {
  background-color: #f8f8f8;
  color: #666;
}

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

/* ===========================================
      Column Resizer Styles
      ========================================== */
.column-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  background-color: #ddd;
  opacity: 0;
  transition: opacity 0.3s;
}

th:hover .column-resizer {
  opacity: 1;
}

/* ===========================================
      Link Arrow Styles
      ========================================== */
.link-arrow {
  text-decoration: none;
  color: #007bff;
  font-weight: bolder;
  float: right;
  font-size: 150%;
  z-index: 100;
  transition: transform 0.3s ease, color 0.3s ease;
}
.link-arrow:hover {
  color: red;
  transform: scale(1.5) translateY(-5px);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* ===========================================
      Status Styles (Common)
      ========================================== */
tr[data-status-pay=recu],
tr[data-status-pay=gratuit] {
  background-color: #c3f489 !important;
}

td[data-status-etat=attentecertification] {
  background-color: #fff3cd;
  color: #664d03;
}

td[data-status-etat=envoye] {
  background-color: #d1e7dd;
  color: #0f5132;
}

td[data-status-etat=nouveau] {
  background-color: #cfe2ff;
  color: #084298;
}

td[data-status-pay=afacturer] {
  color: white;
  background-color: red;
}

/* ===========================================
      body.etablissement Specific Styles
      ========================================== */
body.etablissement {
  /* Variables */
  /* tous les selects appelés par menuondouble */
  /** toggle arows */
  /* -- end of toggle-arrows --*/
  /**--- start of .etablissement-info --*/
  /**
  // Variables
  $font-family: Arial, sans-serif;
  $line-height-base: 1.4;
  $line-height-compressed: 1.2;
  $line-height-extra-compressed: 1.1;
  $card-radius: 6px;
  $card-shadow: 0 1px 3px rgba(0,0,0,0.12);

  $text-color: #333;
  $placeholder-color: #aaa;

  $card-padding: 10px;
  $card-margin: 10px;
  $title-margin: 6px;
  $list-margin: 6px;
  $list-item-margin: 1px;
  $form-margin: 6px;
  $form-gap: 8px;
  $fields-gap: 3px;
  $item-padding: 2px;

  /*
  $card-padding: 6px !global;
  $card-margin: 6px !global;
  $title-margin: 3px !global;
  $list-margin: 3px !global;
  $list-item-margin: 0 !global;
  $form-margin: 3px !global;
  $form-gap: 4px !global;
  $fields-gap: 2px !global;
  $item-padding: 1px !global;
  $line-height-compressed: 1.1 !global;
  $line-height-extra-compressed: 1 !global;

  *
  // Etablissement Info Colors map
  $EtabInfoColor: (
    lycee: (
      gradient-start: #d4eddf,
      border: #48bb78
    ),
    college: (
      gradient-start: #e0d5ff,
      border: #9f7aea
    ),
    media: (
      gradient-start: #ffe4cc,
      border: #ed8936
    ),
    default: (
      gradient-start: #cce4ff,
      border: #4299e1
    )
  );

  // Mixins
  @mixin gradient-card($variant: 'default') {
    $color-set: map-get($EtabInfoColor, $variant);
    border-radius: $card-radius;
    margin-bottom: $card-margin;
    border: 1px solid map-get($color-set, border);
    box-shadow: $card-shadow;
    background: linear-gradient(
      to right,
      map-get($color-set, gradient-start) 0%,
      map-get($color-set, gradient-start) 50%,
      #ffffff 85%
    );
    // For compressed layout, we override some settings
    padding: $card-padding;
  }

  // Compressed version of gradient-card
  @mixin compressed-gradient-card($variant: 'default') {
    @include gradient-card($variant);
    $color-set: map-get($EtabInfoColor, $variant);

    // Override for compressed design
    padding: $card-padding;
    border-left: 4px solid map-get($color-set, border);
  }

  // Base styles
  body {
    font-family: $font-family;
    line-height: $line-height-base;
    margin: 0;
    padding: 20px;
    background: #f5f5f5;
  }

  // Compressed Card Styling
  .etablissement-info {
    @include compressed-gradient-card('default');

    &.college {
      @include compressed-gradient-card('college');
    }

    &.lycee {
      @include compressed-gradient-card('lycee');
    }

    &.media {
      @include compressed-gradient-card('media');
    }

    // Compressed title
    h1 {
      margin: 0 0 $title-margin 0;
      font-size: 1.3em;
      line-height: $line-height-compressed;
      color: $text-color;
    }

    // Compressed info list
    .info-list {
      list-style-type: none;
      padding: 0;
      margin: $list-margin 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;

      li {
        margin: $list-item-margin 0;
        font-size: 0.9em;
        line-height: $line-height-extra-compressed;
      }

      .label {
        font-weight: bold;
        display: inline-block;
        margin-right: 4px;
      }
    }

    // Compressed form styling
    form {
      margin-top: $form-margin;

      .form-container {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: $form-gap;
        align-items: start;
      }

      .special-fields {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: $fields-gap;
        align-items: center;
        margin: 0;

        dt {
          font-weight: bold;
          padding-right: 0.3em;
          font-size: 0.9em;
          margin: 0;
        }

        dd {
          margin: 0;
        }

        p {
          margin: $list-item-margin 0;
          padding: $item-padding;
          min-height: 18px;
        }
      }

      .button-column {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        button {
          white-space: nowrap;
          padding: 4px 8px;
          font-size: 0.9em;
          margin-top: auto;
        }
      }
    }

    // Placeholder styling
    .placeholder {
      color: $placeholder-color;
      font-style: italic;
    }
  }

  // Ultra-compact mode - uncomment to activate
  /*
  $card-padding: 6px !global;
  $card-margin: 6px !global;
  $title-margin: 3px !global;
  $list-margin: 3px !global;
  $list-item-margin: 0 !global;
  $form-margin: 3px !global;
  $form-gap: 4px !global;
  $fields-gap: 2px !global;
  $item-padding: 1px !global;
  $line-height-compressed: 1.1 !global;
  $line-height-extra-compressed: 1 !global;
  */
  /* Session Container */
  /* Session Info */
  /* Session Kind */
  /* Intervention Table */
  /* Responsive Design */
}
body.etablissement .menuOnDouble + select {
  display: none;
}
body.etablissement h3 {
  border: none;
  background: none;
}
body.etablissement .toggle-table,
body.etablissement .toggle-all {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: red;
  min-width: 32px;
  z-index: 20;
  top: 25px;
}
body.etablissement .toggle-table:hover,
body.etablissement .toggle-all:hover {
  opacity: 0.7;
}
body.etablissement .toggle-table .material-symbols-outlined,
body.etablissement .toggle-all .material-symbols-outlined {
  font-size: 32px;
}
body.etablissement .etablissement-info > .toggle-all,
body.etablissement .content-area > .toggle-all {
  left: 14px;
  /* top: 5em; */
}
body.etablissement h3 .toggle-table {
  left: 0;
  /* top: 45%; */
}
body.etablissement .label {
  font-weight: bold;
}
body.etablissement .page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.etablissement body {
  font-family: Arial, sans-serif;
  line-height: 1.4;
  margin: 0;
  padding: 20px;
  background: #f5f5f5;
}
body.etablissement .etablissement-info {
  border-radius: 6px;
  margin-bottom: 10px;
  border: 1px solid #4299e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  background: linear-gradient(to right, #cce4ff 0%, #cce4ff 50%, #ffffff 85%);
  padding: 10px;
  padding: 10px;
  border-left: 4px solid #4299e1;
}
body.etablissement .etablissement-info.college {
  border-radius: 6px;
  margin-bottom: 10px;
  border: 1px solid #9f7aea;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  background: linear-gradient(to right, #e0d5ff 0%, #e0d5ff 50%, #ffffff 85%);
  padding: 10px;
  padding: 10px;
  border-left: 4px solid #9f7aea;
}
body.etablissement .etablissement-info.lycee {
  border-radius: 6px;
  margin-bottom: 10px;
  border: 1px solid #48bb78;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  background: linear-gradient(to right, #d4eddf 0%, #d4eddf 50%, #ffffff 85%);
  padding: 10px;
  padding: 10px;
  border-left: 4px solid #48bb78;
}
body.etablissement .etablissement-info.media {
  border-radius: 6px;
  margin-bottom: 10px;
  border: 1px solid #ed8936;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  background: linear-gradient(to right, #ffe4cc 0%, #ffe4cc 50%, #ffffff 85%);
  padding: 10px;
  padding: 10px;
  border-left: 4px solid #ed8936;
}
body.etablissement .etablissement-info h1 {
  margin: 0 0 6px 0;
  font-size: 1.3em;
  line-height: 1.2;
  color: #333;
}
body.etablissement .etablissement-info .grid-container .info-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
body.etablissement .etablissement-info .grid-container .info-list .info-item {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  line-height: 1.1;
}
body.etablissement .etablissement-info .grid-container .info-list .info-item .label {
  font-weight: bold;
  flex: 0 0 auto;
  text-align: right;
  width: 100px;
}
body.etablissement .etablissement-info .grid-container .info-list .info-item .NOeditable-span {
  flex: 1;
  text-align: left;
  margin-left: 8px;
}
body.etablissement .etablissement-info .grid-container .info-list .info-item.button-item {
  justify-content: flex-end;
}
body.etablissement .etablissement-info .grid-container .info-list .info-item.empty {
  visibility: hidden;
}
body.etablissement .etablissement-info .comment-container {
  margin-top: 6px;
  padding: 10px;
  border-top: 1px solid #ddd;
}
body.etablissement .etablissement-info .comment-container .special-fields {
  margin: 0;
}
body.etablissement .etablissement-info .comment-container .special-fields dt {
  font-weight: bold;
  font-size: 0.9em;
  margin: 0 0 4px 0;
}
body.etablissement .etablissement-info .comment-container .special-fields dd {
  margin: 0;
}
body.etablissement .etablissement-info .comment-container .special-fields dd .commentaire {
  min-height: 60px;
  padding: 2px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
}
body.etablissement .etablissement-info .comment-container .special-fields dd .placeholder {
  color: #aaa;
  font-style: italic;
}
body.etablissement .session-container {
  width: 100%;
  max-width: 100vw;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
body.etablissement .session-info {
  display: grid;
  grid-template-columns: 65px 430px 1fr;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: 5px;
  padding: 15px 50px 15px 15px;
  /* extra padding on right */
  border-radius: 10px !important;
  background: linear-gradient(to right, #f0f0f0, #dcdcdc);
  transition: background 0.3s;
  border: 1px blue dotted;
  position: relative;
  /* for absolute positioning of button */
}
body.etablissement .session-info button[type=reset] {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
}
body.etablissement .session-kind {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: bold;
  font-size: 1.1em;
  position: relative;
}
body.etablissement .session-kind::before {
  font-family: "Material Symbols Outlined";
  font-size: 32px;
  padding: 12px;
  border-radius: 50%;
  border: 1px dotted blue;
  background: rgba(68, 181, 207, 0.67);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  content: "help";
}
body.etablissement .session-info {
  /* Session Icons */
  /* État Colors */
}
body.etablissement .session-info::before {
  font-family: "Material Symbols Outlined";
  font-size: 32px;
  padding: 12px;
  border-radius: 50%;
  border: 1px dotted blue;
  background: rgba(16, 180, 218, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  content: "help";
}
body.etablissement .session-info::before {
  font-family: "Material Symbols Outlined";
  font-size: 32px;
  padding: 12px;
  border-radius: 50%;
  border: 1px dotted blue;
  background: rgba(16, 180, 218, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  content: "help";
}
body.etablissement .session-info::before {
  font-family: "Material Symbols Outlined";
  font-size: 32px;
  padding: 12px;
  border-radius: 50%;
  border: 1px dotted blue;
  background: rgba(16, 180, 218, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  content: "help";
}
body.etablissement .session-info.kind_radio::before {
  content: "radio";
}
body.etablissement .session-info.kind_scolaire::before {
  content: "school";
}
body.etablissement .session-info.kind_consult::before {
  content: "groups";
}
body.etablissement .session-info.kind_communautaire::before, body.etablissement .session-info.kind_autre::before, body.etablissement .session-info.kind_autres::before {
  content: "diversity_3";
}
body.etablissement .session-info.kind_consult::before, body.etablissement .session-info.kind_consultations::before, body.etablissement .session-info.kind_consultation::before {
  content: "stethoscope";
}
body.etablissement .session-info.etat_nouveau {
  background: linear-gradient(90deg, #f0f0f0 0%, #f8d7da 62%);
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
}
body.etablissement .session-info.etat_attentedispo {
  background: linear-gradient(90deg, #f0f0f0 0%, #ffeeba 62%);
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
}
body.etablissement .session-info.etat_envoye {
  background: linear-gradient(90deg, #f0f0f0 0%, #c3e6cb 62%);
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
}
body.etablissement .session-info.etat_attentecertification {
  background: linear-gradient(90deg, #f0f0f0 0%, #bee5eb 62%);
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
}
body.etablissement .session-info.etat_certifrecue {
  background: linear-gradient(90deg, #f0f0f0 0%, #d6d8db 62%);
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
}
body.etablissement .interventionTable {
  width: 100%;
  max-width: 100vw;
  border-collapse: collapse;
  margin-top: 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #ddd;
}
body.etablissement .interventionTable.kind_:not(.kind_scolaire) th.classe, body.etablissement .interventionTable.kind_:not(.kind_scolaire) th.prof,
body.etablissement .interventionTable.kind_:not(.kind_scolaire) td.classe,
body.etablissement .interventionTable.kind_:not(.kind_scolaire) td.prof, body.etablissement .interventionTable[class*=" kind_"]:not(.kind_scolaire) th.classe, body.etablissement .interventionTable[class*=" kind_"]:not(.kind_scolaire) th.prof,
body.etablissement .interventionTable[class*=" kind_"]:not(.kind_scolaire) td.classe,
body.etablissement .interventionTable[class*=" kind_"]:not(.kind_scolaire) td.prof {
  display: none;
}
body.etablissement .interventionTable th.inter {
  transition: transform 0.2s ease-in-out, background-color 0.2s, color 0.2s;
}
body.etablissement .interventionTable th.inter:hover {
  background-color: white;
  color: red;
  transform: scale(1.12);
  cursor: grab;
}
body.etablissement .interventionTable th,
body.etablissement .interventionTable td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}
body.etablissement .interventionTable th div.dispo,
body.etablissement .interventionTable td div.dispo {
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
}
body.etablissement .interventionTable th div.dispo div,
body.etablissement .interventionTable td div.dispo div {
  min-width: 100px;
  flex: 1 1 auto;
  text-wrap: nowrap;
  margin: 0px 3px;
  display: table-cell;
}
body.etablissement .interventionTable th.classe, body.etablissement .interventionTable th.seance,
body.etablissement .interventionTable td.classe,
body.etablissement .interventionTable td.seance {
  width: 8em;
}
body.etablissement .interventionTable th.classe input, body.etablissement .interventionTable th.seance input,
body.etablissement .interventionTable td.classe input,
body.etablissement .interventionTable td.seance input {
  width: 8em;
}
body.etablissement .interventionTable th.date,
body.etablissement .interventionTable td.date {
  width: 9em;
  padding: 0px;
}
body.etablissement .interventionTable th.date input,
body.etablissement .interventionTable td.date input {
  width: 9em;
  margin: 0px;
  padding: 0px;
}
body.etablissement .interventionTable th.heure_debut, body.etablissement .interventionTable th.heure_fin,
body.etablissement .interventionTable td.heure_debut,
body.etablissement .interventionTable td.heure_fin {
  width: 5em;
}
body.etablissement .interventionTable th.heure_debut input, body.etablissement .interventionTable th.heure_fin input,
body.etablissement .interventionTable td.heure_debut input,
body.etablissement .interventionTable td.heure_fin input {
  width: 4em;
}
body.etablissement .interventionTable th.inter,
body.etablissement .interventionTable td.inter {
  width: 6em;
}
body.etablissement .interventionTable th.inter input,
body.etablissement .interventionTable td.inter input {
  width: 4em;
}
body.etablissement .interventionTable th.inter:has(div.inter_empty),
body.etablissement .interventionTable td.inter:has(div.inter_empty) {
  background-color: #c8ede3;
}
body.etablissement .interventionTable th.salle, body.etablissement .interventionTable th.prof, body.etablissement .interventionTable th.classe,
body.etablissement .interventionTable td.salle,
body.etablissement .interventionTable td.prof,
body.etablissement .interventionTable td.classe {
  width: 5em;
}
body.etablissement .interventionTable th.salle input, body.etablissement .interventionTable th.prof input, body.etablissement .interventionTable th.classe input,
body.etablissement .interventionTable td.salle input,
body.etablissement .interventionTable td.prof input,
body.etablissement .interventionTable td.classe input {
  width: 4em;
}
body.etablissement .interventionTable thead {
  background: #007bff;
  color: white;
}
body.etablissement .interventionTable tbody tr:nth-child(even) {
  background: #f8f9fa;
}
body.etablissement .interventionTable tbody tr:hover {
  background: #e1f5fe;
  transition: 0.3s;
}
@media (max-width: 768px) {
  body.etablissement .session-container {
    padding: 10px;
  }
  body.etablissement .interventionTable {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  body.etablissement .session-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ===========================================
      Additional Global Styles
      ========================================== */
/* Include remaining styles from set 2 that don't conflict with body.etablissement */
/* ===========================================
      Doodle Specific Styles
      ========================================== */
body.doodle {
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  font-weight: 501;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
}
body.doodle input[type=submit] {
  margin-top: 20px;
  width: 100%;
  max-width: 200px;
  height: 40px;
  background: aqua;
  border: none;
  border-radius: 5px;
  font-weight: bolder;
  font-size: 110%;
  cursor: pointer;
  transition: background 0.3s ease;
}
body.doodle input[type=submit]:hover {
  background: darkcyan;
}
body.doodle .status-container {
  font-family: "Lato", "Roboto", Serif;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  max-height: 400px;
  overflow-y: auto;
  border-radius: 8px;
}
body.doodle .status-container .status-line {
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}
body.doodle .status-container .info {
  background-color: #f0f0f0;
}
body.doodle .status-container .success {
  background-color: #dff0d8;
  color: #3c763d;
}
body.doodle .status-container .error {
  background-color: #f2dede;
  color: #a94442;
}
body.doodle table {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}
body.doodle table tr {
  transition: background-color 0.3s ease;
}
body.doodle table tr[data-par="0"] {
  background: linear-gradient(90deg, rgba(135, 206, 250, 0.2) 0%, rgba(135, 206, 250, 0.1) 100%);
  border-left: 4px solid rgba(65, 105, 225, 0.4);
}
body.doodle table tr[data-par="1"] {
  background: linear-gradient(270deg, rgba(100, 149, 237, 0.2) 0%, rgba(100, 149, 237, 0.1) 100%);
  border-left: 4px solid rgba(30, 144, 255, 0.4);
}
body.doodle table tr.hover-highlight {
  background-color: rgba(53, 230, 243, 0.3) !important;
  transition: background-color 0.3s ease;
}
body.doodle table th,
body.doodle table td {
  text-align: center;
  padding: 12px;
  border: 1px solid #e0e0e0;
}
body.doodle table th.repondu, body.doodle table th.repondu0, body.doodle table th.repondu1, body.doodle table th.repondu2,
body.doodle table td.repondu,
body.doodle table td.repondu0,
body.doodle table td.repondu1,
body.doodle table td.repondu2 {
  border: none;
  padding: 2px;
}
body.doodle table th.repondu i, body.doodle table th.repondu0 i, body.doodle table th.repondu1 i, body.doodle table th.repondu2 i,
body.doodle table td.repondu i,
body.doodle table td.repondu0 i,
body.doodle table td.repondu1 i,
body.doodle table td.repondu2 i {
  font-size: 30px;
  font-weight: 900;
}
body.doodle table th.repondu2 i,
body.doodle table td.repondu2 i {
  color: red;
  font-weight: 400;
}
body.doodle table th.repondu2 i:after,
body.doodle table td.repondu2 i:after {
  content: "close";
}
body.doodle table th.repondu1 i,
body.doodle table td.repondu1 i {
  color: green;
  font-weight: 900;
}
body.doodle table th.repondu1 i:after,
body.doodle table td.repondu1 i:after {
  content: "check";
}
body.doodle table th.repondu0 i,
body.doodle table td.repondu0 i {
  color: #007bff;
  font-weight: 200;
}
body.doodle table th.repondu0 i:after,
body.doodle table td.repondu0 i:after {
  content: "question_mark";
}
body.doodle table th {
  background-color: #007bff;
  color: white;
  font-weight: bold;
  padding: 12px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
body.doodle table td.reponse {
  display: flex;
  flex-direction: row;
  /* Changed from column to row */
  align-items: center;
  /* Center items vertically */
  justify-content: center;
  /* Center items horizontally */
  gap: 45px;
  padding-left: 2em;
}
body.doodle table td.reponse .checkbox-container {
  text-align: center;
}
@media (max-width: 768px) {
  body.doodle table {
    /* Additional modification to ensure right alignment of labels */
  }
  body.doodle table table,
body.doodle table thead,
body.doodle table tbody,
body.doodle table th,
body.doodle table td,
body.doodle table tr {
    display: block;
  }
  body.doodle table thead tr {
    display: none;
  }
  body.doodle table tr {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  body.doodle table tr[data-par="0"] {
    background: linear-gradient(to right, rgba(135, 206, 250, 0.2) 0%, rgba(135, 206, 250, 0.1) 100%);
    border-left: 5px solid rgba(65, 105, 225, 0.4);
  }
  body.doodle table tr[data-par="1"] {
    background: linear-gradient(to right, rgba(100, 149, 237, 0.2) 0%, rgba(100, 149, 237, 0.1) 100%);
    border-left: 5px solid rgba(30, 144, 255, 0.4);
  }
  body.doodle table tr.hover-highlight {
    background-color: rgba(173, 216, 230, 0.3) !important;
    border-left-color: rgba(65, 105, 225, 0.6) !important;
  }
  body.doodle table td {
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  body.doodle table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    width: 100px;
    padding-left: 10px;
    font-family: "Arial", sans-serif;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    font-variant: small-caps;
    font-size: 110%;
    color: blue;
  }
  body.doodle table input[type=submit] {
    width: 100%;
    margin-right: 0;
  }
  body.doodle table td.repondu {
    text-align: center !important;
  }
  body.doodle table td.reponse {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Changed to align items to the right */
    text-align: right;
    /* Align text to the right */
    padding-right: 10px;
    /* Add some right padding */
    gap: 0px;
  }
  body.doodle table td.reponse .checkbox-container {
    margin-bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    /* Align checkbox to the right */
  }
  body.doodle table td.reponse::before {
    content: attr(data-label);
    position: absolute;
    right: 50px;
    /* Adjust distance from right side */
    text-align: right;
    color: blue;
    font-variant: small-caps;
    font-weight: 700;
  }
}

/* ===========================================
      Menu Container Styles
      ========================================== */
.menu-container {
  position: fixed;
  z-index: 100;
}
.menu-container-top {
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
}
.menu-container-left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 220px;
}
.menu-container-right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
}
.menu-container-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
}

/* Trigger Styles */
.trigger {
  position: absolute;
  background: transparent;
}
.trigger-top {
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
}
.trigger-left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 20px;
}
.trigger-right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
}
.trigger-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
}
.trigger:focus {
  outline: none;
}

/* ===========================================
      Resizable Elements
      ========================================== */
div.resizable {
  border: 1px dotted #ccc;
}

.ui-resizable-helper {
  border: 3px dotted red;
}

/* ===========================================
      Status List Styles
      ========================================== */
#status-list .status-info {
  color: blue;
}
#status-list .status-link {
  color: green;
}
#status-list .status-success {
  color: darkgreen;
}
#status-list .status-error {
  color: red;
}

/* ===========================================
      Table Container Styles
      ========================================== */
.table_container {
  width: 98%;
  display: flex;
  align-items: flex-end;
  width: 100%;
  column-gap: 0.5em;
  justify-content: start;
}
.table_container .buttons {
  display: flex;
  flex-direction: column;
}
.table_container .action-button {
  margin: 0.5em 0em 0em 0.5em;
}
.table_container .action-button i {
  color: #3c09f3 !important;
}

/* ===========================================
      buttons down table styles
      ========================================== */
.buttons-container,
.bottombtns {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 5rem;
  padding: 2rem 0;
  flex-flow: row-reverse nowrap;
}
.buttons-container .btn:disabled,
.bottombtns .btn:disabled,
.buttons-container .btn.disabled,
.bottombtns .btn.disabled {
  background: radial-gradient(circle at center, #C5D4E3 0%, #A4B7CC 50%, #8299B3 100%);
  color: #FFFFFF;
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.7;
}
.buttons-container .btn,
.bottombtns .btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  position: relative;
}
.buttons-container .btn[data-tooltip]::before,
.bottombtns .btn[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: #fef9c3;
  color: #000000;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
  border: 1px solid #fbbf24;
  box-shadow: 0 2px 4px rgba(251, 191, 36, 0.2);
}
.buttons-container .btn[data-tooltip]::after,
.bottombtns .btn[data-tooltip]::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fbbf24;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.buttons-container .btn[data-tooltip]:hover::before, .buttons-container .btn[data-tooltip]:hover::after,
.bottombtns .btn[data-tooltip]:hover::before,
.bottombtns .btn[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}
.buttons-container .btn-secondary,
.bottombtns .btn-secondary {
  background-color: white;
  border: 1px solid #d1d5db;
  color: #374151;
}
.buttons-container .btn-secondary.dejacertif,
.bottombtns .btn-secondary.dejacertif {
  background-color: rgba(193, 226, 232, 0.917) !important;
  border: 2px solid #e1c572 !important;
  color: #374151 !important;
}
.buttons-container .btn-secondary:hover,
.bottombtns .btn-secondary:hover {
  background-color: #e5e7eb;
  border-color: #6b7280;
  color: #111827;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.1);
}
.buttons-container .btn-secondary:active,
.bottombtns .btn-secondary:active {
  transform: translateY(0);
  background-color: #d1d5db;
  box-shadow: none;
}
.buttons-container .btn-primary,
.bottombtns .btn-primary {
  background-color: #2563eb;
  border: none;
  color: white;
  padding: 0.5rem 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-weight: 500;
}
.buttons-container .btn-primary:hover,
.bottombtns .btn-primary:hover {
  background-color: #1e40af;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);
}
.buttons-container .btn-primary:active,
.bottombtns .btn-primary:active {
  transform: translateY(0);
  background-color: #1d4ed8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ===========================================
      Theme-specific Styles
      ========================================== */
body[data-theme=noedit] th.select-checkbox > *,
body[data-theme=noedit] td.select-checkbox > * {
  display: none !important;
}

.search-tr input.nickname {
  width: 3em !important;
}
.search-tr input.telephone {
  width: 5em !important;
}
.search-tr input.calendrier {
  width: 10em !important;
}

body[data-theme] {
  /*
  h1 {
      float: left;
  }

  .head-button {
      float: right;
      font-size: 120%;
      padding: 5px;
      margin: 1em;
      color: red;
  }*/
}
body[data-theme] h1 {
  margin-bottom: 0;
  width: 100%;
  display: block;
  clear: both;
}
body[data-theme] .head-button {
  display: block;
  clear: both;
  margin: 0.5em 1em 1em 0;
  font-size: 120%;
  padding: 5px;
  color: red;
}

/**
LightBox
**/
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}
.lightbox form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lightbox label {
  margin-top: 10px;
}
.lightbox input[type=text],
.lightbox textarea {
  margin-bottom: 10px;
}
.lightbox .lightbox-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
}
.lightbox .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  translate: 10px -16px;
}
.lightbox .close:hover,
.lightbox .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/** no lightbox **/
form.interventionForm {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 98%;
}