@font-face {
  font-family: "Muli-Regular";
  src: url("../fonts/muli/Muli-Regular.ttf"); }
@font-face {
  font-family: "Muli-SemiBold";
  src: url("../fonts/muli/Muli-SemiBold.ttf");
}
@font-face {
  font-family: "Muli-Bold";
  src: url("../fonts/muli/Muli-Bold.ttf");
}
@font-face {
  font-family: "HelveticaNeueLTCom-Roman";
  src: url("../fonts/HelveticaNeueLTCom/HelveticaNeueLTCom-Roman.ttf"); }
@font-face {
  font-family: "HelveticaNeueLTCom-Medium";
  src: url("../fonts/HelveticaNeueLTCom/HelveticaNeueLTCom-Md.ttf");
}
@font-face {
  font-family: "HelveticaNeueLTCom-Bold";
  src: url("../fonts/HelveticaNeueLTCom/HelveticaNeueLTCom-Bd.ttf");
}
@font-face {
    font-family: "HelvNeueOrangeMd";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/HelveticaNeueLTCom/HelvNeue55_W1G.woff2") format("woff2");
    font-display: swap
}

@font-face {
    font-family: "HelvNeueOrangeBd";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/HelveticaNeueLTCom/HelvNeue75_W1G.woff2") format("woff2");
    font-display: swap
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*# sourceMappingURL=style.css.map */
@font-face {
	font-family: 'Linearicons-Free';
	src:url('fonts/Linearicons-Free.eot?w118d');
	src:url('fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),
		url('fonts/Linearicons-Free.woff2?w118d') format('woff2'),
		url('fonts/Linearicons-Free.woff?w118d') format('woff'),
		url('fonts/Linearicons-Free.ttf?w118d') format('truetype'),
		url('fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: "Impact"; src:url('fonts/Impact-Font/impact.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Dominik Thin"; src:url('fonts/Dominik_Thin/DOMINIKTH.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Roboto Light"; src:url('fonts/roboto/Roboto-Light.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
  font-family: "Muli-SemiBold";
}

.navbar-collapse
{
    width: auto
}
.navbar
{
    transition: all 0.5s;
    z-index: 997;
    border-bottom: 1px solid #e6f2fb
}

.navbar-brand {
    color: #16507b;
}
.navbar-dark .navbar-nav .nav-link {
    display: block;
    position: relative;
    color: #124265;
    transition: 0.3s;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
}
#main
{
    margin-top: 100px;
    margin-bottom: 20px;
}
.fa-calendar-check,.fa-user-clock
{
    color:#666
}
#nameLogin:focus
{
 border: 1px solid red;
}
#refLogin:focus
{
 border: 1px solid red;
}

#page-top{
    background: #1752bc08;
}
.align-items-center
{
    border-radius: .25rem!important;
    color: #fff!important;
    padding: 1rem!important;
    margin-top: 1rem!important;
    margin-bottom: 1rem!important;
    align-items: center!important;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    display: flex!important;
}
.proDiv .align-items-center
{
    padding: 0.5rem!important;
}

.mb-0 {
    margin-bottom: 0!important;
     margin-top: 0!important;
}
img, svg {
    vertical-align: middle;
}
.d-flex {
    display: flex!important;
}
.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}
.form-horizontal
{
    background: white!important
}
#content
{
    position: relative;
    min-height: 500px;
}
.navbar-brand
{
    font-size: 24px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 300;
    letter-spacing: 0.5px;
        padding-top: 12px;
         color: white!important;
         font-family: "Inter", sans-serif;
         font-weight: 700;
}
.connexionDiv,.userProfileLogin,.languageSwitch
{
    font-family: "Inter", sans-serif;
    font-weight: 700;
}
.navbar-brand:hover
{
    color: grey!important
}
.container-fluid
{
    margin-top: 20px;
}

#heading {
    text-transform: uppercase;
    color: #16507b;
    font-weight: normal
}

#msform {
    text-align: center;
    position: relative;
    margin-top: 20px;
    border-bottom: 1px dashed #0000000d
}
.btn-success
{
 color: #000;
    background: #ededed;
    border-color: #949494;
}

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative
}

.form-card {
    text-align: left
}

.cardFieldComponent label,.form-group-cguPopup{
    color: #333333d1;
}
#saveApp,#confirmInquiryQuestions
{
    background: #16507b;
    border-color: #0a2f4a;
}

#msform fieldset:not(:first-of-type) {
    display: none
}

.button-add-calendar {
    width: 35px;
    height: 35px;
    background-image: url(../img/ical.jpg);
    background-size: 35px;
    border: none;
}

.iconApp{
        margin: 5px;
    text-align: center;
    border-color: #1752bc1c;
    color: #16507b;
    border-right: 1px solid #333;
}

.appDiv{
    display: flex;
    vertical-align: middle;
    align-items: center;
    cursor: default;
}

#msform input,
#msform textarea {
    padding: 8px 15px 8px 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    background-color: #ECEFF1;
    font-size: 16px;
    letter-spacing: 1px
}

#msform input:focus,
#msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #16507b;
    outline-width: 0
}

#msform .action-button {
    width: 100px;
    background: #16507b;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 0px 10px 5px;
    float: right
}

#msform .action-button:hover,
#msform .action-button:focus {
    background-color: #311B92
}

#msform .action-button-previous {
    width: 100px;
    background: #616161;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    float: right
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
    background-color: #000000
}
.container{
    background: white
}
section
{
    padding: 0px
}
#principal
{
    padding: 20px;
    border: 1px solid #e6f2fb;
    box-shadow: 0px 0px 30px 0px rgb(50 50 50 / 30%);
}

.card {
    z-index: 0;
    border: none;
    position: relative;
    background-color:none!important
}

.badge-dark
{
    background: #7777779e;
    border-radius: 5px;
}

.icon-chevron-left:before {
    content: "\f053";
}
.icon-chevron-right:before {
    content: "\f054";
}
.btn-erdv
{
    color: #000;
    background-color: #1752bc08;
    border-color: #1752bc1c;
    font-size: 13px;
    min-width: 130px;
}
.table>:not(caption)>*>*
{
    border-bottom: 0px;
    padding-top: 3px;
    padding-bottom: 3px
}
.table thead th{
    padding-bottom: 10px
}
.calTable-nav 
{
    margin-bottom: 10px;
     margin-top: 10px
}
.calTable td{
    border-top: 1px dotted #dddddd5e!important;
}
.icon-minus:before {
    content: "\f068";
}

.fs-title {
    font-size: 25px;
    color: #16507b;
    margin-bottom: 15px;
    font-weight: normal;
    text-align: left
}

.purple-text {
    color: #16507b;
    font-weight: normal
}

.steps {
    font-size: 25px;
    color: gray;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: right
}

.fieldlabels {
    color: gray;
    text-align: left
}

#progressbar {
    margin-bottom: 20px;
    overflow: hidden;
    color: #0d0d0d59
}

#progressbar .active {
    color: #16507b
}

#progressbar li {
    list-style-type: none;
    font-size: 11px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400
}
#progressbar li
{
    cursor: pointer
}
#progressbar li.active strong:hover
{
    text-decoration: underline;
}
#progressbar li:not(.active)
{
   cursor: text; 
}


#progressbar #storeStep:before {
    font-family: FontAwesome;
    content: "\f015"
}
#progressbar #welcomeStep:before {
    font-family: FontAwesome;
    content: "\f015"
}

#progressbar #timeStep:before {
    font-family: FontAwesome;
    content: "\f017"
}

#progressbar #cardFieldStep:before {
    font-family: FontAwesome;
    content: "\f007"
}


#progressbar #confirmationStep:before {
    font-family: FontAwesome;
    content: "\f00c"
}

.fa-config:before {
    font-family: FontAwesome;
    content: "\f013"
}
#accordionExample
{
    text-align: center
}
#map {
  height: 100%;
}
.btnMap
{
        background-color: #1752bc08;
    border-color: #1752bc1c;
    color: #000;
}
.btn-config
{
    background-color: #1752bc08;
    border-color: #1752bc1c;
    color: #000;
}
.modal-confirm .icon-box {
    color: #fff;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -60px;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    z-index: 9;
    background: #82ce34;
    padding: 15px;
    text-align: center;
    box-shadow: 0px 2px 2px rgb(0 0 0 / 10%);
}

.modal-confirm .modal-header {
    border-bottom: none;
    position: relative;
       
}

.modal-confirm .success-content {
    padding: 20px;
    border-radius: 5px;
    border: none;
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
.pagination>li>a, .pagination>li>span {
    color: #333;
}
.modal-confirm .icon-box i {
    font-size: 58px;
    position: relative;
    top: 0px;
}
.control-label
{
    font-size: 13px
}
.mapContent 
{
  margin-top: 20px;
    padding: 10px;
    border-top: 1px dashed rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  
}
.modal-confirm h4 {
    text-align: center;
    font-size: 26px;
    margin: 30px 0 -15px;
}
.userProfile
{
    margin-top: 4px;
    color: white;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid;
    padding: 4px;
    border-radius: 5px;
}
.userProfile:hover
{
   background: #333 
}
.userProfile a{
   color: white; 
   text-decoration: none;
}
.nav .glyphicon-user
{
    padding-right: 5px;
    margin-top: 4px;
    cursor: pointer;

}
.inquiryQuestionsComponent label{
    color: #333
}
#inquiryform
{
        padding-left: 20%;
        padding-right: 20%;
}
.btn-dispo {
	border: 1px solid #1752bc0f;
	width: 100%;
	height: 49px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: #99ccff;
	color: #fff;
	text-transform: uppercase;
	font-family: "Muli-SemiBold";
	font-size: 15px;
	letter-spacing: 2px;
	transition: all 0.5s;
    position: relative;
    overflow: hidden;
    .btn-dispo span {
    	position: relative;
    	z-index: 2;
    }
    &:before, &:after {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 1;
	    background-color: rgba(52,152,253,0.25);
	    -webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    -o-transition: all 0.3s;
	    transition: all 0.3s;
	    -webkit-transform: translate(-100%,0);
	    transform: translate(-100%,0);
	    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    &:after {
    	-webkit-transition-delay: 0.2s;
    	transition-delay: 0.2s;
    }
    &:hover {
    	&:before, &:after {
    		-webkit-transform: translate(0,0);
    		transform: translate(0,0);
    	}
    }
}

.myAppointments .fa-clock,.fa-envelope,.fa-map-pin,.fa-exclamation
{
    color: #000000a6;
    margin-right: 5px;
}
#confirmationBox {
    margin-top: 50px;
}
#confirmationBox {
    padding: 50px;
    margin-bottom: 60px;
}
#confirmationTitle {
    margin-bottom: 20px;
    width: 100%;
    color: #25B252;
    text-align: center;
}
.icon-012-check-mark-circle {
    font-size: 70px;
}
#confirmationmessage {
    width: 50%;
    margin: 0px auto;
    padding-top: 30px;
    padding-bottom: 30px;
}
#confirmationTitle {
    margin-bottom: 20px;
    width: 100%;
    color: #25B252;
    text-align: center;
}
#confirmationContent {
    margin-bottom: 20px;
    font-weight: 300!important;
}
#confirmation {
    font-weight: 400;
    font-style: normal;
    font-size: 22px;
    color: #666666;
}
#confirmation {
    margin-bottom: 15px;
}
.divider, hr {
    margin: 10px 0;
    border: 0;
    border-bottom: 1px solid #d6d6d6;
}
/* Migration BS3->BS5 lot 8 : l'alias font-family "FontAwesome" -> FA6 solid est gere par v4-font-face.min.css charge dans index.html (cf. cdn jsdelivr). Plus besoin de @font-face manuel ici. */
/* Migration BS3->BS5 lot 8 : rétro-compat des .row.appDiv qui contiennent des cols totalisant >12 OU dont le contenu deborde sa col (ex: js/principal.js loadTemplates : .col-md-1 + .col-md-6 + .col-md-1 + .col-md-4 = 12 mais description longue depasse 50%). En BS5 .row a flex-wrap:wrap (default) et .col-md-X a flex-shrink:0 + min-width:auto -> le bloc bouton passe a la ligne. On force nowrap + flex-shrink:1 + min-width:0 pour reproduire le comportement BS3 (compression proportionnelle pour tenir sur une ligne). Cf. js/principal.js loadTemplates et js/common.js loadTemplatesPagesFilter. */
.row.appDiv {
    flex-wrap: nowrap;
}
.row.appDiv > [class*="col-"] {
    flex-shrink: 1;
    min-width: 0;
}
/* Migration BS3->BS5 lot 8 : positionnement des sous-menus dropdown imbriques (.templatesList) - BS5 les met sous le parent par defaut, on les remet a droite du parent (comportement BS3 + bootstrap-dropdownhover). Cf. handler clic dans common.js. Applique aussi a .servicesListFilterPro (pages/storeLocatorProMotif.html). */
.servicesList li.dropdown,
.servicesListFilterPro li.dropdown {
    position: relative;
}
.servicesList .templatesList.dropdown-menu,
.servicesListFilterPro .templatesList.dropdown-menu {
    left: 100%;
    top: 0;
    margin-top: 0;
    margin-left: 0;
}
/* Force le sous-menu a etre visible des le 1er clic (BS5 met display:none par default sur .dropdown-menu, l'ajout de .show seul ne suffit pas toujours sur les sous-menus imbriques) */
.servicesList .templatesList.dropdown-menu.show,
.servicesListFilterPro .templatesList.dropdown-menu.show {
    display: block !important;
}
/* Styling des items dans .servicesList / .servicesListFilterPro / .employeesList / .templatesList (BS3 stylait via .dropdown-menu>li>a, BS5 utilise .dropdown-item qui n'est pas dans notre HTML genere) */
.servicesList > li > a,
.servicesList .templatesList > li > a,
.servicesListFilterPro > li > a,
.servicesListFilterPro .templatesList > li > a,
.employeesList > li > a,
.employeesList li > a {
    display: block;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.servicesList > li > a:hover,
.servicesList > li > a:focus,
.servicesList .templatesList > li > a:hover,
.servicesList .templatesList > li > a:focus,
.servicesListFilterPro > li > a:hover,
.servicesListFilterPro > li > a:focus,
.servicesListFilterPro .templatesList > li > a:hover,
.servicesListFilterPro .templatesList > li > a:focus,
.employeesList > li > a:hover,
.employeesList > li > a:focus,
.employeesList li > a:hover,
.employeesList li > a:focus {
    color: #1e2125;
    background-color: #e9ecef;
    text-decoration: none;
}
/* Migration BS3->BS5 lot 4 : compat .form-group (BS5 utilise .mb-3) */
.form-group { margin-bottom: 1rem; }
/* Migration BS3->BS5 lot 8 : polyfill .form-horizontal (BS3 - retire en BS4+). Reproduit le layout horizontal des form-groups : labels alignes a droite (col-md-X) + champs a cote (col-md-X). Cf. pages/cardFieldsPage.html et HTML genere par js/common.js. */
.form-horizontal .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: 1.5rem;
}
.form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
}
/* Padding standard BS5 sur les .col-md-X enfants (BS5 ne les applique que dans .row, ici on l'applique aussi pour les .form-group de la polyfill .form-horizontal) - donne l'espace habituel entre label et champ */
.form-horizontal .form-group > [class*="col-"] {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
/* Migration BS3->BS5 lot 8 : mode iframe (?iframe=true) - le #loginForm est deplace dans #login-container_iframe (cf. js/common.js ligne 3519). Mes polyfills flex de #header-main-page .connexionDiv ne s'appliquent plus, le form devient empile a gauche. Reproduit ici l'alignement horizontal a droite. */
#login-container_iframe .connexionDiv {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 8px;
    flex-wrap: wrap;
}
#login-container_iframe .connexionInputs {
    display: flex;
    align-items: center;
    gap: 4px;
}
#login-container_iframe .connexionLinks {
    display: flex;
    align-items: center;
    gap: 6px;
}
#login-container_iframe .form-group {
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
}
#login-container_iframe .form-control {
    width: auto;
    display: inline-block;
}
/* Mode iframe en MOBILE (<768px) : champs et bouton empiles verticalement, full-width */
@media (max-width: 767px) {
    #login-container_iframe .connexionDiv,
    #login-container_iframe .connexionInputs {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    #login-container_iframe .form-group,
    #login-container_iframe .form-control,
    #login-container_iframe .connexionInputs > button {
        width: 100% !important;
    }
}
/* Migration BS3->BS5 lot 8 : .form-check (checkboxes/radios genere par js/common.js ligne 1802) sont a l'interieur d'un .input-group BS5 (display:flex) -> mis en ligne. On force flex-basis:100% pour les empiler verticalement (comportement BS3 attendu). Cas observe dans partedisLibs/pages/inquiryPage.html (1 SALLE DE BAINS / 2 SALLES / PLUS doivent etre empiles, idem NEUF/RENOVATION). */
.input-group > .form-check {
    flex: 0 0 100%;
}
/* Migration BS3->BS5 lot 8 : <select> dans .input-group prend sa width naturelle en BS5 (selon contenu) au lieu de full-width comme en BS3. Le select doit remplir la place restante A COTE de l'icone (.input-group-text), pas 100% du groupe.
   ATTENTION width:1% et non 100% : .input-group est en display:flex + flex-wrap:wrap. Avec flex-basis:auto, la width sert de base de calcul — a 100% le select occupe tout le groupe, l'icone ne tient plus sur la ligne et passe au-dessus (bug constate sur inquiryPage : le "?" au-dessus du select au lieu d'etre a sa gauche).
   width:1% + flex-grow:1 = la mecanique native BS5 (_input-group.scss) : base quasi nulle puis extension sur l'espace restant, l'icone reste sur la meme ligne. */
.input-group > select.form-control,
.input-group > .selectpicker,
#inquiryform .input-group > select,
#inquiryform .input-group > .selectpicker {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
/* Selects hors .input-group (pas de contexte flex, flex-grow inoperant) : full-width comme en BS3. */
#inquiryform select,
#inquiryform .selectpicker {
    width: 100%;
}
/* Migration BS3->BS5 lot 8 : en BS5, .form-control applique appearance:none ce qui supprime la fleche native du <select>. En BS3, la fleche native etait conservee. BS5 reserve .form-select pour cela, mais le JS (common.js ligne 1745) genere class="form-control selectpicker". On restore l'apparence native pour ces selects. */
select.form-control,
.selectpicker {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}
/* Migration BS3->BS5 lot 8 : en mobile (<768px), les champs generes dynamiquement par js/common.js avec class .col-md-12 (textarea "Decrire mon projet", select "Comment avez-vous connu Partedis ?") ne prennent pas full-width car en BS5 .col-md-X n'applique width:100% qu'a partir de >=768px. En BS3 .col-md-X = width:100% par defaut. On force full-width sur les form-groups des forms inquiry/cardFields en mobile. */
@media (max-width: 767.98px) {
    #inquiryform .form-group > [class*="col-md-"],
    #cardFieldsForm .form-group > [class*="col-md-"],
    .inquiryQuestionsComponent .form-group > [class*="col-md-"],
    .cardFieldComponent .form-group > [class*="col-md-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}
/* Migration BS3->BS5 lot 8 : centrage du bouton "Etape suivante" #confirmInquiryQuestions et "Valider mon rendez-vous" #saveApp sur partedisLibs. Le .form-group du bouton n'est pas dans .form-horizontal, donc ma polyfill .form-horizontal ne s'applique pas. On cible specifiquement via :has() pour centrer le bouton et masquer le label vide a gauche. */
.form-group:has(#confirmInquiryQuestions),
.form-group:has(#saveApp) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.form-group:has(#confirmInquiryQuestions) > .control-label,
.form-group:has(#saveApp) > .control-label {
    display: none;
}
.form-group:has(#confirmInquiryQuestions) > [class*="col-"],
.form-group:has(#saveApp) > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
}
/* Migration BS3->BS5 lot 8 : espace entre checkbox/radio et leur libelle. BS5 default met .form-check-input { float: left; margin-left: -1.5em } et .form-check { padding-left: 1.5em }, mais sur certaines pages les checkbox custom (ex: "Je viens de la part d'un pro" dans cardFieldsPage) sont colle au texte. On force un margin-right pour assurer l'espace. */
.form-check-input {
    margin-right: 0.5em;
}
/* Migration BS3->BS5 lot 8 : masquer la fleche ::after que BS5 ajoute par defaut sur .dropdown-toggle dans .employeesChoiceDiv partedis et .dropdownSlotsPartds (creneaux mobiles, genere par partedis-oldv.js) - la page contient deja une icone <i class="fa-solid fa-chevron-down"> manuelle dans le markup -> doublon. Cas observe sur partedisLibs/pages/appointmentCalendarPage-oldv.html. */
.employeesChoiceDiv .dropdown-toggle::after,
.dropdownSlotsPartds .dropdown-toggle::after {
    display: none;
}
/* Migration BS3->BS5 lot 8 : alignement checkbox + texte dans .form-group-checkbox (RGPD "Je reconnais avoir pris connaissance..." dans cardFieldsPage). En BS5 le .input-group (display:flex) met align-items:stretch par defaut -> la checkbox-inline est en haut tandis que le texte wrap sur plusieurs lignes en mobile. On centre verticalement + empeche la checkbox de retrecir. */
.form-group-checkbox .input-group {
    align-items: center;
    flex-wrap: nowrap;
}
.form-group-checkbox .checkbox-inline {
    flex-shrink: 0;
}
.form-group-checkbox > .inputGroupContainer > .input-group > label[for] {
    flex: 1 1 auto;
    margin-bottom: 0;
}
/* Migration BS3->BS5 lot 8 : centrage des 3 boutons (Ajouter agenda / Partager / Imprimer) sur partedisLibs/pages/confirmationPage.html. BS5 met .modal-footer { justify-content: flex-end } par defaut, on override pour center. */
.confirmation .modal-footer,
.modal-footer-partds {
    justify-content: center;
}
/* Migration BS3->BS5 lot 8 : sur partedisLibs/pages/appointmentCalendarPage(-oldv).html, le wrapper externe <div class="row ng-scope" ng-if="..."> dans .col-md-12.calendar n'est pas une vraie row BS (pas de col-* enfants), c'est juste un conteneur. En BS5 .row applique margin-negative ce qui en mobile peut faire deborder le bouton "Afficher plus de disponibilites". On neutralise uniquement les margins negatifs en mobile (en desktop on ne touche a rien). */
@media (max-width: 767.98px) {
    .col-md-12.calendar > .row {
        margin-left: 0;
        margin-right: 0;
    }
}
/* Migration BS3->BS5 lot 8 : fix dropdown créneaux mobile partedis (#calendar-mobile-partds). Le JS genere les boutons creneaux dans un <a class="slotsPartdsItem"> -> sous-lignage UNDERLINE applique au texte + comportement inline qui casse les .row enfants. On force display:block + sans underline. Les .row BS5 ont margin negatif (-0.75rem) qui font deborder hors du parent : on les neutralise + padding sur le .slotsPartdsItem. Cf. partedisLibs/js/partedis.js ligne 385. */
.slotsPartdsList .slotsPartdsItem {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    padding: 0;
}
.slotsPartdsList .slotsPartdsItem .row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.5rem;
}
.slotsPartdsList .slotsPartdsItem button,
.slotsPartdsList .slotsPartdsItem .btn {
    text-decoration: none !important;
}
/* Bloc info confirmation (SALLE EXPOSITION / REFERENCE / NOM / DATE) dans confirmationPage Partedis : on laisse les offset-md-X BS5 faire le positionnement naturel (alignement coherent entre les rows). Elargir l'espace entre la colonne icone et la colonne texte (BS5 default gutter 1.5rem est un peu serre dans ce contexte). */
.confirmation-details-partedis .row > [class*="col-"]:first-child {
    padding-right: 1.5rem;
}
.confirmation-details-partedis .row > [class*="col-"]:nth-child(2) {
    padding-left: 1.5rem;
}
/* Migration BS3->BS5 lot 8 : polyfill .btn-block (BS3 - retiree en BS5 au profit de class="d-grid" sur le parent). Reproduit le comportement BS3 : bouton full-width empile. flex: 0 0 100% est necessaire car certains parents (.modal-footer) sont flex en BS5 et compresseraient les boutons sur une ligne. Cf. pages/confirmationPage.html. */
.btn-block {
    display: block;
    width: 100%;
    flex: 0 0 100%;
}
.btn-block + .btn-block {
    margin-top: 0.5rem;
    margin-left: 0;
}
/* Migration BS3->BS5 lot 8 : fix dropdown AddCalEvent (.ace_dd) - selon le contexte parent (ex: customerAppointmentsPage.html avec boutons annuler/modifier a droite), le texte des options peut wrap et deborder du dropdown. On force min-width + white-space:nowrap. Cf. lib/AddCalEvent.css. */
.ace_dd {
    min-width: 180px;
}
a.ace_opt {
    white-space: nowrap;
}
/* Migration BS3->BS5 lot 8 : polyfill .radio-inline et .checkbox-inline (BS3 - retirees en BS5 au profit de .form-check.form-check-inline). On reproduit le comportement BS3 : inline-block + espacement entre 2 voisins. */
.radio-inline,
.checkbox-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    vertical-align: middle;
    font-weight: 400;
    cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
    margin-top: 0;
    margin-left: 10px;
}
/* Migration BS3->BS5 lot 8 : polyfill bouton .close dans .bootstrap-growl (lib jquery.bootstrap-growl genere du HTML BS3 : <button class="close"><span>&#215;</span></button>). En BS5 .close n'existe plus (renommee .btn-close), donc on style manuellement le bouton pour qu'il ressemble a un X propre sans bordure browser default. */
.bootstrap-growl {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bootstrap-growl .close {
    background: transparent;
    border: 0;
    padding: 2px 6px;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
    margin-left: auto;
    border-radius: 3px;
}
.bootstrap-growl .close:hover {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}
.bootstrap-growl .close .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* Centrage horizontal du form principal cardFieldsForm. NB: .rgpd-div retire de ce groupe car interfere avec partedis ou le parent .cardFieldComponent est deja centre via col-md-8 offset-md-2. */
#cardFieldsForm,
.cardFieldComponent .form-group-saveApp {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
/* Centrage du titre "Merci de renseigner..." (le h3 est dans un col-xl-7 qui prend 58% a gauche, on force le row a centrer son contenu) */
.cardFieldComponent > div > .row {
    justify-content: center;
}
/* Centrage du bouton "Valider le rendez-vous" (il est dans .form-group-saveApp avec un label col-md-4 vide a gauche, on force le flex a center le contenu). NB: .form-group-saveApp est EN DEHORS du <form class="form-horizontal">, donc ma polyfill .form-horizontal .form-group ne s'y applique pas, il faut display:flex explicite. */
.cardFieldComponent .form-group-saveApp {
    display: flex;
    justify-content: center;
    align-items: center;
}
.cardFieldComponent .form-group-saveApp > .label-saveApp {
    display: none;
}
.cardFieldComponent .form-group-saveApp > .div-saveApp {
    flex: 0 0 auto;
}
/* Migration BS3->BS5 lot 5 : compat .btn-default (BS5 a .btn-secondary mais visuel different) */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
/* Migration BS3->BS5 lot 6 : compat .panel-* (BS5 utilise .card-*) */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.panel-default { border-color: #ddd; }
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}
.panel-body { padding: 15px; }
/* Migration BS3->BS5 : .panel-supservice > .panel-body contenait des .col-md-6 sans wrapper .row
   (js/principal.js:729). En BS3 les floats fonctionnaient sans .row parent, mais en BS5
   .col-md-* n'a que width:X% sans display:flex parent → cards empilent full-width.
   Ancien fix (retire) : passer .panel-body en display:flex.
   REGRESSION : les 3 autres generateurs de .panel-supservice mettent DEJA un vrai enfant
   full-width dans le .panel-body — un .row (js/common.js:5071, page storeLocator &store=motif)
   ou un <ul> (js/common.js:5568, js/principal.js:822). Avec .panel-body en flex, cet enfant
   devient un flex item en flex:0 1 auto → shrink-to-fit : le .row se reduit a la largeur du
   contenu, les col-md-6 valent 50% de cette largeur reduite (~240px au lieu de 50% du panel)
   et le bouton style="width:50%" deborde puis est coupe par .icon-box{overflow:hidden}.
   Fix retenu : .panel-body reste en block et principal.js:729 injecte lui aussi son .row.
   Les 4 generateurs ont donc desormais le meme markup BS5 standard, plus de polyfill ici. */
.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
/* Migration BS3->BS5 lot 6 : compat navbar-inverse / navbar-fixed-top / navbar-toggle / icon-bar (BS5 utilise navbar-dark bg-dark / fixed-top / navbar-toggler / navbar-toggler-icon) */

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-text { color: #9d9d9d; }
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>.active>a { color: #fff; }
.navbar-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}
.flex-row-reverse{
    flex-direction: row-reverse;
}
.navbar-toggle {
    position: relative;
    float: right;
    margin: 8px 15px 8px 0;
    padding: 9px 10px;
    background-color: transparent;
    background-image: none;
    border: 1px solid #333;
    border-radius: 4px;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
}
.navbar-toggle .icon-bar+.icon-bar { margin-top: 4px; }
/* Migration BS3->BS5 lot 8 : en mobile (<768px), forcer hamburger a droite via flex+margin-auto sur .navbar-header. Regrouper les liens form-login (J'ai oublie | Mes RDV) sur une ligne au lieu de chacun sur sa propre ligne. */
@media (max-width: 767px) {
    #header-main-page .navbar-header {
        display: flex !important;
        align-items: center;
        flex-direction: row !important;
        flex-grow: 1;
    }
    #header-main-page .navbar-brand-div {
        flex: 1 1 auto;
    }
    #header-main-page .navbar-toggle {
        order: 99 !important;
        margin-left: auto !important;
        float: none !important;
    }
    /* Mobile : regrouper les liens (J'ai oublie ma ref | Mes RDV) sur une ligne au lieu d'un par ligne */
    #header-main-page .connexionLinks {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
        align-items: center;
        margin-top: 10px;
    }
    #header-main-page .connexionLinks .form-group {
        display: inline-flex;
        align-items: center;
        margin-bottom: 0;
    }
    #header-main-page .connexionLinks .languageSwitch {
        margin-left: auto;
    }
}
/* Lot 8 fix : en desktop (>=768px) le hamburger doit etre cache et le menu navbar visible. Approche flex BS5 ciblee sur #header-main-page (le comportement BS3 navbar floats etait reproduit en polyfill float, mais flex est plus propre et BS5-friendly) */
@media (min-width: 768px) {
    .navbar-toggle { display: none; }
    /* Lot 8 fix : retirer le padding-x natif de .navbar BS5 pour aligner le bord droit de .containerNav avec #principal (qui est aussi .container, sans padding navbar) */
    #header-main-page {
        padding-left: 0;
        padding-right: 0;
    }
    /* Le header global devient un flex horizontal : logo a gauche, reste a droite, tout aligne au centre vertical */
    #header-main-page .containerNav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    #header-main-page .navbar-collapse.collapse {
        display: flex !important;
        align-items: center;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
        flex-grow: 0;
    }
    #header-main-page .navbar-form {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }
    /* Layout cible BS3 : 2 wrappers (.connexionInputs et .connexionLinks) empiles verticalement avec align-items:stretch (default flex). Les 2 wrappers prennent automatiquement la meme width = celle du contenu le plus large (les inputs). Donc bord gauche du wrapper liens = bord gauche du wrapper inputs => "J'ai oublie..." commence sous Nom. Cf. memory/reference_navbar_layout_bs3.md */
    #header-main-page .connexionDiv {
        display: flex;
        flex-direction: column;
        /* align-items: stretch (default) : les 2 wrappers ont meme width */
        gap: 4px;
    }
    #header-main-page .connexionInputs {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
    }
    #header-main-page .connexionInputs .form-group {
        margin-bottom: 0;
    }
    #header-main-page .connexionLinks {
        display: flex;
        align-items: center;
        gap: 6px;
        /* justify-content default flex-start : "J'ai oublie..." colle au bord gauche, qui est aligne sous Nom grace au stretch */
    }
    #header-main-page .connexionLinks .form-group {
        margin-bottom: 0;
        display: inline-flex;
        align-items: center;
    }
    #header-main-page .navbar-form .form-control {
        width: auto;
        display: inline-block;
    }
    #header-main-page .languageSwitch {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
        gap: 5px;
    }
    /* La languageSwitch (FR | EN) poussee tout a droite de la ligne 2 */
    #header-main-page .connexionLinks > .languageSwitch {
        margin-left: auto;
    }
}
.input-group-text
{
    background-color: #1752bc0f;
}
.confirmation
{
    padding-right: 10%;
        padding-left: 10%;
        margin-top: 100px;
}
.success-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
    box-shadow: 0px 5px 90px 0px rgb(110 123 131 / 10%)
    
}


.success-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem;
}
.btn-block
{
      background-color: #1752bc08;
    border-color: #1752bc1c;
    color: #000;
}

.modal-confirm .success-header {
    border-bottom: none;
    position: relative;
    
}
.success-header
{
     background: repeating-linear-gradient(-55deg, #1752bc05, #1752bc05 10px, #1752bc08 10px, #1752bc08 20px);
}

.calTable thead{
    background: repeating-linear-gradient( -55deg, #1752bc05, #1752bc05 10px, #1752bc08 10px, #1752bc08 20px);
}
.form-control
{
    font-size: 12px;
    border-radius: 3px
}
#accordionExample .col-md-6
{
        display: -webkit-flex;
    /* display: flex; */
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

#multiCollapseExample1 .btn
{
        background-color: #1752bc08;
    border-color: #1752bc1c;
    color: #000;
}

#progressbar li:before {
    width: 30px;
    height: 30px;
    /* line-height: 45px; */
    display: block;
    font-size: 15px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 4px;
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 15px;
    z-index: -1
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: #16507b
}

.progress {
    height: 20px
}

.progress-bar {
    background-color: #16507b
}

.fit-image {
    width: 100%;
    object-fit: cover
}


.calTable th, .calTable td {
    text-align: center;
    font-size: 12px;
    vertical-align: middle!important
}
.leftSide li{
    cursor: pointer;
    transition: all 0.3s linear;
}
.leftSide li:hover
{
        background: #f5f5f5;
        transition: all 0.3s linear;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.datepicker-dropdown
{
    min-width: auto;
    padding: 10px
}

.icon-box
{
    width: 100%
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
.btn-dispo
{
    color: #000;
    background-color: #1752bc08;
    border-color: #1752bc1c;
    font-size: 11px;
    margin-bottom: 5px
}
#makeApp,.serviceChoiceBtn,.btnTemplate,.btnEmp:not(.withoutPreference),#saveApp,#confirmInquiryQuestions  {
    background: #16507b;
    border: 1px solid 11598e;
    color: #fff;
    border-radius: 4px;
     transition: all 0.3s linear;
        cursor: pointer;
}
#makeApp:hover,.serviceChoiceBtn:hover,.btnTemplate:hover,.btnEmp:hover:not(.withoutPreference):hover,#saveApp:hover,#confirmInquiryQuestions:hover
{
    color: #fff;
    background: #16507b;
    border: 1px solid 11598e;
        transition: all 0.3s linear;
        cursor: pointer;

}
#makeApp
{
    box-shadow: 0 20px 5px -10px rgb(0 0 0 / 15%);   
    background-color: #16507b;
    height: 45px!important;
    border: none;
    transition: all 0.3s linear;
    border-radius: 0px;
    min-width: 250px;
    height: 40px;
    margin-bottom: 20px;
    
}
#makeApp::before{
   background-size: 150% auto;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.25;
    filter: alpha(opacity=25);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -9;
    transition: all 0.5s ease 0s;
    background-color: #000000;
    background-image: -moz-linear-gradient(left, #000000 0%, #ffffff 51%, #000000 100%);
    background-image: -webkit-linear-gradient(left, #000000 0%,#ffffff 51%,#000000 100%);
    background-image: linear-gradient(to right, #000000 0%,#ffffff 51%,#000000 100%);
}

#makeApp:hover
{
    transform: translateY(5px);
        transition: all 0.3s linear;
        color: white;
         border: none;
   
}
.calendar .btn-erdv
{
     transition: all 0.3s linear;
}
.calendar .btn-erdv:hover
{
    background: #16507b;
    border: 1px solid rgb(100 147 49);
    color: #fff;
     transition: all 0.3s linear;
}
.iconApp
{
    color: #666!important;
}
.myAppointments .iconApp
{
    color: #16507b!important;
}
.btn-edit-rdv:hover
{
    color: #fff;
    background-color: #3071a9;
    border-color: #285e8e;
}
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #16507b;
    border-radius: 5px;
}
.ServiceChoice .btn .caret {
    margin-left: 0;
    float: right;
    margin-top: 7px;
}
.login
{
      color: #666;
    background: white;
    border-color: #c9c9c9;
    margin-right: -10px;
}
.templatePage li ,.employeePage li{
    cursor: pointer;
     transition: all 1s ease-in-out;
}
.serviceImg img{
    border-radius: 50%
}
.templatePage li:hover ,.employeePage li:hover
{   
   background-image: -webkit-linear-gradient(left, #00000007 0%,#ffffff 51%,#00000007 100%)!important;
   background-image: -moz-linear-gradient(left, #00000007 0%,#ffffff 51%,#00000007 100%)!important;
   background-image: linear-gradient(left, #00000007 0%,#ffffff 51%,#00000007 100%)!important;
   transition: all 1s ease-in-out;
  
}
.templatePage li{
    border-radius: 4px
}
.icon-box h4{
    color: #666!important
}
.proBar
{
    margin-bottom:0px!important
}
.stepBar
{
    margin-bottom: 30px;
}
.h6
{
    font-size: 13px
}
small{
    font-size: 12px
}
.icon-box:not(.confirmation .icon-box)
{
    text-align: center;
    cursor: pointer;
    ox-shadow: 0px 0px 30px 0px rgb(50 50 50 / 12%);
}
#noteCancelRdv
{
    text-align: center
}
/* Migration BS3->BS5 lot 8 : force position fixed + full viewport sur TOUTES les .modal. */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
/* Quand .modal.show : on transforme en flex container plein viewport avec contenu centre. Cela override .modal-dialog-centered qui mettait min-height:calc(100%-3.5rem) (=>modal-dialog 855px = modal-content positionne dans cette grande zone, parfois mal place). Avec cette approche, .modal-dialog a sa hauteur naturelle et est centre exactement au milieu de la viewport. */
.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.modal.show .modal-dialog {
    margin: 0 !important;
    min-height: auto !important;
    max-width: var(--bs-modal-width, 500px) !important;
    width: 100%;
}
#loginIframeCrationAccountPop{
    z-index: 1049;
}
#openIframePop{
   bottom: auto;
}
#openIframePop .modal-dialog.modal-lg{
   width: 90%; 
}
#openIframePop iframe {width: 100%; height: 600px;}
#openIframePop .modal-dialog.modal-lg .modal-body{padding: 0;}


/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/

/********************************/
/*       Fade Bs-carousel       */
/********************************/
.fade-carousel {
    position: relative;
    min-height: 300px;
}
.fade-carousel .carousel-inner .item {
    min-height: 300px;
}
.fade-carousel .carousel-indicators > li {
    margin: 0 2px;
    background-color: #f39c12;
    border-color: #f39c12;
    opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
  width: 10px;
  height: 10px;
  opacity: 1;
}

/********************************/
/*          Hero Headers        */
/********************************/
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.hero h1 {
    font-size: 6em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}

/********************************/
/*            Overlay           */
/********************************/
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #080d15;
    opacity: .1;
}

/********************************/
/*          Custom Buttons      */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
    color: #f5f5f5;
    background-color: #1abc9c;
    border-color: #1abc9c;
    outline: none;
    margin: 20px auto;
}

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
  height: 300px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero
{
    color: #333;
    text-transform: none;
    text-shadow: none
}
.overlay
{
   background: none 
}

/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
    .hero { width: 980px; }    
}
@media screen and (max-width: 640px){
    .hero h1 { font-size: 4em; }    
}

.icon-box {
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 29px 0 rgb(18 66 101 / 8%);
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
    z-index: 1;
}
.icon-box .title {
    font-weight: 100;
    margin-bottom: 15px;
    font-size: 18px;
}
.icon-box .title {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 18px;
}
.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}
.icon-box:hover {
  transform: scale(1.05);
}
.serviceImg
{
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
    
}
.serviceImg img{
    width: 200px;
    height: 200px;
    object-fit: cover;
}
.templatePage .appDiv i:not(.fa-clock){
    color:#666666a8
}

#hero .icon-box:hover .title a {
  color: #2487ce;
}

.contact .info i {
    font-size: 20px;
    float: left;
    width: 44px;
    height: 44px;
    background: rgb(124 190 54 / 16%);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}
.contact .info h4 {
    padding: 0 0 0 60px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}
.contact .info p {
    padding: 0 0 0 60px;
    margin-bottom: 0;
    font-size: 14px;
    color: #666;
}
.contact .info .email, .contact .info .phone {
    margin-top: 40px;
}
.icofont-google-map:before {
    content: "\f0e0";
}
.hrdivider {
  position: relative;
  margin-bottom: 20px;
  margin-top: 20px;
  width: 100%;
  text-align: center;
}

.hrdivider span {
  position: absolute;
  top: -1px;
  background: #fff;
  font-weight: bold;
  font-size: 16px;
}

.hrdivider hr{
    border-bottom: 1px solid #d6d6d64d;
}
.footer-social-section {
    width: 100%;
    align-items: center;
    justify-content: space-around;
    position: relative;
    margin-top: 5px;
}
.flex-rw {
    display: flex;
    flex-flow: row wrap;
}
.footer-social-connect {
    display: flex;
    align-items: center;
    font: 2em "Oswald", sans-serif;
    color: #666;
}
.footer-social-overlap {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 0 20px;
}
.footer-social-overlap {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 0 20px;
}
.footer-social-overlap > a {
    font-size: 3em;
}
.generic-anchor {
    color: #16507b;;
}
.footer-social-overlap > a:not(:first-child) {
    margin-left: 0.28em;
}
.footer-social-overlap .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.footer-social-section::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 10px;
    border-top: 1px solid #ccc;
    width: calc(100% - 20px);
}
.leftSide li{
    border: 0;
    box-shadow: 0px 5px 15px 0px rgb(0 0 0 / 11%);
}

@media only screen and (min-width: 700px) {
.leftSide .iconApp
{
        border: 1px solid#80808052;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    padding: 8px;
    background: #80808026;
    color: #16507b!important;
    background-color: #1752bc08;
    border-color: #1752bc1c;
    margin-top: -5px;
    margin-left: 10px;
    border: 1px solid #1752bc0f!important
}
.leftSide .fa-map-pin
{
    color: #16507b!important;
    margin-right:0px
}
.leftSide .col-md-10
{
    border: 0px!important
}
}

.selectedServiceLabel,.selectedEmployeeLabel
{
    background-color: #1752bc08;
    border-color: #1752bc1c;
    color: #333;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #1752bc1c;;
    border-radius: 4px;
    min-width: 50%;
}
.dropdown-menu>li>a
{
    white-space: normal!important;
}
.dropdown-menu li{
    border-bottom: 1px dotted #3333331a;
}
.dropdown-menu li:last-child{
    border-bottom: 0px dotted #fff;
}
.dropdown-menu a
{
    align-items: center;
    vertical-align: middle;
    display: flex;
}

.dropdown .dropdown-menu .caret
{
    margin-left: 5px
}
.datepicker-days .disabled
{
    text-decoration: line-through;
        opacity: 0.4;
}

.fa-trash-alt,.fa-edit,.fa-user-edit,.fa-pen-square
{
    float: right;
    margin-top: 3px;
    cursor: pointer;
    margin-left: 10px
}
.fa-trash-alt:hover,.fa-edit:hover,.fa-user-edit:hover,.fa-pen-square:hover
{
        color: #16507b;
}
.selectedServiceLabel
{
    margin-bottom: 10px
}
#overlay{	
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height:100%;
  display: none;
  background: rgba(0,0,0,0.6);
}
.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% { 
    transform: rotate(360deg); 
  }
}
.is-hide{
  display:none;
}
textarea{
    width: 100%
}
.form-check-label
{
    margin-left: 10px
}
input.error,textarea.error
{
        border: 1px solid #d81010;
}
label.error
{
            color: #d81010;
            font-size: 12px
}
.userProfileLogin a{
    color: #fff;
    cursor: pointer
}
#userName
{
    color: #fff
}
.userProfileLogin{
    margin-top: 17px;
    color: #fff;
    margin-right: -9px;
    font-size: 13px;
}
.modal {
  text-align: center;
}
.servicePage .title
{
       min-height: 50px; 
}
.servicePage .description
{
       min-height: 80px; 
}
.languageItemNav {
    border-right: 1px solid;
    padding-right: 10px!important;
    margin-right: 10px!important;
    float: right;
    margin-bottom: 0;
    ext-align: inherit;
     float: left;
    margin-bottom: 0;
    margin-right: 22px;
    font-size: 12px;
}
.languageItemNav:last-child {
    border-right: 0px solid;
    padding-right: 0px!important;
    margin-right: 0px!important;
}
.nav-items
{
    list-style: none;
    float: right;
    padding-right: 0px;
    margin-bottom: 0px;
   
}


@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
  .navbar-brand-div
  {
      height: 70px;
    display: flex;
    align-items: center;
  }
}

.myAppointments .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
.myAppointments .modal-footer,.modal-header
{
    text-align: center
}
.myAppointments .modal-footer button
{
    width: 200px
}
@media only screen and (max-width: 600px) {
  .navbar-brand {
    font-size: 15px;
    margin-left: 20px;
    padding-top: 17px;
  }

#inquiryform
{
     padding-left: 0;
     padding-right: 0;
}

  
  h1
  {
      font-size: 26px
  }
  .fade-carousel {
    position: relative;
    height: 400px;
}
.fade-carousel .carousel-inner .item {
    height: 400px;
}
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
  height: 400px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero {

    width: 95%;

}
.login
{
  width: 100%  
}
.contact .col-lg-8
{
   margin-bottom: 30px; 
}
.icon-box
{
 margin-bottom: 20px;   
}
.appDiv
{
    display: block
}
.confirmation
{
    padding-right: 0%;
    padding-left: 0%;
}
.iconApp
{
    border: none
}
.appDiv .badge-dark
{
    margin-left: 0px!important;
}
.appDiv .col-md-7
{
    margin-left: 0px!important;
}
.employeePage img
{
  margin-left: 20px;  
}
.myAppointments .iconApp
{
    margin-bottom: 15px;
}
.myAppointments .btn
{
    margin-top: 15px;
}

#progressbar{
    padding-left: 0px;
}
#form-control-postal
{
    width: 100%!important;
    margin-bottom: 10px;
}
.align-items-center .btn
{
    width: 100%!important
}
.leftSide
{
    margin-bottom: 20px
}
.leftSide .col-md-10
{
        text-align: center;
}
.leftSide .btn-edit-rdv 
{
    float: none!important;
    margin-right:0px!important;
}
#progressbar strong{
    font-size: 10px
}
.confirmation
{
    margin-top: 0px!important
}
.modal-title:not(.text-printania-bold)
{
    font-size: 18px!important;
}
.rightSide{
    padding-top: 20px;
    border-top: 1px solid grey;
}
.float-end
{
   float: none!important 
}
.myAppointments .appDiv
{
    text-align: center
}
.myAppointments .fa-calendar-alt
{
    font-size: 20px!important;
}
.myAppointments li{
    margin-bottom: 10px
}
.myAppointments
{
    text-align: center
}
.myAppointments .withoutPreference 
{
    display: none
}
.text-info-rdv
{
    font-size: 16px!important
}
.templatesList
{
    left: 0!important;
    bottom: auto!important;
    top: auto!important;
        background: #e6e6e6;
}
.dropdown-menu>li>a
{
         white-space: normal!important;
}
.timeSlot
{
    min-width: auto!important
}
#showServiceList
{
    margin-bottom: 5px
}
#btn-date
{
    text-overflow: ellipsis;
    overflow: hidden;
    width: 80px;
    white-space: nowrap;
}
.info
{
        margin-top: 30px;
}
.contact .info .email, .contact .info .phone {
    margin-top: 20px;
}
.ServiceChoice
{
    margin-left: 0px;
    margin-right: 0px
}
#nameLogin,#refLogin
{
    width: 100%!important
}
#logoId
{
    margin-left:0px!important
}
#cardFieldsForm
{
    padding-top: 0px!important;
}
#main
{
    margin-top: 10px;
    margin-bottom: 0px;
}
#progressbar
{
    margin-bottom: 10px
}
#principal
{
    padding-left: 0px;
    padding-right: 0px;
}
h2:not(.text-printania-bold),h3:not(.text-printania-bold)
{
    font-size: 22px!important
}
.templates .appDiv,.employees .appDiv
{
    text-align: center;
}

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    .btn-config {
        background-color: #fbfdff;
        border-color: #777;
        color: #000;
    }
    .calendar
    {
        background: #fbfdff;
        border-top: 1px dashed #fbfdff;
    }
    .calTable thead{
        background: #f9f9f9;
    }
    .btn-erdv {
        background-color: #f6fbff;
        border-color: #e7e7e7;
  }
}
.groupeCustomerChoiceDiv{
    margin-top: 10px;
}
.groupeCustomerChoiceDiv .bootstrap-touchspin{
    width: 20%;
}
.groupeCustomerChoiceDiv .control-label.lblNumberOfPerson{
    line-height: 2.5;
}
.control-places{
    border-radius: 4px 0px 0px 4px;
}
.btn-upload-file{
    padding: 6px;
    border: 1px solid #ccc;
    background-color: #fff;
    position: relative;
    left: -5px;
    border-radius: 0px 4px 4px 0px;
}
.btn-image-template-rdv{
        color: #555;
    padding: 0;
    bottom: 20px;
}
.btn-image-template-rdv>i{
        padding: 5px;
    height: 34px;
    width: 39px;
    border: 1px solid #ccc;
    line-height: 1.5;
    background-color: #1752bc0f;
    border-radius: 4px 0px 0px 4px;
}
.servicesFilterChoiceDiv>a.dropdown-toggle{
    text-align: initial;
}
.servicesFilterChoiceDiv>a.dropdown-toggle>span.caret{
        float: right;
    position: relative;
    top: 8px;
}
.servicesFilterChoiceDiv>.servicesListFilterPro {
    width: 100%;
    bottom: initial!important;
    top: 100%!important;
}
.selectedServicesListFilter .selectedServiceLabel{
    width: 100%;
    background-color: #fff;
        margin-bottom: 0px;
}
.containerDispos table{
        table-layout: fixed;
}
.containerDispos table .btn-erdv{
    min-width: 80px;
    margin: 10px 0px 0px 0px;
    text-overflow: ellipsis;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
}
.error{
    color: #f75b50;
    font-size: 13px
}
.tooltip_templates { display: none; }
div.tooltipster-base-heightauto{
    height: auto !important;
}
.margin-top-5{
    margin-top: 5px;
}
.margin-top-10{
    margin-top: 10px;
}
.margin-top-15{
    margin-top: 15px;
}
.margin-top-20{
    margin-top: 20px;
}
.fa-calendar-plus{
    cursor: pointer;
}
.iconApp .ace_dd{
    min-width: 155px!important;
}  
@media screen and (min-width: 768px){
    .iconApp .ace_dd{
        top: 52px!important;
    }  
}
.nextApps .btn-image-template-rdv{
    width: 100%;
    text-align: right;
}
.nextApps .btn-image-template-rdv i{
    text-align: center;
}
.form-group-file-upload{
    margin-right: -15px;
}
.nextApps .files{
    text-align: right;
}
.file-import-box-myrdv.heigth85 { height: 85px; }

.display-none{
    display: none!important;
}
.display-block{
    display: block!important;
}
/*checkbox radio custom style*/
.checkbox input,
.checkbox-inline input,
.radio input,
.radio-inline input {
  opacity: 0;
  position: absolute;
}

.checkbox label,
.radio label {
  margin-top: 5px;
  margin-bottom: 5px;
}

.checkbox .indicator,
.checkbox-inline .indicator,
.radio .indicator,
.radio-inline .indicator {
  position: relative;
}

.checkbox .indicator:before,
.checkbox-inline .indicator:before,
.radio .indicator:before,
.radio-inline .indicator:before {
  content: '';
  border: 2px solid #888;
  display: inline-block;
  vertical-align: middle;
  width: 23px;
  height: 23px;
  padding: 2px;
  margin-top: -5px;
  margin-right: 10px;
  text-align: center;
}

.checkbox input:checked + .indicator:before,
.checkbox-inline input:checked + .indicator:before {
  border-color: #00f;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="-7 -7 30 30"><path fill="#00f" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>') no-repeat;
}

.checkbox input:disabled + .indicator:before,
.checkbox-inline input:disabled + .indicator:before {
  border-color: #ccc;
  box-shadow: inset 0px 0px 0px 4px #fff;
}

.checkbox input:checked:disabled + .indicator:before,
.checkbox-inline input:checked:disabled + .indicator:before {
  border-color: #ccc;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="-7 -7 30 30"><path fill="#ccc" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>') no-repeat;
}

.radio input + .indicator:before,
.radio-inline input + .indicator:before {
  border-radius: 50%;
}

.radio input:checked + .indicator:before,
.radio-inline input:checked + .indicator:before {
  border-color: #00f;
  background: #00f;
  box-shadow: inset 0px 0px 0px 5px #fff;
}

.radio input:disabled + .indicator:before,
.radio-inline input:disabled + .indicator:before {
  border-color: #ccc;
  box-shadow: inset 0px 0px 0px 5px #fff;
}

.radio input:checked:disabled + .indicator:before,
.radio-inline input:checked:disabled + .indicator:before {
  border-color: #ccc;
  background: #ccc;
  box-shadow: inset 0px 0px 0px 5px #fff;
}

.checkbox input:focus + .indicator,
.checkbox-inline input:focus + .indicator,
.radio input:focus + .indicator,
.radio-inline input:focus + .indicator {
  outline: 0px solid #ddd;
  /* focus style */
}
.inline-block{
    display: inline-block;
}
#cardFieldsForm .radio-inline{
    padding-left: 0;
}
.form-horizontal  .text-center,.text-center{
    text-align: center;
}
.form-horizontal  .text-left,.text-left{
    text-align: left;
}
.form-horizontal  .text-right,.text-right{
   text-align: right; 
}
#img-employee-confirmation{
    width: 100px;
    display: inline-block;
    border-radius: 50%;
}
.list-group-item-click{
    cursor: pointer;
}
@media only screen and (max-width: 767px){
    .leftSide {
        margin-top: 11px;
    }
}
@media screen and (max-width: 320px){
    .serviceImg img {
        width: 150px;
        height: 150px;
    }
}
.logo-navbar{
    margin-right: 20px;
}
.logo-navbar>img{
    max-height: 72px;
}
.carousel-indicators{
    display: none
}
#termesERDV{
    text-align: justify;
}

#payment-form form {
  width: 30vw;
  min-width: 500px;
  align-self: center;
  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
  border-radius: 7px;
  padding: 40px;
}

#payment-form .hidden {
  display: none;
}

#payment-form #payment-message {
  color: rgb(105, 115, 134);
  font-size: 16px;
  line-height: 20px;
  padding-top: 12px;
  text-align: center;
}

#payment-element {
  margin-bottom: 24px;
}

/* Buttons and links */
#payment-form button {
  background: #5469d4;
  font-family: Arial, sans-serif;
  color: #ffffff;
  border-radius: 4px;
  border: 0;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  transition: all 0.2s ease;
  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  width: 100%;
}
#payment-form button:hover {
  filter: contrast(115%);
}
#payment-form button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* spinner/processing state, errors */
#payment-form .spinner,
#payment-form .spinner:before,
#payment-form .spinner:after {
  border-radius: 50%;
}
#payment-form .spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
#payment-form .spinner:before,
#payment-form .spinner:after {
  position: absolute;
  content: "";
}
#payment-form .spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: #5469d4;
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}
#payment-form .spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: #5469d4;
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}
.templateImageList{
    padding-left: 0;
}
#availability-alert-start,#availability-alert-end{
    height: 34px;
    padding: 6px 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 600px) {
  form {
    width: 80vw;
    min-width: initial;
  }
}

.storeLocatorDirectory .jumbotron{
    padding-top: 10px;
    padding-bottom: 10px;
}
.storeLocatorDirectory .jumbotron h2,.storeLocatorDirectory .jumbotron h3{
        display: inline;
    margin-top: 10px;
    padding-left: 15px;
    line-height: 1.5;
}
.storeLocatorDirectory .jumbotron h4{
        display: inline;
    margin-top: 10px;
    padding-left: 15px;
        line-height: 2.1;
}
.directory-url-group{
    display: flex;
}
.directory-url-checkbox{
    position: absolute;
    right: 10px;
}
.directory-url-checkbox>input,.directory-url-checkbox>label{
    cursor: pointer;
}
.servicesChoiceDiv>.servicesList{
    bottom: initial!important;
    top: 100%!important;
}
.servicesFilterChoiceDiv ul.templatesList,.servicesChoiceDiv ul.templatesList{
    top: -1px!important;
        bottom: auto;
    width: max-content;
    height: max-content;
}
input.form-control.email-smscheckbox[type=checkbox]{
           width: auto;
    height: auto;
    margin-top: 10px;
}
.button-login-container_iframe{
    margin: 0;
    margin-bottom: -20px;
}
.img-logo-natixis{
    max-height: 70px;
}
.panel-type-rdv{
        padding: 25px 5px;
    border: 2px solid #ccc;
    border-radius: 15px;
    text-align: left;
    display: flex;
    margin-bottom: 5px;
}

.panel-type-rdv .radio input:checked + .indicator:before,.panel-type-rdv .radio-inline input:checked + .indicator:before{
    border-color: #888;
    background: #888;
}
.confirm-body-natx,.confirm-body-natx div{
    text-align: center!important;
}
.label-body-natx{
    font-weight: bold!important;
    font-family: arial;
}
@media only screen and (max-width: 767px) {
    .directory-url-checkbox{
        position: initial;
        margin-top: 19px;
        right: 0;
    }
    #container-list-directory{
        padding-top: 15px;
    }
    .img-logo-natixis{
          max-height: 60px;
    width: auto;
    }
    .logo-printemps{
        text-align: center;
    }
    .mobile-li-step{
        width: 33%!important;
    }
    #msform{
        width: auto;
    }
    .stepBar{
        margin-top: 41px;
    }
    .form-check-label{
        width: 84%;
        line-height: 1.5;
        position: relative;
        top: 20px;
    }
    #loginForm{
        width: 100%;
    }
    .userProfileLogin{
            font-size: 15px;
    margin: 0;
    width: 100%;
    }
    .navbar-brand{
        width: 75%;
        margin-bottom: 25px;
    }
    .navbar-inverse .navbar-toggle.collapsed:not(:focus) .icon-bar{
        background-color:#333;
    }
}
.employeesList.dropdown-menu{
    bottom: auto!important;
    top: 100%!important;
}
#payment-form{
    margin: auto;
}
#content> .container{
    width: auto;
}
.form-check-price-fitting{
    display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
}
.label-check-price-fitting{
    position: relative;
    top: 25px;
}
.form-check-price-fitting+label.error{
    margin-top: 25px;
}
.hrdivider-golf{
    margin-bottom: 0;
    margin-top: 0;
}
.content-golf{
    min-height: 0!important;
}
.dropdown-menu > li.open > button {
    background-color: #F5F5F5;
    color: #262626;
    text-decoration: none;
}

.dropdown-menu>li>button {
    white-space: normal !important;
}


.dropdown-menu>li>button {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu button {
    align-items: center;
    vertical-align: middle;
    display: flex;
    border: none;
    background-color: #fff;
    width: 100%;
    text-align: left;
}
.dropdown-menu>li>button:hover, .dropdown-menu>li>button:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}
.icon-plus-employee{
        display: flex;
    position: absolute;
    right: auto;
    top: 20px;
    left: 77%;
}
.icon-plus-employee>i{
    font-size: 3rem;cursor: pointer;
}
.ServiceChoice{
    position: relative;
}
.takeAppointmentForMsg,.selectSlotLabel,.lblRefConfirmMsg2{
    color: #666;
}
#mainCalendar{
   background: #1752bc05;padding-top: 10px;border-top: 1px dashed #80808029; 
}
.form-horizontal .form-group.form-group-center{
    width: 35%;
    margin-left: auto;
    margin-right: auto;
}
.form-horizontal .form-group.form-group-center .input-group>.input-group-text{
    display: none;
}
.form-horizontal .form-group.form-group-center input.form-control:not([type=checkbox]){
     padding: calc(.5rem + 1px);
    font-family: HelvNeueOrangeMd;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: #000;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 0.125rem solid #ccc;
    border-radius: 0;
    transition: border-color .2s ease-in-out;
}
.form-horizontal .form-group.form-group-center input.form-control:not([type=checkbox]):focus {
    border-color: #000;
}
.form-horizontal .form-group.form-group-center label.control-label{
    text-align: left;
}
.form-horizontal .form-group.form-group-center input[type=checkbox]{
        background-color:#fff;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-top: .125em;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-size: contain;
    border: 2px solid #ccc;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
        background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    outline: none;
}
.form-horizontal .form-group.form-group-center input[type=checkbox]:checked{
    background-color: #ff7900;
    border-color: #ff7900;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'%3e%3cpath fill='%23000' d='M13 0 5 8 2 5 0 7l5 5L15 2z'/%3e%3c/svg%3e");
}
@media only screen and (max-width: 767px) {
    .icon-plus-employee{
        top: 0;
        left: 0;
        position: relative;
        margin-top: 15px;
    }
}

b, strong, th, label {
  font-weight: 100;
}
#cancel-confirmation-sw{
       padding: 40px;
    border: 1px solid rgb(124, 190, 54);
    border-width: 1px 0px 1px 0px;
    color: rgb(124, 190, 54);
    text-align: center;
}
#cancel-confirmation-sw p{
    margin: 0;
}
.fa.fa-check-circle-o{
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
#cancel-confirmation-sw .fa.fa-check-circle-o{
    font-size: 26px;
}
.disblayblock{
   display: block!important; 
}
.customOpen>.dropdown-menu {
    display: block;
}
.userPosition{
    color: #666;
}

/* ===========================================================================
 * OTP-2026-DEV — S5a. Popup de validation du code OTP.
 * Balisage : pages/otpValidationPage.html — controleur : js/otpValidation.js
 *
 * Rien ici ne fige de couleur de marque : la modale herite du .btn-erdv de la
 * MB (redefini par <tenant>Libs/) et des variables Bootstrap 5.3.3. Seule la
 * saisie du code sort du gabarit standard, parce qu'un code a 6 chiffres se
 * relit mieux espace et centre qu'un champ texte ordinaire.
 * ========================================================================= */
.otp-dialog {
    max-width: 460px;
}
.otp-header {
    border-bottom: 0;
    padding-bottom: 0;
}
.otp-body {
    padding-top: 10px;
}
.otp-description {
    font-size: 14px;
    margin-bottom: 18px;
}
.otp-code-label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
}
/* Chasse fixe + interlettrage : les 6 chiffres restent lisibles et alignes
 * quels que soient les chiffres saisis (un "1" ne doit pas retrecir le champ). */
.otp-code-input {
    font-family: monospace;
    font-size: 24px;
    letter-spacing: 8px;
    text-align: center;
    padding: 8px 10px;
}
.otp-code-input:disabled {
    background-color: #f5f5f5;
}
.otp-validity {
    font-size: 12px;
    color: #666;
    margin-top: 8px;
}
/* #otpError et #otpInfo sont masques a l'ouverture par le controleur (.hide()),
 * puis affiches a la demande : pas de display initial ici. */
.otp-error {
    font-size: 13px;
    color: #a94442;
    margin-top: 10px;
}
.otp-info {
    font-size: 13px;
    color: #31708f;
    margin-top: 10px;
}
/* Le bouton principal a gauche, les actions secondaires a droite : l'inverse
 * du modal-footer BS5 par defaut, pour que "Valider" suive la saisie. */
.otp-footer {
    border-top: 0;
    justify-content: flex-start;
}
.otp-footer .otp-resend,
.otp-footer .otp-cancel {
    font-size: 13px;
    text-decoration: none;
}
.otp-footer .otp-cancel {
    margin-left: auto;
    color: #666;
}
.otp-footer .btn:disabled {
    opacity: .5;
}