@import url("fontawesome/css/all.css");

::selection {
    background-color: #FAD3D6;
    color: white;
}

::-moz-selection {
    background-color: #FAD3D6;
    color: white;
}

/* Minion Pro */

@font-face {
    font-family: minionpro;
    src: url(MinionProRegular/MinionPro.woff);
    font-display: auto;
}

@font-face {
    font-family: minionprob;
    src: url(MinionPro/MinionPro-Bold.woff);
    font-display: auto;
}

@font-face {
    font-display: swap;
    font-family: "SuisseInt";
    font-style: normal;
    font-weight: 300;
    src: url(SuisseIntl/SuisseIntl-Light.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "SuisseInt";
    font-style: normal;
    font-weight: 400;
    src: url(SuisseIntl/SuisseIntl-Regular.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "SuisseInt";
    font-style: normal;
    font-weight: 450;
    src: url(SuisseIntl/SuisseIntl-Book.woff) format("woff")
}

@font-face {
    font-family: SuisseInt;
    src: url(SuisseIntl/Suisse-Intl-Medium.woff);
    font-display: auto;
}

@font-face {
    font-family: SuisseIntl;
    src: url(SuisseIntl/SuisseIntl-Book.woff);
    font-display: auto;
}

@font-face {
    font-family: SuisseIntl-Light;
    src: url(SuisseIntl/SuisseIntl-Light.woff);
    font-display: auto;
}

@font-face {
    font-family: SuisseIntl-Regular;
    src: url(SuisseIntl/SuisseIntl-Regular.woff);
    font-display: auto;
}

/* MuseoSlabe  -------------------------------  MuseoSlabe*/
@font-face {
    font-family: arial;
    src: url(Arial/ArialMT.woff);
    font-display: auto;

}

@font-face {
    font-family: arialb;
    src: url(Arial/Arial-BoldMT.woff);
    font-display: auto;

}

@font-face {
    font-family: arialbi;
    src: url(Arial/Arial-BoldItalicMT.woff);
    font-display: auto;

}

@font-face {
    font-family: ariali;
    src: url(Arial/Arial-ItalicMT.woff);
    font-display: auto;

}

/* museoslabe  -------------------------------  museoslabe*/
@font-face {
    font-family: museoslabe;
    src: url(MuseoSlabe/MuseoSlab-100.woff);
    font-display: auto;

}

@font-face {
    font-family: museoslabeb;
    src: url(MuseoSlabe/MuseoSlab-1000.woff);
    font-display: auto;
}

@font-face {
    font-family: museoslabebi;
    src: url(MuseoSlabe/MuseoSlab-1000Italic.woff);
    font-display: auto;
}

@font-face {
    font-family: museoslabei;
    src: url(MuseoSlabe/MuseoSlab-100Italic.woff);
    font-display: auto;
}

/* Gotham  -------------------------------  Gotham*/
@font-face {
    font-family: gotham;
    src: url(Gotham/Gotham-Book.woff);
    font-display: auto;
}

@font-face {
    font-family: gothami;
    src: url(Gotham/Gotham-BookItalic.woff);
    font-display: auto;
}

@font-face {
    font-family: gothamb;
    src: url(Gotham/Gotham-Bold.woff);
    font-display: auto;
}

@font-face {
    font-family: gothambi;
    src: url(Gotham/Gotham-BoldItalic.woff);
    font-display: auto;
}

@font-face {
    font-family: SuisseIntl-Regular;
    src: url(RationalDisplay-Book/RationalDisplay-Book.woff);
    font-display: auto;

}

@font-face {
    font-family: rdBold;
    src: url(RationalDisplay-Bold/RationalDisplay-Bold.woff);
    font-display: auto;

}

@font-face {
    font-family: rdmedium;
    src: url(RationalDisplay-Medium/RationalDisplay-Medium.woff);
    font-display: auto;

}

@font-face {
    font-family: rdthin;
    src: url(RationalDisplay-Thin/RationalDisplay-Thin.woff);
    font-display: auto;

}

@font-face {
    font-family: SuisseIntl-Regular;
    src: url(RationalDisplay-SemiBold/RationalDisplay-SemiBold.woff);
    font-display: auto;

}

@font-face {
    font-family: rdLight;
    src: url(RationalDisplay-Light/RationalDisplay-Light.woff);
    font-display: auto;

}

@font-face {
    font-family: rdExtraLight;
    src: url(RationalDisplay-ExtraLight/RationalDisplay-ExtraLight.woff);
    font-display: auto;

}
@font-face {
    font-family: metropolis;
    src: url(metropolis/Metropolis-Regular.ttf);
    font-display: auto;

}

@font-face {
    font-family: metropolisb;
    src: url(metropolis/Metropolis-Bold.ttf);
    font-display: auto;

}
@font-face {
    font-family: metropolisbi;
    src: url(metropolis/Metropolis-BoldItalic.ttf);
    font-display: auto;

}
@font-face {
    font-family: metropolisi;
    src: url(metropolis/Metropolis-Italic.ttf);
    font-display: auto;

}

@font-face {
    font-family: stenciletta;
    src: url(Stenciletta/Stenciletta-Regular.woff);
    font-display: auto;

}

@font-face {
    font-family: stencilettab;
    src: url(Stenciletta/Stenciletta-Bold.woff);
    font-display: auto;

}



html {
    scroll-behavior: smooth;
}

.SuisseIntl-Regular {
    font-family: SuisseInt;

}



.SuisseIntl-Regular {
    font-family: SuisseInt;

}

.Stenciletta {
    font-family: Stenciletta;

}

.Metropolis {
    font-family: Metropolis;

}

.Arial {
    font-family: Arial;

}



#inscription a.h6 {
    font-size: 1.5rem;
    text-transform: unset;
    font-weight: unset;
    font-family: SuisseInt;
}

div.header {
    position: sticky;
    top: 0;
    z-index: 1;

}

.input-group.top-menu-search-div input {
    background: none;
    color: white;
    border-color: white;
    width: 70%;
    border-radius: 0px;
    border-left: none;
    margin-left: -5px;
    height: 39px;
}

.input-group.top-menu-search-div-sidebar input {
    background: none;
    color: white;
    border-color: #1D2030;
    width: 70%;
    border-radius: 0px;
    border-left: none;
    margin-left: -5px;
    height: 39px;
}

.input-group.top-menu-search-div button {
    width: 42px;
    height: 39px;
    background: #fff;
    border: none;
    color: #1D2030;
    border: 1px solid white;
    cursor: pointer;
}

.input-group.top-menu-search-div-sidebar button {
    width: 42px;
    height: 39px;
    background: #1D2030 !important;
    border: 1px solid #1D2030 !important;
    color: white !important;
}

.input-group.top-menu-search-div {
    display: none;
    position: fixed;
    top: 40px;
    left: 0;
    /* z-index: 1000000; */
    right: 0;
    background: #1D2030;
    padding: 7px 0px !important;
}

.input-group.top-menu-search-div input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: white;
}

.input-group.top-menu-search-div input::-moz-placeholder {
    /* Firefox 19+ */
    color: white;
}

.input-group.top-menu-search-div input:-ms-input-placeholder {
    /* IE 10+ */
    color: white;
}

.input-group.top-menu-search-div input:-moz-placeholder {
    /* Firefox 18- */
    color: white;
}

#connexion div.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
}

#content- div.clearfix {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

#map-magasins div.clearfix {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

#map-magasins h2 span {
    font-weight: bold;
}

#map-magasins h3 {

    text-align: center !important;
    font-size: 0.9rem;
    font-weight: 400;
}

#main-devis .backto-configurator-bloc {
    text-align: left;
    margin-bottom: 40px;
}

#map-magasins .backto-quote,
#main-devis .backto-configurator {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-dialog-override {
    max-width: 540px !important;
}

p.receive_copy {
    display: flex;
    align-items: center;
}

#receive_copy {
    width: 20px;
    margin-right: 5px;
}

p.receive_copy label#receivecpy {
    margin-bottom: 0px;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */


    /* Primary/Primary */

    color: #2F3035;
}

/* .send-quote {
    text-align: center;
} */

.send-quote .btn-envoyer-devis {
    color: white;
    background: #0F2459;
}

.btn-envoyer {
    cursor: pointer;
}

#devis_send .rgpd-text {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 12px;
    line-height: 20px;
    /* or 200% */


    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);
}

.rgpd-text a {
    color: rgba(47, 48, 53, 0.7);
    text-decoration: underline;
}

#devis_send label {
    font-size: 12px;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    line-height: 24px;
    /* identical to box height, or 240% */


    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);
}

#devis_send .send-quote {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.carte-footer {
    padding-right: 25px;
    overflow: hidden;
    padding-bottom: 20px;
}

.carte-footer h3 {
    float: right;
}

.carte-footer .all-distributors {
    display: block;
    clear: both;
}

.carte-footer .all-distributors a {
    float: right;
}

#inscription div.clearfix {
    z-index: 10;
}

.panel-header .libelle-piece {
    color: white;
    padding-left: 20px !important;
}

.panel-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 5px;
    padding-bottom: 5px;
    display: inline-block;
    text-align: left;
    height: 37px;
}

.padding-right {
    padding-right: 4px;
}

.products_comp_number.col-md-12 {
    padding-left: 15px !important;
}

.col-md-6.element-meca {
    /* padding-left: 119px; */
}

.composant-header.row.float-left.col-md-12.mt-3 {
    padding-left: 34px;
}


h5 {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
}

body {

    text-align: center;
    background-color: #fff;
    /* color: #998675; */
    font-size: 14px;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
}

#loginpage {
    /* background:  #10235a; */
    margin: 0;
}

#loginpage .col-md-12.mx-auto p.h4 {
    font-size: 1.8rem !important;
    font-family: SuisseInt;

}

#loginpage .col-md-12.mx-auto p {
    font-size: 1.2rem;
    font-family: SuisseInt;
}

.connexion-buttons .button span {
    font-family: 'SuisseInt';
    font-size: 1.1rem;
}

.mt-15vh.color-base.d-none.d-sm-block {
    font-family: 'SuisseInt';
    font-size: 1rem;
}

/* #connexion main a {
    color: #72614A !important;
} */


footer a {
    color: #72614A !important;

}

.gravure-bouton#full-screen-mode {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    color: rgba(47, 48, 53, 0.7);
}


footer.footer_inscription {
    overflow: hidden;

}


.video-section h2 {
    font-size: 1.5rem;
}

.video-section.d-sm-none {
    font-size: 1.5rem;
}

.video-section.d-sm-none iframe {
    width: 100%;
    height: 600px;
}

.d-sm-none.video-section .iframe-div {
    padding: 0;
}

.presentation-section h3 {
    font-size: 1.1rem;

}

.menu-item a {
    color: #2F303580 !important;
    font-family: SuisseInt;
    background-color: transparent;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    gap: 12px;
}

.centrer {
    text-align: center;
}

.part1 {
    padding: 0;
}

/* ENTETE PAGE CONNEXION */

#connexion {
    /* background-image: url(../../assets/images/bgv4.svg); */
    /* background-image: url(../../assets/images/home/modelec_home_page_background_image.jpg); */
    background-image: url(../../assets/images/home/configurateur-home-desktop-v2.jpg);
    /* background-position: right; */
    background-size: cover;
    /* background-size: contain; */
    background-repeat: no-repeat;
    background-color: white;
    /* background-attachment: fixed; */
}

#connexion header {
    /* padding-top:40px;  */
    /* padding-right: 130px;
    padding-left: 160px; */
    /* position: fixed; */
    /* width: 100vw;*/
    border: none;
    background: transparent;
    /* z-index: 1000000; */
}

.errormsg {
    color: red;
}

.top-menu {
    overflow: hidden;
    height: 50px;
    /* padding: 10px; */
    /* text-transform: UPPERCASE; */
    background-color: #0F2459;
    display: flex;
    align-items: center;
}

.top-menu .langue-selecter {
    /* background: white; */
    /* color: #998675 !important; */
    visibility: hidden;
    position: absolute;
}

.top-menu .user_options {
    float: right;
}

.top-menu .magasins,
.top-menu .contacts {
    float: right;
    cursor: pointer;
}

.top-menu .magasins {
    /* display: none; */
}

.top-menu .magasin,
.top-menu .contact,
.top-menu .new_devis {
    /* padding: 0;
    font-size: 1rem;
    color: white !important;
    background: #10235a !important; */

}

/* END ENTETE PAGE CONNEXION */
.comptes-menu,
.site_logo,
.container-mecanisme,
.nv-devis,
.forgot-password {
    cursor: pointer;
    font-size: 9px;
    color: black !important;
    display: flex;
    width: 100%;
    justify-content: right;
}

.img-mecanisme,
.panel-content {
    cursor: pointer;
    /* float: left; */
    max-width: unset;
}

.interVisuel .img-mecanisme {
    cursor: pointer;
    /* float: left; */
    width: 100%;
    height: 100%;
    /* aspect-ratio: 1/2; */
    object-fit: contain;
}

.format-image-preview {
    object-fit: contain;
}

.align-format-to-left {
    /* left: -40px;
    position: relative;
    top: 30px; */
}

.panel-temp .products-number-open-close {
    float: left;
}

p.products_number {
    float: right;
    margin-right: 10px;
}

h1 {
    color: #10235a;
    background-color: transparent;
    border-bottom: none;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 14px 0;

}

.description-home {
    min-height: 100vh;
    padding-top: 200px;
    margin-left: 164px;
    text-align: left;
    max-width: 340px;
}

.description-home h1 {

    background-color: transparent;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    color: #2F3035;
    font-family: 'SuisseInt';
    margin-bottom: 30px;

}

.description-home .paragraph {
    font-family: 'SuisseInt';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: rgba(47, 48, 53, 0.7);
    margin-bottom: 25px;
}

.description-home-subsection {
    width: 280px;

}

.descr-btn-standard {
    all: unset;
    cursor: pointer;
    position: relative;

    width: 100%;
    height: 52px;
    border-radius: 8px;

    text-align: center;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;

    font-family: 'SuisseInt';
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-auth {
    background: #2F3035;
    color: #fff;
}

.btn-noauth {
    background: transparent;
    color: black;
    border: 1px solid rgba(47, 48, 53, 0.5);
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.panel-total  .close span {
    right: 0px;
}

.btn-noauth a {
    color: #fff;

    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.line-with-text-login {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 14px;
    margin-bottom: 14px;
    width: 100%;
}

.login-subsection {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.line-with-text-login-popup {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 14px;
}

.line-with-text-login-popup .text {
    font-size: 10px;
    margin: 0px 6px;

    font-style: normal;
    font-weight: 450;
    line-height: 20px;

    text-align: center;
}

.line-with-text-login-popup .line {
    width: 23%;
}

.login-subsection-elt.first-login-elt {
    margin-bottom: 14px;
}

.login-subsection-elt.second-login-elt {
    margin-bottom: 21px;
    position: relative;
}

.login-subsection-elt.second-login-elt img {
    position: absolute;
    height: 24px;

    right: 20px;
    bottom: 14px;
}

.login-subsection-elt {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    /* height: 52px; */
}

.login-subsection-elt span {
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 20px;
    color: rgba(47, 48, 53, 0.7);
    margin-bottom: 1px;
}

.login-subsection-elt input {
    border: 1px solid #2F3035;
    border-radius: 12px;
    height: 52px;
    width: 100%;
    font-size: 14px;
    /* color: #495057; */
    color: #2F3035;

    background-color: #fff;
    text-indent: 20px;
    padding-right: 25px;
    /* font: small-caption; */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.login-subsection-elt input[type="password"] {
    /* Set the font-size and font-family for the password input field */
    /* font-size: 16px;
    
    font-family: sans-serif; */
}

.login-subsection-elt input::placeholder {
    /* font-weight: bold; */
    /* opacity: 0.5; */
    /* color: #2F3035; */
    /* color: #495057;*/
    color: rgba(47, 48, 53, 1);
    /* padding: 14px 20px;    */
}

.login-subsection-elt input[type="password"]::-webkit-text-security-disc {
    /* Use an image or font icon to replace the masking dots */
    /* *Need to be modified later (on live) */
    /* background-image: url('\assets\images\home\dot.png');
    background-size: 100% 100%; */
    /* Set the width and height of the custom masking dots */
    /* width: 15px;
    height: 15px; */
}

.connexion-btn-block {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.descr-btn-standard img {
    height: 24px;
}

.h1 {
    font-weight: 700;
}

.h4,
h4 {
    font-size: 1.25rem;
    font-family: 'SuisseInt';
}

.validation-error {
    position: absolute;
    left: 0;
    bottom: -19px;
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 20px;
    font-family: 'SuisseInt';

    text-align: center;
    color: #EA1717 !important;
}

.required-field-border {
    border: 1px solid rgba(234, 23, 23, 1) !important;
}

#body {
    margin: 0 15px 0 15px;
}

#connexion main {
    /* padding-top: 30px;
    height: 100vh; */
    position: relative;
    z-index: 100;
}

#connexion .header .recherche {
    display: block;
    float: right;
    clear: both;
}

.recherche-form {
    justify-content: center
}

.top-menu-search-div-sidebar .recherche-form {
    justify-content: left;
}

#connexion .header .recherche-mot {
    /* width: 100%;
    float: left;
    border: 1px solid #0000ff;
    border-radius: 30px; */
}

.modelec-button {
    background-color: #1D2030 !important;
    border: 1px solid #1D2030 !important;
    border-radius: 50px !important;
    color: white !important;
}

.modelec-button:hover {
    background: #3F54BC !important;
}

.modelec-button i {
    margin-right: 5px;
}

#mapid {
    height: 430px;
    overflow: hidden;
}

#loader-map {
    text-align: center;
}

.home {
    display: flex;
}

.header {

    background: #FFFFFF;
    padding-bottom: 15px;

}

#navbar {
    padding-right: 48px;
    padding-left: 160px;
    margin: 0 48px;
    border-bottom: 1px solid rgba(47, 48, 53, 0.15);
    padding: 19px 0px 21px 0px;
}

.floatright {
    float: right !important;
}

.header .part1 .main-menu h2 {
    text-align: center;
}

.header .part1 .buttons-group-header {
    overflow: hidden;
    width: 100%;
    padding: 8px 0;
}

.header .part1 .user_options {
    float: right;
}

.header .langue-selecter {
    /* color: #0000FF !important; */
    /* font-weight: bold; */
    /* margin: 0; */
    /* background: white !important; */
}

.titre-page h2 {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    /* identical to box height, or 125% */


    /* Primary/Primary */

    color: #2F3035;
    text-align: center;
}

.goToConfig {
    color: #10235a;
}

.goToConfig:hover {
    text-decoration: none !important;
}

.header .part1 .main-menu {
    font-family: Arial;
    color: #00508C;
    font-size: 2.5rem;
}

.config {
    position: relative;
    padding: 0;
    margin-right: 0;
}

.config>* {

    padding-left: 5%;
    padding-right: 5%;
}

.config a {
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 1rem;
    margin: 0 8px !important;
}

.config .compte {
    float: right;
    /* margin-right: 15px; */
    color: #10235a;
    cursor: pointer;
}

.config .compte a.user-notif {
    position: relative;
}

.config .compte span.notif {
    position: absolute;
    background: red;
    color: white;
    border: none;
    top: -15px;
    left: 15px;
    height: 15px;
    width: 15px;
    font-size: 11px;
}

.config .langues {
    /* float: right; */
    /* margin: 0 0 0 18px; */
    cursor: pointer;
}

.langues a {
    margin: 0 !important;
}

.langues {
    margin-top: 50px !important;
}

.header .recherche {
    /* padding: 0;
    border-bottom: solid 1px #666666;
    display: inline-block; 
    margin-top: 2px;
    float:right;
    clear: both; */
}

.recherche-mot {
    display: inline-block;
    width: auto;
}

.header .comptes-menu {
    float: right;
    margin-right: 15px;
}

.header .dropdown-toggle {
    color: #666666 !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.header .comptes-menu button {
    background-color: transparent;
    border: none;
    color: #10235a;
    padding: 0;
}

.header .recherche input {
    border: 0;
    box-shadow: none;
}

.input-group {
    padding: 0;
}

.header .recherche button {
    margin: 8px 0px 0px 0;
    background: none;
    color: #666666;
    padding: 0 8px 0 10px;
}

.header .recherche button:hover {
    border: 0;
    box-shadow: none;
}

.header .recherche .glyphicon-search {
    font-size: 1.5rem;
}

.header .part1 {
    display: flex;
    align-items: center;
    height: 64px;
    justify-content: space-between;
}

.header .part2 .main-menu {
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    width: 100%;
    padding: 0;
    font-size: 1.2rem;
    justify-content: space-between;
}

.header .part2 {
    padding: 0 48px;
    margin-top: 24px;
}

.header .part2 .menu-item:after {
    /* content: url(../images/icons/arrow-right.png);
    margin: 0 25px;
    position: relative;
    top: 12px; */
}

.header .part2 .menu-item {
    /* content: url(../images/icons/arrow-right.png);
    margin: 0 25px;
    position: relative;
    top: 12px; */

    margin-right: 56px;
}

.header .part2 .menu-item li a {
    /* content: url(../images/icons/arrow-right.png);
    margin: 0 25px;
    position: relative;
    top: 12px; */
    color: red !important;
    /* margin-right: 10px; */
}

.items-container {
    overflow: hidden;
    margin: 30px 0px;
    background: tomato;
}

.items-container .item {
    color: black;
    float: left;
    width: calc((100% / 7) - 20px);
    margin: 10px;
    background: #fff;
    padding: 10px;
    text-align: center;
    height: 252px;
}

.items-container .item h4 {
    font-size: 1rem;
    font-weight: bold;
    color: #10235a;
    text-align: center;
    height: 35px;
}

#connexion .items-container .image-homepage {
    width: 100%;
}

.items-container .passer-configurer {
    float: left;
    overflow: hidden;
    width: 100%;
    margin-top: 25px;
}

.items-container .passer-configurer .configurateur {
    margin: 0 auto;
    width: 40%;
    display: block;
    float: none !important;
}

.go-inscription ul {
    margin-top: 23px;
}

.go-inscription ul>li {
    font-size: 1.25rem;
}

.go-back>a:before {
    content: url(../images/icons/arrow-left.png);
    margin-right: 15px;
    float: left;
    margin-top: 2px;
}

.go-back a {
    color: #75634E;

}

.header #back {
    float: left;
    padding-left: 15px;
}

.header ul li {
    display: inline-block;
}

.header ul li.active {
    /* color: #10235a; */
}

.header ul li a:hover {
    /* color: #3F54BC; !important; */
    text-decoration: none;
}

#canvas-preview {
    max-width: 100%;
}

.header ul li.active a {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    color: #3F54BC !important;

}

.header ul li a span.steps-num {
    border: 1px solid #2F303580;
    border-radius: 100%;
    border-radius: 24px;
    width: 24px;
    height: 24px;
    display: block;
    background: transparent;
    color: #2F303580;
    ;
    font-family: 'SuisseInt';
}

.header ul li.active a span.steps-num {
    border: 1px solid;
    border-radius: 100%;
    border-radius: 24px;
    width: 24px;
    height: 24px;
    display: block;
    background: #3F54BC;
    color: white;
    font-family: 'SuisseInt';
}

.head-list.titre-page .alert-warning {
    background: #FFFFFF;
    font-family: 'SuisseInt';
    box-shadow: none;
    font-style: normal;
    font-weight: 400;
    font-size: 0.7rem;
    line-height: 32px;
    text-align: center;
    border: none;
    color: rgba(47, 48, 53, 0.7);
    margin: 0;
    padding: 0;
}

.alert-warning {
    background: #FFFFFF;
    box-shadow: 0px 4px 24px rgb(0 0 0 / 10%);

    font-family: 'SuisseInt';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 32px;

    text-align: center;
    border: 1px solid #2F3035;
    border-radius: 8px;
    color: #2F3035;
    margin: 15px;
}

.alert-warning a.login-btn-header,
.alert-warning a {
    color: rgba(47, 48, 53, 0.7);
    text-decoration: underline;
}

#container {
    background-color: #f3f3f3;
    margin: 10px;
    border: 1px solid #D0D0D0;
    box-shadow: 0 0 8px #D0D0D0;
}

#product-infos .modal-body {
    text-align: center;
}

.step.mecanismes,
.step.gravures,
.step.collections,
.step.gammes {
    padding-left: 0;
    padding-right: 0;
}

.step {
    padding-left: 60px;
    padding-right: 0;
    padding-top: 6px;
    padding-bottom: 15px;
}

.invisible {
    display: none;
    position: absolute;
}

/*collection*/
.list-collections {
    position: relative;
    overflow: hidden;
}

div.item-col:first-child {
    /* padding-left: 0 !important; */
    /* background-color: red; */
}

.gammes .voir-fiche {}

/* .gammes .voir-fiche::before{
    content: '';
    background-image: url(../images/icons/brochure1.svg);
    width: 20px;
    height: 23px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
} */

.item-col:not(#preview-product) {
    margin-bottom: 45px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.collections .item-col .voir-plus-collec {
    margin-top: 53px;
    display: none;

}

.product-content {
    padding: 45px 48px 52px 48px;
    cursor: pointer;

}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.product-content:hover .voir-plus-collec,
.product-content:hover .detail .voir-detail-bloc {
    display: block;
    -webkit-animation: fadeIn 0.7s;
    animation: fadeIn 0.7s;
}

.product-content.finition-item:hover .voir-format {
    display: flex;
    -webkit-animation: fadeIn 0.7s;
    animation: fadeIn 0.7s;
}

.product-content.finition-item:hover {
    border: 1px solid blue;
    border-radius: 12px;
}

.product-content:hover .title-product-bloc {
    display: none;
}

.list-gammes .product-content,
.list-collections .product-content {
    overflow: hidden;
    height: 528px;
    width: 416px;
    background: #F6F6F6;
    border-radius: 12px;
    position: relative;
}

.check_products_comp .product-content,
#preview-product .fonction-container .product-content {
    /* border: 1px solid #10235a; */
    /* width: 100%; */
    height: max-content;
    background: #fff0;
    padding: unset !important;
    text-align: left;
    box-shadow: unset !important;

}

.fontion-items .product-content {
    padding: 30px !important;

}

span.format-name.SuisseInt {
    color: #10235a;
}

.preview-format.product-content {
    color: #10235a;
}

.finition-items .product-content .image img {
    /* max-width: unset !important; */
    cursor: pointer;
}

.gall-img-div {

    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 8px;
}

.collections .product-content:hover .voir-plus-collec button {
    /* color: #0000ff; */
    /* background-color: #0000ff; */
    /* border-color: #0000ff; */
}

.form-profil .modifier-profil:hover,
.product-content button .info-product:hover,
.product-content .voir-plus-collec .zoom-product:hover,
.product-content .buttons-choice .zoom-product:hover,
.product-content .buttons-choice .voir-fiche:hover,
.product-content .buttons-choice .info-product:hover {
    color: white !important;
    /* background-color: #0000ff !important; */
    /* border-color: #0000ff !important; */
}

.list-collections .item-col h4 {
    color: #10235a;
    text-align: left;
    /* font-size: 1rem; */
    margin-top: 15px;
    /* text-decoration: underline; */
}

.list-collections .item-col h3 {
    color: #72614A;
    text-align: center;
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: bold;
    height: 50px;
}

.collections .list-collections .product-content .image-product {
    /* height: 200px; */
    /* text-align: left; */
    cursor: pointer;
}

.collections .list-collections .product-content .image-product img {
    max-width: 100%;
    max-height: 100%;
}

.item-col .zoom-product {
    border: none;
    background: #f6f6f6;
    cursor: pointer;
}

.gammes .item-col .image .image-gamme {
    cursor: pointer;
}

.gammes .item-col .image {
    padding: 16px 0px;
    position: relative;
    min-height: 250px;
    overflow: hidden;
    position: absolute;
    /* left: 30%; */
    right: -97px;
    bottom: -111px;
    /* top: 30%; */
    z-index: 0;
    transform: rotate(-45deg);
    width: 422.65px;
    height: auto;
    aspect-ratio: 1/1;
}

.gammes .list-gammes .item-col .detail .buttons-choice {
    display: inline-block;
}

#preview-product .gam-container,
#preview-product .finit-container {
    text-align: center;
}

#preview-product {
    text-align: left;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: rgba(47, 48, 53, 0.5);
}

#preview-product .title-product-compo,
#preview-product .title-product-compo span {
    color: #2F3035;
    font-size: 12px;
}

#preview-product .el-title {
    color: #2F303580 !important;
    font-size: 12px;
}

#preview-product .collec-container,
#preview-product .gam-container,
#preview-product .finit-container,
#preview-product .fonction-container {
    display: flex;
    align-items: start;
    justify-content: start;
}

.element-meca {
    /* border-left: 2px solid; */
    gap: 24px;
    justify-content: start;
    align-items: center;
    margin-bottom: 24px;
}

.meca-alignment span.checkmark {
    left: 30px;
}

.voir-gamme {
    /* border: 1px solid;
    padding: 8px 25px;
    border-radius: 100px;
    font-size: 1rem;
    font-family: 'rdExtraLight'; */
}

.voir-detail {
    /* border-radius: 50px;
    background: #fff0;
    color: #72614A;
    border: 1px solid #72614A;
    display: inline-block;
    font-size: 1rem;
    padding: 8px 25px;
    font-family: 'rdExtraLight'; */



}

.detail .mecanisme,
.detail .materiaux {
    margin: 0;
    line-height: 16px;
}

.detail .mecanisme label,
.detail .materiaux label {
    /* font-weight: bold; */
    margin-bottom: 0;
}

/* .gammes .item-col .modal.show{
    display: flex !important;
    align-items: center;
    justify-content: center		
}
.gammes .item-col .modal-content{
    text-align: center;
    display: block;
} */
.coll-form-fonct {
    margin-bottom: 20px;
    display: flex;
}



.coll-form-fonct .item-col {
    float: left;
    max-height: 400px;
    padding: 5px;
    border: 1px solid black;
    border-radius: 2%;
    margin: 5px;
}

.coll-form-fonct .fonction-item p.image {
    position: relative;
}

.coll-form-fonct .fonction-item p.image img.absimg {
    position: absolute;
}

.coll-form-fonct .fonction-item p.image {
    height: 220px;
    margin: 0px;
    display: flex;
    justify-content: center;
}

.coll-form-fonct .fonction-item p.image img {
    bottom: 0px;
}

#subscribe .error {
    font-family: "SuisseInt";
    /* text-transform: uppercase;
    letter-spacing: 1px; */
    /* color: #dc3545;
    opacity: 1;
    font-size: 0.8rem; */
}

#login h2 {
    margin-bottom: 22px;
    font-size: 18px;
}

#login h3 {
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: #2F3035;
}

.home .login-form {
    overflow: hidden;
    padding: 20px 33px;
    background: #ffffff40;
    color: #fff;
    border-radius: 10px;
    margin: 0 auto;
    text-align: center;
}

.home .go-inscription h2 {
    font-size: 1.5rem;
}

.home .go-inscription {
    overflow: hidden;
    padding: 20px 33px;
    background: #ffffff40;
    color: #fff;
    height: 265px;
    position: relative;
    border-radius: 10px;
    margin: 0 auto;
}

.go-inscription p {
    font-size: 1rem;
    line-height: 32px;
}

.go-inscription a {
    position: absolute;
    bottom: 20px;
    background-color: transparent !important;
}


/*************************** Formats **************************/

.coll-form-fonct .item-col,
.coll-form-fonct .finition-item,
.coll-form-fonct .format-item {
    padding: 5px;
}

.list-finitions {
    /* display: flex; */
}

.finitions .finition-item .image {
    position: absolute;
    width: 128px;
    height: 128px;
    left: 50%;
    top: 40%;
    border-radius: 4px;
    transform: translate(-50%, -50%);
}

.finitions .finition-item {
    position: relative;
    border: 1px solid rgba(47, 48, 53, 0.15);
    border-radius: 12px;
    width: 254px;
    height: 336px;
}


.list-finitions .finition-items .detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 14px;

    position: absolute;
    width: 190px;
    height: 62px;
    left: 32px;
    bottom: 29px;

}

.list-finitions .finition-items .voir-format,
.format-items .voir-fonction,
.fonction-items .voirmeca {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 12px;
    position: absolute;
    width: 70px;
    height: 32px;
    left: calc(50% - 70px/2 + 80px);
    top: 12px;

    /* Primary/Primary */

    background: #2F3035;
    border-radius: 8px;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: center;

    /* White/100 */

    color: #FFFFFF !important;


    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
}

.list-finitions .finition-items .voir-format:hover {
    /* background: #0000ff;
    color: white !important; */
}

@media screen and (max-width: 1674px) {
    .gammes .list-gammes .item-col .detail .buttons-choice {
        display: inline-block;
    }

    .voir-detail {
        /* margin: auto; */
        /* margin-top: 10px; */
        /* display: block; */
    }

    .buttons-choice .btn {
        /* margin: auto; */
        margin-right: 5px !important;

        /* display: block; */
    }

    .buttons-choice {
        /* text-align: center; */
        /* margin-right: 5px!important; */
        /* display: block!important; */
    }
}

@media screen and (max-width: 1440px) {
    .header .main-menu {
        /*display:none;*/
    }

    .header .config {
        /*        max-width: 76%;
                flex: 0 0 80%;*/
    }

    .header .recherche {
        /*clear: both;*/
    }

}

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

    .collections .list-collections .item-col h3,
    .gammes .list-gammes .item-col .collec-container h3,
    #preview-product .collec-container h3 {
        /* font-size:19px; */
    }

    .finitions .finition-item .image {
        height: auto;
        /* text-align: center; */
        /* padding: 15px 0; */
    }

    .finitions .finition-item {
        /* height: 290px; */
        /* margin: 0 7px     40px 22px; */
    }

    .list-finitions .finition-items .detail {
        /* padding: 13px; */
        /* font-size: 1.25rem; */
    }

    .mecanisme-element {
        width: 60%;
    }

    .items-container .item h4 {
        height: 40px;
    }

    #connexion .items-container .item {
        height: 356px;
    }
}

.formats .list-formats .format-item,
.list-fonctions .fonction-item {
    border: 1px solid rgba(47, 48, 53, 0.15);
    border-radius: 12px;
    min-height: 300px;
    width: 254px;
    left: 0px;
    top: 0px;
    border-radius: 12px;
    position: relative;
    color: #2F3035;
}

.formats .list-formats .format-item {
    /* color: white */
}

/* .formats .list-formats .format-item {
    height: 336px;
}
.fonction-item {
    min-height: 336px;
} */

/*  */
.wmd-view-topscroll,
.wmd-view {
    overflow-x: scroll;
    overflow-y: hidden;
    width: auto;
    border: none 0px RED;
}

.wmd-view-topscroll {
    height: 9px;
}

.wmd-view {
    height: 200px;
}

.scroll-div1 {
    width: 1000px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.scroll-div2 {
    /* width: 1000px;  */
    /* height:20px; */
}

.fonction-item p.text-left {
    margin-bottom: 40px;
    font-family: 'SuisseInt';
}

.fonction-container .fonction-item p.text-left {
    margin-bottom: 0px !important;
}

.fonction-item a {
    position: absolute;
    left: calc(50% - 50px);
    bottom: 10px;
}

.fonctions .list-fonctions .fonction-item p.image {
    position: relative;
}

.fonctions .list-fonctions .fonction-item p.image img {
    cursor: pointer;
}

/*.fonction-items .image .img-fluid{
    max-height: 246px;
}*/
.image-font-horizontal {
    width: 100%;
    min-height: 46px;
}

.panier_ .image-font-horizontal {
    min-height: auto;
}

.image-font-vertical {
    width: 53%;
}

.fonctions .list-fonctions .fonction-item p.image img.absimg {
    position: absolute;
}

.formats .preview-format {
    border-top: 1px dashed #E2E2E2;
    text-align: center;
    padding: 18px 0;
}

.formats .format-items {
    overflow: hidden;
}

.voir-fonction {
    /* border: 1px solid;
    padding: 8px 25px;
    border-radius: 100px;
    font-size: 1rem;
    font-family: 'rdExtraLight'; */
}

.group-image-preview {
    position: relative;
}

.group-image-preview .rotate-format {
    position: absolute;
    font-size: 1.75rem;
    top: -9px;
}

.coll-form-fonct-mec.EL .meca-step-text,
.coll-form-fonct-mec.ET .meca-step-text,
.coll-form-fonct-mec.SI .meca-step-text {
    display: none;
}

.coll-form-fonct-mec.horizontal-format {
    padding: 55px 0px 0px;
}

.coll-form-fonct-mec.horizontal-format .meca-step-text {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.coll-form-fonct-mec.horizontal-format #line {
    position: absolute;
    border: 2px solid black;
    transform-origin: 0% 50%;
    box-sizing: border-box;
}

#line {
    position: absolute;
    z-index: 10;
    border-bottom: 2px solid black;
    transform-origin: left bottom;
}

/* #line:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 2px solid black;
    border-right: 2px solid black;
    transform: rotate(45deg);
    top: -5px;
    left: 100%;
} */

.group-image-preview img {
    max-width: 90%;
    cursor: pointer;
}

.meca-step-text {
    position: absolute;
    top: 25px;
    color: blue;
}

#preview-product .image {
    text-align: center;
    /* margin-bottom: 15px; */
}

#preview-product .fonction-container .image,
#preview-product .fonction-container .voirmeca {
    visibility: hidden;
    position: absolute;
}

.format-button {
    float: left;
    margin-top: 5px;
    margin-right: 5px;
}

/*************************** Formats **************************/

.finition-items,
.fonction-items {
    justify-content: start;
    gap: 24px;
    position: relative;
}

.fonction-item {
    padding: 29px 32px;
}

.formats .list-formats .format-item div.detail,
.fonctions .list-fonctions .fonction-item div.detail {
    margin-top: 20px;
    text-align: center;
}

/**************Mecanisme***************/
.mecanismes {
    text-align: center;
    height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.mecanisme-items {
    padding-left: 30px;
    padding-top: 0;
    padding-right: 0;
}

.list-mecanismes .mecanisme-items .mecanisme-item {
    display: inline-table;
    padding: 0 14px;
}

.meca-details {
    text-align: left;
}

.info-mecanisme {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(47, 48, 53, 0.3);
    border-radius: 24px;
    flex: none;
    flex-grow: 0;
    background: transparent;

    align-self: end;
    justify-self: self-end;
}

.mecanisme-image {
    position: absolute;
    /* width: 60.48px; */
    /* height: 60px; */
    left: 50%;
    top: 43%;
    /* background: rgba(47, 48, 53, 0.15); */
    border-radius: 4px;
    Transform: translate(-50%, -50%);
    height: 180px;
    width: 180px;
}

.list-formats .format-item {
    cursor: pointer;
}



.tippy-box[data-theme~='modelec'] .tippy-arrow {
    background-color: #3F54BC !important;
    color: #3F54BC !important;
}

.tippy-box[data-theme~='modelec'] {
    background-color: #3F54BC;
    color: white;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;

    flex: none;
    flex-grow: 0;
}

.composition .panel-temp .table-products,
.composition .panel-temp .check_products,
.composition .panel-temp .check_products_comp {
    margin: 0;
    float: left;
    width: 100%;
}

.composition .panel-temp .table-products {
    padding: 0;
    font-family: SuisseInt;


}

.panel-temp .table-products-tr {
    display: flex;
    padding: 0;
    font-size: 0.8rem;
}

.sidebar .panel-temp .table-products-tr {
    display: flex;
    padding: 0 0px;
    font-size: 0.8rem;
}

.composition .panel-temp .table-products-tr .quantity {
    width: 5%
}

.composition .panel-temp .table-products-tr .reference {
    width: 30%;
    text-align: left;
}

.composition .panel-temp .table-products-tr .designation {
    width: 80%;
    text-align: left;
}

.composition .panel-temp .table-products-tr .ean {
    width: 25%
}

.composition .panel-temp .table-products-tr span {
    word-break: break-word;
}

.composition .panel-temp .table-products-tr .prixpub {
    width: 25%;
    text-align: right;
}

.composition .panel-temp .table-products-tr .lieux-piece {
    width: 20%
}

.composition .panel-temp .check_products_comp .fonction-item {
    padding-right: 15px;
    padding-left: 15px;
    max-width: 100%;
}

.panel-temp .check_products_comp .fonction-item p.image {
    margin: 0px;
    /*    width: 100%;*/
}

.composition .panel-temp .check_products_comp .fonction-item p.image img.img-fluid {
    width: 100%;
    height: auto;
    display: none;
}

.panier_ .panel-temp .check_products_comp .fonction-item p.image img.img-fluid {
    width: 100%;
    height: auto;
}

.panel-temp .check_products_comp .fonction-item p.image img.absimg {
    position: absolute;
}

.panel-temp .check_products_comp .fonction-item p.image img {
    bottom: 0px;
}

/*************** bloc en cour de configuration **************/

.slider-color {
    -webkit-appearance: none;
    width: 100%;
    height: 2px;
    border-radius: 5px;
    background: #2D3D6E;
    outline: none;
    /*opacity: 0.7;*/
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider-color:hover {
    opacity: 1;
}

.slider-color::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    /*border-radius: 70%;*/
    background-image: url(../images/icon-left-right.png);

    cursor: pointer;

}

.slider-color::-moz-range-thumb {
    width: 40px;
    height: 40px;
    /*border-radius: 70%;*/

    background-image: url(../images/icon-left-right.png);
    cursor: pointer;

}

.owl-stage-outer {
    overflow-x: hidden !important;
}

.wmd-view-topscroll {
    overflow: hidden !important;
    visibility: hidden;
}

.coll-form-fonct-mec {
    display: block;
    min-height: 110px;
    /* background-color: #FFF; */
    /* border-bottom: 1px dashed #E2E2E2; */
    overflow: hidden;
    position: relative;
    text-align: center !important;

}

.coll-form-fonct-mec .inserer-bloc,
.coll-form-fonct-mec .create-gravure-bloc {
    position: relative;
    margin: 15px auto;
}

.coll-form-fonct-mec .inserer-bloc.vertical,
.coll-form-fonct-mec .create-gravure-bloc {
    /* position: absolute;
    margin: 15px auto;
    top: calc(50% - 35px);
    right: 0; */
}

.coll-form-fonct-mec .inserer-bloc .inserer,
.coll-form-fonct-mec .create-gravure-bloc .gravure,
.update-gravure,
.update-meca-gravure {
    float: none;
    font-family: 'rdLight';
    color: #3F54BC;
    ;
    border-color: 1px solid #3F54BC;
    ;
    /* padding: 7px; */
}

.coll-form-fonct-mec .image {
    margin: 0 auto;
    display: inline-block;
}

.coll-form-fonct-mec div.image .mecanisme-image.absimg {
    position: absolute;
}

.coll-form-fonct-mec div.image .mecanisme-image {
    bottom: 0px;
}

.coll-form-fonct-mec div.image .mecanisme-image .interControllerDeleteFonction {
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    padding: 0px;
    height: 12px;
    background-position: 0px -316px;
    width: 24px;
    height: 12px;
    border: 0;
    background-color: #f3f3f3;
}

.coll-form-fonct-mec div.image .mecanisme-image .interVisuel .BIG {
    min-height: 52px;
}

.mecanisme-element .mecanisme-image .interControllersDeleters {
    display: none;
}

/********************* panier_ ***********************/
.panier_ {
    position: relative;
    padding-bottom: 88px;
    background-color: #d3d3d3;
    /*min-height:600px;*/
}

.panier_ .panel-temp .table-products,
.panier_ .panel-temp .check_products,
.panier_ .panel-temp .check_products_comp {

    margin: 0;
    padding: 0;
    float: none;
}

.panel-cart .panel-temp {
    margin: 0;
    padding-left: 34px;
    padding-right: 0px;
    display: flex;
    flex-direction: column;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}

.panel-cart .panel-temp:first-child {
    border-top: none;
}

.panel-cart .panel-temp:nth-child(even) {
    /* background: #fff; */
}

.panier_ .panel-cart h2 {
    float: left;
    margin-left: 6px;
}

.panier_ .panel-cart .titre-piece {
    height: 30px;
    float: left;
    margin-left: 60px;
}

.panel-carts h2 {
    /* text-align: center; */
}

/*.panier_ .panel-temp .check_products_comp .fonction-item{
        width: 50%;
}*/

.panier_ .composant-header {
    background-color: #dceaf5;
}

.panier .composition-contenu {
    margin-top: 15px;
    font-family: 'rdExtraLight';
    text-align: left;
    padding-left: 29px;

}

img.toggle-produit.opened-produit {
    vertical-align: text-bottom;
}

span.total-all {
    font-family: 'SuisseInt';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    text-align: right;
    color: #FFFFFF;
}

span.total-all-euro {
    font-family: 'SuisseInt';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    text-align: right;
    color: #FFFFFF;
}

.panier .composition-contenu .designation {
    /* margin-left: 36% !important; */
    width: 100%;
    /* font-family: 'Suisse Int\'l'; */
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 20px;
}

.panier_ .table-products-total {
    width: calc(100% - 10px);
    margin: 0 auto;
    padding-bottom: 4px;
}

.panier_ .table-products-total span {
    width: 50%;
}

.panier_ .table-products-total .totalproduct {
    right: 6px;
    font-size: 0.8rem;
    position: absolute;
    width: auto;
}

.panier_ .table-products-total .totalproduct {
    right: 6px;
    font-size: 0.8rem;
    position: absolute;
    width: auto;
}

.panier_ .panel-total {
    border: solid;
    text-align: center;
    margin: 15px auto;
    background: #d3d3d3;
    width: 90%;
    color: #000;
}

.panier_ .delete-product {
    width: 16px;
}

.panier_ .opened-produit,
.panier_ .closed-produit {
    margin-right: 2px;
}

.panier_ .panel-total p {
    margin: 10px 0;
}

.panier .voir-devis .devis {
    background: #fff0;
    color: white;
    border: none;
    cursor: pointer;
}

.total-price {
    font-family: SuisseIntl;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #FFFFFF;
}

.panier .voir-devis {
    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 12px 4px 8px;

    height: 32px;
    left: 48px;
    top: 19px;
    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 8px;
    background: white;
    cursor: pointer;
}

.panier .voir-devis:after {
    content: url('../../assets/images/icons/right-arrow-dark-v4.svg');
    position: relative;
    top: 4px;
    left: 4px;
}

.btn.gravure:after {
    content: url('../../assets/images/icons/right-arrow-dark-v4.svg');
    position: relative;
    top: 4px;
    left: 4px;
}

.btn.gravure:hover:after {
    content: url('../../assets/images/icons/right-arrow-white.svg');
}

button.inserer.btn {
    /* padding: 13px 20px 15px 20px; */
    padding: 9px;
    gap: 24px;
    /* width: 114px; */
    height: 36px;
    background: #2F3035 !important;
    border-radius: 8px;
    font-family: 'SuisseInt';
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    border: none;
    text-align: center;
    color: #FFFFFF !important;
    cursor: pointer;
    min-width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn.gravure:hover {
    background: #3F54BC;
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    color: #FFFFFF;

}

.panier .voir-devis:hover:after {
    content: url('../../assets/images/icons/right-arrow-white.svg');
}


.panier .voir-devis:hover {
    background: #3F54BC;
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    color: #FFFFFF;

}

.panier .ttc-text {

    width: 26px;
    height: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

    color: rgba(255, 255, 255, 0.5);

    background: transparent;
    border: none;
    padding: 0;

    flex: none;
    flex-grow: 0;
}

.panier .voir-devis .devis:hover {
    color: #0000ff;
}

.panier_ .voir-devis .devis {
    margin: 0 12px;
}

form#togravure {
    width: 100%;
}

.panier .ajout-piece button {
    /* width: 104px; */
    height: 24px;
    padding: 0;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    text-decoration-line: underline;

    color: #FFFFFF;

    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: normal;
    gap: 12px;

}

section.finitions.step,
section.fonctions.step,
section.formats.step {
    height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;

    position: relative;
    z-index: 0;

}

.create-gravure-bloc a.btn {
    color: #2F3035;
    background: white;
    width: 100%;
    padding: 9px;
    border: 1px solid white;
    border-radius: 5px;
    font-family: 'SuisseInt';
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    /* line-height: 24px; */
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

a.btn.update-meca-gravure {
    color: white;
    background: #2F3035;
}

.ajout-piece {
    gap: 9px;
}

.panier .buttons-group {
    /* margin-right: 3rem; */
    /* float: left; */
    font-family: 'rdExtraLight';
    /* font-size: 0.8rem; */
    /* padding-left: 91px; */
    width: 100%;
    justify-content: space-between;
    margin-top: 36px;
    padding-left: 48px;
    padding-right: 48px;
}

.voirdevisbuton {}

.panier_ .buttons-group p {
    margin: 10px 5px;
    overflow: hidden;
}

.panier_ .products_comp_number {
    display: block;
    overflow: hidden;
    margin: 0 5px;
    padding-top: 4px;
}

.panier_ .products_comp_number h5 {
    float: left;
    font-size: 1rem;
    line-height: 20px;
    font-weight: bold;
}

.panier_ .products_comp_number .products_number {
    float: right;
    margin-bottom: 0;
}

.panier_ .numberp {
    width: 35px;
}

.panel-temp .image {
    position: relative
}


.panier_ .product-tr span {
    font-size: 11px;
    word-break: break-word;
}

.panier_ .product-tr .reference {
    width: 95px;
}

.panier_ .product-tr .designation {
    width: 150px;
}

.panier_ .infos-ref {
    padding: 0 25px 0px 6px;
    border-right: 1px solid;
}

.panier_ .infos-design {
    padding-right: 78px;
    border-right: 1px solid;
}

.panier_ .panel-content {
    min-height: 30px;
}

.panier_ .panel-header {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    background: #f5f5f5;
    color: #000;
    overflow: hidden;
}

.panier_ .default-panier_ {
    border: none;
}

.panier_ .panel-temp .check_products_comp .fonction-item {
    padding-right: 15px;
    padding-left: 6px;
}

.panier_ .panel-carts {
    margin-top: 40px;
}

.panel-carts {
    padding: 0 48px;
    /* width: 100%;
    height: 120%; */
}

.panier_ .panel-carts h2 {
    height: 40px;
    font-size: 1.75rem;
    margin-bottom: 0;
    line-height: 40px;
}

.panier_ .delete-piece {
    float: right;
    margin: 11px 6px;
    width: 15px;
}

.panier_ .modifier-piece,
.panier_ .deplacer-piece,
.panier_ .opened-piece,
.panier_ .closed-piece {
    float: right;
    margin: 11px 6px;
    width: 15px;
}

.modifier-piece,
.deplacer-piece,
.opened-piece,
.closed-piece {
    cursor: pointer;
}

/******************* POPUP *********************/
.quantite div,
.quantite-gravure div {
    margin-bottom: 20px;
}

.quantite .quantite-produit,
.quantite-gravure .quantite-produit-gravure {
    font-weight: bold;
}

.quantite p,
.quantite-gravure p {
    text-align: center;
}

/******************* Footer *********************/

#connexion footer {
    background: #11223d;
    padding: 5%;
    padding-bottom: 10px;
    position: sticky;
    bottom: 0;
    z-index: 0;
}

.mobile-topbar {
    display: none;
}

/* .mobile-topbar div{
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
} */

.mobile-topbar .mobile-cart .mon-devis-button-mobile {
    margin: 0;
    border-radius: 8px;
    width: 44px;
    padding: 10px;
    height: 44.23px;
    margin: 0;
}

#scroll-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 30px;
    z-index: 1000;
    /* font-size: 18px; */
    border: none;
    outline: none;
    background-color: white;
    color: #11223d;
    cursor: pointer;
    padding: 15px;
    border-radius: 100px;
    box-shadow: 0 0 15px -2px grey;

}

#scroll-to-top:hover {
    background-color: #3F54BC;
    ;
    color: white;
}


footer .row.align-items-center.mb-4 {
    font-family: 'SuisseInt';
    font-size: 1rem;
}

footer.footer_inscription .row.align-items-center.mb-4 {
    font-family: 'SuisseInt';
    font-size: 1.6rem;
}

footer {
    background: #11223d;
    padding: 5%;
    padding-bottom: 10px;
    /* position: sticky; */
    bottom: 0;
    z-index: 0;
}

footer div.row {
    color: #b7afa5;
}

footer.footer_inscription .titre {
    font-size: 2rem;
    font-family: SuisseInt;
}

footer .titre {
    font-size: 1.3rem;
    font-family: SuisseInt;
}

footer .titre-color {
    color: #f0f0f0 !important;
}

footer a {
    color: #f2f2f2 !important;
    font-family: rdLight;
}

p.footer {
    text-align: right;
    font-size: 0.8rem;
    line-height: 32px;
    padding: 0 10px 0 10px;
    margin: 0;
    color: #10235a;
}

.footer-content hr {
    margin-bottom: 0;
    border-top: 1px solid #10235a;
    padding: 3px 0 0 0;
}

.footer-content {
    position: relative;
}

.img-footer {
    position: absolute;
    width: 43px;
    left: 50%;
    top: -9px;
    padding: 0 8px;
    background: white;

}

#footer h3 {
    font-weight: 100;
}

#footer.dark {
    color: #f2f2f2;
    font-weight: lighter;
}

.centered {
    text-align: center;
}

#footer img {
    max-width: 200px !important;
    float: none;
    margin: auto 20px;
}

#footerwrapper {
    padding: 30px 0 0 !important;
    text-align: center;
}

#footer .moduletable {
    line-height: 1.8em;
    margin: 0 0 20px 0;
    min-height: 20px;
}

#footer .moduletable h3 {
    column-span: all;
    margin-bottom: 6px !important;
}

#footer .moduletable ul {
    display: block;
}

#footer .moduletable ul li {
    font-weight: 100;
    list-style-type: none;
    display: block;
    color: #f2f2f2;
    font-size: 1.25rem;
    padding-left: 0;
}

#footer .moduletable ul li a {
    color: #f2f2f2;
    padding: 4px 20px 4px 0;

}

#footer .nav li a:hover {
    background: rgba(191, 191, 191, 0.2);
}


/*************** bloc devis **************/
#main-devis .devis {
    position: relative;
    border: 1px solid #10235a;
    border-radius: 5px;
    background: #fff;
    padding: 30px 0;
    overflow: hidden;
    padding-bottom: 33px;
}

.devis .head-list {
    overflow: hidden;
}

.devis .head-list .more_devis {
    position: absolute;
    right: 0;
}

.devis .head-list .more_devis .magasins {
    float: left;
    padding: 5px 20px !important;
    background: #10235a;
    border: 0;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    text-align: center;
}

.devis .head-list .more_devis .infos {
    float: right;
    padding-left: 17px;
    background: #10235a;
    border: 0;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    text-align: center;
    margin-left: 12px;
}

.row-container {
    margin: 0 auto !important;
    max-width: 85%;
}

.choix-client {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0px;
}

.devis .products-list {}

.devis .products-list .infos-clients {
    padding: 32px;
    overflow: hidden;
    text-align: left;
    /* padding-left: 0; */
    /* padding-top: 0; */
    background: #F6F6F6;
    border-radius: 12px;
}

.devis .products-list .comment-devis {
    /* float: right;
    padding: 20px; */
}

.devis .products-list .infos-clients .infos-line {
    width: 100%;
}

.devis .products-list .infos-clients .infos-line label,
.devis .products-list .destinataire span,
.devis .comment-devis label {
    /* font-weight: 600 !important; */
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */


    /* Primary/Primary 50% */

    color: rgba(47, 48, 53, 0.5);
}

.destinataire-titre {
    /* text-decoration: underline; */
}


#autre_client .group {
    margin-bottom: 10px;
    /* padding: 0 30px; */
}

#autre_client label {
    margin: 0;
    padding-right: 10px;
    display: inline-block;
    vertical-align: bottom;
}

#autre_client input {
    border: none;
    padding: 0 !important;
    border-bottom: 1px solid #000;
}

.devis .products-list .comment-devis .validate-comment {
    float: right;
    margin: 6px 0 0 0;
    background: #10235a;
    border: 0;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    text-align: center;
    padding: 6px;
}

.devis .products-list .infos-devis table {
    margin: 0 auto;

}

/* .infos-devis tr{
    fontfami
} */
.devis .products-list .infos-devis p.image {
    position: relative;
    text-align: center;
    margin: 0 auto;
}

.devis .products-list .infos-devis p.image img.absimg {
    position: absolute;
}

.devis .products-list .infos-devis .image-SI {
    width: calc(100% / 4);
}

.devis .products-list .infos-devis .image-DH {
    width: calc(100% / 2);
}

.devis .products-list .infos-devis .image-TH {
    width: calc(100% / 1.35);
}

.devis .products-list .infos-devis .image-QH {
    width: 100%;
}

.devis .products-list .infos-devis .image-DH {
    width: calc(100% / 2);
}

.devis .products-list .infos-devis .image-QV {
    width: calc(100% / 4);
}

.devis .products-list .infos-devis .image-DV {
    width: calc(100% / 4);
}

.devis .products-list .infos-devis .image-TV {
    width: calc(100% / 4);
}

.devis .products-list .infos-devis .image-EL {
    width: calc(100% / 8);
}

.devis .products-list .infos-devis .image-ET {
    width: calc(100% / 8);
}

.devis .products-list .infos-devis .image-LA,
.devis .products-list .infos-devis .image-LB,
.devis .products-list .infos-devis .image-LC,
.devis .products-list .infos-devis .image-LD,
.devis .products-list .infos-devis .image-LH,
.devis .products-list .infos-devis .image-LI,
.devis .products-list .infos-devis .image-LJ,
.devis .products-list .infos-devis .image-LK,
.devis .products-list .infos-devis .image-LN,
.devis .products-list .infos-devis .image-LO,
.devis .products-list .infos-devis .image-LP,
.devis .products-list .infos-devis .image-LQ {
    width: 40%;
}

.devis .products-list .infos-devis .total-tr {
    background: #00508d3d;
}

.devis .products-list .infos-devis .total-tr .total-title {
    font-size: 1rem;
    text-transform: uppercase;
    text-align: right;
}

.devis .products-list .infos-devis .valider {
    float: right;
    background: #10235a;
    border: 0;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    text-align: center;
    margin-top: 21px;
    margin-right: 15px;
}

.devis .footer-list {
    text-align: center;
    text-align: center;
    justify-content: space-between;
    margin: 0;
}

.devis .footer-list .dropup a {
    /*    background-color: transparent !important;
        color: #16181b !important;
        margin-top: 0 !important;*/
}

/*.devis .footer-list .dropup a:hover{
    background-color: grey !important;
}*/
.sidebar-nav {
    position: fixed;
    width: 300px;
    height: 100%;
    overflow-y: auto;
    background-color: #f5f5f5;
    top: 0;
    right: 0;
    border: 1px solid #10235a;
}

.slider-section {
    background-color: white;
}

#content {
    /* width: calc(100% - 300px); 100% - the (sidebar-nav + secondary) */
    /* border-right: 2px solid #fff; */
}

/*************** bloc devis**************/
/*************** reinitioliser mot de passe**************/

#update-password {
    margin: 0 auto;
}

#update-password .form-div label {
    letter-spacing: 1px;
    font-size: 1.25rem;
    text-transform: uppercase;
    width: 100%;
    display: block;
}

#update-password input {
    margin-bottom: 19px;
    width: 300px;
}

#update-password label.error {
    color: #dc3545;
    opacity: 1;
    font-size: 0.8rem;
}

.well {
    border: 1px solid;
    margin: 76px auto;
    padding: 30px;
    font-size: 2rem;
}

.header .part2 h1 {
    margin: 10px 0 14px 0;
}

.composition-bloc .item-col {
    border: 1px solid #10235a;
    margin-bottom: 0px;
    color: #10235a;
}

.composition-bloc .item-col .image {
    padding: 0;
}

.composition-bloc #preview-image-collec,
.composition-bloc #preview-image-finition {
    max-width: 25%;
    vertical-align: super;
}

#preview-image-finition {
    display: none !important;
}

.composition {
    overflow: hidden;
    display: block;
    color: #2F3035B2;
    border: none;
}

.composition h4 {
    text-align: center;
    margin: 17px 0;
}

.composition .inserer {
    color: #10235A;
    background: #F9F9F9;
    border: 1px solid;
    border-radius: 0;
    margin: 35px 16px;
    left: 24%;
    opacity: 1;
    position: absolute;
    border-radius: 100px;
}

.composition .table-products {
    width: 100%;
}

.composition .table-products-header {
    border-bottom: 1px solid;
    overflow: hidden;
    padding: 00px 0;
    width: 100%;
    margin: 0;
}

.composition .table-products-header span {
    /*width: calc(100% / 3);*/
    float: left;
}

.composition .icon-composition {
    margin-right: 5px;
}

.composition-bloc-v4 hr {
    margin: 2px 0px;
}

.composition .table-products-tr span {
    margin: 2px 0;
}

.chosen:before {
    /* margin-right: 6px; */
    /* content: url(../images/icons/checked.png); */
}

.coll-form-fonct-mec .image {
    position: relative;
}

.container-mecanisme1,
.container-mecanisme2,
.container-mecanisme3,
.container-mecanisme4 {
    position: absolute;
}

.delete-mecanisme1,
.delete-mecanisme2,
.delete-mecanisme3,
.delete-mecanisme4 {
    position: absolute;
}

.panier_::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.panier_::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

.panier_::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

.ui-state-default {
    -webkit-box-shadow: -2px 5px 29px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -2px 5px 29px 0px rgba(0, 0, 0, 0.75);
    box-shadow: -2px 5px 29px 0px rgba(0, 0, 0, 0.75);
}

/*quantity*/
.select-qty {
    padding: 4px 3px 4px 11px;
    width: 60px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    border: none;
    color: #FFFFFF;
    margin-left: 18px;
    position: relative;
}

.quantite-produits::-webkit-inner-spin-button {
    opacity: 1;
}

.quantity-popup,
.quantity-popup-gravure {
    /* margin: 25px; */
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-items: center;
    padding: 56px 58px 0px 58px;
}

.error-location {
    color: red;
}

.panier_ .entete-panier_ h2 {
    font-size: 1.75rem;
}

.panier_ .devis-titre {
    height: 20px;
    border-top: 1px solid #000;
}

.panier_ .devis-titre h3 {
    font-size: 1rem;
    font-family: monospace;
    padding: 0;
    margin: 0;
    text-align: center;
}

.panier_ .default-cart {
    display: none;
}

.panier_ .entete-infos {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    height: 20px;
}

.devis img.img-fluid.absimg.mecanism1.SI1 {
    left: calc(45%);
    top: calc(32%);
}

.creer-piece-label {
    font-size: 12px;
}

.connexion,
.configurateur {
    /* font-size:14px; */
    /* background: #407caa !important; */
    /* border-color: #f8f9fa !important; */

}

.connexion-btn-block img {
    height: 24px;
    margin-left: 8px;
}

.presentation-section {
    font-size: 1.2rem;
    color: #10235a;
    padding-bottom: 9px;
    margin: auto;
    min-height: 100vh;
    padding-top: 15vh;
    /* background-image: url("../../assets/images/section3.svg"); */
    /* background-position: center center !important; */
    background-size: cover !important;
    background-repeat: no-repeat;
    /* background-color: #ffffff; */
    background: transparent;
}

.video-section {
    font-size: 1.2rem;
    color: #2D3D6E;
    padding-bottom: 9px;
    margin: auto;
    min-height: 100vh;
    padding-top: 15vh;
    /* background-image: url("../../assets/images/section3.svg"); */
    /* background-position: center center !important; */
    /* background-size: cover !important; */
    /* background-repeat: no-repeat; */
    background-color: #1D2030;
}


a.carousel-control-next {
    font-family: 'SuisseInt';
}

a.carousel-control-next span {
    font-family: 'SuisseInt';
    position: absolute;
    bottom: 50vh;
}

div.carousel-caption h4 {
    font-style: 2rem !important;
    font-family: SuisseInt;
}

.presentation-section div div {
    font-family: SuisseInt;
}

#inscription .top-menu a {
    font-size: 1.3rem;
}

#inscription {
    position: absolute;
    top: 100px;
    left: 530px;
    width: 610px;
    min-height: 580px;

    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

#inscription h3 {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;

    text-align: center;
    color: #2F3035;

    margin-top: 42px;
    margin-bottom: 7px;
}

#inscription p {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

    text-align: center;
    color: rgba(47, 48, 53, 0.7);

    margin-bottom: 24px;
}

#inscription .nav-link,
#inscription .nav-link.disabled {
    font-family: SuisseInt;

    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    color: rgba(47, 48, 53, 0.5);
    /* border-bottom: 1px solid; */
    border-radius: 0;
    /* box-shadow: 0 4px 2px -2px gray; */
    border-bottom: 1px solid rgba(47, 48, 53, 0.15);
}


/* #inscription .nav-link:before,
#inscription .nav-link.disabled:before{
    background: none;
    border-bottom: 1px solid #fff;
    content: "";
} */


#inscription .nav-pills {
    width: 100%;
    margin-bottom: 41px;
}

#inscription .nav-pills .nav-item {
    flex-grow: 1;
    flex-basis: 0;
}

#inscription .nav-link.active,
.nav-link.active.show {
    font-family: SuisseInt;

    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;

    color: #3F54BC;
    background: white;
    border-bottom: 2px solid;
    border-radius: 0;

}

#inscription .inscription-form-wrapper {
    width: 532px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
}

#inscription .civility-form-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 30px;
}

#inscriptiopn form {
    font-family: SuisseInt;
    font-style: normal;
    /* font-weight: 400; */
    /* font-size: 14px; */
    line-height: 24px;
}

#inscription .civility-form-block label.civility-block-label {
    margin-right: 32px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}

#inscription input[type="checkbox"] {
    -webkit-appearance: none;
    margin: 0;
    appearance: none;
    background-color: #fff;
    /* font: inherit; */
    /* color: currentColor; */
    width: 16px;
    height: 16px;
    border: 1px solid rgba(47, 48, 53, 0.7);

    margin-top: 3px
        /* border-radius: 0.15em; */
        /* transform: translateY(-0.075em); */

}

#inscription .form-controll {
    display: block;
    width: 100%;
    border: 1px solid #2F3035;
    border-radius: 8px;
    height: 52px;
    padding: 14px 20px;
}

.requrired-star {
    color: rgba(63, 84, 188, 1);
}

.form-controll-effect-press {
    position: absolute;
    top: -24px;
    left: 0;
    color: rgba(47, 48, 53, 0.7);
    font-weight: 450;
    font-size: 10px;
    line-height: 24px;
}

#inscription .form-controll::placeholder {
    /* display: block;
    width: 100%;
    border: 1px solid #2F3035;
    border-radius: 8px;
    height: 52px;
    padding: 14px 20px; */
    color: #2F3035;
    ;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    font-family: SuisseInt;

}

#inscription select.form-controll {
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    appearance: none;
    background-color: white;
    background: url(../images/home/ArrowSmallDownSelect.png);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-position-x: 96%;
    background-position-y: 45%;
}

#inscription .civility-block-female,
.civility-block-male {
    margin-right: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#inscription .civility-form-block label {
    /* margin-right: 40px;
    display: flex;
    align-items: center;
    justify-content: center; */
    display: block;
    margin-bottom: 0;
    gap: 8px;
    margin-top: 1px;
}

/* .checkmark-civ {
    position: absolute;
    top: 6px;
    left: 0;
    height: 13px;
    width: 13px;
    
        
    border-radius:50%;
    background-color:#fff; 
    border:solid #000000; 
    border-width:.2em; 
}

#inscription .civility-form-block input[type="radio"]:checked + .checkmark-civ {
    background-color:#000000; 
} */

#select-arrow-icon {
    height: 24px;
    position: absolute;
    top: 13px;
    right: 10px;
}

#pills-tabContent {
    width: 100%;
}

.dd-flex {
    display: flex;
}

#account .dd-flex,
#about .dd-flex {
    gap: 15px;
}

#about .dd-flex-2,
#address .dd-flex {
    display: flex;
    gap: 18px;
}

.mab-14 {
    margin-bottom: 14px;
}

.mab-18 {
    margin-bottom: 18px;
}

.mab-24 {
    margin-bottom: 24px;
}

.mab-40 {
    margin-bottom: 40px;
}

/* #inscription .civility-form-block label{
    margin-right: 32px;
} */
.radio-civ-female label,
.radio-civ-male label {
    margin-right: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.radio-promo-no label,
.radio-promo-yes label,
.radio-tarif-yes label,
.radio-tarif-no label,
.radio-newsl-yes label,
.radio-newsl-no label {
    /* margin-right: 40px; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.radio-promo-yes,
.radio-tarif-yes,
.radio-newsl-yes {
    margin-right: 32px;
}

.radio-civ-female label::before,
.radio-civ-male label::before {
    content: '';
    display: block;
    border: 1px solid rgba(47, 48, 53, 0.7);
    border-radius: 50%;
    height: 16px;
    width: 16px;
    transition: all 100ms linear;
}

.radio-promo-no label::before,
.radio-promo-yes label::before,
.radio-tarif-yes label::before,
.radio-tarif-no label::before,
.radio-newsl-yes label::before,
.radio-newsl-no label::before {
    content: '';
    display: block;
    border: 1px solid rgba(47, 48, 53, 0.7);
    border-radius: 50%;
    height: 16px;
    width: 16px;
    transition: all 100ms linear;
}

.condition-accept-1 input:checked,
.condition-accept-2 input:checked {
    background-color: white;
    background: url(../images/home/Square.png);
    background-size: 8px 8px;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 100ms linear;
}

.radio-civ-female input:checked+label::before,
.radio-civ-male input:checked+label::before {
    background-color: white;
    background: url(../images/home/dot.png);
    background-size: 8px 8px;
    background-position: center;
    background-repeat: no-repeat;
}

.radio-promo-no input:checked+label::before,
.radio-promo-yes input:checked+label::before,
.radio-newsl-no input:checked+label::before,
.radio-newsl-yes input:checked+label::before,
.radio-tarif-no input:checked+label::before,
.radio-tarif-yes input:checked+label::before {
    background-color: white;
    background: url(../images/home/dot.png);
    background-size: 8px 8px;
    background-position: center;
    background-repeat: no-repeat;
}

#popup-pwd-show-1,
#popup-pwd-show-2 {
    height: 24px;
    position: absolute;
    top: 14px;
    right: 20px;
}

.navigation-tab-footer {
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 50px;
}

.btnNext {
    all: unset;
    cursor: pointer;
    background: #2F3035;
    color: #fff;
    /* margin-left: 32px; */
    width: 117px;
    height: 52px;
    font-family: 'SuisseInt';
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btnNext img {
    height: 24px;
}

.btnPrevious {
    all: unset;
    cursor: pointer;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;

    text-align: center;
    text-decoration-line: underline;

    color: rgba(47, 48, 53, 0.7);

}

.validate-account-btn {
    all: unset;
    cursor: pointer;
    background: #2F3035;
    color: #fff;
    margin-left: 32px;
    width: 117px;
    height: 52px;
    font-family: 'SuisseInt';
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.validate-account-btn img {
    height: 24px;
}

#radio-btns-step3 {
    margin-left: 100px;
}

#radio-btns-step3 .d1-step3 {
    display: flex;
}

#radio-btns-step3 .d1-step3 label,
#radio-btns-step3 .d2-step3 label,
#radio-btns-step3 .d2-step3 label {
    margin-bottom: 0;
}

#radio-btns-step3 .d1-step3 .label-d1-step3 {
    margin-right: 59px;
    /* margin-bottom: 0; */
}

#radio-btns-step3 .d2-step3 .label-d2-step3 {
    margin-right: 100px;

}

#radio-btns-step3 .d3-step3 .label-d3-step3 {
    margin-right: 59px;

}

#radio-btns-step3 .d2-step3 {
    display: flex;
}

#radio-btns-step3 .d3-step3 {
    display: flex;
}

.spam-block {
    margin-top: 26px;
    margin-bottom: 16px;
    margin-left: 109px;
}

.spam-block label {
    padding-bottom: 18px;
}

#address label {
    margin-bottom: 0;
}

#address a {
    color: rgba(63, 84, 188, 1);
}

#address {
    font-family: 'SuisseInt';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}

.quote-sent-success-bloc .btns-bloc a,
.item.backto-configurator a.edit-devis,
.dropup .btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13px 16px 15px 20px;
    height: 52px;
    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13px 16px 15px 20px;
    gap: 12px;

    height: 52px;

    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 8px;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: center;

    /* Primary/Primary */

    color: #2F3035;
    background: white;
}


.select-nouv-dist-pref,
#update-password input[type=submit],
.forgotpasssubmit,
.connexionsubmit,
.form-profil .modifier-profil,
.swal2-popup .swal2-styled.swal2-confirm,
.contact-form .contact-submit .btn,
.voirmeca,
.inscrire,
.valider,
.valider-gravure,
.btn-envoyer-devis,
.espace-admin .info-item a,
.admin-item a.btn,
.backto-configurator a:not(.edit-devis),
.comment-devis .commande-devis,
.deplacer-produit,
.move-piece,
.swal2-popup .swal2-styled.swal2-confirm,
.creer,
.insert-el,
.contact_submit,
.devis_submit,
.voir-detail,
.voir-gamme,
.voir-fonction .create-gravure-bloc a,
.change-pswd-btn,
a.commande-devis,
button.inserer.btn {
    padding: 13px 20px 15px 20px;
    gap: 24px;

    /* width: 114px; */
    height: 52px;

    /* Primary/Primary */
    background: #2F3035 !important;
    border-radius: 8px;

    font-family: 'SuisseInt';
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */
    border: none;
    text-align: center;

    /* White/100 */

    color: #FFFFFF !important;
    cursor: pointer;
    min-width: fit-content;
}


.select-nouv-dist-pref:hover,
#update-password input[type=submit]:hover,
.forgotpasssubmit:hover,
.connexionsubmit:hover,
.contact-form .contact-submit .btn :hover,
.voirmeca:hover,
.inscrire:hover,
.valider:hover,
.insert-el:hover,
.valider-gravure:hover,
.contact_submit:hover,
.devis_submit:hover,
.voir-detail:hover,
.voir-gamme:hover,
.voir-format:hover,
.creer:hover,
.voir-fonction:hover,
button.apply:hover,
button.inserer.btn:hover {
    background: #3F54BC !important;
    color: white !important;
}

.edit-devis {}

.dropup .dropdown-toggle::after {
    display: none;
}

.devis .footer-list .dropdown-item {
    border: none !important;
    background: none !important;
    color: #72614A !important;
    font-family: SuisseInt;
}

#preview-image-collec {
    display: none !important;
}

.devis .footer-list .dropdown-item:hover {
    border: none !important;
    background: none !important;
    color: #72614A !important;
}

.creer-piece {
    background: #fff0;
    color: white;
    border: none;
}

.creer-piece:hover {
    background: #fff0;
    color: #0000ff;
    border: none;
}

.forgot-password {
    color: #3F54BC !important;
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 20px;
    text-align: right;

    margin-top: 4px;
    margin-bottom: 21px;

}

/* #subscribe .form-div {
    padding-bottom: 10px;
}

#subscribe .radio-label {
    margin: 15px;
}

#subscribe .radio-label input {
    margin-right: 8px;
} */


.error {
    color: #EA1717;
    border-color: #EA1717;
}

.form-profil,
.contact-form {

    padding: 132px 0;
}

.profil-blocs {
    border: 1px solid rgba(47, 48, 53, 0.15);
    border-radius: 12px;
    margin-bottom: 44px;
    margin-top: 70px;
}

.profil-blocs .row {
    padding: 37px 70px;
    justify-content: center;
}

.form-profil form {
    padding: 145px 0px;
    overflow: hidden;
}

.form-profil .choix label {
    display: block;
}

.form-profil .h4 {
    background: #F6F6F6;
    height: 72px;
    border-radius: 12px 12px 0px 0px;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3F54BC;
}

.form-profil .h4 span {
    height: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #3F54BC;
    min-width: 200px;
    justify-content: center;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
}

.form-profil .profile-title {
    /* 1440/Title/H3 */

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    /* identical to box height, or 125% */


    /* Primary/Primary */

    color: #2F3035;

}

.form-profil h3 {}

.form-profil hr {}

.form-profil .form-personal-hr {}

.form-profil .modifier-profil {}

.form-profil .modifier-profil:hover {}

.form-profil .bloc-distributor .form-group {
    text-align: left;
}

.form-profil .bloc-distributor .form-group label {
    padding-right: 5px;
    font-weight: bold;
}

.form-profil .bloc-distributor fieldset {
    border: 1px solid #1D2030;
    border-radius: 1rem;
    margin: 30px auto;
    color: #72614A;
    position: relative;
    padding: 20px;
}

.form-profil .bloc-distributor fieldset legend {
    width: inherit;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    padding: 0 5px;
    border-radius: 50px !important;
    background: #1D2030 !important;
    color: white !important;
    border: 1px solid #1D2030 !important;
    display: inline-block;
    font-size: 1rem;
    padding: 8px 25px;
    font-family: 'rdExtraLight'
}

.form-profil .bloc-distributor fieldset legend a {
    color: white;
}

/*style for meca*/
.preview_product_parent {
    position: fixed;
    /* Sit on top of the page content */
    display: none;
    /* Hidden by default */
    width: 100%;
    /* Full width (cover the whole page) */
    height: 100%;
    /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 255, 0.7);
    /* Black background with opacity */
    z-index: 2;
    /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer;
    /* Add a pointer on hover */
}

.preview_product {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

.mecanismes-step .image .TV1 {
    left: calc(21%);
    top: calc(9%);
}

.liste-devis {
    margin: 50px auto !important;
    margin-top: 10px !important;
}

.page-item.active .page-link {
    background-color: #10235a;
    border-color: #10235a;
}

.page-link {
    color: #10235a;
}

.deconnexion {
    overflow: hidden;
    float: right;
}

.nv-devis {
    float: right;
    /*margin-right: 13px;*/
}

.new_devis {
    /* color: white; */
    /* background: #00508d; */
    /* padding: 5px 10px; */
    /* border-radius: 5px; */
    /* text-transform: uppercase; */
    /* font-weight: 600; */
    /* text-decoration: none !important; */
    /* border: 2px solid; */
    /* margin-right: 15px; */
}

.new_devis:hover {
    color: #fff;
}


.quantity-popup label,
.quantity-popup-gravure label {
    /* width: max-content !important; */
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 32px;
    /* identical to box height, or 133% */

    text-align: center;

    /* Primary/Primary */

    color: #2F3035;
    margin-bottom: 37px;

}
.btn-blue-admin{
    color: #fff;
    background-color: #3F54BC !important;
}
.btn-blue {
    color: #fff;
    background-color: #00508C;
}

.btn-yellow {
    color: #fff;
    background-color: #ffd147;
}

.btn-red {
    color: #fff;
    background-color: #eb3333;
}

.mecanisme-number {
    font-family: 'SuisseInt';
    text-align: center;
}

.mecanisme-element .container-mecanisme {
    margin-right: unset !important;
}

/*************** fonctions **************/
.fonctions .list-fonctions {
    /* overflow-y:auto;
    height:1165px; */
    /* padding-left: 60px; */
}

.list-fonctions::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.list-fonctions::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

.list-fonctions::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: #10235a;
}

.new-panier::-webkit-scrollbar-thumb {
    /* border-radius: 10px; */
    background: #968978 !important;
}


.container_steps {
    width: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
}

.progressbar li,
.progressbar2 li {
    float: left;
    width: 16%;
    position: relative;
    text-align: center;
    list-style-type: none;
}

.progressbar li span {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
}


.progressbar2 li:before {
    content: "";
    width: 15px;
    height: 15px;
    /* border: 2px solid #fa0000; */
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    line-height: 27px;
    /* background: #10235a; */
    color: #10235a;
    text-align: center;
    font-weight: bold;
    position: relative;
    top: 0px;
}

.progressbar li:before {
    content: "";
    width: 15px;
    height: 15px;
    border: 2px solid #10235a;
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    line-height: 27px;
    background: #10235a;
    color: #10235a;
    text-align: center;
    font-weight: bold;
    position: relative;
    top: 8.5px;
}

.progressbar {
    counter-reset: step;
}

.progressbar li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #10235a;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progressbar li:first-child:after {
    content: none;
}

.progressbar li.active+li:after {
    background: #3aac5d;
}

.progressbar li.active+li:before {
    border-color: #3aac5d;
    background: #3aac5d;
    color: white
}

/*************** format carousel **************/
#format-carousel .owl-stage-outer {
    padding: 0 14px;
}

#format-carousel .owl-prev {
    position: absolute;
    top: 48px;
    font-size: 57px;
    left: -3px;
}

#format-carousel .owl-next {
    position: absolute;
    top: 48px;
    font-size: 57px;
    right: -3px;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    color: #000;
}

.see-more {
    right: 0;
}

.col-md-3.element-meca {
    display: inline-table;
    padding: 0 14px;
}

.see-more:disabled,
.see-more[disabled] {
    opacity: 1;
}

.current {
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.2); */
    background: #FFFFFF26;

}

.vide {
    border: 3px solid #10235a;
    padding: 25px;
    text-align: center;
    margin: 40PX AUTO;
}

.owl-carousel .owl-item img {
    width: auto;
}

.owl-carousel .owl-item img.img-overlay {
    cursor: pointer;
}

.panier_ .panel-temp .check_products_comp {
    width: 100%;
}

.panel-temp .check_products_comp .SI .image {
    width: calc(100% / 4);
}

.panel-temp .check_products_comp .DH .image {
    width: calc(100% / 2);
}

.panel-temp .check_products_comp .TH .image {
    width: calc(100% / 1.35);
}

.panel-temp .check_products_comp .QH .image {
    width: 100%;
}

.panel-temp .check_products_comp .DH .image {
    width: calc(100% / 2);
}

.panel-temp .check_products_comp .QV .image {
    width: calc(100% / 4);
}

.panel-temp .check_products_comp .DV .image {
    width: calc(100% / 4);
}

.panel-temp .check_products_comp .TV .image {
    width: calc(100% / 4);
}

.panel-temp .check_products_comp .EL .image {
    width: calc(100% / 8);
}

.panel-temp .check_products_comp .ET .image {
    width: calc(100% / 8);
}

.panel-temp .check_products_comp .LA .image,
.panel-temp .check_products_comp .LB .image,
.panel-temp .check_products_comp .LC .image,
.panel-temp .check_products_comp .LD .image,
.panel-temp .check_products_comp .LH .image,
.panel-temp .check_products_comp .LI .image,
.panel-temp .check_products_comp .LJ .image,
.panel-temp .check_products_comp .LK .image,
.panel-temp .check_products_comp .LN .image,
.panel-temp .check_products_comp .LO .image,
.panel-temp .check_products_comp .LP .image,
.panel-temp .check_products_comp .LQ .image {
    width: 40%;
}

.composition-bloc .composition .panel-temp .fonction-item {
    max-width: 290px;
}

/*********mecanismes*********/

.mecanismes .mecanisme-items .mecanisme-element.selected-meca {
    border: 1px solid blue;
    border-radius: 12px;
}

.mecanismes .mecanisme-items .mecanisme-element:hover {
    border: 1px solid blue;
    border-radius: 12px;
}

.mecanisme-items::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.mecanisme-items::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

.mecanisme-items::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

.mecanismes .mecanisme-items .mecanisme-element {
    padding: 12px;
    width: 254px;
    height: 330px;
    border: 1px solid rgba(47, 48, 53, 0.15);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
}

.mecanismes .mecanisme-items .mecanisme-element:hover {
    /* box-shadow: 0px 0 10px 4px lightgrey; */
}

.icon-devis {
    padding-right: 7px;
}

#connexion .authentification {
    margin: 0 auto;
}

#connexion .presentation-auth {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
    font-size: 1.25rem;
}

#connexion .presentation-auth p {
    width: 100%;
    /* font-size: 2.25rem; */
    line-height: 24px;
}

#connexion .presentation-auth ul {
    overflow: hidden;
    margin: 0 auto;
    width: 60%;
    /* font-size: 2rem; */
    line-height: 24px;
    padding: 0;
}

#connexion .presentation-auth ul li {
    float: left;
    padding: 8px;
    list-style: none;
    text-align: left;
}

#connexion .presentation-auth ul li.first-desc {
    width: 55%;
}

#connexion .presentation-auth ul li.sec-desc {
    width: 45%;
}

.login-form .auth-form-title {
    font-size: 19px;
}

#connexion .presentation-auth img {
    width: 25px;
    height: auto;
    margin-right: 10px;
}

#auth {
    margin-top: 51px;
}

.boxshadow {
    /*box-shadow: 1px 1px 1px 1px silver;*/
}

.height-DH {
    /* min-height:80px; */
}

.height-SI {
    /* min-height:40px; */
}

#map-magasins .geolocMe {
    margin-bottom: 5px;
    width: 50%;
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 1px;
    background: #10235a;
}

.carousel-caption p.cap {
    font-size: 1.7rem;
}

.sidebar-nav .fb-top-menu,
.sidebar-nav .insta-top-menu {
    display: none;
    width: 30px !important;
    background: white;
    font-size: 1.2rem;
    color: #1D2030 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;

}

@media screen and (max-width: 991px) {
    .distance-text {

        position: initial;
    }
}

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

    #map-magasins .geolocMag {
        display: none;
    }

    #map-magasins .filters-parent .geolocMagPlus.active {
        display: block;
    }

    /*.infos .geolocMagPlus.active{
        display: none;
    }*/
    #map-magasins .geolocMagPlus a {
        padding-left: 0px;
    }

    .top-menu {
        height: 90px;
    }

    .part1 .main-menu img {
        /* width: 50% !important; */
    }

    #mapid {
        margin-top: 10px;
    }

    .container_steps {
        display: none;
    }

    .insta-top-menu {
        display: none;
    }

    .fb-top-menu {
        display: none;
    }

    .dropdownLangsButton-menu {
        right: 16px !important;
    }

    .dropdownLangsButton-menu a {
        padding: 0px !important;
    }

    .carousel-caption {
        left: 0 !important;
        right: 0 !important;
        text-align: center !important;
        top: 287px !important;
    }

    .carousel-control-next {
        top: 207px !important;
        left: 76vw !important;
    }

    #carouselExampleControls {
        min-height: 80vh !important;
    }

    #carouselExampleControls h4 {
        margin-bottom: 8vh !important;
    }

    .carousel-item img {
        width: 30% !important;
    }



}

@media screen and (max-width: 643px) {
    .filters-parent .geolocMagPlus.active {
        display: none;
    }

    #map-magasins .infos .geolocMagPlus.active {
        display: block;
    }
}

#map-magasins .address-container {
    border: 2px solid;
    margin-bottom: 10px;
    min-height: 100px;
    padding: 10px;
}

#map-magasins .address-container h4 {
    font-size: 1rem;
    font-weight: bold;
    color: #10235a;
}

#map-magasins .infos {
    max-height: 430px;
    overflow-y: auto;
}

.black {
    color: #4F5155 !important;
}

.blue {
    color: #10235a !important;
}

.swal2-popup #swal2-content {
    text-align: center;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: center;

    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);
}

.swal2-popup .swal2-header .swal2-title,
.modal-title {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* 1440/Title/H5 */

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    /* identical to box height, or 133% */

    text-align: center;

    /* Primary/Primary */

    color: #2F3035;

}

.swal2-popup.swal2-modal.swal2-show {
    background: #F3F4F7;
    padding: 58px;
    text-align: left;
    width: 416px;

    /* White/100 */

    background: #FFFFFF;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}


/* style page admin */
.espace-admin {
    border: 1px solid #1D2030;
    margin-top: 20vh !important;
    margin-bottom: 50vh !important;
    margin: auto;
    padding: 40px 20px;
    border-radius: 10px;

}

.espace-admin .title {
    margin: 20px;
    text-align: center;
    text-transform: uppercase;
    /* font-size: 2.25rem; */
    color: #1D2030;
}

.espace-admin .main-contenu {
    margin: 20px 0;
}

.main-title {
    float: left;
    text-align: center;
}

.espace-admin .info-item {
    display: inline-table;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.bloc-welcome-home {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
}

.bloc-welcome-home .item {
    color: #3F54BC;
    font-size: 24px;
    width: 100%;
}

.espace-admin .info-item a {
    display: table-cell;
    vertical-align: middle;
    text-decoration: none;
}

.espace-admin .info-item a:hover {
    font-size: 1.25rem;
    background: #0000ff !important;
    color: white !important;
    font-size: 1rem;
}

.alert-admin {
    background: #75b283;
    overflow: hidden;
    height: 40px;
}

.alert-admin .close-admin {
    color: #fff !important;
    cursor: pointer;
    background: #75b283;
    padding: 5px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none !important;
    border: 2px solid;
    margin-top: 2px;
    margin: 2px 15px;
    float: left;
}

.alert-admin .info {
    float: right;
    margin: 9px 15px;
    color: white;
    font-weight: 500;
    font-size: 1.25rem;
}

.admin-item a.btn {
    display: table-cell;
    vertical-align: middle;
    text-decoration: none;
}

.admin-item a.btn:hover {
    background: #3F54BC !important;
    color: white !important;
}

.admin-btn {
    /* color: white !important;
    cursor:pointer;
    background: #10235a;
    padding: 5px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none !important; */
    /* border: 2px solid; */

}

.nav-stick-scroll {
    position: sticky;
    top: 0;
    z-index: 1;
}

#table-devis .dropdown,
#main-devis .dropup {
    display: flex;
    gap: 12px;
}

#main-devis .dropdown-menu.show {
    padding: 10px 5px
}


#commande-modal .modal-body {
    padding: 50px;
}

.espace-admin .submit_satat,
.espace-admin .submit_satats_distributors,
.espace-admin .submit_users_satat {
    /* margin-top: 26px;
    padding: 10px; */
    background: #3F54BC;
    ;
    color: white;
}

.main-container-stat .exporter-statistique {
    margin-right: 28px;
    float: right;
}

.contact-form {
    border: 1px solid #2F3035;
    border-radius: 6px;
    padding: 10px 0;
    margin-bottom: 20px;
    position: relative;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: center;

    /* Primary/Primary */

    color: #2F3035;
}

.contact-form .contact-title-group {
    padding: 15px 15px 15px 15px;
    position: relative;
    border-radius: 3px 3px 0 0;
}

.contact-form .contact-title-group .contact-title {
    font-weight: 300;
    margin: 0;
    margin-bottom: 10px;
}

.contact-form .contact-title-group .contact-description {
    font-size: 1rem;
    font-weight: 400;
    /* color: #72614A; */
    margin-bottom: 0px;
}

.contact-form .message {
    padding: 15px 50px;
}

.contact-form label {
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-form .contact-submit {
    float: right;
}

.contact-form .contact-submit .btn {
    /* background-color: #fff0;
    border-radius: 100px;
    border:1px solid #72614A;
    color: #72614A;*/
}

.contact-form .contact-submit .btn:hover {
    background-color: #0000ff;
    /* border:1px solid #72614A; */
    color: white;

}

#content-form .footer {
    color: #fff !important;
}

main {
    /* z-index: 100; */
    position: relative;
    /* background: #F3F4F7; */
    /* margin-top: 100px; */
}



.corona {
    overflow: hidden;
    padding: 20px 33px;
    background: #ffffff40;
    color: #fff;
    font-size: 1.5rem;
    line-height: 28px;
    text-align: center;
    position: relative;
    border-radius: 10px;
    margin: 0 auto 30px;
}

.corona a,
.corona a:hover {
    color: #fff !important;
    text-decoration: none;
}

/* deop down langs */
.dropdown {
    position: relative;
    display: flex;
    padding-right: 0;
    flex-direction: column;
    gap: 5px;
}

.sidebar-nav__menu .new-quote {
    width: 100%;
    justify-content: space-between;
}

.sidebar-nav__menu .login-btn-header {
    justify-content: center;
    display: flex;
}

.dropdown-content-notification {
    display: block;
    width: 200px;
    text-align: left;
    padding: 10px;
    right: 0;
    top: 50px;
    left: unset !important;
}

.dropdown-content,
.dropdown-content-notification {
    display: none;
    position: absolute;
    background-color: white;
    /* min-width: 160px; */
    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
    z-index: 1000;
    left: 0;
    box-shadow: 10px 5px 5px #d8d8d9;
}

.dropdown-content a,
.new_devis,
.nav_links a {
    color: #72614A !important;
    padding: 4px 2px;
    text-decoration: none;
    display: block;
    font-size: 0.7rem;
}

.nav_links a {
    padding: 4px 2px;
    text-decoration: none;
    display: block;
    font-size: 1rem;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;

    text-align: center;

    color: #2F3035 !important;
}

#inscription .dropdown-content a {

    font-size: 1rem;
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
    width: 200px;
    text-align: left;
    padding: 10px;

}

.dropdown:hover .dropbtn {
    /* background-color: #3e8e41; */
}

.img-icon {
    width: 30px;
    height: 30px;
}

body .button {
    width: 550px;
    height: 60px;
    /* position: relative; */
    background: #F3F4F7;
    margin-bottom: 25px;
    border-radius: 100px;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    /* box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8), 6px 6px 10px rgba(0, 0, 0, 0.2); */
    color: #72614a;
}

body .button span {
    line-height: 45pt;
    font-family: "Montserrat", sans-serif;
    /* font-size: 2rem; */
    font-weight: semibold;
}



body .button:hover {
    opacity: 1;
    /* box-shadow: -6px -6px 10px #FFFFFF, 6px 6px 10px rgba(0, 0, 0, 0.2); */
    background-color: #FFFFFF;
}

.btn2 {
    width: 19rem !important;
    position: absolute;
    float: right;
    right: 0pc;
}

.btn1 {
    text-align: left !important;
    padding-left: 5rem;
}

.config-link {
    color: #998675;
    /* text-transform: uppercase; */
    text-decoration: none;
    /* letter-spacing: 0.15em; */
    display: inline-block;
    padding: 15px 20px;
    position: relative;
    font-size: 1.5rem;
}

.config-link>a:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #998675;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
    color: #72614A;
}

.config-link>a:hover:after {
    width: 100%;
    left: 0;
    color: #72614A;

}

.color-base {
    color: #72614A;
}

.margin-top-p {
    margin-top: 25vh;
}




/* Arrow & Hover Animation */
#more-arrows {
    width: 75px;
    height: 65px;
}

#more-arrows:hover polygon {
    fill: #3F54BC;
    ;
    transition: all 0.2s ease-out;
}

#more-arrows:hover polygon.arrow-bottom {
    transform: translateY(-18px);
}

#more-arrows:hover polygon.arrow-top {
    transform: translateY(18px);
}

polygon {
    fill: #72614A;
    transition: all 0.2s ease-out;
}

polygon.arrow-middle {
    opacity: 0.75;
}

polygon.arrow-top {
    opacity: 0.5;
}

.mt-15vh {
    margin-top: 15vh;
}

#search-form {
    display: none;
}

#connect-form {
    display: none;
}

.iconscontainer {
    position: relative;
    /* margin: 0 5em; */
    display: flex;
    align-items: center;
    height: 100%;
}

.iconscontainer span {
    position: absolute;
    top: 60%;
    left: 0;
    margin-top: 10px;
    padding: 0.55rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    color: #0000FF;
    border-radius: 50px;
    background-color: transparent;
    /* box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); */
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    /* left: 95px; */
}

.iconscontainer:hover span {
    top: 100%;
    opacity: 0.9;
}

.login {
    /* margin: auto;
    margin-bottom: 55px; */
    position: absolute;
    /* top: 159px; */
    top: 17%;
    left: 580px;
    width: 416px;
    height: 521px;
    background: #fff;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 56px 58px 42px 58px;
}



#search-form-mobil-nav {
    width: 100%;
    display: flex;
    flex-direction: row;
}

#search-icon-mobil-nav {
    position: absolute;
    right: 10px;
    bottom: 9px;
    color: #0000ff;
}

.recherche-mot-mobile {
    /* width: 25vh; */
    /* float: left; */
    border: 1px solid #0000ff;
    border-radius: 30px;
    /* height: 4vh; */
}

.new-btn {
    background-color: white;
    color: #72614A;
    border: none;
    width: -moz-available;
    border-radius: 30px;
}

.new-btn:hover {
    opacity: 1;
    /* box-shadow: -6px -6px 10px #FFFFFF, 6px 6px 10px rgba(0, 0, 0, 0.2); */
    background-color: #FFFFFF;
}

.new-btn:active {
    opacity: 1;
    /* box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5), inset 8px 8px 16px rgba(0, 0, 0, 0.1); */
    color: #998675;
}

.banner_ {
    display: none;
}


.arrow-panier-mobile {
    display: none !important;
}

#navbar .mon-devis-button-mobile {
    display: none;
}

#myTab {
    display: none !important;
}

.composition-toggle-mobile {
    display: none;
}

.composition .table-products-header {
    /* background: white; */
    /* color: #1D2030; */
    /* margin:0; */
    /* width:unset; */
    /* border-top: 1px solid white; */
}

#preview-product {
    border: none;

    min-width: 300px;


    background: #F6F6F6;
    border-radius: 12px;
}

.mecanisme-element:not(.selected-meca) .selected-meca-icon {
    display: none;
}

.selected-meca-icon {
    position: absolute;
    left: 85.83%;
    right: 4.72%;
    top: 4.76%;
    bottom: 85.71%;

    /* Primary/Primary */

    background: #2F3035;
    color: white;
    border-radius: 24px;
}

.meca-details {

    display: grid;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 14px;
    position: absolute;
    width: 205px;
    height: 62px;
    left: 32px;
    bottom: 29px;


}

#preview-product h4 {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #2F3035;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}

.login-btn-header-mobile {
    display: none;
}

.backto-quote-parent {

    margin-bottom: 20px;
}

@media only screen and (max-width: 1070px) {
    .carte-icons .others .item2 {
        padding: 0px;
    }
}

.products_comp_number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 98%;
}

.sidebar.epingler_stat_panier .mon-devis-button-mobile {
    display: none;
}

.form-profil {
    margin-top: 0px;
    padding: 0;
}

@media only screen and (max-width: 1024px) {
    .popup-block {
        position: fixed !important; /* Utilisation de fixed pour que le popup soit bien centré */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important; /* Centre le popup */
        width: 90% !important; /* Ajuste la largeur pour qu'il tienne dans l'écran */
        max-width: 320px !important; /* Empêche qu'il devienne trop large */
        z-index: 1002 !important;
        text-align: center;
        color: black;
    }

    .popup-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99999 !important;
    }
    
    .language-btn span, .country-btn span {
        font-size: 11px;
    }
    .header-lang-list img,
    .headder-lang-bloc img {
        height: 28px;
        width: 28px;
    }

    .header-profil-list-mobile {
        gap: 8px;
        display: flex;
        flex-direction: column;
    }

    .header-profil-list-mobile a {
        display: flex;
        gap: 12px;
        padding: 10px;
        /* background: red; */
        border-radius: 8px;
        background: #F6F6F6;
        border-radius: 8px;
    }

    .btn-noauth {

        background: white;
    }

    #connexion {
        background-image: url(../../assets/images/home/configurateur-home-mobile-v2.jpg);
        /* background-position: left; */
        background-size: cover;
    }

    .description-home {
        margin: 0px;
        text-align: center;
        padding: 250px 23px;
        width: 100vw;
        max-width: 100%;
    }

    .description-home-subsection {
        width: 100%;
    }

    .list-finitions .finition-items .voir-format,
    .format-items .voir-fonction,
    .fonction-items .voirmeca {
        display: flex !important;
    }

    .devis .footer-list div {
        width: 100%;
    }

    #map-magasins .backto-quote,
    #main-devis .backto-configurator {

        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    #table-devis .dropdown,
    #main-devis .dropup {
        flex-direction: column;
        width: 100%;
    }

    .profil-blocs .row {
        padding: 37px 20px !important;
    }

    .products_comp_number {
        padding-left: 21px;
    }

    .mon-devis-button-mobile {
        display: flex;
    }

    .current-meca-row {
        display: none;
    }

    .mecanisme-items {
        padding-left: 0px !important;
        padding-top: 0px !important;
    }

    .panier .products_comp_number span.designation {
        padding-left: 9px;
    }

    .panier .panel-temp .composant-header {
        justify-content: end;
        padding-right: 3px;
    }

    .panel-carts {
        padding: 0px 10px;
    }

    .panier .buttons-group {
        padding-left: 10px !important;
    }

    .new-panier-header {
        padding-top: 10px !important;
        padding-left: 10px !important;
        /* padding-right: 24px; */
    }

    .backto-quote-parent {
        display: flex;
        justify-content: center;
    }

    fieldset.carte-icons .items {
        width: 90%;
    }

    .video-section h2 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    p.meca-name {

        height: 50px;
    }

    .bloc-filters {
        display: inline-flex !important;
    }

    .bloc-filters input {

        width: 40%;
    }

    .bloc-filters select {
        width: 42%;
    }

    .bloc-filters i {
        padding: 11px;
    }

    .carte-footer .all-distributors {
        display: flex;
        justify-content: center;
    }

    .nearMe-div {
        padding: 5px;
    }

    .bloc-filters input,
    .bloc-filters select {
        margin-left: 0px;
    }

    .carte-icons .item {
        width: 30px;
        font-size: 0.8rem;
    }

    .contact-form {
        margin-top: 0px;
    }

    .form-profil {
        margin-top: 135px;
    }

    .contact-form .message {
        padding: 0px 15px;
    }

    .login-btn-header-mobile {
        display: block;
    }

    .epingler-devis {
        display: none !important;
    }

    .quantity-popup label,
    .quantity-popup-gravure label {
        width: unset !important;
    }

    .composition .table-products-header {
        background: #1D2030;
        color: white;

    }

    #myTabContent1 .element-meca.active.show,
    #myTabContent2 .element-meca.active.show {
        display: inline-flex !important;
        justify-content: center;
        margin-top: 34px;
    }

    #myTab {
        display: flex !important;
    }

    .meca-nav-desk {
        display: none !important;
    }

    .composition-toggle-mobile {
        display: flex;
    }

    .mecastep .composition-toggle-mobile {

        display: none;
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    .scrollbar-hidden::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge add Firefox */
    .scrollbar-hidden {
        -ms-overflow-style: none;
        scrollbar-width: none;
        /* Firefox */
    }

    .mecanisme-items .liste-mecas {
        overflow-x: auto;
        background: white;
    }

    .mecanisme-number {
        padding: 10px !important;
        border-radius: 11px 11px 0px 0px;
    }

    .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .mecanisme-item.nav-item {
        padding: 0px !important;
    }

    #myTab {
        background: white;
    }

    #myTab li a {
        color: #1D2030;
    }

    .mecanisme-number.active {
        color: white !important;
        background: #1D2030 !important;

    }

    .meca-alignment {
        /* padding-left: 7% !important; */
        /* width: 100%; */
        border-left: none;
    }

    .content-configurateur .mon-devis-button {
        display: none;
    }

    #navbar .mon-devis-button-mobile {
        z-index: unset;
        display: flex;
        position: relative;
        top: 0px;
        right: 9px;
        transform: unset !important;
        -webkit-transform: unset !important;
        -moz-transform: unset !important;
        -ms-transform: unset !important;
        -o-transform: unset !important;
        filter: unset !important;
    }

    .header .part2 {
        z-index: 0 !important;
    }

    .arrow-panier-mobile {
        display: inline-block !important;
    }

    .new-panier {
        padding: 10px !important;
    }

    .new-panier .entete-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .panel-total {
        padding-left: 0px !important;
        padding-right: 0px !important;
        /* overflow: unset; */
    }

    .panel-header {
        padding-left: 12px !important;
        padding-right: 0px !important;

    }

    .panel-cart .panel-temp {
        padding-left: 0px !important;

    }


    .sidebar-nav-mon-devis {
        top: -5px !important;
        display: none;

    }

    .devis-titre {
        font-size: 1rem !important;
    }

    .product-content {
        padding-left: 15px;
        padding-right: 15px;

    }

    #preview-product.mecastep {
        height: unset !important;
    }

    #preview-product {
        /* height: 49px; */
        padding: 10px !important;
        overflow: hidden !important;
        border: none !important;
        /* background: #1D2030 !important; */
        color: white;
        margin-bottom: 20px;
    }

    .finitions .finition-item {
        margin: auto !important;
        margin-top: 20px !important;
    }

    .header .part2 {
        /* top: 116px; */
    }

    .header .part1 {
        display: none;
    }

    .mobile-topbar {
        padding: 0px 15px 0px 15px;
        display: flex;
        justify-content: space-between;
        width: 100vw;
        align-items: center;
    }

    #navbar {
        margin: 0;
        padding: 0px;
        width: 100vw;
    }


    #main-devis #navbar,
    #inscription #navbar,
    #map-magasins #navbar,
    #connexion #navbar,
    #content #navbar,
    #content- #navbar,
    #content-liste-devis #navbar {
        background: white !important;
        height: 83px !important;
        display: flex !important;
    }

    .product-content {
        padding: 35px !important;
    }

    .arrow-panier {
        display: none !important;
    }

    .goToConfig img {
        /* width: 150px !important; */
    }

    .new-panier .mon-devis-button {
        left: -9px !important;
        top: 50px !important;
        z-index: 100;
    }


    footer {

        position: unset !important;
    }

    .meca-alignment span.checkmark {
        left: 18px;
    }

    .banner_ {
        display: block;
    }

    .config {
        display: none !important;
    }

    #content main {

        padding-left: 0px !important;
        padding-right: 0px !important;
        padding-top: 29px !important;

    }

    #content .item-col {

        /* padding-left: 0px !important;
        padding-right: 0px !important;
        margin: auto !important; */
    }

    #content .item-col#preview-product {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: auto !important;
        margin-bottom: 35px !important;
    }

    #connexion header {
        padding-right: 5px;
        padding-left: 5px;
        padding-top: 5px;
        margin: auto;
    }

    .sidebar-nav {
        z-index: 10000;
    }

    .website-header-link {
        display: none;
    }
}

.carousel-item img {
    width: 40%;
}


@media only screen and (max-width: 990px) {

    .carousel-caption {
        top: 260px;
        text-align: center;
    }

    .epingler-devis {
        display: none !important;
    }
}

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

    .infos .geolocMagPlus,
    .infos .geolocMagPlus.active,
    #map-magasins .filters-parent .geolocMagPlus.active,

    #map-magasins .filters-parent .geolocMagPlus {
        display: none;
    }
}

@media only screen and (max-width: 644px) {
    .carte-icons .others .item2 {
        flex-direction: column;
    }

    fieldset.carte-icons .item {
        flex-direction: column;
        padding: 25px 10px;
    }

}

@media only screen and (max-width: 576px) {
    .mecanisme-element .checkmark {
        left: -24px !important;
    }

    .banner_ {
        display: block;
    }

    .config {
        display: none !important;
    }

    .connexion-buttons {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .btn2 {
        position: unset !important;
    }

    .button {
        width: 300px !important;
        margin: auto;
        margin-bottom: 25px;
        background: white !important;
        box-shadow: 0 0 14px -7px rgb(182, 181, 181);
        text-align: center;
    }

    .mtop-mobile-5 {
        margin-top: inherit;
    }

    /* .mtop-mobile{
        margin-top: ;
    } */

    .dropdown-content {
        /* display: none; */
        position: unset !important;

    }

    .video-section {

        min-height: unset !important;
        padding-top: 20px !important;

    }

    footer {

        position: unset !important;
    }

    .carousel-caption {
        top: 143px !important;
    }

    .carousel-item img {
        width: 40%;
    }

}

@media only screen and (max-width: 518px) {

    #map-magasins .info-send-distance {
        display: flex;
        justify-content: center;
    }

    .distance-text {
        display: flex;
        justify-content: center;
    }

    .info-tel,
    .info-email,
    .info-website {
        width: 100% !important;
    }
}

@media only screen and (max-width: 768px) {
    .nearMe {
        width: 100%;
        /* margin-top: 5px; */
    }

    .presentation-section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        min-height: unset !important;
    }

    .carousel-inner {
        height: 65vh;
    }

    footer {

        position: unset !important;
    }

    .header .part2 .menu-item {
        margin-right: 0px;
        padding-left: 41px;
        display: flex;
        gap: 10px;
    }

    fieldset.carte-icons .items {
        width: 100%;
    }
}



@media (max-width:1546px) and (min-width:1201px) {
    .content-configurateur {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    #content main {

        /* padding-left: 48px !important; */
        /* padding-right: 48px !important; */
    }

    #content .item-col {
        /* padding-left: 10px!important; */
        /* padding-right: 10px!important; */
    }

}

@media only screen and (max-width: 767px) {
    .part2 {
        overflow: auto;
        white-space: nowrap;
    }

    .part2::-webkit-scrollbar {
        display: none;
    }

    .part2 {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }


    .header .part2 .main-menu {
        text-align: center;
        margin-bottom: unset;
        /* display: inline-block; */
    }

    .header .part2 .menu-item::after {
        content: ">";
    }


}

@media only screen and (max-width: 450px) {
    .carte-icons .others .item2 {
        font-size: 0.78rem;
    }
}

.section {
    position: unset !important;

}

.flexslider {
    margin: auto !important;
    height: 80vh !important;
}


#carouselExampleControls {
    min-height: 100vh;
    padding-top: 20px;
}

li.active {
    /* background-color: #1D2030 !important; */
}

.carousel-indicators li {
    border: 1px solid #1D2030;
    width: 10px;
    height: 10px;
    border-radius: 100%;


}

.carousel-indicators li.active {
    background: #1D2030;
}

.blue {
    color: #10235a !important;
}

.carousel-caption p {
    font-size: 1rem;
}

.carousel-caption {
    font-size: 2rem;
    position: absolute;
    right: 50%;
    bottom: 0;
    left: 10%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #10235a;
    text-align: left;
    top: 190px;
}

.footer-nav {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    display: none;
    /* width: 100%; */
    /* background-color: rgba(0, 0, 0, 0.6); */
    /* font-size: 1rem; */
    /* font-family: Arial, sans-serif; */
    /* font-weight: normal; */
    /* color: #fff; */
    /* text-align: center; */
    /* cursor: pointer; */
}

.tab-content>.active:not(.element-meca) {
    display: flex;
    width: 100%;
    flex-direction: column;
}


/* .card {
    position: absolute;
    bottom: 5%;
    right: 5%;
    text-align: center;
    color: #272243;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.03);
    width: 320px;
    overflow: hidden;
    animation: updown 3s ease 6;
}
.card::before {
    content: "";
    border-width: 20px;
    border-color: transparent;
    border-style: solid;
    border-left-color: rgba(255, 255, 255, 0.9);
    border-left-width: 30px;
    display: block;
    position: absolute;
    top: 55%;
    left: 50%;
    z-index: 2;
    transform: translatex(calc(-50% + 15px));
    filter: drop-shadow(5px 5px 4px #000);
    pointer-events: none;
}
.card h1 {
    margin: 0;
    padding: 10px;
    font-size: 1.25rem;
} */
@keyframes updown {

    0%,
    50%,
    100% {
        transform: translatey(0);
    }

    20% {
        transform: translatey(5px);
    }

    25% {
        transform: translatey(-20px);
    }

    30% {
        transform: translatey(20px);
    }

    35% {
        transform: translatey(-5px);
    }
}

.banner {
    min-height: 100%;
    width: 100%;
    background: url('https://i.imgur.com/T57flD5.jpg');
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 60px;
    color: #fff;
}

.nav_lags_links {
    display: flex;
    justify-content: space-between;
}

.nav_lags_links .social-bloc {
    display: flex;
    justify-content: space-between;
}

.nav_lags_links .header-lang-list {
    /* display: flex; */
    flex-direction: row-reverse;
    left: -211px;
    top: -4.5px;
}

.sidebar-nav {
    height: fit-content;
    width: 80vw;
    background: #fff;
    /* position: absolute; */
    top: 0;
    left: 0;
    padding: 0 30px 0px 15px;
    display: flex;
    flex-direction: column;
    transform: translatex(-100%);
    transition: transform 0.4s ease-in-out;
    opacity: 1;
    border: none;
}

.sidebar-nav__close {
    position: absolute;
    top: 19px;
    left: 15px;
    background: rgba(47, 48, 53, 0.15);
    height: 44px;
    width: 44px;
    border-radius: 8px;
    /* box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.03); */
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translatex(-100%);
    cursor: pointer;
    transition: transform 0.4s ease-in-out 0.2s;
}

.sidebar-nav__menu {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* justify-content: space-evenly; */
    /* font-size: 2rem; */
    margin-top: 35px;
    /* margin-bottom: 80px; */
    color: #898989;
}

.sidebar-nav__menu a {
    color: currentcolor;
    text-decoration: none;
    transform: translatex(-80%);
    transition: transform 0.4s ease-in-out;
    text-align: left !important;
}

.fa-3x {
    color: #10235a;
    font-size: 35px !important;
}

.fa-3x:hover {
    color: #0000ff;
    cursor: pointer;

}

.sidebar-nav__menu i {
    width: 25px;
    padding-left: 4px;
}

.dropdown-content i {
    width: 18px;
}

.sidebar-nav__menu a:hover::before {
    transform: translatex(0);
    opacity: 1;
}

.sidebar-nav__menu a:nth-child(1) {
    transition-delay: 0.05s;
}

.sidebar-nav__menu a:nth-child(2) {
    transition-delay: 0.1s;
}

.sidebar-nav__menu a:nth-child(3) {
    transition-delay: 0.15s;
}

.sidebar-nav__menu a:nth-child(4) {
    transition-delay: 0.2s;
}

.sidebar-nav__menu a:nth-child(5) {
    transition-delay: 0.25s;
}

.sidebar-nav__social {
    display: flex;
    list-style: none;
    padding: 0;
}

.sidebar-nav__social li {
    margin: 4px;
}

.sidebar-nav__social a,
.sidebar-nav__social svg {
    display: inline-block;
    height: 18px;
    width: 18px;
}

.menu-control {
    display: none;
}

.menu-control:checked+.sidebar-nav {
    transform: translatex(0);
    box-shadow: 0 0 25px -1px grey;
}

.menu-control:checked+.sidebar-nav .sidebar-nav__close {
    transform: translatex(0) rotate(0deg);
}

.menu-control:checked+.sidebar-nav .sidebar-nav__menu a {
    transform: translatex(0);
}

.content-configurateur {
    position: relative;
    background: #FFFFFF;
    /* margin-top: 30   px; */
    /* padding-top: 42px !important;
    padding: 26px; */
}

#map-magasins .content-configurateur {
    margin-top: 120px;
}

.check_products_comp a.btn.voirmeca {
    display: none;
}




/* Create a custom radio button */
.checkmark {
    /* position: absolute; */
    /* top: 0;
    left: 0; */
    height: 25px;
    width: 25px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    background-color: #E6E6E6;
    /* box-shadow: 6px 4px 9px 3px #d6d1d1; */
    border: 1px solid #0000ff;
}

.mecanisme-element .checkmark {
    right: unset !important;
    left: 1px;
    border-color: #72614a;
    background: #fff0;
    width: 15px;
    height: 15px;
}

.dataTables_wrapper {
    font-family: SuisseInt;
    font-size: 1rem;
}

.dataTables_info {
    text-align: left;
}

p.meca-name {
    font-family: 'rdLight';
    font-size: 0.7rem;
    margin-left: 1rem;
    text-align: center;
}

p.meca-name:hover {
    font-family: 'SuisseInt';
}

.selected-meca p.meca-name {
    font-family: 'SuisseInt';
    color: #3F54BC;
    ;
}

/* On mouse-over, add a grey background color */
.cont:hover input~.checkmark {
    background-color: #0000ff;
    /* box-shadow: -6px -1px 9px 3px #d6d1d1; */

}

.cont:hover .checkmark {
    background-color: #0000ff;
    /* box-shadow: -6px -1px 9px 3px #d6d1d1; */

}

/* When the radio button is checked, add a #0000ff background */
.cont input:checked~.checkmark {
    background-color: #0000ff;
    /* box-shadow: -6px -1px 9px 3px #d6d1d1; */

}

.cont input:checked~.format-name {
    color: #0000ff;
    /* box-shadow: -6px -1px 9px 3px #d6d1d1; */

}

.selected-meca .checkmark {
    background-color: #0000ff;
    /* box-shadow: -6px -1px 9px 3px #d6d1d1; */

}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Create a custom radio button */
.client-dest .checkmark {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    background-color: #72614a;
    border: none;
}

.client-dest .checkmark {
    right: unset !important;
}

/* On mouse-over, add a grey background color */
.client-dest:hover input~.checkmark {
    background-color: #0000ff;
    /* box-shadow: -6px -1px 9px 3px #d6d1d1; */

}

.client-dest:hover .checkmark {
    background-color: #0000ff;
    /* box-shadow: -6px -1px 9px 3px #d6d1d1; */

}

/* When the radio button is checked, add a #0000ff background */
.client-dest input:checked~.checkmark {
    background-color: #0000ff;
    /* box-shadow: -6px -1px 9px 3px #d6d1d1; */

}

.client-dest input:checked~.format-name {
    /* color: #0000ff; */
    /* box-shadow: -6px -1px 9px 3px #d6d1d1; */

}

.selected-meca .checkmark {
    /* background-color: #0000ff; */
    /* box-shadow: -6px -1px 9px 3px #d6d1d1; */

}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.choix-client input:checked~.checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.choix-client .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0000ff;
}

.cont .format-button {
    display: none;
}

/*  Mon devuis */
.mon-devis-button:hover,
.new-panier .mon-devis-button:hover {
    /* background: #1D2030; */
}

.mon-devis-button,
.mon-devis-button-mobile {

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 4px 4px 12px;

    position: fixed;
    width: fit-content;

    height: 32px;
    right: -53px;
    top: 469px;
    background: #1D2030;
    border-radius: 8px 8px 0px 0px;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;

    text-align: center;

    color: #FFFFFF;

    transform: rotate(-90deg);

    z-index: 10;
    cursor: pointer;

}

.sidebar-nav .new-quote {
    position: absolute;
    top: -66px;
    left: 55px;
    width: fit-content;
    height: 44.23px;
}

.new-panier .mon-devis-button-mobile {
    top: 19px;
    right: 24px;
    transform: rotate(-0deg);
    border-radius: 0;
    background: #2F3035;
    height: 44.23px;
    width: 44px;
    border-radius: 8px;

}

.new-panier .mon-devis-btn {

    transform: rotate(-90deg);


    /* Legacy vendor prefixes that you probably don't need... */

    /* Safari */

    -webkit-transform: rotate(-90deg);

    /* Firefox */

    -moz-transform: rotate(-90deg);

    /* IE */

    -ms-transform: rotate(-90deg);

    /* Opera */

    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    background: #0000ff;
    padding: 5px;
    position: relative;
    top: 240px;
    left: -124px;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 148px;

}


.sidebar-nav-mon-devis::before,
.sidebar-nav-mon-devis::after {

    color: #3F54BC;
    ;

}

.owl-stage {
    /* width: max-content !important; */
}

.owl-item {

    width: fit-content !important;

}

.new-panier {
    background: #1D2030;
    color: white;
    height: fit-content;
    max-height: 100vh;
    height: 100vh;
    padding: 70px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
    display: none;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 51px;
    overflow-y: auto;
    overflow-x: hidden;
}

img.modifier-produit {
    margin-right: 2px !important;
}

.new-panier p.products_number.float-right {
    margin-right: -39px;
}

.new-panier .products_comp_number span {
    /* font-family: 'Suisse Int\'l'; */
    font-style: normal;
    font-weight: 450;
    font-size: 12px;
    line-height: 24px;
}

#main-devis,
#main-devis main,
#main-devis main .row-container {
    background: white;
}

.new-panier .entete-container {
    padding-left: 48px;
    padding-right: 48px;
    padding-bottom: 6px;
    padding-top: 6px;
    margin-top: 23px;
    height: 20px;
    /* padding: 0px 6px; */

}

.new-panier .devis-titre {
    /* margin-bottom: 50px; */
    text-align: left;
    /* padding-top: 2rem; */
    position: relative;
    top: 0;
    /* z-index: 1; */
    background: #1D2030;
    display: flex;
    justify-content: space-between;
    /* margin-top: 143px; */
}

.modal {
    z-index: 10000000 !important;
}

.modal-backdrop {
    z-index: 1000 !important;
}

.panel-cart img {
    /* width: 12px;
    margin-right: 5px;
    vertical-align: baseline; */
}

.libelle-piece {
    text-align: left;
}

.infos-ref {
    float: left;
}

.infos-prix {
    float: right;
}

.sidebar-nav-mon-devis {
    position: absolute;
    top: 0;
    right: -75px;
    background: #fff0;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    /* box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.03); */
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translatex(-100%);
    cursor: pointer;
    transition: transform 0.4s ease-in-out 0.2s;
    color: white;
}

.sidebar-nav-mon-devis::before,
.sidebar-nav-mon-devis::after {
    content: "";
    height: 2px;
    background: white;
    width: 40px;
    display: block;
    position: absolute;
    transform: rotate(-45deg);

}

.sidebar-nav-mon-devis:hover:before,
.sidebar-nav-mon-devis:hover:after {

    background: #3F54BC;
    ;


}

.sidebar-nav-mon-devis::after {
    transform: rotate(45deg);
}

.table-products-tr .reference,
.table-products-tr .prixpub,
.table-products-tr .designation {
    width: 100%;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 11px;
    line-height: 20px;
}

.table-products-tr .prixpub {
    /* min-width: 88px; */
    text-align: right;
}

.check_products_comp {
    margin: 8px;
}

.qty {
    border: 1px solid white;
    border-radius: 100%;
    color: white;
    background-color: #fff0;
    padding: 5px;
    float: left;
    margin: 3px;
    width: 21px;
    height: 21px;
    font-size: 7px;
    cursor: pointer;
}

.qty:hover {
    color: #3F54BC;
    ;
    border-color: #3F54BC;
    ;
}

.counter {
    /* border: 1px solid #72614A; */
    border-radius: 100%;
    /* color: #72614A; */
    /* background-color: #fff0; */
    /* padding:10px; */
    float: left;
    /*margin: 5px;*/
    width: 26px;
    height: 26px;
    /* font-size: 1rem; */
    cursor: pointer;
}

.counter:hover {
    /*border: 1px solid #72614A;*/
    /*border-radius: 100%;*/
    /*color: white !important;*/
    /*background-color: #0000ff;*/
    /*!* padding:10px; *!*/
    /*float: left;*/
    /*margin: 5px;*/
    /*width: 26px;*/
    /*height: 26px;*/
    /*font-size: 1rem;*/
    /*cursor: pointer;*/
}

.doc-file {
    background-color: #fff0;
    border: 1px solid #0000FF;
    color: #72614A !important;
    text-transform: initial;
    border-radius: 2rem;
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;


}

.doc-file:hover {
    background-color: #0000ff;
    /* border: 1px solid #0000FF;  */
    color: white !important;
    text-transform: initial;
    border-radius: 2rem;
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;


}

.handle-counter input[type=text] {
    background: #fff0;
    border: none;
    text-align: center;
    width: 3vw;
    color: inherit;
}

.panel-total {
    height: 205px;
    margin-top: 20px;
    padding-left: 46px;
    padding-right: 46px;
    padding-top: 14px;
    padding-bottom: 25px;
    overflow: hidden;
    position: sticky;
    bottom: 0px;
    background: #3F54BC;
    padding-bottom: 15px;
    z-index: 15;
    right: 0;
    width: 479px;
}

.new-panier .panel-temp .check_products_comp .fonction-item p.image img.img-fluid {
    width: 70%;
    height: auto;
}

.new-panier #piece-1 .current {
    /* border-top: 1px solid #72614A !important;  */
}


.buttons-group .row {
    /* display: inline-flex !important; */
}

.voir-plus,
.voir-moins {
    background: #fff0;
    color: #72614a;
    border-bottom: 1px solid;
    border-radius: 0;
    width: 75px;
    padding-left: 0;
}

.voir-plus:hover,
.voir-moins:hover {

    color: #3F54BC;
    ;

}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

p.table-products-total {
    text-align: right;
    padding-left: 44px;
    padding-right: 12px;
}


/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(47, 48, 53, 0.08);
    border-radius: 30px;
    margin: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    /* border-radius: 10px; */
    background: rgb(1 1 1 / 35%);
    border-radius: 30px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: gray;
}


.owl-stage-outer::-webkit-scrollbar {
    /* width: 10px; */
    height: 8px;
}

.owl-stage-outer::-webkit-scrollbar::after {
    /* width: 10px; */
    content: '>';
    /* margin: 0 25px;
    position: relative;
    top: 12px; */
}

.owl-stage-outer::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 5px grey;  */
    /* border-radius: 10px; */
}

/* Handle */
.owl-stage-outer::-webkit-scrollbar-thumb,
.wmd-view-topscroll::-webkit-scrollbar-thumb {
    background: #2D3D6E;
    /* border-radius: 10px; */
}

/* Handle on hover */
.owl-stage-outer::-webkit-scrollbar-thumb:hover {
    background: #2D3D6E;
}

.owl-stage-outer::-webkit-scrollbar-button {
    /* background-color: #bbbbbb; */
    /* display: block; */
    /* border-style: solid; */
    height: 13px;
    width: 11px;
}

.owl-stage-outer::-webkit-scrollbar-button:increment {
    background: url(../images/icons/ar_right_blue.svg);
    background-position: center;
    background-repeat: no-repeat;

}

.owl-stage-outer::-webkit-scrollbar-button:decrement {
    background: url(../images/icons/ar_left_blue.svg);
    background-position: center;
    background-repeat: no-repeat;
}

/* .owl-nav{
    display: none !important;
} */

.owl-carousel .owl-item img {
    box-shadow: inset 0 0 0 1000px white;
}

.owl-carousel .owl-item {
    text-align: -webkit-center;
    text-align: -moz-center;
}

.owl-carousel .owl-item:last-child {
    margin-right: 0px !important;
}

.scroller {
    overflow-y: scroll;
    scrollbar-color: #0A4C95 #C2D2E4;
}

#overlay {
    display: block;
    position: absolute;
    background-color: rgba(0, 0, 255, 0.5);
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    /* border: 1px solid rgba(0,0,0,.2); */
    border-radius: 0.3rem;
    outline: 0;
    background: #FFFFFF;
    box-shadow: 0px 4px 24px rgb(0 0 0 / 10%);
    border-radius: 12px;
}

div#preview-product {
    padding: 5px 10px 12px 10px;
    /* position: fixed; */
    border: 1px solid;
}

.fonctions-header-bloc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.socket-name {
    color: lightgray;
}

.socket-name.active {
    color: black;
}

/* mohamed modifs  */

/******** devis ********/
.dataTables_filter {
    color: white;
}

.dataTables_filter .form-control-sm {
    border: none;
    border-bottom: 1px solid #ced4da;
    border-radius: initial;
    width: 300px;
}

.dataTables_filter label::after {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    /* color: #75634E; */
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    right: 15px;
    position: absolute;
}


.table-striped tbody tr {

    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */


    /* Primary/Primary Hover */
    background: white !important;
    color: #484951;

    border-bottom: 1px solid rgba(47, 48, 53, 0.7);
}


.table-striped tbody tr:first-of-type {
    border-top: 1px solid rgba(47, 48, 53, 0.7);
}

#table-devis_wrapper,
#table-utilisateurs_wrapper {
    /* color: #75634E; */
}


.table td,
.table th {
    border-top: none;
    border: none;
    text-align: left;
}

.table {
    font-family: rdLight;
}

table.dataTable {
    border-collapse: collapse !important;
    border: none;
}


.page-item.active .page-link {
    border: 1px solid #2F3035;

    border-radius: 5px;
}

.page-link {
    background-color: white !important;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(47, 48, 53, 0.3);

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
    color: rgba(47, 48, 53, 0.7) !important;
    border-radius: 5px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.page-item.disabled .page-link {
    border-color: rgba(47, 48, 53, 0.3);
}

.page-link {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.page-link[data-dt-idx="1"] {
    border-radius: 5px 0px 0px 5px;
    border-left: 1px solid rgba(47, 48, 53, 0.3);
    border-right: none;
    /* margin-left: 1   0px; */
}

div#table-devis_info {
    position: absolute;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */


    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);
}

div.dataTables_wrapper div.dataTables_paginate {
    margin: 0;
    white-space: nowrap;
    text-align: right;
    justify-content: center;
    display: flex;
}


ul.pagination li:nth-last-child(2) .page-link {
    border-radius: 0px 5px 5px 0px;
    border-right: 1px solid rgba(47, 48, 53, 0.3);
    margin-right: 10px;
    /* border-right: none; */
}

.page-link:hover {
    z-index: 0;
    border-color: rgba(47, 48, 53, 0.3);
}

li#table-devis_previous,
li#table-devis_next a {
    border: none;
    background: white;
}

li#table-devis_previous a {
    border: none;
    background: white;
    /* overflow: hidden; */
    width: fit-content;
}

.dataTables_scroll {
    margin-bottom: 35px;
}

.table-striped .btn {
    border-radius: 2rem;
}

#content-liste-devis,
.btn-blue,
.btn-blue-admin,
#content-liste-devis .btn-red,
#content-liste-devis .btn-yellow,
#content-liste-devis .btn-primary,
#content-liste-devis #table-devis .dropdown button {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: center;

    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);
}
.btn-blue-admin {
    color: #fff !important;
}

#content-liste-devis .btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2px 12px 2px 20px;

    height: 28px;
    border: none;
    /* Primary/Primary 8% */

    background: rgba(47, 48, 53, 0.08);
    border-radius: 8px;
    gap: 8px;
}

table.table-bordered.dataTable th {
    border-left-width: 0;
    border: none;
}

/* table.table-bordered.dataTable td {
    border-top: 1px solid rgba(47, 48, 53, 0.7);
    border-bottom: 1px solid rgba(47, 48, 53, 0.7);
}
div.dataTables_scrollBody table tbody tr:first-child td {
    border-top: 1px solid rgba(47, 48, 53, 0.7) !important;
}

table.table-bordered.dataTable tbody tr:last-child td {
    border-top: 1px solid rgba(47, 48, 53, 0.7) !important;
    border-bottom-width:1px !important;
} */


#table-devis tbody tr td:last-child {
    text-align: center;
    display: flex;
    gap: 8px;
}

table#table-devis.dataTable {
    border-collapse: collapse !important;
}

/* #table-devis thead tr th:last-child{
       background:red !important;
    } */
.table-striped tbody tr:hover .btn-blue-admin:hover {
    background: #2F3035 !important;
    color: white !important;
}
.table-striped tbody tr:hover .btn-blue:hover,
.table-striped tbody tr:hover .btn-blue:hover,
.table-striped tbody tr:hover .btn-yellow:hover,
.table-striped tbody tr:hover .btn-yellow:hover,
.table-striped tbody tr:hover .btn-primary:hover,
.table-striped tbody tr:hover .btn-primary:hover,
.table-striped tbody tr:hover .btn-red:hover,
.table-striped tbody tr:hover .btn-red:hover,
tbody tr:hover .dropdown button:hover,
tbody tr:hover .dropdown button:hover {
    background: #2F3035 !important;
    /* border; */
    color: white !important;

}

.table-striped tbody tr:hover .btn-red:hover img {

    filter: invert(1.5) sepia(1) hue-rotate(200deg) saturate(4) brightness(1);

}

.voir-devi-a {
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */


    /* Primary/Primary Hover */

    color: #484951;
}

#table-devis_wrapper table thead th:last-child() {
    /* width: 500px !important; */
}

.infos-devis tbody tr:hover .counter {
    color: #0000ff;
    border-color: #0000ff !important;
}

/******* detail devis ********/
#projet {}

.devis .products-list .comment-devis {
    text-align: left;
    /* padding: 0; */
}

.devis .products-list .comment-devis textarea.form-control {
    overflow: hidden;
}

.get-tarif-bloc {
    display: flex;
    justify-content: space-between;
    margin-bottom: 31px;
    gap: 28px;
}

.devis .products-list .comment-devis .form-control {
    width: 100%;
    height: 52px;
    position: relative;
}

.infos-devis {
    border: 1px solid rgba(47, 48, 53, 0.15);
    border-radius: 10px;
}


.devis .products-list .infos-devis th {

    text-align: left;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */


    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);
}

.devis .products-list .infos-devis .total-tr {
    background: none !important;
}

.devis .products-list .infos-devis table {
    margin: 0 auto;
    border-collapse: collapse;
}

table {
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;

}

th,
td {
    /* padding: 1em; */
    /* background: #ddd; */
    /* border-bottom: 2px solid white;  */
}

#main-devis .devis {
    background: #F3F4F7;
    border: none;
}

a.download-file-pdf {
    color: #72614A;
}

.download-file-pdf.not-exist {
    display: none;
}

#main-devis .dropup button {
    margin-bottom: 2px;
    /* color: #fff !important;
        background-color: #00508C;
        -webkit-appearance:none;
        margin-top: 20px;
        padding: 2px 12px;
        margin-right: 15px; */
}

#main-devis .dropup button {
    /* background-color: white;
        border-color: #0000FF;
        border: 1px solid #0000FF; 
        color: #0000FF !important;
        padding: .275rem  .75rem !important;
        border-radius: 2rem; */
}

#main-devis .dropup button:hover {
    /* background-color: #2A4B9B;
        border-color: #2A4B9B;
        border: 1px solid #2A4B9B; 
        color: white !important;
        padding: .275rem  .75rem !important; */
}


.titre-page h2 {}

.head-list.titre-page {
    background: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.devis .head-list.titre-page {
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: left;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    /* identical to box height, or 125% */


    /* Primary/Primary */

    color: #2F3035;
}

.dataTables_length {
    text-align: left;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */


    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);
}

/* -------------------------------INSCRIPTION------------------------------------- */

.input-group {
    padding: 0;
    margin: 0 !important;
}

/* .header .recherche button{
        margin: 8px 0px 0px 0;
        background: none !important;
        color: #666666;
        padding: 0 8px 0 10px;
        border: none; */
/* } */

/* .header .recherche button:hover{
        border: 0;
        box-shadow: none;
    }
    
    .header .recherche .glyphicon-search{
        font-size: 23px;
    }
    .header .part1 {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #D0D0D0;
        padding-bottom: 10px;
    } */

/* .header .config{
        position: relative;
    }
    .header	.config .compte{
        float: right;
        margin-right: 15px;
    } */
/* .header	.config .langues{
        float: right;
    } */

#subscribe .choix label {
    display: block;
}

.required {
    /* color: rgba(47, 48, 53, 0.7); */
    color: rgba(63, 84, 188, 1);
}


.top-menu {
    overflow: hidden;
    height: 40px;
    /* padding: 10px; */
    visibility: visible;
    z-index: 1;
    /* text-transform: UPPERCASE; */

}

.top-menu .dropdown-toggle::after {
    display: none;
}

#inscription .wizard-card {
    border: 1px solid #1D2030;
}

#inscription .nav-pills>li.active>a::after {
    background-color: #1D2030 !important;
}

#inscription .nav-pills>li.active>a {
    color: #1D2030 !important;
}

#inscription .wizard-card[data-color="orange"] .wizard-navigation .progress-bar {
    background-color: #1D2030 !important;
}

#inscription .wizard-card[data-color="orange"] .nav-pills .icon-circle.checked {
    border-color: #1D2030;
}

#inscription .btn-warning.btn-fill {
    background-color: #1D2030;
}

#inscription .btn-warning {
    border-color: #1D2030;
}

.top-menu a {
    color: #ffffff;
    margin-right: 0px;
    text-align: center;
    font-size: 1rem;
    width: 51px;
}

.sidebar-nav__menu .top-menu a {
    text-align: left;
}

.top-menu .banner_ a {

    width: unset;
}

.search-opened {
    /* background: #1D2030 !important; */
}

.top-menu a:hover,
.top-menu span:hover {
    /* color: #72614A ; */
    /* background: white; */


}

a.btn-chose-other-dist-fav:hover {
    color: #2F3035;
    /* text-decoration: underline; */
}

/* .top-menu .compte{
        float: right;
        margin-right: 30px;
        color: white;
    } */
.top-menu .user_options {
    float: right;
}

/* body header,body main,body footer{
        margin:  0 26px !important;
    } */
.conditions {
    padding-left: 8px;
}

.condition-accept-1 {
    padding-bottom: 23px;
}

.condition-accept-1 .validation-error {
    bottom: 4px !important;
}

.err-recaptcha {
    bottom: 0 !important;
    top: 42px !important;
    ;
    left: -15px !important;
    ;
}

#close-inscription {
    all: unset;
    margin-right: 45px;
}

/*
    #conditions,#rgpd_autorisation{
        float: left;
    }*/

/* Mon COMPTE  */
.condition-accept {
    position: relative;
    padding-left: 20px;
}

.condition-accept label.error {
    position: absolute;
    bottom: 0px;
}

.condition-accept .conditions {
    text-align: left;
    width: 100%;
}

.condition-accept input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
}

form#profil .fa-2x {
    background: #72614A;
    border-radius: 100%;
    padding: 20px;
    width: 80px;
    color: white;
    height: 80px;
    margin-top: 30px;
}

form#profil label {

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 24px;
    /* identical to box height, or 240% */


    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);
}

form#profil .form-group {

    text-align: left;
}

.swal2-popup .swal2-styled.swal2-confirm {
    /* width: max-content; */
    height: auto;
}

.swal2-popup.swal2-modal.swal2-show.paysagePop {
    height: 330px !important;
}

.nav_links a {
    display: block;
}

.epingler-devis {
    font-size: 0.7rem;
    background: #1D2030;
    /* position: absolute; */
    /* left: 0px; */
    /* padding: 10px; */
    /* width: 150px; */
    /* top: -10px; */
    top: 36px;

    cursor: pointer;

}

/* .epingler-devis:hover{
    background-color: white;
    color: #968978;
    position: absolute;
    
} */
.epingler-devis i {
    /* padding: 10px; */
    padding-left: 20px;
}

.epingler-devis .epingler-devis-span {
    /* border-left: 1px solid white; */
    /* padding: 5px; */
    /* padding-left: 10px;
    text-align: left; */
}

.epingler-devis .epingler-devis-span span {
    width: 51px;
    height: 24px;

    /* 1440/Label/Button */

    /* font-family: SuisseInt; */
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */


    /* Primary/White 70% */

    color: rgba(255, 255, 255, 0.7);


    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
}

.epingler-devis:hover .epingler-devis-span {
    /* border-left: 1px solid #968978; */

}

.epingler_stat_content {
    width: calc(100% - 464px);
}

.epingler_stat_panier {
    width: 464px;
    height: 100vh;
    padding: 0px !important;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    display: block !important;
}

*/ .epingler_stat_panel-header {
    padding-left: 12px !important;
    padding-right: 0px !important;

}

.epingler_stat_panel-cart_panel-temp {
    padding-left: 34px !important;
    padding-right: 0px !important;

}

.list-collections .epingler_stat_item-col,
.list-gammes .epingler_stat_item-col {
    /* padding-left: 0px !important; */

}

.epingler_stat_sidebar-nav-mon-devis {
    top: -5px !important;
    display: none;

}

.epingler_stat_devis-titre {
    font-size: 1rem !important;
}

.epingler_stat_product-content {
    /* padding-left: 15px;
    padding-right: 15px; */

}

.list-mecanismes .coll-form-fonct-mec {
    /* display: none; */
}

#meca_preview .mecanisme-items {
    /* display: none; */

}

.config-image-fonct_ {
    -webkit-transform: scale(0.5);
    /* Saf3.1+, Chrome */
    -moz-transform: scale(0.5);
    /* FF3.5+ */
    -ms-transform: scale(0.5);
    /* IE9 */
    -o-transform: scale(0.5);
    /* Opera 10.5+ */
    transform: scale(0.5);
    /* IE6–IE9 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713, SizingMethod='auto expand');
}

#meca_preview .config-image_ {
    max-width: 100%;
    -webkit-transform: scale(0.5);
    /* Saf3.1+, Chrome */
    -moz-transform: scale(0.5);
    /* FF3.5+ */
    -ms-transform: scale(0.5);
    /* IE9 */
    -o-transform: scale(0.5);
    /* Opera 10.5+ */
    transform: scale(0.5);
    /* IE6–IE9 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713, SizingMethod='auto expand');
}

.mecanisme-items .checkmark {
    /* display: none; */
    visibility: hidden;
    position: absolute;

}

.epingler_stat_navbar {}

.epingler_stat_epingler-devis {
    /* left: -15px; */
    /* top: 20px; */

}

.epingler_stat_format-image-preview {
    max-width: 80%;
}

.epingler_stat_content-configurateur {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.create-gravure-bloc button {
    /* width:100% */

}

.inserer-bloc .inserer {
    width: 100%
}

.composition-toggle {
    cursor: pointer;
}

.composition-toggle:hover {
    color: #3F54BC;
    ;
    /* box-shadow: 0px 0px 14px -4px #5c5c6d; */
}

.interVisuel {
    text-align: center;
    width: 100%;
    height: 100%;
}

.dropdownLangsButton-menu {
    display: none;
}

.dropdown-item {
    padding: unset !important;
}

#dropdownLangsButton {
    cursor: pointer;
}

.epingler_stat_dropdownLangsButton-menu {
    /* right:537px !important; */
}

/********* HOME SLIDER **********/
.slider-section .moduletable {
    margin-bottom: 0;
    min-height: 20em;
    margin: 60px 0;
}

.moduletable>div {
    overflow: hidden;
}

.moduletable * {
    max-width: none !important;
}

.moduletable>h2 {
    font-weight: bolder;
    color: #72614A;
}

h2.line-before:before {
    content: "";
    display: block;
    width: 25vw;
    height: 1px;
    border-bottom: 1px solid;
    position: absolute;
    bottom: -20px;
    left: -33%;
    z-index: 55;
}

h2.line-before {
    position: relative;
    margin-bottom: 40px !important;
}

.moduletable.raxo.raxo-home-slider.mod-collections>h2 {
    padding-top: 40px;
}

button.slick-prev.slick-arrow {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 55;
}

button.slick-arrow {
    background: transparent;
    font-size: 0;
    border: none;
}

button.slick-arrow.slick-prev:before {
    content: "\f053";
}

button.slick-arrow:before {
    content: "\f054";
    font-family: "FontAwesome";
    font-size: 6rem;
    color: #00508C;
    line-height: 1em;
}

.slick-dots {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 65;
    display: inline-block;
    padding: 0;
    list-style: none;
    text-align: center;
    margin: 0 auto;
    height: 20px;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:before {
    font-family: 'FontAwesome';
    font-size: 10px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '\f111';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.moduletable.raxo .allmode-topitem.rw>div {
    vertical-align: middle;
}

.mod-collections h3.allmode-title {
    font-size: 2.8em;
}

.list-group-item.active>.badge,
.nav-pills>.active>a>.badge,
h3>a,
.mod-collections .allmode-title a,
#connexion main .mod-collections .allmode-title a {
    color: #0F2459 !important;
}

.mod-collections .allmode-title a span {
    font-weight: 600;
    display: inline-block;
}

.mod-collections .allmode-text p {
    font-size: 1.6em;
    margin-bottom: 0;
}

.mod-collections p.raxo-news-readmore {
    margin-top: 2em;
}

span.btn.btn-default.allmode-readmore {
    border-color: gray;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.mod-collections span.btn.btn-default.allmode-readmore a {
    font-size: 1.2em;
    font-weight: 600 !important;
}

.mod-collections span.btn.btn-default.allmode-readmore:hover,
#connexion main .mod-collections span.btn.btn-default.allmode-readmore:hover a {
    color: white !important;
    text-decoration: none;
}

span.btn.btn-default.allmode-readmore a {
    color: #72614A !important;
    text-decoration: none;
    font-weight: normal;
}

span.btn.btn-default.allmode-readmore:hover {
    background: #72614A !important;
}

.moduletable.raxo.raxo-home-slider.mod-collections .allmode-img img {
    margin: 0 auto;
    float: none !important;
}

.moduletable img {
    max-width: 100% !important;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
}

.rw,
.rwf {
    width: 100%;
    display: table;
    table-layout: fixed;
}

.cl,
.rw>div,
.rwf>div,
.clf {
    display: table-cell;
    padding: 0 15px;
    vertical-align: top;
}

h1.toleft,
h2.toleft,
h3.toleft,
h4.toleft,
h5.toleft,
h5.toleft,
p.toleft,
li.toleft,
blockquote.toleft {
    text-align: left !important;
}

.moduletable>h1,
.moduletable>h2,
.moduletable>h3,
.moduletable>h4,
.moduletable>h1,
.moduletable>h5,
.moduletable>h6 {
    padding-bottom: 1px;
    margin-top: 0;
    text-align: center;
    font-weight: lighter;
}

.moduletable.raxo.raxo-home-slider .allmode-img {
    max-width: 48vw !important;
    margin: 0 auto;
}

@media (min-width: 1200px) {

    .slider-section .container {
        max-width: 1170px;
    }

    .allmode-news .rw {
        height: 70vh !important;
    }


    .side-box.side-text {
        width: 40%;
        text-align: left;
        color: #333;
    }

    .moduletable.raxo.raxo-home-slider {
        overflow: visible;
    }

    .moduletable.raxo.raxo-home-slider h3 {
        text-align: left;
        padding-top: 1em;
    }

    .moduletable.raxo.raxo-home-slider img {
        max-height: 64vh;
    }

    .mod-collections .allmode-title a,
    #connexion main .mod-collections .allmode-title a {
        font-weight: 300;
    }

    .moduletable.raxo.raxo-home-slider .slick-slide {
        display: table;
        transition: all .3s linear;
        opacity: 0;
    }

    .moduletable.raxo.raxo-home-slider .slick-slide.slick-active {
        opacity: 1;
    }

    .moduletable.raxo.raxo-home-slider .allmode-img img {
        float: right;
    }

    .moduletable.raxo.raxo-home-slider img {
        max-height: 64vh;
    }

    .side-box.img-date {
        width: 60%;
    }

    .slider-section .moduletable .rw {
        overflow: hidden;
        height: 60vh;
    }

    .mod-coll-2 ul.slick-dots {
        position: absolute;
        right: 0;
        left: auto;
        top: 50%;
        bottom: auto;
        z-index: 5555;
        height: auto;
        width: 50px;
        transform: translateY(-50%);
    }

    .mod-collections .slick-dots li button {
        width: 40px;
        height: 60px;
        padding: 10px !important;
    }

    .mod-collections .slick-dots li button:before {
        width: 40px;
        height: 60px;
        font-size: 15px;
        line-height: 60px;
    }

    .slider-section .moduletable {
        height: calc(100vh - 92px) !important;
        overflow: hidden;
    }
}

/***  Home bloc about ***
.row {
    margin-right: -15px;
    margin-left: -15px;
}
.about-section{
    padding-top:20px !important;
    padding-bottom: 20px !important;
    min-height: unset !important;
}
.about-section{
    font-size: 1.2rem;
    color: #10235a;
    padding-top: 143px;
    padding-bottom: 9px;
    margin: auto;
    min-height: 100vh;
    padding-top: 25vh;
    background-image: url("../../assets/images/section3.svg");
     background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat;
    background-color: #ffffff;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.about-section h3{
    font-size: 1.1rem;

}
.about-section div div {
    font-family: SuisseInt;
}
.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
    display: table;
    content: " ";
}
.mod-custom-fixed > div, .mod-custom-fixed > div h2, .mod-custom-fixed > div h3, .mod-custom-fixed > div p, .mod-custom-fixed > div li {
    color: black;
    text-shadow: 0px 0px 1em white;
}
.moduletable.modcustom-full p img {
    max-width: 180px !important;
    margin-bottom: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;    
}
.moduletable.modcustom-full p > a,#connexion main .moduletable.modcustom-full p > a {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    margin-top: 1em;
    
    font-weight: normal;
    border: 1px solid;
    padding: 6px 30px;
    border-radius: 20px;
    color: #0F2459 !important;
    text-shadow: none;
    text-decoration: none;
    font-size: 1.4rem;
}
.moduletable.modcustom-full p > a:hover,#connexion main  .moduletable.modcustom-full p > a:hover {
    color: white !important;
    background: #3F54BC;;
    border-color: #3F54BC;;
}
.moduletable.modcustom-full p:last-child,#connexion main  .moduletable.modcustom-full p:last-child {
    text-align: center;
}

.moduletable.modcustom-full p,#connexion main  .moduletable.modcustom-full p {
    color: #0F2459;
    font-weight: bolder;
    font-size: 1.3rem;
}
.mod-custom-fixed > div {
    padding: 80px 0;
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1200px){
    .container {
        width: 1170px;
    }
    .mod-custom-fixed > div {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }    
}
@media (min-width: 992px){
    .container {
        width: 970px;
    }
}
@media (min-width: 768px){
    .container {
        width: 750px;
    }
}



********************/
#format-carousel {
    gap: 24px;
    justify-content: start;
    /* padding-left: 300px; */
}

.clickable {
    pointer-events: auto;
}

#meca_preview .coll-form-fonct-mec .image img {
    /* cursor: zoom-in; */
    max-width: 100%;
}

#preview-product-modal .image img {
    cursor: unset !important;
    max-width: 100% !important;
    width: 100%;
}

.comp-tot {
    text-align: right;
}

a#to-configuration {
    padding: 10px;
    color: white !important;
    display: flex;
    justify-content: center;
    margin: 15px 1px !important;
    box-shadow: 0px 0px 6px grey;

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 4px 4px 12px;

    height: 32px;

    background: #1D2030;
    border-radius: 8px;
}

a.dropdown-item.d-none.exporter-pdf-sp {
    display: none !important;

}

.modal-header {
    /* padding: 35px; */
    padding: 25px 57px;
}

.new-panier-header {
    padding-top: 36px;
    padding-left: 48px;
    padding-right: 24px;
}

.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.video-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.iframe-div {
    padding: 0px 15% 2%;
}

/*Gravure */

.gravure-titre {
    background: #1D2030;
    text-align: center;
    color: white;
    margin-right: 15px;
}

.gravure-input,
.gravure-sec select {
    width: 100%;
}

.gravure-sec table {
    width: 100%;
    /* margin-right:15px ; */
}

.gravure-sec i {
    font-size: 0.7rem;
}

.gravure-sec .row:not(.canvas-controles) {
    justify-content: start;
}

button:focus {
    outline: none;
}

.gravures .product-content:hover {
    color: unset;
}

.gravures .product-content:hover tr {
    color: unset;
}

.width-94 {
    width: 94%;
}

.symbol-preview {
    width: 300px;
    height: 88px;
    left: 48px;
    top: 392px;

    /* Primary/Light Grey */

    background: #F6F6F6;
    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.el-div.closed .grav-symb-bloc {
    display: flex;
    align-items: self-start;
    justify-content: start;
    position: relative;
    left: 27px;
    top: 15px;
    gap: 17px;
}

.symbol-preview img {
    width: 24px;
    height: 24px;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.el-div.closed .symbol-preview {
    height: 25px;
    width: 151px;
    justify-content: left;
}

.el-div:not(.closed) .grav-symb-bloc .icon,
.el-div:not(.closed) .grav-symb-bloc .action-btns {
    display: none;
}

.gravure-ligne-titre {
    /*width: 40%;*/
}

.gravure-input-file {
    overflow: hidden;
    width: 64%;
    float: right;
}

.gravure-controles {
    /* border-right: 3px solid; */
    height: 73vh;
    padding-top: 26px;
}

.gravure-controles .row.boutons {}

.gravure-controles .custom-file {
    font-size: 0.7rem;
}

.custom-file-label {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: none;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: #2F3035;
    cursor: pointer;

}

.el-div.el-div-img:not(#upload-el) .custom-file-label:after {
    content: url(../../assets/images/icons/downloadv4.svg);
    position: relative !important;
    top: 0px;
    left: 0px;
    visibility: visible !important;
    background: transparent;
    border: none;
}

.el-div.el-div-img:not(#upload-el) .show-gallery-liste:after {
    content: url(../../assets/images/icons/searchdarkv4.svg);
    position: relative !important;
    top: 5px;
    left: 0px;
    visibility: visible !important;
    background: transparent;
    border: none;
}

.el-div.el-div-img:not(#upload-el) .custom-file-label:hover {
    color: white;
    background-color: #3F54BC !important;
}

.el-div.el-div-img:not(#upload-el) .show-gallery-liste:hover {
    color: white;
    background-color: #3F54BC !important;
}

.el-div.el-div-img:not(#upload-el) .custom-file-label:hover::after {
    content: url(../../assets/images/icons/downloadv4-white.svg);
}

.el-div.el-div-img:not(#upload-el) .show-gallery-liste:hover::after {
    content: url(../../assets/images/icons/searchwhitev4.svg);
}

.gall-img-div .custom-file-label {
    background: #fff0;
    border: none;
    padding: 50px;
    flex-direction: column;

}

.gall-img-div .custom-file-label p {
    font-size: 0.6rem;
    color: #0F2459;
    text-align: center;

}

.custom-file.gall-img-div {
    height: 90px;
    height: 90px;
    background: transparent;
    border: 1px solid rgba(47, 48, 53, 0.5);
}

.custom-file-input {
    cursor: pointer;
}

.custom-file-label i {
    font-size: 1.3rem;
}

.gravure-controles .custom-file-label::after {
    visibility: hidden;
    position: absolute;
}

.custom-file-label i {
    font-size: 1.5rem;
    color: #968978;
}

.gravure-input-range {
    -webkit-appearance: none;
    /* width: 100%; */
    height: 5px;
    background: #1D2030;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 15px;
}

.gravure-input-range:hover {
    opacity: 1;
}

.gravure-input-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: #0F2459;
    cursor: pointer;
    border-radius: 100px;
}

.gravure-input-range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #0F2459;
    cursor: pointer;
}

#c {
    /* background: red; */
}

#canvas {
    /* background: #3F54BC;; */
    width: 100%;
    height: 100%;
    /* z-index: 1; */
}

#canvas-container div.canvas-container,
#canvas-container canvas {
    position: absolute !important;
}

#canvas-container-modal div.canvas-container {
    position: absolute !important;
    visibility: hidden;
}

#canvas-container-modal {
    /* background: lightblue; */
}

.colors-liste .black {
    background: black;
    width: 100%;
    height: 15px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    cursor: copy;
}

.colors-liste .yellow {
    background: #FEC961;
    width: 100%;
    height: 15px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor: copy;
}

.colors-liste .gray {
    background: #808080;
    width: 100%;
    height: 15px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor: copy;
}

.colors-liste .white {
    background: #FFFFFF;
    width: 100%;
    height: 15px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor: copy;
}

.colors-liste .ocher {
    background: #F5F5DC;
    width: 100%;
    height: 15px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor: copy;
}

.colors-liste {
    display: none;
    background: white;
    height: fit-content;
    width: 62px;
    position: absolute;
    top: 40px;
    border: 1px solid black;
    border-radius: 5px;
    right: 32px;
}

#canvas+.upper-canvas {
    cursor: move !important;
}

#canvas-container .c_grids {
    z-index: 1;
    width: 100%;
    height: 100%;
}


#canvas-container .c_preview {}

@media screen and (max-height: 500px) {
    .new-panier.panier .mon-devis-button {
        top: 10px !important;
    }

    .new-panier-header {
        padding-top: 0px !important;
    }
}

#filecontent {
    text-align: left;
    color: #d3c122;
    background: #000;
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#filecontent .Bigcomment {
    color: #2fb7da;
}

#filecontent .comment {
    color: green;
}

#filecontent span.ligneNumber {
    color: #FFF !important;
}

#filecontent .codeline span {
    color: #F9246A;
}

#filecontent .codeline span.phpfunction {
    color: #2fb7da;
}

#filecontent .codeline span.phpother {
    color: #FFF;
}

#canvas-container {
    height: 91%;
    overflow: scroll;
}


.row.el-div {
    width: 301px;
    /*height: 576px;*/
    display: flex;
    flex-direction: column;
    color: #2F3035;

}

.row.el-div {
    width: 301px;
    /*height: 576px;*/
    display: flex;
    flex-direction: column;
    color: #2F3035;
}



.row.el-div .handle-counter input,
#main-devis .handle-counter input[type=text],
span.gravure-input {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2px 12px;
    width: 75px;
    height: 28px;

    background: rgba(47, 48, 53, 0.08);
    border-radius: 8px;

    flex: none;
    flex-grow: 0;
    border: none;
}

.row.el-div .handle-counter input#position-x-control,
.row.el-div .handle-counter input#position-y-control {
    /* width:fit-content; */
}

.back-clear {
    background: #B1A79A;
    padding: 10px;
    border-radius: 4px;
}

span.gravure-input {
    color: #1D2030;
    display: flex;
    justify-content: center;
    align-items: start;
    height: 30px;
    width: 60px;
}

span.gravure-input i {
    color: #1D2030;

}

.row.el-div .handle-counter input:focus {
    outline: none !important;
}

.row.el-div .handle-counter {
    align-items: center;
    justify-content: space-between;
}

.row.el-div .counter,
#main-devis .handle-counter .counter {
    border: none;
    background: transparent;
    border-radius: 100%;
    /* color: white; */
    /* background-color: #fff0; */
    /* padding: 10px; */
    float: left;
    /*margin: 5px;*/
    width: 26px;
    height: 26px;
    /* font-size: 1.1rem; */
    cursor: pointer;
}

.row.el-div .counter.counter-minus {

    float: left;

}

.row.el-div span {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    color: rgba(47, 48, 53, 0.5);

    /*position: absolute;*/
    /*left: 215px;*/
}



.row.el-div span.gravure-input {
    /* color: white; */
    background: none;
    border: none;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */


    /* Primary/Primary 50% */

    color: rgba(47, 48, 53, 0.5);


    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
}

.height-30 {
    height: 30px;
}

.text-decoration-underline {
    text-decoration: underline;
}

.el-div-container {
    visibility: hidden;
    position: absolute;
}

.elements-container {
    overflow-y: auto;
    padding: 28px 16px;
    display: flex;
    justify-content: start;
    flex-direction: column;
    gap: 12px;
    align-items: center;

    /* height: 49vh; */
    overflow-x: hidden;
}

.el-div i.fa-trash-alt {
    cursor: pointer;
    border: 1px solid white;
    padding: 10px;
    border-radius: 18px;
}

.gravures.step .product-content {
    height: 90vh;
}

.settings-bloc {
    position: absolute;
    width: 24px;
    height: 24px;
    right: 4px;
    top: 5px;
}

.grav-img-prev {
    position: relative;
    top: 0;
    left: 0;
}

.show-gallery-liste,
.show-cats-liste {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13px 16px 15px 20px;
    gap: 8px;
    width: 300px;
    height: 52px;
    left: 48px;
    top: 328px;
    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 8px;
    cursor: pointer;
}

.upload-img-bloc {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13px 16px 15px 20px;
    gap: 8px;
    width: 300px;
    height: 52px;
    /* left: 48px; */
    /* top: 328px; */
    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 8px;
}

.show-gallery-liste {}

.gallery-container button.upload-img {
    background: #C1B9AF;
    border: none;
    color: white;
    padding: 4px;
    border-radius: 20px;
    font-size: 0.7rem;
    width: 40%;
}

.gallery-container .gall-header {
    background: #3F54BC;
    width: 100%;
    color: white;
    border-radius: 8px 8px 0px 0px;
}

.gravure-sec tr:first-child td {
    padding-bottom: 10px;
}

#el-color {
    border: 1px solid;
    border-radius: 5px;
    background: white;
    width: 62px;
    height: 35px;
}

#el-color .color {
    background: black;
    border-bottom-left-radius: 4px;
    color: black;
    height: 13px;
    width: 37px;
    border-radius: 0px 0px 0px 5px;
}

#el-color .txt {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    height: 20px;
    /* bor  der: 1px solid #484951; */
    border-top-left-radius: 4px;
    font-size: 1.3rem;
    font-weight: bold;
}

#el-color .colors {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 28px;
    border-left: 1px solid black;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: 1.3rem;
    height: 100%;
    width: 100%;
    cursor: pointer;
    /* font-weight: bold; */
}

#swal2-content {
    /* white-space: nowrap; */
}

.categories-container,
.gallery-container {
    display: none;
    position: absolute;
    height: 40vh;
    width: 385px;
    z-index: 1;
    background: white;
    left: 100%;

    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 8px;

}

.categories,
.gallery {
    height: 100%;
    width: 100%;

    padding-bottom: 25px;
}

.categories .cats,
.gallery .gal {
    background: #F3F2F1;
    height: 100%;
    overflow-y: hidden;

}

.categories .pictos {
    padding: 0;
}

.categories .pictos {
    padding: 0;
}

.categories .pictos img {
    margin: 10px;
}

.categories .cats .liste-cats {
    height: 100%;
    overflow-y: scroll;
    width: 100%;
    overflow-x: hidden;
}

.categories .cats h4,
.pictos div.fill-remp {
    color: white;
    border-bottom: 1px solid #3F54BC;
    font-family: 'SuisseInt';
    display: flex;
    justify-content: start;
    align-items: center;
    height: 40px;
    background-color: #3F54BC;
}

.categories .cats i {
    padding: 3px;
    font-size: 1.2rem;
    color: white;
}


.row.el-div.closed {
    height: 52px;
    min-height: 52px;
    /* overflow: hidden; */
    background: #D8D4CE;

    width: 300px;
    height: 60px;
    left: 0px;
    top: 0px;

    /* Primary/Light Grey */

    background: #F6F6F6;
    border-radius: 12px;
}

/* SYMBOLE/IMAGES START */
.row.el-div.el-div-symb .symbol-preview.clos,
.row.el-div.el-div-img .symbol-preview.clos {
    visibility: hidden;
    position: absolute;
}

/* .row.el-div.el-div-symb.closed {
    height: 122px;
}

.row.el-div.el-div-img.closed {
    height: 122px;
} */

.row.el-div.el-div-symb.closed .symbol-preview.clos,
.row.el-div.el-div-img.closed .symbol-preview.clos {
    visibility: unset;
    position: unset;
}

.row.el-div.el-div-symb.closed .biblio.clos,
.row.el-div.el-div-img.closed .img.clos {
    visibility: hidden;
    position: absolute;
}

/* SYBOLE/IMAGES END */

.italic {
    font-family: auto;
}

.categories-container h4 {
    border-bottom: 5px solid;
    background: #F3F2F1;
    margin: 0;
}

.picto-liste {
    height: 87%;
    overflow-y: auto;
}

#myModal2 .modal-lg {
    max-width: 90vw;
    max-height: 90vh;
    height: 100%;
    width: 100%;
    margin: 0 !important;
}

#myModal2 .modal-content {
    /* max-width: 82vw;
    max-height: 95vh; */
    /* overflow: hidden; */
}

.flipping {
    width: 67.2px;
    height: 67.2px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.flipping div {
    animation: flipping-18i5bq 1.2000000000000002s calc(var(--delay) * 0.8s) infinite backwards;
    background-color: #3f54bc;
}

.flipping div:nth-child(1) {
    --delay: 0.08000000000000002;
}

.flipping div:nth-child(2) {
    --delay: 0.16000000000000003;
}

.flipping div:nth-child(3) {
    --delay: 0.24;
}

.flipping div:nth-child(4) {
    --delay: 0.32000000000000006;
}

.flipping div:nth-child(5) {
    --delay: 0.4;
}

.flipping div:nth-child(6) {
    --delay: 0.48;
}

.flipping div:nth-child(7) {
    --delay: 0.5599999999999999;
}

.flipping div:nth-child(8) {
    --delay: 0.6400000000000001;
}

.flipping div:nth-child(9) {
    --delay: 0.7200000000000001;
}

@keyframes flipping-18i5bq {
    0% {
        transform: perspective(67.2px) rotateX(-90deg);
    }

    50%,
    75% {
        transform: perspective(67.2px) rotateX(0);
    }

    100% {
        opacity: 0;
        transform: perspective(67.2px) rotateX(0);
    }
}


.gallery img {
    margin: 4px;
}

.editing {
    position: relative;
}

.panel-temp .edition-calque {
    display: none;
    /* width: max-content; */
}

.panel-temp.editing .edition-calque {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    top: 0;
    background-color: white;
    left: 0;
}

.panel-temp.editing .edition-calque h6 {
    background: white;
    color: black;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0px 0px 2px 0px white;
}

.editing::before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    left: 0;
    top: 0;
    background-color: #000;
    z-index: 9;
    opacity: 0.5;
}

.gall-insert-img,
.gall-delete-img {
    cursor: pointer;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.color-blue {
    color: #3F54BC !important;
}

.loader-text {
    margin-top: 32px;
    font-family: SuisseInt;
    color: #3F54BC;
}

.loader-container {
    background: lightgray;
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100%;
    z-index: 10000000000000000;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 1.5rem;
    color: #2f3035;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}

.fam-title {
    cursor: pointer;
}

.delta-positive {
    color: green !important;
}

.delta-positive::before {
    content: '+';
}

.delta-negative {
    color: red !important;
}

.pieces-controles img {
    /* width: 6px;
    height: 6px;

    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 10px;
    padding-right: 8.14px;
    /* White/15 */

    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    transform: matrix(0, 1, 1, 0, 0, 0);
}

#reportrange {
    height: 28px;
    color: #444;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    width: 100%;
    text-align: center;
}

.select2-results {
    text-align: left;
}


div.dataTables_wrapper div.dataTables_processing {
    z-index: 1;
    box-shadow: 0px 0px 15px 0px #75634e;
}

.img-fluid.backgimg {
    cursor: zoom-in;
}

.disabled-in-editing {
    pointer-events: none;


}

.disabled-in-editing-not-allowed {
    cursor: not-allowed !important;
}

.account_deletion_confirmation {
    background-color: white;
    border-radius: 25px;
    padding: 40px;
    border: 2px solid rgba(47, 48, 53, 0.5);
    /* opacity: 0.8; */
    /* box-shadow: 0px 0px 10px 1px white; */
}

.g-controles-bold {
    font-weight: bold;
    color: #3F54BC !important;
}

.entete-infos span {

    /* font-family: 'Suisse Int'l'; */
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 20px;
    /* identical to box height, or 200% */


    /* Primary/White 70% */

    color: rgba(255, 255, 255, 0.7);
}

.table-products-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    padding-left: 29px;
}

.products_comp_number {
    /* margin-top: 18px; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

span.totalproduct {
    /* font-family: 'Suisse Int\l';  */
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
}

span {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* color: #2F3035; */
}

.panier span.designation {
    padding-left: 18px;
}

div.designation {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 14px;
}

div.designation :nth-child(2) {
    color: #2F3035B2;

}

span.infos-design {
    float: left;
    margin-left: 42px;
}

.title-product {
    color: #2F3035;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    font-family: SuisseInt;
}

.title-product-bloc {
    text-align: left;
    margin-top: 53px;
    padding: 0 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.image-coll-finition {
    border-radius: 50%;
    height: 16px;
    width: 16px;
    position: relative;
    border: 1px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
}

span.image-coll-finition {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 9px;
    line-height: 16px;
    color: rgba(47, 48, 53, 0.7);
    background: #F6F6F6;
    border: 1.5px solid #F6F6F6;
    /* padding: 7px; */
    border-radius: 100px;
    height: 25px;
    width: 25px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.bloc-coll-finition {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bloc-coll-finition :nth-child(1) {
    right: -21px;
}

.bloc-coll-finition :nth-child(2) {
    right: -16px;
}

.bloc-coll-finition :nth-child(3) {
    right: -10px;
}

.bloc-coll-finition :nth-child(4) {
    right: -5px;
}

.image-collection {
    height: auto !important;
}

.website-header-link,
.previous-step-btn:hover {
    color: #2F3035 !important;
}

#preview-product:not(.mecastep) .comp-tot {
    display: none;
}

#preview-product.mecastep .comp-tot {
    display: block;
}

.row.current-meca-row {
    position: sticky;
    top: 42px;
    background: white;
    padding: 12px;
    z-index: 0;
}

.row.meca-nav-desk {
    position: sticky;
    top: -6px;
    background: white;
    z-index: 0;
    padding: 8px;
}

.website-header-link,
.previous-step-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 3px 4px 8px;

    /* width: 120px; */
    height: 32px;

    /* Primary/Primary 50% */

    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 8px;


    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 14px;
    /* identical to box height, or 171% */

    text-align: center;

    /* Primary/Primary */

    color: #2F3035;
}

.reset-filter-btn,
.login-btn-header,
.fonction-filter button.filter-btn {
    cursor: pointer;
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 10px;

    /* width: 108px; */
    height: 34px;

    /* Primary/Primary 50% */

    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 8px;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: center;

    /* Primary/Primary */

    color: #2F3035 !important;
    background-color: white;
}

.fonction-filter {
    position: sticky;
    top: -8px;
    background: white;
    z-index: 1;
    padding: 25px 0px;
}

div a.new-quote {

    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 4px 4px 12px;

    width: fit-content;
    height: 32px;

    /* Primary/Blue */

    background: #3F54BC;
    border-radius: 8px;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 14px;
    /* identical to box height, or 171% */

    text-align: center;

    /* White/100 */

    color: #FFFFFF !important;

}

div a.help {
    cursor: pointer;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: right;

    /* Primary/Primary */

    color: #2F3035 !important;
    padding-right: 20px;
}

.headder-actions-bloc {
    gap: 5px;
}

.list-gammes .detail {
    text-align: left;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    /* or 171% */


    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);

    margin-bottom: 16px;
}

.list-gammes .detail .voir-detail-bloc {
    position: absolute;
    top: 412px;
    left: 155px;

    display: none;
}

.buttons-choice {
    margin-top: 16px;
}

.buttons-choice {
    margin-top: 16px;
}

.format-item .img-overlay {
    max-width: 100%;
    max-height: 100%;
}

.format-item .format-image-preview {

    max-width: 100%;
    max-height: 100%;

}

.fonction-item .fonction-image-preview {
    max-width: 100%;
    max-height: 220px;

}

.interVisuel.small-switch .img-mecanisme {
    max-width: 57%;
    max-height: 48%;
}

.interVisuel.small-switch {
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-total hr {
    border-color: rgba(255, 255, 255, 0.2);
    width: 100%;
    margin: 8px 0px;
}

.format-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 29px;
    /* position: absolute; */
    position: relative;
    width: 190px;
    height: 100%;
    left: 32px;
    top: 12px;
}

img.format-image-preview {
    display: none;
    border-radius: 4px;
}

.format-item:hover img.format-image-preview {
    display: block;
    -webkit-animation: fadeIn 0.3s;
    animation: fadeIn 0.3s;
}

.format-item:hover img.img-overlay {
    display: none;
    -webkit-animation: fadeOut 0.3s;
    animation: fadeOut 0.3s;
}

.formats .list-formats .format-item:hover .voir-fonction {
    display: flex;
    -webkit-animation: fadeIn 0.7s;
    animation: fadeIn 0.7s;
}

.formats .list-formats .format-item:hover {
    border: 1px solid blue;
    border-radius: 12px;
}

.fonctions .list-fonctions .fonction-item:hover .voirmeca {
    display: flex;
    -webkit-animation: fadeIn 0.7s;
    animation: fadeIn 0.7s;
}

.fonctions .list-fonctions .fonction-item:hover {
    border: 1px solid blue;
    border-radius: 12px;
}

div.overlay-format {
    width: 190px;
    height: 200px;
    display: block;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.overlay-fonction {
    width: 190px;
    max-height: 220px;
    display: block;
    text-align: center;
    top: 25px;
    position: relative;
    margin-bottom: 50px;
}

span.format-name {

    text-align: left;
    display: flex;
    flex-direction: column;
}

.format-name span.sizes {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    /* or 171% */


    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);
}

.fonction-name {
    /* position: absolute; */
    /* bottom: 10px; */
    text-align: left;
    /* left: 32px; */
    /* right: 32px; */
}

.filters-bloc button.apply {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13px 16px 15px 20px;
    gap: 24px;
    height: 52px;
    background: #2F3035;
    border-radius: 8px;
    flex: none;
    flex-grow: 0;
    text-align: center;
    color: #FFFFFF;
    border: none;
    cursor: pointer;

}

.modal-footer {
    justify-content: center;
    gap: 32px;
    border: none;
    padding-bottom: 20px;
}

.btn.btn-danger,
button.swal2-cancel.swal2-styled,
button.cancel,
a.cancel,
.remove-el,
button.precedent-gravure,
button.delete-gravure {
    text-align: center;
    text-decoration-line: underline;
    border: none;
    background: white !important;
    color: rgba(47, 48, 53, 0.7) !important;
    cursor: pointer !important;

    font-family: 'SuisseInt';
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: center;
    text-decoration-line: underline;

    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);

    display: flex;
    align-items: center;
    min-width: fit-content;
}



.swal2-popup .swal2-actions {
    flex-direction: column !important;
}

.filters-bloc {
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: 32.38%;
    background: #FFFFFF;
    box-shadow: 0px 0px 24px rgb(0 0 0 / 10%);
    border-radius: 12px;
    z-index: 1;
    max-height: 650px;
    width: fit-content;
    height: fit-content;
    min-width: 350px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 0px;
    /* transform: translate(-50%,-50%); */
}

.filters-bloc div.filters-footer {
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: center;
    padding: 0px 27px;

}

.filters-bloc div.filters-header {
    display: flex;
    justify-content: space-between;
    padding: 0px 27px;
    gap: 12px;
}

.filters-bloc div.filters-body {
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 30px 0px 16px 0px;
    padding: 0px 27px;
    border-bottom: 1px solid #2F303526;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.filters-bloc div.filters-body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge add Firefox */
.filters-bloc div.filters-body {
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* Firefox */
}

.control {
    position: relative;
    cursor: pointer;
    height: 24px;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #2F3035;

    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row-reverse;
    gap: 16px;

    text-align: left;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control_indicator {
    position: relative;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background: white;
    border: 1.5px solid #2F3035;
    border-radius: 1px;
}

.control:hover input~.control_indicator,
.control input:focus~.control_indicator {
    /* background: #cccccc; */
}

.control input:checked~.control_indicator {
    background: #2f3035;
}

.control:hover input:not([disabled]):checked~.control_indicator,
.control input:checked:focus~.control_indicator {
    /* background: #2f3035; */
}

.control input:disabled~.control_indicator {
    background: #e6e6e6;
    opacity: 2;
    pointer-events: none;
}

.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}

.control input:checked~.control_indicator:after {
    display: block;
}

.control-checkbox .control_indicator:after {
    left: 7px;
    top: 3px;
    width: 3px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.control-checkbox input:disabled~.control_indicator:after {
    border-color: #7b7b7b;
}

.control-checkbox .control_indicator::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 4.5rem;
    height: 4.5rem;
    margin-left: -1.3rem;
    margin-top: -1.3rem;
    background: 2F3035;
    border-radius: 3rem;
    opacity: 0.6;
    z-index: 99999;
    transform: scale(0);
}

@keyframes s-ripple {
    0% {
        transform: scale(0);
    }

    20% {
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes s-ripple-dup {
    0% {
        transform: scale(0);
    }

    30% {
        transform: scale(1);
    }

    60% {
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

.control-checkbox input+.control_indicator::before {
    animation: s-ripple 250ms ease-out;
}

.control-checkbox input:checked+.control_indicator::before {
    animation-name: s-ripple-dup;
}

.filters-overlay {
    height: 100vh;
    width: 101%;
    position: fixed;
    background: #191b27d9;
    top: 0;
    left: 0;
    z-index: 10000;
}

span#compo-total-ht {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #2F303580;
    font-size: 12px;
}

span#compo-total-ht .tot {
    color: #2F3035;
    font-size: 12px;
}

.insert-to-devis-bloc {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: start;
    gap: 9px;
    padding-top: 7px;
    padding-bottom: 10px;
}

.meca-overlay {
    border: 2px dashed black;
    width: 100%;
    display: block;
    position: absolute;
    left: -12px;
    top: -10px;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgb(63 84 188 / 52%);
}

.meca-overlay:not(.current-tab) {
    opacity: 0;
}

.meca-current-tab {
    position: absolute;
    left: 32px;
    top: 0;

}

.filters-bloc .closed {
    /* height: 0px; */
    height: 0px;
    display: none;
}

.filters-bloc .functions {}

.meca-tabs {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    /* width: 193px; */
}

.meca-next-tab,
.meca-previous-tab {
    cursor: pointer;
}

.current-meca-row {
    justify-content: center;
    align-items: center;
    /* padding: 15px; */
    margin: 15px 0px 25px;
}
/* Conteneur du menu déroulant */
/* Liste principale des régions */

/* Style global pour le popup */
.tooltip-popup {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: none; /* masqué par défaut */
}




.custom-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 5px;
    margin-top: 5px;
}

/* Groupe de pays par région */
.optgroup {
    margin-bottom: 10px;
}

.region-title {
    font-weight: bold;
    margin: 10px 0;
    cursor: pointer;
    color: #007BFF;
}

.country-list {
    display: none;
}

/* Ouverture des pays au clic sur la région */
.optgroup.open .country-list {
    display: block;
}

/* Style du bouton "Enregistrer" */
#save-settings {
    background-color: #007BFF;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

#save-settings:hover {
    background-color: #0056b3;
}

/* Dropdown arrow */
.headder-lang-bloc {
    position: relative;
    cursor: pointer;
}

.arrow-down {
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    margin-left: 5px;
    transform: rotate(45deg);
}
#switch-country {
    background: #3F54BC !important;
    margin-bottom: 10px;
    color: #fff;
}
#stay-here {
    background: #000 !important;
    color: #fff;
    margin-bottom: 10px;
}

.headder-lang-bloc:hover .header-lang-list {
    display: flex;
}

.header-lang-list {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 25px;
    left: -10px;
    gap: 4px;
    background: white;
    z-index: 10;
}

.header-lang-list a {
    padding: 10px;
}

.header-lang-list a:hover {
    background-color: #0101011A;
}

.header-profil-list {

    display: none;
    position: absolute;
    width: 270px;
    height: 245px;
    right: 0;
    top: 12px;

    background: #FFFFFF;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    z-index: 1;
    padding: 19px 24px 21px 24px;
    gap: 12px;
}

.header-profil-bloc:hover .header-profil-list {
    display: flex;
}

.header-profil-bloc:hover .header-profil-el {
    display: block;
}

.header-profil-bloc {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 3px 4px 11px;

    /* width: 105px; */
    height: 32px;

    /* Black/10 */

    background: rgba(1, 1, 1, 0.1);
    border-radius: 8px;

    cursor: pointer;
}

a:hover {
    /* color: #0056b3; */
    text-decoration: none !important;
}

.header-profil-el {
    width: 300px;
    position: absolute;
    height: 200px;
    background: transparent;
    right: 0;
    top: 28px;
    z-index: 1;
    display: none;
}

.modal-store-phone,
.modal-store-email,
.modal-store-website-url {
    display: flex;
    gap: 4px;
}

.header-profil-list a {
    /* 1440/Label/Button */

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: left;

    /* Primary/Primary */
    text-decoration: none;
    color: #2F3035;

    display: flex;
    align-items: center;
    gap: 8px;
}

.header-profil-list a.logout {
    color: #8F4638;
}

.gravure-bouton {
    background: none;
    border: none;
    text-decoration: underline;
    padding: 0;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 18px;
    line-height: 24px;
    text-decoration-line: underline;

    color: #2F3035;
    text-align: left;

    display: flex;
    justify-content: start;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.canvas-controles {
    margin: 10px 0px;
    justify-content: space-between;

}

input[type=range] {
    width: 100%;
    margin: 7px 0;
    background-color: transparent;
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    background: rgba(47, 48, 53, 0.78);
    border: 1px solid #010101;
    border-radius: 19.7px;
    width: 100%;
    height: 2px;
    cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
    margin-top: -8px;
    width: 16px;
    height: 16px;
    background: #2f3035;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #3d3f45;
}

input[type=range]::-moz-range-track {
    background: rgba(47, 48, 53, 0.78);
    border: 1px solid #010101;
    border-radius: 19.7px;
    width: 100%;
    height: 2px;
    cursor: pointer;
}

input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #2f3035;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 7.9px 0;
    color: transparent;
    width: 100%;
    height: 2px;
    cursor: pointer;
}

input[type=range]::-ms-fill-lower {
    background: #212125;
    border: 1px solid #010101;
    border-radius: 39.4px;
}

input[type=range]::-ms-fill-upper {
    background: rgba(47, 48, 53, 0.78);
    border: 1px solid #010101;
    border-radius: 39.4px;
}

input[type=range]::-ms-thumb {
    width: 16px;
    height: 16px;
    background: #2f3035;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
}

input[type=range]:focus::-ms-fill-lower {
    background: rgba(47, 48, 53, 0.78);
}

input[type=range]:focus::-ms-fill-upper {
    background: #3d3f45;
}

/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
  how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {

    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
    input[type=range] {
        margin: 0;
        /*Edge starts the margin from the thumb, not the track as other browsers do*/
    }
}


.canvas-controles .zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12.5px;
}

.canvas-controles .zones {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.canvas-controles .zones div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

button.grav-preview {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 4px 4px 12px;

    height: 32px;
    border: none;
    cursor: pointer;
    background: #2F3035;
    border-radius: 8px;

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: center;

    /* White/100 */

    color: #FFFFFF;
}

.grav-btns-bloc {
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: absolute; */
    gap: 32px;
    bottom: 0;
    left: 0;
    right: 0;
}

.swal2-popup .swal2-file:focus,
.swal2-popup .swal2-content .swal2-input:focus,
.swal2-popup .swal2-textarea:focus {
    border: 1px solid #2F3035;
    outline: unset;
    box-shadow: unset;
}

#profil .form-control {
    width: 100%;
}

.swal2-popup input.swal2-input,
input.gravure-input.text-insert-val,
input[type=text]:not(#input-store),
input[type=email],
input[type=password],
div.dataTables_wrapper div.dataTables_filter input,
.form-control {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    gap: 193px;
    /* position: absolute; */
    /* width: 300px; */
    height: 52px;
    /* right: 20px; */
    /* left: 20px;
    top: 14px; */
    /* left: 47px;
    top: 324px; */

    /* Primary/Primary */
    border: 1px solid #2F3035;
    border-radius: 8px;
}

.grav-el-line input.controles-input {
    height: 30px !important;
}

select#font-family {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2px 12px 2px 20px;
    width: fit-content;
    height: 28px;

    /* Primary/Primary 8% */
    background: rgba(47, 48, 53, 0.08);
    border-radius: 8px;
    border: none;

    /* Inside auto layout */
    flex: none;
    flex-grow: 0;
}

div.div.text-input-bloc {
    margin-bottom: 24px;
}

div.symb-input-bloc,
div.symbol-preview {
    margin-bottom: 12px;
}

.text-head-subtitle {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: center;

    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);
}

.grav-el-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.grav-el-header {
    flex-direction: column;
    /* min-height: 118px; */
    align-items: center;
    background: transparent;
    /* min-height: 132px; */
    justify-content: center;
    position: relative;
    padding: 20px;
    width: 100%;
}

.el-div.closed {
    position: relative;
}

.el-div.closed .grav-el-header {
    display: none;
}

.el-div.closed input.text-insert-val {
    background: transparent;
    border: none !important;
    height: 24px !important;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #2F3035;
    flex: none;
    flex-grow: 0;
    right: 88px;
    position: relative;
    width: 60%;

}

.el-div.closed .text-input-bloc {
    position: relative;
    left: 24px;
    top: 16px;
    width: 100%;
}

.el-div:not(.closed) .text-input-bloc img {
    display: none;
}

.el-div.closed .grav-el-line:not(.text-input-bloc) {
    display: none;
}

.el-div.closed .settings-bloc {
    display: none;
}

.el-div .grav-el-line .action-btns {
    display: none;
}

.el-div.closed .grav-el-line .action-btns {
    display: flex;
    position: absolute;
    left: 215px;
}

.edit-grav-el,
.delete-grav-el {
    cursor: pointer;
}

/* * landing Page Section */

.line-with-text {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 28px;
    margin-bottom: 28px;
    width: 100%;

}

.line {
    display: flex;
    justify-content: center;
    height: 1px;
    background-color: rgba(47, 48, 53, 0.15);
    width: 100%;
}

.text {
    margin: 0 10px;
    color: rgba(47, 48, 53, 0.7);
}

.modal .modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;

    left: 50%;
    top: 50%;

    margin: 0 !important;
    width: 416px;

    transform: translate(-50%, -50%) !important;
    /* overflow: hidden; */
    /* padding: 15px; */
}

div.dataTables_wrapper div.dataTables_length select {
    width: fit-content !important;
    display: inline-block;
    /* display: flex; */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 3px 4px 3px;
    /* position: absolute; */
    width: fit-content;
    height: 32px;
    right: 1286px;
    top: 247px;
    background: #2F3035;
    border-radius: 8px;
    color: white;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}

.panier .composant-header {
    justify-content: start;
    padding-right: 3px;
}

.mon-devis-button-mobile img {
    transform: rotate(180deg);
}

.create-gravure-bloc {
    display: none;
}

.insert-to-devis-bloc .create-gravure-bloc {
    display: block;
}

label.hamburger {
    border-radius: 5px;
    background: rgba(47, 48, 53, 0.15);
    border-radius: 8px;
    padding: 10px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.loader {
    width: 72px;
    height: 72px;
    display: grid;
    color: #2f3035;
    background: radial-gradient(farthest-side, currentColor calc(100% - 8.6px), #0000 calc(100% - 7.2px) 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 18.7px), #000 calc(100% - 17.3px));
    border-radius: 50%;
    animation: spinner-sm4bhi 1.6s infinite linear;
}

.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    background: linear-gradient(currentColor 0 0) center,
        linear-gradient(currentColor 0 0) center;
    background-size: 100% 14.4px, 14.4px 100%;
    background-repeat: no-repeat;
}

.loader::after {
    transform: rotate(45deg);
}

@keyframes spinner-sm4bhi {
    100% {
        transform: rotate(1turn);
    }
}

.modal-body {
    padding: 25px 57px;
}

.close span {
    font-size: 24px;
    position: absolute;
    right: -20px;
    top: 0px;
}

.close span.creation-close {
    right: 16px;
    top: 6px;
}


.close span.login-alert-close {
    right: 8px;
}

.close {
    margin: 0;
    padding: 0;
    position: relative;
}

#forgotpassword .forgotpasssubmit {
    height: auto;
    padding: 8px 25px;
}

#forgotpassword .modal-footer {
    padding: 12px;
    padding-bottom: 20px;
}

#forgotpassword .modal-body {
    padding: 10px 57px;
}

#username-error {
    display: flex;
    font-size: 10px;
}

.label-forgot-password {
    font-size: 13px;
    margin-bottom: 0.7rem;
    line-height: 20px;
    color: rgba(47, 48, 53, 0.7);
}

#popup-update-pwd-show,
#popup-update-cpwd-show {
    position: absolute;
    height: 24px;

    right: 35px;
    top: 47px;
}


/* Store Loc Override*/
.chose-dist .search-label {
    width: 100%;
}

.chose-dist input#input-store {
    max-width: 89%;
}

.chose-dist .search-label span {

    font-size: 32px;
    color: #A9896E;
    font-family: inherit;

}

.chose-dist #search-custom-input {
    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 8px;
    padding: 11px 20px;
    margin-top: 43px;
    height: 52px;
}

.chose-dist h3.search-label {
    max-width: 300px;
    margin: 0;
    width: 100%;
    margin-top: 65px;
}


.chose-dist .results-bloc {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.chose-dist .store-count {
    justify-content: space-between;
}

.chose-dist .results-bloc .search-label {
    text-align: left;
}

.chose-dist .store-card {
    width: 100%;
    min-height: 256px;
}

.store-count-img {
    display: none;

}

.chose-dist .store-count-img {
    display: block;
}


div.distance {
    display: none;
    /* Primary/Light Grey */
}

.chose-dist div.distance {
    display: block;
    width: fit-content;
    background: #F6F6F6;
    border-radius: 8px;
    padding: 14px 42px;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #2F3035;
}

.chose-dist div.distance span.number {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #A9896E;
}

.chose-dist .search-bloc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.chose-dist .store-card div.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0px;
    background: white;
    border: none;
}

.chose-dist #normal-mode-arrow-corner,
.chose-dist #dark-mode-arrow-corner {
    display: none;
}

.chose-dist .store-contact span.phone,
.chose-dist .store-contact span.email {
    font-family: 'SuisseInt';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: rgba(47, 48, 53, 0.7);
    display: flex;
    gap: 6px;
}


.chose-dist .store-contact {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.num-circle-bloc {
    display: flex;
    gap: 12px;
}

.results-bloc .carte-icons .others {
    max-width: 100%;
    /* padding: 0px 29px; */
    background: #FFFFFF;
    /* Primary/Primary 15% */

    border: 1px solid rgba(47, 48, 53, 0.15);
    border-radius: 12px;

    height: 75px;
}

.results-bloc .carte-icons {
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

.results-bloc .carte-icons .ispremium span.text {
    color: white;
    font-family: SuisseInt;

}

.results-bloc .carte-icons span.text {
    text-align: left;
    line-height: 16px;
}

.results-bloc .carte-icons .ispremium {
    background: #A9896E;
    padding: 0px 28px 0px 25px;
    border-radius: 12px 0px 0px 12px;
    display: flex;
    align-items: center;
    color: white;
    width: fit-content;
}

.card-footer .btn-favoris {
    width: fit-content;
    height: 52px;
    cursor: pointer;
}

.chose-dist .store-card.selected .card-footer {
    background: rgb(47, 48, 53);

}

.chose-dist .store-card.selected .btn-favoris {
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;

}

.chose-dist .store-card.selected .btn-favoris img {
    filter: invert(1);
}

.chose-dist .store-card.selected .store-contact img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(366deg) brightness(439%) contrast(52%);
}


.chose-dist .store-card.selected div.distance {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

.chose-dist .store-card.selected div.distance .number {
    color: #FFFFFF;
}

.chose-dist .store-card.selected .store-contact span {
    color: #FFFFFF;
}

.chose-dist .store-card.selected .store-count-img .dark {
    display: block;
}

.chose-dist .store-card.selected .store-count-img .white {
    display: none;
}

.store-count-img .dark {
    display: none;
}


.store-favoris-modal-bloc {
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
}

.store-favoris-modal {

    width: 440px;
    background: white;
    border-radius: 8px;
}

.modal-map-content fieldset.carte-icons .items,
.modal-map-content fieldset.carte-icons .items .others {
    width: 100%;
    max-width: 100%;
}


.modal-map-content fieldset.carte-icons .items .item2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

button.btn-chose-other-dist-fav {
    background: none;
    border: none;
    cursor: pointer;
}

div#envoyer-devis {
    width: 50%;
    padding: 0px 48px;
    background: transparent;
}

.envoyer-devis-cart .website-header-link {
    margin-bottom: 28px;
    width: fit-content;
}

.envoyer-devis-cart .website-header-link:hover {
    color: #2F3035;
}

.envoyer-devis-cart h5.title {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 32px;
    /* identical to box height, or 100% */


    /* Primary/Primary */

    color: #2F3035;

}

.envoyer-devis-cart span.subtitle {
    /* 1440/Text/Body S */

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */


    /* Primary/Primary 70% */

    color: rgba(47, 48, 53, 0.7);

}

.envoyer-devis-cart .content {
    margin-top: 20px;
    border: 1px solid rgba(47, 48, 53, 0.15);
    border-radius: 12px;
    padding: 24px 36px;

}

.quote-sent-success-bloc {
    display: flex;
    flex-direction: column;
    /* padding: 150px; */
    width: 50%;
    padding: 100px;
    justify-content: center;
    align-items: center;
}

.quote-sent-success-bloc .title-bloc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 56px;
}

.quote-sent-success-bloc .title-bloc h5.title {
    font-family: 'SuisseIntl';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 32px;
    text-align: center;
    color: #2F3035;
}

.quote-sent-success-bloc .title-bloc span.subtitle {
    font-family: 'SuisseIntl';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: rgba(47, 48, 53, 0.7);
    padding: 0px 58px;
}

.quote-sent-success-bloc .btns-bloc .text span {
    /* 1440/Title/H3 */

    font-family: SuisseInt;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    /* identical to box height, or 125% */

    text-align: center;

    color: #2F3035;
}

.quote-sent-success-bloc .btns-bloc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 54px 21px;
    border: 1px solid rgba(47, 48, 53, 0.15);
    border-radius: 12px;
    width: 100%;
}

.quote-sent-success-bloc .btns-bloc .btns {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    width: 64%;
}

.select-nouv-dist-pref {
    display: flex;
    /* width: fit-content; */
    margin: 32px auto;
    gap: 14px;
    width: 280px;
    justify-content: center;
}

a.btn-chose-other-dist-fav {
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: #2F3035;
    cursor: pointer;
    display: flex;
}

.store-card .store-contact,
.store-card .card-footer {
    display: none;
}

.chose-dist .store-card .store-contact,
.chose-dist .store-card .card-footer {
    display: flex;
}

.recup-mpd-block {
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 56px 58px 42px 58px;
    margin-top: 8vh;
}

.recup-mpd-block h3 {
    margin-bottom: 5vh;
    width: 320px;
}

.recup-mdp-field {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 14px;
}

.recup-mdp-field label {
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 20px;
    color: rgba(47, 48, 53, 0.7);
    margin-bottom: 1px;
    /* display: flex;
    flex-direction: column;
    align-self: start; */
}

#recup-pwd-show,
#recup-cpwd-show {
    height: 24px;
    position: absolute;
    top: 35px;
    right: 15px;
}

.title-product small {
    font-family: 'SuisseInt';
}

.content-configurateur .close span {
    position: relative;
    right: 0;
    top: 0;
}

#go-config-noauth-btn,
#go-config-noauth-btn-2,
#go-config-noauth-btn-3 {
    background: #3F54BC !important;
    color: #3F54BC !important;
}

@media only screen and (max-width: 767px) {
    .chose-dist .store-card div.card-footer {
        flex-direction: column;
        padding: 0;
        justify-content: start;
        align-items: start;
        gap: 12px;
    }

    .chose-dist .store-card div.card-footer>* {
        width: 100%;
    }

    .chose-dist .store-card .store-contact {
        flex-direction: column;
        padding: 0;
        justify-content: start;
        align-items: start;
        gap: 12px;
    }

    .chose-dist .store-card .store-contact>* {
        width: 100%;
    }

    .chose-dist .store-count {
        flex-direction: column;
        padding: 0;
        justify-content: start;
        align-items: start;
        gap: 12px;
    }

    .chose-dist .store-count>* {
        width: 100%;
    }

    .chose-dist .store-card {
        padding: 25px 12px;

    }

    .chose-dist .search-box.ml-auto.mr-auto {
        padding: 0px 10px;
    }

    .chose-dist .results-bloc .carte-icons .ispremium {
        padding: 0px 4px 0px 4px;
    }
}

#go-config-noauth-btn-2 {
    margin-top: 10px;
}

@media only screen and (min-width: 1025px) {
    #go-config-noauth-btn-3 {
        display: none;
    }
}

@media only screen and (max-width: 1025px) {
    .login {
        top: 100px;
        left: 0;
        right: 0;
        margin: 0 auto;
        /* width: 95%; */
        padding: 35px 35px 20px 35px;
    }

    #inscription {
        top: 100px;
        left: 0;
        right: 0;
        max-width: 648px;
        width: auto;
        margin: 0 auto;
    }

    #pills-tabContent {
        padding: 5px;
    }

    #inscription .inscription-form-wrapper {
        max-width: 532px;
        width: auto;
    }

    .navigation-tab-footer {
        margin-top: 0px;
        margin-bottom: 10px;
    }

    .tab-content>.tab-pane:first-child>div:last-child {
        margin-bottom: 24px !important;
    }

    #pills-home-tab,
    #pills-profile-tab,
    #pills-contact-tab {
        padding: 0;
    }

    #create-account-btn {
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 600px) {
    #inscription {
        width: 95%;
    }

    #go-config-noauth-btn-3 {
        display: block;
        background: #3F54BC !important;
        color: #3F54BC !important;
    }

    /* #create-account-btn{
        margin-bottom: 10px;
    } */
}

@media only screen and (max-width: 500px) {
    .pwd-fields-wrapper {
        flex-direction: column;
        gap: 40px !important;
    }

    #inscription .nav-pills {
        margin-bottom: 10px;
    }

    #inscription p {
        margin-left: 40px;
        margin-right: 40px;
        margin-bottom: 10px;
    }

    .login {
        width: 95%;
    }

    #inscritpion .inscription-form-wrapper {
        padding: 0px 15px;
    }

    #inscription .civility-form-block {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 400px) {

    #inscription .nav-link,
    #inscription .nav-link.disabled,
    #inscription .nav-link.active {}
}

#login-close {
    position: absolute;
    right: 35px;
    top: 7px;
    /* height: 24px; */
    /* background-color: #2F3035; */
    border-radius: 25px;
}

#create-account-btn-2 a {
    color: #000 !important;
}

#logo {
    width: 100px;
}

.cls-1 {
    animation: a-loader 2s linear infinite;
    color: #31CC89;
    fill: none;
    stroke: #051B3F;
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-width: 10;
    width: 6rem;
}


@keyframes a-loader {
    100% {
        stroke-dashoffset: 0;
    }
}

button.filter-btn.filters-applied {
    background: #2F3035;
    color: #FFFFFF !important;
    gap: 15px;
}

span.filters-nbr {
    display: flex;

    align-items: center;
    justify-content: center;
    padding: 0px;
    gap: 10px;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border-radius: 24px;

    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    /* or 171% */

    display: flex;
    align-items: center;
    text-align: center;

    /* Primary/Primary */

    color: #2F3035;

    min-width: fit-content;
}

.filters-header button.filter-btn.filters-applied {
    padding: 10px 20px;
    gap: 15px;
}

.filters-header span.filters-nbr {
    width: fit-content;
    padding: 10px;
}

#home-menu-connected {
    width: 280px;
    position: absolute;
    top: 320px;
    left: 550px;
}

.options-auth-li a {
    color: #2F3035;
}

.options-auth-li a:hover {
    opacity: 0.7;
}

.options-auth-ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.select-qty .select_arrow {
    position: absolute;
    top: 13px;
    right: 13px;
    pointer-events: none;
    border-style: solid;
    border-width: 8px 5px 0px 5px;
    border-color: #7b7b7b transparent transparent transparent;
}

.select-qty select {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    /* padding: 10px 15px; */
    outline: 0;
    border: 0px solid #000000;
    border-radius: 0px;
    background: #3f414f;
    color: #FFFFFF;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

}

.select-qty select::-ms-expand {
    display: none;
}

.qty-bloc {
    display: flex;
    align-items: center;
}

.select-qty-popup select.quantite-produits {
    display: flex;
    width: auto;
    min-height: 0;
    padding: 0.875rem 1.25rem;
    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 0.5rem;
    color: inherit;
    font-size: inherit;
    width: 100%;
    font-weight: 400;

    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
    background: url(../images/home/ArrowSmallDownSelect.png);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-position-x: 96%;
    background-position-y: 45%;
}

#bloc-distributor {
    offset-anchor: 25% 75%;
}

#go-config-noauth-btn-1 {
    background: #2F3035 !important;
    color: #fff !important;
    border: 1px solid rgba(47, 48, 53, 0.5);
}

#myModal2 .modal-dialog {
    max-height: 90vh;
    max-width: 90vw;
    width: 90vw;
    height: 90vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#myModal2 .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#myModal2 .modal-body {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

#myModal2 #canvas-preview {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
}

.format-items.CVL div.overlay-format {
    width: 210px;
    height: 230px;

    text-align: center;
    justify-content: center;
    /* align-items: center; */
    /* top: 45px; */
    position: relative;
}

.format-items.CVL .format-detail {

    gap: 45px;
    width: 190px;
    height: 100%;
    left: 19px;
    top: 2px;
}

.format-items.CVL .format-item .img-overlay,
.format-items.CVL .format-item .format-image-preview {
    width: 100%;
    height: 125px;
}

.format-items.CVL .formats .list-formats .format-item {
    min-height: 335px;
}

.filters-overlay.functions .filters-body .control-checkbox.familly {}

.meca-overlay.current-tab::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: blue;
    position: relative;
    left: -54px;
    top: 20px;
}

.horizontal-format .meca-overlay.current-tab::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: blue;
    position: relative;
    left: 0;
    top: -30px;
}

.fam-checkbox-bloc {
    display: flex;
    align-items: baseline;
    gap: 20px;
    justify-content: space-between;
}

.fam-checkbox-bloc .toggle-fonctions-liste {
    cursor: pointer;
}

.change-pswd-bloc {
    display: flex;
    align-items: center;
    justify-content: start;
    top: 9px;
}

.font-size-input-container {
    position: relative;
}

.font-size-input {
    border: none;
    background-color: transparent;
    padding: 5px;
    font-size: 14px;
    cursor: pointer;
}

.font-size-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
}

.font-size-options {
    list-style: none;
    padding: 0;
    margin: 0;
}

.font-size-options li {
    padding: 8px;
    cursor: pointer;
}

.font-size-options li:hover {
    background-color: #f2f2f2;
}

input.quantite-produits.quantity,
input.quantite-produits.quantity-gravure {
    width: 100%;
    background: white;
    border: 1px solid;
    border-radius: 4px;
    padding: 8px 10px;
}


.number-list {
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 121px;
    overflow: auto;
    background: white;
    width: 90%;
    align-items: flex-start;
}


span.number-option {
    width: 100%;
    padding: 8px;
    text-align: left;
    cursor: pointer;
}

span.number-option:hover {
    background-color: #3F54BC;
    color: white;
}

#popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    text-align: center;
}

#popupImg {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    margin-top: 20vh;
}

.backgimg {
    cursor: pointer;
}

.table-products-total .quantite-produits {
    width: 100%;
    background: transparent;
    border: none;
    color: white;
    outline: none;
}

.table-products-total .number-list {
    background: #3f414f;
    left: 0;
    width: 100%;
    padding-left: 6px;
    z-index: 999;
    border-radius: 0px 0px 8px 8px;
    top: 24px;
    padding-top: 5px;
}
.connect-as{
    color:white !important;
}
.website-home-link-ops{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 12px 4px 8px;
    /* width: 201px; */
    height: 32px;
    border: 1px solid rgba(47, 48, 53, 0.5);
    border-radius: 8px;
    font-family: SuisseInt;
    font-style: normal;
    font-weight: 450;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    width: 150px;
    margin: 40px auto;
    margin-bottom: 10px;

    color: #2f3035;
}

.grav-el-line span.italic{
    font-family: serif;
    font-style: italic;
    font-weight: bold;
}

.font-controles-bloc{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

}
.grav-el-line .font-controles-bloc span.noselect{
    background: rgba(47, 48, 53, 0.08);
    padding: 0px 6px;
    text-align: center;
    border-radius: 4px;
    display: flex;
    margin-right: 6px;
    width: 20px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.grav-el-line .font-controles-bloc span.noselect.color-blue{
    background: #2F3035 !important;
    color: white !important;
}
.head-list.titre-page .alert.alert-warning.alert-dismissible.fade.show .close span{
    right: 4px;
}
span.updated-price-notice{
    text-transform: none;
}
.row.el-div span.mirror {
    background: #efefef;
    padding: 9px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}
.row.el-div span.mirror.vertical img{
    transform: rotate(90deg);
}
.grav-el-line.mirror-row{
    gap: 148px;
    justify-content: left;
}
/* General Styles */

.user-options {
    display: flex;
    gap: 3px;
    align-items: center;
}

.option-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #9E9FA0;
    color: #212529;
    background-color: white;
    width: 160px;
    height: 35px;
    cursor: pointer;
}

.option-label {
    font-size: 10px;
    color: #64696E;
}
.country-name, .option-label, .language-name {
    line-height: 15px;
}
.country-btn, .language-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    font-size: 12px;
    cursor: pointer;
}

.flag-icon {
    width: 17px;
    height: 17px;
    margin-right: 10px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 2px;
}

  .popup-block, .popup-overlay {
    display: none;
}

.popup-block.is-visible, .popup-overlay.is-visible {
    display: block;
}
  .popup-block {
    display: none;
    position: absolute;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    width: 315px;
}
  
  .popup-header h2 {
    margin: 0 0 10px;
    font-size: 20px;
  }
  
  .popup-header p {
    color: #777;
    font-size: 14px;
  }
  .popupOverlay {
    display: none; /* Cachée par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    z-index: 999;
}
.popup-overlay {
    display: none;  /* Initialement caché */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    z-index: 999; /* S'assurer que l'overlay est au-dessus des autres éléments */
}
.popup-overlay.active {
    display: flex;
#country-popup .close span {
    right: -45px;
    top: -20px;
}
.custom-select.active, .custom-langue-select.active {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(128, 189, 255, .5);
}
/* Boutons */
.save-btn {
    background-color: #3F54BC;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    margin: 10px 0;
    cursor: pointer;
    font-size: 16px;
  }

  .save-btn:hover {
    background-color: #3f414f;
  }
  
   /* Formulaire */
   .location-form {
    margin: 15px 0;
    text-align: left;
  }

  .location-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .location-form select, .location-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  /* Conteneur principal */
.custom-select-container, .custom-langue-select-container {
    position: relative;
    width: 100%;
    max-width: 300px;
}
.custom-select-container label {
    margin-bottom: 0;
}
/* Style de la boîte de sélection */
.custom-select, .custom-langue-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    position: relative;
    margin-bottom: 10px;
}

.custom-select-placeholder, .custom-langue-select-placeholder {
    color: #666;
}
/* Liste des options */
.custom-options-container, .custom-options-langue-container {
    display: none; /* Cacher les options par défaut */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 999;
    margin-top: 5px;
}

.custom-option, .custom-langue-option {
    display: flex;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid #f9f9f9;
    text-align: left;
    align-items: center; 
}

.custom-option:hover, .custom-langue-option:hover {
    background-color: #f1f1f1;
}

/* Afficher les options quand nécessaire */
.custom-select.opened + .custom-options-container, .custom-langue-select.opened + .custom-options-langue-container {
    display: block;
    max-height: 600px;
    overflow-y: auto;
    max-width: 80vw;
    max-height: 50vh;
    overflow-y: auto;
}

/* Style des régions */
.custom-region {
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    background-color: #f0f0f0;
    display: flex;
    justify-content: space-between; /* Aligne le nom de la région à gauche et la flèche à droite */
    align-items: center;
    border: 1px solid #ddd;
}

.custom-region:hover {
    background-color: #e5e5e5;
}
.region-arrow {
    font-size: 12px;
    transition: transform 0.2s ease-in-out;
}
.custom-region.open .region-arrow {
    transform: rotate(180deg); /* Fait pivoter la flèche lorsqu'elle est ouverte */
}
/* Cacher les pays par défaut */
.custom-countries-container {
    display: none;
    padding-left: 20px;
    max-height: 300px; /* Limite la hauteur des pays */
    overflow-y: auto;  /* Défilement vertical */
    padding: 5px;
}

.custom-countries-container.active {
    display: block;
}

/* Afficher les pays quand la région est active */
.custom-countries-container.opened {
    display: block;
}

.region-separator {
    border: none;
    border-top: 1px solid #ddd; /* Ligne de séparation */
    margin: 1px 0; /* Marge pour espacer les régions */
}