/* core/css/components.css */


/* =========================
   COMPOSANTS UI - MÉCANIQUE (CORE)
   ========================= */
/* =========================
   RESET ET POLICE SYSTÈME
   ========================= */
 
  
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  /* Applique la stack système POLICE-FAMILY à tout le site */
  * {
    font-family: -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Oxygen, Ubuntu,
                 Cantarell, "Fira Sans", "Droid Sans",
                 "Helvetica Neue", sans-serif;
                 
    /* Optionnel mais conseillé pour lisibilité */
    -webkit-font-smoothing: antialiased; /* macOS / iOS */
    -moz-osx-font-smoothing: grayscale;  /* Firefox */
  }


/* ========================================
   CONTAINERS AVEC WIDTH CONTENT MAX
   ======================================== */   
.width_content_800  { width: 100%; max-width: 800px; margin: 0 auto; }
.width_content_900  { width: 100%; max-width: 900px; margin: 0 auto; }
.width_content_1200 { width: 100%; max-width: 1200px; margin: 0 auto; }
.width_content_1400 { width: 100%; max-width: 1400px; margin: 0 auto; }
.width_content_1600 { width: 100%; max-width: 1600px; margin: 0 auto; }

/* ========================================
   EMPTY STATES : MSG AUCUN RESULTAT 
   ======================================== */

   .empty_state {
    padding: var(--empty-state-padding);
    text-align: center;
    color: var(--empty-state-color);
    font-size: var(--empty-state-font-size);
    min-height: var(--empty-state-min-height);
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .empty_state::after {
        content: var(--empty-state-msg-default);
    }

    .empty_state[data-type="no_results"]::after {
        content: var(--empty-state-msg-no-results);
    }

    .empty_state[data-type="entity_not_found"]::after {
        content: var(--empty-state-msg-entity-not-found);
    }


/* =========================
   TRANSIENT STATE : différenciation visuelle de champs
   ========================= */
   .cl_transient {
        border-left: var(--transient-border-left) !important;
        color: var(--transient-color) !important;
        font-weight: var(--transient-font-weight) !important;
    }



/* =========================
   BOUTON LOADING STATE
   ========================= */
   .btn_loading {
        position: relative;
    }

    .btn_loading.btn_loading_on {
        pointer-events: none;
        opacity: 0.7;
        cursor: not-allowed;
    }

    /* Spinner ajouté via ::after (en plus de l'icône existante) */
    .btn_loading.btn_loading_on::after {
      content: '';
      display: inline-block;
      width: 1em; /* S'adapte à la taille de la police */
      height: 1em; /* S'adapte à la taille de la police */
      aspect-ratio: 1; /* Garantit la forme circulaire */
      border: 2px solid #e3f2fd; /* Bleu clair pour le fond */
      border-top-color: #2196f3; /* Bleu traditionnel pour la partie animée */
      border-radius: 50%;
      animation: btn_ic_spin 1s linear infinite;
      margin-left: 8px;
      vertical-align: middle;
  }


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

/* =========================
   BOUTONS
   ========================= */
   button {
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    text-transform: var(--btn-text-transform);
    border: var(--btn-border-width) solid var(--btn-border);
    border-radius: var(--btn-border-radius);
    box-shadow: var(--btn-shadow);
    transition: var(--btn-transition);
  }
  
  button:hover {
    opacity: var(--btn-hover-opacity);
    border-color: var(--btn-hover-border);
    box-shadow: var(--btn-hover-shadow);
  }
  
  /* Icônes dans les boutons btn_ic() */
  .btn_ic i {
    display: var(--btn-icon-display);
  }
  
  /* =========================
     TABLES
     ========================= */
     .hover {
      transition: transform var(--hover-transition), box-shadow var(--hover-transition);
      cursor: pointer;
    }
    .hover:hover {
      transform: translateY(var(--hover-lift-y));
      box-shadow: var(--hover-shadow);
    }
  /* =========================
     TABLES
     ========================= */
  table {
    font-size: var(--table-font-size);
    width: 100%;
    border-collapse: collapse;
  }
  
  table th,
  table td {
    padding: var(--table-cell-padding);
    text-align: left;
    vertical-align: middle;
  }

  
  /* =========================
     TABLE - STYLES LIGNES
     ========================= */
  /* ─── TR TH PAR DÉFAUT  ─────────────────────── */
  thead tr {
    background: var(--bg_tr_thead);
    color: var(--color_tr_thead);
  }

  /* ─── TR TD PAR DÉFAUT  ─────────────────────── */
  tbody tr:nth-child(odd) {
    background: var(--bg_tr_odd);
  }

  tbody tr:nth-child(even) {
    background: var(--bg_tr_even);
  }

  tbody tr:hover {
    background: var(--bg_tr_hover);
    cursor: pointer;
  }

  /* ─── TR TD NO_BG ───────────────── */
  table.no_bg tbody tr {
    background: inherit;
  }

  table.no_bg tbody tr:hover {
    background: var(--bg_tr_hover);
    cursor: pointer;
  }

  /* ─── TR TD NO_POINTER ───────────────────────── */
  table.no_pointer tbody tr:nth-child(odd):hover {
    background: var(--bg_tr_odd) !important;
    cursor: default;
  }

  table.no_pointer tbody tr:nth-child(even):hover {
    background: var(--bg_tr_even) !important;
    cursor: default;
  }

  /* ─── TR TD OFF ────── */
  table.off tbody tr,
  table.off tbody tr:hover {
    background: inherit !important;
    cursor: default;
  }

  /* ─── TABLE COMPACT sans padding, ni alignement ────── */
  table.compact th,
  table.compact td {
    padding: 0;
    text-align: inherit;
    vertical-align: inherit;
  }
  
  /* =========================
     ONGLETS
     ========================= */
  /* Les onglets utilisent les variables CSS, pas de mécanique spécifique ici */
  /* La mécanique est gérée par le JavaScript/HTML */
  

  /* =========================
     HEADER PAGE
     ========================= */    

     .entete_page {
      position: relative;
      float: left;
      width: 100%;
      background: var(--header-page-bg);
      padding: var(--header-page-padding);
      margin: var(--header-page-margin);
      display: flex;
      flex-direction: column;
      justify-content: center;  /* Centre verticalement si un seul enfant (pas de sous-titre) */
      min-height: fit-content;
      top: 0;
      left: 0;
    }
    
    /* Si sous-titre présent (via classe), répartir l'espace vertical */
    .entete_page.has_subtitle {
      justify-content: space-between;
    }
    
    /* Titre : élément distinct, prend l'espace disponible */
    .titre_page {
      font-size: var(--header-title-font-size);
      width: var(--header-title-width);
      padding: var(--header-title-padding);
      margin-top: var(--header-title-margin-top);
      text-align: left;
      color: var(--header-title-color);
      flex: 1;  /* Prend l'espace disponible */
    }
    
    
    /* Sous-titre : élément distinct */
    .sous_titre_page {
      font-size: var(--header-subtitle-font-size);
      width: 100%;
      padding: var(--header-subtitle-padding);
      margin: var(--header-subtitle-margin);
      text-align: left;
      color: var(--header-subtitle-color);
    }


  
  /* =========================
     LOGO ALERT
     ========================= */
  .logo_alert {
    display: var(--logo-alert-display);
  }
  
 
/* =========================
   CONT_BUBBLE
   ========================= */
   .cont_bubble {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      overflow: visible;
      pointer-events: none;
      z-index: 1000000;
  }

  .cont_bubble > * {
      pointer-events: auto;
  }
  .bubble_content {
    background: var(--bubble-content-bg);
    box-shadow: var(--bubble-content-shadow);
    border-radius: var(--bubble-content-radius);
    padding: var(--bubble-content-padding);
    min-width: var(--bubble-content-min-width);
    max-width: var(--bubble-content-max-width);
    min-height: var(--bubble-content-min-height);
    max-height: var(--bubble-content-max-height);
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .bubble_close {
    margin-top: 20px;
    float: right;
  }
  .bubble_content .bubble_title {
    font-size: var(--bubble-title-font-size);
    font-weight: var(--bubble-title-font-weight);
    margin-bottom: var(--bubble-title-margin-bottom);
    color: var(--bubble-title-color);
    text-transform: var(--bubble-title-text-transform);
  }
/* =========================
   ALERT
   ========================= */
.popup_alert {
    position: fixed;
    z-index: var(--alert-popup-z-index);
    top: var(--alert-popup-top);
    left: var(--alert-popup-left);
    transform: translateX(var(--alert-popup-transform-x));
    padding: var(--alert-popup-padding);
    min-width: var(--alert-popup-min-width);
    max-width: var(--alert-popup-max-width);
    border-radius: var(--alert-popup-border-radius);
    background: var(--alert-popup-bg);
  }
  
  .cont_alert {
    position: fixed;
    z-index: var(--alert-container-z-index);
    left: var(--alert-container-left);
    top: var(--alert-container-top);
    max-width: var(--alert-container-max-width);
    max-height: var(--alert-container-max-height);
  }
  
  .logo_alert {
    max-width: var(--alert-logo-max-width);
    max-height: var(--alert-logo-max-height);
    margin: var(--alert-logo-margin);
  }
  
  /* =========================
     POPUP - REPEAT EVENT
     ========================= */
     .popup_repeat_event {
      position: fixed;
      z-index: var(--repeat-popup-z-index);
      top: var(--repeat-popup-top);
      left: var(--repeat-popup-left);
      transform: translateX(var(--repeat-popup-transform-x));
      padding: var(--repeat-popup-padding);
      min-width: var(--repeat-popup-min-width);
      max-width: var(--repeat-popup-max-width);
      border-radius: var(--repeat-popup-border-radius);
      background: var(--repeat-popup-bg);
    }
    
    .bg_repeat_event {
      position: fixed;
      z-index: var(--repeat-bg-z-index);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, var(--repeat-bg-opacity));
    }
    

/* =========================
   RÉPÉTITION ÉVÉNEMENT - JOURS DE LA SEMAINE
   ========================= */
   .repeat_week_days_container {
      display: flex;
      flex-wrap: wrap;
      gap: var(--repeat-week-day-gap);
      margin-top: 10px;
  }

  .repeat_week_day_label {
      display: inline-block;
      padding: var(--repeat-week-day-padding);
      border-radius: var(--repeat-week-day-border-radius);
      cursor: pointer;
      border: var(--repeat-week-day-border);
      background: var(--repeat-week-day-bg);
      color: var(--repeat-week-day-color);
      font-size: var(--repeat-week-day-font-size);
      transition: var(--repeat-week-day-transition);
      user-select: none;
      margin: 0;
  }


  .repeat_week_day_label:hover {
      border: var(--repeat-week-day-hover-border);
      background: var(--repeat-week-day-hover-bg);
  }

  .repeat_week_day_label.repeat_week_day_selected {
      background: var(--repeat-week-day-selected-bg);
      color: var(--repeat-week-day-selected-color);
      border: var(--repeat-week-day-selected-border);
  }

  .repeat_week_day_label span {
      pointer-events: none;
  }
  /* =========================
     CONT_POPUP
     ========================= */
  .cont_popup {
    position: fixed;
    z-index: var(--popup-container-z-index);
    top: var(--popup-container-top);
    left: var(--popup-container-left);
    width: var(--popup-container-width);
    min-height: var(--popup-container-min-height);
    max-height: var(--popup-container-max-height);
    background: var(--popup-container-bg);
    overflow-x: hidden;
    overflow-y: auto;
    transition: var(--popup-container-transition);
  }
  
  /* =========================
     CONT_POPUP_OAUTH_AGENDA
     ========================= */
  .cont_popup_oauth_agenda {
    position: fixed;
    z-index: var(--popup-oauth-z-index);
    top: var(--popup-oauth-top);
    left: var(--popup-oauth-left);
    width: var(--popup-oauth-width);
    min-height: var(--popup-oauth-min-height);
    max-height: var(--popup-oauth-max-height);
    background: var(--popup-oauth-bg);
    overflow-x: hidden;
    overflow-y: auto;
    transition: var(--popup-oauth-transition);
  }
  
  /* =========================
     LAYOUT - base
     ========================= */
  .menu_top,
  .menu_side,
  .cont_onglets {
    background-color: var(--layout-menu-bg);
    box-shadow: var(--shadow_large) !important;
  }

  .menu_top{    
    display: flex;
    align-items: center;
  }
  
  .cont_general,
  .cont_documents {
    background-color: var(--layout-container-bg);
    
  }
  .cont_general > [data-categorie],
  .cont_documents > [data-categorie] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  /* =========================
     MENU TOP - AUTO HIDE
    ========================= */
    .layout_menu_top_auto_hide .menu_top {
        position: fixed;
        top: 0;
        z-index: 1000;
        transition: transform 0.25s ease-out;
    }
    .layout_menu_top_hidden .menu_top {
        transform: translateY(-100%);
    }

    
  /* =========================
     FOOTER
     ========================= */
     .cont_footer {
        width: 100%;
        margin-top: auto;
        padding: var(--footer-padding);
        text-align: center;
        font-size: var(--footer-font-size);
        color: var(--footer-color);
        border-top: 1px solid var(--footer-border);
        background: var(--footer-bg);
    }

  
  /* =========================
     ONGLETS - base
     ========================= */
  .onglet {
    display: inline-block;
    cursor: pointer;
    transition: var(--onglet-transition);
    width: var(--onglet-width);
    margin: var(--onglet-margin);
    background-color: var(--bg_onglet);
    color: var(--color_onglet);
  }
  
  .onglet:hover {
    background-color: var(--bg_onglet_hover);
    color: var(--color_onglet_hover);
  }
  
  .ic_close_onglet {
    float: right;
    display: none;
    transition: var(--onglet-close-transition);
  }
  
  .onglet:hover .ic_close_onglet {
    display: block;
    float: right;
    margin: var(--onglet-close-margin);
  }
  
  /* Onglet dans reduct */
  .reduct .title_onglet {
    float: left;
    margin: var(--onglet-title-reduct-margin);
    width: var(--onglet-title-reduct-width);
  }
  
  .hover .title_onglet,
  .full .title_onglet {
    float: left;
    margin: var(--onglet-title-full-margin);
    width: var(--onglet-title-full-width);
  }
  
  .onglet.active {
    background-color: var(--bg_onglet_active);
    color: var(--color_onglet_active);
  }
  
  /* =========================
     BOUTONS - base
     ========================= */
  button {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--btn-base-transition);
    margin-left: var(--btn-base-margin-left);
    margin-right: var(--btn-base-margin-right);
    margin-bottom: var(--btn-base-margin-bottom);
  }
  
  /* États désactivés */
  button:disabled,
  .BTN_disabled {
    opacity: var(--btn-disabled-opacity);
    cursor: not-allowed;
  }
  
  .BTN_annuler     { background: var(--btn-annuler-bg); color: var(--btn-annuler-color); }
  .BTN_valider     { background: var(--btn-valider-bg); color: var(--btn-valider-color); }
  .BTN_enregistrer { background: var(--btn-enregistrer-bg); color: var(--btn-enregistrer-color); }
  .BTN_supprimer   { background: var(--btn-supprimer-bg); color: var(--btn-supprimer-color); }
  


  /* =========================
     TITLE
     ========================= */
     .tooltip {
      position: absolute;
      background: var(--tooltip-bg);
      color: var(--tooltip-color);
      padding: var(--tooltip-padding);
      border-radius: var(--tooltip-border-radius);
      font-size: var(--tooltip-font-size);
      white-space: nowrap;
      pointer-events: none;
      z-index: var(--tooltip-z-index);
      box-shadow: var(--tooltip-shadow);      
      opacity: 0;
      transition: opacity 150ms ease-out;
    }  
    
  /* =========================
     ICONES
     ========================= */
  .ic_hover:hover {
    opacity: var(--icon-hover-opacity);
  }
  
    
  .ic_close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    margin-right: var(--icon-close-margin);
    color: var(--icon-close-color);
  }
  
    /* Icône close : élément distinct, positionnée en absolute par rapport à .entete_page */
    .entete_page .ic_close {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      margin-right: var(--icon-close-margin);
      color: var(--icon-close-color);
    }
  
/* =========================
   CAROUSEL LINE HORIZONTALE NAVIGATION
   ========================= */
   .scroll_nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--scroll_nav_gap, 0.5rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .scroll_nav_scroll {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }  
  
  
  .scroll_nav_scroll::-webkit-scrollbar {
    display: none;
  }
  
  /* Zone cliquable : dimensions, état, transition. Pas de color. */
  .scroll_nav_btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--scroll_nav_btn_size, 2.5rem);
    height: var(--scroll_nav_btn_size, 2.5rem);
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    box-shadow: none;
    transition: opacity var(--scroll_nav_btn_transition_opacity, 0.25s) ease;
  }

  .scroll_nav_btn:disabled {
    opacity: var(--scroll_nav_btn_disabled_opacity, 0);
    cursor: default;
  }

  /* Rendu visuel : icône seule (couleur, taille). Material Symbols : font-size suffit. */
  .scroll_nav_btn i {
    font-size: var(--scroll_nav_btn_icon_size, 1.5rem);
    color: var(--scroll_nav_btn_icon_color, grey);
  }



  /* =========================
     GALLERY (Galerie d'encards)
     ========================= */
  .gallery_container {
    display: grid;
    gap: var(--gallery-container-gap);
    width: 100%;
    box-sizing: border-box;
    padding: var(--gallery-container-padding);
  }
  
  /* Colonnes de galerie */
  .GALLERY_COLS_1 { grid-template-columns: repeat(1, 1fr); }
  .GALLERY_COLS_2 { grid-template-columns: repeat(2, 1fr); }
  .GALLERY_COLS_3 { grid-template-columns: repeat(3, 1fr); }
  .GALLERY_COLS_4 { grid-template-columns: repeat(4, 1fr); }
  .GALLERY_COLS_5 { grid-template-columns: repeat(5, 1fr); }
  .GALLERY_COLS_6 { grid-template-columns: repeat(6, 1fr); }
  
  /* Styles de base pour les cartes de galerie */
  .gallery_item_card {
    background: var(--gallery-card-bg);
    padding: var(--gallery-card-padding);
    border-radius: var(--gallery-card-border-radius);
    box-shadow: var(--gallery-card-shadow);
    transition: var(--gallery-card-transition);
    border: var(--gallery-card-border);
    cursor: pointer;
  }
  
  .gallery_item_card:hover {
    box-shadow: var(--gallery-card-hover-shadow);
    transform: var(--gallery-card-hover-transform);
    border: var(--gallery-card-hover-border);
  }
  
  /* Styles pour les éléments internes des cartes */
  .gallery_item_card .card_header {
    margin-bottom: var(--gallery-card-header-margin-bottom);
    padding-bottom: var(--gallery-card-header-padding-bottom);
    border-bottom: var(--gallery-card-header-border-bottom);
  }
  
  .card_img {
    width: 100%;
    padding-bottom: var(--gallery-card-img-padding-bottom);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--gallery-card-img-border-radius);
    margin-bottom: var(--gallery-card-img-margin-bottom);
    position: relative;
  }
  
  /* =========================
     API AGENDA : Interface OAUTH
     ========================= */
  .oauth_connections_card {
    width: var(--oauth-card-width);
    margin-left: var(--oauth-card-margin-left);
  }
  
  .platform_calendar_icon {
    float: left;
  }
  
  .platform_label {
    float: left;
    font-size: var(--oauth-platform-label-font-size);
    margin-left: var(--oauth-platform-label-margin-left);
  }
  
  .accounts_list {
    float: left;
    width: 100%;
  }
  
  .account_display {
    float: left;
    width: 100%;
    padding: var(--oauth-account-padding);
    border-bottom: var(--oauth-account-border-bottom);
  }
  
  .account_label {
    margin: var(--oauth-account-label-margin);
  }
  
  .ic_edit_account {
    float: right;
    width: var(--oauth-edit-icon-width);
    height: var(--oauth-edit-icon-height);
    margin: var(--oauth-edit-icon-margin);
    color: var(--oauth-edit-icon-color);
    cursor: pointer;
  }
  
  .input_account_label {
    float: left;
    width: var(--oauth-input-label-width) !important;
    margin: var(--oauth-input-label-margin) !important;
  }
  
  /* =========================
     BTN AVEC ICON
     ========================= */
  .btn_ic {
    display: inline-flex;
    align-items: center;
    gap: var(--btn-ic-gap);
    padding: var(--btn-ic-padding);
    font-size: var(--btn-ic-font-size);
    cursor: pointer;
  }
  
  .btn_ic i {
    font-size: var(--btn-ic-icon-font-size);
  }
  
  .btn_ic span {
    display: inline; /* texte visible par défaut */
  }
  
  /* Responsive mobile : masquer le texte et ne garder que l'icône */
  @media(max-width: 1064px) {


  /* Responsive mobile masquer le texte et ne garder que l'icône */
    .btn_ic.btn_ic_resp {
      padding: var(--btn-ic-mobile-padding);
    }

    .btn_ic.btn_ic_resp span {
      display: none;
    }

    /* =========================
       ALERT
       ========================= */
    .popup_alert {
      left: var(--alert-popup-mobile-left);
      transform: translateX(var(--alert-popup-mobile-transform-x));
      width: var(--alert-popup-mobile-width);
    }
    
    .logo_alert {
      margin: var(--alert-logo-mobile-margin);
    }
    
    /* =========================
       API AGENDA : Interface OAUTH
       ========================= */
    .oauth_connections_card {
      width: var(--oauth-card-mobile-width);
      margin-left: var(--oauth-card-mobile-margin-left);
    }
    
    /* =========================
       POPUP REPEAT EVENT
       ========================= */
       .popup_repeat_event {
        top: 20px;
        left: 20px;
        min-width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        transform: translateX(0);
      }
    /* =========================
       CARD GALLERY
       ========================= */
    .GALLERY_COLS_3, .GALLERY_COLS_4, .GALLERY_COLS_5, .GALLERY_COLS_6 {
      grid-template-columns: repeat(1, 1fr);
    }
    
    .GALLERY_COLS_2 {
      grid-template-columns: repeat(1, 1fr);
    }
    /* =========================
       CAROUSEL LINE HORIZONTALE
       ========================= */
       .scroll_nav {
        column-gap: 0.125rem;
      }
  
      .scroll_nav_scroll {
        min-width: 0;
        container-type: inline-size;
        scroll-snap-type: x mandatory;
      }
  
      .scroll_nav_btn {
        width: 1.5rem;
        height: 2rem;
        min-width: 1.5rem;
        min-height: 2rem;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        color: rgba(51, 51, 51, 0.38);
      }
  
      .scroll_nav_btn i {
        font-size: 1.35rem;
        line-height: 1;
        font-weight: 300;
        color: inherit;
      }
  
      .scroll_nav_btn:not(:disabled):hover {
        color: rgba(51, 51, 51, 0.58);
      }
  
      .scroll_nav_btn:not(:disabled):active {
        color: rgba(51, 51, 51, 0.82);
      }
  
      .scroll_nav_btn:disabled {
        opacity: 0.22;
      }
  
  }