{
    % load static %
  }

  a {
    color: #21211f;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    text-decoration: none;
  }

  a:hover,
  a:focus {
    color: #20aec8;
  }

  .tooltip {
    z-index: 2 !important;
  }

  .navbar-nav .nav-link {
    padding-top: 0;
    padding-bottom: 0;
    height: 42px;
    line-height: 42px;
  }

  body {
    font-family: 'Oxygen', sans-serif;
    font-size: 16px;
    font-weight: 400;
    overflow-x: hidden;
  }

  .site-logo {
    margin-bottom: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 80px;
    width: auto;
  }

  .site-title {
    text-align: center;
    letter-spacing: 3px;
    margin: 0;
    text-transform: uppercase;
    font-family: 'Khand', sans-serif;
    letter-spacing: calc(rfs-value(1px) + 1vw);
    line-height: calc(rfs-value(1px) + 1vw);
    font-size: calc(rfs-value(1px) + 1vw);
    font-weight: bold;
  }

  .site-title a {
    color: #21211f;
  }

  .site-description {
    text-align: center;
    margin: 0;
    font-size: calc(2vw);
    text-transform: uppercase;
    color: #21211f;
    letter-spacing: calc(1vw);
  }

  @media (min-width: 500px) {
    .site-title {
      font-size: 36px;
      letter-spacing: 10px;
      line-height: 38px;
    }

    .site-description {
      font-size: 15px;
      letter-spacing: 7px;
    }
  }

  .site-branding {
    margin: 0 auto;
    background-image: url("../header_background-800x400.5aa6064fcdd4.jpg");
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    width: auto;
  }

  .navbar-hr {
    margin: 0;
  }

  .navbar ul li a {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .text-site-uppercase {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .nav ul li a {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .back-btn {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .back-btn:focus,
  .back-btn:active {
    outline: none !important;
    box-shadow: none;
    color: #21211f;
  }

  .navbar-notif {
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 8px;
  }

  h1 {
    font-size: 20px;
    color: #21211f;
    margin: 20px 20px 20px 20px;
  }

  .runner-list {
    margin: 0;
  }

  .material-icons.md-12 {
    font-size: 12px;
    vertical-align: middle
  }

  .material-symbols-outlined.md-12 {
    font-size: 12px;
    vertical-align: middle
  }

  .material-icons.md-18 {
    font-size: 18px;
    vertical-align: middle
  }

  .material-symbols-outlined.md-18 {
    font-size: 18px;
    vertical-align: middle
  }

  .material-icons.md-30 {
    font-size: 30px;
    vertical-align: middle
  }

  .material-icons.md-60 {
    font-size: 30px;
    vertical-align: middle
  }

  .material-icons.md-120 {
    font-size: 120px;
    vertical-align: middle
  }

  .material-icons.md-300 {
    font-size: 300px;
    vertical-align: middle
  }

  .material-icons-outlined.md-18 {
    font-size: 18px;
    vertical-align: middle
  }

  /* Icon-only dropdown toggles (registration "+", status arrow) are plain
     spans, so Bootstrap never gives them the pointer cursor. */
  span.material-icons[data-bs-toggle="dropdown"] {
    cursor: pointer;
  }

  /* Dropdown entries built as anchors without href (htmx actions) otherwise
     show a text-selection cursor. */
  .dropdown-item:not(.disabled) {
    cursor: pointer;
  }

  .filter_form {
    display: flex;
    align-items: center;
    /* Vertical alignment */
  }

  .card-challenge {
    display: flex;
    flex: 1 1 auto;
  }

  .img-runner {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
  }

  .carousel-control-prev {
    margin: auto auto;
    height: 50px;
    width: 50px;
  }

  .carousel-control-next {
    margin: auto auto;
    height: 50px;
    width: 50px;
  }

  .tabs-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    color: #21211f;
    text-align: center;
  }


  .nav-pills .nav-link.active,
  .nav-pills .show>.nav-link {
    color: #21211f;
    background-color: var(--app-color);
  }

  .tabs-footer ul li button {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .tabs-trainings ul li button {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .tabs-activities ul li button {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .tabs-races ul li button {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .pills-heading {
    display: none;
  }

  .my-footer {
    display: none;
  }

  #tab-pane-activities {
    margin-top: -25px
  }

  #tab-pane-races {
    margin-top: -35px
  }

  #tab-pane-weeks {
    margin-top: -10px
  }

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

    .index-col {
      max-width: 25% !important;
    }

    .next-past-header {
      margin-top: 0px !important;
    }

    .tn-cols-to-tabs>.tab-pane {
      display: block;
    }

    .pills-heading {
      display: block;
    }

    .my-footer {
      display: block;
    }

    .footer-margin {
      margin-bottom: 0px !important;
    }

    .main-cols {
      width: 0;
    }

    #tab-pane-activities {
      margin-top: 0px
    }

    #tab-pane-races {
      margin-top: 0px
    }

    #tab-pane-weeks {
      margin-top: 0px
    }
  }

  .dropdown-menu-center {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 0) !important;
  }

  @media only screen and (min-width: 768px) {
    .dropdown-menu-center {
      left: auto !important;
      right: auto !important;
    }
  }

  .myspinner {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* ============ desktop view ============ */
  @media all and (min-width: 992px) {
    .dropdown-menu li {
      position: relative;
    }

    .nav-item .submenu {
      display: none;
      position: absolute;
      left: 100%;
      top: -7px;
    }

    .nav-item .submenu-left {
      right: 100%;
      left: auto;
    }

    .dropdown-menu>li:hover {
      background-color: #f1f1f1
    }

    .dropdown-menu>li:hover>.submenu {
      display: block;
    }
  }

  /* ============ desktop view .end// ============ */

  /* ============ small devices ============ */
  @media (max-width: 991px) {
    .dropdown-menu .dropdown-menu {
      margin-left: 0.7rem;
      margin-right: 0.7rem;
      margin-bottom: .5rem;
    }
  }

  /* ============ small devices .end// ============ */


  .select2-selection {
    height: 58px !important;
    padding: 26px 36px 6px 12px !important;
  }

  .select2-selection__arrow {
    visibility: hidden;
  }

  .select2-container {
    width: 100% !important;
  }


  @media (max-width: 500px) {
    .strava-segment-chart {
      height: 200px !important;
    }
  }

  @media (min-width: 501px) and (max-width: 768px) {
    .strava-segment-chart {
      height: 240px !important;
    }
  }

  @media (min-width: 769px) and (max-width: 991px) {
    .strava-segment-chart {
      height: 330px !important;
    }
  }

  @media (min-width: 992px) {
    .strava-segment-chart {
      height: 380px !important;
    }
  }

  .gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: WHITE;
    background-image: none;
    border: 1px solid #747775;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: min-content;
  }

  .gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
  }

  .gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }

  .gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
  }

  .gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
  }

  .gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
  }

  .gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
  }

  .gsi-material-button:not(:disabled):active .gsi-material-button-state,
  .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 12%;
  }

  .gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  }

  .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 8%;
  }


  .separator {
    display: flex;
    align-items: center;
    text-align: center;
  }

  .separator::before,
  .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
  }

  .separator:not(:empty)::before {
    margin-right: .25em;
  }

  .separator:not(:empty)::after {
    margin-left: .25em;
  }


  /* Résultats de recherche : les onglets reprennent la typo de la navbar
     (gris, capitales) au lieu du bleu des liens Bootstrap, et alignent icône,
     libellé et compteur. On force la couleur sur tous les états pour que les
     onglets inactifs restent gris, comme les entrées de la navbar. */
  .search-tabs .nav-link,
  .search-tabs .nav-link:link,
  .search-tabs .nav-link:visited,
  .search-tabs .nav-link:hover,
  .search-tabs .nav-link:focus {
    color: #21211f;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .search-tabs .nav-link .material-icons {
    color: #6c757d;
  }

  /* Message complet d'un résultat de conversation : on conserve les retours à
     la ligne et on casse les mots trop longs. */
  .search-result-message {
    white-space: pre-line;
    word-break: break-word;
  }

  /* Liste des conversations : l'extrait vient de ``slice_text``, qui peut
     laisser un <p> autour du texte. La marge par defaut de <p> ajoutait une
     ligne vide dans la ligne tronquee (la conv' prenait 3 lignes au lieu de 2).
     On l'affiche en ligne, sans marge, donc sur une seule ligne. */
  .conversation-snippet p {
    display: inline;
    margin: 0;
  }

  /* Hauteur du fil : dans le popup desktop on garde la hauteur historique
     (``70vh``). Dans l'onglet Conv' mobile (l'index n'est pas la page dediee),
     le fil doit remplir l'espace entre la barre de navigation (sticky, ~60px,
     en haut) et la barre d'onglets fixe (~57px, en bas) : sinon le formulaire
     flotte au milieu de l'ecran au lieu d'etre colle en bas. On reprend la
     meme approche en unites viewport que le reste du site. */
  #conv-panel-thread {
    height: calc(70vh - 90px);
  }

  .app-fullscreen #conv-in-tab #conv-panel-thread {
    height: calc(100vh - 117px);
    height: calc(100dvh - 117px);
  }

  /* Onglet Conv' mobile : le pied du fil porte le champ message. On ajoute sous
     lui la même marge qu'au-dessus (le ``pb32`` de la boîte des messages, soit
     32 px), pour qu'il ne soit pas collé à la barre d'onglets fixe. */
  .app-fullscreen #conv-in-tab #commentbox-container .card-footer {
    padding-bottom: 32px;
  }