@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
/*    Font :   font-family: "Nunito Sans", sans-serif;   */

/* -- Color --- */
/*  jaune orangé : #				#F5BE00 var(--primary-color);
/*	jaune orangé clair (hover) : 	#F5D200 var(--primary-color-hover);
/*  noir gris trés foncé : 			#3d3d3d rgb(61, 61, 61);
/*  rouge (dot) :                   rgb(245, 92, 0);
/*  Font :	1/ #333	rgb(51, 51, 51);              
/*			2/ #555	rgb(85, 85, 85);
/*			3/ #aaa rgb(170, 170, 170); */
/* ----------- */

/* ------------------ Variable --------------- */
:root {
    --primary-color: rgb(245, 190, 0);
    --primary-color-hover: rgb(245, 210, 0);
    --tertiary-color:rgb(220, 170, 0);
    --dot-active:rgb(245, 92, 0);
    --bck-light:#fff;
    --input-bck-grey:#ccc;
    --placeholder-white-text:#fff;
    --bck-dark:#333;
    --bck-dark-transparent:rgba(51, 51, 51, .8);
    --bck-darker-transparent:rgba(0, 0, 0, .8);
    --text-link-light-hover:#fff;
    --text-link-light:#ddd;
    --border-bottom:#777;
    --transtion:all .3s ease-in-out;
    --box-shadow-dark: 3px 3px 10px rgba(34, 34, 34, .9);

    --user-admin-bck-dark:#555;
    --user-admin-bck-light:#fff;
    --user-admin-text-grey:#777;
    --user-admin-text-black:#333;
}
/* ------------------- Font -------------------- */
body {
    font-family: "Nunito Sans", sans-serif;
}
/* ------------------ Background ---------------- */
/* body{
    position: relative;
    overflow: scroll;
    background-image: url("images/bckg_1-psa3xit.jpg");
    background-attachment: fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    margin: 0;
}
*/

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    background-image: url("images/bckg_1-psa3xit.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-image: url('/images/bckg_1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
}

.bodyAuthClass{
    position: relative;
    overflow: scroll;
    background-image: url("images/bckg_2-WRHTRe9.jpg");
    background-attachment: fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
}
.mainClass{
	background-color: rgba(255,255,255,.8);
	overflow: hidden;
    border-radius: 4px;
}
.homeMainClass{
    padding: 2em;
    margin: 2em 4em;
    background-color: rgba(255,255,255,8);
    border-radius: 5px;
}
.topbarClass{
	background-color: rgb(61, 61, 61, .7);
}
.brandAndToggleClass{
	background-color: rgb(61, 61, 61, .4);
}
/* ----------- Display Header Main Footer -------- */
html,
body{
    height: 100%;
    margin: 0;
}
.mainClass{
    display: flex;
    flex-direction: column;
    min-height: 95vh;
}
/* ---------------- Commun selector -------------- */
html {
    box-sizing: border-box;
}
*{
    box-sizing: border-box;
}
*, *:after, *:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*::first-letter {
    text-transform: capitalize;
}
a{
    text-decoration: none!important;
    transition: var(--transtion);
    color: var(--primary-color);
    cursor: pointer;
}
a:hover,
a:focus{
    text-decoration: none!important;
    transition: var(--transtion);
    color: var(--primary-color-hover)
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom:0;
}
ul{
    padding: 0;
}
input{
    width: 100%;
    line-height: 2;
    border-radius: 6px;
    font-weight: 800;
    font-size: 1.3rem;
    padding-left: .5em;
    border-top: 3px solid #777;
    border-right:1px solid #777;
    border-bottom: 1px solid #777;
    border-left:2px solid #777;
    background-color: #fff;
    color: #333;
    outline: none;
    transition: var(--transtion);
}
input:focus {
    border-bottom: 1px solid #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}
::placeholder{
    color: #888;
    font-weight: 400;
    font-size: 1.1rem;
}
.help-text{
    text-align: justify;
    font-size: .8rem;
    padding: .7em .8em;
    background-color: var(--user-admin-bck-dark);
    color: #fff;
    border-radius: 8px;
    margin-bottom:1em!important;
    width: 100%;
    margin: auto;
    font-size: 1.1rem;
    line-height: 1.2;
}
.helpTextFormWrapClass{
    text-align: justify;
    font-size: .8rem;
    padding: .7em .8em;
    background-color: var(--user-admin-bck-dark);
    color: #fff;
    border-radius: 8px;
    margin-bottom:1em!important;
    width: 100%;
    margin: auto;
    font-size: 1.1rem;
    line-height: 1.2;
}
.helpText2FormClass{
    border: 2px solid #f00;
    padding: .4em;
    border-radius: 4px; 
}
.requiredFieldClass label:after {
    content: ' *';
    color: red;
    font-size: 1.2em;
    margin-left: 0.2em;
}
.alert{
    padding:1em 1.5em;
    background-color: #aa0000;
    color: #eee;
    margin: .5em auto;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.3;
    border: 4px solid #f00;
    border-radius: 6px;
    text-align: justify;
    max-width: 54em;
    width: 100%;
}
.alert.alert-success{
    padding:1em 1.5em;
    background-color: rgb(23, 104, 0);
    color: #eee;
    margin: .5em auto;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.3;
    border: 4px solid rgb(55, 255, 0);
    border-radius: 6px;
    text-align: justify;
    max-width: 54em;
    width: 100%;
}
.registerFormWrapClass .alert,
.loginWraplass .alert{
    max-width: 25em;
}
.fileSelectorClass.registerFormItemClass input{
    padding-left: 0;
    line-height: 1.5em;
    font-weight: 400;
}
.alertTxtWrapClass{
    background-color: #fff;
    border-radius: 4px;
    padding: .2em 1em;
    margin-top: .5em;
}
.alertTxtClass{
    color:#cc0000;
    font-weight: 800;
    animation: flashing 1s infinite;
    text-align: justify;
}
@keyframes flashing {
  0%   { opacity: .3; }
  50%  { opacity: 1; }
  100% { opacity: .3; }
}
strong{
    font-weight: 800;
}
.cityHelpClass{
    font-size: .9rem;
    padding: .2em .4em;
    text-align: justify;
}
.lowercaseClass{
    text-transform: lowercase;
}
/* - Autocomplete - */
.autocompleteSuggestionsClass{
    display: none;
}
.autocompleteSuggestionsClass {
    border: 1px solid #ccc;
    background: white;
    position: absolute;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    z-index: 999;
    list-style: none;
    padding: 0;
    margin: 0;
    text-transform: lowercase;
    top:100%;
}
.suggestionItemClass {
    padding: 8px 12px;
    cursor: pointer;
    color: #555;
}
.suggestionItemClass:hover {
    background-color: #f0f0f0;
    color: #333
}
.autocompleteMessageClass{
    padding: 1em .5em;
    background-color: #ff7700;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    border-radius: 4px;
}
button{
    cursor: pointer;
}
/* ------------------ Editor ------------------- */
.ql-editor{
    font-size: 1.3rem;
}
/* -------------- Show password ---------------- */
.showPasswordWrapClass {
    display: flex;
    align-items: center;
    gap: 10px;    
    position: absolute;
    right: .7em;
    top: 73%;
    transform: translateY(-27%);  
    background: transparent;
    cursor: pointer;
}
.showPasswordIconClass {
    z-index: 100;
    width: 30px;
    height: 30px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
}
.showPasswordIconClass:hover {
    opacity: 1;
}
.loginFormItemClass .showPasswordWrapClass{
    text-transform: unset;
    position: absolute;
    top: 75%;
    right: 0.75em;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    background: transparent;
}
.registerFormFieldsClass .showPasswordWrapClass{
    text-transform: unset;
    position: absolute;
    top: 60%;
    right: 0.75em;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    background: transparent;
}
.passwordInputClass{
    padding-right: 2.5em;
}
@media only screen and (max-width: 514px){
    .registerFormFieldsClass .showPasswordWrapClass{
        top: 54%;
    }
}
.showPasswordTextClass{
    color: #777;
}
.helpPasswordTextClass{
    padding: .4em 0 0;
}
/* -------------- Required Icon ---------------- */
.required::after{
    position: relative;
    content: '*';
    font-size: 1.5rem;
    font-weight: 800;
    color: #ff0000;
    margin-left: .5em;
    top:.32em;
}
/* ------------------ Button ------------------- */
.buttonClass{
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border-radius: 5px;
    padding: .6em 1em;
    margin: .5em auto;
    font-size: 1.5rem;
    font-weight: 800;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
    /* max-width: 20em; */
}
.buttonClass:hover,
.buttonClass:focus{
    color:#333;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
/* ------------------ Header ------------------- */
.header1Section{
	display: flex;
	flex-wrap: wrap;
	border-bottom:1px solid var(--primary-color);
}
#order1HeaderId{
	order: 1;
}
#order2HeaderId{
	order: 2;
}
/* --------------- User top bar ----------------*/
.header0Section{
    background-color: #000;
    border-bottom: 6px solid #777;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.linkadmin1ProfileWrapClass,
.linkadmin2ProfileWrapClass{
    display: flex;
    justify-content: start;
    margin: 0;
}
.linkadmin1ProfileWrapClass,
.linkadmin2ProfileWrapClass{
    border-bottom: 1px solid #555;
}
.linkProfileClass{
    display: flex;

}
.linkItemProfileClass{
    padding: .5em 0 .5em .5em;
    display: block;
    margin: 0 1.5em 0 0;
    font-size: 1.1rem;
}
/* - / - Pro and Cus admin Toggle Menu - / - */
@media screen and  (max-width : 960px){
    .proAdminToggleBtnClass,
    .cusAdminToggleBtnClass{
        color: #777;
        background-color: var(--primary-color);
        width: 100%;
        border: 0;
        padding: .6em .5em;
        font-size: 1rem;
        font-weight: 800;
        transition: var(--transtion);
        cursor: pointer;
        text-align: center;
        position: relative;
        display: block;
        z-index: 102;
    }
    .proAdminToggleBtnClass:hover,
    .proAdminToggleBtnClass:focus,
    .cusAdminToggleBtnClass:hover,
    .cusAdminToggleBtnClass:focus{
        color: #333;
        background-color: var(--primary-color-hover);
        transition: var(--transtion);
        box-shadow: 0 0 13px -1px #fff;
    }
    .proAdmintoggleMenuBtnWrapClass,
    .cusAdmintoggleMenuBtnWrapClass{
        border: #555;
        background-color: var(--user-admin-bck-dark);
        margin: 1em 0;
        padding:1em;
        border-radius: 6px;
        margin: 0 auto;
        width: 100%;
        margin-bottom: .5em;
        z-index: 100;
        position: relative;
    }
    .proAdminBtnClass,
    .cusAdminBtnClass{
        z-index: 101;
        position: relative;
    }
    .proAdminLighterClass,
    .cusAdminLighterClass{
        box-shadow: 0 0 10px -1px #fff;
        transition: all .5s ease-in-out;
        background-color: var(--primary-color-hover);
        border-radius: 5px;
        color: #000;
    }
    .proAdminMenuClass,
    .cusAdminMenuClass{
        background-color: #000;
        max-height: 0;
        overflow: hidden;
        transition: max-height 1s ease;
        position: relative;
        z-index: 90;
    }
    .proAdminToggleMenuClass,
    .cusAdminToggleMenuClass{
        z-index: 90;
        max-height: 50em;
        transition: max-height 1s ease;
    }
    .linkadmin1ProfileWrapClass ul,
    .linkadmin2ProfileWrapClass ul{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .linkadmin1ProfileWrapClass a,
    .linkadmin2ProfileWrapClass a{
        border-bottom: 1px solid #555;
        width: 100%;
        display: block;
        text-align: center;
        margin-right: 0;
    }
    .linkadmin1ProfileWrapClass, 
    .linkadmin2ProfileWrapClass {
        border-bottom: unset;
    }
}
/* ----------------- Top Bar ------------------- */
.topbarClass{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.authClass{
	display: flex;
}
.linkLoginClass{
    padding: .5em 0 .5em .2em;
}
.linkRegisterClass{
    padding: .5em .5em .5em .2em;
}
.authLinkclass{
	display: flex;
	align-items: center;
}
.authLinkItemIconClass{
	width: 22px;
	height: 22px;
}
.linkLogoutIconClass{
    width: 22px;
	height: 22px;
    vertical-align: middle;
}
.helloClass{
	color: #ddd;
	margin-right: .5em;
    padding: .5em;
}
.linkLogoutClass{
    padding: .5em 0 .5em .5em;
    background: unset;
    border: unset;
    color: #eee;
    font-size: .9rem;
    cursor: pointer;
    transition: var(--transtion);
}
.linkLogoutClass:hover{
    color: var(--text-link-light-hover);
}
.languageChangeLabelClass{
    color: #ddd;
    font-size: 1.2rem;
    font-weight: 600;
    margin-right: .5em;
    display: none;
}
.languageChangeWrapClass{
    margin:.5em 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    width: 3em;
}
.languageChangeClass{
    list-style: none;
    display: flex;
    flex-direction: column;
    position: absolute;
    text-align: right;
    margin-left:0;
    top:-.45em;
    transition: var(--transtion);
    z-index: 2000;
}
.languageChangeClass:hover{
    background:rgba(0, 0, 0, 1);
    border-radius: 5px;
    transition: var(--transtion);
}
.languageButtonClass{
    color: var(--text-link-light);
    cursor: pointer;
    padding: .4em .4em .4em 0;
    display: flex;
    align-items: center;
    z-index: 2000;
}
.languageButtonClass:hover{
    color: var(--text-link-light-hover);
}
.linkItemLastProfileClass{
    margin: 0;
}
.visibleLanguageClass{
    background:rgba(0, 0, 0, .7);
    z-index: 2000;
}
.selectedLanguageClass{
    display: flex;
    align-items: end;
    color:  #fff;
    order: -1;
    font-weight: 800;
}
.unSelectedLanguageClass{
    color: var(--text-link-light);
}
.hiddenLanguageClass{
    display: none;
}
.languageChangeClass.visibleLanguageClass .languageButtonClass{
    display: flex;
}
.languageChangeClass.visibleLanguageClass .hiddenLanguageClass{
    display: flex;
}
.frLanguageClass:hover,
.enLanguageClass:hover,
.esLanguageClass:hover{
    color: var(--text-link-light-hover);
}
.languageFlagClass{
    width: 20px;
    height: 20px;
    border-radius:50%;
    margin-right: 8px;

}
/* ------------------- Navbar ------------------ */
.brandNameWrapClass{
    align-items: center;
    display: flex;
    width: 100%;
}
.brandAndToggleClass{
	display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    width: 100%;
	z-index: 150;
}
.brandClass{
	display: flex;
    justify-content: start;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    width: 100%;
    margin:.5em 0;
}
.brandNameLinkClass{
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 800;
    margin: auto;
    text-shadow: 0 0 5px #333;
}
.brandlogoClass{
    width: 50px;
    height: 50px;
}
/* -----  Menu ----- */
.mainMenuListClass{
	list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}
.mainMenuItemLinkClass{
    padding: .8em .6em .6em;
	font-size: 1.2rem;
    text-decoration: none;
    display: block;
    text-align: center;
	margin: auto;
    width: 100%;
    text-transform: uppercase;
}
.mainMenuItemClass{
    display: flex;
	align-items: center;
	width: auto;
}
.mainMenuItemIconClass{
	width: 25px;
	height: 25px;
}
/* ---- Tooltip ---- */
.tooltipMainMenuClass {
	position: relative;
}
.tooltipTextMainMenuClass{
	visibility: hidden;
	width: 100%;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	padding: 5px;
	position: absolute;
	top:3.2em;
	z-index: 1;
}
.tooltipMainMenuClass:hover .tooltipTextMainMenuClass {
	visibility: visible;
}
/* ----- Responsive Menu -----*/
.toggleIconWrapClass{
	display: block;
	margin-bottom: 1.1em;
}
.toggleClass{
    cursor: pointer;
    top: .6em;
    position: relative;
    border: 1px solid var(--primary-color);
  	padding: .5em;
  	border-radius: 5px;
	transition: all .5s ease-in-out;
}
.toggleClass:hover,
.toggleClass:focus{
	border: 1px solid var(--primary-color-hover);
    box-shadow: 0 0 10px -1px #fff;
	transition: all .5s ease-in-out;
}
.lighter{
	border: 1px solid var(--primary-color);
    box-shadow: 0 0 10px -1px #fff;
	transition: all .5s ease-in-out;
}
.burgerBtnClass{
    display: flex;
  	justify-content: end;
}
/* Menu position: hidden/visible - Menu position: hidden/visible */
.mainMenuWrapClass{
	width: 100%;
	padding: .1em 4em;
    position: absolute;
	background-color: rgba(0, 0, 0, .4);
	z-index: 10;
	clip-path: inset(0 0 400px 0);
	transform: translateY(-94px);
	transition: transform .7s linear .2s, clip-path .4s linear;
}
.toggleMenu{
    background-color: rgba(0, 0, 0, .8);
    z-index: 120;
    padding-top: 10px;
	clip-path: inset(0 0 -94px 0);
    transform:translateY(0);
    transition: transform .2s linear, clip-path .4s linear .2s;
  }
/* Burger menu bars - Burger menu bars */
.toggleIconClass {
	width: 30px;
	height: 30px;
	position: relative;
	cursor: pointer;
}
.toggleIconClass div {
	position: absolute;
	width: 30px;
	height: 4px;
	background-color: var(--primary-color);
	transition: transform .1s ease, opacity .3s ease, background-color .3s ease;
}
.toggleClass:hover .toggleIconClass div,
.toggleClass:focus .toggleIconClass div{
	position: absolute;
	width: 30px;
	height: 4px;
	background-color: var(--primary-color-hover);
	transition: transform .1s ease, opacity .3s ease, background-color .3s ease;;
}
.icon1BarsClass.bar1Class {
	top: 0;
	transform: translateY(-50%) rotate(0deg);
}
.icon2BarsClass.bar2Class {
	top: 50%;
	transform: translateY(-50%);
	opacity: 1;
}
.icon3BarsClass.bar3Class {
	bottom: 0;
	transform: translateY(50%) rotate(0deg);
}
/* Position des bars en croix -  Position of crossbars */
.icon1Xmark.bar1Class {
	background-color: var(--primary-color-hover);
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}
.icon2Xmark.bar2Class {
	opacity: 0;
}
.icon3Xmark.bar3Class {
	background-color: var(--primary-color-hover);
	bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
}
/* Rotation de l'icon en croix - Cross icon rotation */
.toggleIconClass.toggleIcon{
	transform: rotate(360deg);
    transition:transform .5s ease-in-out;
}
.toggleIconClass{
	transform: rotate(-360deg);
    transition:transform .5s ease-in-out;
}
/* --- Couleur du text du menu  ---- */
a.mainMenuItemLinkClass{
	color:rgba(255,255,255,0);
	font-weight: 800;
	transition: color .1s ease-in-out, opacity .1s ease-in-out;
}
.visibleMenuItemText a.mainMenuItemLinkClass{
	color:rgba(255,255,255,.7);
	transition: color .1s ease-in-out, opacity .1s ease-in-out;
}
.visibleMenuItemText a.mainMenuItemLinkClass:hover,
.visibleMenuItemText a.mainMenuItemLinkClass:focus{
	color:var(--text-link-light-hover);
	transition: color .1s ease-in-out, opacity .1s ease-in-out;
}
a.activeLinkMainMenuClass{
    color:var(--primary-color-hover)!important;
}
/* ------------------- Register ------------------- */
.registerFormMainClass{
    background-color: unset;
}
.registerFormWrapClass{
    max-width: 35em;
    margin: 1em auto;
    width:100%;
    background-color: var(--bck-dark-transparent);
    box-shadow: var(--box-shadow-dark);
    border-radius: 5px;
}
.registerFormClass{
    display: flex;
    flex-direction: column;
}
.registerFormFieldsClass{
    color:#fff;
    padding: 1em;
}
.registerFormTitleClass{
    padding: 1em .4em 0 .4em;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color:#fff;
}
.registerFormItemClass{
    position: relative;
}
.registerFormItemClass.fileSelectorClass{
    padding: 1em .5em;
    border: 1px solid #fff;
    display: block;
    margin-top: 2em;
    border-radius: 6px;
}
.fileSelectorInfosClass p{
    text-align: justify;
}
.registerFormItemClass input{
    width: 100%;
    display: flex;
    line-height: 2;
    border-radius: 6px;
    font-weight: 800;
    font-size: 1.3rem;
    padding-left: .5em;
}
.registerFormItemClass label{
    font-size: 1.3rem;
    padding: .5em 1em .5em 0;
    display: block;
    margin-top: .7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}
#customer_registration_agreeTerms,
#professional_registration_agreeTerms,
#registration_form_agreeTerms{
    height: 1.5em;
    width: 1.5em;
    margin-right: 1em;
}
.registerFormAgreeClass div{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 1em 0;
}
.registerFormAgreeClass label{
    margin-top: 0;
}
.registerFormAgreeClass p{
    text-align: justify;
}
/* --------------------- Login -------------------- */
.loginFormMainClass{
    background-color: unset;
}
.loginFormWraplass{
    max-width: 35em;
    margin: 1em auto;
    width:100%;
    background-color: var(--bck-dark-transparent);
    box-shadow: var(--box-shadow-dark);
    border-radius: 5px;
}
.loginFormClass{
    display: flex;
    flex-direction: column;
    margin-top: 2em;
}
.loginFormTitleClass{
    padding: 1em .4em 0 .4em;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color:#fff;
}
.loginFormFieldsClass{
    color:#fff;
    padding: 1em;
}
.loginFormItemClass{
    position: relative;
    display: block;
}
.loginFormItemClass input{
    width: 100%;
    display: flex;
    line-height: 2;
    border-radius: 6px;
    font-weight: 800;
    font-size: 1.3rem;
    padding-left: .5em;
}
.loginFormItemClass label{
    font-size: 1.3rem;
    padding: .5em 1em .5em 0;
    display: block;
    margin-top: .7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}
.remembermeClass{
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin: 1em 0;
}
.loginFormItemClass .remembermeLabelClass{
    padding: .2em 1em .2em 0;
}
.loginFormItemClass .remembermeInputClass{
    width: 1.5em;
    height: 1.5em;
}
.loginFormLinkClass{
    display: block;
    padding: .2em;
    font-size: 1.1rem;
}
/* ----------------- Reset Password --------------- */
.resetPwdFormMainClass{
    background-color: unset;
}
.resetPwdFormWraplass{
    max-width: 35em;
    margin: 1em auto;
    width:100%;
    background-color: var(--bck-dark-transparent);
    box-shadow: var(--box-shadow-dark);
    border-radius: 5px;
}
.resetPwdFormClass{
    display: flex;
    flex-direction: column;
    margin-top: 2em;
}
.resetPwdFormTitleClass{
    padding:2em .4em 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color:#fff;
}
.resetPwdFormFieldsClass{
    color:#fff;
    padding: 2em;
}
.resetPwdFormFieldsClass input{
    width: 100%;
    display: flex;
    line-height: 2;
    border-radius: 6px;
    font-weight: 800;
    font-size: 1.3rem;
    padding-left: .5em;
}
.resetPwdFormFieldsClass label{
    font-size: 1.3rem;
    padding: .5em 1em .5em 0;
    display: block;
    margin-top: .7em;
}
.helpResetPwdTextClass{
    display: block;
    padding: .4em 0 0;
    font-size: 1.1rem;
    margin-bottom: 1em;
    text-align: justify;
}
/* ----------------- Reset Password --------------- */
.checkEmailFormMainClass{
    background-color: unset;
}
.checkEmailFormWraplass{
    max-width: 35em;
    margin: 1em auto;
    width:100%;
    background-color: var(--bck-dark-transparent);
    box-shadow: var(--box-shadow-dark);
    border-radius: 5px;
}
.checkEmailFormClass{
    display: flex;
    flex-direction: column;
    margin-top: 2em;
    padding: 2em;
}
.checkEmailFormClass p{
    display: flex;
    flex-direction: column;
    margin-top: .2em;
    color:#fff;
    padding: .3em;
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: justify;
}
.checkEmailFormTitleClass{
    padding: .4em 0;
    text-align: center;
    font-size: 1.4rem;
    color:#fff;
}
/* ---------------- Change Password --------------- */
.pwdChangeMainClass{
    background-color: unset;
}
.pwdChangeWraplass{
    margin: 1em auto;
    width:100%;
    background-color: var(--user-admin-bck-light);
    box-shadow: var(--box-shadow-dark);
    border-radius: 5px;
}
.pwdChangeClass{
    display: flex;
    flex-direction: column;
    margin-top: 2em;
}
.pwdChangeFieldsWrapClass{
    padding: 2em; 
}
.pwdChangeTitleClass{
    padding: .4em 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--user-admin-text-grey);
}
.pwdChangeItemClass{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 6px;
    padding: .5em;
    margin: .5em 0;
}
.pwdChangeItemClass > div{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .5em .5em 2em;
    margin: .5em 0;
}
.pwdChangeItemClass input{
    width: 100%;
    display: flex;
    line-height: 2;
    border-radius: 6px;
    font-weight: 800;
    font-size: 1.3rem;
    border: 2px solid #aaa;
}
.pwdChangeItemClass label{
    font-size: 1.3rem;
    padding: .5em 1em .5em 0;
    display: block;
    margin-top: .7em;
}
.pwdSubmitWrapClass{
    margin-top: 1.5em;
    border-top:1px solid #aaa ;
    padding-top: 1em;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}
.pwdChangeItemClass{
    position: relative;
    width: 100%;
    border: 2px solid #aaa;
}
.pwdChangeItemClass input{
    width: 100%;
    display: flex;
    line-height: 2;
    border-radius: 6px;
    font-weight: 800;
    font-size: 1.3rem;
    padding-left: .5em;
    border: 2px  solid #aaa;
}
.pwdChangeItemClass label{
    font-size: 1.3rem;
    padding: .5em 1em .5em 0;
    display: block;
    margin-top: .7em;
}
.pwdChangePwdClass{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}
.pwdChangePwdClass input{
    width: 100%;
    display: flex;
    line-height: 2;
    border-radius: 6px;
    font-weight: 800;
    font-size: 1.3rem;
    padding-left: .5em;
    border: 2px  solid #aaa;
}
.pwdChangePwdClass label{
    font-size: 1.3rem;
    padding: .5em 1em .5em 0;
    display: block;
    margin-top: .7em;
}
.pwdChangeButtonWrapClass{
    width: 100%;
}
.pwdChangeButtonWrapClass .buttonClass{
    width: 100%;
    max-width: 100%;
}
.passwordMessageClass{
    font-size: 0.9rem;
    margin-top: 0.5rem;   
}
.pwdChangeItemClass ul{
  position: relative;
}
.pwdChangeItemClass li{
  color: #cc0000;
  font-size: 1.4rem;
  position: absolute;
  top: 2.2em;
  width: 100%;
  text-align: center;
  font-weight: 800;
}
/* ------------------ Profile --------------------- */
.professionalProfileMainClass,
.customerProfileMainClass{
    background-color: unset;
}
.professionalProfileWraplass,
.customerProfileWraplass{
    margin: 1em auto;
    width:100%;
    background-color: var(--user-admin-bck-light);
    box-shadow: var(--box-shadow-dark);
    border-radius: 5px;
}
.professionalProfileClass,
.customerProfileClass{
    display: flex;
    flex-direction: column;
    margin-top: 2em;
}
.professionalProfileFieldsWrapClass,
.customerProfileFieldsWrapClass{
    padding: 1em; 
}
.professionalProfileSecondFieldsClass,
.professionalProfileFirstFieldsClass,
.customerProfileSecondFieldsClass,
.customerProfileFirstFieldsClass{
    color:var(--user-admin-text-black);
}
.professionalProfileTitleClass,
.customerProfileTitleClass{
    padding: .4em 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--user-admin-text-grey);
}
.professionalProfileItemClass,
.customerProfileItemClass{
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding-left: .5em;
    border: 2px  solid #ccc;
    margin: .5em 0;
}
.professionalProfileItemClass > div,
.customerProfileItemClass > div{
    color: var(--user-admin-text-grey);
    margin-right: 1.5em;
    padding: .9em 0;
}
.professionalProfileItemClass p,
.customerProfileItemClass p{
    font-weight: 800;
    font-size: 1.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.professionalProfileImageClass,
.customerProfileImageClass{
    display: block;
    background-color: var(--bck-dark);
    padding: 2em;
    border-radius: 6px;
    color: #fff;
    min-height: 35em;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.professionalProfileImageClass p,
.customerProfileImageClass p{
    padding: 1.7em 1em 0 1em;
    text-align: center;
    width: 100%;
}
.professionalProfileImageClass img,
.customerProfileImageClass img{
    width: 100%;
    max-width: 180px;
    min-width: 150px;
    border: 1px solid #ddd;
    margin: auto;
    display: block;
}
.professionalProfileMenuClass,
.customerProfileMenuClass{
    background-color: var(--user-admin-bck-dark);
    padding: 1.5em;
}
.professionalProfileMenuListClass,
.customerProfileMenuListClass{
    display: flex;
    flex-direction: column;
    align-content: space-between;
    width: 100%;
    height: 100%;
}
.professionalProfileMenuListClass li,
.customerProfileMenuListClass li{
    width: 100%;
}
.professionalProfileMenuItemClass,
.professionalProfileDeleteProfileClass,
.customerProfileMenuItemClass,
.customerProfileDeleteProfileClass{
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border: 0;
    border-radius: 5px;
    padding: .6em .5em;
    margin: .5em auto;
    font-size: 1rem;
    font-weight: 800;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;

}
.professionalProfileMenuItemClass:hover,
.professionalProfileMenuItemClass:focus,
.professionalProfileDeleteProfileClass:hover,
.professionalProfileDeleteProfileClass:focus,
.customerProfileMenuItemClass:hover,
.customerProfileMenuItemClass:focus,
.customerProfileDeleteProfileClass:hover,
.customerProfileDeleteProfileClass:focus{
    color:#333;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.professionalProfileMenuDeleteClass button{
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border: 0;
    border-radius: 5px;
    padding: .5em .5em;
    margin: .5em auto;
    font-size: 1rem;
    font-weight: 800;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.professionalProfileMenuDeleteClass button:hover,
.professionalProfileMenuDeleteClass button:focus{
    color:#333;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.customerProfileLineClass{
    padding: 1px 0;
    width: 100%;
    background-color: #aaa;
    margin: .5em auto;
}
/* -------------- Profile update ------------------- */
.mainClass.profileUpdateFormMainClass{
    background-color: var(--bck-darker-transparent);
}
.profileUpdateFormWraplass form{
    padding: .5em;
}
.profileUpdateFormClass{
    display: flex;
    flex-direction: column;
    margin-top: 2em;
}
.profileUpdateFormFieldsClass{
    background-color: var(--bck-light);
    border: 4px solid var(--primary-color);
    border-radius: 12px;
    max-width: 75em;
    width: 100%;
    margin: auto;
    box-shadow: var(--box-shadow-dark);
}
.profileUpdateFormTitleClass{
    color: #fff;
    text-align: center;
    font-size: 1.3rem;
    padding: .5em;
    border-bottom: 1px solid var(--border-bottom);
    margin: 0 .5em .5em;
    font-weight: 800;
}
.profileUpdateFormItemClass{
    position: relative;
}
.profileUpdateFormItemClass input{
    width: 100%;
    line-height: 2;
    border-radius: 6px;
    font-weight: 800;
    font-size: 1.3rem;
    padding-left: .5em;
    border-top: 3px solid #777;
    border-right:1px solid #777;
    border-bottom: 1px solid #777;
    border-left:2px solid #777;
    background-color: var(--input-bck-grey);
    color: #333;
    outline: none;
    transition: var(--transtion);
}
.profileUpdateFormItemClass ::placeholder{
    color: var(--placeholder-white-text);
}
.profileUpdateFormItemClass label{
    font-size: 1.3rem;
    padding: .5em 1em .5em 0;
    display: block;
    margin-top: .7em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.profileUpdatefileSelectorClass{
    background-color: var(--bck-dark);
    padding: 2em 1.5em 1.5em;
    border-radius: 6px;
    min-height: 35em;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.profileUpdatefileSelectorClass > div{
    width: 100%;
}
.profileDeletePhotoWrapClass{
    margin: 1em 0 0;
    border: 2px solid #aaa;
    border-radius: 6px;
    padding:1.5em  1em;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.profileUpdatefileSelectorClass p,
.profileDeletePhotoWrapClass p{
    width: 100%;
    display: block;
    text-align: justify;
}
.profileDeletePhotoClass{
    width: 100%;
    margin-top: 1em;
}
.profileDeletePhotoClass > div{
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.profileDeletePhotoClass > div > label{
    width: 100%;
    padding: 0;
    margin-top: 0;
}
.profileDeletePhotoClass > div > input{
    width: 1.5em;
    height: 1.5em;
    margin-right: 1em;
}
.profileUpdateFormImageClass .currentImageClass img{
    max-width: 180px;
}
.profileUpdateSubmitWrapClass{
    margin-top: 1.5em;
    border-top:1px solid #aaa ;
    padding-top: 1em;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.validatePasswordTextClass{
    width: 100%;
    font-size: 1.2rem;
    color:#ff0000;
}
.profileUpdateFormPwdClass{
    width: 100%;
}
.profileUpdateFormItemClass.profileUpdateFormPwdClass{
    display: block;
}
.profileUpdateFormButtonWrapClass{
    width: 100%;
}
.profileUpdateFormButtonWrapClass .buttonClass{
    width: 100%;
    max-width: 100%;
    line-height: .9;
}
/* - Commun class > Photo and image rm (stimulus) - */
.hiddenClass{
    display: none;
}
.reloadImagebtnClass,
.removeImagebtnClass{
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border-radius: 5px;
    padding: .6em 1em;
    margin: .5em auto;
    font-size: 1.2rem;
    font-weight: 800;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.reloadImagebtnClass:hover,
.reloadImagebtnClass:focus,
.removeImagebtnClass:hover,
.removeImagebtnClass:focus{
    color:#333;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
}
.currentImageSrcClass{
    background-color: var(--bck-dark);
    padding: 2em 1.5em 1.5em;
    border-radius: 6px;
    min-height: 35em;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.currentImageClass{
    width: 100%;
}
.currentImageClass img{
    margin: auto;
    display: block;
    border: 1px solid #ddd;
    width: 100%;
}
/* -------------- Profile account delete ----------- */
.accountDeleteConfirmClass{
    display: flex;
    flex-direction: column;
    background-color: var(--user-admin-bck-dark);
    border-radius: 6px;
    padding: 2em;
    margin: 1.5em auto 0;
    width: 100%;
    max-width: 75em;  
}
.accountDeleteConfirmClass h1{
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    text-align: center;
    padding: .5em 1em;
    margin-bottom: .5em;
}
.accountDeleteConfirmClass > p{
    color: #fff;
    font-size: 1.3rem;
    text-align: justify;
    padding: 1em 0;
    line-height: 1.4;   
}
.accountDeleteConfirmClass .modalContentClass p{
    color: #000;
    font-size: 1.3rem;
    text-align: justify;
    padding: 1em 0;
    line-height: 1.4;   
}
.accountDeleteLinkConfirmClass{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.accountDeleteLinkConfirmClass li{
    width: 100%;
}
.accountDeleteLinkConfirmClass a{
    color: #777;
    background-color: var(--primary-color);
    width: 100%;
    border: 0;
    border-radius: 5px;
    padding: .6em .5em;
    margin: .5em auto;
    font-size: 1.5rem;
    font-weight: 800;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.accountDeleteLinkConfirmClass a:hover,
.accountDeleteLinkConfirmClass a:focus{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;  
}
/* ----------- Home Store and Search store --------- */
.homeStoreMainClass{
    background-color: unset;
    padding: 0; 
    overflow: visible;
}
.homeStoreDisplayWrapClass{
    background-color: rgba(147, 147, 147, .9);
    border-radius: 8px; 
    padding: 1em .5em;
    margin-bottom: 1em;
    box-shadow: 2px 2px 6px #444;
}
.homeStoreTitleClass{
    padding: .4em 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color:#fff;
    text-shadow: 0 0 1px #000,
                 0 0 2px #000,
                 0 0 3px #000,
                 0 0 5px #000,
                 0 0 7px #000; 
}
.homeStoreItemClass{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1.2em;
}
.homeStoreItemSub1Class{
    display: flex;
    align-items: center;
    text-align: right;
}
.homeStoreItemSub2Class{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: .7em;
}
.homeStoreFilterSortClass{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: rgba(255,255,255,.2);
    border-radius: 6px;
    margin-bottom: 1em;
    justify-content: space-between;
    box-shadow: 2px 2px 6px #444;
}
.homeStoreSortWrapClass{
    position: relative;
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    box-shadow: 2px 2px 6px #444;
    font-size: 1.1rem;
    border-radius: 5px;
    padding: .45em 1em;
    font-weight: 600;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;  
}
.homeStoreSortWrapClass:hover,
.homeStoreSortWrapClass:focus{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff; 
}
.homeStoreSortCatBlockClass{
    padding: .45em 1em .45em 1em;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 500;
    background: #fff;
    border-radius: 4px;
}
.homeStoreSortCatItemClass{
    display: flex;
    justify-content: start;
    align-items: center;
    padding: .5em 0 .2em;
    cursor: pointer;
}
.homeStoreSortCatItemClass input{
    width: 1.4em;
    height: 1.4em;
    margin-right: 1em;
}
.homeStoreSortCatSelClass{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5em 0 .2em;
}
.homeStoreSortCatSelClass select{
    font-size: 1.3rem;
    padding: .1em .5em;
}
.homeStoreSortBtnDisplayClass {
    position: relative;
    display: block;
}
.homeStoreSortBtnWrapClass {
    position: relative;
    display: block;
    width: 100%;
}
.homeStoreSortBtnWrapClass::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .3rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #777;
    pointer-events: none;
    z-index: 101;
}
.homeStoreSortCatWrapClass{
    position: relative;
    display: block;
}
.homeStoreSortCatWrapClass::after{
    content: "";
    position: absolute;
    top: 50%;
    right: .3rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #777;
    pointer-events: none;
    z-index: 101;
}
.homeStoreSortCatBtnClass{
	position: relative;
	color: #777;
	background-color: var(--primary-color);
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0;
	box-shadow: 2px 2px 6px #444;
	font-size: 1.1rem;
	border-radius: 5px;
	padding: .55em 1em;
	font-weight: 800;
	transition: var(--transtion);
	cursor: pointer;
	text-align: center;
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.homeStoreSortCatBtnClass:hover,
.homeStoreSortCatBtnClass:focus{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff; 
}
.homeStoreSortBtnClass{
    padding: .5em 1em;
    width: 100%;
    color: #777;
}
.homeStoreItemSub2Class {
    width: 100%;
}
.homeStoreMoreInfoClass{
    text-align: right;
}
.homeStoreNameClass .homeStoreNameLinkClass{
    max-width: 10em;
    display: block;
    padding: .2em .8em;
    font-size: 1.1rem;
    font-weight: 800;
    color:var(--primary-color);
    border-radius: 25px;
    border: 3px solid transparent;
    text-shadow: 0 0 4px #000;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.homeStoreNameClass .homeStoreNameLinkClass:hover{
    color:var(--primary-color);
    border: 3px solid var(--primary-color);  
    box-shadow: 0 0 10px #777;
    border-radius: 25px;
}
.homeStoreDistanceDisplayClass{
    color:var(--primary-color);
    font-size: 1rem;
    font-weight: 800;
    text-shadow: 0 0 4px #000;
    white-space: nowrap;
}
.homeStoreDistanceDisplayClass h4{
    color: #777;
    font-size: 1.1rem;
    font-weight: 400;
    text-shadow: 0 0 0 #000;
}
.homeStoreMoreInfoLinkClass{
    padding: .2em .8em;
    font-size: 1rem;
    font-weight: 800;
    color:var(--primary-color);
    border-radius: 25px;
    border: 3px solid transparent;
    text-shadow: 0 0 4px #000;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width: auto;
}
.homeStoreMoreInfoLinkClass:hover,
.homeStoreMoreInfoLinkClass:focus{
    color:var(--primary-color);
    border: 3px solid var(--primary-color);  
    box-shadow: 0 0 10px #777;
    border-radius: 25px;
}
.homeStoreFilterWrapClass form{
    display: flex;
    flex-direction: column;
}
.homeStoreCityClass{
    width: 100%;
    margin: 2em 0 .5em 0;
    display: flex;
    flex-direction: column;
}
.advancedSearchStoreCityClass,
.advancedSearchStoreStoreClass{
    position: relative;
    width: 100%;
    margin: 2em 0 .5em 0;
    display: flex;
    flex-direction: column;
} 
.homeStoreCityClass .cityHelpClass,
.advancedSearchStoreCityClass .cityHelpClass{
    font-size: 1.15rem;
    text-align: left;
    color: #fff;
    text-shadow: 0 0 1px #000, 
                0 0 3px #000;
    background: rgba(0,0,0,.4);
    border-radius: 6px;
    margin-top: .2em;
}
.homeStoreCityClass ul{
    position: absolute;
}
.advancedSearchStoreCityClass ul,
.advancedSearchStoreStoreClass ul{
    position: absolute;
}
.homeStoreCityClass > div{
    width: 100%;
    box-shadow: 2px 2px 6px #444;
}
.advancedSearchStoreCityClass > div,
.advancedSearchStoreStoreClass > div{
    width: 100%;
    box-shadow: 2px 2px 6px #444;
}
.homeStoreCityClass input,
.advancedSearchStoreCityClass input,
.advancedSearchStoreStoreClass input{
    line-height: 2.3;
}
.homeStoreRadiusClass{
    width: 100%;
    margin: .5em 0;
}
.homeStoreRadiusClass div{
    position: relative;
    display: inline-block;
    box-shadow: 2px 2px 6px #444;
    width: 100%;
}
.homeStoreRadiusClass select{
    width: 100%;
    padding: .2em 1.2em .1em .2em;
    font-size: 1.2rem;
    line-height: 2.2;
    font-weight: 800;
    position: relative;
    color: #777;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    box-shadow: 1px 1px 1px #ccc;
    border-radius: 5px;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.homeStoreRadiusClass > div::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 14px solid #777;
    pointer-events: none;
}
.homeStoreRadiusClass option{
    padding: .4em .2em;
    font-size: 1.2rem;
}
.homeStoreBtnClass{
    width: 100%;
    margin: .5em 0 1em 0;
}
.homeStoreBtnClass > div{
    width: 100%;
}
.homeStoreBtnClass button{
    position: relative;
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border-radius: 5px;
    padding: .45em 1em;
    font-size: 1.5rem;
    font-weight: 800;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow: 2px 2px 6px #444;
}
.homeStoreBtnClass button:hover,
.homeStoreBtnClass button:focus{
    color:#333;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.homeStoreLinkReferenceNewClass{
    margin: 5em auto 0;
    width: 100%;
    color:#ccc;
    text-shadow: 0 0 1px #000,
                0 0 2px #000,
                0 0 3px #000,
                0 0 5px #000,
                0 0 7cap #000;
    border-radius: 5px;
    padding: .45em 1em;
    font-size: 1.2rem;
    font-weight: 600;
    border: 1px solid #fff;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
    float: right;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.homeStoreLinkReferenceNewClass:hover,
.homeStoreLinkReferenceNewClass:focus{
    color:#333;
    border: 1px solid var(--primary-color);
    text-shadow:unset;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.homeStoreNameClass {
    order: 1;
}
.homeStoreItemSub1Class {
    order: 2;
}
.homeStoreItemSub2Class {
    order: 4;
}
.homeStoreMoreInfoClass {
    order: 3;
}
.homeStoreTimetableClass,
.homeStoreDistanceClass,
.homeStoreSundayOpenClass,
.homeStoreTimetableClass,
.homeStoreCategoryClass,
.homeStoreGroceryProductsClass,
.homeStoreSaltedProductsClass,
.homeStoreKindClass{
    padding: 0 .5em;
}
.homeStoreDistanceDisplayClass{
    position: relative;
    width: 100px;
    display: block;
}
.homeStoreOpenStoreIconClass,
.homeStoreSoonOpenStoreIconClass,
.homeStoreSoonCloseStoreIconClass,
.homeStoreCloseStoreIconClass,
.homeStoreOpenStoreUnknownIconClass,
.homeStoreSundayOpenIconClass,
.homeStoreSundayCloseIconClass,
.homeStoreCatBakeryIconClass,
.homeStoreCatBakPatIconClass,
.homeStoreCatBakPatTeaIconClass,
.homeStoreCatPatisserieIconClass,
.homeStoreCatPatTeaIconClass,
.homeStoreCatPatBreIconClass,
.homeStoreCatPatTeaBreIconClass,
.homeStoreCatTeaIconClass,
.homeStoreCatTeaBreIconClass,
.homeStoreCatBreadShopIconClass,
.homeStoreCategoryNoIconClass,
.homeStoreGroceryProductsIconClass,
.homeStoreGroceryProductsNoIconClass,
.homeStoreSaltedProductsIconClass,
.homeStoreSaltedProductsNoIconClass,
.homeStoreKindArtisanIconClass,
.homeStoreKindExclusiveArtisanIconClass,
.homeStoreKindBackingTermIconClass,
.homeStoreKindNoIconClass{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: block;
    position: relative;
}
.homeStoreOpenStoreIconClass{
    background-color: #0f0;
}
.homeStoreSoonOpenStoreIconClass{
    background-color: #fff;
    border: 5px solid #0f0;
}
.homeStoreSoonCloseStoreIconClass{
    background-color: #fff;
    border: 5px solid #f00;
}
.homeStoreCloseStoreIconClass{
    background-color: #f00;
}
.homeStoreOpenStoreUnknownIconClass{
    background-color: #aaa;
}
.homeStoreSundayOpenIconClass{
    background-color: #fff;
}
.homeStoreSundayCloseIconClass{
    background-color: #000;
}
.homeStoreCatBakPatIconClass{
        background: conic-gradient(
        #E8BD00 0% 25%,
        #FFEB32 25% 50%,
        rgba(0,0,0,.4) 50% 75%,
        rgba(0,0,0,.4) 75% 100%
        );
}
.homeStoreCatPatisserieIconClass{
    background: conic-gradient(
        rgba(0,0,0,.4) 0% 25%,
        #FFEB32 25% 50%,
        rgba(0,0,0,.4) 50% 75%,
        rgba(0,0,0,.4) 75% 100%
        );
}
.homeStoreCatBakeryIconClass{
    background: conic-gradient(
        #E8BD00 0% 25%,
        rgba(0,0,0,.4) 25% 50%,
        rgba(0,0,0,.4) 50% 75%,
        rgba(0,0,0,.4) 75% 100%
        );
}
.homeStoreCatBakPatTeaIconClass{
    background: conic-gradient(
        #E8BD00 0% 25%,
        #FFEB32 25% 50%,
        #FFF5A0 50% 75%,
        rgba(0,0,0,.4) 75% 100%
        );
}
.homeStoreCatPatTeaIconClass{
    background: conic-gradient(
        rgba(0,0,0,.4) 0% 25%,
        #FFEB32 25% 50%,
        #FFF5A0 50% 75%,
        rgba(0,0,0,.4) 75% 100%
        );
}
.homeStoreCatPatBreIconClass{
    background: conic-gradient(
        rgba(0,0,0,.4) 0% 25%,
        #FFEB32 25% 50%,
        rgba(0,0,0,.4) 50% 75%,
        #FFEEBB 75% 100%
        );
}
.homeStoreCatPatTeaBreIconClass{
    background: conic-gradient(
        rgba(0,0,0,.4) 0% 25%,
        #FFEB32 25% 50%,
        #FFF5A0 50% 75%,
        #FFEEBB 75% 100%
        );
}
.homeStoreCatTeaIconClass{
    background: conic-gradient(
        rgba(0,0,0,.4) 0% 25%,
        rgba(0,0,0,.4) 25% 50%,
        #FFF5A0 50% 75%,
        rgba(0,0,0,.4) 75% 100%
        );
}
.homeStoreCatTeaBreIconClass{
    background: conic-gradient(
        rgba(0,0,0,.4) 0% 25%,
        rgba(0,0,0,.4) 0% 25%,
        #FFF5A0 50% 75%,
        #FFEEBB 75% 100%
        );
}
.homeStoreCatBreadShopIconClass{
    background: conic-gradient(
        rgba(0,0,0,.4) 0% 25%,
        rgba(0,0,0,.4) 25% 50%,
        rgba(0,0,0,.4) 50% 75%,
        #FFEEBB 75% 100%
        );
}
.homeStoreCategoryNoIconClass{
    background-color: #aaa;
}
.homeStoreGroceryProductsIconClass{
    background-color: #8800ff;
}
.homeStoreGroceryProductsNoIconClass{
    background-color: #aaa;
}
.homeStoreSaltedProductsIconClass{
    background-color: #f0f;
}
.homeStoreSaltedProductsNoIconClass{
    background-color: #aaa;
}
.homeStoreKindExclusiveArtisanIconClass{
    background-color: #00f;
}
.homeStoreKindArtisanIconClass{
    background-color: #0066ff;
}
.homeStoreKindBackingTermIconClass{
    background-color: #0099ff;
}
.homeStoreDistanceHideTxtClass{
    display:block;
    opacity: 0;
    font-size: 1.1rem;
    padding: .2em .5em;
    border-radius: 25px;
    text-align: center;
    background-color: #fff;
    position: absolute;
    white-space: nowrap;
    text-overflow: ellipsis;
    top:-1.5em;
    left: 3em;
    z-index: 200;
    transition: opacity 0.5s ease-in-out;
}
.homeStoreOpenStoreHideTxtClass,
.homeStoreSoonOpenStoreHideTxtClass,
.homeStoreSoonCloseStoreHideTxtClass,
.homeStoreCloseStoreHideTxtClass,
.homeStoreOpenStoreUnknownHideTxtClass,
.homeStoreSundayOpenHideTxtClass,
.homeStoreSundayCloseHideTxtClass,
.homeStoreCatBakeryHideTxtClass,
.homeStoreCatBakPatHideTxtClass,
.homeStoreCatBakPatTeaHideTxtClass,
.homeStoreCatPatisserieHideTxtClass,
.homeStoreCatPatTeaTxtClass,
.homeStoreCatPatBreHideTxtClass,
.homeStoreCatPatTeaBreHideTxtClass,
.homeStoreCatTeaHideTxtClass,
.homeStoreCatTeaBreHideTxtClass,
.homeStoreCatBreadShopHideTxtClass,
.homeStoreCategoryNoHideTxtClass,
.homeStoreGroceryProductsHideTxtClass,
.homeStoreGroceryProductsNoHideTxtClass,
.homeStoreSaltedProductsHideTxtClass,
.homeStoreSaltedProductsNoHideTxtClass,
.homeStoreKindArtisanHideTxtClass,
.homeStoreKindExclusiveArtisanHideTxtClass,
.homeStoreKindBackingTermHideTxtClass,
.homeStoreKindNoHideTxtClass{
    display:block;
    opacity: 0;
    font-size: 1.1rem;
    padding: .2em .5em;
    border-radius: 25px;
    text-align: center;
    background-color: #fff;
    position: absolute;
    white-space: nowrap;
    text-overflow: ellipsis;
    top:-.8em;
    left: auto;
    z-index: 200;
    transition: opacity 0.5s ease-in-out;
}
.homeStoreOpenStoreIconClass:hover .homeStoreOpenStoreHideTxtClass,
.homeStoreSoonOpenStoreIconClass:hover .homeStoreSoonOpenStoreHideTxtClass,
.homeStoreSoonCloseStoreIconClass:hover .homeStoreSoonCloseStoreHideTxtClass,
.homeStoreCloseStoreIconClass:hover .homeStoreCloseStoreHideTxtClass,
.homeStoreOpenStoreUnknownIconClass:hover .homeStoreOpenStoreUnknownHideTxtClass,
.homeStoreDistanceDisplayClass:hover .homeStoreDistanceHideTxtClass,
.homeStoreSundayOpenIconClass:hover .homeStoreSundayOpenHideTxtClass,
.homeStoreSundayCloseIconClass:hover .homeStoreSundayCloseHideTxtClass,
.homeStoreCatBakeryIconClass:hover .homeStoreCatBakeryHideTxtClass,
.homeStoreCatBakPatIconClass:hover .homeStoreCatBakPatHideTxtClass,
.homeStoreCatBakPatTeaIconClass:hover .homeStoreCatBakPatTeaHideTxtClass,
.homeStoreCatPatisserieIconClass:hover .homeStoreCatPatisserieHideTxtClass,
.homeStoreCatPatTeaIconClass:hover .homeStoreCatPatTeaTxtClass,
.homeStoreCatPatBreIconClass:hover .homeStoreCatPatBreHideTxtClass,
.homeStoreCatPatTeaBreIconClass:hover .homeStoreCatPatTeaBreHideTxtClass,
.homeStoreCatTeaIconClass:hover .homeStoreCatTeaHideTxtClass,
.homeStoreCatTeaBreIconClass:hover .homeStoreCatTeaBreHideTxtClass,
.homeStoreCatBreadShopIconClass:hover .homeStoreCatBreadShopHideTxtClass,
.homeStoreCategoryNoIconClass:hover .homeStoreCategoryNoHideTxtClass,
.homeStoreGroceryProductsIconClass:hover .homeStoreGroceryProductsHideTxtClass,
.homeStoreGroceryProductsNoIconClass:hover .homeStoreGroceryProductsNoHideTxtClass,
.homeStoreSaltedProductsIconClass:hover .homeStoreSaltedProductsHideTxtClass,
.homeStoreSaltedProductsNoIconClass:hover .homeStoreSaltedProductsNoHideTxtClass,
.homeStoreKindArtisanIconClass:hover .homeStoreKindArtisanHideTxtClass,
.homeStoreKindExclusiveArtisanIconClass:hover .homeStoreKindExclusiveArtisanHideTxtClass,
.homeStoreKindBackingTermIconClass:hover .homeStoreKindBackingTermHideTxtClass,
.homeStoreKindNoIconClass:hover .homeStoreKindNoHideTxtClass{
    opacity: 1;
    box-shadow: 3px -1px 5px 0 #555;
    transition: opacity 0.5s ease-in-out;
}
.homeStoreOpenStoreIconClass:hover .homeStoreOpenStoreHideTxtClass::before,
.homeStoreSoonOpenStoreIconClass:hover .homeStoreSoonOpenStoreHideTxtClass::before,
.homeStoreSoonCloseStoreIconClass:hover .homeStoreSoonCloseStoreHideTxtClass::before,
.homeStoreCloseStoreIconClass:hover .homeStoreCloseStoreHideTxtClass::before,
.homeStoreOpenStoreUnknownIconClass:hover .homeStoreOpenStoreUnknownHideTxtClass::before,
.homeStoreDistanceDisplayClass:hover .homeStoreDistanceHideTxtClass::before,
.homeStoreSundayOpenIconClass:hover .homeStoreSundayOpenHideTxtClass::before,
.homeStoreSundayCloseIconClass:hover .homeStoreSundayCloseHideTxtClass::before,
.homeStoreCatBakeryIconClass:hover .homeStoreCatBakeryHideTxtClass::before,
.homeStoreCatBakPatIconClass:hover .homeStoreCatBakPatHideTxtClass::before,
.homeStoreCatBakPatTeaIconClass:hover .homeStoreCatBakPatTeaHideTxtClass::before,
.homeStoreCatPatisserieIconClass:hover .homeStoreCatPatisserieHideTxtClass::before,
.homeStoreCatPatTeaIconClass:hover .homeStoreCatPatTeaTxtClass::before,
.homeStoreCatPatBreIconClass:hover .homeStoreCatPatBreHideTxtClass::before,
.homeStoreCatPatTeaBreIconClass:hover .homeStoreCatPatTeaBreHideTxtClass::before,
.homeStoreCatTeaIconClass:hover .homeStoreCatTeaHideTxtClass::before,
.homeStoreCatTeaBreIconClass:hover .homeStoreCatTeaBreHideTxtClass::before,
.homeStoreCatBreadShopIconClass:hover .homeStoreCatBreadShopHideTxtClass::before,
.homeStoreCategoryNoIconClass:hover .homeStoreCategoryNoHideTxtClass::before,
.homeStoreGroceryProductsIconClass:hover .homeStoreGroceryProductsHideTxtClass::before,
.homeStoreGroceryProductsNoIconClass:hover .homeStoreGroceryProductsNoHideTxtClass::before,
.homeStoreSaltedProductsIconClass:hover .homeStoreSaltedProductsHideTxtClass::before,
.homeStoreSaltedProductsNoIconClass:hover .homeStoreSaltedProductsNoHideTxtClass::before,
.homeStoreKindArtisanIconClass:hover .homeStoreKindArtisanHideTxtClass::before,
.homeStoreKindExclusiveArtisanIconClass:hover .homeStoreKindExclusiveArtisanHideTxtClass::before,
.homeStoreKindBackingTermIconClass:hover .homeStoreKindBackingTermHideTxtClass::before,
.homeStoreKindNoIconClass:hover .homeStoreKindNoHideTxtClass::before{
    content: '';
    position: absolute;
    bottom: -12px;
    left: 45%;
    border-width: 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    z-index: 199;
}
/* Ajustement quand le tooltip est trop à gauche */
.tooltipShiftRightClass {
    transform: translateX(0);
}
/* Ajustement quand le tooltip est trop à droite */
.tooltipShiftLeftClass {
    transform: translateX(-100%);
}
.homeStoreNoItemWrapClass{
    background-color: rgba(230, 230, 230, .9);
    border-radius: 8px; 
    padding: 2em 
}
.homeStoreNoItemClass{
    font-size: 1.3rem;
    font-weight: 800;
}
.homeNoStoreResultsMessageClass{
    background-color: rgba(230, 230, 230, .9);
    border-radius: 8px; 
    padding: 2em;
    font-size: 1.3rem;
    font-weight: 800;
}
/* --- Legend --- */
.homeStoreLegendSortWrapClass{
    position: relative;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    padding: .3em .5em;
    border-radius: 8px;
    background-color: rgba(255,255,255,.2);
    margin-bottom: 1em;
    border-radius: 6px;
    box-shadow: 2px 2px 6px #444;
}
.homeStoreLegendSortClass{
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: .25em .35em;
}
.homeStoreLegendIconClass{
    overflow: hidden;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    margin: .2em .4em .2em 0;
    display: block;
    position: relative;
}
.homeStoreLegendLabelClass{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1.1rem;
    text-shadow: 1px 0 1px #777;
    color: var(--primary-color-hover);
    font-weight: 600;
    background-color: rgba(0,0,0,.6);
    padding: .3em .5em;
    border-radius: 18px;
}
.homeStoreLegendCloseClass{
    background-color: #f00;
}
.homeStoreLegendSoonCloseClass{
    background-color: #fff;
    border: 3px solid #f00;
}
.homeStoreLegendOpenClass{
    background-color: #0f0;
}
.homeStoreLegendSoonOpenClass{
    background-color: #fff;
    border: 3px solid #0f0;
}
.homeStoreLegendOpenSunClass{
    background-color: #fff;
}
.homeStoreLegendCloseSunClass{
    background-color: #000;
}
.homeStoreLegendGroProClass{
    background-color: #8800ff;
}
.homeStoreLegendNoSpecClass{
    background-color: #aaa;
}
.homeStoreLegendBakClass{
    background: conic-gradient(
        #E8BD00 0% 25%,
        rgba(0,0,0,.4) 25% 50%,
        rgba(0,0,0,.4) 50% 75%,
        rgba(0,0,0,.4) 75% 100%
        );
}
.homeStoreLegendPatClass{
    background: conic-gradient(
        rgba(0,0,0,.4) 0% 25%,
        #FFEB32 25% 50%,
        rgba(0,0,0,.4) 50% 75%,
        rgba(0,0,0,.4) 75% 100%
        );
}
.homeStoreLegendTeaRoomClass{
    background: conic-gradient(
        rgba(0,0,0,.4) 0% 25%,
        rgba(0,0,0,.4) 25% 50%,
        #FFF5A0 50% 75%,
        rgba(0,0,0,.4) 75% 100%
        );
}
.homeStoreLegendBreadShClass{
    background: conic-gradient(
        rgba(0,0,0,.4) 0% 25%,
        rgba(0,0,0,.4) 25% 50%,
        rgba(0,0,0,.4) 50% 75%,
        #FFEEBB 75% 100%
        );
} 
.homeStoreLegendExcArtClass{
    background-color: #00F;
}
.homeStoreLegendArtClass{
    background-color: #0066FF;
}
.homeStoreLegendSalProClass{
    background-color: #F0F;
}
.homeStoreResultShowClass{
    display: flex;
    flex-direction: column;
}
.homeStoreFilterSortClass {
	order: 1;
}
.homeStoreLegendSortWrapClass {
    order: 3;
}
.homeStoreDisplayWrapClass {
	order: 2;
}
.homeStoreDisLegClass{
    display: none;
}
.homeStoreDisLegSc1Class{
    display: flex;
    justify-content: space-between;
}
.homeStoreDisLegSc2Class{
    display: flex;
    justify-content: space-between;
}
.homeStoreDisLegSc3Class{
    display: flex;
    justify-content: space-between;
}
.homeStoreDisLegSc4Class p{
    text-align: center;
}
.homeStoreDisLegItemClass p{
    padding: .2em .5em;
    color: #fff;
    font-size: .8em;
    min-width: 4.5em;
    width: 100%;
    display: block;
    white-space: nowrap;
}
.homeStoreNameClass .homeStoreNameLinkClass{
    display: block;
}
.homeNoStoreResultsMessageClass{
    display: none;
}
.displayBlockNoResultClass{
    display: block;
}
/* ----------------- Search Store ------------------ */
.searchStoreMainClass{
    background-color: unset;
    padding: 0;  
}
.searchStoreSection2Class{
    padding: 1.5em .6em;
    background-color: rgba(255,255,255,.9); 
    border-radius: 8px; 
}
.searchStoreTitleClass{
    padding: .4em 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color:#555;    
}
.searchStoreItemClass{
    padding: .5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.searchStoreNameClass{
    padding: .4em 0;
    font-size: 1rem;
    font-weight: 800;
    color:#555;   
}
.searchStoreMoreInfoLinkClass{
    color: #777;
    padding: .5em;
    border-radius: 6px;
}
.searchStoreMoreInfoLinkClass:hover,
.searchStoreMoreInfoLinkClass:focus{
    background-color: var(--primary-color-hover);
    color: #333;
}
/* --- Advertising --- */
.homeStoreAdvertisingWrapClass{
    margin-top: .5em;
}
.homeStoreAdvertisingClass{
    padding: 1.2em 1em;
    background-color: rgba(255,255,255,.9);
    border-radius: 10px;
    box-shadow:2px 2px 6px #444 ;
}
.homeStoreAdvertisingTitleClass{
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color:#444;
    margin-bottom: 1.3rem;
}
.homeStoreAdvertisingTextClass{
    color:#555;
    line-height: 1.5;
    font-size: 1.2rem;
    text-align: justify;
}
.homeStoreAdvertisingTextOfferClass{
    color:#c00;
    line-height: 1.4;
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center;
    border-bottom: 10px dotted #c00;
    margin: .5em auto 0 auto;
    width: fit-content;
}
.advert1TitleClass{
    font-size: 1.6rem;
    text-align: left;
}
/* ---------  New and Edit store form page --------- */
.mainClass.newStoreMainClass,
.mainClass.editStoreMainClass{
    background-color: var(--bck-darker-transparent);
}
.referencingFormWrapClass {
    background-color: var(--bck-light);
    border: 4px solid var(--primary-color);
    border-radius: 12px;
    max-width: 75em;
    width: 100%;
    margin: auto;
    box-shadow: var(--box-shadow-dark);
}
.formStoreTitleClass{
    color: #fff;
    text-align: center;
    font-size: 1.3rem;
    padding: .5em;
    border-bottom: 1px solid var(--border-bottom);
    margin: 0 .5em .5em;
    font-weight: 800;
}
.formStoreItemBlockTitleClass{
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    margin: 1.5em 0 .7em;
    font-weight: 800;
    color: #777;
}
.referencingFormWrapClass form{
    padding: .5em;
}
.formStoreItemClass{
    margin-top: 1.2em;
    display: block;
}
.formStoreItemClass > div{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.formStoreItemClass select,
.formStoreItemClass input{
    margin: .5em 0 .5em;
    width: 100%;
    line-height: 1.5;
    padding: .1em 0 .1em 1em;
    font-size: 1.3rem;
    font-weight: 800;
    cursor: pointer;
}
.formStoreItemClass select option{
    cursor: pointer;
}
.formStoreItemClass input,
.formProductClass input{
    background-color: var(--input-bck-grey);
}
.formStoreItemClass ::placeholder{
    color: var(--placeholder-white-text); 
}
.formStoreAddresseClass,
.formStoreReferenceClass,
.formStoreTimetableClass,
.formStoreServicesandProductionClass{
    padding: .4em .5em .7em;
    border:1px solid #777;
    border-radius: 8px;
    margin-bottom: 1.5em;
}
.formStoreSelectClass{
    margin-top: 1em;
}
.formStoreSelectClass option:first-child{
    font-weight: 400!important;
}
#store_storeCategory option{
    font-weight: 800;
}
.formStoreLatitudeClass,
.formStoreLongitudeClass{
    width: 100%;
}
.formStoreReferenceClass textarea{
    width: 100%;
}
.formStoreImageClass{
    padding: 1em .5em;
    border: 1px solid #aaa;
    border-radius: 8px;
}
.formStoreDescriptionClass{
    margin-top: 2em;
}
.formStoreDescriptionClass div{
    display: flex;
    flex-direction: column;
}
.formStoreDescriptionClass > div > div{
    width:100%;
}
.formStoreDescriptionClass label{
    padding-bottom: .5em;
    font-size: 1.2rem;
}
.formStoreTimetableFlexClass{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.formStoreTimetableClass .formStoreItemClass{
    width: 50%;
    display: flex;
}
.formStoreDayClass{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.formStoreTimetableClass input{
    max-width: 6em;
}
.formStoreTimetableClass label{
    width: 100%;
    font-size: 1.2rem;
}
.formStoreGenericTimeWrapClass{
    display: flex;
    flex-wrap: wrap;
}
.formStoreGenericTimeClass{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;    
    justify-content: space-between;
}
.formStoreGenericTimeClass label {
	width: 100%;
	font-size: 1.2rem;
}
.formStoreGenericTimeClass input {
	margin: .5em 0 .5em;
	width: 100%;
	line-height: 1.5;
	padding: .1em 0 .1em 1em;
	font-size: 1.3rem;
	font-weight: 800;
	cursor: pointer;
}
.formStoreItemGenericTimeClass{
    display: flex;
    flex-direction: column;
}
.formStoreGenericTimeHelpWrapClass{
    width: 100%;
}
.formStoreGenericTimeClass input {
	background-color: var(--input-bck-grey);
}
.formStoreGenericTimeHelpTxtClass{
    text-align: justify;
    font-size: .8rem;
    padding: .7em .8em;
    background-color: var(--user-admin-bck-dark);
    color: #fff;
    border-radius: 8px;
    margin-bottom: 1em !important;
    width: 100%;
    margin: auto;
    font-size: 1.1rem;
    line-height: 1.2;
}
.formStoreServicesandProductionClass input{
    width: 50%;
    height: 30px;
    cursor: pointer;
}
.formStoreServicesandProductionClass label{
    width: 50%;
    font-size: 1.2rem;
    cursor: pointer;
}
.formStoreServicesandProductionClass .formStoreItemClass{
    border-bottom: 1px solid #ccc;
}
.formStoreSpecialitiesInputClass{
    display: flex;
    flex-direction: column;
}
.formStoreSpecialitiesLabelClass{
    margin-bottom: 1.2em;
}
.formStoreSpecialitiesTextClass{
    text-align: justify;
    font-size: 1.1rem;
    margin-bottom: 1.2em;
}
.formStoreAddSpecialitiesBtnClass{
    height: 1.7em;
    font-size: 1.3rem;
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border-radius: 5px;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
}
.formStoreAddSpecialitiesBtnClass:hover{
    color:#333;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.specialityEditAddFieldClass > div,
.specialityAddFieldClass input{
    width: 100%;
    height: 1.7em;
    margin: .2em 0;
}
.specialityEditAddFieldClass input{
    width: 100%;
    height: 1.7em;
    margin: .2em 0;
}
.removeFieldBtnClass{
    background-color: #777;
    color: #ddd;
    border-radius: 5px;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    width: 100%;
    margin: .2em 0;
    font-size: 1.3rem;
    padding: .3em 1em;
}
.removeFieldBtnClass:hover{
    background-color: #666;
    color: #fff;
}
.specialityAddFieldClass{
    width: 100%;
    margin-bottom: .5em;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.specialityEditAddFieldClass{
    width: 100%;
    margin-bottom: .5em;
    display: flex;
    flex-direction: column;
    align-items: baseline;
}
.formStoreSpecialitiesItemClass{
    display: flex;
    flex-direction: column;
}
.formStoreNameClass label,
.formStoreAddresseClass label,
.formStoreReferenceClass label{
    font-size: 1.2rem; 
}
.referencingExplanationsTextWrapClass{
    max-width: 75em;
    margin: auto;
    background-color: var(--user-admin-bck-dark);
    border-radius: 8px;
    margin:2em auto;
    padding: 1em;
}
.referencingExplanationsTextClass{
    padding: 1em;
    text-align: justify;
    color: #fff;
    line-height: 1.5;
    font-size: 1.2rem;
}
.referencingExplanationsOfferClass{
    padding: 1em;
    border-radius: 8px;
    border:4px solid #aa0000
}
.storeUpdatefileSelectorClass{
    background-color: var(--bck-dark);
    padding: 2em 1.5em 1.5em;
    border-radius: 6px;
    min-height: 20em;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.storeUpdatefileSelectorClass > div{
    width: 100%;
}
.storeUpdateFormImageClass .currentImageWrapClass{
    align-items: flex-start;
    align-items: stretch;
}
.storeDeleteImageWrapClass{
    border: 2px solid #aaa;
    border-radius: 6px;
    padding:1.5em  1em;
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}
.storeUpdatefileSelectorClass p,
.storeDeleteImageWrapClass p{
    width: 100%;
    display: block;
    text-align: justify;
}
.storeDeleteImageClass{
    width: 100%;
    margin-top: 1em;
}
.storeDeleteImageClass > div{
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.storeDeleteImageClass > div > label{
    width: 100%;
    padding: 0;
    margin-top: 0;
}
.storeDeleteImageClass > div > input{
    width: 1.5em;
    height: 1.5em;
    margin-right: 1em;
}
.storeUpdatefileSelectorClass,
.storeUpdateFormImageClass .currentImageSrcClass{
    min-height: 36em;
}
.storeUpdateFormImageClass .currentImageClass img {
	max-width: 300px;
}
.activeAccordionClass{
    display: block;
}
.noActiveAccordionClass{
    display: none;
}
.accordionBtnClass{
    padding: .5em 1.5em;
    width: 100%;
    font-size: 1.1rem;
    color:#555;
    background-color:rgba(245, 190, 0, 0.4);
    border-radius: 5px;
    margin: .5em auto 1.2em;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.accordionBtnClass:hover,
.accordionBtnClass:focus{
    color:#333;
    background-color:rgba(245, 210, 0, 0.4);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.formStoreServNProdWrapClass{
    border-bottom:4px solid #999;
    margin-bottom: 1.8em;
}
div.formStoreItemCatInputWrapClass{
    display: flex;
    flex-direction: column;
    align-items: start;
}
.formStoreItemCatInputWrapClass > div{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.formStoreItemCatInputWrapClass > div > input{
    width: 4%;
    min-width: 1.5em;
    height: 1.5em;
}
.formStoreItemCatInputWrapClass > div > label{
    width:20%;
    white-space: nowrap;
    padding: 0 0 0 .5em;
}
.addFieldClass{
    display: none;
}
/* .formStoreButtonWrapClass{
    padding: 0 .5em 1em;
} */
 /* - Product - */
 .addFieldClass{
    padding: .3em;
    border: 1px solid #777;
    border-radius: 5px;
 }
 .formProductItemBlockTitleClass{
    font-size: 1.2rem;
    padding: .4em .5em;
    font-weight: 600;
    text-align: center;
 }
 .formVienneseHelpClass{
    padding: .5em 0;
    font-size: 1.1rem;
 }
 .addFieldClass > div{
    border-top:1px solid #aaa;
 }
 .formProductItemClass{
    position: relative;
 }
.addFieldClass > div > div,
.formProductItemClass > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3em 0;
    margin: .2em 0;
}
.formProductItemClass label{
    padding: .4em .4em .4em 0;
}
.formProductAllWrapClass,
.formProductWrapClass{
    display: flex;
    flex-direction: column;
}
.newFieldClass,
.formProductClass{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
.newFieldClass div,
.formProductClass div{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.newFieldClass input{
    background-color: var(--input-bck-grey);
}
.removeProductdBtnWrapClass{
    display: block;
    width: 100%;
}
.removeProductdBtnClass{
    background-color: #777;
    color: #ddd;
    border-radius: 5px;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    width: 100%;
    margin: .5em 0 .2em;
    font-size: 1.3rem;
    padding: .3em 1em;
}
.removeProductdBtnClass:hover{
    background-color: #666;
    color: #fff;
}
.formProduct€Class{
    font-size: 1.4rem;
    font-weight: 800;
    padding: .4rem;
    position: absolute;
    top: -.75em;
    right: .7em;
}
/* - / -  Message d'alert - / - */
.formProductItemClass > div > ul {
    position: absolute;
    bottom: -.5em;
    right: 0em;
    color: #f00;
}
.addFieldClass > div > div.alert,
.formProductItemClass > div.alert{
	padding: .5em 1em;
	margin: .4em 0;
    font-size: 1.1rem;
    max-width: unset;
}
/* -------------------  Show store ----------------- */
.mainClass.showStoreMainClass{
    background-color: rgba(255,255,255,.9);
    box-shadow: 3px 3px 14px #555;
}
.showStoreItemClass{
    position: relative;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: baseline;
}
.showStoreTitleClass{
    padding: .4em 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color:#555;
}
.showStoreSpecialityItemClass{
    display: flex;
}
.showStoreItemLabelClass{
    font-size: 1.3rem;
    padding: .3em 0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight: 600;
}
.showStoreSpecialityWrapClass{
    display: flex;
    flex-wrap: wrap;
}
.showStoreFiledsClass{
    position: relative;
}
.showStoreSpecialityClass{
    background-color: #0a0;
    color: #fff;
    border-radius:4px;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #0a0;
    margin:0 1em 1em 0;
    display: block;
    white-space:nowrap;
    font-size: 1.3rem;
    padding:.3em .5em;
    font-weight: 800;
    max-height: 1.7em;
}
.showStoreItemContentClass,
.showStoreItemNewContentClass{
    display: flex;
    justify-content: center;
    white-space: nowrap;
    font-size: 1.3rem;
    padding: .3em .5em;
    font-weight: 800;
    color: #555;
    min-width: 2.8em;
    line-height: 1.2;
    margin-left: .4em;
}
.showStoreCategoryClass .showStoreItemContentClass{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    width: 100%;
    margin: 0;
    padding: 0;
}
.showStoreCoorContentClass{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width: 80vw;
}
.showStoreItemNewLabelClass{
    position: relative;
    background-color: var(--primary-color-hover);
    border-radius: 100%;
    right: -.6em;
    top:-.3em;
    transform: rotate(-20deg);
    color: #555;
    box-shadow: 1px 2px 5px #666;
    font-size: .8rem;
    font-weight: 800;
    padding: 1em .5em;
}
.showStoreItemNameClass{
    font-size: 1.4rem;
    font-weight: 800;
    color:var(--tertiary-color);
    padding: .5em 0;
    text-shadow: 2px 0px 2px #000;
}
.showStoreImageWrapClass{
    display: flex;
    justify-content: center;
    padding: 0;
}
.showStoreItemImageClass{
    width: 100%;
}
.showStoreImageClass{
    max-width: 900px;
    width: 100%;
    margin: auto;
}
.showStoreItemBodyClass{
    display: block;
    max-width: 900px;
    width: 100%;
    margin: 3em auto 1em;
}
.showStoreBodyClass{
    font-size:1.3rem;
    text-align: justify;
    line-height: 1.3;
}
.showStoreKindWrapClass .showStoreItemLabelClass{
    font-weight: 800;
}
.showStoreAddressClass,
.showStorePresentationClass,
.showStoreContacClass,
.showStoreCoordinatesClass,
.showStoreCategoryClass,
.showStoreTimetableClass,
.showStoreSundayMondayClass,
.showStoreKindClass,
.showStoreChocoMakerClass,
.showStoreBreadnViennesClass,
.showStoreBioClass,
.showStoreVeganClass,
.showStoreSaltyClass,
.showStoreGroceryClass,
.showStoreIceClass,
.showStoreDrinksClass,
.showStoreSpecialitiesClass,
.showStoreLocalProductsClass,
.showStoreServiceClass,
.showStorePaymentMethodsClass,
.showStoreMoreImageClass{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 1em 0;
    border-bottom:8px solid  var(--tertiary-color);
    padding: .5em 0;
    margin-bottom: 2em;
}
.showStoreAddressTitleClass,
.showStorePresentationTitleClass,
.showStoreContacTitleClass,
.showStoreCoordinatesTitleClass,
.showStoreCategoryTitleClass,
.showStoreTimetableTitleClass,
.showStoreSundayMondayTitleClass,
.showStoreKindTitleClass,
.showStoreChocoMakerTitleClass,
.showStoreBreadnViennesTitleClass,
.showStoreBioTitleClass,
.showStoreVeganTitleClass,
.showStoreSaltyTitleClass,
.showStoreGroceryTitleClass,
.showStoreIceTitleClass,
.showStoreDrinksTitleClass,
.showStoreSpecialitiesTitleClass,
.showStoreLocalProductsTitleClass,
.showStoreServiceTitleClass,
.showStorePaymentMethodsTitleClass{
    font-size: 1.5rem;
    border-bottom: 1px solid #aaa; 
    padding: .3em 0; 
    margin-bottom: 1em; 
}
.showStoreCategoryClass .showStoreItemLabelClass,
.showStoreSundayMondayClass .showStoreItemLabelClass,
.showStoreKindClass .showStoreItemLabelClass,
.showStoreChocoMakerClass .showStoreItemLabelClass,
.showStoreBreadnViennesClass .showStoreItemLabelClass,
.showStoreBioClass .showStoreItemLabelClass,
.showStoreVeganClass .showStoreItemLabelClass,
.showStoreSaltyClass .showStoreItemLabelClass,
.showStoreGroceryClass .showStoreItemLabelClass,
.showStoreIceClass .showStoreItemLabelClass,
.showStoreDrinksClass .showStoreItemLabelClass,
.showStoreSpecialitiesClass .showStoreItemLabelClass,
.showStoreLocalProductsClass .showStoreItemLabelClass,
.showStoreServiceClass .showStoreItemLabelClass {
    margin-right: auto;
}
.showStoreCategoryClass .showStoreItemClass,
.showStoreSundayMondayClass .showStoreItemClass,
.showStoreKindClass .showStoreItemClass,
.showStoreChocoMakerClass .showStoreItemClass,
.showStoreBreadnViennesClass .showStoreItemClass,
.showStoreBioClass .showStoreItemClass,
.showStoreVeganClass .showStoreItemClass,
.showStoreSaltyClass .showStoreItemClass,
.showStoreGroceryClass .showStoreItemClass,
.showStoreIceClass .showStoreItemClass,
.showStoreDrinksClass .showStoreItemClass,
.showStoreSpecialitiesClass .showStoreItemClass,
.showStoreLocalProductsClass .showStoreItemClass,
.showStoreServiceClass .showStoreItemClass {
    margin: .5em 0;
    align-items: center;
}
.showStoreKindItemLabelWrapClass{
    display: flex;
    align-items: center;
    flex-direction: row;
}
.showStoreKindClass .showStoreKindItemLabelClass{
    background-color: #0a0;
    color: #fff;
    border-radius:4px;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #0a0;
    display: block;
    white-space:nowrap;
    font-size: 1.3rem;
    padding:.3em .5em;
    font-weight: 800;
    min-width: unset;
    margin-left: auto;
    text-align: center;
    line-height: 1.2;
}
.showStoreKindClass .showStoreItemClass{
    align-items: center;
    display: flex;  
    justify-content: end;
}
.showStoreExArtInfoClass{
    padding: .7em .5em;
}
.showStoreDayClass{
    margin:0 0 1em 0;
    width: 50%;
}
.showStoreClosedWrapClass,
.showStoreDayClass{
    width: 100%;
}
.showStoreClosedWrapClass{
    display: flex;
    margin: 0 0 1em 0;
}
.showStoreDayClass {
	display: flex;
}
.showStoreClosedDayClass{
    font-size: 1.3rem;
    padding: .3em 1em .3em 0;
    white-space: nowrap;
}
.showStoreClosedDayClass,
.showStoreDayClass .showStoreItemLabelClass{
    min-width: 7em;
}
.showStoreItemDayClass{
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
}
.showStoreItemTimeClass{
    display: flex;
    margin-left: auto;
}
.showStoreTimetableClass > p,
.showStoreTimetableClass .showStoreItemClass{
    display: block;
}
.showStoreClosedClass{
    font-size: 1.3rem;
    font-weight: 800;
    padding: .3em .2em .3em .1em;
    color: #555;
    margin-left: auto;
}
.showStoreCategoryClass .showStoreItemCatClass{
    background-color: #0a0;
    color: #fff;
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #0a0;
    display: block;
    white-space: nowrap;
    font-size: 1.3rem;
    padding: .3em .5em;
    font-weight: 800;
    margin: 0 0 .5em 0;
    width: 100%;
    text-align: center;
}
.showStorePercentMessageClass{
    border-bottom: 8px solid var(--tertiary-color);
    padding: .5em 0;
    margin-bottom: 3em;
}
.showStorePercentMessageClass p{
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: justify;
    background: #777;
    color: #fff;
    padding: 1.5em;
    margin-bottom: 2em;
    border-radius: 6px;
}
.showStoreItemPercentWrapClass,
.showStoreItemNewLabelWrapClass{
    position: relative;
    display: flex;
    justify-content: right;
    width: 5em;
}
.showStoreItemPercentClass{
    top: -.15em;
    position: relative;
    transform: rotate(-20deg);
    padding: .8em .5em;
    border-radius: 100%;
    background: #999;
    color: #fff;
    margin-left: .5em;
    font-weight: 800;
    text-align: center;
}
.showStorePercMessageEleWrapClass{
    width: 3em;
    position: relative;
    display: inline-block;
}
.showStorePercMessageEleClass{
    position: absolute;
    transform: rotate(-20deg);
    padding: .5em;
    border-radius: 100%;
    background: #999;
    color: #fff;
    top: -2em;
    font-size: .6rem;
    left: .6em;
}
.showStoreTimetableClass .showStoreItemContentClass {
    padding: .3em .2em .3em .1em;
}
.showStorePaymentMethodsClass .showStoreItemContentClass{
    white-space: break-spaces;
}
.showStoreYesClass,
.showStoreItemNewContentClass{
    background-color:#0a0;
    color: #fff;
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #0a0;
    width: 3.2em;
}
.showStoreNoClass{
    background-color:#a00;
    color: #fff;
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #a00;
    width: 3.2em;
}
.showStoreSpecialitiesSub1Class{
    width: 100%;
    margin: .5em 0 1.5em 0;
    position: relative;
}
.showStoreSpecialitiesSub2Class{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.showStoreMenuClass{
    border: #555;
    background-color: var(--user-admin-bck-dark);
    margin: 1em 0;
    padding: .5em 1em;
    border-radius: 6px;
    margin: 0 auto;
    width: 100%; 
}
.showStoreListClass{
    display: flex;
    flex-direction: column;
}
.showStoreListClass :nth-child(1){
    order: 1;
}
.showStoreListClass :nth-child(2){
    order: 3;
}
.showStoreListClass :nth-child(3){
    order: 5;
}
.showStoreListClass :nth-child(4){
    order: 2;
}
.showStoreListClass :nth-child(5){
    order: 4;
}
.showStoreListClass :nth-child(6){
    order: 6;
}
.showStoreMenuItemClass{
    margin:0;
    width: 100%;
}
.showStoreMenuItemLinkClass{
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border: 0;
    border-radius: 5px;
    padding: .6em .5em;
    margin: .5em auto;
    font-size: 1rem;
    font-weight: 800;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.showStoreMenuItemLinkClass:hover,
.showStoreMenuItemLinkClass:focus{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.showStoreMenuItemClass button{
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border: 0;
    border-radius: 5px;
    padding: .5em;
    margin: .5em auto;
    font-size: 1rem;
    font-weight: 800;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.showStoreMenuItemClass button:hover,
.showStoreMenuItemClass button:focus{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.showStoreLocaliseWrapClass{
    display: flex;
    flex-direction: column;
}
.showStoreNavigationBtnClass{
    position: relative;
    background-color:#333;
    width: 100%;
    color:var(--primary-color);
    border-radius: 25px;
    border: 3px solid var(--primary-color);
    text-shadow: 0 0 1px #000;
    padding: .3em 2.5em;
    margin: .3em auto;
    font-size: 1.5rem;
    font-weight: 800;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
    box-shadow: 1px 2px 4px #777;
}
.showStoreNavigationBtnClass:hover,
.showStoreNavigationBtnClass:focus{
    color: var(--primary-color-hover);  
    border: 3px solid var(--primary-color-hover);  
    box-shadow: 1px 2px 3px #888;
    border-radius: 25px;
}
 .showStoreHelpGpsClass{
    display: none;
}
.showStoreMoreImageBtnWrapClass{
    border: 0;
    padding: 0;
}
.showStoreMoreImageBtnWrapClass{
    width: 100%;
    margin-bottom: 3em;
}
.buttonClass.showStoreMoreImageBtnClass{
    margin: 0;
}
a.showStorePhoneLinkClass{
    color: rgb(189, 146, 0);
    font-weight: 800;
    font-size: 1.5rem;
}
a.showStorePhoneLinkClass:hover{
    color: rgb(236, 183, 1);
}
.showStoreSpecialityItemWrapClass{
    display: flex;
    margin-bottom: 1.5em;
    align-items: baseline;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #ccc;
}
.showStoreSpecialityItemClass{
    display: flex;
}
.showStoreSpecialityItemWrapClass .showStoreItemLabelClass{
    min-width: 13em;
}
.showSpecialityNameItemWrapClass{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    gap: .5em;
    margin-left: .5em;
}
.showSpecialityNameWrapClass{
    width: 100%;
}
.showSpecialityNameItemClass{
    font-size: 1.2rem;
    font-weight: 800;
    padding: .4em .5em;
    margin-right: .4em;
    background-color: #0a0;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #0a0;
    border-radius: 5px;
    color: #fff;
}
.showSpecialityNameNameClass{
    white-space: nowrap;
}
/* - / - GPS BUtton - / - */
.popupGpsOverlayClass {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.popupGpsContainerClass {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.popupGpsContainerClass h2 {
    margin-bottom: 15px;
    font-size: 18px;
}
.navigationLinkClass {
    display: block;
    padding: 10px;
    margin: 5px 0;
    background-color: #333;
    color: var(--primary-color);
    border-radius: 25px;
    border: 2px solid var(--primary-color);
    text-shadow: 0 0 1px #000;
    text-decoration: none;
    transition: var(--transtion);
    cursor: pointer;
}
.navigationLinkClass:hover {
    background-color: #333;
    color: var(--primary-color-hover);
    border: 2px solid var(--primary-color-hover);
}
.closeGpsButtonClass {
    margin-top: 15px;
    padding: 10px 15px;
    background: var(--primary-color);
    color: #777;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transtion);
}
.closeGpsButtonClass:hover {
    background: var(--primary-color-hover);
    color: #333;
}
/* - / - Showstore Toggle Menu - / - */
@media screen and  (max-width : 960px){
    .showstoreToggleBtnClass{
            color: #777;
            background-color: var(--primary-color);
            width: 100%;
            border: 0;
            border-radius: 5px;
            padding: .6em .5em;
            font-size: 1rem;
            font-weight: 800;
            transition: var(--transtion);
            cursor: pointer;
            text-align: center;
            position: relative;
            display: block;
            z-index: 102;
    }
    .showstoreToggleBtnClass:hover,
    .showstoreToggleBtnClass:focus{
        color: #333;
        background-color: var(--primary-color-hover);
        transition: var(--transtion);
        box-shadow: 0 0 13px -1px #fff;
    }
    .showstoretoggleMenuBtnWrapClass{
        border: #555;
        background-color: var(--user-admin-bck-dark);
        margin: 1em 0;
        padding:1em;
        border-radius: 6px;
        margin: 0 auto;
        width: 100%;
        margin-bottom: .5em;
        z-index: 100;
        position: relative;
    }
    .showstoreBtnClass{
        z-index: 101;
        position: relative;
    }
    .showstoreLighterClass{
        box-shadow: 0 0 10px -1px #fff;
        transition: all .5s ease-in-out;
        background-color: var(--primary-color-hover);
        border-radius: 5px;
        color: #000;
    }
    .showStoreMenuClass{
        transform: translateX(150%);
        position: absolute;
        width: 100%;
        transition: transform .5s linear;
        z-index: 90;
    }
    .showstoreToggleMenuClass{
        z-index: 90;
        transform:translateX(0);
        transition: transform .5s linear, clip-path .8s linear .5s;
    }
}
/* - Modale Show Product - */
.moreProductIconClass{
    display: inline;
    color: #333;
    font-size: 1.75rem;
    font-weight: 800;
    background-color: var(--primary-color);
    border-radius: 7px;
    margin: 0 .4em;
    vertical-align: text-bottom;
    position: relative;
    padding: 0 .5em;
}
.moreProductIconClass:hover{
    background-color: var(--primary-color-hover);;
}
.productModalClass {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.productModalClass.show {
    display: flex;
}
.productModalContentClass {
    width: 90vw;
    font-size: 1.3rem;
    background: #fff;
    padding: 1.5em 1em;
    border-radius: 8px;
    max-height: 80%;
    overflow-y: auto;
    position: relative;
}
.closeModalClass {
    position: absolute;
    top: -12px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 2.7em;
    cursor: pointer;
}
.showProductTitleClass{
    font-size: 1.7rem;
    font-weight: 800;
    text-align: center;
    padding: .5em;
    margin: 0 .5em;
    color: #555;
}
.showProductLabelClass{
    display: flex;
    padding: 0;
    justify-content: space-evenly;
}
.showProductWrapClass{
    border-top: 4px solid var(--tertiary-color);
}
.showProductItemWrapClass{
    display: flex;
    flex-direction: column;
    padding: 0;
    justify-content: space-evenly;
}
.showProductLabelClass > div,
.showProductItemWrapClass > div{
    justify-content: space-evenly;
    width: 100%;
}
.showProductItemClass{
    display: flex;
}
.showProductNameClass,
.showProductPriceClass{
    width: 100%;
}
.showProductLabelPriceClass,
.showProductLabelNameClass,
.showProductNameClass,
.showProductPriceClass{
    padding: .5em .4em;
    border-bottom: 1px solid #aaa;
}
.showProductLabelPriceClass{
    text-align: right;
    padding-right: 1.4em;
}
.showProductPriceClass {
	text-align: right;
}
.showProductNoClass > div{
    margin-top: 1em;
}
.showSpecialityNameNoClass{
    margin-bottom: 1em;
}
.showSpecialityNameNoClass > div{
    white-space: nowrap;
    text-align: right;
}
/* ---------------  Show My stores ----------------- */
.myStoresListTitleClass{
    color: #555;
    text-align: center;
    font-size: 1.3rem;
    padding: .5em;
    border-bottom: 1px solid var(--border-bottom);
    margin: 0 .5em .5em;
    font-weight: 800;
}
.myStoresListContentClass{
    font-weight: 800;
}
.myStoresListWrapClass{
    width: 100%;
    border-collapse: collapse;
}
.myStoresListLabelWrapClass,
.myStoresListItemWrapClass{
    display: block;
}
.myStoresListLabelClass{
    margin-right: .5em;
}
.myStoresListLabelClass,
.myStoresListItemClass{
    display: block;
    padding: .4em .2em;
    font-size: 1.1rem;
}
.myStoresListItemWrapClass > .myStoresListLabelClass,
.myStoresListItemWrapClass > .myStoresListItemClass{
    display: flex;
    justify-content: start;
    align-items: center;
    padding: .4em .2em;
    font-size: 1.1rem;
}
.myStoresListItemWrapClass .myStoresListContentClass{
    text-align: left;
}
.myStoresListLabelWrapClass{
    background-color: #333;
    color: #fff;
    font-weight: 600;
    display: none;
}
.myStoresListItemWrapClass,
.myStoresListItemClass{
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
}
.myStoresListActionItemClass{
    background-color: #333;
}
.myStoresListMenuItemClass{
    display: block;
}
.myStoresListMenuItemClass a{
    display: block;
    padding: .3em .4em;
    font-size: 1.2rem;
}
.myStoresListNameClass{
    font-size: 1.3rem;
    color: #ffbb00;
    text-shadow: 0 1px 1px #333;
}
.myStoresListNameItemClass{
    background-color: var(--user-admin-bck-dark);
}
.myStoresListNameLabelClass{
    color: #fff;
}
.myStoresListLinkClass{
    padding: 1em .7em;
    font-size: 1.2rem;
    background-color: var(--user-admin-bck-dark);
    text-align: right;
    display: block;
}
.myStoresListWrapClass{
    display: block;
}
.myStoresListItemWrapClass > .myStoresListActionItemClass{
    justify-content: left;
}
.myStoresListLinkClass{
    margin-top: 1em;
}
.myStoresListMenuItemClass button{
    padding: .3em .4em;
    font-size: 1.2rem;
    text-decoration: none !important;
    transition: var(--transtion);
    color: var(--primary-color);
    text-align: left;
    background-color: unset;
    border: unset;
}
.myStoresListMenuItemClass button:hover,
.myStoresListMenuItemClass button:focus{
    text-decoration: none!important;
    transition: var(--transtion);
    color: var(--primary-color-hover)
}
/* ------------------- Picture form -------------------- */
.newPictureMainClass{
    background-color: var(--bck-darker-transparent);
}
.formPictureTitleClass{
	color: #fff;
	text-align: center;
	font-size: 1.3rem;
	padding: .5em;
	border-bottom: 1px solid var(--border-bottom);
	margin: 0 .5em .5em;
	font-weight: 800;
}
.pictureFormWrapClass {
    background-color: var(--bck-light);
    border: 4px solid var(--primary-color);
    border-radius: 12px;
    max-width: 75em;
    width: 100%;
    margin: 0 auto 2em auto;
    box-shadow: var(--box-shadow-dark);
}   
.pictureFormWrapClass form{
    display: flex;
    flex-wrap: wrap;
    padding: .5em;
}
.formPictureClass{
    display: flex;
    flex-wrap: wrap;
}
.formPictureClass > :nth-child(1) {
    width: 100%;
}
.formPictureClass > :nth-child(2) {
    width: 100%;
}
.formPictureClass > :nth-child(3) {
    width: 100%;
}
.formPictureClass > :nth-child(4) {
    width: 100%;
}
.formPictureClass > :nth-child(5) {
    width: 100%;
}
.formPictureClass > :nth-child(6) {
    width: 100%;
    display: flex;
}
.editPictureIsMainItemClass,
.formPictureIsMainItemClass{
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    border: 1px solid #777;
    border-radius: 6px;
    padding: 0 1em;   
}
.formPictureIsMainItemClass > label,
.editPictureIsMainItemClass > label {
    width: 90%;
}
.formPictureItemClass .formPictureIsMainItemClass input,
.editPictureItemClass .editPictureIsMainItemClass input{
    width: 10%;
    height: 2em;
}
.formPictureItemClass{
    width: 100%;
    margin-top: 1.2em;
    display: block;
    padding: .5em 1em;
}
.formPictureItemIsMainClass{
    width: 100%;
    margin-top: 1.2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5em 1em;
}
.formPictureItemClass label,
.editPictureItemClass label{
    font-size: 1.2rem;
}
.formPictureItemClass > div,
.editPictureItemClass > div{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.formPictureItemClass select,
.formPictureItemClass input,
.editPictureItemClass select,
.editPictureItemClass input{
    margin: .5em 0 .5em;
    width: 100%;
    line-height: 1.5;
    padding: .1em 0 .1em 1em;
    font-size: 1.3rem;
    font-weight: 800;
}
.formPictureItemClass input,
.editPictureItemClass input{
    background-color: var(--input-bck-grey);
}
.formPictureItemClass ::placeholder,
.editPictureItemClass ::placeholder{
    color: var(--placeholder-white-text);  
}
.editPictureItemBlockTitleClass,
.formPictureItemBlockTitleClass{
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    margin: 1.5em 0 .7em;
}
.formPictureNameClass,
.editPictureNameClass{
    width: 100%;
}
.formPictureTitleClass,
.editPictureTitleClass{
    color: #fff;
    text-align: center;
    font-size: 1.3rem;
    padding: .5em;
    border-bottom: 1px solid var(--border-bottom);
    margin: 0 .5em .5em;
    font-weight: 800;
    text-transform: capitalize;
}
.editPictureMenuClass{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 75em;
    width: 100%;
    margin-bottom: 1em;
}
.editPictureMenuClass a,
.editPictureMenuClass button{
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border-radius: 5px;
    padding: .6em .5em;
    margin: .5em auto;
    font-size: 1;
    font-weight: 800;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.editPictureMenuClass a:hover,
.editPictureMenuClass a:focus,
.editPictureMenuClass button:hover,
.editPictureMenuClass button:focus{
    color:#333;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.editPictureMenuClass form{
    width: 100%;
    margin-right: 0;
}
.newPictureLinkWrapClass{
    display: block;
    width: 100%;
    max-width: 75em;
    margin: auto;
}
.newPictureLinkClass{
    padding: .5em;
    margin-top: 1em;
    text-align: right;
    display: block;
}
.pictureFormWrapClass .buttonClass{
    margin: 1em .6em;
}
.editPictureImageClass {
	width: 100%;
	border: 4px solid #777;
	max-width: 900px;
	margin: 1em auto;
	display: block;
}
.editPictureInfoWrapClass{
    display: flex;
    flex-wrap: wrap;
}
.editPictureInfoWrapClass > .editPictureItemClass{
    width: 100%;
}
.editPictureLabelClass{
    padding:  .4em 0;
}
.editPictureContentClass{
    font-weight: 800;
}
.editPictureItemClass {
	width: 100%;
    margin-top: 1.2em;
    display: block;
    padding: .5em 1em;
    font-size: 1.2rem;
}
.editPictureIsMainLabelItemClass{
    display: block;
    margin-bottom: .5em;
}
.editPictureCreatedDateContentClass{
    display: block;
    border: 1px solid #aaa;
    border-radius: 6px;
    padding: .4em .5em;
}
.formPictureItemClass > div.storeLimitWarningClass{
    display: none;
}
/* ------------------- Picture show --------------- */
.editPictureMainClass,
.showPictureMainClass{
	background-color: var(--bck-darker-transparent);
}
.showPictureContainerClass{
    margin-bottom: 2em;
}
.showPictureWrapClass{
    background-color: #fff;
    border: 4px solid var(--primary-color);
    border-radius: 12px;
    max-width: 75em;
    width: 100%;
    margin: auto;
    box-shadow: var(--box-shadow-dark); 
}
.showPictureClass{
    padding: 1em;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.showPictureTitleClass{
    color: #fff;
    text-align: center;
    font-size: 1.3rem;
    padding: .5em;
    border-bottom: 1px solid var(--border-bottom);
    margin: 0 .5em .5em;
    font-weight: 800;   
}
.showPictureDateClass{
    display: flex;
    flex-direction: column;
}
.showPictureTimeTableClass{
    display: flex;
    flex-direction: column;
}
.showPictureItemClass{
    padding: .25em .4em;
    font-size: 1.2rem;
}
.showPictureNameItemClass{
    width: 100%;
    display: flex;
    align-items: center;
    padding: 1em;
}
.showPictureNameItemClass h5{
    margin-right: 1em;
}
.showPictureLabelClass{
    padding:  .4em 0;
}
.showPictureContentClass{
    font-weight: 800;
}
.showPictureMenuClass{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin-bottom: 1em;
}
.showPictureMenuClass form{
    width: 100%;
}
.showPictureMenuClass a,
.showPictureMenuClass button{
    display: flex;
    align-items: last baseline;
    justify-content: center;
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border-radius: 5px;
    padding: .6em .5em;
    margin: .5em auto;
    font-size: 1rem;
    font-weight: 800;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.showPictureMenuClass a:hover,
.showPictureMenuClass a:focus,
.showPictureMenuClass button:hover,
.showPictureMenuClass button:focus{
    color:#333;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.showPictureMenuClass a.showPictureAddAnotherLinkClass{
    font-size: 1.5rem;
}
.showPictureContentClass{
    font-weight: 800;
    text-transform: capitalize;
}
.showPictureLabelClass{
    padding: .5em 0;
}
.showPictureImageClass{
    width: 100%;
    border: 4px solid #777;
    max-width: 900px;
    margin: 1em auto;
    display: block;
}
.showPictureInfoWrapClass{
    display: flex;
    flex-wrap: wrap;
}
.showPictureInfoWrapClass > .showPictureItemClass{
    width: 100%;
}
.showPictureItemClass{
    border-top: 1px solid #aaa;
}
/* ------------------ Picture Slideshow ---------------- */
.bodyPictureSlideShowClass{
    background-image: none;
    background-color: #000;
}
.pictureSlideShowMainClass{
    background-color: #000;
}
.pictureSlideShowWrapClass{
    position: relative;
    display: flex;
    overflow: hidden;
    width: 100%;
}
.pictureSlideShowContainerClass {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.pictureSlideShowTrackClass {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}
.pictureSlideShowItemClass {
    flex-shrink: 0;
    width: 100%;
    position: relative;
    border-radius: 8px;
}
.pictureSlideShowImgClass {
    width: 100%;
    max-width: 900px;
    height: 300px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    margin: auto;
    justify-content: center;
    display: flex;
}
.pictureSlideShowBodyWrapClass{
    position: relative;
    margin: auto;
    max-width: 900px;
    width: 100%;
}
.pictureSlideShowBodyClass {
    position: relative;
    display: block;
    color:#fff;
    font-size: 1rem;
    margin: 1.5em auto 1em;
    text-align: center;
    width: 100%;
    padding: 1em;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
}
.pictureSlideShowDotsWrapClass{
    display: flex;
    flex-wrap: wrap;
    margin: .4em auto;
    max-width: 900px;
    justify-content: space-between;
}
button.pictureSlideShowDotClass{
    border-radius: 100%;
    cursor: pointer;
    margin: .2em .4em;
    background-color:var(--primary-color);
    border: 0;
    padding: .5em;
    width: 2em;
    height: 2em;
}
button.pictureSlideShowDotClass:hover{
    background-color:var(--primary-color-hover);
}
button.activeDotClass{
    background-color:var(--dot-active);
}
.pictureSlideShowMoreImageBtnWrapClass{
    max-width: 900px;
    margin: auto;
    width: 100%;
    display: flex;
}
.pictureSlideShowMoreImageBtnWrapClass{
    border: 0;
    border-radius: 5px;
}
.buttonClass.pictureSlideShowMoreImageBtnClass{
    margin: 0;
}
.pictureSlideShowMenuLinkClass{
    margin-top: 1em;
}
/* ------------------ Picture index ---------------- */
.indexPictureContainerClass{
    margin: 0 .6em;
}
.indexPictureTitleClass{
    color: #555;
    text-align: center;
    font-size: 1.3rem;
    padding: .5em;
    border-bottom: 1px solid var(--border-bottom);
    margin: 0 .5em .5em;
    font-weight: 800;
}
.indexPictureContentClass{
    font-weight: 800;
}
.indexPictureWrapClass{
    width: 100%;
    border-collapse: collapse;
}
.indexPictureLabelWrapClass,
.indexPictureItemWrapClass{
    display: block;
}
.indexPictureLabelClass,
.indexPictureItemClass{
    display: block;
    padding: .4em .2em;
    font-size: 1.1rem;
}
.indexPictureItemWrapClass > .indexPictureLabelClass,
.indexPictureItemWrapClass > .indexPictureItemClass{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4em .2em;
    font-size: 1.1rem;
}
.indexPictureItemWrapClass .indexPictureContentClass{
    text-align: left;
    margin-right: .5em;
    display: flex;
    align-items: last baseline;
}
.indexPictureLabelWrapClass{
    background-color: #333;
    color: #fff;
    font-weight: 600;
    display: none;
}
.indexPictureItemWrapClass,
.indexPictureItemClass{
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
}
.indexPictureActionItemClass{
    background-color: #333;
}
.indexPictureMenuClass a{
    display: block;
    padding: .3em .4em;
    font-size: 1.2rem;
}
.indexPictureLinkWrapClass{
    padding: 0 .5em;
}
.indexPictureLinkClass{
    padding: 1em .7em;
    font-size: 1.2rem;
    background-color: #777;
    text-align: right;
    display: block;
    margin-top: 1em;
}
.indexPictureWrapClass{
    display: block;
}
.indexPictureItemWrapClass > .indexPictureActionItemClass{
    justify-content: space-between;
}
.indexPictureItemWrapClass{
    margin-bottom: 1em;
}
.indexPictureItemWrapClass > .indexPictureActionItemClass > h5{
    color:#fff;
}
.indexPictureImageWrapClass span{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}
.indexPictureTxtImgClass{
    overflow:hidden;
    text-overflow:ellipsis;
    width: 40vw;
    text-align: left; 
}
.indexPictureImageClass{
    width: 100%;
    max-width: 150px;
    min-width: 80px;
    border: 4px solid  #777;
    margin: .5em;
}
.indexPictureMenuClass{
    display: flex;
}
.indexPictureslideshowWrapClass{
    margin-top: 1.5em;
    padding: .5em;
}
.indexPictureslideShowTitleClass{
    padding: 1em;
    text-align: center;
    width: 100%;
    font-size: 1.3rem;
    font-weight: 800;
    color: #555;
}
.indexPictureslideShowListClass{
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    border-left: 1px solid #333;
}
.indexPictureSlideshowItemClass {
	display: flex;
	flex-direction: column;
	border-bottom: 6px solid #aaa;
}
.indexPictureSlideshowLabelClass{
    font-weight: 800;
    padding: 1em;
    border-right: 0;
    width: 100%;
}
.indexPicturesSlideshowLinkClass{
    padding: 1em;
    width: 100%; 
    text-align: right;
    background-color: #333;
}
.showStoreMoreImageBtnWrapClass{
    border-radius: 5px;
}
.indexPicturePositionFormWrapClass{
    display: flex;
}
.indexPicturePositionFormClass{
    display: flex;
    justify-content: space-between;
    align-items: end;
    width: 100%;
}
.indexPicturePositionFormClass input{
    line-height:1.5;
}
.indexPicturePositionInputClass{
    max-width: 4em;
    min-width: 0;
}
.indexPicturePositionSubmitBtnClass{
    margin: 0 0 0 .5em;
    padding: .5em;
    width: unset;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size: 1rem;
}
.indexPictureLabelArrowClass{
    font-size: 1.3rem;
    margin-left: .4em;
    margin-right: -1.19em;
}
.indexPictureArrowMarginOffsetClass{
    display: flex;
    margin:.2em 1.7em .2em 0;
}
.indexPicturePaginationWrapClass{
    padding: 0 .6em;
}
.indexPicturePaginationClass{
    display: flex;
    justify-content: center;
    margin: 1.5em auto;
    background-color: var(--bck-dark);
    border-radius: 25px;
    width: 100%;
    padding: .5em;
}
.indexPicturePageActiveClass{
    font-size: 1.2rem;
    color: #fff;
    margin: 0 .5em;
    font-weight: 800;
}
.indexPicturePaginationClass a{
    padding:0 .5em;
    font-size: 1.2rem;
}
/* ---- Public holiday and Exceptional day form ---- */
.editPubHolidayMainClass,
.editExcepDayMainClass,
.newPubHolidayMainClass,
.newExcepDayMainClass{
    background-color: var(--bck-darker-transparent);
}
.pubHolidayFormWrapClass,
.excepDayFormWrapClass {
    background-color: var(--bck-light);
    border: 4px solid var(--primary-color);
    border-radius: 12px;
    max-width: 75em;
    width: 100%;
    margin: auto;
    box-shadow: var(--box-shadow-dark);
}   
.pubHolidayFormWrapClass form,
.excepDayFormWrapClass form{
    display: flex;
    flex-wrap: wrap;
    padding: .5em;
}
.formPubHolidayItemClass,
.formExcepDayItemClass{
    width: 100%;
    margin-top: 1.2em;
    display: block;
    padding: .5em 1em;
}
.formPubHolidayItemClass label,
.formExcepDayItemClass label{
    font-size: 1.2rem;
}
.formPubHolidayItemClass > div,
.formExcepDayItemClass > div{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.formPubHolidayItemClass select,
.formPubHolidayItemClass input,
.formExcepDayItemClass select,
.formExcepDayItemClass input{
    margin: .5em 0 .5em;
    width: 100%;
    line-height: 1.5;
    padding: .1em 0 .1em 1em;
    font-size: 1.3rem;
    font-weight: 800;
}
.formPubHolidayItemClass input,
.formExcepDayItemClass input{
    background-color: var(--input-bck-grey);
}
.formPubHolidayItemClass ::placeholder,
.formExcepDayItemClass ::placeholder{
    color: var(--placeholder-white-text);  
}
.formExcepDayOpenCloseWrapClass,
.formPubHolidayDateClass,
.formPubHolidayRecurrentClass,
.formExcepDayDateClass,
.formExcepDayOpenClass,
.formExcepDayCloseClass,
.formExcepDayResaonClass,
.formExcepDayOtherResaonClass{
    width: 100%;
}
.formExcepDayOpenClass,
.formExcepDayCloseClass{
    width: 100%;
}
.formPubHolidayItemBlockTitleClass,
.formExcepDayItemBlockTitleClass{
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    margin: 1.5em 0 .7em;
}
.formPubHolidayTimetableClass,
.formPubHolidayDayClass,
.formExcepDayTimetableClass,
.formExcepDayDayClass{
    padding: .4em .5em .7em;
    border:1px solid #777;
    border-radius: 8px;
    margin-bottom: 1.5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.formPubHolidayTimetableClass .formPubHolidayItemClass,
.formExcepDayTimetableClass .formExcepDayItemClass{
    width: 50%;
    display: flex;
}
.formPubHolidayTimetableClass input,
.formExcepDayTimetableClass input{
    max-width: 6em;
}
.formPubHolidayTimetableClass label,
.formExcepDayTimetableClass label{
    width: 100%;
    font-size: 1.2rem;
}
.formExcepDayOpenCloseWrapClass{
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #aaa;
    margin-top: 1.4em;
    border-radius: 6px;
}
.formPubHolidayRecurrentClass,
.formExcepDayOpenClass input,
.formExcepDayCloseClass input{
    align-content: center;
    padding-top: 2em;
}
.formExcepDayOpenClass,
.formExcepDayCloseClass{
    align-content: center;
    margin-top: 0;
}
.formPubHolidayRecurrentClass div,
.formExcepDayOpenClass div,
.formExcepDayCloseClass div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.formExcepDayOpenClass div,
.formExcepDayCloseClass div{
    padding-top: .3em;
}
.formPubHolidayRecurrentClass label,
.formExcepDayOpenClass label,
.formExcepDayCloseClass label{
    width: 100%;
}
.formPubHolidayRecurrentClass input,
.formExcepDayOpenClass input,
.formExcepDayCloseClass input{
    width: 30px;
    height:30px;
    margin-right: 1.5em;
}
.formExcepDayOpenClass p,
.formExcepDayCloseClass p{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.formPubHolidayNameClass{
    width: 100%;
}
.formPubHolidayTitleClass,
.formExcepDayTitleClass{
    color: #fff;
    text-align: center;
    font-size: 1.3rem;
    padding: .5em;
    border-bottom: 1px solid var(--border-bottom);
    margin: 0 .5em .5em;
    font-weight: 800;
}
.editPubHolidayMenuClass,
.editExcepDayMenuClass{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
}
.editPubHolidayMenuClass a,
.editPubHolidayMenuClass button,
.editExcepDayMenuClass a,
.editExcepDayMenuClass button{
    display: flex;
    align-items: last baseline;
    justify-content: center;
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border-radius: 5px;
    padding: .6em .5em;
    margin: .5em auto;
    font-size: 1rem;
    font-weight: 800;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.editPubHolidayMenuClass a:hover,
.editPubHolidayMenuClass a:focus,
.editPubHolidayMenuClass button:hover,
.editPubHolidayMenuClass button:focus,
.editExcepDayMenuClass a:hover,
.editExcepDayMenuClass a:focus,
.editExcepDayMenuClass button:hover,
.editExcepDayMenuClass button:focus{
    color:#333;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.editPubHolidayMenuClass form,
.editExcepDayMenuClass form{
    width: 100%;
}
.formExcepDayReasonWrapClass{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.hideOtherReasonFieldClass{
    display: none;
}
/* ---- Public holiday and Exceptional day show ---- */
.showPubHolidayMainClass,
.showExcepDayMainClass {
	background-color: var(--bck-darker-transparent);
}
.showPubHolidayWrapClass,
.showExcepDayWrapClass{
    background-color: #fff;
    border: 4px solid var(--primary-color);
    border-radius: 12px;
    max-width: 75em;
    width: 100%;
    margin: auto;
    box-shadow: var(--box-shadow-dark); 
}
.showPubHolidayClass,
.showExcepDayClass{
    padding: 1em;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.showExcepDayTitleClass,
.showExcepDayTitleClass{
    color: #fff;
    text-align: center;
    font-size: 1.3rem;
    padding: .5em;
    border-bottom: 1px solid var(--border-bottom);
    margin: 0 .5em .5em;
    font-weight: 800;   
}
.showPubHolidayDateClass,
.showExcepDayDateClass{
    display: flex;
    flex-direction: column;
}
.showPubHolidayTimeTableClass,
.showExcepDayTimeTableClass{
    display: flex;
    flex-direction: column;
}
.showPubHolidayItemClass,
.showExcepDayItemClass{
    padding: .25em .4em;
    font-size: 1.2rem;
}
.showPubHolidayNameItemClass,
.showExcepDayNameItemClass{
    width: 100%;
    display: flex;
    align-items: center;
    padding: 1em;
}
.showPubHolidayNameItemClass h5,
.showExcepDayNameItemClass h5{
    margin-right: 1em;
}
.showPubHolidayLabelClass,
.showExcepDayLabelClass{
    padding:  .4em 0;
}
.showPubHolidayContentClass,
.showExcepDayContentClass{
    font-weight: 800;
}
.showPubHolidayMenuClass,
.showExcepDayMenuClass{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
}
.showPubHolidayMenuClass form,
.showExcepDayMenuClass form{
    width: 100%;
}
.showPubHolidayMenuClass a,
.showPubHolidayMenuClass button,
.showExcepDayMenuClass a,
.showExcepDayMenuClass button{
    display: flex;
    align-items: last baseline;
    justify-content: center;
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border-radius: 5px;
    padding: .6em .5em;
    margin: .5em auto;
    font-size: 1rem;
    font-weight: 800;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.showPubHolidayMenuClass a:hover,
.showPubHolidayMenuClass a:focus,
.showPubHolidayMenuClass button:hover,
.showPubHolidayMenuClass button:focus,
.showExcepDayMenuClass a:hover,
.showExcepDayMenuClass a:focus,
.showExcepDayMenuClass button:hover,
.showExcepDayMenuClass button:focus{
    color:#333;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.showPubHolidayContentClass,
.showExcepDayContentClass{
    font-weight: 800;
}
.showPubHolidayLabelClass,
.showExcepDayLabelClass{
    padding: .5em 0;
}
/* --- Public holiday and Exceptional day index ---- */
.indexPubHolidayTitleClass,
.indexExcepDayTitleClass{
    color: #555;
    text-align: center;
    font-size: 1.3rem;
    padding: .5em;
    border-bottom: 1px solid var(--border-bottom);
    margin: 0 .5em .5em;
    font-weight: 800;
}
.indexPubHolidayContentClass,
.indexExcepDayContentClass{
    font-weight: 800;
}
.indexPubHolidayWrapClass, 
.indexExcepDayWrapClass{
    width: 100%;
    border-collapse: collapse;
}
.indexPubHolidayLabelWrapClass,
.indexPubHolidayItemWrapClass,
.indexExcepDayLabelWrapClass,
.indexExcepDayItemWrapClass  {
    display: block;
}
.indexPubHolidayLabelClass,
.indexPubHolidayItemClass,
.indexExcepDayLabelClass,
.indexExcepDayItemClass{
    display: block;
    padding: .4em .2em;
    font-size: 1.1rem;
}
.indexPubHolidayItemWrapClass > .indexPubHolidayLabelClass,
.indexPubHolidayItemWrapClass > .indexPubHolidayItemClass,
.indexExcepDayItemWrapClass > .indexExcepDayLabelClass,
.indexExcepDayItemWrapClass > .indexExcepDayItemClass{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4em .2em;
    font-size: 1.1rem;
}
.indexPubHolidayItemWrapClass .indexPubHolidayContentClass,
.indexExcepDayItemWrapClass .indexExcepDayContentClass{
    text-align: right;
}
.indexPubHolidayLabelWrapClass,
.indexExcepDayLabelWrapClass{
    background-color: #333;
    color: #fff;
    font-weight: 600;
    display: none;
}
.indexPubHolidayItemWrapClass,
.indexPubHolidayItemClass,
.indexExcepDayItemWrapClass,
.indexExcepDayItemClass{
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
}
.indexPubHolidayActionItemClass,
.indexExcepDayActionItemClass{
    background-color: #333;
}
.indexPubHolidayMenuClass a,
.indexExcepDayMenuClass a{
    display: block;
    padding: .3em .4em;
    font-size: 1.2rem;
}
.indexPubHolidayLinkClass,
.indexExcepDayLinkClass{
    padding: 1em .7em;
    font-size: 1.2rem;
    background-color: #777;
    text-align: right;
    display: block;
    margin-top: 1em;
}
.indexPubHolidayWrapClass,
.indexExcepDayWrapClass {
    display: block;
}
.indexPubHolidayItemWrapClass > .indexPubHolidayActionItemClass,
.indexExcepDayItemWrapClass > .indexExcepDayActionItemClass{
    justify-content: right;
}
.indexPubHolidayItemWrapClass,
.indexExcepDayItemWrapClass{
    margin-bottom: 1em;
}
/* ------  Validate store Form and edit Page ------- */
.validateFormWrapClass {
    width: 100%;
    margin: auto;
    background-color: var(--bck-light);
    border: 4px solid var(--primary-color);
    border-radius: 12px;
    max-width: 75em;
    box-shadow: var(--box-shadow-dark);
    margin-bottom: 1.5em;
}
.editValidateStoretitleClass,
.newValidateTitleClass{
    text-align: center;
    font-size: 1.5rem;
    padding: .5em;
    border-bottom: 1px solid var(--border-bottom);
    margin: 0 .5em .5em;
    font-weight: 800;
}
.validateFormWrapClass form{
    padding: 1em 2em;
}
.formValidateItemClass.formValidatehelpTextClass{
    flex-direction: column;
}
.formValidateItemClass .helpTextFormWrapClass{
    width: 100%;
}
.formValidateItemClass{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #aaa;
    padding: 1em .5em;
    margin-top: .5em;
}
.formValidateItemClass > div{
    display: flex;
    width: 90%;
    padding: 1em;
}
.formValidateItemClass label{
    width: 80%;
    display: block;
    font-size: 1.2rem;
}
.formValidateItemClass input{
    width: 30px;
    display: block;
    height: 30px;
}
.validateExplanationsTextWrapClass{
    max-width: 75em;
    margin: auto;
    background-color: var(--user-admin-bck-dark);
    border-radius: 8px;
    margin:2em auto;
    padding: 1em;
}
.editValidateStoreMainClass .validateExplanationsTextWrapClass{
    display: none;
}
.validateExplanationsTextClass{
    padding: 1em;
    text-align: justify;
    color: #fff;
    line-height: 1.5;
    font-size: 1.2rem;
}
.formRecommandClass div{
    width: 100%;
    font-weight: 800;
    padding:1em 0 .4em .5em;
    justify-content: space-between;
}
.formValidateItemClass .allUnSelectBtnClass,
.formValidateItemClass .allSelectBtnClass{
    display: block;
    text-align: center;
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border-radius: 5px;
    padding: .4em 1em;
    margin: .5em 0;
    font-size: 1.5rem;
    font-weight: 800;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
}
.formValidateItemClass .allSelectBtnClass:hover,
.formValidateItemClass .allUnSelectBtnClass:hover{
    color:#333;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
}
.formValidateHeaderClass{
    display: flex; 
}
.formValidateHeaderClass {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #aaa;
	padding: 1em .5em;
    font-size: 1.2rem;
    align-items: baseline;
}
.formValidateStoreNameClass{
    display: flex;
    justify-content: end; 
    flex-direction: column; 
}
.formValidateStoreNameClass{
    text-align: right; 
}
.formValidateHelpClass{
    font-size: .8rem;
}
.formValidateStoreNameTxtClass{
    font-weight: 800;
}
.editValidateStoreMenuClass{
    display: flex;
    flex-direction: column;
    background-color: var(--bck-dark);
    border-radius: 5px;
    padding: 1em;
    max-width: 75em;
    width: 100%;
    margin: 0 auto;
}
.editValidateStoreMenuClass button,
.editValidateStoreMenuClass a{
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border: 0;
    border-radius: 5px;
    padding: .5em;
    margin: .5em auto;
    font-size: 1rem;
    font-weight: 800;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.editValidateStoreMenuClass button:hover,
.editValidateStoreMenuClass button:focus,
.editValidateStoreMenuClass a:hover,
.editValidateStoreMenuClass a:focus{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.newValidateLinkClass a{
    color: #777;
    background-color: var(--primary-color);
    width: 100%;
    border-radius: 5px;
    padding: .4em 1em;
    margin: .5em auto;
    font-size: 1.5rem;
    font-weight: 800;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.newValidateLinkClass a:hover,
.newValidateLinkClass a:focus{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
/* ------------  Validate store show Page -------------- */
.showValidStoreMenuClass{
    border: #555;
    background-color: var(--user-admin-bck-dark);
    margin: 1em 0;
    padding: .5em 1em;
    border-radius: 6px;
    max-width: 75em;
    margin: 0 auto;
    width: 100%;
}
.showValidStoreListClass{
    display: flex;
    flex-direction: column;
}
.showValidStoreMenuItemClass{
    margin:0;
    width: 100%;
}
.showValidStoreMenuItemLinkClass{
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border: 0;
    border-radius: 5px;
    padding: .6em .5em;
    margin: .5em auto;
    font-size: 1rem;
    font-weight: 800;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.showValidStoreMenuItemLinkClass:hover,
.showValidStoreMenuItemLinkClass:focus{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.showValidStoreMenuItemClass button{
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border: 0;
    border-radius: 5px;
    padding: .5em;
    margin: .5em auto;
    font-size: 1rem;
    font-weight: 800;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.showValidStoreMenuItemClass button:hover,
.showValidStoreMenuItemClass button:focus{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.showValidStoreTitleClass{
    padding: .4em 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color:#555;
}
.showValidateLinkClass{
    display: flex;
    flex-direction: column;
    background-color: var(--user-admin-bck-dark);
    border-radius: 6px;
    padding: 2em;
    margin: 1.5em auto 0;
    width: 100%;
    max-width: 75em;
}
.showValidateLinkClass p{
    padding: .5em 0;
    color:#fff;
    font-weight: 600;
    font-size: 1.2rem;
}
.showValidateLinkClass a{
    color: #777;
    background-color: var(--primary-color);
    width: 100%;
    border-radius: 5px;
    padding: .4em 1em;
    margin: .5em auto;
    font-size: 1.5rem;
    font-weight: 800;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.showValidateLinkClass a:hover,
.showValidateLinkClass a:focus{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
/* -----------  Validate store index Page -------------- */
.indexValidateTitleClass{
    font-size: 1.5rem;
    padding: 1em 0;
    text-align: center;
    font-weight: 800;
    color:#555;
    position: relative;
    display: inline-block;
    border-bottom: 1px solid #555; 
}
.indexValidateWrapClass{
    background-color: #fff;
    border: 4px solid var(--primary-color);
    border-radius: 12px;
    max-width: 75em;
    width: 100%;
    margin: 1.5em auto;
    box-shadow: var(--box-shadow-dark);
    padding: 1.5em 1em;
}
.indexValidateWrapClass h4{
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
}
.indexValidateItemTitleClass{
    width: 100%;
    padding: 0em 1em 1em;
}
.indexValidateItemClass{
    display: flex;
    flex-direction: column;
    margin: 1.5em 1em;
    border: 1px solid #aaa;
    padding: 1em;
    border-radius: 6px;
}
.noActiveAccordionClass{
    display: none;
}
.indexValidateItemClass > div{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #aaa;
}
.indexValidateBtnClass{
    text-align: center;
    padding: .4em .5em;
    font-size: 1.2rem;
    font-weight: 800;
}
.indexValidateItemClass h5{
    text-align: left;
    padding: .4em .5em;
    width: 100%;
}
.indexValidateItemClass span{
    text-align: left;
    padding: .4em .5em;
    width: 4em;
}
.indexValidateActionClass{
    display: flex;
    flex-direction: column;
    background-color: var(--user-admin-bck-dark);
    border-radius: 5px;
    padding: .5em;
    margin-top: 1.5em;
}
.indexValidateActionClass h5{
    font-weight: 600;
    font-size: 1.2rem;
    color: #fff;
    width: 50%;
}
.indexValidateActionClass > div{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: .5em;
}
.indexValidateActionClass span{
    display: flex;
    flex-direction: column;
}
.indexValidateActionClass a{
    color:#777;
    background-color:var(--primary-color);
    width: 100%;
    border: 0;
    border-radius: 5px;
    padding: .6em .5em;
    margin: .5em auto;
    font-size: 1rem;
    font-weight: 800;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.indexValidateActionClass a:hover,
.indexValidateActionClass a:focus{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
/* ---------  Registration_information pages ------------ */
.mainSuccessRegistrationClass,
.mainChoiceRegistrationClass,
.mainReferencingRegistrationClass,
.mainConfirmRegistrationClass{
    background-color:unset;
}
.successRegistrationClass,
.choiceRegistrationClass,
.referencingRegistrationClass,
.confirmRegistrationClass{
    padding: 1.5em;
}
.successRegistrationTitleClass,
.choiceRegistrationTitleClass,
.referencingRegistrationTitleClass,
.confirmRegistrationTitleClass{
    font-size: 1.5rem;
    padding: 1em 0;
    text-align: center;
    font-weight: 800;
    color:#fff;
    position: relative;
    display: inline-block;
    border-bottom: 1px solid #fff;
}
.successRegistrationTextClass,
.choiceRegistrationTextClass,
.referencingRegistrationTextClass,
.confirmRegistrationTextClass,
.referencingRegistrationClass li,
.confirmRegistrationClass li,
.referencingRegistrationClass span,
.confirmRegistrationClass span{
    font-size: 1.3rem;
    line-height: 1.4;
    padding:1em 0;
    display: block;
    text-align: justify;
    color: #fff;
}
.successRegistrationWrapClass,
.choiceRegistrationWrapClass,
.referencingRegistrationWrapClass,
.confirmRegistrationWrapClass{
    max-width: 100%;
    margin: 0 auto 1em auto;
    width: 100%;
    background-color: var(--bck-darker-transparent);
    box-shadow: var(--box-shadow-dark);
    border-radius: 8px;
    text-align: center;
}
.referencingRegistrationClass ol,
.confirmRegistrationClass ol{
    list-style: circle outside none !important;
}
.referencingRegistrationClass li,
.confirmRegistrationClass li{
    list-style: circle outside none !important;
}
/* -------------- Already exists store page ------------ */
.mainClass.anotherStoreMainClass{
    padding: 1.5em 8em;
}
.anotherStoreTitleClass{
    padding: .4em 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color:#555;
}
.createAnotherStoreMessageClass p{
    font-size: 1.3rem;
    line-height: 1.4;
    padding: 1em 0;
    display: block;
    text-align: justify;
    color: #555;
}
/* -------- Already exists valdiate store page --------- */
.mainClass.anotherValidationMainClass{
    padding: 1.5em 8em;
}
.anotherValidationTitleClass{
    padding: .4em 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color:#555;
}
.createAnotherValidationMessageClass{
    background-color: #333;
    padding: 2em;
    border-radius: 6px;

}
.createAnotherValidationMessageClass p{
    font-size: 1.5rem;
    line-height: 1.4;
    padding: 1em 0;
    display: block;
    text-align: justify;
    color: #fff;
}
.createAnotherValidationMessageClass a{
    color:#777;
    background-color:var(--primary-color);
    width: auto;
    border-radius: 5px;
    padding: .5em 1em;
    margin: .5em auto;
    font-size: 1.5rem;
    font-weight: 800;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
.createAnotherValidationMessageClass a:hover,
.createAnotherValidationMessageClass a:focus{
    color:#333;
    background-color:var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
/* --------------------  Blog index -------------------- */
.blogIndexWrapClass{
    padding: 1.5em 1em;
}
.blogIndexTitleClass{
    text-align: center;
    padding: .5em 1em;
    color:#444;
    font-size: 1.5rem;
    font-weight: 800;
}
.blogIndexTextClass{
    color:#555;
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.3;
}
.blogIndexTextClass a{
    color:rgb(168, 130, 2);
    text-shadow: 0 1px 1px;
}
.blogIndexTextClass a:hover{
    color:rgb(200, 154, 0);
}
/* -----------------  Static page show ----------------- */
.showStatPgMainClass.mainClass{
    padding: 1.5em 1em;
    background-color: rgba(255,255,255,.9);
}
.showStatPgTitleClass{
    font-size: 1.2rem;
    padding: 1em 0;
    text-align: center;
    font-weight: 800;
    color:#777;
    position: relative;
    display: inline-block;
    border-bottom: 1px solid #aaa; 
    margin-bottom: 2em;
    line-height: 1.6;
}
.showStatPgTxt1Class,
.showStatPgTxt2Class{
    font-size: 1.2rem;
    line-height: 1.4;
    text-align: justify;
}
.showStatPgTxt1Class a,
.showStatPgTxt2Class a{
    color:rgb(168, 130, 2);
    text-shadow: 0 1px 1px;
}
.showStatPgTxt1Class a:hover,
.showStatPgTxt2Class a:hover{
    color:rgb(200, 154, 0);
}
/* --------------------- Contact page ------------------ */
.contactMainClass.mainClass{
    padding: 1.5em 1em;
    background-color: rgba(255,255,255,.9);
}
.contactClass{
    max-width: 55em;
    width: 100%;
    margin: 0 auto;
}
.contactTitleClass{
    font-size: 1.2rem;
    padding: 1em 0;
    text-align: center;
    font-weight: 800;
    color:#777;
    position: relative;
    display: inline-block;
    border-bottom: 1px solid #aaa; 
    margin-bottom: 2em;
    line-height: 1.6;
    width: 100%;
}
.contactItemClass{
    margin-bottom: 1.5em;
}
.contactItemClass label{
    padding: .2em .5em .5em .2em;
    display: block;
}
.contactMessageClass textarea{
    width: 100%;
    min-height: 20em;
}
.contactMessageClass textarea{
    font-size:1.2rem;
}
/* ----------------- City  Autocomplete ---------------- */
.autocompleteList{
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #ccc;
    max-height: 600px;
    overflow-y: auto;
    z-index: 1000;
    width:100%;
}
.autocompleteList li {
    color: #555;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #aaa;
}
.autocompleteList li:hover {
    background-color: #f0f0f0;
}
.autocompleteList li::first-letter {
    text-transform: uppercase;
}
.cityAutocomplete input{
    text-transform: uppercase;
    color: #333;
}
.cityAutocomplete input::placeholder {
    text-transform: none;
}
/* -----------------  Error Pages ------------------ */
.errorClass{
    background-color: var(--bck-light);
    border: 1px solid #777;
    padding: 1.5em;
    margin: 1em;
    background: #ccc;
    box-shadow: var(--box-shadow-dark);
}
.errorMessageWrapClass{
    border: 6px solid #ff0000;
    padding: 1em;
    background: #777;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.5;  
}
.errorMessageTitleClass{
    font-size: 1.7rem;
}
.errorServerMessageWrapClass{
    padding: 1em;
    font-size: 1rem;
    line-height: 1.5; 
}
.errorServerMessageTitleClass{
    font-size: 1.2rem;
    padding-bottom: .5em;
    border-bottom: 1px solid;
    margin-bottom: 1em;
}/* -----------------  Ckeditor ------------------- */
.ql-editor{
    width: 100%!important;
    padding: 0!important;
}
.quill-container{
    width: 100%!important;
}
/* -------------------- Footer -------------------- */
.footerClass{
    padding: 2em;
    margin-top:2em;
    background-color: var(--bck-dark-transparent);
}
.footerMenuClass{
    display: flex;
    list-style: none;
    justify-content: space-evenly;
    flex-direction: column;
}
.footerMenuItemClass{
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.footerMenuItemClass a{
    font-size:1.3rem;
    text-shadow:0 0 8px #000;
    padding: .3em 0;    
    display: block;
        white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* -------------------- Advertisement ------------------ */
.slideShowWrapClass{
    position: relative;
    display: flex;
    overflow: hidden;
    width: 100%;
}
.slideShowContainerClass {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.slideShowTrackWrapClass{
    border: 5px solid var(--primary-color);
    overflow: clip;   
}
.slideShowTrackClass {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}
.slideShowItemClass {
    flex-shrink: 0;
    width: 100%;
    position: relative;
    border-radius: 8px;
}
.slideShowImgClass {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}
.slideShowBodyWrapClass{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
}
.slideShowBodyClass {
    position: absolute;
    color:#fff;
    text-shadow: 0 0 3px #000;
    z-index: 100;
    margin: auto;
    text-align: justify;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.slideShowBodyClass::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.6);
    border-radius: 5px;
    z-index: -1;
}
.slideShowBodyClass > div{
    position: relative;
}
.slideShowDotsWrapClass{
    display: flex;
    justify-content: center;
    margin-top: .4em;
}
button.slideShowDotClass{
    border-radius: 100%;
    cursor: pointer;
    margin: .2em .4em;
    background-color:var(--primary-color);
    border: 0;
}
button.slideShowDotClass:hover{
    background-color:var(--primary-color-hover);
}
button.activeDotClass{
    background-color:var(--dot-active);
}
/* ------------------ Fenêtre modale -------------- */
.modalClass {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    align-items: center; justify-content: center;
}
.modalClass.show {
    display: flex;
}
.modalContentClass {
    background: #fff;
    padding: 2em;
    border-radius: 5px;
    text-align: center;
    border: 6px solid #a00;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.9);
}
.modalContentClass p{
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1.5em;

}
button.modalCancelBtnClass,
button.modalDeleteBtnClass{
    color: #777;
    background-color: var(--primary-color);
    width: 100%;
    border-radius: 5px;
    padding: .3em .5em;
    margin: .5em auto 1.4em auto;
    font-size: 1.5rem;
    font-weight: 800;
    border: 0;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;
}
button.modalCancelBtnClass:hover,
button.modalDeleteBtnClass:hover{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
.editPubHolidayMenuClass button.modalDeleteBtnClass, 
.editExcepDayMenuClass button.modalDeleteBtnClass{
    margin-top: 1.4em;
}
button.deleteBtnClass{
    color: #777;
    background-color: var(--primary-color);
    width: 100%;
    border: 0;
    border-radius: 5px;
    padding: .5em;
    margin: .5em auto;
    font-size: 1rem;
    font-weight: 800;
    transition: var(--transtion);
    cursor: pointer;
    text-align: center;
    display: block;   
}
button.deleteBtnClass:hover{
    color: #333;
    background-color: var(--primary-color-hover);
    transition: var(--transtion);
    box-shadow: 0 0 13px -1px #fff;
}
/* -------------------- CKEditor  ----------------- */
.ck-content{
    min-height: 10em;
}
/* ------------------------------------------------ */
/* -------------------- Responsive ---------------- */
@media screen and  (max-width : 480px) {
    /* ------------------ Main Margin ----------------- */
    .mainClass{
        margin: 1em .5em;
        padding: 1em 0;
    }
    .topbarClass{
        padding: 0 .5em;
    }
    .brandAndToggleClass{
        padding: 0 .5em;
    }
    .mainMenuWrapClass {
        padding: .1em 4em;
    }
    .linkadmin1ProfileWrapClass {
        margin: 0;
    }
    /* .linkProfileWrapClass, */
    .linkadmin2ProfileWrapClass {
        margin: 0;
    }
    /* ------------------ Profile -------------------- */
    .accountDeleteConfirmMainClass,
    .profileUpdateFormMainClass{
        padding: 1em .5em;
    }
    .customerProfileFirstFieldsClass{
        display: flex;
        flex-direction: column;
    }
    .professionalProfileImageClass{
        order: 2;
    }
    .professionalProfileMenuClass{
        order: 1;
    }
    /* -----------------  Home store ----------------- */
    .homeStoreFilterSortClass{
        flex-direction: column;
        padding: 1.5em .5em 1.1em .5em;
    }
    .homeStoreSortBtnDisplayClass {
        margin-bottom: .4em;
        width: 100%;
    }
    .homeStoreSortCatWrapClass {
        position: relative;
    }
    .homeStoreNameClass{
        width: 100%;
        margin-bottom: 1em;
    }
    .homeStoreNameClass .homeStoreNameLinkClass {
        max-width: 100%;
        display: initial;
    }
    .homeStoreDistanceDisplayClass{
        text-align: left;
    }
    .homeStoreLegendSortClass{
        width: 50%;
    }
    .homeStoreFilterSortClass > :nth-child(1){
        padding: 0em 0 .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(2){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(3){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(4){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(5){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(6){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(7){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(8){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(9){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(10){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(11){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(12){
        padding:.2em 0 0 0;
    }
    .homeStoreMoreInfoLinkClass{
        display: block;
    }
    .homeStoreLegendSortClass:hover .homeStoreLegendLabelClass{
        max-width: calc(100vw - 1em);
        left: 50%;
        transform: translateX(-100%);
        white-space: wrap;
        text-overflow: unset;
        overflow: visible;
        z-index: 20;
        background-color: #fff;
        padding: .4em;
        border-radius: 20px;
        box-shadow: 2px 2px 6px #333;
        position: absolute;
        margin-left: 1.5em;
        color: #333;
        font-weight: 600;
    }
    /* ------------  Advanced Search store -------------- */
    .advancedSearchStoreCityClass, .advancedSearchStoreStoreClass {
        margin: .5em 0;
    }
    /* --------  New and Edit store form page ---------- */
    .formStoreItemCatInputWrapClass > div{
        flex-wrap: wrap;
    }
    .formStoreItemCatInputWrapClass > div > label{
        width:90%; 
    }
    #store_storePaymentMethods{
        font-size: .7rem;
    }
    /* - Viennese - */
    .newFieldClass,
    .formProductClass{
        flex-direction: column;
        gap:0;
    }
    /* -------------------  Show store ----------------- */
    .mainClass.showStoreMainClass {
        padding: 1.5em .7em;
    }
    .showStoreClosedDayClass,
    .showStoreDayClass .showStoreItemLabelClass {
        min-width: 3em;
        padding: .3em .2em .3em 0;
        width: 40%;
    }
    .showStoreAddressClass .showStoreItemLabelClass{
        display: none;
    }
    .showStoreItemClass {
        width: auto;
    }
    .showStoreAddressClass .showStoreItemContentClass{
        white-space: wrap;
        max-height: 100%;
    }
    .showStoreItemLabelClass{
        width: 100vw;
        max-height: 100%;
    }
    .showStoreAddressWrapClass .showStoreItemContentClass,
    .showStoreContactWrapClass .showStoreItemContentClass,
    .showStoreCoordinatesWrapClass .showStoreItemContentClass,
    .showStoreCategoryWrapClass .showStoreItemContentClass{
        padding: .3em 0;
    }
    .showStoreItemContentClass, .showStoreItemNewContentClass{
        white-space: wrap;
    }
    .showStoreCategoryClass .showStoreItemContentClass,
    .showStorePaymentMethodsClass .showStoreItemContentClass{
        max-height: 100%;
    }
    .showStoreSpecialityItemClass{
        display: flex;
        width: 100%;
        flex-direction: column;
    }
    .showStoreSpecialityItemClass{
        flex-direction: column;
    }
    .showStoreItemPercentClass{
        top: -.1em;
    }
    .showStoreItemNewLabelClass{
        font-size: .8rem;
        font-weight: 800;
        padding: 1em .5em;
    }
    .showStoreCategoryClass .showStoreItemClass,
    .showStoreSundayMondayClass .showStoreItemClass,
    .showStoreKindClass .showStoreItemClass,
    .showStoreChocoMakerClass .showStoreItemClass,
    .showStoreBreadnViennesClass .showStoreItemClass,
    .showStoreBioClass .showStoreItemClass,
    .showStoreVeganClass .showStoreItemClass,
    .showStoreSaltyClass .showStoreItemClass,
    .showStoreGroceryClass .showStoreItemClass,
    .showStoreIceClass .showStoreItemClass,
    .showStoreDrinksClass .showStoreItemClass,
    .showStoreSpecialitiesClass .showStoreItemClass,
    .showStoreLocalProductsClass .showStoreItemClass,
    .showStoreServiceClass .showStoreItemClass,
    .showStoreSpecialitiesSub2Class .showStoreItemClass {
        width:100%;
        position: relative;
    }
    .showStoreSpecialitiesSub2Class {
        flex-direction: column;
    }
    .showStorePaymentMethodsClass .showStoreItemContentClass {
        max-height: 100%;
        padding:.3em .5em .3em 0 ;
    }
    .showStoreKindItemLabelWrapClass {
        margin-left: 0;
    }
    .showStoreItemContentClass {
        order: 1;
    }
    .showStoreItemPercentWrapClass {
        order: 2;
    }
    .showStoreKindClass .showStoreItemClass {
        justify-content: start;
    }
    .showStoreKindClass .showStoreKindItemLabelClass{
        margin-left: unset;
    }
    .showProductModalLinkClass {
        order: 3;
        margin-left: auto;
    }
    .showSpecialityNameNameClass {
        white-space: wrap;
    }
    .showStoreSpecialityItemWrapClass{
        flex-direction: column;
    }
    .showSpecialityNameItemClass {
        width: 100%;
        text-align: center;
    }
    .showSpecialityNameItemWrapClass {
        margin-bottom: 1em;
    }
    .showStoreSpecialityItemWrapClass .showStoreItemLabelClass {
        margin-bottom: 1em;
    }
    .moreProductIconClass {
        margin: 0 .4em 0 0;
    }
    .showStoreItemPercentWrapClass,
    .showStoreItemNewLabelWrapClass {
        width: 4.5em;
    }
    .productModalContentClass {
        padding: 1.5em .3em 1em;
    }
    .showProductTitleClass {
        font-size: 1.3rem;
    }
    /* --- Public holiday and Exceptional day index ---- */
    .indexPubHolidayMainClass,
    .indexExcepDayMainClass{
        padding: 1em .5em;
    }
    /* ---- Public holiday and Exceptional day show ---- */
    .showPubHolidayMainClass,
    .showExcepDayMainClass{
        padding: 1em .5em;
    }
    /* ---- Public holiday and Exceptional day form ---- */
    .newPubHolidayMainClass,
    .newExcepDayMainClass,
    .editPubHolidayMainClass,
    .editExcepDayMainClass{
        padding: 1em .5em;
    }
    /* ------------------ Advertisement ---------------- */
    .homeSlideshowWrapClass{
        margin-top: 1em;
    }
    .slideShowBodyClass {
        font-size: .8rem;
        padding:1em;
        line-height: 1.2;
    }
    button.slideShowDotClass{
        width: 1.2em;
        height: 1.2em;
    }
    /* ------------------ Picture show ----------------- */
    .editPictureMainClass,
    .showPictureMainClass{
        padding: 1em .5em;
    }
}
@media screen and  (min-width : 481px) and (max-width : 768px) {
    /* ------------------ Main Margin ----------------- */
    .mainClass{
        margin: 1em;
        padding: 1em .6em;
    }
    .topbarClass{
        padding: 0 1.6em;
    }
    .brandAndToggleClass{
        padding: 0 1.6em;
    }
    .mainMenuWrapClass {
        padding: .1em 4em;
    }
    .linkadmin1ProfileWrapClass {
        margin: 0;
    }
    /* .linkProfileWrapClass, */
    .linkadmin2ProfileWrapClass {
        margin: 0;
    }
    /* ------------------ Profile -------------------- */
    .customerProfileFirstFieldsClass{
        display: flex;
        flex-direction: column;
    }
    .professionalProfileImageClass{
        order: 2;
    }
    .professionalProfileMenuClass{
        order: 1;
    }
    /* -----------------  Home store ----------------- */
    .homeStoreFilterSortClass{
        flex-direction: column;
        padding: 1.5em 1em 1.1em 1em;
    }
    .homeStoreSortBtnDisplayClass {
        margin-bottom: .4em;
        width: 100%;
    }
    .homeStoreSortCatWrapClass {
        position: relative;
    }
    .homeStoreNameClass{
        width: 100%;
        margin-bottom: 1em;
    }
    .homeStoreNameClass .homeStoreNameLinkClass {
        max-width: 100%;
        display: initial;
    }
    .homeStoreDistanceDisplayClass{
        text-align: left;
    }
    .homeStoreLegendSortClass{
        width: 50%;
    }
    .homeStoreFilterSortClass > :nth-child(1){
        padding: 0em 0 .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(2){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(3){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(4){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(5){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(6){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(7){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(8){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(9){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(10){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(11){
        padding:.2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(12){
        padding:.2em 0 0 0;
    }
    .homeStoreMoreInfoLinkClass{
        display: block;
    }
    .homeStoreLegendSortClass:hover .homeStoreLegendLabelClass{
        max-width: calc(100vw - 1em);
        left: 50%;
        transform: translateX(-100%);
        white-space: wrap;
        text-overflow: unset;
        overflow: visible;
        z-index: 20;
        background-color: #fff;
        padding: .4em;
        border-radius: 20px;
        box-shadow: 2px 2px 6px #333;
        position: absolute;
        margin-left: 1.5em;
        color: #333;
        font-weight: 600;
    }
    /* ------------  Advanced Search store -------------- */
    .advancedSearchStoreCityClass, .advancedSearchStoreStoreClass {
        margin: .5em 0;
    }
    /* --------  New and Edit store form page ---------- */
    .formStoreItemCatInputWrapClass > div{
        flex-wrap: wrap;
    }
    .formStoreItemCatInputWrapClass > div > label{
        width:94%; 
    }
    #store_storePaymentMethods{
        font-size: .9rem;
    }
    /* - Viennese - */
    .newFieldClass,
    .formProductClass{
        flex-direction: column;
        gap:0;
    }
    /* -------------------  Show store ----------------- */
    .mainClass.showStoreMainClass {
        padding: 1.5em 2em;
    }
    .showStoreClosedDayClass,
    .showStoreDayClass .showStoreItemLabelClass {
        min-width: 6em;
        padding: .3em .8em .3em 0;
    }
    .showStoreAddressClass .showStoreItemContentClass{
        white-space: wrap;
    }
    .showStoreSpecialityItemClass {
        flex-direction: column;
    }
    .showStoreAddressClass .showStoreItemLabelClass,
    .showStoreContactWrapClass .showStoreItemLabelClass,
    .showStoreCoordinatesWrapClass .showStoreItemLabelClass,
    .showStoreCategoryWrapClass .showStoreItemLabelClass,
    .showStoreTimetableWrapClass .showStoreItemLabelClass{
        width: auto;
    }
    .showStoreItemLabelClass {
        margin-right: 1em;
    }
    .showStoreItemPercentClass {
        top: -.1em;
    }
    .showStoreItemClass {
        flex-wrap: nowrap;
    }
    .showStoreKindItemLabelWrapClass{
        margin-left: 0;
    }
    .showStoreItemNewLabelClass {
        font-size: .8rem;
        font-weight: 800;
        padding: 1em .5em;
    }
    .showStoreCategoryClass .showStoreItemClass,
    .showStoreSundayMondayClass .showStoreItemClass,
    .showStoreKindClass .showStoreItemClass,
    .showStoreChocoMakerClass .showStoreItemClass,
    .showStoreBreadnViennesClass .showStoreItemClass,
    .showStoreBioClass .showStoreItemClass,
    .showStoreVeganClass .showStoreItemClass,
    .showStoreSaltyClass .showStoreItemClass,
    .showStoreGroceryClass .showStoreItemClass,
    .showStoreIceClass .showStoreItemClass,
    .showStoreDrinksClass .showStoreItemClass,
    .showStoreSpecialitiesClass .showStoreItemClass,
    .showStoreLocalProductsClass .showStoreItemClass,
    .showStoreServiceClass .showStoreItemClass,
    .showStoreSpecialitiesSub2Class .showStoreItemClass {
        width:100%;
        position: relative;
    }
    .showStoreSpecialitiesSub2Class {
        flex-direction: column;
    }
    .showStorePaymentMethodsClass .showStoreItemContentClass {
        max-height: 100%;
    }
    .showSpecialityNameNameClass {
        white-space: wrap;
    }
    .showStoreSpecialityItemWrapClass{
        flex-direction: column;
    }
    .showSpecialityNameItemClass {
        width: 100%;
        text-align: center;
    }
    .showSpecialityNameItemWrapClass {
        margin-bottom: 1em;
    }
    .showStoreSpecialityItemWrapClass .showProductModalLinkClass {
        order: 2;
        margin-left: auto;
    }
    .showStoreSpecialityItemWrapClass .showStoreItemLabelClass {
        margin-bottom: 1em;
    }
    /* -------------------- Advertisement ------------------ */
    .homeSlideshowWrapClass{
        margin-top: 1.5em;
    }
    .slideShowBodyClass {
        font-size: .9rem;
        padding: 1.5em;
        line-height: 1.4;
    }
    button.slideShowDotClass{
        width: 1.35em;
        height: 1.35em;
    }
}
@media screen and  (min-width : 769px) and (max-width : 960px) {
    /* ------------------ Main Margin ----------------- */
    .mainClass{
        margin: 1em 2em;
        padding: 1em .6em;
    }
    .topbarClass{
        padding: 0 2.6em;
    }
    .brandAndToggleClass{
        padding: 0 2.6em;
    }
    .mainMenuWrapClass {
        padding: .1em 2.6em;
    }
    .linkadmin1ProfileWrapClass {
        margin: 0;
    }
    /* .linkProfileWrapClass, */
    .linkadmin2ProfileWrapClass {
        margin: 0;
    }
    /* ------------------ Profile -------------------- */
    .customerProfileFirstFieldsClass{
        display: flex;
        flex-direction: column;
    }
    .professionalProfileImageClass{
        order: 2;
    }
    .professionalProfileMenuClass{
        order: 1;
    }
    /* -----------------  Home store ----------------- */
    .homeStoreFilterSortClass{
        flex-direction: row;
        padding: 1.5em 1.5em 1.1em 1.5em;
    }
    .homeStoreSortBtnDisplayClass {
        margin-bottom: .4em;
        width: 50%;
    }
    .homeStoreNameClass{
        width: unset;
        margin-bottom: 1em;
    }
    .homeStoreNameClass .homeStoreNameLinkClass {
        max-width: 100%;
        display: initial;
    }
    .homeStoreDistanceDisplayClass{
        text-align: left;
    }
    .homeStoreLegendSortClass{
        width: 50%;
    }
    .homeStoreFilterSortClass > :nth-child(1){
        padding: 0em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(2){
        padding:0 .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(3){
        padding:.2em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(4){
        padding:.2em 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(5){
        padding:.2em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(6){
        padding:.2em 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(7){
        padding:.2em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(8){
        padding:.2em 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(9){
        padding:.2em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(10){
        padding:.2em 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(11){
        padding:.2em .2em 0 0;
    }
    .homeStoreFilterSortClass > :nth-child(12){
        padding:.2em 0 0 .2em;
    }
    .homeStoreMoreInfoLinkClass{
        display: block;
    }
    .homeStoreLegendSortClass:hover .homeStoreLegendLabelClass{
        max-width: calc(100vw - 1em);
        left: 50%;
        transform: translateX(-100%);
        white-space: wrap;
        text-overflow: unset;
        overflow: visible;
        z-index: 20;
        background-color: #fff;
        padding: .4em;
        border-radius: 20px;
        box-shadow: 2px 2px 6px #333;
        position: absolute;
        margin-left: 1.5em;
        color: #333;
        font-weight: 600;
    }
    /* ------------  Advanced Search store -------------- */
    .advancedSearchStoreCityClass, .advancedSearchStoreStoreClass {
        margin: .5em 0;
    }
    /* --------  New and Edit store form page ---------- */
    .formStoreItemCatInputWrapClass > div{
        flex-wrap: nowrap;
    }
    .formStoreItemCatInputWrapClass > div > label{
        width:20%;
    }
    /* - Viennese - */
    .newFieldClass,
    .formProductClass{
        flex-direction: column;
        gap:0;
    }
    /* -------------------  Show store ----------------- */
    .mainClass.showStoreMainClass {
        padding: 1.5em 3em;
    }
    .showStoreClosedDayClass,
    .showStoreDayClass .showStoreItemLabelClass {
        min-width: 6em;
        padding: .3em 1em .3em 0;
        width: 50%;
    }
    .showStoreCategoryClass .showStoreItemClass,
    .showStoreSundayMondayClass .showStoreItemClass,
    .showStoreKindClass .showStoreItemClass,
    .showStoreChocoMakerClass .showStoreItemClass,
    .showStoreBreadnViennesClass .showStoreItemClass,
    .showStoreBioClass .showStoreItemClass,
    .showStoreVeganClass .showStoreItemClass,
    .showStoreSaltyClass .showStoreItemClass,
    .showStoreGroceryClass .showStoreItemClass,
    .showStoreIceClass .showStoreItemClass,
    .showStoreDrinksClass .showStoreItemClass,
    .showStoreSpecialitiesClass .showStoreItemClass,
    .showStoreLocalProductsClass .showStoreItemClass,
    .showStoreServiceClass .showStoreItemClass,
    .showStoreSpecialitiesSub2Class .showStoreItemClass {
        width:100%;
        position: relative;
    }
    .showStoreSpecialitiesSub2Class {
        flex-direction: column;
    }
    .showStoreItemClass {
        flex-wrap: nowrap;
    }
    .showStoreCategoryClass .showStoreItemLabelClass,
    .showStoreSundayMondayClass .showStoreItemLabelClass,
    .showStoreKindClass .showStoreItemLabelClass,
    .showStoreChocoMakerClass .showStoreItemLabelClass,
    .showStoreBreadnViennesClass .showStoreItemLabelClass,
    .showStoreBioClass .showStoreItemLabelClass,
    .showStoreVeganClass .showStoreItemLabelClass,
    .showStoreSaltyClass .showStoreItemLabelClass,
    .showStoreGroceryClass .showStoreItemLabelClass,
    .showStoreIceClass .showStoreItemLabelClass,
    .showStoreDrinksClass .showStoreItemLabelClass,
    .showStoreSpecialitiesClass .showStoreItemLabelClass,
    .showStoreLocalProductsClass .showStoreItemLabelClass,
    .showStoreServiceClass .showStoreItemLabelClass {
        /* min-width:60%;
        width: 100%; */
        margin-right: auto;
    }
    .showStoreSpecialityItemWrapClass{
        flex-direction: row;
    }
    /* -------------------- Advertisement ------------------ */
    .homeSlideshowWrapClass{
        margin-top: 2em;
    }
    .slideShowBodyClass {
        font-size: 1.1rem;
        padding: 1.5em 3.5em;
        line-height: 1.6;
    }
    button.slideShowDotClass{
        width: 1.5em;
        height: 1.5em;
    }
}
@media screen and  (min-width : 961px) and (max-width : 1024px) {
    /* ------------------ Main Margin ----------------- */
    .mainClass{
        margin: 1em 2em;
        padding: 1.5em 1em;
    }
    .topbarClass{
        padding: 0 3em 0 0;
    }
    .brandAndToggleClass{
        padding: 0 0 0 3em;
    }
    .mainMenuWrapClass {
        padding: .1em 3em;
    }
    .linkadmin1ProfileWrapClass {
        margin: 0 0 0 3em;
    }
    /* .linkProfileWrapClass, */
    .linkadmin2ProfileWrapClass {
        margin: 0 3em 0 0;
    }
    /* -----------------  Home store ----------------- */
    .mainClass.showStoreMainClass {
        padding: 1.5em 4em;
    }
    .homeStoreFilterSortClass{
        flex-direction: row;
        padding: 1.5em 1.5em 1.1em 1.5em;
    }
    .homeStoreSortBtnDisplayClass {
        margin-bottom: .4em;
        width: 50%;
    }
    .homeStoreLegendSortClass{
        width: 25%;
    }
    .homeStoreDisplayWrapClass {
        padding: 1em;
    }
    .homeStoreOpenStoreIconClass,
    .homeStoreSoonOpenStoreIconClass,
    .homeStoreSoonCloseStoreIconClass,
    .homeStoreCloseStoreIconClass,
    .homeStoreOpenStoreUnknownIconClass,
    .homeStoreSundayOpenIconClass,
    .homeStoreSundayCloseIconClass,
    .homeStoreCatBakeryIconClass,
    .homeStoreCatBakPatIconClass,
    .homeStoreCatBakPatTeaIconClass,
    .homeStoreCatPatisserieIconClass,
    .homeStoreCatPatTeaIconClass,
    .homeStoreCatPatBreIconClass,
    .homeStoreCatPatTeaBreIconClass,
    .homeStoreCatTeaIconClass,
    .homeStoreCatTeaBreIconClass,
    .homeStoreCatBreadShopIconClass,
    .homeStoreCategoryNoIconClass,
    .homeStoreGroceryProductsIconClass,
    .homeStoreGroceryProductsNoIconClass,
    .homeStoreSaltedProductsIconClass,
    .homeStoreSaltedProductsNoIconClass,
    .homeStoreKindArtisanIconClass,
    .homeStoreKindExclusiveArtisanIconClass,
    .homeStoreKindBackingTermIconClass,
    .homeStoreKindNoIconClass {
        height: 30px;
        width: 30px;
    }
    .homeStoreFilterSortClass > :nth-child(1){
        padding: 0em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(2){
        padding:0 .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(3){
        padding:.2em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(4){
        padding:.2em 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(5){
        padding:.2em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(6){
        padding:.2em 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(7){
        padding:.2em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(8){
        padding:.2em 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(9){
        padding:.2em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(10){
        padding:.2em 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(11){
        padding:.2em .2em 0 0;
    }
    .homeStoreFilterSortClass > :nth-child(12){
        padding:.2em 0 0 .2em;
    }
    .homeStoreMoreInfoLinkClass{
        display: block;
    }
    .homeStoreLegendSortClass:hover .homeStoreLegendLabelClass{
        white-space: nowrap;
        text-overflow: unset;
        overflow: visible;
        z-index: 20;
        background-color: #fff;
        padding: .4em;
        border-radius: 20px;
        box-shadow: 2px 2px 6px #333;
        position: absolute;
        margin-left: 1.5em;
        color: #333;
        font-weight: 600;
    }
    /* --------  New and Edit store form page ---------- */
    .formStoreItemCatInputWrapClass > div{
        flex-wrap: nowrap;
    }
    .formStoreItemCatInputWrapClass > div > label{
        width:20%;   
    }
    /* - Viennese - */
    .newFieldClass,
    .formProductClass{
        flex-direction: column;
        gap:0;
    }
    /* -------------------  Show store ----------------- */
    .showStoreCategoryClass .showStoreItemClass,
    .showStoreSundayMondayClass .showStoreItemClass,
    .showStoreKindClass .showStoreItemClass,
    .showStoreChocoMakerClass .showStoreItemClass,
    .showStoreBreadnViennesClass .showStoreItemClass,
    .showStoreBioClass .showStoreItemClass,
    .showStoreVeganClass .showStoreItemClass,
    .showStoreSaltyClass .showStoreItemClass,
    .showStoreGroceryClass .showStoreItemClass,
    .showStoreIceClass .showStoreItemClass,
    .showStoreDrinksClass .showStoreItemClass,
    .showStoreSpecialitiesClass .showStoreItemClass,
    .showStoreLocalProductsClass .showStoreItemClass,
    .showStoreServiceClass .showStoreItemClass,
    .showStoreSpecialitiesSub2Class .showStoreItemClass {
        width:100%;
        position: relative;
    }
    .showStoreSpecialitiesSub2Class {
        flex-direction: column;
    }
    .showStoreItemClass {
        flex-wrap: nowrap;
    }
    .showStoreCategoryClass .showStoreItemLabelClass,
    .showStoreSundayMondayClass .showStoreItemLabelClass,
    .showStoreKindClass .showStoreItemLabelClass,
    .showStoreChocoMakerClass .showStoreItemLabelClass,
    .showStoreBreadnViennesClass .showStoreItemLabelClass,
    .showStoreBioClass .showStoreItemLabelClass,
    .showStoreVeganClass .showStoreItemLabelClass,
    .showStoreSaltyClass .showStoreItemLabelClass,
    .showStoreGroceryClass .showStoreItemLabelClass,
    .showStoreIceClass .showStoreItemLabelClass,
    .showStoreDrinksClass .showStoreItemLabelClass,
    .showStoreSpecialitiesClass .showStoreItemLabelClass,
    .showStoreLocalProductsClass .showStoreItemLabelClass,
    .showStoreServiceClass .showStoreItemLabelClass {
        margin-right: auto;
    }
    .showStoreSpecialityItemWrapClass{
        flex-direction: row;
    }
    /* -------------------- Advertisement ------------------ */
    .homeSlideshowWrapClass{
        margin-top: 2em;
    }
    .slideShowBodyClass {
        font-size: 1.6rem;
        padding: 1.5em 3.5em;
        line-height: 1.6;
    }
    button.slideShowDotClass{
        width: 1.5em;
        height: 1.5em;
    }
}
@media screen and  (min-width : 1025px) and (max-width : 1280px) {
    /* ------------------ Main Margin ----------------- */
    .mainClass{
        margin: 1em 4em;
        padding: 1.5em 1em;
    }
    .topbarClass{
        padding: 0 5em 0 0;
    }
    .brandAndToggleClass{
        padding: 0 0 0 5em;
    }
    .mainMenuWrapClass {
        padding: .1em 5em;
    }
    .linkadmin1ProfileWrapClass {
        margin: 0 0 0 5em;
    }
    /* .linkProfileWrapClass, */
    .linkadmin2ProfileWrapClass {
        margin: 0 5em 0 0;
    }
    /* -----------------  Home store ----------------- */
    .mainClass.showStoreMainClass {
        padding: 1.5em 6em;
    }
    .homeStoreFilterSortClass{
        flex-direction: row;
        padding: 1.5em 1.5em 1.1em 1.5em;
    }
    .homeStoreSortBtnDisplayClass {
        margin-bottom: .2em;
        width: 25%;
    }
    .homeStoreLegendSortClass{
        width: 25%;
    }
    .homeStoreDisplayWrapClass {
        padding: 1em;
    }
    .homeStoreOpenStoreIconClass,
    .homeStoreSoonOpenStoreIconClass,
    .homeStoreSoonCloseStoreIconClass,
    .homeStoreCloseStoreIconClass,
    .homeStoreOpenStoreUnknownIconClass,
    .homeStoreSundayOpenIconClass,
    .homeStoreSundayCloseIconClass,
    .homeStoreCatBakeryIconClass,
    .homeStoreCatBakPatIconClass,
    .homeStoreCatBakPatTeaIconClass,
    .homeStoreCatPatisserieIconClass,
    .homeStoreCatPatTeaIconClass,
    .homeStoreCatPatBreIconClass,
    .homeStoreCatPatTeaBreIconClass,
    .homeStoreCatTeaIconClass,
    .homeStoreCatTeaBreIconClass,
    .homeStoreCatBreadShopIconClass,
    .homeStoreCategoryNoIconClass,
    .homeStoreGroceryProductsIconClass,
    .homeStoreGroceryProductsNoIconClass,
    .homeStoreSaltedProductsIconClass,
    .homeStoreSaltedProductsNoIconClass,
    .homeStoreKindArtisanIconClass,
    .homeStoreKindExclusiveArtisanIconClass,
    .homeStoreKindBackingTermIconClass,
    .homeStoreKindNoIconClass {
        height: 40px;
        width: 40px;
    }
    .homeStoreFilterSortClass > :nth-child(1){
        padding: 0em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(2){
        padding:0 .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(3){
        padding:0 .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(4){
        padding:0 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(5){
        padding:.2em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(6){
        padding:.2em .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(7){
        padding:.2em .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(8){
        padding:.2em 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(9){
        padding:.2em .2em 0 .2em;
    }
    .homeStoreFilterSortClass > :nth-child(10){
        padding:.2em .2em 0 .2em;
    }
    .homeStoreFilterSortClass > :nth-child(11){
        padding:.2em .2em 0 .2em;
    }
    .homeStoreFilterSortClass > :nth-child(12){
        padding:.2em 0 0 .2em;
    }
    .homeStoreMoreInfoLinkClass{
        display: block;
    }
    .homeStoreLegendSortClass:hover .homeStoreLegendLabelClass{
        white-space: nowrap;
        text-overflow: unset;
        overflow: visible;
        z-index: 20;
        background-color: #fff;
        padding: .4em;
        border-radius: 20px;
        box-shadow: 2px 2px 6px #333;
        position: absolute;
        margin-left: 1.5em;
        color: #333;
        font-weight: 600;
    }
    /* --------  New and Edit store form page ---------- */
    .formStoreItemCatInputWrapClass > div{
        flex-wrap: nowrap;
    }
    .formStoreItemCatInputWrapClass > div > label{
        width:20%;
    }
    /* - Viennese - */
    .newFieldClass,
    .formProductClass{
        flex-direction: row;
        gap:1.5em;
    }
    /* -------------------  Show store ----------------- */
    .showStoreCategoryClass .showStoreItemClass,
    .showStoreSundayMondayClass .showStoreItemClass,
    .showStoreKindClass .showStoreItemClass,
    .showStoreChocoMakerClass .showStoreItemClass,
    .showStoreBreadnViennesClass .showStoreItemClass,
    .showStoreBioClass .showStoreItemClass,
    .showStoreVeganClass .showStoreItemClass,
    .showStoreSaltyClass .showStoreItemClass,
    .showStoreGroceryClass .showStoreItemClass,
    .showStoreIceClass .showStoreItemClass,
    .showStoreDrinksClass .showStoreItemClass,
    .showStoreSpecialitiesClass .showStoreItemClass,
    .showStoreLocalProductsClass .showStoreItemClass,
    .showStoreServiceClass .showStoreItemClass,
    .showStoreSpecialitiesSub2Class .showStoreItemClass {
        width:100%;
        position: relative;
    }
    .showStoreSpecialitiesSub2Class {
        flex-direction: column;
    }
    .showStoreCategoryClass .showStoreItemLabelClass,
    .showStoreSundayMondayClass .showStoreItemLabelClass,
    .showStoreKindClass .showStoreItemLabelClass,
    .showStoreChocoMakerClass .showStoreItemLabelClass,
    .showStoreBreadnViennesClass .showStoreItemLabelClass,
    .showStoreBioClass .showStoreItemLabelClass,
    .showStoreVeganClass .showStoreItemLabelClass, 
    .showStoreSaltyClass .showStoreItemLabelClass, 
    .showStoreGroceryClass .showStoreItemLabelClass, 
    .showStoreIceClass .showStoreItemLabelClass, 
    .showStoreDrinksClass .showStoreItemLabelClass, 
    .showStoreSpecialitiesClass .showStoreItemLabelClass, 
    .showStoreLocalProductsClass .showStoreItemLabelClass, 
    .showStoreServiceClass .showStoreItemLabelClass {
        margin-right: auto;
    }
    .showStoreItemClass {
        flex-wrap: nowrap;
    }
    .showStoreSpecialityItemWrapClass{
        flex-direction: row;
    }
    /* -------------------- Advertisement ------------------ */
    .homeSlideshowWrapClass{
        margin-top: 2em;
    }
    .slideShowBodyClass {
        font-size: 1.6rem;
        padding: 1.5em 3.5em;
        line-height: 1.6;
    }
    button.slideShowDotClass{
        width: 1.5em;
        height: 1.5em;
    }
}
@media screen and  (min-width : 1281px) and (max-width : 1480px){
    /* ------------------ Main Margin ----------------- */
    .mainClass{
        margin: 1em 8em;
        padding: 1.5em 1em;
    }
    .topbarClass{
        padding: 0 9em 0 0;
    }
    .brandAndToggleClass{
        padding: 0 0 0 9em;
    }
    .mainMenuWrapClass {
        padding: .1em 9em;
    }
    .linkadmin1ProfileWrapClass {
        margin: 0 0 0 9em;
    }
    /* .linkProfileWrapClass, */
    .linkadmin2ProfileWrapClass {
        margin: 0 9em 0 0;
    }
    /* -----------------  Home store ----------------- */
    .mainClass.showStoreMainClass {
        padding: 1.5em 8em;
    }
    .homeStoreFilterSortClass{
        flex-direction: row;
        padding: 1.5em 1.5em 1.1em 1.5em;
    }
    .homeStoreSortBtnDisplayClass {
        margin-bottom: .2em;
        width: 25%;
    }
    .homeStoreLegendSortClass{
        width: 20%;
    }
    .homeStoreDisplayWrapClass {
        padding: 1em;
    }
    .homeStoreOpenStoreIconClass,
    .homeStoreSoonOpenStoreIconClass,
    .homeStoreSoonCloseStoreIconClass,
    .homeStoreCloseStoreIconClass,
    .homeStoreOpenStoreUnknownIconClass,
    .homeStoreSundayOpenIconClass,
    .homeStoreSundayCloseIconClass,
    .homeStoreCatBakeryIconClass,
    .homeStoreCatBakPatIconClass,
    .homeStoreCatBakPatTeaIconClass,
    .homeStoreCatPatisserieIconClass,
    .homeStoreCatPatTeaIconClass,
    .homeStoreCatPatBreIconClass,
    .homeStoreCatPatTeaBreIconClass,
    .homeStoreCatTeaIconClass,
    .homeStoreCatTeaBreIconClass,
    .homeStoreCatBreadShopIconClass,
    .homeStoreCategoryNoIconClass,
    .homeStoreGroceryProductsIconClass,
    .homeStoreGroceryProductsNoIconClass,
    .homeStoreSaltedProductsIconClass,
    .homeStoreSaltedProductsNoIconClass,
    .homeStoreKindArtisanIconClass,
    .homeStoreKindExclusiveArtisanIconClass,
    .homeStoreKindBackingTermIconClass,
    .homeStoreKindNoIconClass {
        height: 50px;
        width: 50px;
    }
    .homeStoreFilterSortClass > :nth-child(1){
        padding: 0em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(2){
        padding:0 .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(3){
        padding:0 .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(4){
        padding:0 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(5){
        padding:.2em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(6){
        padding:.2em .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(7){
        padding:.2em .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(8){
        padding:.2em 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(9){
        padding:.2em .2em 0 .2em;
    }
    .homeStoreFilterSortClass > :nth-child(10){
        padding:.2em .2em 0 .2em;
    }
    .homeStoreFilterSortClass > :nth-child(11){
        padding:.2em .2em 0 .2em;
    }
    .homeStoreFilterSortClass > :nth-child(12){
        padding:.2em 0 0 .2em;
    }
    .homeStoreMoreInfoLinkClass{
        display: unset;
    }
    .homeStoreLegendSortClass:hover .homeStoreLegendLabelClass{
        white-space: nowrap;
        text-overflow: unset;
        overflow: visible;
        z-index: 20;
        background-color: #fff;
        padding: .4em;
        border-radius: 20px;
        box-shadow: 2px 2px 6px #333;
        position: absolute;
        margin-left: 1.5em;
        color: #333;
        font-weight: 600;
    }
    /* --------  New and Edit store form page ---------- */
    .formStoreItemCatInputWrapClass > div{
        flex-wrap: nowrap;
    }
    .formStoreItemCatInputWrapClass > div > label{
        width:20%;  
    }
    /* - Viennese - */
    .newFieldClass,
    .formProductClass{
        flex-direction: row;
        gap:1.5em;
    }
    /* -------------------  Show store ----------------- */
    .showStoreCategoryClass .showStoreItemClass,
    .showStoreSundayMondayClass .showStoreItemClass,
    .showStoreKindClass .showStoreItemClass,
    .showStoreChocoMakerClass .showStoreItemClass,
    .showStoreBreadnViennesClass .showStoreItemClass,
    .showStoreBioClass .showStoreItemClass,
    .showStoreVeganClass .showStoreItemClass,
    .showStoreSaltyClass .showStoreItemClass,
    .showStoreGroceryClass .showStoreItemClass,
    .showStoreIceClass .showStoreItemClass,
    .showStoreDrinksClass .showStoreItemClass,
    .showStoreSpecialitiesClass .showStoreItemClass,
    .showStoreLocalProductsClass .showStoreItemClass,
    .showStoreServiceClass .showStoreItemClass,
    .showStoreSpecialitiesSub2Class .showStoreItemClass  {
        width:100%;
        position: relative;
    }
    .showStoreSpecialitiesSub2Class {
        flex-direction: column;
    }
    .showStoreCategoryClass .showStoreItemLabelClass,
    .showStoreSundayMondayClass .showStoreItemLabelClass,
    .showStoreKindClass .showStoreItemLabelClass,
    .showStoreChocoMakerClass .showStoreItemLabelClass,
    .showStoreBreadnViennesClass .showStoreItemLabelClass,
    .showStoreBioClass .showStoreItemLabelClass,
    .showStoreVeganClass .showStoreItemLabelClass, 
    .showStoreSaltyClass .showStoreItemLabelClass, 
    .showStoreGroceryClass .showStoreItemLabelClass, 
    .showStoreIceClass .showStoreItemLabelClass, 
    .showStoreDrinksClass .showStoreItemLabelClass, 
    .showStoreSpecialitiesClass .showStoreItemLabelClass, 
    .showStoreLocalProductsClass .showStoreItemLabelClass, 
    .showStoreServiceClass .showStoreItemLabelClass {
        margin-right: auto;
    }
    .showStoreItemClass {
        flex-wrap: nowrap;
    }
    .showStoreSpecialityItemWrapClass{
        flex-direction: row;
    }
    /* -------------------- Advertisement ------------------ */
    .homeSlideshowWrapClass{
        margin-top: 2em;
    }
    .slideShowBodyClass {
        font-size: 1.8rem;
        padding: 1.5em 3.5em;
        line-height: 1.6;
    }
    button.slideShowDotClass{
        width: 1.5em;
        height: 1.5em;
    }
}
@media screen and  (min-width : 1481px){
    /* ------------------ Main Margin ----------------- */
    .mainClass{
        margin: 1em 8em;
        padding: 1.5em 1em;
    }
    .topbarClass{
        padding: 0 9em 0 0;
    }
    .brandAndToggleClass{
        padding: 0 0 0 9em;
    }
    .mainMenuWrapClass {
        padding: .1em 9em;
    }
    .linkadmin1ProfileWrapClass {
        margin: 0 0 0 9em;
    }
    /* .linkProfileWrapClass, */
    .linkadmin2ProfileWrapClass {
        margin: 0 9em 0 0;
    }
    /* -----------------  Home store ----------------- */
    .mainClass.showStoreMainClass {
        padding: 1.5em 8em;
    }
    .homeStoreFilterSortClass{
        flex-direction: row;
        padding: 1.5em 1.5em 1.1em 1.5em;
    }
    .homeStoreSortBtnDisplayClass{
        margin-bottom: .2em;
        width: 25%;
    }
    .homeStoreLegendSortClass{
        width: 20%;
    }
    .homeStoreDisplayWrapClass {
        padding: 1em;
    }
    .homeStoreOpenStoreIconClass,
    .homeStoreSoonOpenStoreIconClass,
    .homeStoreSoonCloseStoreIconClass,
    .homeStoreCloseStoreIconClass,
    .homeStoreOpenStoreUnknownIconClass,
    .homeStoreSundayOpenIconClass,
    .homeStoreSundayCloseIconClass,
    .homeStoreCatBakeryIconClass,
    .homeStoreCatBakPatIconClass,
    .homeStoreCatBakPatTeaIconClass,
    .homeStoreCatPatisserieIconClass,
    .homeStoreCatPatTeaIconClass,
    .homeStoreCatPatBreIconClass,
    .homeStoreCatPatTeaBreIconClass,
    .homeStoreCatTeaIconClass,
    .homeStoreCatTeaBreIconClass,
    .homeStoreCatBreadShopIconClass,
    .homeStoreCategoryNoIconClass,
    .homeStoreGroceryProductsIconClass,
    .homeStoreGroceryProductsNoIconClass,
    .homeStoreSaltedProductsIconClass,
    .homeStoreSaltedProductsNoIconClass,
    .homeStoreKindArtisanIconClass,
    .homeStoreKindExclusiveArtisanIconClass,
    .homeStoreKindBackingTermIconClass,
    .homeStoreKindNoIconClass {
        height: 50px;
        width: 50px;
    }
    .homeStoreFilterSortClass > :nth-child(1){
        padding: 0em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(2){
        padding:0 .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(3){
        padding:0 .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(4){
        padding:0 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(5){
        padding:.2em .2em .2em 0;
    }
    .homeStoreFilterSortClass > :nth-child(6){
        padding:.2em .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(7){
        padding:.2em .2em .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(8){
        padding:.2em 0 .2em .2em;
    }
    .homeStoreFilterSortClass > :nth-child(9){
        padding:.2em .2em 0 .2em;
    }
    .homeStoreFilterSortClass > :nth-child(10){
        padding:.2em .2em 0 .2em;
    }
    .homeStoreFilterSortClass > :nth-child(11){
        padding:.2em .2em 0 .2em;
    }
    .homeStoreFilterSortClass > :nth-child(12){
        padding:.2em 0 0 .2em;
    }
    .homeStoreMoreInfoLinkClass{
        display: unset;
    }
    .homeStoreLegendSortClass:hover .homeStoreLegendLabelClass{
        white-space: nowrap;
        text-overflow: unset;
        overflow: visible;
        z-index: 20;
        background-color: #fff;
        padding: .4em;
        border-radius: 20px;
        box-shadow: 2px 2px 6px #333;
        position: absolute;
        margin-left: 1.5em;
        color: #333;
        font-weight: 600;
    }
    /* --------  New and Edit store form page ---------- */
    .formStoreItemCatInputWrapClass > div{
        flex-wrap: nowrap;
    }
    .formStoreItemCatInputWrapClass > div > label{
        width:20%;
    }
    /* - Viennese - */
    .newFieldClass,
    .formProductClass{
        flex-direction: row;
        gap:1.5em;
    }
    /* -------------------  Show store ----------------- */
    .showStoreCategoryClass .showStoreItemClass,
    .showStoreSundayMondayClass .showStoreItemClass,
    .showStoreBreadnViennesClass .showStoreItemClass,
    .showStoreBioClass .showStoreItemClass,
    .showStoreVeganClass .showStoreItemClass,
    .showStoreSaltyClass .showStoreItemClass,
    .showStoreGroceryClass .showStoreItemClass,
    .showStoreIceClass .showStoreItemClass,
    .showStoreDrinksClass .showStoreItemClass,
    .showStoreSpecialitiesClass .showStoreItemClass,
    .showStoreServiceClass .showStoreItemClass,
    .showStoreSpecialitiesSub2Class .showStoreItemClass{
        width:48%;
        position: relative;
    }
    .showStoreSpecialitiesSub2Class {
        flex-direction: row;
    }
    .showStoreItemClass {
        flex-wrap: nowrap;
    }
    .showStoreCategoryClass .showStoreItemLabelClass,
    .showStoreSundayMondayClass .showStoreItemLabelClass,
    .showStoreKindClass .showStoreItemLabelClass,
    .showStoreChocoMakerClass .showStoreItemLabelClass,
    .showStoreBreadnViennesClass .showStoreItemLabelClass,
    .showStoreBioClass .showStoreItemLabelClass,
    .showStoreVeganClass .showStoreItemLabelClass, 
    .showStoreSaltyClass .showStoreItemLabelClass, 
    .showStoreGroceryClass .showStoreItemLabelClass, 
    .showStoreIceClass .showStoreItemLabelClass, 
    .showStoreDrinksClass .showStoreItemLabelClass, 
    .showStoreSpecialitiesClass .showStoreItemLabelClass, 
    .showStoreLocalProductsClass .showStoreItemLabelClass, 
    .showStoreServiceClass .showStoreItemLabelClass {
        margin-right: auto;
    }
    .showStoreSpecialityItemWrapClass{
        flex-direction: row;
    }
    /* -------------------- Advertisement ------------------ */
    .homeSlideshowWrapClass{
        margin-top: 2em;
    }
    .slideShowBodyClass {
        font-size: 1.8rem;
        padding: 2.5em 3.5em;
        line-height: 1.6;
    }
    button.slideShowDotClass{
        width: 1.5em;
        height: 1.5em;
    }
}
@media screen and  (min-width : 1481px) and (max-width : 1580px){
    /* -------------------  Show store ----------------- */
    .showStoreCategoryClass .showStoreItemLabelClass,
    .showStoreSundayMondayClass .showStoreItemLabelClass,
    .showStoreKindClass .showStoreItemLabelClass,
    .showStoreChocoMakerClass .showStoreItemLabelClass,
    .showStoreBreadnViennesClass .showStoreItemLabelClass,
    .showStoreBioClass .showStoreItemLabelClass,
    .showStoreVeganClass .showStoreItemLabelClass, 
    .showStoreSaltyClass .showStoreItemLabelClass, 
    .showStoreGroceryClass .showStoreItemLabelClass, 
    .showStoreIceClass .showStoreItemLabelClass, 
    .showStoreDrinksClass .showStoreItemLabelClass, 
    .showStoreSpecialitiesClass .showStoreItemLabelClass, 
    .showStoreLocalProductsClass .showStoreItemLabelClass, 
    .showStoreServiceClass .showStoreItemLabelClass {
        margin-right: auto;
    }
    .showStoreSpecialityItemWrapClass{
        flex-direction: row;
    }
}
@media screen and  (min-width : 1581px){
    /* -------------------  Show store ----------------- */
    .showStoreCategoryClass .showStoreItemLabelClass,
    .showStoreSundayMondayClass .showStoreItemLabelClass,
    .showStoreKindClass .showStoreItemLabelClass,
    .showStoreChocoMakerClass .showStoreItemLabelClass,
    .showStoreBreadnViennesClass .showStoreItemLabelClass,
    .showStoreBioClass .showStoreItemLabelClass,
    .showStoreVeganClass .showStoreItemLabelClass, 
    .showStoreSaltyClass .showStoreItemLabelClass, 
    .showStoreGroceryClass .showStoreItemLabelClass, 
    .showStoreIceClass .showStoreItemLabelClass, 
    .showStoreDrinksClass .showStoreItemLabelClass, 
    .showStoreSpecialitiesClass .showStoreItemLabelClass, 
    .showStoreLocalProductsClass .showStoreItemLabelClass, 
    .showStoreServiceClass .showStoreItemLabelClass {
        margin-right: auto;
    }
    .showStoreSpecialityItemWrapClass{
        flex-direction: row;
    }
}
@media screen and  (min-width : 961px){
    /* ------------------- Commun item ---------------- */
    /* -------------- Show password ---------------- */
    .showPasswordWrapClass {
        top: 72%;
        transform: translateY(-28%);  
    }
    /* ---------------------- Button ------------------ */
    .registerFormFieldsClass .buttonClass,
    .loginFormFieldsClass .buttonClass{
        font-size:2rem;
    }
    /* -------------------- Header -------------------- */
	.header1Section{
		flex-wrap:nowrap;
	}
	#order1HeaderId{
		order:2;
        width: 120%;
	}
	#order2HeaderId{
		order:1;
	}
    /* --------------- User top bar ----------------*/
    .header0Section{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .linkadmin1ProfileWrapClass {
        display: flex;
        width: 70%;
    }
    .linkadmin2ProfileWrapClass {
        display: flex;
        width: 30%;
        justify-content: end;
    }
    .proAdminMenuClass,
    .cusAdminMenuClass{
        display: flex;
        width: 100%;
    }
    .proAdminToggleMenuBtnWrapClass,
    .cusAdminToggleMenuBtnWrapClass{
        display: none;
    }
    /* -------------------- Top Bar -------------------- */
	.topbarClass{
		background-color: rgb(61, 61, 61, .6);
	}
	.brandAndToggleClass{
		background-color: rgb(61, 61, 61, .6);
	}
    .languageChangeClass{
        top:-.2em;
        margin-left:6.5em;
    }
    .languageChangeLabelClass{
        display: block;
    }
    .helloClass {
        margin-right: .5em;
        padding: .8em;
    }
    .helloClass {
        padding: .8em;
    }
    .linkLogoutClass {
        padding: .8em 0 .8em .5em;
    }
    .languageChangeWrapClass {
        width: 8em;
    }
    /* ---------------------- Navbar -------------------- */
    .brandNameWrapClass{
        display:flex;
        align-items:end;
    }
    .brandNameLinkClass {
        font-size:1.8em;
        font-weight: 800;
    }
    .brandClass{
        margin:.3em 0;
    }
    .brandlogoClass{
        width: 30px;
        height: 30px;
    }
	/* ------------------ Main Menu ------------------- */
	.mainMenuListClass{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}
	.mainMenuWrapClass{
		background-color: rgb(61, 61, 61, .6);
		position: relative;
		clip-path: none;
		transform:unset;
		transition:unset;
		clip-path:unset
	}
	.toggleIconWrapClass{
		display: none;
	}
	a.mainMenuItemLinkClass{
		color:rgba(187,187,187,1);
		transition: var(--transtion);
	}
	a.mainMenuItemLinkClass:hover,
	a.mainMenuItemLinkClass:focus{
		color:var(--text-link-light-hover);;
		transition: var(--transtion);
	}
	.headerClass {
		width: 100%;
	}
	.headerWrapClass{
		height: 10em;
		overflow: visible;
		position: relative;
	}
	.stickyMenuClass{
		position: fixed;
		width: 100%;
		top: 0;
		display: block;
		z-index: 500;
		background-color: rgb(61, 61, 61, 1);
	}
    /* ------------------- Register ------------------- */
    .registerFormTitleClass{
        font-size: 2rem;
        padding: 1em .4em 0 .4em;
    }
    .registerFormFieldsClass {
        padding: 2em;
    }
    /* --------------------- Login -------------------- */
    .loginFormTitleClass{
        font-size: 2rem;
        padding: 2em .4em 0 .4em;
    }
    .loginFormFieldsClass{
        padding: 2em;
    }
    /* ----------------- Reset Password --------------- */
    .resetPwdFormTitleClass{
        font-size: 2rem;
    }
    /* ---------------- Change Password --------------- */
    .pwdChangeItemClass{
        flex-direction: row;
        justify-content: space-between;
    }
    .pwdChangeItemClass > div{
        width:46%;
    }
    .pwdChangeButtonWrapClass .buttonClass{
        margin: 0;
        line-height: .9;
    }
    .pwdChangePwdClass{
        width: 46%;
    }
    .pwdChangeButtonWrapClass{
        width: 46%;
        margin: 3.5em 0 0 0;
    }
    .pwdChangeTitleClass{
        font-size: 2rem;
    }
    /* ------------------ Profile --------------------- */
    .professionalProfileFieldsWrapClass,
    .customerProfileFieldsWrapClass{
        padding: 2em 6em; 
    }
    .professionalProfileFieldsWrapClass,
    .customerProfileFieldsWrapClass{
        padding: 2em 6em; 
    }
    .professionalProfileImageClass,
    .customerProfileImageClass{
        width: 46%;
    }
    .professionalProfileItemClass,
    .customerProfileItemClass{
        width: 46%;
    }
    .professionalProfileFirstFieldsClass,
    .professionalProfileSecondFieldsClass,
    .customerProfileFirstFieldsClass,
    .customerProfileSecondFieldsClass{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .professionalProfileTitleClass,
    .customerProfileTitleClass{
        font-size: 2rem;
    }
    /* -------------- Profile update ------------------- */
    .profileUpdateFormWraplass{
        max-width: 100%;
        margin: 1em auto;
    }
    .profileUpdateFormFieldsClass {
        padding:2em 6em;
      }
    .profileUpdateFormFieldsClass form{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .profileUpdateFormItemClass.profileUpdateFormImageClass{
        width: 100%;
    }
    .currentImageWrapClass{
        display: flex;
        justify-content: space-between;
    }
    .currentImageClass {
        width: 46%;
    }
    .profileDeletePhotoWrapClass {
        width: 46%;
    }
    .profileDeletePhotoWrapClass {
        margin: 0;
    }
    .profileUpdateFormItemClass{
        width: 46%;
    }
    .profileUpdateFormButtonWrapClass{
        width: 46%;
        margin: 3.5em 0 0 0;
    }
    .profileUpdateFormButtonWrapClass .buttonClass{
        max-width: 100%;
        margin: 0;
    }
    .profileUpdateFormItemClass.idCityAutocomplete{
        display: none;
    }
    .profileUpdateFormTitleClass{
        font-size: 2rem;
    }
    /* --- Advertising --- */
    .homeStoreAdvertisingTitleClass{
        font-size: 2.3rem;
    }
    .homeStoreAdvertisingTextClass{
        line-height: 1.5;
        font-size: 1.7rem;
    }
    .homeStoreAdvertisingTextOfferClass{
        line-height: 1.8;
        font-size: 1.7rem;
    }
    .advert1TitleClass{
        font-size: 2.2rem;
        text-align: center;
        margin-bottom: 1.5rem;
    }
    /* -------------- Profile account delete ----------- */
    .accountDeleteLinkConfirmClass{
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
    }
    .accountDeleteLinkConfirmClass .deleteBtnClass{
        font-size: 1.5rem;
    }
    .accountDeleteLinkConfirmClass :nth-child(1){
        margin-right: .5em;
    }
    .accountDeleteLinkConfirmClass :nth-child(2){
        margin-left: .5em;
    }
    /* ---------  New and Edit store form page --------- */
    .referencingFormWrapClass form {
        padding: 1.5em 2.5em;
    }
    .formStoreAddresseClass .formStoreItemClass div{
        display: flex;
        flex-wrap: wrap;
    }
    .formStoreAddresseClass .formStoreItemClass label{
        white-space: nowrap;
    }
    .formStoreHouseNumberClass input{
        min-width: 5em;
    }
    .formStoreAddresseClass{
        display: flex;
        flex-wrap: wrap;
    }
    .formStoreHouseNumberClass{
        min-width: 5em;
        width: 30%;
    }
    .formStoreStreetNameClass{
        width: 70%;
        padding-left:2em;
    }
    .formStoreAddressDetailsClass{
        width: 100%;
    }
    .formStoreZipCodeClass{
        width: 30%;
    }
    .formStoreCityClass{
        width: 70%;
        padding-right: 2em;
    }
    .formStoreReferenceClass{
        display: flex;
        flex-wrap: wrap;
    }
    .formStoreReferenceClass .formStoreItemClass{
        width: 100%;
    }
    .formStoreReferenceClass .formStoreLatitudeClass,
    .formStoreReferenceClass .formStoreLongitudeClass{
        width: 50%;
    }
    .formStoreLongitudeClass{
        padding-left: 1em;
    }
    .formStoreLatitudeClass{
        padding-right: 1em;
    }
    .formStoreTimetableClass .formStoreItemClass{
        width: 100%;
    }
    .formStoreDayClass{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
    }
    .newStoreTitleClass{
        font-size: 2rem;
    }
    .formStoreTitleClass {
        font-size: 2rem;
    }
    .storeUpdatefileSelectorWrapClass{
        width: 50%;
    }
    .storeUpdateFormImageClass .currentImageClass {
        width: 50%;
        padding-right: 1em;
    }
    .storeDeleteImageWraperClass{
        padding-left: 1em;
        width: 50%;
    }
    .storeUpdateFormItemClass.storeUpdatefileSelectorWrapClass {
        padding-right: 1em;
    }
    .storeDeleteImageWrapClass {
        margin-top: 0em;
    }
    .formStoreBlockH2TitleClass{
        font-size: 1.5rem;
        border-bottom: 1px solid #aaa; 
        padding: .3em 0; 
        margin-bottom: 1em; 
    }
    .specialityEditAddFieldClass,
    .specialityAddFieldClass{
        flex-direction: row;
    }
    .specialityEditAddFieldClass > div,
    .specialityAddFieldClass input{
        width: 66%;
        height: 1.7em;
        margin: .2em 2% .2em 0;
    }
    .removeFieldBtnClass{
        width: 30%;
        margin: .2em 0 .2em 2%;
    }
    /* .formStoreButtonWrapClass{
        padding: 0 2.5em 1em;
    } */
    /* ------------------- Show store ------------------ */
    .showStoreTitleClass{
        font-size: 2rem;
    }
    .showStoreItemNameClass{
        font-size: 2.4rem;
    }
    .showStoreAddressClass,
    .showStorePresentationClass,
    .showStoreContacClass,
    .showStoreCoordinatesClass,
    .showStoreCategoryClass,
    .showStoreTimetableClass,
    .showStoreSundayMondayClass,
    .showStoreKindClass,
    .showStoreChocoMakerClass,
    .showStoreBreadnViennesClass,
    .showStoreBioClass,
    .showStoreVeganClass,
    .showStoreSaltyClass,
    .showStoreGroceryClass,
    .showStoreIceClass,
    .showStoreDrinksClass,
    .showStoreSpecialitiesClass,
    .showStoreLocalProductsClass,
    .showStoreServiceClass,
    .showStorePaymentMethodsClass {
        flex-direction: row;
    }
    .showStoreClosedWrapClass,
    .showStoreDayClass{
        width: 48%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .showStoreCoordinatesClass .showStoreItemClass{
        width:50%;
        flex-wrap: nowrap;
    }
    .showStoreCoordinatesClass p{
        min-width:5em;
        width: 100%;
    }
    .showStoreTimetableClass {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .showStoreDayClass:nth-child(1),
    .showStoreClosedWrapClass:nth-child(1){
        order: 1;
    }
    .showStoreDayClass:nth-child(2),
    .showStoreClosedWrapClass:nth-child(2){
        order: 3;
    }
    .showStoreDayClass:nth-child(3),
    .showStoreClosedWrapClass:nth-child(3){
        order: 5;
    }
    .showStoreDayClass:nth-child(4),
    .showStoreClosedWrapClass:nth-child(4){
        order: 7;
    }
    .showStoreDayClass:nth-child(5),
    .showStoreClosedWrapClass:nth-child(5){
        order: 2;
    }
    .showStoreDayClass:nth-child(6),
    .showStoreClosedWrapClass:nth-child(6){
        order: 4;
    }
    .showStoreDayClass:nth-child(7),
    .showStoreClosedWrapClass:nth-child(7){
        order: 6;
    }
    .formExcepDayDateClass{
        margin-top: 1.4em;
    }
    .showStoreLocaliseWrapClass {
        display: flex;
        flex-direction: revert;
        align-items: center;
        justify-content: space-between;
    }
    .showStoreItemGpsBtnClass{
        padding: .3em 4.5em;
    }
    .showStoreListClass{
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .showStoreListClass :nth-child(1){
        order: 1;
    }
    .showStoreListClass :nth-child(2){
        order: 2;
    }
    .showStoreListClass :nth-child(3){
        order: 3;
    }
    .showStoreListClass :nth-child(4){
        order: 4;
    }
    .showStoreListClass :nth-child(5){
        order: 5;
    }
    .showStoreListClass :nth-child(6){
        order: 6;
    }
    .showStoreMenuItemClass{
        margin:0;
        width: 32%;
    }
    .showStoreItemNewLabelClass{
        top: -.3em;
        transform: rotate(-20deg);
    }
    .showStoreItemDayClass{
        display: flex;
        flex-wrap: nowrap;
    }
    .showStoreItemGpsClass{
        margin-left: 1em;
    }
    .showStoreNavigationBtnClass:hover .showStoreHelpGpsClass{
        z-index: 100;
        display: block;
        position: absolute;
        padding: .2em 1.5em;
        top: -2em;
        left: 4em;
        background-color: #fff;
        border: 2px solid var(--primary-color);
        font-size: 1.2rem;
        font-weight: 400;
        color: #444;
        border-radius: 25px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .showStoreCategoryClass .showStoreItemCatClass{
        margin: 0 .5em .5em 0;
        width: unset;
        text-align: center;
    }
    /* - / - Showstore Menu - / - */
    .showstoretoggleMenuBtnWrapClass,
    .toggleMenuBtnWrapClass {
        display: none;
    }
    /* - Modale Show Product - */
    .productModalContentClass {
        width: 70vw;
    }
    /* ---------------  Show my stores --------------- */
    .myStoresListWrapClass{
        display: table;
        width: 100%;
        border-collapse: collapse;
    }
    .myStoresListLabelWrapClass,
    .myStoresListItemWrapClass  {
        display: flex;
        justify-content: space-between;
    }
    .myStoresListItemWrapClass > .myStoresListLabelClass,
    .myStoresListItemWrapClass > .myStoresListItemClass{
        display: table-cell;
        width: 100%;
    }
    .myStoresListLabelClass,
    .myStoresListItemClass{
        display: table-cell;
        padding: .5em .3em;
        font-size: 1.2rem;
        width: 100%;
    }
    .myStoresListNameLabelClass,
    .myStoresListAddressLabelClass,
    .myStoresListRefLabelClass{
        display: none;
    }
    .myStoresListItemWrapClass,
    .myStoresListItemClass{
        border-top: 0;
    }
    .myStoresListActionItemClass{
        justify-content: left;
    }
    .myStoresListItemWrapClass > .myStoresListItemClass {
        padding: 1.4em .2em .4em .2em;
    }
    .myStoresListItemClass.myStoresListActionItemClass{
        padding: .4em .2em;
    }
    .myStoresListItemWrapClass > .myStoresListActionItemClass{
        justify-content: right;
    }
    /* -----------------  Home store ----------------- */
    .homeStoreFilterWrapClass form{
        display: flex;
        flex-direction: row;
        margin-bottom: .5em;
        align-items: baseline;
    }
    .homeStoreFormItemClass {
        display: flex;
        align-items: baseline;
        flex-wrap: nowrap;
    }
    .homeStoreTitleClass {
        font-size: 1.3rem;
    }
    .homeStoreCityClass{
        width: 46%;
        margin: 2em 0 0 0;
    }
    .advancedSearchStoreCityClass,
    .advancedSearchStoreStoreClass{
        width: 23%;
        margin: 2em 0 0 0;
    }
    .advancedSearchStoreStoreClass{
        padding-left: 1em;
    }
    .homeStoreRadiusClass{
        width: 20%;
        padding: 0 1em;
        margin: 2em 0 0 0;
    }
    .homeStoreBtnClass{
        width: 34%;
        margin: 2em 0;
    }
    .homeStoreItemClass {
        flex-wrap: nowrap;
    }
    .homeStoreDisLegSc1Class,
    .homeStoreNameClass{
        width: 28%;
    }
    .homeStoreDisLegSc2Class,
    .homeStoreItemSub1Class {
        width: 10%;
    }
    .homeStoreDisLegSc3Class,
    .homeStoreItemSub2Class {
        width: 50%;
    }
    .homeStoreDisLegSc4Class,
    .homeStoreMoreInfoClass{
        width: 12%;
    }
    .homeStoreNameClass {
        order: 1;
    }
    .homeStoreItemSub1Class {
        order: 2;
        text-align: unset;
    }
    .homeStoreItemSub2Class {
        order: 3;
        margin-top: 0;
        justify-content: space-between;
    }
    .homeStoreMoreInfoClass {
        order: 4;
    }
    .homeStoreOpenStoreHideTxtClass,
    .homeStoreSoonOpenStoreHideTxtClass,
    .homeStoreSoonCloseStoreHideTxtClass,
    .homeStoreCloseStoreHideTxtClass,
    .homeStoreOpenStoreUnknownHideTxtClass,
    .homeStoreDistanceHideTxtClass,
    .homeStoreSundayOpenHideTxtClass,
    .homeStoreSundayCloseHideTxtClass,
    .homeStoreCatBakeryHideTxtClass,
    .homeStoreCatBakPatHideTxtClass,
    .homeStoreCatBakPatTeaHideTxtClass,
    .homeStoreCatPatisserieHideTxtClass,
    .homeStoreCatPatTeaTxtClass,
    .homeStoreCatPatBreHideTxtClass,
    .homeStoreCatPatTeaBreHideTxtClass,
    .homeStoreCatTeaHideTxtClass,
    .homeStoreCatTeaBreHideTxtClass,
    .homeStoreCatBreadShopHideTxtClass,
    .homeStoreCategoryNoHideTxtClass,
    .homeStoreGroceryProductsHideTxtClass,
    .homeStoreGroceryProductsNoHideTxtClass,
    .homeStoreSaltedProductsHideTxtClass,
    .homeStoreSaltedProductsNoHideTxtClass,
    .homeStoreKindArtisanHideTxtClass,
    .homeStoreKindExclusiveArtisanHideTxtClass,
    .homeStoreKindBackingTermHideTxtClass,
    .homeStoreKindNoHideTxtClass{
        padding: .4em .5em;
        top:-2.3em;
    }
    .homeStoreOpenStoreIconClass:hover .homeStoreOpenStoreHideTxtClass::before,
    .homeStoreSoonOpenStoreIconClass:hover .homeStoreSoonOpenStoreHideTxtClass::before,
    .homeStoreSoonCloseStoreIconClass:hover .homeStoreSoonCloseStoreHideTxtClass::before,
    .homeStoreCloseStoreIconClass:hover .homeStoreCloseStoreHideTxtClass::before,
    .homeStoreOpenStoreUnknownIconClass:hover .homeStoreOpenStoreUnknownHideTxtClass::before,
    .homeStoreDistanceDisplayClass:hover .homeStoreDistanceHideTxtClass::before,
    .homeStoreSundayOpenIconClass:hover .homeStoreSundayOpenHideTxtClass::before,
    .homeStoreSundayCloseIconClass:hover .homeStoreSundayCloseHideTxtClass::before,
    .homeStoreCatBakeryIconClass:hover .homeStoreCatBakeryHideTxtClass::before,
    .homeStoreCatBakPatIconClass:hover .homeStoreCatBakPatHideTxtClass::before,
    .homeStoreCatBakPatTeaIconClass:hover .homeStoreCatBakPatTeaHideTxtClass::before,
    .homeStoreCatPatisserieIconClass:hover .homeStoreCatPatisserieHideTxtClass::before,
    .homeStoreCatPatTeaIconClass:hover .homeStoreCatPatTeaTxtClass::before,
    .homeStoreCatPatBreIconClass:hover .homeStoreCatPatBreHideTxtClass::before,
    .homeStoreCatPatTeaBreIconClass:hover .homeStoreCatPatTeaBreHideTxtClass::before,
    .homeStoreCatTeaIconClass:hover .homeStoreCatTeaHideTxtClass::before,
    .homeStoreCatTeaBreIconClass:hover .homeStoreCatTeaBreHideTxtClass::before,
    .homeStoreCatBreadShopIconClass:hover .homeStoreCatBreadShopHideTxtClass::before,
    .homeStoreCategoryNoIconClass:hover .homeStoreCategoryNoHideTxtClass::before,
    .homeStoreGroceryProductsIconClass:hover .homeStoreGroceryProductsHideTxtClass::before,
    .homeStoreGroceryProductsNoIconClass:hover .homeStoreGroceryProductsNoHideTxtClass::before,
    .homeStoreSaltedProductsIconClass:hover .homeStoreSaltedProductsHideTxtClass::before,
    .homeStoreSaltedProductsNoIconClass:hover .homeStoreSaltedProductsNoHideTxtClass::before,
    .homeStoreKindArtisanIconClass:hover .homeStoreKindArtisanHideTxtClass::before,
    .homeStoreKindExclusiveArtisanIconClass:hover .homeStoreKindExclusiveArtisanHideTxtClass::before,
    .homeStoreKindBackingTermIconClass:hover .homeStoreKindBackingTermHideTxtClass::before,
    .homeStoreKindNoIconClass:hover .homeStoreKindNoHideTxtClass::before{
        content: '';
        position: absolute;
        bottom: -20px;
        left: 45%;
        border-width: 10px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
        z-index: 199;
    }
    .homeStoreNameLinkClass,
    .homeStoreDistanceDisplayClass {
        font-size: 1.5rem;
    }
    .homeStoreMoreInfoLinkClass {
        font-size: 1.3rem;
    }
    .homeStoreAdvertisingClass {
        padding: 2em 4em;
    }
    .homeStoreDisLegClass {
        display: flex;
        justify-content: space-between;
        padding: .2em .5em;
        background-color: #555;
        border-radius: 6px;
        margin-bottom: 2em;
        align-items: center;
    }
    .homeStoreNameClass .homeStoreNameLinkClass{
        display: inline;
    }
    .homeStoreLinkReferenceNewClass{
        width: unset;
    }
    .homeStoreFilterSortClass {
        order: 1;
    }
    .homeStoreLegendSortWrapClass {
        order: 2;
    }
    .homeStoreDisplayWrapClass {
        order: 3;
    }
    .homeStoreFilterSortClass {
        padding: 1em;
    }
    /* ------------------- Picture form -------------------- */
    .formPictureClass > :nth-child(1) {
        width: 50%;
    }
    .formPictureClass > :nth-child(2) {
        width: 50%;
    }
    .formPictureClass > :nth-child(3) {
        width: 50%;
    }
    .formPictureClass > :nth-child(4) {
        width: 50%;
    }
    .formPictureClass > :nth-child(5) {
        width: 50%;
    }
    .formPictureClass > :nth-child(6) {
        width: 50%;
    }
    .formPictureTitleClass{
        font-size: 2rem;
    }
    .editPictureInfoWrapClass > .editPictureItemClass{
        width: 50%;
    }
    /* ------------------- Picture edit -------------------- */
    .editPictureTitleClass{
        font-size: 2rem;
    }
    /* -------------------- Picture index ------------------ */
    .indexPictureWrapClass{
        display: table;
        width: 100%;
        border-collapse: collapse;
    }
    .indexPictureLabelWrapClass,
    .indexPictureItemWrapClass{
        display: table-row;
    }
    .indexPictureItemWrapClass > .indexPictureLabelClass,
    .indexPictureItemWrapClass > .indexPictureItemClass{
        display: table-cell;
        padding: .5em;
    }
    .indexPictureLabelClass,
    .indexPictureItemClass{
        display: table-cell;
        padding: .5em .3em;
        font-size: 1.2rem;
    }
    .indexPictureItemWrapClass,
    .indexPictureItemClass{
        border-top: 0;
    }
    .indexPictureActionItemClass{
        justify-content: left;
    }
    .indexPictureNoLabelClass{
        display: none;
    }
    .indexPictureTxtImgClass{
        width: 80vw;
    }
    .indexPictureMenuClass{
        display: inline-block;
    }
    .indexPictureSlideshowItemClass{
        flex-direction: row;
    }
    .indexPictureSlideshowLabelClass{
        width: 50%;
    }
    .indexPicturesSlideshowLinkClass{
        width: 50%; 
    }
    .indexPictureSlideshowItemClass{
        border-bottom: 1px solid #555;
    }
    .indexPictureSlideshowLabelClass {
        border-right: 1px solid #333;
    }
    /* ------------------ Picture Slideshow ---------------- */
    .pictureSlideShowImgClass {
        height: 600px;
    }
    /* ------------------ Picture show ----------------- */
    .showPictureMenuClass{
        flex-direction: row;
        max-width: 75em;
        margin: 1em auto;
        width: 100%;
    }
    .showPictureMenuClass a.showPictureLinkClass{
        width: 100%;
    }
    .editPictureMenuClass form,
    .editPictureMenuClass a,
    .showPictureMenuClass form,
    .showPictureMenuClass a{
        width: 33%;
    }
    .editPictureMenuClass form,
    .showPictureMenuClass form{
        margin: 0 2%;
    }
    .showPictureClass{
        flex-direction: row;
    }
    .showPictureInfoWrapClass > .showPictureItemClass{
        width: 50%;
    }
    .showPictureTitleClass{
        font-size: 2rem;
    }
    .editPictureMenuClass {
        flex-direction: row;
        margin-left: auto;
        margin-right: auto;
        align-items: baseline;
    }
    /* ---- Public holiday and Exceptional day form ---- */
    .formPubHolidayTimetableClass .formPubHolidayItemClass,
    .formExcepDayTimetableClass .formExcepDayItemClass{
        width: 25%;
    }
    .formPubHolidayTitleClass,
    .formExcepDayTitleClass{
        font-size: 2rem;
    }
    .formExcepDayOpenCloseWrapClass{
        width: 100%;
    }
    .formPubHolidayDateClass,
    .formPubHolidayRecurrentClass,
    .formPubHolidayNameClass,
    .formExcepDayDateClass,
    .formExcepDayRecurrentClass,
    .formExcepDayNameClass{
        width: 33%;
    }
    .formExcepDayResaonClass,
    .formExcepDayOtherResaonClass {
        width: 100%;
    }
    .formPubHolidayItemClass,
    .formExcepDayItemClass {
        width: 50%;
    }
    .formExcepDayDayClass{
        align-items: end;
    }
    .formExcepDayReasonWrapClass {
        flex-direction: row;
    }
    .editPubHolidayMenuClass,
    .editExcepDayMenuClass{
        flex-direction: row;
        max-width: 75em;
        margin: 1em auto;
        width: 100%;
    }
    .editPubHolidayMenuClass form,
    .editExcepDayMenuClass form{
        margin: 0 2%;
    }
    .editPubHolidayMenuClass a,
    .editExcepDayMenuClass a{
        margin-left: 1em;
    }
    .editPubHolidayMenuClass a,
    .editPubHolidayMenuClass button,
    .editExcepDayMenuClass a,
    .editExcepDayMenuClass button{
        margin: .5em auto;
    }
    .formExcepDayOpenCloseWrapClass{
        flex-wrap: nowrap;
    }
    /* ---- Public holiday and Exceptional day show ---- */
    .showPubHolidayMenuClass,
    .showExcepDayMenuClass {
        flex-direction: row;
        max-width: 75em;
        margin: 1em auto;
        width: 100%;
    }
    .showPubHolidayMenuClass form,
    .showExcepDayMenuClass form{
        margin: 0 2%;
    }
    .showPubHolidayClass, .showExcepDayClass {
        flex-direction: row;
    }
    /* ---- Public holiday and Exceptional day index --- */
    .indexExcepDayTitleClass,
    .indexPubHolidayTitleClass{
        font-size: 2rem;
    }
    .indexPubHolidayWrapClass, 
    .indexExcepDayWrapClass{
        display: table;
        width: 100%;
        border-collapse: collapse;
    }
    .indexPubHolidayLabelWrapClass,
    .indexPubHolidayItemWrapClass,
    .indexExcepDayLabelWrapClass,
    .indexExcepDayItemWrapClass  {
        display: table-row;
    }
    .indexPubHolidayItemWrapClass > .indexPubHolidayLabelClass,
    .indexPubHolidayItemWrapClass > .indexPubHolidayItemClass,
    .indexExcepDayItemWrapClass > .indexExcepDayLabelClass,
    .indexExcepDayItemWrapClass > .indexExcepDayItemClass {
        display: table-cell;
    }
    .indexPubHolidayLabelClass,
    .indexPubHolidayItemClass,
    .indexExcepDayLabelClass,
    .indexExcepDayItemClass{
        display: table-cell;
        padding: .5em .3em;
        font-size: 1.2rem;
    }
    .indexPubHolidayItemWrapClass,
    .indexPubHolidayItemClass,
    .indexExcepDayItemWrapClass,
    .indexExcepDayItemClass{
        border-top: 0;
    }
    .indexPubHolidayActionItemClass{
        justify-content: left;
    }
    .indexPubHolidayNoLabelClass,
    .indexExcepDayNoLabelClass{
        display: none;
    }
    /* -----------  Validate store Form Page ----------- */
    .formValidateItemClass label {
        width: 50%;
    }
    .editValidateStoreMenuClass{
        flex-direction: row;
    }
    .editValidateStoreMenuClass form{
        width: 50%;
        margin-left: .5em;
    }
    .editValidateStoreMenuClass a{
        width: 50%;
        margin-right: .5em;
    }
    /* ------------  Validate store show Page -------------- */
    .showValidStoreListClass{
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .showValidStoreMenuItemClass{
        margin:0;
        width: 32%;
    }
    .showValidStoreTitleClass{
        font-size: 2rem;
    }
    /* -----------  Validate store index Page ------------- */
    .indexValidateActionClass > div{
        flex-direction: row;
    }
    .indexValidateActionClass > div :nth-child(1){
        margin-right: .5em;
    }
    .indexValidateActionClass > div :nth-child(2){
        margin-left: .5em;
    }
    /* ---------  Registration_information pages --------- */
    .mainSuccessRegistrationClass,
    .mainChoiceRegistrationClass,
    .mainReferencingRegistrationClass,
    .mainConfirmRegistrationClass{
        padding: 1em 0;
    }
    .successRegistrationClass,
    .choiceRegistrationClass,
    .referencingRegistrationClass,
    .confirmRegistrationClass{
        padding: 1.5em 8em;
    }
    /* ----------- Already exists store page ----------- */
    .anotherStoreTitleClass{
        font-size: 2rem;
    }
    /* --------------------  Blog index -------------------- */
    .blogIndexWrapClass{
        padding: 1.5em 4em;
    }
    .blogIndexTitleClass{
        font-size: 2rem;
        font-weight: 800;
    }
    /* -----------------  Static page show ----------------- */
    .showStatPgMainClass.mainClass{
        padding: 1.5em 8em;
    }
    .showStatPgTitleClass{
        font-size: 2rem;
    }
    /* --------------------- Contact page ------------------ */
    .contactMainClass.mainClass{
        padding: 1.5em 8em;
    }
    .contactTitleClass{
        font-size: 2rem;
    }
    /* ----------------------- Footer ---------------------- */
}
/* =================== Accessibility =================== */
/* ---------------- Picture Slideshow ------------------ */
@media (prefers-reduced-motion: reduce) {
    .pictureSlideShowTrackClass {
      transition: none !important;
    }
  }