/*==============================
    GLOBAL
-------------------------------*/

:root {
  /*BREAKPOINTS*/
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --xxl: 1400px;

  /* FONTS */
  --ff: 'Catamaran', sans-serif;
  --ff2: 'Courrier New Web', monospace;
  --ff2b: 'Courrier New Web bold', monospace;

  --font-size: 50px;

  /* COLOR */

  --orange: #ff3333;
  --blue: #3579c7;
  --blueLighten: #4091ef;
  --bluefacebook: var(--blue);
  --redgoogle: var(--orange);
  --redgoogleLighten: #fd5e5e;
  --xColor: #000000;
  --xColorLighten: #363636;
  --whatsAppColor: #25d366;
  --whatsAppColorLighten: #29e870;
  --yellow: #ffe622;
  --yellowlight: #ffee75;
  --messengerRadiant: linear-gradient(
    45deg,
    rgba(7, 135, 232, 1) 0%,
    rgba(178, 57, 231, 1) 50%,
    rgba(255, 112, 97, 1) 100%
  );

  /* BOOTSTRAP COLOR */
  --primary: #000000;
  --secondary: #02c4b3;
  --gray-100: #f0f0f0;
  --dark: #757b9a;
  --darkLighten: #9098c0;
  --info: #8981ff;
  --warning: #ff8121;
  --danger: var(--orange);

  --infoLight: rgba(1370, 129, 255, 0.1);
  --dangerLight: rgba(255, 51, 51, 0.1);
  --secondaryLight: rgba(2, 196, 179, 0.1);
  --warningLight: rgba(255, 129, 33, 0.1);

  /* DEDIE COLOR */
  --secondarylight: #1eecda;
  --graycustom: #b6b6b6;
  --blacklight: #484848;
  --reverseblacklight: #d9d9d9;
  --dangerlight: #ff6b6b;
}
/* ===================================================================================================================== */

/* ANIMATION */
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ANIMATION FIN*/
/* GLOBAL */
html,
body {
  min-height: 100%;
  font-family: var(--ff);
  background-color: #ffffff;
}

html {
  scroll-padding-top: 70px; /* mobile: 50px header + 20px padding */
}
@media (min-width: 992px) {
  html {
    scroll-padding-top: 108px; /* LG: 88px header + 20px padding */
  }
}
@media (min-width: 1200px) {
  html {
    scroll-padding-top: 154px; /* XL: 88px + 45px menu + 21px padding */
  }
}

ul {
  padding: 0;
  margin: 0;
}
.fw-bold-700 {
  font-weight: 700 !important;
}
.fw-bold-800 {
  font-weight: 800 !important;
}
.fw-bold-900 {
  font-weight: 900 !important;
}

.textColorSecondary {
  color: var(--secondary);
}
.textColorOrange {
  color: var(--orange);
}

.grayHr {
  border-color: var(--gray-100);
}

.fs14 {
  font-size: 14px;
}
.ff2b,
.ffPrice {
  font-family: var(--ff2b);
}

@media (min-width: 768px) {
  .order-md-6 {
    order: 6 !important;
  }
  .order-md-7 {
    order: 7 !important;
  }
  .order-md-8 {
    order: 8 !important;
  }
  .order-md-9 {
    order: 9 !important;
  }
  .order-md-10 {
    order: 10 !important;
  }
}
.basicCollapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

/* ALERT */
.basicAlert {
  font-size: 14px;
  font-weight: 700;
  padding: 14px 17px;
}
.basicAlert.danger {
  background-color: #ffeaea;
  color: var(--orange);
}
.basicAlert > ul {
  padding-left: 20px;
}
.basicAlert > p {
  margin: 0;
}
/* ALERT END */

/* TUNNEL DE COMMANDE */

/* TITLE */
.productSheetH2 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 20px;
  color: var(--primary);
}
@media (min-width: 768px) {
  .productSheetH2 {
    font-size: 30px;
  }
}
@media (min-width: 1200px) {
  .productSheetH2 {
    font-size: 50px;
  }
}

.productSheetH3 {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 9px;
  color: var(--primary);
}
@media (min-width: 1200px) {
  .productSheetH3 {
    font-size: 35px;
  }
}

/* FLOATING LABEL (surcharge boostrap) */
.form-floating {
  position: relative;
}
.form-floating > .form-control.basicInput,
.form-floating > .form-select.basicSelect {
  height: 53px;
  margin-bottom: 15px;
}
.form-floating > .form-control.basicTextarea {
  height: 100px;
  margin-bottom: 15px;
}

.form-floating > .form-control.basicInput,
.form-floating > .form-select.basicSelect,
.form-floating > .form-select.basicTextarea {
  border-radius: 30px;
  border: 2px solid var(--primary);
  font-size: 16px;
  width: 100%;
}

.form-floating > .form-control.basicInput:focus,
.form-floating > .form-select.basicSelect:focus,
.form-floating > .form-select.basicSelect:focus {
  box-shadow: 0 0 5px var(--secondary);
}
.form-floating > .form-control.basicInput:disabled {
  background-color: var(--reverseblacklight);
}

.form-floating
  > .form-control.basicInput
  ~ label
  .form-floating
  > .form-control.basicTextarea
  ~ label
  .form-floating
  > .form-control.basicSelect
  ~ label {
  color: #747783;
  font-size: 14px;
  font-weight: 300;
  padding: 16px 12px 16px 25px;
}
.form-floating > .form-control.basicInput:focus ~ label,
.form-floating > .form-control.basicInput:not(:placeholder-shown) ~ label,
.form-floating > .form-control.basicTextarea:focus ~ label,
.form-floating > .form-control.basicTextarea:not(:placeholder-shown) ~ label,
.form-floating > .form-select.basicSelect ~ label {
  color: var(--primary);
  opacity: 1;
  font-size: 12.5px;
  font-weight: 700;
}
.basicInput,
.form-floating > .form-control.basicInput,
.form-floating > .form-control.basicTextarea,
.form-floating > .form-select.basicSelect {
  border-radius: 30px;
  border: 2px solid var(--primary);
  font-size: 16px;
  width: 100%;
  outline: none;
}
.form-control.basicInput,
.form-control.basicTextarea,
.form-select.basicSelect {
  border-color: var(--primary);
  outline: none;
  box-shadow: unset;
}
.form-floating.error > .form-control.basicInput,
.form-floating.error > .form-control.basicTextarea,
.form-floating.error > .form-select.basicSelect {
  border: 2px solid var(--orange);
}

.form-floating > .form-control.basicInput:focus,
.form-floating > .form-control.basicInput:not(:placeholder-shown),
.form-floating > .form-select.basicSelect {
  padding: 18px 20px 10px;
}

/* CSS TOOLTIP */
/* src/tokens.css */
:root {
  --rt-color-white: #fff;
  --rt-color-dark: #222;
  --rt-color-success: #8dc572;
  --rt-color-error: #be6464;
  --rt-color-warning: #f0ad4e;
  --rt-color-info: #337ab7;
  --rt-opacity: 0.9;
}

/* esbuild-css-modules-plugin-namespace:./src/components/Tooltip/styles.module.css?esbuild-css-modules-plugin-built */
.react-tooltip__tooltip_KtSkBq {
  visibility: hidden;
  width: max-content;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, visibility;
  border-radius: 3px;
  padding: 8px 16px;
  font-size: 90%;
  transition: opacity 0.3s ease-out;
  position: absolute;
  top: 0;
  left: 0;
}
.react-tooltip__fixed_KtSkBq {
  position: fixed;
}
.react-tooltip__arrow_KtSkBq {
  background: inherit;
  width: 8px;
  height: 8px;
  position: absolute;
  transform: rotate(45deg);
}
.react-tooltip__no-arrow_KtSkBq {
  display: none;
}
.react-tooltip__clickable_KtSkBq {
  pointer-events: auto;
}
.react-tooltip__show_KtSkBq {
  visibility: visible;
  opacity: var(--rt-opacity);
}
.react-tooltip__dark_KtSkBq {
  background: var(--rt-color-dark);
  color: var(--rt-color-white);
}
.react-tooltip__light_KtSkBq {
  background-color: var(--rt-color-white);
  color: var(--rt-color-dark);
}
.react-tooltip__success_KtSkBq {
  background-color: var(--rt-color-success);
  color: var(--rt-color-white);
}
.react-tooltip__warning_KtSkBq {
  background-color: var(--rt-color-warning);
  color: var(--rt-color-white);
}
.react-tooltip__error_KtSkBq {
  background-color: var(--rt-color-error);
  color: var(--rt-color-white);
}
.react-tooltip__info_KtSkBq {
  background-color: var(--rt-color-info);
  color: var(--rt-color-white);
}
/*# sourceMappingURL=react-tooltip.css.map */
/* CSS TOOLTIP END */