/**
*   Variables
*
*/


/* Palette de Couleurs */
:root {



  /* couleur plus intenses/sombres pour attirer l'attention */
  --contraste-A34A10: #A34A10;
  /* Rouille */
  --contraste-DD6515: #DD6515;
  /* Orange brûlé */
  --contraste-54433A: #54433A;
  /* Brun sépia */
  --contraste-2F2520: #2F2520;
  /* Brun ébène */
  --contraste-004639: #004639;
  /* Vert forêt */
  --contraste-224D40: #224D40;
  /* Vert sapin */
  --contraste-2B2F44: #2B2F44;
  /* Bleu nuit */

  /* les couleurs et intensités de référence */
  --palette-de-reference-ED8945: #ED8945;
  --palette-de-reference-ED8945: #ED8945;
  /* Mandarine, aka orange mixheures */
  --palette-de-reference-54433A: #54433A;
  /* Café noir */
  --palette-de-reference-BBA79C: #BBA79C;
  /* Taupe clair */
  --palette-de-reference-6DC0A8: #6DC0A8;
  /* Turquoise claire */
  --palette-de-reference-00866F: #00866F;
  /* Vert emeraude, aka vert mixheures */
  --palette-de-reference-43496B: #43496B;
  /* Bleu ardoise */

  /* couleurs préférentielles pour fond de fenêtres */
  --fond-fenetre-F8D2BA: #F8D2BA;
  /* Pêche clair */
  --fond-fenetre-D5C8C1: #D5C8C1;
  /* Gris taupe clair */
  --fond-fenetre-C7E7DD: #C7E7DD;
  /* Aqua pâle */
  --fond-fenetre-A6ACC8: #A6ACC8;
  /* Bleu lavande */

  /* couleurs préférentielles pour fond général */
  --fond-neutre-EFEAE7: #EFEAE7;
  /* Blanc cassé */
  --fond-neutre-D7D7EC: #D7D7EC;
  /* Lavande clair */
  --fond-neutre-E7F5F1: #E7F5F1;
  /* Vert menthe pâle  --NON RECOMMANDE-- à tester*/

  /* les couleurs moyennes, pour objets */
  --objets-ED8945: #ED8945;
  /* Mandarine, aka orange mixheures */
  --objets-54433A: #54433A;
  /* Café noir */
  --objets-00866F: #00866F;
  /* Vert emeraude, aka vert mixheures */
  --objets-48A68A: #48A68A;
  /* vert jade */
  --objets-00C6A3: #00C6A3;
  /* Vert sarcelle */
  --objets-5B6493: #5B6493;
  /* Bleu indigo */
  --objets-43496B: #43496B;
  /* Bleu ardoise */



}





.objets {
  /* les couleurs moyennes, pour objets */
  color: #ED8945;
  /* Mandarine, aka orange mixheures */
  color: #54433A;
  /* Café noir */
  color: #00866F;
  /* Vert emeraude, aka vert mixheures */
  color: #48A68A;
  /* vert jade */
  color: #00C6A3;
  /* Vert sarcelle */
  color: #5B6493;
  /* Bleu indigo */
  color: #43496B;
  /* Bleu ardoise */
}



:root {

  /* =- font and lines -= */

  /* - font family - */

  /* - font-size - */
  --font-size-normal: 18px;
  --font-size-x1dot2: calc(var(--font-size-normal)*1.2);
  --font-size-x1dot5: calc(var(--font-size-normal)*1.5);
  --font-size-x1dot7: calc(var(--font-size-normal)*1.7);
  --font-size-x1dot85: calc(var(--font-size-normal)*1.85);
  --font-size-2x: calc(var(--font-size-normal)*2);
  --font-size-x2dot2: calc(var(--font-size-normal)*2.2);
  --font-size-x2dot7: calc(var(--font-size-normal)*2.7);
  --font-size-x2dot85: calc(var(--font-size-normal)*2.85);
  --font-size-3x: calc(var(--font-size-normal)*3);

  /* - line height - */
  --line-height-normal: auto;
  --line-height-x1dot5: calc(var(--line-height-normal)*1.5);
  --line-height-x2: calc(var(--line-height-normal)*2);
  --line-height-x2dot5: calc(var(--line-height-normal)*2.5);
  --line-height-x3: calc(var(--line-height-normal)*3);
  --line-height-x3dot5: calc(var(--line-height-normal)*3.5);

  /* padding and margins */
  --responsive-padding: 0.3rem;


  /* - Colors - */
  --card_background_orange: #fdf8ee;
  --logo-color-1: #EE751B;
  --logo-color-2: #6DC0A8;
  --logo-color-3: #ed8945;
  --logo-color-3-shadow: #ad7878;
  --logo-color-4: #6dc0a8;
  --text-color: black;
  --color-5: #c9a6a6;
  --mx-box-bg-color: blanchedalmond;
  --color-gold: #ffe27a;
  --color-silver: #9e9e9e;
  --color-bronze: #b29477;
  --color-green-1: #158C75;
  --color-green-2: #44A288;
  --color-green-3: #6DBFA8;
  --color-orange-1: #F1AD80;
  --color-orange-2: #EB8946;






  /* - Borders - */
  --mx-box-border: 1px solid #d9d9d9;
  --border-radius-light: 5px;
  --border-mx-box-color: lavenderblush;
  --border-mx-box: 1px solid var(--border-mx-box-color);
  --border-radius-mx-box: 15px;
  --border-radius-mx-info: 8px;

  --border-textarea-in-dialog: 1px solid #afadad;





  /* - Boxes Shadows - */
  --box-shadow-color-3: 5px 5px 15px var(--logo-color-3-shadow);
  --mx-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;



  /* =- Loader -= */
  --loader-overlay_opacity: 0.2;


  /* =- Page contents -= */

  /* - header - */

  --page-max_width: 1800px;
  --header-nav_max-width: 1592px;
  --page-header-height: 3rem;
  --page-header-height-phone: 2rem;
  --page-header_heightx3: calc(var(--page-header_height)*3);

  --page-header-bg-color: rgba(255, 255, 255, 1);
  /* rgb(245 233 233);*/
  --header-link_color: black;
  --header-link-hover_color: rgb(233, 204, 74);
  --header_border-color: #e5e3e3;
  --header_border: 1px solid var(--header_border-color);

  --header-burger_font_size: 1.12rem;
  --menu-nav-thumbnail_size: 2.5rem;
  --page-header-font-size: 1.12rem;











  /* - footer - */
  --page-footer-height: 2rem;
  /* --padding-menu-main: 1.3rem; */
  /* --form-element-width: 80%; */




  /* =- Informations -= */
  --error-bg-color: rgb(243, 175, 155);
  --error-ft-color: rgb(255, 60, 0);
  --success-bg-color: rgb(193, 250, 102);
  --success-ft-color: rgb(43, 201, 28);
  /*#a2c6a2;*/
  --infos-bg-color: rgb(188, 231, 255);
  --infos-ft-color: rgb(39, 69, 240);
  --infos-box-border-radius: 25px;

  /* Medias queries */
  --breakpoints-l: 1200px;
  --breakpoints-m: 750px;
  --breakpoints-s: 360px;

}




/**
*   Font family
*
*/
.errorsInfos,
.successInfos {
  font-family: roboto !important;

}



/**
*   Scrollbars
*
*/

/* html{
  scrollbar-width: thin;
} */


/* @supports(scrollbar-color:red blue) {
  * {
   
  }
} */

/* scrollbar-color: rgb(10, 4, 55) transparent; */


::-webkit-scrollbar {
  width: 15px;
  height: 15px;
  color: #f3f3f3;
}

::-webkit-scrollbar-thumb {
  background-color: #c3c3c3;
  border-radius: 25vw;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}



/**
*   Page Elements
*
*/
/* *{border} */

.page {
  position: relative;
  margin: 0;
  min-height: 100vh;
  font-family: 'Roboto', 'Saa Sans', sans-serif;
  line-height: var(--line-height-normal);
  font-size: var(--font-size-normal);
  display: flex;
  flex-direction: column;
}




h2 {
  font-weight: bolder;
  font-size: var(--font-size-x1dot85);
  padding: 0.8rem;
}



form small {
  font-size: 0.8rem;
  text-decoration: italic;
}

.button-normal {
  border-radius: 25px;
  border-style: none;
  padding: 1rem;
  width: 80%;
}

.btn-filter-menu {


  /* background-color: #e4e4e4; */
  background-color: cornsilk;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.6rem;
  border-radius: 50px;
}

.contents-container {
  display: flex;
  flex-direction: column;
}

.content {
  /* margin-top:var(--page-header-height); */
  /* background:orange; */
  /* padding:2rem; */
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* .login-form{
    background-color: green!important;
  } */

.footer {
  width: 100%;
  /* height:var(--page-footer-height); */
  /* background:#3331312c; */
  /* display:flex;
    align-items: center;
    text-align: center; */
}


.x-img {
  height: 1.5rem;
}


.form-element {
  /* margin: var(--font-size-normal) auto;
  width: 100%;
  height: auto;
  text-align: center;
  width: var(--form-element-width);
  padding: 0.5rem;
  width: 100%; */
  /* display: flex; */
  width: 100%;
  max-width: 100%;
  /* overflow: scroll; */
}

.form-element-item-max {
  flex: 1;
}

input:focus {
  outline: none;
  background: transparent;
}

#btn-mixheure {
  padding: 3rem;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
  color: black;
  font-weight: 800;
  font-size: 2rem;
  border: 5px solid black;

}

.content-link {
  cursor: pointer;
  /* margin-bottom: 0.5rem; */
}

.content-link:hover {
  color: black;
}

/* POSITIONNING */
.flex-container-centered{
  display: flex!important;
  align-items: center;
  justify-content: center;
}

/* body{
    background: white;
    color: black;
  } */

.form-element-info {
  width: var(--form-element-width);
  display: block;
  margin: 0 auto;
  text-align: left;

}

.form-element input {
  border: none;
  background: white;
  flex: 1;

  /* width: auto; */
  /* min-width: 80%; */
  padding-left: 5px;
  box-sizing: border-box;
  max-width: 100%;
}

[contenteditable="true"]:focus {
  background-color: red !important;
  padding: 3px;
}





.form-element.input-container {
  border: 1px solid #DDD;
  background: whitesmoke;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 25px;
  font-size: var(--font-size-x1dot2);
  max-width: 100%;
}

.infos-divers {
  text-align: center;
  font-size: var(--font-size-2x);
  color: var(--infos-ft-color);
  background-color: var(--infos-bg-color);
  display: inline-block;
  margin: 0 auto;
  width: auto;
  padding: var(--font-size-normal);
  border-radius: var(--infos-box-border-radius);
}

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

.profil-o-form .activities-container,
.profil-o-form .phone-container {
  display: none !important;
}


/* Plannings medal */
.number_1 .medal_gold {
  display: block !important;
  max-width: 132%;
  margin-left: -7px;
}

.number_2 .medal_silver {
  display: block !important;
  max-width: 132%;
  margin-left: -7px;
}

.number_3 .medal_bronze {
  display: block !important;
  max-width: 132%;
  margin-left: -7px;
}


/* POSITIONNING */
.hide {
  display: none;
  /* visibility: hidden;
  position: absolute */
}

.hideforced {
  display: none !important;
  /* visibility: hidden;
  position: absolute */
}


/* Specials handling */
/* Search bar */
.hide-by-search-bar {
  display: none !important;
}


.visible {
  visibility: visible !important;
  position: initial !important;
}

.hidden {
  display: none;
}

.show {
  display: inherit;
}

.centered {
  margin: 0 auto;
}

/* MISC */
.pointer {
  cursor: pointer;
}

/* ICONS */
.icon-back-to-top {}

/* FONT STYLES  */
.mx-underline {
  border-bottom: 1px black;
  border-style: dotted;
  padding-bottom: 2px;
}

.text-align-center {
  text-align: center;
}

/* FONTS SIZES */
.font-m {
  font-size: 1rem;
}

.font-l {
  font-size: 1.3rem;
}

.font-xl {
  font-size: 2rem;
}

.font-xxl {
  font-size: 2.5rem;
}

.font-xxxl {
  font-size: 3rem;
}

b {
  font-weight: 900;
}

/* BOX SHADOWS */

.box-shadow-bottom {
  position: relative;
}

.box-shadow-bottom:after {
  /* on bottom only */
  content: "";
  position: absolute;
  width: calc(100% - 2px);
  bottom: 1px;
  z-index: -1;
  /* transform: scale(.99); */
  box-shadow: 0px 0px 6px 1px #000000;
}



/* BUTTONS  */
.icon-btn {
  cursor: pointer;
  color: darkgrey;
}

.icon-btn:hover {
  color: rgb(0, 0, 0);
}

.btn-hover-border:hover {
  border-color: blue;
  border-width: 2px;
  /* text-decoration: underline; */
  cursor: pointer;

}

.btn-standard {
  padding: 0.5rem 1rem;
  background-color: #bfbfbfed;
  color: black;
  border: 1px solid grey;
}

.btn-mx {
  border-bottom: 1px;
  border-style: dotted;
  cursor: pointer;
  padding-bottom: 2px;
}

.btn-hover-color {

  cursor: pointer;

}

.btn-hover-color:hover {
  color: blue;
}

.btn-mx-light {
  border-bottom: 1px rgb(145, 142, 142);
  border-style: dotted;
  cursor: pointer;
  padding-bottom: 2px;
}

.bt-pseudolink:hover {
  color: blue !important;
  cursor: pointer !important;
}

*[class*="btn-"] {
  cursor: pointer;
}

.color-black-light {
  color: #2a2a2a;
}


.icon-btn {
  color: #605e5eed;
  cursor: pointer;

  /* border: 1px solid #cbcbcb;
  padding: 0.2rem; */

}

.icon-btn:hover {
  color: black;
}



/* EVENTS */
.btn-mx:hover {
  color: blue;
}

.hover-border-link:hover {
  cursor: pointer;
  border-color: blue !important;
  color: rgb(17, 17, 56) !important;

}

.hover-border-link-allblue:hover {
  cursor: pointer;
  border-color: blue !important;
  color: blue !important;

}


.img-link-border-color-allblue {
    cursor: pointer;
    border-color: #f1b68ee0 !important;
    color: #f1b68ecc !important;
    /* opacity: 0.6; */
}

.img-link-border-color-allblue:hover {
    cursor: pointer;
    /* border-color: blue !important; */
    /* color: blue !important; */
    opacity: 1;
    border-color: #f1b68e !important;
    color: #f1b68e !important;

}


/* BORDERS */
.btn-border-grey {
  border: 1px solid #bfbfbf;

}

/* COLORS */
.bg-logo-1 {
  background-color: var(--logo-color-1);
}

.bg-logo-2 {
  background-color: var(--logo-color-2);
}

.color-logo-1 {
  color: var(--logo-color-1);

}

.color-logo-2 {
  color: var(--logo-color-2);

}

.bg-red {
  background-color: red !important;

}

.on {
  background-color: red !important;
  transition: all 3s;
}

.off {
  background-color: initial !important;
  transition: all 3s;
}

.modal-title-color {
  color: #3c3c3c;
}

.modal-title-bgcolor {
  background-color: #ed8945;
}




/* TOOLTIP */
.tooltip {
  /* position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; */

}

.tooltip .tooltiptext {
  display: none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;



  /* Position the tooltip */
  position: absolute;
  z-index: 999;
  font-family: Roboto, sans-serif !important;
}

.tooltip.right:hover .tooltiptext {
  display: inherit;
  font-size: 1rem;
  translate: 110%;
}

.tooltip.left:hover .tooltiptext {
  display: inherit;
  font-size: 1rem;
  translate: -100%;
}

.tooltip.top:hover .tooltiptext {
  display: inherit;
  font-size: 1rem;
  translate: 0 -100%;
}

.tooltip.bottom:hover .tooltiptext {
  display: inherit;
  font-size: 1rem;
  translate: 0 120%;
}


/* BOXS */
/**
* Modal
*
*/
.modal-overlay {
  background-color: rgb(0 0 0 / 85%) !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/**
* Mx Box
*
*/
.mx-box {
  background-color: var(--mx-box-bg-color) !important;
  border-radius: var(--border-radius-mx-box) !important;
  padding: 1rem !important;
  border: var(--border-mx-box) !important;
  box-shadow: var(--mx-box-shadow) !important;
  box-sizing: border-box !important;
}

.mx-box-recap {
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f8f7 !important;
  border: 1px solid antiquewhite;
  border-radius: var(--border-radius-mx-info) !important;
  padding: 0.5rem 1rem !important;
  border: var(--border-mx-box) !important;
  box-shadow: var(--mx-box-shadow) !important;
  box-sizing: border-box !important;
}



/* Info box */
.mx-box-info {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff !important;
  border-radius: var(--border-radius-mx-info) !important;
  padding: 0.3rem !important;
  border: 1px solid antiquewhite;
  box-shadow: var(--mx-box-shadow) !important;
  box-sizing: border-box !important;
  /* margin: 1rem 0.5rem; */
  /* font-size: 17px; */

}

.info-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #7070bd82;
  color: black;
  height: 1.2rem;
  width: 1.2rem;
  margin: 0.45rem;
  padding: 0.45rem;
  font-size: 1rem;
}


.info-text {
  display: flex;
  line-height: 1rem;
  height: 100%;
  flex-wrap: wrap;
  display:inline-block;
  line-height: 1rem;
  font-size:1rem;
}



.div-bg-image {
      display: inline-block !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    height: 1rem!important;
    width:1rem!important;


}

.info-text-inline {
    display: inline;
    /* line-height: 1.2rem; */
    font-size: 1rem;
    vertical-align: middle;

}

.inline-text {
    display: inline-flex;
    /* line-height: 1.2rem; */
    /* font-size: 1rem; */
    vertical-align: middle;

}

.btn-add {
  /* margin: 0 2rem; */
  width: 2.8rem !important;
  height: 2.8rem !important;
  /* padding: 0.3rem; */
  background: #fbb789 !important;
  border-radius: 50% !important;
  font-size: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6f6b6b !important;
  /* box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 7px !important;*/
}



/* Errors infos */
.errorsInfos {
  background: #f9cca5;
  padding: 1rem;
  flex: 1;
  display: flex;
  justify-content: center;
  font-weight: bold;
  width: 100%;
  border: none;
  color: red;
}

.errors_container {
  color: red;
}

.successInfos {
  background: #0aff1461;
  padding: 1rem;
  flex: 1;
  display: flex;
  justify-content: center;
  font-weight: bold;
  width: 100%;
}

.hatching-bg {
  background-image: repeating-linear-gradient(-45deg, transparent -1px -1px, grey 1px 1px);

}

.required {
  color: red !important;
}




/* .thumbnail::before {
  content: '';
  font-size: 2rem;
  border-radius: 50%;
  padding: 8px;
  position: absolute;
  top: -8px;
  left: -10px;
  border: 6px solid white;
  background-color: #7b7b7b;
} */



.connection-status {
  position: relative;
}

.connection-status::before {
  content: ' ';
  width: 0.72rem !important;
  height: 0.72rem !important;
  display: flex !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  padding: 0 !important;
  translate: -25% -25%;
  border-radius: 50%;
  border: 3px solid !important;
  background-color: transparent !important;
  border-color: transparent !important;

}

.connection-status.connected::before {
  background-color: #a4f5ab !important;
  /* border-color: white !important; */
  box-shadow: 0 0 7px #707070;

}

/* ANIMATIONS */
/* 1. Pulse Animation */
.btn-pulse {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* .asker[about_start][about_end][offer_group]:after{
  content: '\f0da';
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  margin:0px 0px 0px 10px;
  text-decoration:none;
  background-color: red !important;
  display: block!important;
} */




/* .tooltip.right .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 125px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
  translate: 0 -50%;
} */




/*   Medias queries = Responsivness */

/* For mobile phones: */
@media only screen and (max-width: 600px) {
  .col-xs-1 {
    width: 8.33%;
  }

  .col-xs-2 {
    width: 16.66%;
  }

  .col-xs-3 {
    width: 25%;
  }

  .col-xs-4 {
    width: 33.33%;
  }

  .col-xs-5 {
    width: 41.66%;
  }

  .col-xs-6 {
    width: 50%;
  }

  .col-xs-7 {
    width: 58.33%;
  }

  .col-xs-8 {
    width: 66.66%;
  }

  .col-xs-9 {
    width: 75%;
  }

  .col-xs-10 {
    width: 83.33%;
  }

  .col-xs-11 {
    width: 91.66%;
  }

  .col-xs-12 {
    width: 100%;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

  /* Tabs: */
  .col-s-1 {
    width: 8.33%;
  }

  .col-s-2 {
    width: 16.66%;
  }

  .col-s-3 {
    width: 25%;
  }

  .col-s-4 {
    width: 33.33%;
  }

  .col-s-5 {
    width: 41.66%;
  }

  .col-s-6 {
    width: 50%;
  }

  .col-s-7 {
    width: 58.33%;
  }

  .col-s-8 {
    width: 66.66%;
  }

  .col-s-9 {
    width: 75%;
  }

  .col-s-10 {
    width: 83.33%;
  }

  .col-s-11 {
    width: 91.66%;
  }

  .col-s-12 {
    width: 100%;
  }


}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

  /* For tablets: */
  .col-m-1 {
    width: 8.33%;
  }

  .col-m-2 {
    width: 16.66%;
  }

  .col-m-3 {
    width: 25%;
  }

  .col-m-4 {
    width: 33.33%;
  }

  .col-m-5 {
    width: 41.66%;
  }

  .col-m-6 {
    width: 50%;
  }

  .col-m-7 {
    width: 58.33%;
  }

  .col-m-8 {
    width: 66.66%;
  }

  .col-m-9 {
    width: 75%;
  }

  .col-m-10 {
    width: 83.33%;
  }

  .col-m-11 {
    width: 91.66%;
  }

  .col-m-12 {
    width: 100%;
  }
}




/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

  /* For Laptops: */
  .col-l-1 {
    width: 8.33%;
  }

  .col-l-2 {
    width: 16.66%;
  }

  .col-l-3 {
    width: 25%;
  }

  .col-l-4 {
    width: 33.33%;
  }

  .col-l-5 {
    width: 41.66%;
  }

  .col-l-6 {
    width: 50%;
  }

  .col-l-7 {
    width: 58.33%;
  }

  .col-l-8 {
    width: 66.66%;
  }

  .col-l-9 {
    width: 75%;
  }

  .col-l-10 {
    width: 83.33%;
  }

  .col-l-11 {
    width: 91.66%;
  }

  .col-l-12 {
    width: 100%;
  }


}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

  /* For Desktops: */
  .col-xl-1 {
    width: 8.33%;
  }

  .col-xl-2 {
    width: 16.66%;
  }

  .col-xl-3 {
    width: 25%;
  }

  .col-xl-4 {
    width: 33.33%;
  }

  .col-xl-5 {
    width: 41.66%;
  }

  .col-xl-6 {
    width: 50%;
  }

  .col-xl-7 {
    width: 58.33%;
  }

  .col-xl-8 {
    width: 66.66%;
  }

  .col-xl-9 {
    width: 75%;
  }

  .col-xl-10 {
    width: 83.33%;
  }

  .col-xl-11 {
    width: 91.66%;
  }

  .col-xl-12 {
    width: 100%;
  }
}











#sepa_debit-tab,
#Field-countryInput {
  display: none;
}

#express-checkout-element {
  width: 360px;
}

.beug-form-groupe{

      display: flex
;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
}