/*
 * Loaded automatically by Helix3 after template.css. Nothing here depends on a club: a club's own colours
 * come from the `<preset>_major` of its club file (clubs/<club>.json): bin/apply-club-theme.php derives --club-accent from it and writes it in the template's custom_css parameter.
 */

/*
 * Team crests stay readable on a dark photo and on a light background: a frosted-glass tile behind each
 * logo (home banner, match header on desktop and mobile). A rounded square, not a circle: a tall crest has
 * corners that a circle cuts off. The tile sits on a dark caption, so a gradient (more opaque at the
 * top-left, clearer at the bottom-right) and a blur let the picture show through while a dark or coloured
 * crest stays readable.
 */
#sppb-slider2-carousel .item .slider2-box .slider2-logo > img,
.view-spsoccer-match-view .match-details-top img.match-result-logo-thumb,
.view-spsoccer-match-view .match-details-top-mobile img.match-result-logo-thumb {
  box-sizing: content-box;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 9px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

/*
 * Home banner, article card: title and date only. The introduction made the card heavy and was cut mid-sentence. The title is shown IN
 * FULL (Julien, 2026-10-11: « pas top que le titre soit coupé »): the card grows with it, the type is smaller on a phone. White on the
 * dark card, not the accent: orange on an orange jersey was unreadable.
 */
#sppb-slider2-carousel .item .slider2-box.slider2-text {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}
#sppb-slider2-carousel .item .slider2-text h2.entry-title,
#sppb-slider2-carousel .item .slider2-text h2.entry-title a {
  color: #fff;
}
#sppb-slider2-carousel .item .slider2-text h2.entry-title {
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 8px;
  overflow-wrap: break-word;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
@media (max-width: 767px) {
  #sppb-slider2-carousel .item .slider2-text h2.entry-title {
    font-size: 26px;
  }
}
#sppb-slider2-carousel .item .slider2-text .entry-meta,
#sppb-slider2-carousel .item .slider2-text .entry-date {
  font-size: 14px;
}
#sppb-slider2-carousel .item .slider2-text .news-details .intro-text {
  display: none;
}

/* X logo of the social links (header and footer): same size and colour as the Font Awesome icons around it. */
ul.social-icons .social-x {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  color: inherit;
}
ul.social-icons li a:hover .social-x,
ul.social-icons li a:focus .social-x {
  opacity: 0.8;
}

/* Mobile menu (offcanvas), readable tree: Joomla 5 writes the sub-menus as ul.mod-menu__sub, while the template styled
   .nav-child (so a sub-item looked exactly like its parent). The panel is opaque (the page showed through it), the first level is
   large with a rule between the entries, the second level is indented under an accent line, smaller and lighter. */
.offcanvas-menu {
  width: min(86vw, 320px);
  background: #fff;
}
.ltr .offcanvas-menu {
  right: calc(-1 * min(86vw, 320px));
}
.offcanvas-menu .offcanvas-inner .sp-module ul.mod-menu > li {
  border-bottom: 1px solid #ececec;
}
.offcanvas-menu .offcanvas-inner .sp-module ul.mod-menu > li > a {
  display: block;
  padding: 14px 4px;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.offcanvas-menu .offcanvas-inner .sp-module ul.mod-menu > li.parent > a {
  color: #111;
}
.offcanvas-menu .offcanvas-inner .sp-module ul.mod-menu > li.active > a,
.offcanvas-menu .offcanvas-inner .sp-module ul.mod-menu > li.current > a {
  color: var(--club-accent, #ff4900);
}
.offcanvas-menu .offcanvas-inner .sp-module ul.mod-menu__sub {
  margin: 0 0 12px 4px;
  padding: 0 0 0 14px;
  border-left: 3px solid var(--club-accent, #ff4900);
  list-style: none;
}
.offcanvas-menu .offcanvas-inner .sp-module ul.mod-menu__sub > li {
  border: 0;
}
.offcanvas-menu .offcanvas-inner .sp-module ul.mod-menu__sub > li > a {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  color: #444;
}
.offcanvas-menu .offcanvas-inner .sp-module ul.mod-menu__sub > li > a:hover,
.offcanvas-menu .offcanvas-inner .sp-module ul.mod-menu__sub > li > a:focus {
  background: none;
  color: var(--club-accent, #ff4900);
}

/* The X icon of the footer (an inline SVG in the module, FontAwesome 4 has no X): same size and same baseline as the font icons next to it. */
#sp-bottom .bottom-social ul li a i svg {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.22em;
}

/* Footer of the site (the client, 2026-10-10: « le bas de page doit être sur fond noir », « il manque l'adresse mail »): black. The phone
   and the mail of the « Logo & Adresse » module were already there but dark (the mail link in the colour of the links, the number turned
   into a link by the phone): invisible on the orange; here they are white and underlined. */
body #sp-bottom {
  background: #000 none !important;
  color: #fff;
}
/* The strip under it (copyright, « Mentions légales », « Gestion des cookies »): the template draws it on an orange texture
   (images/bottom-pattern.png, on .sp-bottom-footer, which wraps both the block above and the strip); on the site of the club it is black like the rest
   (Julien, 2026-10-11: « le footer n'est pas orange, mais tout noir »), and its two links, orange, were invisible on the orange texture. */
body .sp-bottom-footer {
  background: #000 none !important;
}
body #sp-bottom .mod-custom a[href^="mailto:"],
body #sp-bottom .mod-custom a[href^="tel:"],
body #sp-bottom .mod-custom a[x-apple-data-detectors] {
  color: #fff !important;
  text-decoration: underline;
}

/* Top margin of the pages (Julien, 2026-10-11: "marge haute très (trop) grande"): the title bar of a page kept the 140 px / 90 px of the
   demo template above and below its title, the main body 60 px more. Tighter, and tighter again on a phone. */
.sp-page-title {
  padding: 48px 0 30px;
}
#sp-main-body {
  padding-top: 36px;
}
@media (max-width: 767px) {
  .sp-page-title {
    padding: 24px 0 16px;
  }
  #sp-main-body {
    padding-top: 20px;
  }
}
/* The theme gives the player page its own 60 px (template.css « .view-player #sp-main-body »): the same body margin as the team page. The match
   and competition pages keep 0 on purpose (their banner starts flush under the header). */
.view-player #sp-main-body {
  padding-top: 36px;
}
@media (max-width: 767px) {
  .view-player #sp-main-body {
    padding-top: 20px;
  }
}

/*
 * Title of a block (« Calendrier/Résultats », « Classement »...): the pastille, a disc of the club's colour in a ring, in place of the three
 * bars of the old picto (#153). The script of the template still writes the three bars (div.title-icon with three span.icon-bar): they are
 * hidden here and the div itself is drawn, so nothing else of the page changes. The colour is --club-accent, never a colour of a club.
 * The selectors of #sp-right / #sp-left are repeated: template.css paints the bars there black, with an id.
 */
.soccer-title-icon .title-icon {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--club-accent, #ff4900);
  border: 2px solid var(--club-accent, #ff4900);
  box-shadow: inset 0 0 0 2px #fff;
  top: var(--lnb-title-icon-top, 5px);
}
/* template.css puts the three bars at 5 px: the pastille is taller, its centre goes up to the middle of the first line of the title. The
   block of the videos draws the same picto with its own rule (it works without this template): it reads the same property. */
.soccer-title-icon {
  --lnb-title-icon-top: 2px;
}
/* template.css leaves 45px for the old three bars (30px wide + 15px): with the 20px pastille the text sat 25px away from it. 12px of air now. */
.soccer-title-icon .title-icon + h3 {
  padding-left: 32px;
}
.soccer-title-icon .title-icon span.icon-bar,
#sp-right .soccer-title-icon .title-icon span.icon-bar,
#sp-left .soccer-title-icon .title-icon span.icon-bar {
  display: none;
}

/*
 * A carousel with slides is swiped sideways (js/main.js): the browser must not scroll the page with a gesture that goes sideways. `pan-y pinch-zoom` leaves the
 * page its vertical scroll (a vertical gesture on the carousel scrolls the page as anywhere else) and takes away the other pans. A strip that scrolls
 * sideways by itself (the news strip of a slide, Top joueurs) is its own scroll container: this does not reach it.
 */
.carousel.slide {
  touch-action: pan-y pinch-zoom;
}

/* The panes of the tabs fade in with Bootstrap 5's « show » (Bootstrap 3's stylesheet only knows « in »). */
.tab-content > .tab-pane.fade.show {
  opacity: 1;
}

/* The carousels (home slider, latest articles, gallery of an article) are driven by Bootstrap 5's script (#188): it moves the slides with its own classes
   (carousel-item-next / -prev / -start / -end), where the stylesheet of Bootstrap 3 knows .next / .prev / .left / .right. The same slide as before: one slide
   goes out to the side while the next one comes in, 0.6 s, with the transform of the stylesheet of Bootstrap 3 (the transition and the active slide are its own rules). */
.carousel-inner > .carousel-item-next,
.carousel-inner > .carousel-item-prev {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.carousel-inner > .carousel-item-next:not(.carousel-item-start),
.carousel-inner > .active.carousel-item-end {
  transform: translate3d(100%, 0, 0);
}
.carousel-inner > .carousel-item-prev:not(.carousel-item-end),
.carousel-inner > .active.carousel-item-start {
  transform: translate3d(-100%, 0, 0);
}
.carousel-inner > .carousel-item-next.carousel-item-start,
.carousel-inner > .carousel-item-prev.carousel-item-end {
  transform: translate3d(0, 0, 0);
}

/* Header buttons (Boutique, Billetterie, the club's live button: #196): the column of the user menu is three twelfths wide, enough for two buttons. With a third one
   they stay on ONE line, the row growing to the left (the space is free there: the main menu ends well before). */
@media (min-width: 992px) {
	#sp-user-menu .sp-module-content { display: flex; justify-content: flex-end; }
	#sp-user-menu ul.soccer-login { white-space: nowrap; flex: none; }
}

/* Header buttons (Boutique, Billetterie, the club's live button): the row above is made to grow to the LEFT, but #sp-user-menu hides its overflow and, from 1200 px, its column is 25 %
   of the container (285 px) for buttons that are 289 px wide: the first one was cut on its left, its text looked off centre (#203). Left visible, the row grows into
   the free space of the main menu (measured at 1400 px: the first button starts at 971 px for a column at 985 px, the main menu ends at 863 px). */
@media (min-width: 992px) {
	#sp-header #sp-user-menu { overflow: visible; }
}

/*
 * The labels of the site are PILLS, not buttons, everywhere they are printed (Julien 2026-10-14: « le style du badge category doit être iso partout », then « c'est pas un peu
 * fouillis ? »): the news of the home (Derniers articles), the page of an article and the lists of a category (info_block/category.php: dd.category-name), the label of the slides
 * of the header of the home (.slide2-type, .slider2-title), the « 1ère journée » of the calendar and of the lists (h3.lnb-band > span, with the logo of the competition), the
 * competition and the date at the top of a match sheet (.match-time > span).
 * CALM: a light grey pill with dark small capitals, the accent of the club only as a small dot before a category. Orange stays for what is acted upon (buttons, arrows) and what is
 * live. The colour is --club-accent, never a colour of a club. The template paints these containers orange or white with rules stronger than a class: !important only on what
 * this must win. ONE rule: a new place joins the list.
 */
.sppb-addon-latest-posts .latest-news-details .post-author,
dd.category-name,
dd.parent-category-name {
  display: inline-block !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.sppb-addon-latest-posts .latest-news-details .post-author .entry-author,
dd.category-name > span,
dd.category-name a,
.sppb-addon-soccer-slider .slide2-type,
.sppb-addon-soccer-slider .slider2-title,
h3.lnb-band > span,
.match-time > span {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 3px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f1f1f2 !important;
  color: #333 !important;
  font-family: Oswald, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.sppb-addon-latest-posts .latest-news-details .post-author .entry-author::before,
dd.category-name > span::before,
dd.category-name a::before,
.sppb-addon-soccer-slider .slide2-type::before,
.sppb-addon-soccer-slider .slider2-title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--club-accent, #ff4900);
}
.sppb-addon-soccer-slider .slider2-title {
  margin-bottom: 12px !important;
}
.sppb-addon-soccer-slider .slide2-type {
  margin: 10px 15px 8px 0 !important;
}
@media (max-width: 767px) {
  /* The category of the hero slide: template.css makes it a full-width block on a phone (display: block !important with the id of the carousel): it stays a pill, on the left edge of the block, with its dot (#233). */
  .sppb-addon-soccer-slider #sppb-slider2-carousel .item .slider2-title {
    display: flex !important;
    width: fit-content;
    max-width: 100%;
    margin-right: auto !important;
    margin-left: 0 !important;
  }
  /* The hero slide is 70 px shorter on a phone (300 -> 230 px above the block, 650 -> 580 px): the buttons and the dots of the carousel are no longer behind the toolbar of Safari. */
  .sppb-addon-soccer-slider #sppb-slider2-carousel .item {
    height: 580px;
    padding-top: 230px;
  }
  /* home-slider.css hides the pills of the carousel indicators on a phone: the rule above must not show them again */
  .sppb-addon-soccer-slider #sppb-slider2-carousel .slider2-carousel-indicators li .slide2-type {
    display: none !important;
  }
}
.sppb-addon-soccer-slider .slider2-title span,
.sppb-addon-soccer-slider .slide2-type span {
  font: inherit !important;
  color: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
}
h3.lnb-band {
  background: transparent !important;
  text-align: center;
}
h3.lnb-band > span .lnb-band-logo {
  height: 18px !important;
  width: auto !important;
}

 * The band of the partners of the home (the partners module of the home, a custom module of logos: its inline style is a flex row with 24px gaps and logos of
 * 60px at most, JPG on white and transparent PNG mixed). Equal cells, one centred row that wraps, the white of the JPG melted into the page, the logos in colour
 * (the partners pay for it), a light rise on hover; a phone wraps it in rows of two. The links and the logos stay the club's to edit.
 * !important only where the module writes its inline style.
 */
.partenaires-bandeau {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px !important;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 0 !important;
  border-top: 1px solid #ececec;
}
.partenaires-bandeau a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 168px;
  height: 76px;
  padding: 8px 12px;
  border-radius: 14px;
  transition: background 0.2s, transform 0.2s;
}
.partenaires-bandeau a img {
  max-width: 100%;
  max-height: 52px !important;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.partenaires-bandeau a:hover,
.partenaires-bandeau a:focus-visible {
  background: #f6f6f7;
  transform: translateY(-2px);
}
@media (max-width: 767px) {
  /* A phone shows the logos in rows of two (Julien 2026-10-15: the band must wrap, not scroll sideways). */
  .partenaires-bandeau {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 20px 8px !important;
  }
  .partenaires-bandeau a {
    flex: 0 0 calc(50% - 4px);
    max-width: 200px;
  }
}

/*
 * The content uses more of a large screen (Julien 2026-10-14): the header and the slider run the full width of the window, the content below was held at 1140 px
 * (inline style of Helix3, parameter container_width) and 1170 px (.sppb-row-container). The inline style comes after this file: the selector is stronger, not !important.
 */
@media (min-width: 1400px) {
  html body .container,
  html body .sppb-row-container {
    width: 100%;
    max-width: 1320px;
  }
}
@media (min-width: 1800px) {
  html body .container,
  html body .sppb-row-container {
    max-width: 1560px;
  }
}

/* The « Live » pill of a match in play is the red of the live bar of the home (it is the one pill that is not grey): it wins over the grey pill rule above. */
.match-time > span.lnb-date-live {
  gap: 8px !important;
  padding: 6px 12px 6px 10px !important;
  background: #e5173f !important;
  color: #fff !important;
  font-family: Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
}

/* The « Terminé » pill of a match that is over, beside its date: the twin of the « Live » pill (same height and type), dark grey, no dot. It has to be written here, with !important: the rules above
   give every .match-time span the grey category look and the dot of the club. */
.match-time > span.lnb-date-done {
  gap: 0 !important;
  margin-left: 8px !important;
  padding: 6px 12px !important;
  background: #3a3f47 !important;
  color: #fff !important;
  font-family: Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  vertical-align: bottom !important;
}
.match-time > span.lnb-date-done::before {
  display: none !important;
}

/* The two pills at the head of a match sheet (the competition and the date, .match-time > span) are the category pills of the home, dot of the accent of the club included,
   with a margin between them (they touched). The two spans are separated by a <br>, not adjacent: the margin is on the span that follows it. The « Live / N' » badge keeps its own look (no dot). */
.match-time > span:not(.lnb-date-live)::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--club-accent, #ff4900);
}
.match-time > br + span {
  margin-top: 8px !important;
}

/* On a phone (Julien 2026-10-14, « gagner en espace »): the competition and the « Live » / date pills sit on ONE line, the hero is less tall (207 -> 152 pt). */
@media (max-width: 767px) {
  .view-spsoccer-match-view .match-details-top-mobile {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .view-spsoccer-match-view .match-details-top-mobile .match-time {
    margin-bottom: 10px !important;
  }
  .view-spsoccer-match-view .match-details-top-mobile .match-time > br {
    display: none;
  }
  .view-spsoccer-match-view .match-details-top-mobile .match-time > span {
    margin: 0 3px !important;
  }
}

/* The category pill and the « Live » pill at the head of a match have the SAME height (Julien 19:33): 26 px, text centred. */
.match-time > span {
  box-sizing: border-box;
  min-height: 26px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

/*
 * The year of a competition is a TAG, the one of the site (the grey pill with the dot of the club), not an orange button (Julien 2026-10-15): on the page of the
 * competitions (cards) and under the title of a competition. !important only against the orange rule of spsoccer-style.css (4 classes deep).
 */
.spsoccer-season-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-bottom: 0 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: #f1f1f2 !important;
  color: #333 !important;
  font-family: Oswald, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.spsoccer-season-badge::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--club-accent, #ff4900);
}
.view-spsoccer-tournament .tournament-header .tournament-season {
  margin-top: 12px;
}

/*
 * The news band of the home on a phone (Julien 2026-10-15: « le bloc noir au milieu est vraiment mal implémenté sur mobile », #218): the label of the news band and the
 * ticker form ONE band. Before, a 40 px black gap (the row gap of the page builder) separated them, the title of the news was cut to one line of 20 px with the date
 * pushed out of the screen, and the two orange arrows stuck to the right edge. Now: no gap, the label on the orange bar, the ticker on black with the title (two lines
 * at most) and its date under it, and round arrows of 36 px (a thumb) at the right. The ticker (a script fading its items) is untouched: only its looks change.
 * !important where the page builder writes its own rules inline.
 */
@media (max-width: 767px) {
  .soccer-news-highlighter .sppb-row {
    row-gap: 0 !important;
  }
  .soccer-news-highlighter .sppb-col-md-10 .sppb-column {
    padding: 0 !important;
  }
  .soccer-news-highlighter .news-highlighter-text {
    display: block !important;
    height: auto !important;
    padding: 9px 12px !important;
    font-size: 17px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    background: #ff4900;
  }
  .soccer-news-highlighter .sp_news_higlighter {
    display: flex;
    align-items: center;
    gap: 12px;
    /* A fixed height (#274): two lines of title (17 px x 1.25), the date, and the padding, so the band does not change size from one news to the next. */
    height: 88px !important;
    min-height: 88px;
    box-sizing: border-box;
    /* template.css sets padding-bottom: 0 !important on this band under 768 px: without !important here the space below the date is 0, above it 12 px. */
    padding: 12px !important;
    overflow: hidden !important;
  }
  .soccer-news-highlighter .sp_news_higlighter .sp-nh-item {
    height: auto !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
  .soccer-news-highlighter .sp_news_higlighter > .sp-nh-item {
    float: none !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* The text node « - » between the title and the date is hidden by a zero font size on the link; the title and the date get their own size. */
  .soccer-news-highlighter .sp-nh-link {
    display: block;
    color: #fff;
    font-size: 0;
    line-height: 1.25;
  }
  .soccer-news-highlighter .sp-nh-link .sp-nh-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 17px;
    font-weight: 600;
  }
  .soccer-news-highlighter .sp-nh-link .sp-nh-date {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    font-family: Roboto, sans-serif;
    letter-spacing: 0.02em;
    color: #b5b5b5;
  }
  /* The theme puts the arrows in absolute position (top 15 px, right 0): they sit in the flow, at the right of the line. */
  .soccer-news-highlighter .sp_news_higlighter > .sp-nh-item {
    width: auto !important;
    flex: 1 1 0 !important;
  }
  .soccer-news-highlighter .sp_news_higlighter > .sp-nh-item .sp-nh-item {
    width: 100% !important;
  }
  .soccer-news-highlighter .sp_news_higlighter .sp-nh-buttons {
    position: static !important;
    float: none !important;
    flex: none;
    gap: 8px;
    margin-left: auto !important;
  }
  .soccer-news-highlighter .sp_news_higlighter .sp-nh-buttons .sp-nh-prev,
  .soccer-news-highlighter .sp_news_higlighter .sp-nh-buttons .sp-nh-next {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 20px !important;
    line-height: 32px !important;
  }
}