/* You can add global styles to this file, and also import other style files */


// Ce sont les paramètres du styles css
.divMenu {
  text-align: center !important;
}

.imgIcon {
  vertical-align: middle;
}

.divImage {

  border-radius: 20px 0rem 20px 0rem;
  background-color: hsl(216, 70%, 55%);
}

.divImage:hover,
.divImage:focus {
  background-color: #ff8303;

}



.aMenu{
  display: center;
  box-shadow: 0px 3px 3px 2px rgb(156, 153, 153);
  border-radius: 10px 10px 10px 10px;
  background-color: #f3f5f7;
  margin-bottom: 50px;
  color: black;
}

.aMenu:hover , .aMenu:focus{
  //box-shadow: 0px 5px 5px 2px rgb(135, 93, 66);
  background-color: #346cb0;
  transition: 0.5s;
  color: white;
}



.activeLink {
  color: white;
  text-decoration: underline;
  font-weight: bold;
}

.card-title {
  text-align: center;
}

.form-group a,
.form-group .btn-danger,
.form-group .btn-primary {
  margin-right: 8px;
}

.divMenu {
  display: flex;
  justify-content: center;
  margin: 0px;
}

.divImage p {
  margin-top: 22%;
  color: white;
}




// Le style css des sous menus
.aSousmenu{
  text-align: center !important;
  box-shadow: 0px 7px 3px 2px rgb(156, 153, 153);
  border-radius: 25px 0px 0px 0px;
  background-color: #f3f5f7;
  margin-bottom: 50px;
}

.aSousmenu:hover{
  // box-shadow: 3px 8px 5px 2px rgb(71, 206, 221);
  background-color: #346cb0;
  transition: 0.6s;
  // transform: rotate(180deg);
  outline: 1px dashed;

}
// .aSousmenu{
  //   background-color: wheat;
  // }
  .imgIcon{
    vertical-align: middle;
  }
  .divImage{

border-radius: 5px 0rem 5px 0rem;
background-color:hsl(216, 70%, 55%);
}
.divImage:hover, .divImage:focus{
  background-color:#ff8303;

}
.aSousmenu{
  color:black ;
}
.aSousmenu:hover, .aSousmenu:focus{
  color:white;

}

a.aSousmenu, a.aMenu{
  text-decoration: none;
}


// .nav-tabs .nav-item{
//   margin-right: 1px;
// }

// .nav-tabs .nav-item a.active{
//   border-top: 3px solid #687ae8;
//   border-radius: 15px 15px 0px 0px;
//   color: black !important;
//   // box-shadow: 5px 0px 5px 0px #687ae8;

// }




// Ceci définit les propriétés pour le logo
@media(min-width:768px){
  .logoCard{
    position: absolute;
    top: 0%;
    left: 1.7%;
    width: 115px;
    height: 130px;
  }
}

@media (max-width:767px){
  .logoCard{
    position: absolute;
    top: 0%;
    left: 5;
    width: 80px;
    height: 100px;

  }
}
@media(min-width:500px ) and (max-width:768px){
  .divMenu{
    width: 50%;
    block-size: fit-content;
  }
}

@media(min-width:769px ) and (max-width:992px){
  .divMenu{
    width: 30%;
    block-size: fit-content;
  }
}


@media(min-width:993px ) and (max-width:1200px){
  .divMenu{
    width: 20%;
    block-size: fit-content;
  }
}

@media(min-width:1301px){
  .divMenu{
    width:19%;
    block-size: fit-content;
  }
  .headerH1{
    margin-top: 100px;
  }
  .auth-header{
    height: 400px;
  }
}

.das .modal-content{
  background-color: red($color: #000000);
}


.myAuthForm {
  background-image: url("../images/illustration/banniere2.gif");
  // background-image: url("../images/illustration/banner1.gif");
  background-size: cover;
}

.hideOrShow{
  display: none !important;
}


.gras{
    font-weight: bold;
}
.Mycontainer {
    width:100%;
    margin:auto;
}
.left {
    margin-left:0;
    width: 50%;
    float: left;
    height:140px;
}
.right {
    width:50%;
    float: right;
    height:140px;
    clear:right;
    margin-right:0;
}


.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}