@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

*{
  font-family: 'Montserrat', sans-serif;
}

html, body {
    min-width: auto;
}
#hts_title{
	color: black;
	display: block;
	font-size: 1.2em;
}

#hts_subtitle{
	color: black;
	font-size: 1em;
}

#container-slide{
	background-color:#182023!important;
}

#text-presentation{
	color: white;
  text-align: -webkit-left;
	/*font-size: 190%;*/
}

.text-slide{
	text-decoration: none;
	font-size:140%;
	color: #424242;
}

.block-accueil {
	margin: 2% !important;
	border-color: #bdbdbd !important;
}

.style-footer{
	background-color:white;
	color: black;
	padding : 0.5%;
	margin-top: 1%;
	/*position: absolute;
*/	width: 100%;
	bottom: 0; left: 0; right: 0;
}

.style-footer p a {
	font-size: 130%;
	color: #212121;
}

.style-footer a:hover,
.style-footer a:focus{
	font-weight : bold;
}

.style-block-footer{
	background-color:#182023 ;
	padding: 1%;
	font-size: 150%;
}

.carousel-fond{
	background-color: white;
}


/** Style page admin */
/*
.bouton{
    width:auto;
    padding:8px 0;
    text-align:center;
    display: inline-block;
    float:right;
    margin:10px;
    border-radius:7px;
    font-size: 0.85em;
    width:120px;
    color:white;
    font-family: Arial,sans-serif;
} */

/* .bouton, .bouton:active { */
    /* background: red; */
/* } */

table
{
    border-collapse: collapse; /* Les bordures du tableau seront coll�es (plus joli) */
	margin-top:20px;
}
th{
	font-family: 'Oswald', sans-serif;
	border: 1px solid black;
	color:white;
	background-color: grey;
	padding:8px;
}
tr{
	transition: 0.3s background-color ;
}
table.tableau tr:hover td {
  background-color: white;
}

 td
{
    font-family: 'Oswald', sans-serif;
	border: 1px solid black;
	width:30%;
	padding:8px;
	background-color: #ccc;
	transition: 0.3s background-color ;
}

/** Fin style page admin */

/** Social button*/

.social {
    margin: 0;
    padding: 0;
}

.social ul {
    margin-left: 20%;
    margin-right: 0;
}

.social ul li {
    margin: 5px;
    list-style: none outside none;
    display: inline-block;
}

.social i {
    width: 40px;
    height: 40px;
    background-color: white;
    font-size: 22px;
    text-align:center;
    padding-top: 12px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
	-moz-box-shadow: 0px 5px 5px 0px #bdbdbd;
	-webkit-box-shadow: 0px 5px 5px 0px #bdbdbd;
	-o-box-shadow: 0px 5px 5px 0px #bdbdbd;
	box-shadow: 0px 5px 5px 0px #bdbdbd;
	color:#4060A5;
}

.social i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}



.social .fa-facebook:hover { /* round facebook icon*/
    background: #4060A5;
}

.social .fa-twitter:hover { /* round twitter icon*/
    background: #00ABE3;
}

.social .fa-google-plus:hover { /* round google plus icon*/
    background: #e64522;
}

/** Fin Social Button **/
#accueilNav {
	font-size: 12px;
}
#competencesNav {
	font-size: 12px;
}
#compteNav {
	font-size: 12px;
}
#contactNav{
	font-size: 12px;
}

.cards {
  box-shadow: 0 4px 3px 4px rgb(0 0 0 / 20%);
  transition: 0.3s;
  width: 100%;
  margin: 0;
}

.cards:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.contain {
  padding-top: 2%;
  display: flex;
}

* {
  box-sizing: border-box;
}

/* Create three equal columnConts that floats next to each other */
.columnCont {
  float: left;
  width: 100%;
  height: 90%;
}

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");

* {
	box-sizing: border-box;
}

.cardbody {
	--h: 212deg;
	--l: 43%;
	--brandColor: hsl(var(--h), 71%, var(--l));
	font-family: Montserrat, sans-serif;
	margin: 0;
	background-color: whitesmoke;
}

.cardbody p {
	margin: 0;
	line-height: 1.6;
}

.cardbody ol {
	list-style: none;
	counter-reset: list;
	padding: 0 1rem;
}

.cardbody li {
  position: relative;
  counter-increment: list;
  max-width: 98%;
  margin: 1rem auto;
  padding: 1rem 1rem 1rem;
  box-shadow: 0.1rem 0.1rem 1.5rem rgb(0 0 0 / 30%);
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: white;
}

.cardbody li::before {
	--stop: calc(100% / var(--length) * var(--i));
	--l: 62%;
	--l2: 88%;
	--c1: hsl(var(--h), 7%, var(--l));
	--c2: hsl(var(--h), 71%, var(--l2));

	content: '';
	display: block;
	width: 100%;
	height: 1rem;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(to right, var(--c1) var(--stop), var(--c2) var(--stop));
}
/*
@media (min-width: 40em) {
	.cardbody li {
    width: 276px;
    height: 185px;
    margin: 3rem auto;
    padding: 3rem 1rem 2rem;
    border-radius: 12px;
    box-shadow: -16px -3px 19px 15px rgb(0 0 0 / 10%);
}

.cardbody .liProd {
  display: inline-flex;
  width: 31%;
  margin: 1rem 1rem 1rem;
  padding: 3rem 2rem 3rem;

}

.cbPageTarif li {
    width: 504px;
    height: 90px;
  }

.cardbody .hr1 {
  position: relative;
  border: none;
  height: 8px;
  border-radius:100px;
  background: #35b096;
  margin-bottom: 20px;
}
.cardbody .hr2 {
  position: relative;
  border: none;
  height: 5px;
  border-radius:100px;
  background: #626262;
  margin-bottom: 20px;
}

.cardbody ol .img-thumbnail {
    display: inline-block;
    max-width: 118%;
    height: auto;
    padding: 4px;
    line-height: 1.428571;
    background-color: #fff;
    border: 1px solid #333;

    border-radius: 19%;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.cardbody .btnPrVoir {
  float: right;
  margin-top: 25%;

}

	.cardbody h3 {
		font-size: 2.25rem;
		margin: 0 0 2rem;
	}

.cardbody	h3::before {
		margin-right: 1.5rem;
	}
} */
.myImg{
  height: 70px;
}

.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}


/* Googlefont Poppins CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
}
.sidebar{
position: absolute;
height: 100%;
width: 14%;
background: #182023;
transition: all 0.5s ease;
}
.sideCli{
position: absolute;
height: 100%;
width: 185px;
background: #35b096;
transition: all 0.5s ease;
}

.sidebar.active{
width: 60px;
}

.sidebar .logo-details{
height: 80px;
display: flex;
align-items: center;
}
.sidebar .logo-details i{
font-size: 28px;
font-weight: 500;
color: #fff;
min-width: 60px;
text-align: center
}
.sidebar .logo-details .logo_name{
color: #fff;
font-size: 24px;
font-weight: 500;
}
.sidebar .nav-links{
margin-top: 10px;
}
.sidebar .nav-links li{
position: relative;
list-style: none;
height: 40px;
}
.sidebar .nav-links li a{
height: 100%;
width: 100%;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li a.active{
background: #081D45;
}
.sidebar .nav-links li a:hover{
background: #081D45;
}
.sidebar .nav-links li i{
min-width: 60px;
text-align: center;
font-size: 18px;
color: #fff;
}
.sidebar .nav-links li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
}
.sidebar .nav-links .log_out{
position: absolute;
bottom: 0;
width: 100%;
}
.home-section{
position: inherit;
background: #f5f5f5;
min-height: 100vh;
width: 85%;
left: 15%;
/* transition: all 0.5s ease; */
}

.home-section nav{
display: flex;
justify-content: space-between;
height: 80px;
background: #fff;
align-items: center;
position: initial;
width: calc(100% - 1px);
left: 240px;
z-index: 100;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}

.home-section nav .sidebar-button{
display: flex;
align-items: center;
font-size: 24px;
font-weight: 500;
}
nav .sidebar-button i{
font-size: 35px;
margin-right: 10px;
}
.home-section nav .search-box{
position: relative;
height: 50px;
max-width: 550px;
width: 100%;
margin: 0 20px;
}
nav .search-box input{
height: 100%;
width: 100%;
outline: none;
background: #F5F6FA;
border: 2px solid #EFEEF1;
border-radius: 6px;
font-size: 18px;
padding: 0 15px;
}

.box input, textarea{
display: block;
width: 95%;
margin-right: auto;
margin-left: auto;
}

nav .search-box .bx-search{
position: absolute;
height: 40px;
width: 40px;
background: #2697FF;
right: 5px;
top: 50%;
transform: translateY(-50%);
border-radius: 4px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 22px;
transition: all 0.4 ease;
}
.home-section nav .profile-details{
display: flex;
align-items: center;
background: #F5F6FA;
border: 2px solid #EFEEF1;
border-radius: 6px;
height: 50px;
min-width: 190px;
padding: 0 15px 0 2px;
}
nav .profile-details img{
height: 40px;
width: 40px;
border-radius: 6px;
object-fit: cover;
}
nav .profile-details .admin_name{
font-size: 15px;
font-weight: 500;
color: #333;
margin: 0 10px;
white-space: nowrap;
}
nav .profile-details i{
font-size: 25px;
color: #333;
}
.home-section .home-content{
position: relative;
padding-top: 20px;
height: 100%;
}
.home-content .overview-boxes{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 20px;
margin-bottom: 26px;
}
.overview-boxes .box{
display: flex;
align-items: center;
justify-content: center;
width: calc(100% / 4 - -72px);
background: #fff;
padding: 15px 14px;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.overview-boxes .box-topic{
font-size: 20px;
font-weight: 500;
}
.home-content .box .number{
display: inline-block;
font-size: 35px;
margin-top: -6px;
font-weight: 500;
}
.home-content .box .indicator{
display: flex;
align-items: center;
}
.home-content .box .indicator i{
height: 20px;
width: 20px;
background: #8FDACB;
line-height: 20px;
text-align: center;
border-radius: 50%;
color: #fff;
font-size: 20px;
margin-right: 5px;
}
.box .indicator i.down{
background: #e87d88;
}
.home-content .box .indicator .text{
font-size: 12px;
}
.home-content .box .cart{
display: inline-block;
font-size: 32px;
height: 50px;
width: 50px;
background: #cce5ff;
line-height: 50px;
text-align: center;
color: #66b0ff;
border-radius: 12px;
margin: -15px 0 0 6px;
}
.home-content .box .cart.two{
color: #2BD47D;
background: #C0F2D8;
}
.home-content .box .cart.three{
color: #ffff;
background: #35b096;
}

/* left box */
.home-content .sales-boxes .recent-sales {
width: 95%;
background: #fff;
padding: 20px 30px;
margin: 0 20px;
border-radius: 12px;
box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}

.sales-boxes .box .title{
font-size: 24px;
font-weight: 500;
/* margin-bottom: 10px; */
}
.sales-boxes .sales-details li.topic{
font-size: 20px;
font-weight: 500;
}
.sales-boxes .sales-details li{
list-style: none;
margin: 8px 0;
}
.sales-boxes .sales-details li a{
font-size: 18px;
color: #333;
font-size: 400;
text-decoration: none;
}
.sales-boxes .box .button{
width: 100%;
display: flex;
justify-content: center;
}
.sales-boxes .box .button a{
color: #fff;
background: #0A2558;
padding: 4px 12px;
font-size: 15px;
font-weight: 400;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
}
.sales-boxes .box .button a:hover{
background:  #0d3073;
}

/* Right box */
.home-content .sales-boxes .top-sales{
width: 35%;
background: #fff;
padding: 20px 30px;
margin: 0 20px 0 0;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.sales-boxes .top-sales li{
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0;
}
.sales-boxes .top-sales li a img{
height: 40px;
width: 40px;
object-fit: cover;
border-radius: 12px;
margin-right: 10px;
background: #333;
}
.sales-boxes .top-sales li a{
display: flex;
align-items: center;
text-decoration: none;
}
.sales-boxes .top-sales li .product,
.price{
font-size: 17px;
font-weight: 400;
color: #333;
}
/* Responsive Media Query */
@media (max-width: 1240px) {
.sidebar{
width: 60px;
}

.home-section{
width: calc(100% - 60px);
left: 60px;
}

.home-section nav{
width: 100%;
left: 0px;
}

}
@media (max-width: 1150px) {
.home-content .sales-boxes{
flex-direction: column;
}
.home-content .sales-boxes .box {
width: 95%;
margin-bottom: 30px;
}
.home-content .sales-boxes .top-sales{
margin: 0;
}
}
@media (max-width: 1000px) {
.overview-boxes .box{
width: calc(100% / 2 - 15px);
margin-bottom: 15px;
}
}
@media (max-width: 700px) {
nav .sidebar-button .dashboard,
nav .profile-details .admin_name,
nav .profile-details i{
display: none;
}
.home-section nav .profile-details{
height: 50px;
min-width: 40px;
}
.home-content .sales-boxes .sales-details{
width: 100%;
}
}
@media (max-width: 550px) {
.overview-boxes .box{
width: 100%;
margin-bottom: 15px;
}

}
@media (max-width: 400px) {
.sidebar{
width: 15px;
}
.home-section{
width: 100%;
left: 0;
}

.home-section nav{
width: 100%;
left: 0;
}

}



.tete {
position: fixed;
top: 0;
width: 100%;
}
.divVentre{
position: relative;
}
#customers {
display: flex;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

#customers tbody {
  width: 100%;
}

#customers tr {
  display: flex;
  margin: auto;
  width: 100%;
  transition: 0.3s background-color;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
  width: 32%;
  display: flex;
  justify-content: space-around;
}

/* #customers tr:nth-child(even){background-color: #f2f2f2;} */

#customers tr:hover {background-color: #ddd;}

#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color:#727272;
color: white;
}

/* Media Query pour les écrans de téléphone */
@media only screen and (max-width: 767px) {
  .sidebar.active {
    width: 67%; /* Modifier la largeur selon vos besoins pour les écrans de téléphone */
  }

  #customers tr {
    display: flex;
    margin: auto;
    width: 100%;
    transition: 0.3s background-color;
    flex-direction: column;
    margin-bottom: 20px;
    border: solid 1px #35b096;
  }

  #customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .imgCol{
    border: 1px solid #ddd;
    padding: 8px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
  }

}

.columnCont .imgCarre {
  /* { */
      display: inline-block;
      max-width: 100%;
      height: 50px;
      width: 50px;
      padding: 4px;
      line-height: 1.42857143;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 50%;
      -webkit-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
  /* } */
}



.form-head {
    color: #191919;
    font-weight: normal;
    font-weight: 400;
    margin: 0;
    text-align: center;
    font-size: 1.8em;
}

.error-message {
    padding: 7px 10px;
    background: #fff1f2;
    border: #ffd5da 1px solid;
    color: #d6001c;
    border-radius: 4px;
    margin: 30px 10px 10px 10px;
    text-align: center;
}

.demo-table {
    background: #ffffff;
    border-spacing: initial;
    margin: 15px auto;
    word-break: break-word;
    table-layout: auto;
    line-height: 1.8em;
    color: #333;
    border-radius: 4px;
    padding: 30px;
    width: 380px;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}

.demo-table .label {
    color: #888888;
}

.demo-table .field-column {
    padding: 15px 10px;
}

.demo-input-box {
    padding: 13px;
    border: #CCC 1px solid;
    border-radius: 4px;
    width: 100%;
    height: 60px;
}

.btnLogin {
    padding: 13px;
    background-color: #408161;
    color: #f5f7fa;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
    border: #408161 1px solid;
    font-size: 1.1em;
}

.btnInscription {
    padding: 13px;
    background-color: #286090;
    color: #f5f7fa;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
    border: #408161 1px solid;
    font-size: 1.1em;
}


.response-text {
    max-width: 380px;
    font-size: 1.5em;
    text-align: center;
    background: #fff3de;
    padding: 42px;
    border-radius: 3px;
    border: #f5e9d4 1px solid;
    font-family: arial;
    line-height: 34px;
    margin: 15px auto;
}

.terms {
    margin-bottom: 5px;
}

.error-info {
    color: #FF0000;
    margin-left: 10px;
}
a.logout-button {
    color: #09f;
}

/* Profile container */
.profile {
  margin: 20px 0;
}

/* Profile sidebar */
.profile-sidebar {
  padding: 20px 0 10px 0;
  background: #fff;
}

.profile-userpic span {
  float: none;
  margin: 0 auto;
  width: 100%;
  height: 50%;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  border-radius: 50% !important;
}

.profile-usertitle {
  text-align: center;
  margin-top: 20px;
}

.profile-usertitle-name {
  color: #5a7391;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 7px;
}

.profile-usertitle-job {
  text-transform: uppercase;
  color: #5b9bd1;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 15px;
}

.profile-userbuttons {
  text-align: center;
  margin-top: 10px;
}

.profile-userbuttons .btn {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 15px;
  margin-right: 5px;
}

.profile-userbuttons .btn:last-child {
  margin-right: 0px;
}

.profile-usermenu {
  margin-top: 30px;
}

.profile-usermenu ul li {
  border-bottom: 1px solid #f0f4f7;
}

.profile-usermenu ul li:last-child {
  border-bottom: none;
}

.profile-usermenu ul li a {
  color: #93a3b5;
  font-size: 14px;
  font-weight: 400;
}

.profile-usermenu ul li a i {
  margin-right: 8px;
  font-size: 14px;
}

.profile-usermenu ul li a:hover {
  background-color: #fafcfd;
  color: #5b9bd1;
}

.profile-usermenu ul li.active {
  border-bottom: none;
}

.profile-usermenu ul li.active a {
  color: #5b9bd1;
  background-color: #f6f9fb;
  border-left: 2px solid #5b9bd1;
  margin-left: -2px;
}

/* Profile Content */
.profile-content {
  padding: 20px;
  background: #fff;
  min-height: 460px;
}

.divShop{
  margin: 1%
}
.divShop a{
  color: white;
}

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

@function rem($value) {
@return unquote(($value/1px)/16+'rem');
}


.panier {
.count {
	position: absolute;
	height: 30px;
	width: 30px;
	background-color: #85cb33;
	border-radius: 500px;
	font-size: 14px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	top: 0px;
	right: 0px;
	color: #100b00;
	transform: translate(50%, -50%);
	z-index: 1;
}
}

.cart-btn-panier {
padding: 13px 15px;
border: 0;
border-radius: 30%;
background-color: #4caf50;
color: #ffffff;
text-transform: uppercase;
cursor: pointer;
outline: 0;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
transition: all ease 0.5s;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
margin: auto;
&:hover {
	background-color: darken(#4caf50, 4%);
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}
}

.wrapper{
  position: relative;
}


.placeholder {
  font-style: normal;
  position: absolute;
  font-size: 15px;
  pointer-events: none;
  left: 1px;
  top: 1px;
  transition: 0.1s ease all;
}

input:focus ~ .placeholder{
  top: 1px;
  font-size: 10px;
}