/* couleur bouton bleu */ 
.btn-primary{
    background-color: #166fce !important;
    border-color: #166fce !important;
}

/* .row{
    margin-right: 0 !important;
} */

.fond>.row{
    margin-left: 0;
    margin-right: 0;
}


/* login */

.login{
  /*   background: #414042 url(../app/img/img-login.png) no-repeat bottom right; */
    width: 100%;
    height: 100%;
    margin: 0 0;
    position: absolute;
    z-index: -10000;
    overflow: hidden;
}
.st-pierre {
    bottom: 0;
    display: block;
    width: 400px;
    height: 430px;
    position: absolute;
    left: 0;
    z-index: -10000;
    opacity: 0.7;
    background: none;
}
.logo-login{
    display: block;
    width: 300px;
    top: 50px;
    left: 50px;
    z-index: -10000;
    position: absolute;
}


.login form{
    text-align: center;
    margin-top: 20vh;
}
.login form input{
    margin-left: auto;
    margin-right: auto;
}

.login input{
    width: 15vw;
}
.btn-connexion{
    background-color: rgb(67, 180, 245) !important;
    border-color: rgb(67, 180, 245) !important;
    font-weight: bold;
    text-transform: uppercase;
}

#erreur_login{
    margin-top: 20px;
    padding: 5px 0 5px 0;
    width: 40vw;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    color: white;
    background-color: #222;
    border: 1px solid red;
}

/* header*/

.header{
    background-color: #85355c;
    color: #efefef;
    padding:10px 20px 10px 20px;
    margin-left: 0;
    margin-right: 0;
}

.retour_acceuil a{
    color: #efefef;
    text-decoration: none;
    vertical-align: top;
    padding: 0.5rem 1rem;
}

.retour_acceuil a:hover{
    color: #efefef;
    text-decoration: none;
}

.retour_acceuil{
  padding-top: 7px;
}

.header h1{
    text-align: center;
    font-size: 1.5em;
}

.text-muted {
    color: #efefef!important;
}

.dropdown-menu-right{
    padding: 0 !important;
    width: 300px;
}
.dropdown-menu-right .nomcommerce{
    padding: 20px 50px 20px 50px;
    background-color: #3376c9 !important;
}
.dropdown-menu-right form{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.dropdown-menu button{
    width: 80%;
}
.tutos_header {
    display: block;
    margin: 0 auto 30px auto;
    text-align: center;
}

.dropdown-menu-right .fermer{
  display: block;
}





/* Page d'accueil */

.fond{
    background-color: #262626;
    background-size: cover;
    background-position: top;
}

.logo-commerce{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 150px;
    max-height: 200px;
}

.logo{
    margin-top: 30px;
    text-align: center;
}
.logo img{
    width: auto;
    max-height: 180px;
}
@media only screen and (max-width: 1300px) {
    .logo img{
        width: auto;
        max-height: 100px;
    }
}



.accueil{
    margin-top: 8vh;
    margin-left: 0;
    margin-right: 0;
}
@media only screen and (max-width: 1300px) {
    .accueil{
        margin-top: 0vh;
    }
}



.accueil .col-6 .col-3 .col-2{
    text-align: center;
}

.accueil button{
    width: 100%;
    height: 80px;
    margin: 20px 0 20px 0;
}
.assistance{
    background-color: #663399 !important;
    border-color: #663399 !important;
}
.magasin{
    background-color: #a83354 !important;
    border-color: #a83354 !important;
}
.creer_carte{
    background-color: #ca791c !important;
    border-color: #ca791c !important;
}
.modif{
    background-color: #166FCE !important;
    border-color: #166FCE !important;
    width: 100%;
    height: 60px;
    margin: -5px 0 20px 0;
    font-size: 1.1em;
}

.accueil i{
    font-size: 2em;
    vertical-align: middle;
    margin-right: 20px;
}

.row-deconnexion{
    position: absolute;
    right: 0;
    bottom: 20px;
}

/* Menu tabs */

.tabs{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #85355c;
    color: #efefef;
    margin-left: 0;
    margin-right: 0;
    
}

.tabs .col-3{
    padding:20px 20px 0px 20px;
}

.tabs a{
    text-align: center;
    color: #efefef;
    text-decoration: none;
}

.tabs i {
    font-size: 1.3em;
}

/* div left */
/* 
.col-left{
    height: 95vh;
}
.col-left .logo{
    display: block;
    margin: 4vh auto 4vh auto;
    height: auto;
    max-height: 170px;
    width: auto;
    max-width: 250px;
}
.menu{ 
    list-style-type: none;
    margin-left: 0px;
}

.menu .icon{
    width: 50px;
}
.menu a{
    color: black;
    text-decoration: none;
}
.menu .bleu a{
    color: #3F4DA0;
}
.menu .rouge a{
    color: #EF494F;
}
.menu .vert a{
    color: #8CC63F;
}
.col-left li{
    font-weight: 600;
    font-size: 1.2em;
    margin-bottom: 1.5vh;
}
.dernierli{
    position: absolute;
    bottom : 0;
}
.btn-credit-debit{
    margin-top: 10vh;
    margin-left: -1.5vh;
}
.btn-credit{
    font-weight: 600;
    font-size: 1.1em;
}
.deconnexion{
    background-color: white !important;
    border: none;
    color: #EF494F;
    font-size: 1.2em;
    font-weight: 600;
}
 */

/* main div */

.main{
    /* background-color: rgb(228, 247, 232); */
    background-size: cover;
    background-position: right;
    border-radius: 50px;
    margin-top: 20px;
}

.femme-droite {
    display: block;
    position: absolute;
    height: 60%;
    max-height: 600px;
    width: auto;
    top: 0;
    right: 0;
    background-position: top right;
}

.logo-altitude {
    display: block;
    width: 25%;
    max-width: 400px;
    height: auto;
    bottom: 55px;
    right: 80px;
    position: absolute;
}

.st-pierre-acc {
    display: block;
    height: auto;
    width: auto;
    max-width: 1000px;
    bottom: 0;
    left: 0;
    border-radius: 0 0 0 50px;
    position: absolute;
    z-index: 0;
}

/* Page fidelité recherche */

.inputfidelite{
    margin-top: 20px;
    margin-bottom: 20px;
}

#ui-id-1{
    list-style-type: none;
    padding-left: 0;
}
#ui-id-1 li{
  border-bottom: 0.4px solid rgb(105, 105, 105);
  color: black;
  padding: 7px;
  cursor: pointer;
}

/* page creation carte */

.formcreation{
    margin-top: 3vh;
    margin-left: 3vh;
}

.email_vide { 
    background: transparent url(../img/email_vide.png) no-repeat bottom right;
    display: block;
    width: 35px;
    height: 35px;
    margin:30px 0 0 5px;
}

.formcreation .envoyer{
    margin-top: 2vh;
}

.fincarte{
    background-color: #fefefe;
    border-radius: 10px;
    padding: 20px 0 20px 20px;
    margin-top: 20vh;
}


/* autocomplete input */

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
.ui-widget-content {
    border: 1px solid #555555;
    background: #ffffff !important;
    color: #3F4DA0 !important;
    width: 20vw;
}


/* page solde journée */


.divsolde h2{
    font-size: 1.3em;
    margin-top: 4vh;
}
.divsolde p{
    font-size: 1.1em;
}

.titresolde{
    margin-top: 20px !important;
}
.divsolde{
    padding: 30px;
    margin-top: 10vh;
    background-color: #eee;
    border-radius: 10px;
    text-align: center;
}


/* page scan */

.scan{
    margin-top: 35vh;
    color: red;
}

.scan .boutons{
    margin-top: 3vh;
}

.scan .boutons .btnmodifier{
    position: absolute;
    right: 20px;
} 

/*page recherche  */

.formrecherche{
    margin-top: 10vh;
    margin-left: 2vw; 
}

/* Calculatrice */



.entete_calculator_kdo{
font-size: 1.3em;
margin-top: 20px;
margin-bottom: 20px;
}
.recap-client p{
margin-top: 10px;
margin-bottom: 10px;
font-size: 1.2em;
}

.recap-client .solde p{
font-weight: bold;
}

.recap-client{
background-color: #eee;
border-radius: 10px;
text-align: center;
}

.row-calculator{
    margin-top: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8vh;
}
.cadran input{
width: 100%;
height: 60px;
background-color: #eee;
border: none;
border-radius: 5px;
font-size: 1.4em;
padding-left: 20px;
}
.clear{
width: 100%;
height: 60px;
background-color: red;
color: white;
border-radius: 5px;
text-align: center;
font-size: 1.5em;
padding-top: 10px;
}

.nombre{
height: 60px;
text-align: center;
background-color: #eee;
margin-top: 20px;
border-radius: 5px;
font-size: 1.5em;
padding-top: 10px;
}

.nombre:hover{
background-color: #bbb;
}

.buttons3{
width: 100%;
height: 60px;
background-color:#228b22;
color: #eee;
border: none;
border-radius: 5px;
margin-top: 20px;

}

.buttons4{
width: 100%;
height: 60px;
background-color:#EBB508;
color: #333;
border: none;
border-radius: 5px;
}
 
.buttons-jaune{
width: 100%;
height: 60px;
background-color:#EBB508;
color: #333;
border: none;
border-radius: 5px;
margin-top: 20px;

}

.bouton_annuler_transaction_kdo{
width: 100%;
height: 60px;
background-color: #b22222;
color: #eee;
border: none;
border-radius: 5px;
}

.bouton_annuler_transaction{
    width: 100%;
    height: 60px;
    background-color: #b22222;
    color: #eee;
    border: none;
    border-radius: 5px;
    }

.bouton_terminer_sans_avoir{
    width: 100%;
    height: 60px;
    color: #eee;
    border: none;
    border-radius: 5px;
}

.bouton_retour{
    margin-top: 25px;
    width: 100%;
    height: 60px;
    color: #eee;
    border: none;
    border-radius: 5px;
}

.bouton_utiliser_kdo{
    width: 100%;
    height: 60px;
    color: #eee;
    border: none;
    border-radius: 5px;
    margin-bottom: 20px;
}
.bouton_utiliser_mag{
    width: 100%;
    height: 60px;
    background-color: #a83354 !important;
    border-color: #a83354 !important;
    color: #eee;
    border: none;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* .retour{
position: absolute;
bottom: 20px;
left: 20px;
} */

.profil{
width: 95%;
margin-bottom: 10px;
}

/* menu à gauche quand calculatrice*/

.info_user {
	margin-left: 30px;
    margin-bottom: 50px;
}
.utilisateur_bonjour, .utilisateur {
	text-transform:uppercase;
	font-size:20px;
	font-weight:500;
	color: gray;
}
.solde_comp {
	text-transform:uppercase;
	font-size:1.3em;
	font-weight:600;
	color:#4d3fa0;
	margin-top: 10px;
}

.css_date_valide {
	font-size: 18px;
	font-weight: 600;
	margin-top: 0px;
	color: #8dc63f;
}

/* recap info user apres operation */

.recap {
    margin-top: 8vh;
    margin-bottom:2vh ;
    background: #fefefe;
    padding: 40px;
	border-radius: 25px;
}
.recap .utilisateur:before{
	content:"Merci pour votre achat, à très bientôt dans votre centre ville ";
	font-size: 19px;
}

.annul{
    margin-top: 2vh;
    margin-bottom:1vh ;
    background: #fefefe;
    padding: 40px;
	border-radius: 25px;
}

.titre_annul{
    text-align: center;
    font-size: 2em;
    font-weight: bold;
}

.annul .button_annul{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    display: block;;
}

/* page cheque */

.info_chq{
    margin-top: 30vh;
	display: block;
    background: #eee;
    border-radius: 20px;
    padding: 20px;
}
.scan-chq{
    margin-top: 10vh;
}
.scan-chq .boutons{
    margin-top: 10px;
}
/* annuler transaction */

.transaction .recap-client{
    margin-top: 20vh;
}
.derniere_transac {
    margin-top: 50px;
	display: block;
    background: #eee;
    border-radius: 20px;
    padding: 20px;
	z-index: 15;
}

.derniere_transac button{
	display: block;
    margin-left: auto;
    margin-right: auto;
}

.titre_transaction, .titre_avoir {
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
	font-size:26px;
	font-weight:bold;
	margin: 20px 0;
	text-align: center;
}
.titre_detail_transaction,.titre_detail_avoir{
	font-family: 'Quicksand', sans-serif;
	font-size:18px;
}
.detail_transaction {
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
	font-size:36px;
	font-weight:bold;
	color:#999;
}

/* Page epargne */

.kdo_epargne,.kdomag_epargne{
	font-size: 18px !important;
    border-top: 3px dashed gray;
	padding-top: 3px;
}
.kdov_epargne,.kdomagv_epargne{
	font-size: 18px !important;
    
}

/* Page achat  */

.use_kdo, .use_kdo_mag{
    margin-left: 30px;
    position:absolute;
	left: 500px;
    text-align: center;
}

.use_kdo{
	bottom:160px;

}
.use_kdo_mag{
	bottom:220px;

}

/* page solde  */
.solde-texte{
   
	font-size:1.3em;
	font-weight:400;
}

/* Page alertes */

.boutonalerte{
    text-align: center;
}
.group-boutond-alerte{
    margin-top: 150px;
}

.alerte_fond {
	background: #fff;
	/*border-radius: 20px;*/
	display: block;
	height: 85vh;
    width: 820px;
	z-index: 15;
	border: 1px solid lightgray;
}

.btnalertes{
    margin-top: 150px;
}
.btnalertes button{
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
}

.alerte_mep {
	display:block;
	width:790px;
	height:50vh;
	left:5px;
	top:176px;
	/*text-align:center;
	font-family: 'Quicksand', sans-serif;
	color:#FFF;*/
	position:absolute;
}
#alerte_messages {
	display:block;
	height:40vh;
	overflow-y:scroll;
	float:left;
	margin-top:50px;
	width:780px;
	margin-left:20px;
}
#alerte_texte {
	color:black;
	width:800px;
	height:115px;
	left:20px;
	top:-165px;
	display:block;
	position:absolute;
	/*border-radius: 20px;*/
	padding: 7px;
	border: 1px solid lightgray;
}
.message_txt {
	display:block;
	float:left;
	width:100%;
	text-align:left;
	margin-bottom:10px;
	border-top:1px dashed gray;
	border-bottom:1px dashed gray;
	padding:5px;
	color: gray;
}
.message_txt>span {
	font-weight:bold;
}

/* Page alertes historique */
.nav_pages {
	display:block;
	position:absolute;
	bottom:-60px;
	left:300px;
	width:280px;
	height:40px;
	font-size:16px;
	font-weight:bold;
	color:#FFF;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
.alerte_archive_prev, .alerte_archive_num, .alerte_archive_next {
	display:inline-block;
	margin-right:40px;
	width:40px;
	height:40px;
	background-color:#3376C9;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	color:#FFF;
	padding-top:10px;
	text-transform:uppercase;
	/*font-family: 'Quicksand', sans-serif;
	border-radius: 20px;*/
}
.alerte_messages {
	display:block;
	height:70vh;
	overflow-y:scroll;
	float:left;
	margin-top:-165px;
    margin-left: 30px;
	width:100%;
}
.alerte_txt {
	display:block;
	float:left;
	width:100%;
	text-align:left;
	margin-bottom:10px;
	border-top:1px dashed lightgray;
	border-bottom:1px dashed lightgray;
	padding:5px;
	color: gray;
	font-size: 14px;
}
.alerte_txt>span {
	font-weight:bold;
}

#form_solde{
	display: block;
	width: 400px;
	margin: 0 auto;
}
.maintenance{
	position : absolute;
    display: block;
    width: 92px;
    height: 75px;
    right: 40px;
    bottom: 40px;
	background: url('../img/assistance.png') center center no-repeat;
	z-index: 1000000;
}
.assistance_p {
	padding: 30px;
}
#assistance_texte {
    display: block;
    width: 100%;
    height: 300px;
    margin-top: -60px;
	color: black;
}
#assistance_creer {
    display: block;
    margin: 0 auto 30px auto;
    width: 90%;
    text-align: center;
    color: #FFF;
    padding-top: 10px;
}
.assistance_mep {
    display: block;
    width: 90%;
    margin: 80px 5% 0 5%;
    height: 355px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    color: #FFF;
}
.tutos {
    display: block;
    margin: 0 auto 0 auto;
    width: 90%;
    text-align: center;
    color: #FFF;
    padding-top: 10px;
}

.tuto_liens:hover{
    text-decoration: none;
}

/* page modifier carte */

.form_carte{
    margin-top: 5vh;
}
.formulaire-carte label{
    color: #fefefe;
}

.finmodif button{
    width: 100%;
    height: 80px;
    margin: 40px 0 20px 0;
}

.checkbox_rgpd{
    width: 1.5em;
    height: 1.5em;
}

.titre_rgpd{
    color: #fefefe;
}

.txt_rgpd{
    color: #fefefe;
    font-size: 0.7em;
}


/* page fin vente fidelité */

.fin_vente button{
    width: 100%;
    height: 80px;
    margin: 20px 0 20px 0;
}
/* Page fin vente cadeau*/

.fin_vente .nom{
    font-size: 1.4em;
    font-weight: bold;

}
.fin_vente .montant{
    padding-bottom: 10px ;
    margin-bottom: 10px;
    border-bottom: 1px dashed #151515 ;
}

.fin_vente span#montant{
    font-weight: bold;

}

.fin_vente .bouton_annuler_transaction_kdo{
    margin-top: 5vh;
}

/* page alerte */
.chat-item {
	margin-top: 30px;
}
.chat-item .chat-img {
    display: inline-block;
    width: 65px;
    vertical-align: top;
}
.chat-item .chat-img img {
    width: 65px;
    border-radius: 100%;
}
.chat-item .chat-content {
    width: calc(100% - 70px);
    display: inline-block;
    padding-left: 15px;
}
.chat-item .chat-content h6 {
    color: gray;
		
}
.chat-item .chat-content .box {
    display: inline-block;
    padding: 10px;
    margin-bottom: 3px;
    color: #343a40;
    background: #f8f9fa;
	border-radius: 2px;
}
.chat-item .chat-time {
    display: block;
    font-size: 10px;
    color: #4F5467;
    margin: 5px 0 15px 65px;
}
/*fin page alerte */

/* ALertes somme cadeau */