body {
  /*color: #454a55;*/
  /*font-family: Helvetica,sans-serif !important;*/
  font-size: 0.875rem;
  /*font-weight: 300;*/
  /*line-height: 2rem;*/
  font-family: Cambria, sans-serif !important;
  line-height: 1.428571429;
  color: #f7c3f4;
  background-color: #dcdfe3 !important;
  letter-spacing: 1.3px !important;
  display: block;
  /*background: url(../images/bg.jpg) repeat left top transparent;*/

}

img {
  max-width: 100%;
  max-height: 100%;
}


.annonce {
  min-height: 200px !important;
  min-width: 200px !important;
  height: 200px !important;
  width: 200px !important;
  margin: 1rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .02), 0 0 2px rgba(0, 0, 0, .05), 0 1px 4px rgba(0, 0, 0, .08) !important;
  /* border: 1px solid #d2dae2 !important;*/
  /* border-radius:10px !important;*/
  /* border-radius: 15px 15px 15px 15px 15px 15px 15px 15px!important;*/
  /*-moz-border-radius: 10px !important;
  -webkit-border-radius: 10px !important;*/
}

.annonce-full {
  height: 222px !important;
}

.annonce-full .card-header {
  height: 15% !important;
}

.annonce-full .card-body {
  height: 52% !important;
}

.annonce-full .card-footer {
  height: 30% !important;
}

.annonce .card-body {
  font-size: 10px !important;
  letter-spacing: 1.1px !important;
  height: 60%;
}

.annonce .card-body {
  font-size: 10px !important;
  letter-spacing: 1.1px !important;
   height: 110px !important;
}

.annonce .card-header {
  /*padding: 5px 10px;*/
  border-bottom: 1px solid #dee0ec;
  background-color: #fff;
  height: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  font-size: 11px !important;
  letter-spacing: 1.1px !important;
  font-weight: 600;
  text-overflow: ellipsis;
}


.annonce .card-footer {
  font-size: 10px !important;
  letter-spacing: 1.1px !important;
  height: 40px;
}

.annonce-intitule {
  width: 190px !important;
  display: flex;
  align-content: start;
  justify-content: start;
  overflow: hidden;
  word-break: break-all;
  height: 30px;
}

.sub-category-intitule {
  width: 190px !important;
  display: flex;
  align-content: center;
  justify-content: center;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.dg-header-1 {
  height: 9vh;
  background-color: #fff;
  color: #000;
  border-bottom: 1px solid #E5E5E5;
  border-top: 1px solid #E5E5E5;
  z-index: 10;
  box-shadow: 1px 2px 2px 1px rgba(228, 230, 238, 0.87);
}

.dg-header-2 {
  color: #fff;
  height: 46px;
  background: #FFFFFF;
  padding: 0 30px;
  box-shadow: 0 1px 2px rgba(223, 215, 215, 0.87);
  position: relative;
  z-index: 5;
}

.dg-footer {
  background-color: #142433 !important;
  font-family: "Helvetica neue", Helvetica, Arial, Sans-serif;
  color: #fff;
  height: 100% ;
  display:block;

}

.dg-content {
	  height: 800px ;
	  background-color: #dcdfe3 !important;
	  /*min-width: 550px !important;*/
	  display:flex;
	  flex-direction: row !important;
	  width: 100%;
	  overflow-y:auto;
	  overflow-x:hidden;
 }

.dg-content-2 {
  height: 100vh !important;
  background-color: #dcdfe3 !important;
}


.input-product-search {
  font-size: 12px;
}

.left-side-bar-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 100%;
  background-color: #fff !important;
  color: #1a75bc;
}

.left-side-bar-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100% - 50px) !important;
  overflow: auto !important;
  width: 100% !important;
  background-color: #fff !important;
}

.left-side-bar-bottom-1 {
  height: calc((100% - 50px) / 3) !important;
  margin-bottom: 1rem !important;
  width: 98% !important;
}

a.nav-link a {
  color: #000;
}

a.nav-link a.active {
  color: #007bff;
}

.welcometitlecontent {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 1.3px !important;
  display: block;
  /* Important to give the content a width */
  width: 100%;
  transform: translateX(100%);
  /* Animation start out of the screen */

  /* Add the animation */
  animation: move 20s linear infinite;
    /* infinite make reapeat the animation indefinitely */
  ;
}

.welcometitle {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: #1a75bc;
  color: white;
  height: 27px !important;
}

/* Create the animation */
@keyframes move {
  to {
    transform: translateX(-100%);
  }
}

.btn-valid {
  background-color: #91bc1a !important;
  color: #fff !important;
  min-width: 100px;
}


.btn-reset {
  background-color:#394d5e !important;
  color: #fff !important;
  opacity: 0.5 !important;
  min-width: 100px;
}

.btn-upload {
  background-color: #fbf5f5;
}


.pack {
  display: flex;
  border: 1px solid #dedede;
  border-radius: 10 px;
}

.pack-text {
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1rem;
}

.line {
  display: block;
  margin: 25px
}

.line h3 {
  text-align: center;
  border-bottom: 1px solid rgb(17, 11, 11);
  position: relative;
}

.line h3 span {
  background-color: white;
  position: relative;
  top: 10px;
  padding: 0 10px;
}

div.agile--auto-play.agile--no-nav-buttons.agile {
  height: 100% !important;
  width: 100% !important;
  margin-left: 2px !important;
  margin-right: 2px !important;
  box-sizing: border-box !important;
}

div.left-side-bar-bottom > *{
  height: 100% !important;
}
div.slide.agile__slide{
    height: 88% !important;
}
div.agile__list{
  height: 100% !important;
}
div.agile__track{
  height: 100% !important;
}
div.agile__slides.agile__slides--regular{
  height: 100% !important;
}
div.slide.agile__slide > *{
    height: 100% !important;
}
div.agile__list > *{
  height: 100% !important;
}

input.form-control.search-ville {
  height: 28px !important;
  min-width: 150px !important;
}

.im-detail {
  padding: .5rem !important;
  margin: .5rem !important;
}

div.im-detail img {
  max-width: 100% !important;
  max-height: 100% !important;
}

.det {
  font-size: 12px !important;
  letter-spacing: 1.3px !important;
  font-weight: 500 !important;
}

.det_info {
  color: #8294d0;
  text-decoration: none;
  font-size: 16px !important;
  letter-spacing: 1.3px !important;
  font-weight: 600 !important;
}

.det-an-intitule {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px !important;
  letter-spacing: 1.3px !important;
  font-weight: 600 !important;
}

.im-container {
  display: block;
  width: 100%;
  /*height:119px;*/
  /*max-width: 200px;*/
  height: 105px;
  overflow: hidden !important;
}

.liststylenone {
  list-style-type: none !important;
}

.headerlist {
  font-family: "myriad-pro", helvetica !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  font-size: 16px ;
  margin-bottom: 15px ;
  margin-top: 15px ;
  line-height: 31.5px ;
  color: white !important;
  color: white !important;
  box-sizing: border-box !important;
}

.headeraboutlist {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 1.1px;
  color: #6c757d;
}

.childlist {
  text-transform: lowercase !important;
  font-size: 14px ;
  line-height: 21px ;
  font-weight: 400 ;
  opacity: .6 !important;
  color: #fff !important;
}

.aboutlist {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 1px;
  color: #6c757d;
}

.copyright {
  font-size: 12px !important;
  font-weight: 300 !important;
  color: #fff !important;
}

.det-annonce {
  height: 5%;
}

.loader-class {
  /*position:fixed;*/
  top: 50%;
  /* left: 50%;
    -webkit-transform: translate(-50%, -50%);*/
  transform: translate(-50%, -50%);
  height: 75px !important;
  width: 100px !important;
  z-index: 1051;
}

.w-40 {
  width: 40% !important;
}

.w-60 {
  width: 60% !important;
}

.signup-page {
  top: 0% !important;
  position: fixed;
  background: rgb(2, 0, 36);
  background: linear-gradient(75deg, rgba(2, 0, 36, 1) 0%,
      rgba(242, 243, 247, 1) 0%, rgba(242, 243, 247, 1) 15%,
      rgba(242, 243, 247, 1) 35%, rgba(221, 226, 239, 1) 43%, rgba(176, 189, 222, 1) 60%,
      rgba(89, 177, 242, 1) 69%, rgba(40, 156, 240, 1) 80%, rgba(40, 156, 240, 1) 83%,
      rgba(30, 170, 244, 1) 85%);
  min-width: 200px !important;
}
.searchTerm:focus{
  color: #1a75bc ;
  height: 30px !important;
}
.searchTerm {
  border: 1px solid #4fa0d8;
  border-right: none;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #4fa0d8;
  width: 60%;
}
.searchButton {
  width: auto;
  height:28px !important;
  border: 1px solid #496bfe;
  background: #496bfe;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  width: 39%;
}

#logofooter{
	
	padding:1rem ;
}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
@media (max-width:576px){
	#commande{
		width: 250px;
		
	}
	.cmd-text{
		font-size:8px;
		font-weight: 600;
	}
	.nav-item{
	  width: 100% !important;
	}
	.dg-content{
	  flex-direction: column !important;
	}
	.left-side-bar-bottom-1{
	   width:100% !important;
	   
	}
	
	.rightbarparent{
	   width:100% !important;
	   height: 100% !important;
	   overflow:auto !important;
	}
	.leftbarparent{
	   width:100% !important;
	   height: 100% !important;
	   overflow:auto !important;
	}
	
	#bienservice, #ville, #categorie, #bienservice2, #ville1, #ville2, #categorie1, #categorie2, #categorieville {
		width: 100% !important;
		display:flex;
		align-items:center;
		justify-content:center;
		
		margin: 0 !important;
	}
	
}


@media (min-width: 576px) and (max-width: 768px) { 
	#commande{
		width: 400px;
	}
}
@media (min-width: 768px) and (max-width: 1200px) { 
	#commande{
		width: 450px;
	}
}
@media(min-width:1200px){
	#commande{
		width: 600px;
		
	}
}