@charset "UTF-8";
/** pour les bordures principalement **/
/** pour les fonds gris principalement **/
:root {
  --svh: 1vh; }

.container {
  max-width: 1440px; }

@media (max-width: 1200px) {
  .container {
    max-width: 1440px; } }

@media (max-width: 1140px) {
  .container {
    max-width: 768px; } }

@media (max-width: 768px) {
  .container {
    max-width: 540px; } }

@media (max-width: 540px) {
  .container {
    max-width: 540px; } }

.loyalty-intro {
  margin-bottom: 50px; }
  .loyalty-intro a.btn-domo {
    display: inline-block;
    margin-top: 10px; }

.loyalty-premium {
  padding: 40px;
  border: 2px solid #e4e7e7;
  margin-top: 80px;
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
  position: relative; }
  .loyalty-premium h2 {
    margin-bottom: 40px;
    margin-top: 0; }
  .loyalty-premium-info {
    font-size: 18px;
    text-align: center; }
  .loyalty-premium .progressBar {
    display: flex;
    justify-content: center; }
    .loyalty-premium .progressBar-outter {
      margin-bottom: 40px;
      margin-top: 20px;
      width: 100%;
      height: 22px;
      border: solid 1px #d8d8d8;
      display: flex;
      border-radius: 15px; }
      .loyalty-premium .progressBar-outter:before {
        content: '0€';
        position: relative;
        top: -20px;
        width: 0;
        opacity: .7; }
      .loyalty-premium .progressBar-outter:after {
        content: '2500€';
        position: relative;
        margin-left: auto;
        right: 47px;
        top: -20px;
        width: 0;
        opacity: .7; }
    .loyalty-premium .progressBar-inner {
      border-radius: 10px;
      width: 0%;
      margin: 3px;
      background: #CA222B;
      background: linear-gradient(145deg, #99171b 0%, #cc1f24 100%);
      display: flex;
      transition: width 1s; }
      .loyalty-premium .progressBar-inner:after {
        content: attr(data-valueprogress);
        position: relative;
        margin-left: auto;
        bottom: -20px;
        font-weight: 600; }

.loyalty-points {
  background-color: #FFF4F3;
  padding: 20px 40px;
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 50px; }
  .loyalty-points h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #99171b; }
  .loyalty-points p {
    margin: 5px 0;
    font-size: 19px; }
  .loyalty-points a.btn-domo {
    display: inline-block;
    margin-top: 30px; }
  .loyalty-points .mascotte {
    width: 200px;
    margin: 20px 0 0 0; }

.loyalty-tier {
  padding: 40px;
  border: 2px solid #e4e7e7;
  margin-top: 40px;
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
  position: relative; }
  .loyalty-tier h2 {
    margin-bottom: 40px;
    margin-top: 0; }
  .loyalty-tier-info {
    font-size: 18px;
    text-align: center; }
  .loyalty-tier-progress_bar {
    display: flex;
    justify-content: center;
    position: relative; }
    .loyalty-tier-progress_bar-outer {
      margin-bottom: 40px;
      margin-top: 20px;
      width: 100%;
      height: 22px;
      border: solid 1px #d8d8d8;
      display: flex;
      border-radius: 15px; }
      .loyalty-tier-progress_bar-outer:before {
        content: attr(data-limit_lower);
        position: absolute;
        top: 0;
        width: 0;
        opacity: .7; }
      .loyalty-tier-progress_bar-outer:after {
        content: attr(data-limit_higher);
        position: absolute;
        right: 47px;
        top: 0;
        width: 0;
        opacity: .7; }
    .loyalty-tier-progress_bar-inner {
      border-radius: 10px;
      width: var(--progress, 0%);
      margin: 3px;
      background: linear-gradient(145deg, #99171b 0%, #cc1f24 100%);
      display: flex; }
      .loyalty-tier-progress_bar-inner:before {
        content: 'Palier 1';
        position: absolute;
        bottom: 15px;
        font-weight: 600; }
      .loyalty-tier-progress_bar-inner:after {
        content: 'Palier 4';
        position: absolute;
        bottom: 15px;
        font-weight: 600;
        right: 0; }
    .loyalty-tier-progress_bar-marker {
      position: absolute;
      left: var(--marker-percent);
      bottom: 15px;
      transform: translateX(-50%);
      font-weight: 600; }
      .loyalty-tier-progress_bar-marker::before {
        content: '';
        height: 22px;
        width: 2px;
        background-color: #B3B3B3;
        margin: 0 auto 8px;
        display: block; }
      .loyalty-tier-progress_bar-marker:after {
        content: attr(data-amount);
        position: absolute;
        bottom: 100%;
        transform: translateX(-50%);
        white-space: nowrap;
        left: 50%;
        margin-bottom: 4px;
        opacity: .7;
        font-weight: 400; }

.loyalty-domoPoint {
  height: 30px;
  width: 30px;
  margin: 0 2px 5px 2px; }

.loyalty-usePoint {
  display: flex;
  margin-top: 40px;
  flex-direction: row;
  gap: 40px; }
  .loyalty-usePoint h2 {
    margin-top: 0;
    margin-bottom: 20px; }
  .loyalty-usePointProduct {
    padding: 40px;
    width: calc(50% - 20px);
    background-color: #EFF2F7;
    border-radius: 16px; }
    .loyalty-usePointProduct .loyalty-linkListProduct {
      display: inline-block;
      margin-top: 10px;
      text-align: center; }
  .loyalty-usePoint-logout .loyalty-usePointProduct {
    width: 100%; }
  .loyalty-usePointVoucher {
    padding: 40px;
    width: calc(50% - 20px);
    background-color: #EFF2F7;
    border-radius: 16px; }
    .loyalty-usePointVoucher .loyalty-createVoucherForm {
      margin-top: 30px;
      display: flex;
      align-items: center;
      height: 40px; }
      .loyalty-usePointVoucher .loyalty-createVoucherForm label {
        margin-bottom: 0px; }
      .loyalty-usePointVoucher .loyalty-createVoucherForm select {
        height: 100%;
        border-radius: 5px;
        margin: 0 5px 0 10px;
        color: #262626;
        border-color: #e4e7e7;
        outline: none; }
      .loyalty-usePointVoucher .loyalty-createVoucherForm > * {
        font-size: 15px; }
      .loyalty-usePointVoucher .loyalty-createVoucherFormSubmit {
        display: inline-block;
        font-size: 13px;
        margin-left: 20px;
        text-align: center; }
    .loyalty-usePointVoucher .loyalty-createVoucherCallback {
      margin-top: 10px;
      opacity: 1;
      transition: opacity .5s; }
      .loyalty-usePointVoucher .loyalty-createVoucherCallback-hide {
        opacity: 0; }
        .loyalty-usePointVoucher .loyalty-createVoucherCallback-hide p {
          margin: 0;
          height: 0;
          font-size: 0; }
      .loyalty-usePointVoucher .loyalty-createVoucherCallback-good p {
        margin: 40px 0 0 0;
        height: auto;
        font-weight: 600;
        font-size: 16px;
        color: #00AB72; }
      .loyalty-usePointVoucher .loyalty-createVoucherCallback-bad p {
        margin: 40px 0 0 0;
        height: auto;
        font-weight: 600;
        font-size: 16px;
        color: #cc1f24; }

.loyalty-history {
  margin-top: 80px; }
  .loyalty-history h2 {
    margin-top: 0; }
  .loyalty-historyContent {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: max-height .6s; }
    .loyalty-historyContent-minimal {
      min-height: calc(42px * var(--ratio_per_page_history));
      max-height: calc(50px * var(--ratio_per_page_history));
      transition: min-height 0.3s ease; }
    .loyalty-historyContentLine {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e6e6e6; }
      .loyalty-historyContentLine span {
        text-align: center;
        padding: 0.625em;
        font-size: .9375rem; }
        .loyalty-historyContentLine span.date {
          width: 25%; }
        .loyalty-historyContentLine span.point {
          width: 25%; }
        .loyalty-historyContentLine span.action {
          width: 50%; }
      .loyalty-historyContentLine-header {
        color: #000;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        border: 1px solid #e6e6e6; }
        .loyalty-historyContentLine-header span {
          padding: 20px 0.625em; }
  .loyalty-historyShowMore {
    margin: 40px auto;
    width: 130px;
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
    justify-content: center; }
    .loyalty-historyShowMore .arrow {
      transition: transform .2s;
      transform: rotate(180deg);
      width: 16px; }
      .loyalty-historyShowMore .arrow path {
        transition: all .1s linear; }
      .loyalty-historyShowMore .arrow-rotate {
        transform: rotate(0deg); }

.loyalty-linkConnexion {
  display: block;
  padding: 10px;
  cursor: pointer;
  background-color: #CC1F24;
  border-radius: 5px;
  color: white;
  text-align: center;
  transition: background-color .3s;
  width: 230px;
  margin-bottom: 20px; }
  .loyalty-linkConnexion:hover {
    background-color: #8e8e8e;
    color: white; }

@media (max-width: 1000px) {
  .loyalty-usePoint {
    flex-direction: column; }
    .loyalty-usePointProduct {
      width: 100%; }
    .loyalty-usePointVoucher {
      width: 100%; } }

@media (max-width: 768px) {
  .loyalty-tier-info {
    font-size: 17px;
    line-height: 20px; }
  .loyalty-points {
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 40px 40px 10px 40px; }
    .loyalty-points p {
      font-size: 17px; }
    .loyalty-points .mascotte {
      width: 200px;
      margin: 0; }
    .loyalty-points-col:last-of-type {
      text-align: right; } }

@media (max-width: 540px) {
  .loyalty-points {
    padding: 20px 20px 10px 20px; }
    .loyalty-points .mascotte {
      width: 150px; }
  .loyalty-premium, .loyalty-usePointProduct, .loyalty-usePointVoucher, .loyalty-tier {
    padding: 20px; }
  .loyalty-premium, .loyalty-tier {
    margin-top: 40px;
    margin-bottom: 20px; }
  .loyalty-usePoint {
    margin-top: 20px;
    gap: 20px; } }

.confetti {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  position: absolute;
  top: -1rem;
  left: 0;
  z-index: 0;
  /* ... Autres règles nth-of-type ... */ }
  .confetti .rotate {
    animation: driftyRotate 1s infinite both ease-in-out;
    perspective: 1000; }
  .confetti .askew {
    background: linear-gradient(var(--grad-direction, to bottom), #f2ff00 25%, #ff6200 0% 66.667%, white 0% 100%);
    transform: skewY(10deg);
    width: 2rem;
    height: 3.2rem;
    animation: drifty 1s infinite alternate both ease-in-out;
    perspective: 1000;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }
  .confetti:nth-of-type(7n) .askew {
    animation-delay: -.6s;
    animation-duration: 2.25s; }
  .confetti:nth-of-type(9n + 8) .rotate {
    animation-duration: 1.78s; }

@keyframes drifty {
  0% {
    transform: skewY(10deg) translate3d(-250%, 0, 0); }
  100% {
    transform: skewY(-12deg) translate3d(250%, 0, 0); } }

@keyframes driftyRotate {
  0% {
    transform: rotateX(0); }
  100% {
    transform: rotateX(359deg); } }

.confetti:nth-child(4n) {
  color: #ff4d00; }

.confetti:nth-child(4n + 1) {
  color: #00f2ff; }

.confetti:nth-child(4n + 2) {
  color: #ffb700; }

.confetti:nth-child(4n + 3) {
  color: #ccffd7; }

.confetti .askew {
  background: currentColor;
  width: 1rem;
  height: 2rem;
  clip-path: polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 50% 90%, 0% 100%); }

.loyaltyProgram-highlights {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 40px; }
  .loyaltyProgram-highlights-item {
    padding: 20px;
    background-color: #EFF2F7;
    border-radius: 16px;
    transition: all ease-in-out .2s; }
    .loyaltyProgram-highlights-item img {
      border-radius: 50%;
      width: 50px;
      margin-bottom: 10px; }
    .loyaltyProgram-highlights-item .btn-domo {
      display: inline-block; }
    .loyaltyProgram-highlights-item .h3 {
      margin-bottom: 5px; }
    .loyaltyProgram-highlights-item:hover {
      transform: translateY(-3px); }

.loyaltyProgram-fidelite {
  margin: 40px 0 30px 0;
  background-color: #f6f4f5;
  padding: 40px 0;
  border-radius: 16px; }
  .loyaltyProgram-fidelite h2 {
    text-align: center;
    margin-bottom: 5px; }
  .loyaltyProgram-fidelite .subtitle {
    font-family: Caveat;
    color: #98252b;
    font-size: 27px;
    font-weight: 700;
    line-height: 27px;
    margin-bottom: 5px;
    text-align: center; }
  .loyaltyProgram-fidelite .explanation {
    display: flex;
    flex-direction: column;
    position: relative; }
    .loyaltyProgram-fidelite .explanation-info {
      text-align: center;
      margin-top: 30px;
      font-size: 18px;
      margin-bottom: 5px; }
    .loyaltyProgram-fidelite .explanation-annot {
      font-size: 11px;
      text-align: center; }
    .loyaltyProgram-fidelite .explanation .explanation-equation {
      display: flex;
      align-items: center;
      margin: 30px auto 30px auto; }
      .loyaltyProgram-fidelite .explanation .explanation-equation img {
        width: 120px;
        height: auto; }
      .loyaltyProgram-fidelite .explanation .explanation-equation span {
        font-size: 80px;
        margin: 30px; }
  .loyaltyProgram-fidelite .spend {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    max-width: 800px;
    margin: auto; }
    .loyaltyProgram-fidelite .spend-item {
      border: 2px solid #e6e6e6;
      border-radius: 16px;
      padding: 20px;
      background: #fff; }
      .loyaltyProgram-fidelite .spend-item .btn-domo {
        display: inline-block; }
      .loyaltyProgram-fidelite .spend-item .h3 {
        margin-bottom: 5px; }

.loyaltyProgram-plans {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr); }
  .loyaltyProgram-plans-item {
    border: 2px solid #e6e6e6;
    border-radius: 16px;
    padding: 20px; }
    .loyaltyProgram-plans-item .h3 {
      margin-bottom: 5px;
      text-align: center; }
    .loyaltyProgram-plans-item .subtitle {
      text-align: center;
      margin-bottom: 30px; }
    .loyaltyProgram-plans-item .hint {
      color: #99171b; }
    .loyaltyProgram-plans-item li {
      font-size: 16px;
      line-height: 25px;
      margin-bottom: 8px; }
      .loyaltyProgram-plans-item li .domoPoint {
        height: 25px;
        width: 25px;
        margin-right: 3px;
        vertical-align: middle; }

.loyaltyProgram-also {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 70px 0; }
  .loyaltyProgram-also-img {
    position: relative;
    height: 225px;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 16px;
    margin-top: 10px;
    overflow: hidden; }
    .loyaltyProgram-also-img .explanatory-banner-explanation {
      width: 70%;
      background-color: #F1E9E2;
      padding: 25px 20px;
      display: flex;
      position: relative;
      height: 100%; }
      .loyaltyProgram-also-img .explanatory-banner-explanation-detail {
        width: calc(100%/3);
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 180px;
        min-height: 110px; }
        .loyaltyProgram-also-img .explanatory-banner-explanation-detail-pictos {
          display: flex;
          align-items: center;
          justify-content: center; }
          .loyaltyProgram-also-img .explanatory-banner-explanation-detail-pictos > span {
            font-size: 40px;
            color: #B4252C;
            margin: 10px; }
        .loyaltyProgram-also-img .explanatory-banner-explanation-detail-picto1, .loyaltyProgram-also-img .explanatory-banner-explanation-detail-picto2, .loyaltyProgram-also-img .explanatory-banner-explanation-detail-picto3 {
          width: 55px;
          height: auto; }
        .loyaltyProgram-also-img .explanatory-banner-explanation-detail .equal-sign {
          position: relative;
          margin: 15px 0 20px; }
          .loyaltyProgram-also-img .explanatory-banner-explanation-detail .equal-sign::before, .loyaltyProgram-also-img .explanatory-banner-explanation-detail .equal-sign::after {
            content: '';
            position: absolute;
            background-color: #B4252C;
            width: 30px;
            height: 5px;
            left: 50%;
            transform: translateX(-50%); }
          .loyaltyProgram-also-img .explanatory-banner-explanation-detail .equal-sign:before {
            top: -5px; }
          .loyaltyProgram-also-img .explanatory-banner-explanation-detail .equal-sign:after {
            top: 5px; }
        .loyaltyProgram-also-img .explanatory-banner-explanation-detail p {
          font-weight: 700; }
        .loyaltyProgram-also-img .explanatory-banner-explanation-detail-title {
          font-size: 18px; }
        .loyaltyProgram-also-img .explanatory-banner-explanation-detail .bloc_explication {
          text-align: center; }
        .loyaltyProgram-also-img .explanatory-banner-explanation-detail-text {
          font-size: 14px;
          margin-bottom: 5px; }
      .loyaltyProgram-also-img .explanatory-banner-explanation:after {
        left: calc(100% - 22px);
        top: 0;
        border: solid transparent;
        content: "";
        height: 100%;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: #B4252C;
        border-left-color: #F1E9E2;
        margin-top: 0;
        border-top-width: 112.5px;
        border-left-width: 20px;
        border-bottom-width: 112.5px; }
    .loyaltyProgram-also-img .explanatory-banner-result {
      width: 30%;
      background-color: #B4252C;
      padding: 25px 20px;
      height: 100%; }
      .loyaltyProgram-also-img .explanatory-banner-result-title {
        text-align: center;
        color: #fff;
        font-size: 18px; }
      .loyaltyProgram-also-img .explanatory-banner-result-content {
        display: flex;
        align-items: center;
        justify-content: center; }
        .loyaltyProgram-also-img .explanatory-banner-result-content p {
          color: #fff;
          margin-left: 10px; }
  .loyaltyProgram-also h2 {
    text-align: center; }

.loyaltyProgram-domomat h2 {
  text-align: center;
  margin-bottom: 20px; }

.loyaltyProgram-domomat-advantages {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr); }
  .loyaltyProgram-domomat-advantages-item {
    background-color: #FFF4F3;
    padding: 20px;
    border-radius: 16px; }
    .loyaltyProgram-domomat-advantages-item .icon {
      border-radius: 50%;
      width: 50px;
      margin-bottom: 10px;
      background: #fff;
      padding: 10px; }
      .loyaltyProgram-domomat-advantages-item .icon img {
        width: 30px;
        height: 30px; }
    .loyaltyProgram-domomat-advantages-item h3.h4 {
      margin-bottom: 5px;
      color: #99171b;
      font-size: 20px; }

.loyaltyProgram-legal {
  margin-top: 70px; }
  .loyaltyProgram-legal small {
    text-align: justify;
    display: block;
    margin-bottom: 3px; }
  .loyaltyProgram-legal a {
    text-decoration: underline; }

@media screen and (max-width: 1140px) {
  .loyaltyProgram-domomat-advantages {
    grid-template-columns: repeat(3, 1fr); }
  .loyaltyProgram-fidelite {
    padding: 30px; }
  .loyaltyProgram-also-img {
    height: auto;
    flex-direction: column; }
    .loyaltyProgram-also-img .explanatory-banner {
      flex-direction: column;
      align-items: center; }
      .loyaltyProgram-also-img .explanatory-banner-explanation {
        flex-direction: column;
        align-items: center;
        width: 100%; }
        .loyaltyProgram-also-img .explanatory-banner-explanation-detail {
          flex-direction: row;
          width: 100%;
          justify-content: space-around;
          margin: 0;
          min-height: 80px; }
          .loyaltyProgram-also-img .explanatory-banner-explanation-detail p {
            margin-bottom: 0; }
        .loyaltyProgram-also-img .explanatory-banner-explanation:after {
          display: none; }
      .loyaltyProgram-also-img .explanatory-banner-result {
        width: 100%; } }

@media screen and (max-width: 768px) {
  .loyaltyProgram-plans {
    grid-template-columns: repeat(1, 1fr); }
  .loyaltyProgram-domomat-advantages {
    grid-template-columns: repeat(2, 1fr); }
  .loyaltyProgram-also-img .explanatory-banner-explanation {
    padding: 10px; }
    .loyaltyProgram-also-img .explanatory-banner-explanation-detail-title {
      width: 20%;
      text-align: center;
      font-size: calc(18px - 5%); }
    .loyaltyProgram-also-img .explanatory-banner-explanation .bloc_explication {
      display: block; }
    .loyaltyProgram-also-img .explanatory-banner-explanation-detail-picto1, .loyaltyProgram-also-img .explanatory-banner-explanation-detail-picto2, .loyaltyProgram-also-img .explanatory-banner-explanation-detail-picto3 {
      width: 35px; }
    .loyaltyProgram-also-img .explanatory-banner-explanation .equal-sign::before, .loyaltyProgram-also-img .explanatory-banner-explanation .equal-sign::after {
      width: 25px; } }

@media screen and (max-width: 540px) {
  .loyaltyProgram-fidelite {
    padding: 15px; }
    .loyaltyProgram-fidelite .spend {
      gap: 15px;
      grid-template-columns: repeat(1, 1fr); }
    .loyaltyProgram-fidelite .explanation .explanation-equation span {
      font-size: 60px; }
    .loyaltyProgram-fidelite .explanation .explanation-equation img {
      width: 90px; }
  .loyaltyProgram-plans {
    gap: 15px; }
  .loyaltyProgram-also-img .explanatory-banner-explanation {
    gap: 15px; }
    .loyaltyProgram-also-img .explanatory-banner-explanation-detail-pictos {
      flex-direction: column; }
      .loyaltyProgram-also-img .explanatory-banner-explanation-detail-pictos > span {
        margin: 3px 0 7px 0; } }

.modalLoyalty {
  text-align: center; }
  .modalLoyalty .modal-inner {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.15);
    left: 50%;
    max-width: 800px;
    right: inherit;
    top: 50%;
    width: 60%;
    transform: translateX(-50%) translateY(-50%); }
  .modalLoyalty .modal-close {
    border: 1px solid #fff;
    right: 10px;
    top: 10px; }
  .modalLoyalty-user-connect p, .modalLoyalty-user-noconnect p {
    font-size: 20px;
    margin-top: 25px;
    line-height: normal; }
  .modalLoyalty-user-noconnect p a {
    text-decoration: underline; }
  .modalLoyalty-action > div {
    text-align: center;
    height: 100%;
    width: 100%;
    padding: 6%;
    font-size: 17px;
    line-height: initial; }
  .modalLoyalty-category {
    margin-top: 50px;
    text-align: center; }
    .modalLoyalty-category ul {
      width: 100%;
      max-width: 800px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      align-content: center;
      justify-content: space-evenly;
      margin-left: 50%;
      transform: translateX(-50%);
      gap: 20px; }
    .modalLoyalty-category li {
      margin: 0;
      width: calc(33% - 15px); }
  .modalLoyalty-description {
    font-size: 28px;
    margin: 0 30px 15px 30px;
    font-weight: 600;
    line-height: normal; }

@media (max-width: 1140px) {
  .modalLoyalty-category li {
    width: calc(50% - 15px); } }

@media (max-width: 768px) {
  .modalLoyalty-category li {
    width: 100%; }
  .modalLoyalty-description {
    font-size: 21px; }
  .modalLoyalty .modal-inner {
    left: 50%;
    max-width: inherit;
    right: inherit;
    top: 50%;
    width: 90%;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    max-height: 90%; } }

@media (max-width: 540px) {
  .modalLoyalty .modal-inner {
    left: 0;
    max-width: inherit;
    right: inherit;
    top: 0;
    width: 100%;
    height: 100vh;
    transform: none;
    max-height: 100vh;
    border-radius: 0;
    overflow-y: auto; } }

.loyalty-history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px; }
  .loyalty-history-pagination-container_number {
    display: flex;
    align-items: center;
    justify-content: center; }
  .loyalty-history-pagination-btnpage, .loyalty-history-pagination-separatorpage {
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    text-align: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid transparent;
    margin: 0;
    color: #6D6D6D;
    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    cursor: default; }
  .loyalty-history-pagination-btnpage.selected {
    border: 1px solid #E3E1E2;
    background: #F6F4F5;
    color: #333333;
    font-weight: 500;
    cursor: pointer; }
  .loyalty-history-pagination-btnpage:hover {
    border: 1px solid #E3E1E2;
    background: #F6F4F5;
    color: #333333;
    font-weight: 500;
    cursor: pointer; }
  .loyalty-history-pagination-next, .loyalty-history-pagination-prev {
    padding: 12px; }
    .loyalty-history-pagination-next svg path, .loyalty-history-pagination-prev svg path {
      fill: #00707A; }
    .loyalty-history-pagination-next.btn-domo-disabled svg path, .loyalty-history-pagination-prev.btn-domo-disabled svg path {
      fill: #B1B5C0; }
  .loyalty-history-pagination-next {
    margin-left: 15px; }
  .loyalty-history-pagination-prev {
    margin-right: 15px; }
    .loyalty-history-pagination-prev svg {
      rotate: 180deg; }