@media screen and (max-width: 1024px) {

  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
  }
  .add-red{ box-shadow: 0 0 0 .1rem #FE0900;
					
  }

  :root {
    --aside-color:#062030;
    --youtube-red: #FE0900;
    --faible-password: #f8817d;
    --moyen-password: #93f5bf;
    --fort-password: #40d884;
    --tres-fort-password: #03b453;
    --primary-change: rgba(1,22,79,255);
    --warning-color: rgba(247,188,28,255);
    --secondary-change: rgba(154,156,139, 255);
    --primary-color: rgba(0,120,212,255);
    --secondary-color: rgba(98,100,167,255);
    --bck-color:#f5f5f5ff;
    --border-light-color: rgba(247,248,250,255);
    --light-color: rgba(16,3,3,255);
    --title-color:rgba(230,230,230,255);
    --gris-color: #dedfe079;
    --light-gris-color: #ccc;
    --text-color:#312c51;
    --paragraph-color:#71778fff;
    --border-color: rgba(244,99,5,255);
    --menu-color: rgb(126, 128, 128);
    --darck-color: rgba(38,25,27,255);
    --gris-leger: rgba(242,243,245,255);
    --second-gris-color: rgba(245,246,244,252);
    --access-color:#cceabb;
    --color-titles-black:#48426dff;
    --telegrame-blue:#2ba2dfff;
    --color-wrighting-telegram:#e7f2faff;
    --royal-bleu:#4169e1; 
  }






  .btn-telegram{
    background-color: var(--telegrame-blue) ;
    color: var(--color-wrighting-telegram);
    font-size: 1.5rem;
    padding: .5rem;
  }

  .img-container{
    width: 20rem;
    height: 100%;
    border-radius: 5%;

  }
  .img-blog{
    width: 100%;
    height: 100%;
    border-radius: 5%;
    /* object-fit: cover; */
    
  }
  html {
    font-family:'Cairo',
    /* 'Quicksand', sans-serif,'Josefin Sans',
   'Calibri',
    'Lucida Sans', 
    'Lucida Sans Regular', 
    'Lucida Grande', 
    'Lucida Sans Unicode',
     Geneva, 
     Verdana, */
      sans-serif;
      font-size: 80%;
    text-rendering: optimizeLegibility;
    font-variant-ligatures: no-common-ligatures;
    letter-spacing: .0475rem;
  }
  .background-boutique{
    background-image:url(../../images/baniere-boutique.png);
  background-size:contain;
  background-repeat: no-repeat;
  }
 /* ------------------- */
 .prev-slide-activity, .next-slide-activity {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next-slide-activity {
  right: 0;
  border-radius: 3px 0 0 3px;
}
 /* Position the "next button" to the right */
 .prev-slide, .next-slide {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: var(--menu-color);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: var(--gris-color);
}
.next-slide {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev-slide:hover, .next-slide:hover {
  background-color: rgba(0,0,0,0.8);
}
  .container-slider{
    /* width: 100%; */
    height: auto;
   padding: 1rem;
 
}
.mySlides {
  display: none;
}
.slideshow-container{
  max-width: 85%;
  position: relative;
  margin: auto;
   /* min-height: 300px; */
  }
  
.inheri-font{
  font-weight: inherit;
}
  .row-icon-litl-mobile{
    display: grid;
    grid-template-columns: 15% 85%;
    align-items: center;
  }
  .row-cote-mobile {
    display: flex;
    flex-direction: column;
    /* align-items: start; */
  }
  .input-quantity-mobile{
    width: 2rem;
    border: 1px solid var(--light-gris-color);
    font-size: 1rem;
    background-color: white;
    border-radius: 0 0.25rem 0.25rem 0;
  }
  input[type="number"]{
  max-width: 5rem;
  box-sizing: border-box;
  border: 1px solid var(--light-gris-color);
  border-radius: 4px;
  font-size: 1.075rem;
  font-weight: bold;
  background-color: white;
  padding: .5rem;
  height: calc(.715em + .925rem + 3px);
  line-height: 1.5;
  text-align:center;
  border-radius: 0 0.25rem 0.25rem 0;
 }
  .soulignement-mobile-bleu{
    width:1.5rem;height:1rem;background-color:var(--primary-change);bottom:-2rem;
    margin-left: auto;margin-right: auto;border-bottom-left-radius:5rem;border-bottom-right-radius:5rem;
   }
   .soulignement-mobile{
    width:1.5rem;height:1rem;background-color:var(--warning-color);bottom:-2rem;
    margin-left: auto;margin-right: auto;border-bottom-left-radius:5rem;border-bottom-right-radius:5rem;
   }
.clavier-code-secure{
cursor: pointer;
border:none;
color:var(--text-color);
padding-left:.2rem;
padding-right:.2rem;
padding-top:.1rem;
padding-bottom:.1rem ;
background:none;
font-size:.975rem;
}
  #engrenage-warning {
    animation: App-engrenage-warning infinite 29s linear;
  }
   #engrenage-bleu {
    animation: App-engrenage infinite 29s linear;
  }
   #engrenage-orange {
    animation: App-engrenage-warning infinite 29s linear;
  }
 
   @keyframes App-engrenage-warning {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }
.creativity-mobile{
    width: 15rem;
    z-index:1;position:absolute;top:45%;left:6%;
  }
/* .slogan-creativity-mobile{
    width: 5rem;
  } */
.engrenage-orange-mobile{
    position:absolute;top:21%;left: 14%;width:2rem;
  }
  .engrenage-bleu-mobile{
   position:absolute;top:30.5%;left:19.5%; width:2rem;
  }
  .engrenage-warning-mobile{
  position:absolute;top:30%;left:8.3%; width:2rem;
  }
   .mt-mobile-1 {
    margin-top: 1rem;
  }
  .mbm-2{
 margin-bottom: 2rem;
  }
   .mbm-1{
 margin-bottom: 1rem;
  }
   h5 {
   padding-bottom: .3rem;
   font-family:'Cairo',
      sans-serif;
  }
  .color-titles-black-mobile{
  color:#686d76;
}

h3
{
  padding-bottom: .3rem;
  font-family:'Cairo',
  sans-serif;
}
  h1 {
    font-size: 1.575rem;
  padding-bottom: .3rem;
  font-family:'Cairo',
  sans-serif;
  color:var(--text-color);
  /* font-weight:bold; */
  }
  h2 {
padding-bottom: .3rem;
font-family:'Cairo',
sans-serif;
   
  }
.second-color{
  color:var(--primary-change);
}
h4{
    font-size: .975rem;
    font-family:'Cairo',
    sans-serif;
}
  .hide-in-mobile {
    display: none;
  }
  form {font-family:'Cairo',
  /* Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial, */
  sans-serif;}
  p {
    font-size: 1.095rem;
    font-weight: 400;
     font-family:'Cairo',
      /* Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial, */
      sans-serif;
    color: var(--paragraph-color);
    line-height:1.885rem;
    padding-bottom: .2rem;
  }
  .p-mobile{
    font-size: 1.395rem;
    font-weight: 400;
     font-family:'Cairo',
      /* Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial, */
      sans-serif;
    color: var(--paragraph-color);
    line-height:1.885rem;
    padding-bottom: .2rem;
  }

  body {
    /* background-color: var(--bck-color); */
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
  }
  .nav-link{
    font-weight: bold;
  }
  .avatar-author-corse{
    width: 5rem;
  }
    .menu-sommaire-show {
     padding: 1rem;
    display: flex;
   flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: .925rem;
    font-weight: 500;
    color: var(--secondary-color);
  }
   .rotate-select{
    transform: rotateZ(180deg);
  }
  .logo-width{
    width: 10rem;;
  }
   .stars-vide{
    background-image: url('../../images/stars-vide-phon.png');
     width: 1.465rem;
    background-size: cover;

  }
  .align-stars{
    display: grid;
    grid-template-columns:  1fr 1fr 1fr 1fr 1fr ;
    grid-column-gap: .5rem;
    max-width: 19rem;
    cursor:pointer;
  }
  .stars-note-plein{
 background-image: url('../../images/stars-phon.png');
 width: 1.465rem;
    background-size: cover;
  
  }
   .set-raiting{
     position: fixed;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    z-index:1000;
     border-radius:.5rem;
     padding:2rem;
     background-color: white;
      
  }
   .sombre{
     /* z-index: 1700; */
    background: rgba(243, 243, 243, 0.2);
  }
   .add-mobile::after {
    content: "\002B"; /* Unicode character for "plus" sign (+) */
    font-size: 1.5rem;
    color: #777;
    margin-left: 5px;
  }
    .add-color-white-mobile::after {
    content: "\002B"; /* Unicode character for "plus" sign (+) */
    font-size: 1.765rem;
    color: var(--title-color);
    margin-left: 5px;
  }
   .add-white-mobile::after{
    content: "\00274C"; /* Unicode character for "plus" sign (+) */
    font-size: 1.5rem;
    color: white;
    margin-left: 5px;
  }

  .ring {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50px, -50%);
      width: 50px;
      height: 50px;
      background: transparent;
      border: 5px solid transparent;
      border-radius: 50%;
      z-index: 1700;
    }
    .ring::before{
      content: '';
      position: absolute;
      top: 0px;
      left: -1px;
      width: 100%;
      height: 100%;
      border: 3px solid #dedfe079;
      border-top: 3px solid rgba(0,120,212,255);
      border-right: 3px solid rgba(0,120,212,255);
      border-radius: 50%;
      animation: animateCircle 1100ms linear infinite;
    }
    @keyframes animateCircle{
      0%
      {
        transform: rotate(45deg);
      }
      100%
      {
        transform: rotate(360deg);
      }
      }
  .background-web-dev{
background-image: url('../../images/web-dev-ptit-format.jpg'); 
background-size: cover;
opacity: .3;
margin-right: 0;
width: 100%;
height:100%;
}
   /* checkbox de activation dea annonces des user pro */
  .container-statut-ad input[type="checkbox"]{
     position: relative;
     width: 35px;
     height: 10px;
     -webkit-appearance: none;
     background:linear-gradient(0deg,var(--menu-color),var(--menu-color));
     outline: none;
     border-radius:20px ;
    
   }
   .container-statut-ad input:checked[type="checkbox"]
    {
       background:linear-gradient(0deg, rgb(177, 214, 241) ,rgb(87, 167, 228));
    }
  .container-statut-ad input[type="checkbox"]::before{
     content: '';
     position: absolute;
     top: -3px;
     left: 0;
     width: 15px;
     height: 15px;
     background:linear-gradient(0deg,white,white);
      border-radius: 15px;
       box-shadow: 0 0 0 .1rem var(--menu-color);
       transform: scale(.98,.96);
       transition: .5s;
        }
        .container-statut-ad input:checked[type="checkbox"]::before
         {
           background:linear-gradient(0deg, var(--primary-color), var(--primary-color));
left: 20px;
         }
       
     .cadre-ul{
    border:1px solid var(--gris-color);
    border-radius: .3rem;
    margin-top:1rem;
    background-color: white;
  }
  .cadre-ul-orange
  {
    
    border-right:1px solid var(--light-gris-color);
    border-bottom: 1px solid var(--light-gris-color);
    border-top: 1px solid var(--light-gris-color);
    border-left:1px solid var(--light-gris-color);
    border-radius: .3rem;
    margin-top:1rem;
    background-color: white;
   
  }
  .cadre-ul-orange ul{
font-size:1.176rem;color:var(--text-color);
  }
   .cadre-ul-primary-change
  {
    border-right:1px solid var(--light-gris-color);
    border-bottom: 1px solid var(--light-gris-color);
    border-top: 1px solid var(--light-gris-color);
    border-left:1px solid var(--light-gris-color);
  border-radius: .3rem;
    margin-top:1rem;
    background-color: white;
  }
   .cadre-ul-primary-change ul {
     font-size:1.176rem;color:var(--text-color);
   }
   .cadre-ul-warning-color
  {
    border-right:1px solid var(--light-gris-color);
    border-bottom: 1px solid var(--light-gris-color);
    border-top: 1px solid var(--light-gris-color);
    border-left:1px solid var(--light-gris-color);
  border-radius: .3rem;
    margin-top:1rem;
    background-color: white;
  }
  .cadre-ul-primary-color{
    border-right:1px solid var(--light-gris-color);
    border-bottom: 1px solid var(--light-gris-color);
    border-top: 1px solid var(--light-gris-color);
    border-left:1px solid var(--light-gris-color);
    border-radius: .3rem;
    margin-top:1rem;
    background-color: white;
  }
  .text-center{
    text-align: center;
  }
   .mini-img{
    width: 5rem;
  }
   .img-home-page{
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    object-fit: cover;
    
  }
  .img-home-page-prof{
    width: 10rem;
    height: 10rem;
    border-top-left-radius: 10%;
    border-bottom-left-radius: 50%;
    border-top-right-radius: 25%;
    border-bottom-right-radius: 25%;
    object-fit: cover;
    
  }
   .align-right-mobile{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .medium-font{
    font-size:0.965rem;
    line-height: inherit;
  }
  .big-title{
    font-size: 2rem;
  }
 li{
  background-color: white;
 }
.text-color-mobile{
   color:var(--text-color);
}
   .container-mini-fluid {
    width: 95%;
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 5rem;
    margin-bottom: 10rem;
    margin-right: auto;
    margin-left: auto;
  }
  .badge-success {
    background-color: var(--access-color);
   padding: .1rem;
    font-size: .775rem;
    color: #03b453;
    font-weight: 300;
    border-radius: 0.2rem;
  }
  .badge-info {
    background-color: var(--bck-color);
   padding: .1rem;
    font-size: .975rem;
    color: var(--menu-color);
    font-weight: medium;
    border-radius: 0.4rem;
    text-align: center;
  }
   .badge-light {
    background-color: #a0dadf;
    padding-bottom: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: .3rem;
    font-size: 1rem;
    width: auto;
    font-weight: medium;
    border-radius: 0.4rem;
    color: white;
   
  }
  .img-back-home{
    /* padding: 2rem; */
    /* position: relative; */
   background-image: url('../../images/search-job-ptit-frmt.jpg');
    background-size: cover;
    /* opacity: 0.5; */
    /* height: auto; */
  }
   .badge-warning {
  background-color:  #fdfadf;
   padding-bottom: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: .3rem;
    font-size: 1rem;
    width: auto;
    font-weight: medium;
    border-radius: 0.4rem;
    color: #57511f;
  }
    .badge-response {
  /* background-color:  var(--title-color); */
  display: flex;
  align-items: center;
  border:1px solid var(--text-color);
   padding-bottom: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: .3rem;
    font-size: 1rem;
    width: auto;
    font-weight: medium;
    border-radius: 0.4rem;
    color: var(--text-color);
  }
  .badge-depart {
    background-color: #78DEC7;
    padding-bottom: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: .3rem;
    font-size: 1rem;
    color: var(--text-color);
    font-weight: medium;
    border-radius: 0.4rem;
  }
  .badge-medium {
    background-color: #F38BA0;
    padding-bottom: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: .3rem;
    font-size: 1rem;
    color: var(--text-color);
    font-weight: medium;
    border-radius: 0.4rem;
  }
  .badge-pro {
    background-color: #52006A;
    padding-bottom: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: .3rem;
    font-size: 1rem;
    color: var(--title-color);
    font-weight: medium;
    border-radius: 0.4rem;
  }
  .badge-entreprise {
    background-color: #FF7600;
    padding-bottom: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: .3rem;
    font-size: 1rem;
    color: var(--text-color);
    font-weight: medium;
    border-radius: 0.4rem;
  }
  .badge-special {
    background-color: #E5D549;
    padding-bottom: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: .3rem;
    font-size: 1rem;
    color: var(--text-color);
    font-weight: medium;
    border-radius: 0.4rem;
  }
   .mosaiq-background{
   background-image:url('../../images/mosaiq-arr-plan.png');
   background-size:center;
  }
  .backplan {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(19, 19, 24, 0.685);
    z-index: 1900;
  }
  #body-cv {
    position: relative;
  }
  .absolute {
    position: absolute;
    top: 20%;
    left: 10%;
    z-index: 1999;
  }
    .container-cv{
  padding: 1rem;
  height: auto;
  max-width: 60rem;
  /* position: relative; */
  border: 1px solid var(--light-gris-color);
  border: 1px solid var(--gris-color);
  background-color: white;
  border-radius: 0.8rem;
  }
  .hidden {
    display: none !important;
  }
    .btn-danger{
   border-radius: 3rem;
    background-color: var(--youtube-red);
    border: 1px solid var(--youtube-red);
    box-shadow: 0 16px 22px -17px var(--youtube-red);
    color: var(--title-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: .975rem;
    line-height: 20px;
     padding: .4rem;
    outline: none;
    position: relative;
     height: calc(1.125em + 0.1rem + 1px);
   box-shadow: 0 2px #833602;
  }
  
  .like-vide{
    background-image: url('../../images/like.png');
    background-size: cover;

  }
  .like-plein{
    background-image: url('../../images/like-plein.png');
    background-size: cover;

  }
  /* .new-message {
    position: absolute;
    left: 50%;
    top: -10%;
    transform: translate(-50%, -50%);
    font-size: 1.975rem;
    padding: 0.5rem;
    font-weight: 600;
    border-radius: 50%;
    height: 0.825rem;
    width: 0.825rem;
    color:  var(--border-color);
  } */
  .input-group {
    width: auto;
  }
  .input-group-prepend {
    display: -ms-flexbox;
    display: flex;
  }
  .input-group-prepend {
    margin-right: -1px;
  }
  .input-group-append {
    margin-left: -1px;
  }
  .custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    margin-bottom: 0;
  }
  .custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    margin: 0;
    opacity: 0;
  }
  .custom-file-input:focus ~ .custom-file-label {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
  .custom-file-input ~ .custom-file-label[data-browse]::after {
    content: attr(data-browse);
  }
  .custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(0.75em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--menu-color);
    background-color: #fff;
    font-size: 0.925rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
  }
  .custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(0.75em + 0.425rem + 2px);
    padding: 0.525rem 0.75rem;
    line-height: 1.5;
    color: var(--menu-color);
    content: "Parcourir";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0;
  }
  .cv {
    width: 90%;
    border-radius: .4rem;
    padding: 1rem;
    height: auto;
    border: 1px solid var(--light-gris-color);
    background-color: var(--bck-color);
    z-index: 1000;
  }
  .baniere-aside-mobile {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-image: url("../../images/prof-baniere.jpg");
    background-size: cover;
  }
  .icon-connexion {
    cursor: pointer;
    padding: 0.5rem;
  }
  .menu-sub-mobile {
    position: fixed;
    right: 0;
    top: 7.5rem;
    transform: translateX(100%);
    transition: transform 0.8s ease-in-out;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 31px -17px rgba(0, 31, 97, 0.6);
    border: 5px solid var(--warning-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1999;
    height: 169px;
    width: 290px;
    max-width: calc(100% - 10px);
    padding: 0.5rem;
  }
  .menu-sub-mobile.visible {
    transform: translateX(-10px);
  }
  .menu-sub-mobile li {
    list-style: none;
    padding: 0.125rem;
  }
  .menu-sub-mobile a {
    color: var(--light-color);
    font-size:  1.075rem;
  }
  .menu-sub-mobile #connexion::before {
    content: url("../images/identification.png");
    vertical-align: middle;
    margin: 1rem;
  }
  .menu-sub-mobile #mon-compte::before {
    content: url("../images/compte.png");
    vertical-align: middle;
    margin: 1rem;
  }
  .menu-sub-mobile #inscription::before {
    content: url("../images/inscription.png");
    vertical-align: middle;
    margin: 1rem;
  }
  .menu-sub-mobile #inscription-pro::before {
    content: url("../images/school-compte.png");
    vertical-align: middle;
    margin: 1rem;
  }
  .menu-sub-mobile #deconnected::before {
    content: url("../images/compte_nok.png");
    vertical-align: middle;
    margin: 1rem;
  }
  input[type="password"]::placeholder {
    color: var(--menu-color);
    font-size: 0.925rem;
    transition: ease-in-out, font-size 0.35s ease-in-out;
  }

  input[type="text"]::placeholder {
    color: var(--menu-color);
    font-size: 0.925rem;
    transition: ease-in-out, font-size 0.35s ease-in-out;
  }
  textarea::placeholder {
    color: var(--menu-color);
    font-size: 0.925rem;
    transition: ease-in-out, font-size 0.35s ease-in-out;
  }
  input[type="email"]::placeholder {
    color: var(--menu-color);
    font-size: 0.925rem;
    transition: ease-in-out, font-size 0.35s ease-in-out;
  }
  input[type="email"]:focus::placeholder {
    font-size: 0.525rem;
  }
  input[type="number"]:focus::placeholder {
    font-size: 0.525rem;
  }
  input[type="password"]:focus::placeholder {
    font-size: 0.525rem;
  }
  input[type="text"]:focus::placeholder {
    font-size: 0.525rem;
  }
  textarea:focus::placeholder {
    font-size: 0.525rem;
  }
  .content-mobile {
    padding: .2rem;
    display: flex;
    flex-direction: column;
    background-color: white;
  }
    .bck-card-employeur-mobile {
     height: 100px;
    width: 100px;
    border-radius: 50%;
    background-image: url("../../images/school.png");
    background-size: cover;
    background-repeat: no-repeat;
     margin-right: 2rem;
  }
   .round-image-gf {
    border-radius:1rem;
    padding: 7px;
    width: 60%;
  }
    .icon-search-logo
  {
    width:1rem;
    position:absolute;
    top:0;
    left:0;
  }
.gras{
    font-weight: bold;
  }
  .grid-logo{
    position: relative;
    display:grid;
  }
  .grid-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  
  .grid-general-logo{
  display: grid;
  grid-template-columns:1fr 5fr;
  align-items: center;
  grid-column-gap: 0rem;
  padding: .5rem;
  }
.rotate-icon-search{
    animation: icon-search-rotate infinite 8s linear;
  }
@keyframes icon-search-rotate {
  0% {
   transform: rotate3d(1, 1, 0, 0deg);
   
  }
  25% {
   transform: rotate3d(1, 1, 0, 90deg);
  }
  50% {
  transform: rotate3d(1, 1, 0, 180deg);
  }
  75% {
   transform: rotate3d(1, 1, 0, 270deg);
  }
  100% {
   transform: rotate3d(1, 1, 0, 360deg);
  }
}
 .dropdown-white {
    position: relative;
    text-align: center;
    padding: 1rem;
  }
   .dropbtn-white {
    color: var(--primary-color);
    font-weight: inherit;
    padding: 12px;
    font-size: 1.625rem;
    font-family:'Cairo',
    /* 'Quicksand', sans-serif,'Josefin Sans',
   'Calibri',
    'Lucida Sans', 
    'Lucida Sans Regular', 
    'Lucida Grande', 
    'Lucida Sans Unicode',
     Geneva, 
     Verdana, */
      sans-serif;
    background: none;
    border: none;
    vertical-align: basline;
    cursor: pointer;
  }
 .dropdown-content-white {
    display: none;
    text-align: start;
    position: absolute;
    background-color: white;
    font-size: 1.625rem;
    min-width: 95%;
    right: 0;
    box-shadow: 0 1px 6px rgb(204, 203, 203);
    border: 5px solid var(--primary-change);
    border-radius: 2rem;
    z-index: 1;
  }
   .dropbtn-white::after {
    content: url("../images/categories-icon.png");
  }
   .dropbtn-white {
    outline: none;
  }
   .dropdown-content-white a {
    color: var(--light-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  .show {
    display: block;
  }
   .logo-mobile{
    padding: 1rem;
     width: 10rem;
  }
    /* ceci est accordion */
  .accordion {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    cursor: pointer;
    background-color: var(--gris-leger);
    color: var(--primary-change);
    padding: .5rem;
    text-align: right;
    border: .1rem solid var(--gris-color);
    width: auto;
    outline: none;
    transition: 0.7s;
    margin-top: auto;
    margin-bottom: .4rem;
  }

  .accordion-city {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    cursor: pointer;
    background-color: var(--gris-leger);
    color: var(--primary-change);
    padding: .5rem;
    text-align: right;
    border: .1rem solid var(--gris-color);
    width: auto;
    outline: none;
    transition: 0.7s;
    margin-top: auto;
    margin-bottom: .4rem;
  }

  .panel {
    padding: .2rem;
      border: 1px solid var(--gris-color);
    margin-bottom: auto;
    background-color: var(--border-light-color);
    height: 0;
    overflow: hidden;
    font-family:'Cairo', 
    /* "Segoe UI", "Segoe WP", "Segoe UI", "Segoe WP", "Quicksand",
      sans-serif, "calibri", Tahoma, Arial,  */
      sans-serif;
    transition: height 1000ms;
  }

  .accordion::after {
    content: "\276F"; /* Unicode character for "plus" sign (+) */
    font-size: 1.5rem;
    color: #777;
    margin-left: 5px;
    
  }

  .accordion-city::after {
    content: "\276F"; /* Unicode character for "plus" sign (+) */
    font-size: 1.5rem;
    color: #777;
    margin-left: 5px;
    
  }

  .active:after {
    transform: rotate(90deg);
      transition: transform 0.2s ease-in-out,
      top 0.2s 0.2s ease-in-out;
  }
   .dropdown-button{
    color: var(--darck-color);
    font-weight: inherit;
    padding: .5rem;
    font-size: .725rem;
    font-family:'Cairo', "Arial", sans-serif;
    background: none;
    border: 1px solid black;
    vertical-align: basline;
    cursor: pointer;
    border-radius: .2rem;
  }
   .dropdown-button::after {
      content:url("../images/flech-drop.png");
      color: var(--darck-color);
      margin-left: .2rem;
  }
  .dropdown-menu{
    padding: 1.5rem;
    position: absolute;
    background-color:white;
    font-size: 1.025rem;
    min-width: 15rem;
    left: 0;
    border-radius: .3rem;
    box-shadow: 0 1px 6px rgb(119, 118, 118);
    border: 1px solid var(--primary-change);
    z-index: 1;
  }
  .dropdown-menu li a{
    color: var(--darck-color);
  }
 
 
    .img-ads-cadre{
      position: relative;
    width: 30rem;
    height: 40rem;
    background-image: url("../../images/prof-baniere.jpg");
    background-size: cover;
    background-repeat: no-repeat;
     margin-right: 2rem;
    
  }
  .view-text-scroll-ads{
    width:16rem;
    height:15rem;
    position:absolute;
    left:4.9rem;top:4rem;
    background-color: rgb(0, 0, 0,0.3);
    border-radius: .5rem;
    padding: .5rem;
    
  }
  #textadshome{
  font-size: 1.675rem;
 color: var(--title-color);
 font-weight: bold;
 letter-spacing: .1225rem;
  }
    .sommaire-item {
    font-size: .925rem;
    color: var(--text-color);
    align-items: center;
     
  }
.sommaire-item-category {
  /* text-align: right; */
    font-size: 1.125rem;
    color: var(--text-color);
  }
  
   .menu-sommaire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-evenly;
    align-items: center;
    font-size: 1.625rem;
    color: var(--secondary-color);
  }
    .icone-chapitre::before {
     margin-right: .4rem;
    content: url("../images/chapitre.png");
  }
   /* grande carte de description du cours */

  .description-corse {
    position: relative;
    color: var(--text-color);
    border-radius: 0.3rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    font-size: 1.725rem;
  }
  
 
  .second-row-description-corse {
    color: var(--menu-color);
  }
  .thert-row-description-corse {
    align-items: center;
    display: flex;
    flex-direction: row;
  }
  /* fin decription cours */
  
    .baniere-mawsouaa{
   display: flex;
   flex-direction: column;
    color:var(--title-color);
     /* background-color:#312c51; */
     background: linear-gradient( #001334ff ,#041b81ff);
    height: auto;
    padding: 1rem;
  }
  .icon-grid{
 margin-right: 10px;
}
.icon-big-menu-width{
   width: 2.465rem;
}
.icon-menu-width{ 
    width: 1.465rem;
}
.mini-icon-menu-width{ 
    width: .965rem;
}
  .statut-show{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border-top-right-radius: .4rem;
  }
    .back-blue{
width: auto;
border-radius: .9rem;
padding: 3rem;
color: var(--title-color);
  }
  .white-back{
    background-color: rgb(0, 0, 0,0.3);
  }
  .reset-icon{
    border:none;
    position:absolute;
    top:30%;
    right:2%;
    cursor:pointer;
  }
   .minimyBarPassword{
  width: 10%;
  height:.555rem;
  border-radius: 3rem;
  font-size:.995rem;
  color: var(--title-color);
 }
   .minimyProgressPassword{
    width: 100%;
   background-color: #cecbcb ;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
   border: 1px solid var(--light-gris-color);
    border-radius: 5rem;
 }
 .minimyProgressCorse{
   width: 100%;
   background-color: #cecbcb ;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.002);
   /* border: 1px solid var(--light-gris-color); */
    border-radius: 5rem;
 }

 .minimyBarCorse{
  width: 10%;
  height:.355rem;
  border-radius: 3rem;
  background-color: #00bd56;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:.395rem;
  color: var(--title-color);
  font-weight: 600;
 }
   .img-anim{
      border-radius: 50%;
    padding: 7px;
    width: 10rem;
    height: 10rem;
animation: App-logo-school infinite 20s linear;
  }
  
@keyframes App-logo-school {

  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(2.1);
   
  }
   100% {
    transform: scale(0.5);
  }

}
    .img-corse{
    width: 100%;
    height: 100%;
    border-radius: 0.6rem;
    object-fit: cover;
  }
   .dropbtn-blue{
    outline: none;
  }
   .dropdown-blue{
    position: relative;
    text-align: center;
    padding: 1rem;
  }
    .dropdown-content-blue{

    background-color: var(--primary-change);
    position: absolute;
    width: 90%;
    right: 0;
    box-shadow: 0 1px 6px rgb(204, 203, 203);
    border: 5px solid var(--primary-change);
    border-radius: 2rem;
    z-index: 1;
  }
  .dropbtn-blue {
    color: var(--primary-color);
    font-weight: inherit;
    padding: 12px;
    font-size: 1.625rem;
    background: none;
    border: none;
    vertical-align: basline;
    cursor: pointer;
  }
  .dropbtn-blue::after {
    content: url("../images/categories-blue.png");
  }
   .icon-ok-grid-mobile{
  display: flex;
  flex-direction: row;
  align-items: center;
}
   .baniere-dev{
    /* height: 36rem; */
    padding-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
    /* background: linear-gradient( #001334ff ,#041b81ff); */
    /* position: relative; */
  }
  .title-baniere-web{
  padding:.5rem;
   /* position:absolute; */
   /* left:0; */
   /* top:0; */
  color:var(--title-color);
}
  .grid{
display: grid;
max-width: 25rem;
grid-template-columns: repeat(4, 1fr);
grid-gap: .5rem;
justify-content: center;
}
.grid .item{
  border:1px solid var(--menu-color);
  background-color:var(--second-gris-color);
  padding-left:1rem;
  padding-right:1rem;
  padding-top:.5rem;
  padding-bottom:.5rem ;
  border-radius:.5rem;
  font-size:12px;
}
.grid .item:hover{
   background-color:var(--gris-color);
}
#clavier{
cursor: pointer;
border:none;
color:var(--darck-color);
padding-left:1rem;
padding-right:1rem;
padding-top:.5rem;
padding-bottom:.5rem ;
background:none;
font-size:1.665rem;
}
#clavier:hover{
color: var(--darck-color);

}

  #box-drapeau{
    
    position: absolute;
    top: 10%;
    right: 5%;
     width: 50px;
    height: 50px;
    margin: 7% 0 0 35%;
    border-radius: 50%;
    overflow: hidden;
    
  }
  #box-drapeau img{
height: 100%;
 animation:spin 10s linear infinite;
  }
  #shadow-drapeau{
    width: 51px;
    height: 51.5px;
    position: absolute;
    border-radius: 50%;
    margin-top: -53.5px;
      box-shadow: inset -1rem 0rem 1rem .2rem rgb(31, 31, 31);

  }


@keyframes spin {
  0%{
    margin-left: -50px;
  }
  100%{margin-left: 0px;}
}
  .close {
    width: 4rem;
    background-color: #f9d5bb;
    color: var(--text-color);
    font-size: 2rem;
    text-align: center;
    border-radius: 0.5rem;
    cursor: pointer;
  }
    .title-corse {
    color: var(--text-color);
    font-size: 1.275rem;
    font-weight: bold;
    line-height: 3rem;
  }

    .back-light-corses{
      display: flex;
      justify-content: center;
      align-items: center;
    background-color: var(--darck-color);
    font-size: .975rem;
    line-height: .675rem;
    text-align: center;
    padding: .5rem;
    border-radius: .2rem;
    color: var(--title-color);
  }
   .img-back{
    margin-right: 0;
    margin-left: 0;
    background-image: url('../../images/search-job-ptit-frmt.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    height: 19rem;
    position: relative;
  }
  .bleu-back-ads
  {
    
    /* width: auto; */
    /* padding: 1rem; */
    color:var(--primary-change);
    font-size: 1.025rem;
    font-weight: 600;
   /* height: auto; */
    /* padding-left: 1rem;
    padding-right: 1rem; */
    /* border-radius: .2rem; */
    /* position:absolute;left:5%;bottom:5%; */
    /* background-color:var(--primary-change); */
  }
     .back-blue-ads{
width: 20rem;
height: 15rem;
background-color: var(--primary-change);
border-radius: .9rem;
padding: 3rem;
color: var(--title-color);
  }
  .dropdown-content-admin {
    /* display: none; */
    border: 2px solid var(--light-gris-color);
    border-radius: .6rem;
    /* position: absolute; */
    color: var(--text-color);
    /* top: 2.1rem; */
    background-color: var(--title-color);
    min-width: 20rem;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /* z-index: 1; */
  }
   .title-chapter {
    padding: 1rem;
    display: grid;
    grid-template-columns: 10% 90%;
    align-items: baseline;
    grid-gap: 0.1rem;
  }
  .title-chapter-category{
   transition: left 700ms, transform 700ms;
    left: 0;
    white-space: nowrap;
    /* text-align: left; */
}
 .title-chapter-profile {
   padding-left: .5rem;
    padding-bottom: .8rem;
    padding-top:.8rem;
    height: 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    align-items: baseline;
  }
 .sommaire-item-profile {
    color: var(--text-color);
     font-size: 1.025rem;
  }
  .current-video {
    background-color: rgb(217, 227, 250);
  }
  .current-video a {
    color: var(--darck-color);
  }

  .player-mobile::before {
   content: url("../images/player-phon.png");
  width: 1.465rem;
  }
  .legende-video {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 1.625rem;
    padding: 2rem;
    border-bottom: 1px solid var(--gris-color);
  }
      .back-darck-ads{
width: 60%;
height: auto;
background-color: var(--border-light-color);
border-radius: .9rem;
padding: 3rem;
color: var(--text-color);
  }
.align-ul-mobile{
  text-align: left; padding:1rem;
}
 .img-sous-baniere{
   width: 100%;
    height: 10rem;
    border-radius: .4rem;
    object-fit: cover;
  }
   .back-card-cv{
  position: relative;
  background-color: white;
  padding: .6rem;
  font-size: 1.075rem;
  color: var(--primary-change);
  border-radius: .4rem;
  }
  .grid-cv-avatar-pro{
    border-radius: .5rem;
    display: grid;
    grid-template-columns: 1fr 4fr ;
    align-items: center;
    padding: .5rem;
    position: relative;
  }
  .avatar-cv{
    width: 5rem;
  }
  .grid-cv{
    border-radius: .5rem;
    width: 100%;
    display: flex;
  flex-direction: column;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    justify-content: center;
    align-items: center;
  }
  .grid-cv-avatar{
    border-radius: .5rem;
    display: grid;
    grid-template-columns: 45% 60%;
    align-items: center;
    padding: 1rem;
  }
  .marge1cv{
    padding: .4rem;
    width: 100%;
    background-color:var(--primary-change);
    min-height: 30rem;
    color: var(--title-color);
  }
  .marge1cv p{
  color: var(--title-color);
  font-size: 1.325rem;
  line-height: 1.9rem;

  }
  .marge2cv{
  padding-left: .5rem;
  width: 100%;
  min-height: 30rem;
   
  }
   .title1-cv {
    font-size: 1.557rem;
    font-family:'Cairo',
    /* 'Quicksand', sans-serif,'Josefin Sans',
   'Calibri',
    'Lucida Sans', 
    'Lucida Sans Regular', 
    'Lucida Grande', 
    'Lucida Sans Unicode',
     Geneva, 
     Verdana, */
      sans-serif;
  }
 .avatar-cv-pro{
    width: 5rem;
  }
   .avatar-corse{
     padding:1rem; width:10rem; position:absolute;bottom:0;right:0;
  }
   .bleu-back
  {
    padding:1rem;
    width: 30rem;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--title-color);
    border-radius: .5rem;
    position:absolute;
    left:5%;
    top:23%;
  }
  .title-ads-home-mobile
  {
  
    font-size: 2rem;
     font-weight: 550;
  }
 .slideshow-container{
 max-width: 98%;
  position: relative;
  margin: auto;
  /* min-height: 300px; */
 }
 .mySlides {
  display: none;
}
/* Next & previous buttons */
.prev-slide-mobile, .next-slide-mobile {
  background-color: rgba(248, 246, 246, 0.3);
  cursor: pointer;
  position: absolute;
  top: 50%;
  /* right:-2rem; */
  width: auto;
  margin-top: -22px;
  padding: 8px;
  color: var(--light-gris-color);
  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-slide-mobile {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev-slide-mobile:hover, .next-slide-mobile: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:#eee;
}

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

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

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
 .home-video{
     background-color: var(--darck-color);
   width: auto;
  border-radius: 4px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
 overflow: hidden;
  }
  .home-video video{
  width: 100%;
  min-height: 552px;
  height: 100%;
  /* border-radius: 4px; */
  }
  
    .content-darck {
     color: var(--title-color);
    position: relative;
    /* padding: 2rem; */
    display: flex;
    flex-direction: column;
    background-color: var(--darck-color);
    border-top-right-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
  }
  .log-mawsouaa-mobile{
    width: 5rem;
  }
  
    .btn-buy{
    margin-bottom: 1rem;
    background-color: var(--border-color);
    color: var(--title-color);
    cursor: pointer;
    line-height: 20px;
    padding: .5rem ;
    font-weight: 500;
    outline: none;
    border: 1px solid var(--border-color);
    position: relative;
   box-shadow: 0 2px#830b02;
    padding: .5rem;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    font-size: .975rem;
  }
  
   .btn-buy:active{
      box-shadow: 0 0#830b02;
    top: 4px;
   }
   .container-form-mobile{
     width: 100%;
     padding: .5rem;
   }
   .custome-search-form-mobile{
    border-radius:.3rem;
     position:relative;
     height: 2.6rem;
      border:none;
      /* min-width:20rem; */
      margin-right: 0;
      margin-left: 0;
  }
  .custome-search-form-mobile button{
  background: none;border: none;
  background-image:url(../../images/search-icon-gris-inverse.png);
  background-size:contain;
  background-repeat: no-repeat;
  position:absolute;
  top:45%;left:5%; 
  width:1.575rem;
  height:1.575rem;
  outline:none;
  }
  .custome-search-form-mobile input{
    background:none;
    outline:none;
    width:100%;
    height:2rem;
    padding-left:3.875rem;
    font-size:.785rem;
  }
   .background-body{ 
     background: linear-gradient(var(--text-color),var(--color-titles-black)); 
  }

  
   hr {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--gris-color);
  }
  .title-mobile {
    color: var(--text-color);
    font-size: .875rem;
    font-weight: 400;
    line-height: .725rem;
  }
  .btn {
    background-color: var(--bck-color);
    padding: .5rem;
    height: auto;
    border: 1px solid var(--primary-change);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    border-radius: 2rem;
    color: var(--primary-change);
    font-size: .975rem;
    width: auto;
    cursor: pointer;
    outline: none;
    /* background: none; */
     position: relative;
   box-shadow: 0 2px#11014b;
    
  }
   .btn:active{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   box-shadow: 0 0#11014b;
    top: 4px;
}
  .warning-hr-mobile {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--warning-color);
  }
  label {
    color: var(--text-color);
    font-weight: bold;
    font-size: 1.075rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
  
  .dropbtn {
   
    /* color: var(--primary-color); */
    /* font-weight: inherit; */
    width: 1.865rem;
    padding: 12px;
    /* font-size: 1rem; */
    /* background: none; */
    /* border: none; */
    /* vertical-align: basline; */
    cursor: pointer;
  }
  .dropbtn:focus {
    outline: none;
  }
  .dropbtn::after {
    content: url("../images/categories-icon.png");
  }
    .bandeau-cookies
  {
    /* width: 100%; */
    position: fixed;
    padding: 1rem;
    bottom: 0;
    right: 0;
    left: 0;
    /* border-radius: .5rem; */
    background-color:  var(--bck-color);
    border-top: 1px solid var(--gris-color);
    z-index: 1000;
    /* text-align: center; */
    color: var(--title-color);
  }
  .dropdown {
  
    padding: 1rem;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color:white;
    font-size: 1rem;
    right: 0;
    left: 0;
    box-shadow: 0 1px 6px rgb(204, 203, 203);
    border: 1px solid var(--gris-color);
    z-index: 1500;
  }
  .compte-user {
    text-align: start;
    min-width: 3rem;
  }
  .compte-user ul li {
      display: flex;
      justify-content: center;
      align-items: center;
    list-style: none;
    border-bottom: 1px solid var(--gris-color);
    padding:1rem;
  }
  
  .img-size-mobile {
    max-width: 7rem;
    display: flex;
    align-items: center;
  }
   .img-size-mobile-mobile {
    display: flex;
    align-items: center;
  }
  .img-size-form-mobile {
    width: 5rem;
  }
  .img-ads-mobile {
    width: 100%;
    height: 10rem;
    border-radius: 0.6rem;
    object-fit: cover;
  }
  .row-mobile {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .row-mobile-grid {
    display: grid;
    grid-template-columns: 75% 25%;
    grid-column-gap: 0.3rem;
  }
  .amana-logo{
    width:6rem;
  }
  .badge-price {
    /* background-color: var(--aside-color); */
   padding: .2rem;
    font-size: 1.575rem;
    color:  var(--text-color);
    font-weight: bold;
    border-radius: 0.4rem;
    text-align:left;
  }
  .column-mobile {
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
  }
  .show {
    display: block;
  }
  /* card_scroll home page */
  .courses-container-baniere {
    margin-top: 2rem;
    margin-left: 0;
    margin-right: 0;
  }
  .course-baniere {
    background-color: #fff;
    padding: 0.7rem;
    border-radius: 10px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    margin: 2px;
    overflow: hidden;
  }
  .course-baniere p {
    font-size: 0.7rem;
    line-height: 1rem;
    min-height: 2rem;
  }
  .course-preview-baniere {
    background-color: var(--bck-color);
    color: #fff;
    padding: 1rem;
    max-width: 150px;
  }
  .course-info-baniere {
    /* padding: .5rem; */
    position: relative;
    width: 100%;
  }
     .course-baniere-admin {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    border: 1px solid var(--bck-color);
    margin: 2px;
    overflow: hidden;
    /* width: 350px; */
  }
  .course-preview-baniere-admin {
    background-color: var(--primary-change);
    color: #fff;
    padding: 1rem;
    border-top-left-radius: .8rem;
    border-bottom-left-radius: .8rem;
    width: 9rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .courses-container-baniere-admin{
     margin-top: .5rem;
    margin-left: 0;
    margin-right: 0;
  }
  .link-mobile-comment {
    color:  var(--border-color);
    letter-spacing: 0.1rem;
    font-weight: 500;
    font-size: 1.075rem;
  }
  .link-mobile-comment::after {
    /* content: ">"; */
    font-size: 1.275rem;
    margin-left: 0.1rem;
  }
  .link-mobile {
    color:  var(--primary-color);
    letter-spacing: 0.1rem;
    font-weight: 500;
    font-size: 1.075rem;
  }
  .link-mobile-ad{
      color:  var(--primary-color);
    letter-spacing: 0.1rem;
    line-height: initial;
    font-weight: 500;
    font-size: .975rem;
  }
  .link-mobile-danger {
    color:  #ec5b5b;
    letter-spacing: 0.1rem;
    font-weight: 500;
    font-size: 1.075rem;
  }
  .link-mobile-danger::after {
    content: ">";
    font-size: 1.275rem;
    margin-left: 0.1rem;
  }
  
   .link-mobile-ad::after {
    content: ">";
    font-size: 1.275rem;
    margin-left: 0.1rem;
  }
   .green-color {
    color: #04a00c;
  }
  .link-white {
    color: var(--title-color);
    letter-spacing: 0.1rem;
    font-weight: 500;
    font-size: 1rem;
  }
  .link-mobile::after {
    content: ">";
    font-size: 1.275rem;
    margin-left: 0.1rem;
  }

  .round-image {
    border-radius: 50%;
    padding: 1rem;
    width: 5rem;
    height: 5rem;
  }
  .second-color-orange-mobile {
    color: var(--border-color);
  }
  /* ceci des formulaires */
  input[type="search"] {
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    background-color: white;
    height: 3.9rem;
  }
  input[type="search"]:focus {
    outline: none;
    box-shadow: 0 1px 6px var(--border-color);
  }
  .btn-search-mobile {
    border: 1px solid var(--darck-color);
    padding: .8rem;
    height: calc(1.125em + 0.1rem + 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: .3rem;
    /* var(--darck-color); */
    background:#F4364C;
    color: white;
    font-weight: bold;
    font-size: .975rem;
    margin-bottom: .5rem;
    min-width: 10rem;
    position: relative;
   /* box-shadow: 0 2px#834b02; */
  }
  .btn-search-filter-mobile {
    border: 1px solid var(--primary-change);
    margin-bottom: 1rem;
    background-color: var(--primary-change);
    cursor: pointer;
    border-radius: 0.4rem;
    padding: .825rem;
    width: 3.6rem;
    color: var(--warning-color);
  }
  .btn-search-filter-mobile::after{
    content: url('../../images/search-icon-ptit.png');
    width: 5rem;
  }
  .btn-search-mobile:focus {
    outline: none;
  }
.btn-search-mobile:active{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   /* box-shadow: 0 0#834b02; */
    top: 4px;
}
/* enlever l effet de couleur au click su link in mobile */
a{
    /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  */
}

  .bloc-mobile {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 1rem;
  }
  .center-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
  }
   .align-mobile{
    display:flex;align-items:center;
  }
  .note{
  font-size: .775rem;
}

.badge-ecom-price{ 
  color:var(--darck-color);
  background-color:#fcb700ff;
  border-radius:10px 100px / 120px;
  text-align: right;
  padding-bottom: 0.3rem;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  padding-top: .3rem;
  font-size:1.125rem;
  font-weight:medium;
}
.price{ 
  color:var(--darck-color);
  background-color: var(--border-color);
  border-radius:10px 100px / 120px;
   text-align: right;
   padding-bottom: 0.3rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    padding-top: .3rem;
    font-size:1.125rem;
    font-weight:medium;
  }
  .badge-date {
    font-size: .975rem;
     color: var(--menu-color);
     font-weight: medium;
     text-align: right;
   }
   .big-price-mobile{
    font-size:4rem;color:var(--text-color);
  }
  #prof-ban-mobile {
    padding: 2rem;
    width: 100%;
    min-height: 5rem;
    background-image: url("../../images/prof-baniere.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }


  .card-container {
    box-shadow: 0 1px 6px rgb(204, 203, 203);
    padding: 2rem;
    position: relative;
    width: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .round-image {
    border-radius: 50%;
    padding: 7px;
    width: 30px;
    height: 30px;
  }
  .card-container .round {
    border: 1px solid #03bfcb;
    border-radius: 50%;
    padding: 7px;
    width: 80px;
    height: 80px;
  }
  .primary {
    background-color: var(--primary-change);
    font-size: 1rem;
    border: 1px solid var(--primary-change);
    border-radius: 3px;
    color: var(--title-color);
    font-weight: 400;
    padding: 0.3rem;
    width: auto;
  }

  .primary.ghost {
    background-color: transparent;
    color: var(--primary-change);
  }
  .buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  footer {
    padding-top: 2rem;
    padding-bottom: 2rem;
    height: auto;
    background-color: var(--darck-color);
    margin-left: 0;
    margin-right: 0;
    color: var(--title-color);
    text-align: center;
    border: 1px solid var(--gris-color);
   
  }
  footer p {
    color: var(--title-color);
  }
  .add-cart-btn{
    /*background-color: #f68c1eff;*/
    background-color:#fcb700ff;
    color: var(--aside-color);
    border: 1px solid var(--title-color);
    padding: 1.5rem;
    height: calc(1.125em + 0.1rem + 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 2.5rem;
    font-weight: bold;
    font-size: .975rem;
    margin-bottom: .5rem;
    min-width: 10rem;
    position: relative;
     /* flex-shrink: 0; s'assure que le bouton ne disparaîtra pas */
     flex-shrink: 0;
     width: auto; /* Le bouton doit prendre la largeur de son contenu */
  }
   .floating-btn-account-pro{
    border-radius: 2rem;
    background-color: var(--warning-color);
    border: 1px solid var(--primary-change);
    box-shadow: 0 16px 22px -17px var(--primary-change);
    color: var(--primary-change);
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    padding: .4rem;
    position: fixed;
    bottom: 1.875rem;
    left: 0;
    z-index: 999;
    transition: left 500ms;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.floating-btn-account-pro::after{
  content:url('../../images/school-white.png');
  padding-top: .7rem;
  padding-left: .7rem;

}
  .floating-btn-account-pro:hover {
    background-color: var(--primary-change);
    color: var(--title-color);
     left: 0;
  }

  .floating-btn-account-pro:focus {
    outline: none;
  }


  /* pour part */
  .floating-btn-account-part{
     border-radius: 2rem;
    background-color: var(--warning-color);
    border: 1px solid var(--primary-change);
    box-shadow: 0 16px 22px -17px var(--primary-change);
    color: var(--primary-change);
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    padding: .4rem;
    position: fixed;
    bottom: 1.875rem;
    left: 0;
    z-index: 999;
    transition: left 500ms;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.floating-btn-account-part::after{
  content:url('../../images/compte-white.png');
  padding-top: .7rem;
  padding-left: .7rem;

}
  .floating-btn-account-part:hover {
    background-color: var(--primary-change);
    color: var(--title-color);
     left: 0;
  }

  .floating-btn-account-part:focus {
    outline: none;
  }
  .current {
    font-size: 1rem;
    font-weight: bold;
    color: var(--title-color);
    letter-spacing: 0.1rem;
    padding: 10px 15px;
    border: 0.1rem solid var(--light-color);
    border-radius: 0.3rem;
    text-decoration: underline;
    box-shadow: 0 1px 6px rgb(204, 203, 203);
    background-color: var(--darck-color);
  }

  .pagination li {
    list-style: none;
    display: inline-block;
  }
  .current {
    opacity: 0.8;
  }
  .pagination a {
    font-size: 1rem;
    font-weight: 600;
    color: #0078d4;
    letter-spacing: 0.1rem;
    padding: 10px 15px;
    border: 0.1rem solid #0078d4;
    border-radius: 0.3rem;
    background-color: #fafafa;
  }
  
  .clignote {
    color:green;
    animation: clignote 1500ms linear infinite;
  }
  @keyframes clignote {  
    50% { opacity: 0.8;}
  }
  .form-connexion-mobile {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.2rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    background-color: var(--bck-color);
  }

  .form-connexion-mobile input[type="email"]:focus {
    box-shadow: 0 1px 6px var(--light-gris-color);
    outline: none;
  }
  .form-connexion-mobile input[type="password"]:focus {
    box-shadow: 0 1px 6px var(--light-gris-color);
    outline: none;
  }
  main{
    margin: 0;
    padding-top: .5rem;
     padding-right: .365rem;
     padding-left:  .365rem;
    padding-bottom: 4rem;
    /* height:auto; */
    min-height: 60vh;

  }
 
  select,
  input[type="text"],
  input[type="email"],
  input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--light-gris-color);
    border-radius: 4px;
    font-size: 1rem;
    background-color: white;
    padding: 0.375rem 0.75rem;
    height: calc(1.95em + 1rem + 1px);
    line-height: 1.5;
    box-sizing: border-box;
    border-radius: 0 0.25rem 0.25rem 0;
  }
  
  input[type="number"]{
    min-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--light-gris-color);
    border-radius: 4px;
    font-size: 1rem;
    color: var(--paragraph-color);
    background: white;
    padding: 0.375rem 0.75rem;
    height: calc(1.95em + 1rem + 1px);
    line-height: 1.5;
    box-sizing: border-box;
    border-radius: 0 0.25rem 0.25rem 0;
  }
  


  textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--light-gris-color);
    border-radius: 4px;
    font-size: 1rem;
    background-color: white;
    padding: 0.375rem 0.75rem;
    height: calc(3.75em + 1.75rem + 4px);
    line-height: 1.5;
    box-sizing: border-box;
    border-radius: 0 0.25rem 0.25rem 0;
  }
  select:focus {
    width: 100%;
  }
  input[type="text"]:focus {
    box-shadow: 0 1px 6px var(--light-gris-color);
    outline: none;
  }
  textarea:focus {
    box-shadow: 0 1px 6px var(--light-gris-color);
    outline: none;
  }
  input[type="email"]:focus {
    box-shadow: 0 1px 6px var(--light-gris-color);
    outline: none;
  }
  input[type="password"]:focus {
    box-shadow: 0 1px 6px var(--light-gris-color);
    outline: none;
  }

  .list-unstyled {
    list-style: none;
  }
 
 

  a {
    text-decoration: none;
  }
  .danger {
    background-color: #fcd2d2;
    border: 1px solid #f5b3b3;
    background-size: cover;
    padding: 1rem;
    font-size: 1rem;
   margin-left: 0;
   margin-right: 0;
    color: #ec5b5b;
  }
  .info {
    background-color: #e2f7fa;
  padding: .8rem;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
   font-weight: 450;
   color:  #0f3460;
    border-left: 5px solid #5eaae7;
font-size: 1rem;
  }
  .info-right {
    background-color: #e2f7fa;
  padding: .8rem;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
   font-weight: 450;
   color:  #0f3460;
   text-align:right;
    border-right: 5px solid #5eaae7;
font-size: 1rem;
  }
  .warning-right-mobile {
    background-color: #fdfadf;
    border-right: 5px solid #fff492;
    border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
    font-weight: 450;
    padding: .8rem;
    font-size: 1rem;
    text-align: right;
    color: #57511f;
  }
  .mini-info{
      background-color: #e2f7fa;
  padding: .8rem;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
   font-weight: 450;
   color:  #0f3460;
    border-left: 5px solid #5eaae7;
font-size: .775rem;
  }
  .nav-descktop{
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    background-color:var(--darck-color);
    max-height: 5rem;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    border-bottom: 1px solid var(--gris-color);
    
}
.nav-descktop-admin{
  border-bottom: 1px solid var(--gris-color);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  background-color:var(--text-color);
  max-height: 5rem;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  border-bottom: 1px solid var(--gris-color);
    
}
/* .close-menu{
    height: 10rem;
    overflow: hidden;
} */

.nav-descktop ul {
    list-style: none;
    display: flex;
    flex-direction: column;
  }
   .nav-descktop-admin ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    background-color:var(--text-color);
  }

  .nav-descktop ul li {
    display:block;
    padding: .5rem 1.5rem;
    background-color: var(--darck-color);
   
  }
   .nav-descktop-admin ul li {
    display:block;
    padding: .5rem 1.5rem;
    background-color:var(--text-color);
   
  }
   .nav-descktop ul li a {
  text-decoration: none;
   color:var(--title-color);
   font-weight: 600;
   font-size: 1.256rem;
  }
   .nav-descktop-admin ul li a {
    text-decoration: none;
    color:var(--title-color);
    font-weight: 600;
    font-size: 1.256rem;
   
  }
  .importante-mobile {
    background-color:  #fdfadf;
    border-right: 5px solid #fff492;
    border-radius: .5rem;
    background-size: cover;
    font-weight: 450;
    padding: 1rem;
    font-size: .875rem;
     line-height:1.585rem;
    width: auto;
    text-align: right;
    color: #57511f;
  }
  .success {
    background-color: #cceabb;
    border: 1px solid #abd890;
    background-size: cover;
    padding: 1rem;
    font-size: 1rem;
   margin-left: 0;
   margin-right: 0;
    color: #589138;
  }
    .warning {
    background-color:  #fdfadf;
    border-right: 5px solid #fff492;
    border-radius: .5rem;
    background-size: cover;
    font-weight: 450;
    padding: 1rem;
    font-size: .875rem;
     line-height:1.585rem;
    width: auto;
    color: #57511f;
  }

 
  
  .mobile-title {
    color: var(--menu-color);
    font-size: 4rem;
    font-weight: bold;
  }
  .no-drop
  {
    cursor: no-drop;
  }
  .mobile-sous-title {
    color: var(--menu-color);
    font-size: 2rem;
    font-weight: bold;
  }
  .btn-access-mobile{
      border-radius: 1rem;
    background-color: var(--access-color);
    color: #589138;
    cursor: pointer;
    line-height: 20px;
    padding: .1rem ;
    font-weight: bold;
    font-size: .975rem;
    outline: none;
     min-width: 10rem;
    border: none;
    position: relative;
   box-shadow: 0 2px#142c1d;
  }
   .btn-access-mobile:hover{
    box-shadow: 0 3px#142c1d;
    top: 1px;
     
  }
   .btn-access-mobile:active{
      box-shadow: 0 0#83a95c;
    top: 4px;
   }
      .btn-create-mobile {
    padding: .4rem;
     height: calc(1.125em + 0.1rem + 1px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3rem;
    color: var(--title-color);
   font-weight: bold;
    font-size: .975rem;
    margin-bottom: .5rem;
    letter-spacing: 0.1rem;
    min-width: 15rem;
    cursor: pointer;
    background-color: var(--border-color);
      min-width: 10rem;
  position: relative;
   box-shadow: 0 2px#4b2801;
  }
   .btn-create-mobile:active{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   box-shadow: 0 0#4b2801;
    top: 4px;
}
  .btn-mobile {
    border: 1px solid var(--primary-change);
    padding: .7rem;
    height: calc(1.125em + 0.1rem + 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 3rem;
    color: var(--primary-change);
    font-weight: bold;
    font-size: .975rem;
    margin-bottom: .5rem;
    background: none;
  /* min-width: 10rem; */
  position: relative;
   box-shadow: 0 2px#11014b;
  }
  .btn-mobile:active{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   box-shadow: 0 0#11014b;
    top: 4px;
}
  
  .badge-danger {
    background-color: #ec5757;
    padding-bottom: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: .3rem;
    font-size: 1rem;
    width: auto;
    color: white;
    font-weight: medium;
    border-radius: 0.4rem;
  }
   #for-errors-js{
    padding: 1rem;
    border-radius: .4rem;
    border: 1px solid var(--light--gris-color);
    position: fixed;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
  }
  #for-success-js{
    padding: 1rem;
    position: fixed;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    height: auto;
    z-index: 1000;
  }
  #for-info-js{
    padding: 1rem;
    position: absolute;
    top: 50%;
    left: 40%;
    background-color: white;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    width: 35rem;
    height: auto;
    z-index: 1000;
  }
  .flex-row-error {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .error {
    padding: 0.5rem;
    font-size: 1rem;
    width: auto;
    color: #ec5b5b;
  }
  .error ul {
    list-style: none;
  }
  .error ul li {
    margin-left: 1rem;
  }
  /* .title-table {
    color: var(--primary-change);
    font-size: 1rem;
    font-weight: 500;
    line-height: 0.625rem;
  } */
  /* horizontal-card */
  .horizontal-card {
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--primary-change);
    font-family:'Cairo',
     /* "Inter", "system-ui", "wf_segoe-ui_semibold",
      "Segoe UI Semibold", "Segoe UI", "Segoe WP", "Segoe UI", "Segoe WP",
      "Quicksand", sans-serif, "calibri", Tahoma, Arial, */
       sans-serif;
  }
  .row-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  /* .card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-row-gap: .4rem;
     grid-column-gap: 0.5rem;
  }
  .card-ads-school {
    height: auto;
    max-width: 100%;
    position: relative;
    border-radius: 0.1rem;
    background-color: white;
    padding: .3rem;
    border: 1px solid var(--gris-color);
  } */
  .card-grid {
    display: grid;
    /* * Cette ligne est la solution la plus puissante et la plus flexible. 
     * Elle crée autant de colonnes que possible.
     */
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    
    gap: 1rem; /* Ajoute un espace uniforme de 1rem entre les cartes */
}

.card-ads-school {
    height: auto;
    max-width: 100%;
    position: relative;
    border-radius: 0.5rem;
    background-color: white;
    padding: 0.8rem;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
  .card-grid-litle {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(5.275rem, 1fr))  ;
    grid-row-gap: .1rem;
     grid-column-gap: .1rem;
     /* border: 1px solid var(--gris-color); */
  }
  .card-ads-litle {
    /* animation: fadein 900ms; */
    max-height: 10rem;
    max-width:auto;
    position: relative;
    border-radius: 0.1rem;
    background-color:#FFCBA4;
    padding: .3rem;
  }
  .img-corse-litle{
    width: 5.275rem;
    max-height: 6rem;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
    object-fit: cover;
    padding: .5rem;
  }
  /* .card-ads-school {
    border-radius: .3rem;
    height: auto;
    padding: .7rem;
    position: relative;
    box-shadow: 0 1px 6px rgb(204, 203, 203);
    border: 1px solid var(--light--gris-color);
    background-color: white;
  } */
  .card-ads-school-account-mobile {
    height: auto;
    padding: 2rem;
    position: relative;
    box-shadow: 0 1px 6px rgb(204, 203, 203);
    border: 1px solid var(--light--gris-color);
  }
  .container-table{
  margin: 0;
   padding: 0;
  }
  table {
  mso-table-lspace: 0pt;
	mso-table-rspace: 0pt;
	width: 100%;
	font-size: 70%;
  border-collapse: collapse;
  }
  th {
    border-bottom: thin solid #6495ed;
    padding: 0.125rem;
  }
 

 
   #engrenage-maintenance {
    animation: App-engrenage infinite 10s linear;
    width: 10rem;
    padding: 2rem;
  }
  #engrenage-mobile{
      animation: App-engrenage-mobile infinite 10s linear;
    width: 2rem;
  }
  /* ceci animation engrenage home page  */
  #engrenage {
    animation: App-engrenage infinite 10s linear;
    width: 2rem;
  }
  #engrenage2 {
    animation: App-engrenage2 infinite 20s linear;
  }
  @keyframes App-engrenage {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes  App-engrenage-mobile {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes App-engrenage2 {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }
  /* SOCIAL PANEL CSS */
  .social-panel-container {
    position: fixed;
    right: 0;
    bottom: 80px;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
  }

  .social-panel-container.visible {
    transform: translateX(-10px);
  }

  .social-panel {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 31px -17px var(--primary-change);
    border: 5px solid var(--primary-change);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family:'Cairo';
    position: relative;
    height: 169px;
    width: 320px;
    max-width: calc(100% - 10px);
  }

  .social-panel button.close-btn {
    border: 0;
    color: #97a5ce;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    top: 5px;
    right: 5px;
  }

  .social-panel button.close-btn:focus {
    outline: none;
  }

  .social-panel p {
    background-color: var(--primary-change);
    border-radius: 0 0 10px 10px;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    padding: 2px 17px 6px;
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    width: 235px;
  }

  .social-panel p i {
    margin: 0 5px;
  }

  .social-panel p a {
    color: #ff7500;
    text-decoration: none;
  }

  .social-panel h4 {
    margin: 20px 0;
    color: #97a5ce;
    font-size: 14px;
    line-height: 18px;
    /* text-transform: uppercase; */
  }

  .social-panel ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .social-panel ul li {
    margin: 0 10px;
  }

  .social-panel ul li a {
    border: 1px solid #dce1f2;
    border-radius: 50%;
    color: var(--primary-change);
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    text-decoration: none;
  }

  .social-panel ul li a:hover {
    border-color: #ff6a00;
    box-shadow: 0 9px 12px -9px #ff6a00;
  }

  .floating-btn {
    border-radius: 26.5px;
    background-color: #ffffff;
   
    border: 1px solid var(--primary-change);
    box-shadow: 0 16px 22px -17px var(--primary-change);
    color: #001f61;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
    padding: 12px 20px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
  }

  .floating-btn:hover {
    background-color: var(--primary-change);
    color: #ffffff;
  }

  .floating-btn:focus {
    outline: none;
  }

  .floating-text {
    background-color: #001f61;
    border-radius: 10px 10px 0 0;
    color: #fff;
    padding: 7px 15px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 998;
  }

  .floating-text a {
    color: #ff7500;
    text-decoration: none;
  }
 .icon-ok-grid li{
   font-size: 1.175rem;
   font-weight: 400;
   color: var(--text-color);
   list-style: none;
   padding-bottom: .5rem;
 }
 .icon-ok-grid ul{
   padding-top: .6rem;
 }
   .back-card{ 
    background-color: var(--bck-color);
  position: relative;
  padding: .865rem;
  font-size: 1.175rem;
  color: var(--text-color);
  font-weight: bold;
  text-align: center;
  margin-bottom: .5rem;

  }
  .suggestion-width{
    width:100%;
    border-radius:.5rem;
  }
.suggestion-darija{
  margin-top: 1rem;
  font-size: 1.5rem;
  color: var(--text-color);
  padding: .5rem;
  cursor:pointer;
  text-align: right;
  min-height: 0;
  font-weight: 500;
  padding-right: 3rem;
}
.suggestion-darija:hover{
  background-color: var(--bck-color);
}
.test-if-exist-suggestion{
  margin-top: 1rem;
  font-size: 1.5rem;
  color: var(--text-color);
  padding: .5rem;
  cursor:pointer;
  min-height: 0;
}
.test-if-exist-suggestion:hover{
  background-color: var(--bck-color);
}
     .card-standard {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    padding: 0;
    border-radius: 0.9rem;
    color: var(--text-color);
  }
  .card-standard .heading {
    color: var(--text-color);
    padding: 0.6rem;
    text-align: center;
  }
  .card-standard-body{
 
    font-size: 1rem;
  }
  .card-standard-body li {
    padding: 2rem;
  }
 
    .coord-ad{
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .pm-02{
    padding: .2rem;
      }
  .pm-2{
    padding: 2rem;
  }
  .pmt-1{
padding-top: 1rem;
  }
  .pmt-2{
    padding-top: 2rem;
      }
      .pmb-2{
        padding-top: 2rem;
          }
  .pmb-1{
padding-bottom: 1rem;
  }
   .pm-1{
    padding: 1rem;
  }
  .pmr-1{
    padding-right: 1rem;
  }
  .ptm-1{
  padding-top: 1rem;
}
  .pbm-1{
    padding-bottom: 1rem;
  }
  .mlm-2{
    margin-left: 2rem;
  }
   .mlm-1{
    margin-left: 1rem;
  }
   .mtm-1 {
    margin-top: 1rem;
  }
    .mtm-2 {
    margin-top: 2rem;
  }
    .mtm-3 {
    margin-top: 3rem;
  }
    .mtm-4 {
    margin-top: 4rem;
  }
  .mlm-3{
    margin-left: 3rem;
  }
  .mrm-1{
    margin-right: 1rem;
  }.plm-1{
    padding-left: 1rem;
  }
  .prm-1{
    padding-right: 1rem;
  }
  .mm-1{
    margin:2rem;
  }
   .row-mobile-grid-search-form {
   display: grid;
   grid-template-columns: 5fr 1fr;
   grid-column-gap: .3rem ;
   padding: .5rem;
    align-items: center;
    justify-content: center;
  }
   .card-ads-school-show {
     animation: fadein 900ms;
     position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 0.9rem;
  }
    .card-header-school {
    position: relative;
    min-height: 2rem;
    display: flex;
    flex-direction: column;
    border-top-left-radius:.4rem;
    border-top-right-radius: .4rem;
    color: var(--title-color);
  }
   .grid-card {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 1rem;
  }
    .back-light{
    background-color: var(--light-gris-color);
    font-size: 0.875rem;
    text-align: center;
    padding: .8rem;
    margin-left: .2rem;
    border-radius: .3rem;
  }
   .card-footer {
    padding: 0.9rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
   .drop-menu-point{
position: relative;
  }
  .dropbtn-menu-point{
    padding: 1rem;
    cursor: pointer;
    max-width: 4rem;
  }
 
  .dropbtn-menu-point:hover{
  opacity: .5rem;
  }
  .menu-point{
    /* padding: 1rem; */
    position: absolute;
    background-color:white;
    font-size: 1.625rem;
    width: 25rem;
    /* height: 10rem; */
    right: 0;
    border-radius: .4rem;
    z-index: 1;
    /* box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); */
  }
    .menu-point-corse{ 
    /* padding: 1rem; */
    position: absolute;
    background-color:white;
    font-size: 1.625rem;
    width: 25rem;
    /* height: 10rem; */
    right: 0;
    border-radius: .4rem;
    z-index: 1;
    /* box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); */
  }
  .show-menu-point{
    display: block;
  }
  .second-color-blue {
    color: var(--primary-color);
    padding: 1rem;
    border-radius: 0.3rem;
  }
  .statut{
    position: absolute;
    top: 0;
    right: 0;
  }
 .text-anim {
    transform: translateY(5vh);
    transition: transform 650ms;
  }
  a,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    animation: fadein 900ms; 
  }
   @keyframes fadein {
    from {
      opacity: 0;
      transform: translateX(5vh);
    }
    to {
      opacity: 1;
      transform: translateX(0em);
    }
  }
    .container-fluid-mobile {
    width: auto;
    height: auto;
    padding-right: 15px;
    padding-left: 15px;
    margin-top: 5rem;
    margin-bottom: 10rem;
    margin-right: auto;
    margin-left: auto;
  }
 
 .card-standard-body{
    color: var(--text-color);
    font-size: 1.675rem;
     width: 95%;
    max-width: 150rem;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  .card-standard-body li {
    padding: 2rem;
  }
 /* ********************************* controle video *************************** */
 .video-controls {
  right: 0;
  left: 0;
  padding: .3rem;
  position: absolute;
  bottom: 0;
  transition: all 0.2s ease;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
  transform: translateY(100%) translateY(-5px);
  transition: all .3s;
}

.video-controls.hide {
  opacity: 0;
  pointer-events: none;
}
 .progress-container-baniere {
    position: absolute;
    top: 5px;
    right: 5px;
    text-align: right;
    width: 50px;
  }
/* barre de progression */
.video-progress {
  position: relative;
  height: 8.4px;
  margin-bottom: 10px;
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 2px;
  width: 100%;
  height: 5.4px;
  pointer-events: none;
  position: absolute;
  top: 0;
}
 progress::-webkit-progress-bar {
  background-color: #474545;
  border-radius: 2px;
}
#progress-bar-complet::-webkit-progress-bar{
background-color: #cf4945;
  border-radius: 2px;
}

progress::-webkit-progress-value {
  background: var( --youtube-red);
  border-radius: 2px;
}
progress::-moz-progress-bar {
  border: 1px solid var( --youtube-red);
  background: var( --youtube-red);
}

.seek {
  position: absolute;
  top: -.675rem;
  width: 100%;
  cursor: pointer;
  margin: 0;
}
.box{
  margin: 10px;
  width: 50px;
  height: 50px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  background: white;
  border: 1px solid var(--gris-color);
}
.container-lignes{
  /* background: gray; */
  width: 40px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ligne{
  position: absolute;
  border-radius: 10px;
  width: 40px;
  height: 5px;
  background: var(--text-color);

}
.box .ligne:nth-child(1){
  top: 0px;
}
.box .ligne:nth-child(2){
  top: 12px;
}
.box .ligne:nth-child(3){
  top: 25px;
}

/* animation */
.b1.active .ligne:nth-child(1),.ligne:nth-child(3){
  transform: rotate(0deg);
  transition: transform 0.4s ease-in-out,
  top 0.4s 0.4s ease-in-out;
}
.b1.active .ligne:nth-child(1){
  top: 12px;
  transform: rotate(45deg);
  transition: transform 0.4s ease-in-out,
  top 0.4s 0.4s ease-in-out;
 
}
.b1.active .ligne:nth-child(2){
  transition: opacity 0.4s ease-in-out;
 opacity: 0;
}
.b1.active .ligne:nth-child(3){
  top: 12px;
  transform: rotate(-45deg);
  transition: transform 0.4s ease-in-out,
  top 0.4s 0.4s ease-in-out;
}
.open-menu{
  padding-bottom: 1rem;
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}
.open-menu-admin{
  padding-bottom: 1rem;
  max-height: 1000px;
  transition: max-height 0.25s ease-in;
}
.seek:hover+.seek-tooltip {
  display: block;
}

.seek-tooltip {
  display: none;
  position: absolute;
  top: -50px;
  margin-left: -20px;
  font-size: 12px;
  padding: 3px;
  content: attr(data-title);
  font-weight: bold;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}

.bottom-controls {
  display: flex;
  align-items: center;
}

.left-controls {
  display: flex;
  align-items: center;
  color: #fff;
}

.volume-controls {
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.volume-controls input {
  width: 100px;
  opacity: 1;
  transition: all 0.4s ease;
}

.volume-controls:hover input, .volume-controls input:focus {
  width: 100px;
  opacity: 1;
}

.video-controls button {
  cursor: pointer;
  position: relative;
  margin-right: 7px;
  font-size: 12px;
  padding: 3px;
  border: none;
  outline: none;
  background-color: transparent;
}

.video-controls button * {
  pointer-events: none;
}

.video-controls button::before {
  content: attr(data-title);
  position: absolute;
  display: none;
  right: 0;
  top: -50px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: bold;
  padding: 4px 6px;
  word-break: keep-all;
  white-space: pre;
}

.video-controls button:active::before {
  display: inline-block;
}

.fullscreen-button {
  margin-right: 0;
}

.pip-button svg {
  width: 12px;
  height: 12px;
}

.playback-animation {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 80px;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
input[type=range]:focus::-moz-range-track {
  outline: none;
}

input[type=range].volume::-moz-range-thumb {
  border: 1px solid #fff;
  background: #fff;
} 
input[type=range]:focus::-moz-range-track {
  outline: none;
}

input[type=range].volume {
  height: 5px;
  background-color: #fff;
}

input[type=range].volume::-webkit-slider-runnable-track {
  background-color: transparent;
}

input[type=range].volume::-webkit-slider-thumb {
  margin-top:0;
  margin-left: 0;
  height: 14px;
  width: 14px;
  background: #fff;
}
input[type=range].volume::-moz-range-thumb {
  border: 1px solid #fff;
  background: #fff;
} 

svg {
  width: 12px;
  height: 12px;
  fill: #fff;
  stroke: #fff;
  cursor: pointer;
}
.time{
    margin-left: .1rem;
    font-size: .675rem;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--title-color);
}
  .red {
    color: red;
    font-size: 1.175rem;
  }
input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top:.425rem;
  height: 12px;
  width: 12px;
  border-radius: 16px;
  background: var( --youtube-red);
  cursor: pointer;
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 16px;
  background:var( --youtube-red);
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  height: 16px;
  width: 16px;
  border-radius: 16px;
  background: var( --youtube-red);
  cursor: pointer;
}
/* for video copied in style ******************** */
 .video-custom{
    width: 100%;
  }
  .c-video{
    width: 100%;
    max-width: 800px;
    position: relative;
    overflow: hidden;
  }
    .controls{
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
    flex-wrap: wrap;
    background: rgba(0,0,0,0.7);
    transform: translateY(100%) translateY(-5px);
    transition: all .3s;
  }
 
   .video-responsive:hover .video-controls{
     transform: translateY(0);
   }
    .video-responsive-home-mawsouaa .video-controls{
      transform: translateY(0);
    }
  .buttons-for-video{
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
 
  .buttons-for-video button{
    padding-left: 1rem;
    background: none;
    border: 0;
    outline: none;
    cursor: pointer;
  
  }
  .buttons-for-video button::before{
    content: url('../../images/player-white.png');
    width: 30px;
    height: 30px;
    display: inline-block;
    font-size: 28px;
    -webkit-font-smothing:antialiased;
  }
  .buttons-for-video button.play::before{
 content: url('../../images/player-white.png');
  }
   .buttons-for-video button.pause::before{
     content: url('../../images/pause-icon.png');
  }

    .buttons-for-video button#mute-inactive::before{
     content: url('../../images/muet-inactive-icon.png');
  }
    .buttons-for-video button#mute::before{
     content: url('../../images/muet-icon.png');
  }
    .buttons-for-video button#volinc::before{
     content: url('../../images/volinc-icon.png');
  }
  
   .buttons-for-video button#voldec::before{
     content: url('../../images/voldesc-icon.png');
  }
   .buttons-for-video button#stop::before{
     content: url('../../images/stop-video-icon.png');
  }
   .buttons-for-video button#fs::before{
     content: url('../../images/plein-ecran-icon.png');
  }
   .buttons-for-video button#fs:hover{
     opacity: 0.2;
   }
    .buttons-for-video button#stop:hover{
     opacity: 0.2;
   }
    .buttons-for-video button#play-pause:hover{
     opacity: 0.2;
   }
   
    .buttons-for-video button#mute-inactive:hover{
     opacity: 0.2;
   }
    .buttons-for-video button#volinc:hover{
     opacity: 0.2;
   }
    .buttons-for-video button#voldec:hover{
     opacity: 0.2;
   }
  .orange-bar{
    height: 5px;
    top: 0;
    left: 0;
    width: 100%;
    cursor: pointer;
    background: var(--light-gris-color);
    position: relative;
  }
  .orange-juice{
    width: 0;
    height: 5px;
    background: var(--border-color);
  }
   /* responsive video */
  .col-video-aside{
    display: flex;
   flex-direction: column;
}
  .container-video {
  padding-top: .1rem;
 
  }
  .aside-video{
    background-color: var(--border-light-color);
    padding:1.5rem ;
    border-left: 1px solid var( --gris-color);
    border-top: 1px solid var(--gris-color);
    overflow-y: auto;
    max-height: 90vh;
}
.video-responsive {
  background-color: var(--darck-color);
  min-width: auto;
  height: auto;
  /* border-radius: 4px; */
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
 .video-responsive video {
  width: 100%;
  height: 100%;
}
.video-responsive-home-mawsouaa {
background-color: var(--darck-color);
max-width: 500px;
border-radius: 4px;
margin: 0 auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
   .video-responsive-home-mawsouaa video{
 /* width: 100%; */  
  min-height: 332px;
  height: 552px;
  border-radius: 4px;
   }

  .video-responsive-home-mawsouaa iframe{
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  }
  
  .current-video {
    background-color: rgb(217, 227, 250);
  }
  .current-video a {
    color: var(--darck-color);
  }

  #player::before {
    content: url("../images/player.png");
  }
  .legende-video {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 1.625rem;
  padding: 2rem;
  border-bottom: 1px solid var(--gris-color);
  }
  .menu-video {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  /* fin responsive video */
   .myProgressCorse{
   width: 100%;
   background-color: #cecbcb ;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
   border: 1px solid var(--light-gris-color);
   border-radius: 2rem;
   height:15px;
 }
  .myBarCorse{
  width: 10%;
  height: 15px;
  background-color: var(--access-color);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 30px;
  font-size:.765rem;
  color: white;
  font-weight: 500;
 }
  .title-color{
    color:var(--title-color);
  }
   .element-corse li{
    list-style: none;
    padding: .3rem;
    font-size: .965rem;
  }
   .shadow {
      width: 5rem;
      height: .4rem;
      opacity: 0.5;
      background: #777;
      border-radius: 50%;
      z-index: 1;
    }
     .scale {
      animation: scale 1s ease-in infinite;
    }
   .face {
      border-radius: 50%;
      z-index: 2;
      animation: bounce 1s ease-in infinite;
    }
   @keyframes bounce {
      50% {
        transform: translatey(-10px);
      }
    }

    @keyframes scale {
      50% {
        transform: scale(0.9);
      }
    }
 .home-img-mobile{
   width:6rem;height:6rem;border-radius:50%;object-fit:cover;
 }
  .card-grid-affiliation {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(10.275rem, 1fr))  ;
    grid-row-gap: .2rem;
     grid-column-gap: .2rem;
  }
   .card-products-affiliation {
    animation: fadein 900ms;
    height: auto;
    max-width: 11rem;
    position: relative;
    border-radius: 0.8rem;
  }
   .card-products-affiliation:hover{
     box-shadow: 0 1px 6px rgb(204, 203, 203); 
     border: 1px solid #e2f7fa;
     /* top: 4px; */
   } 
   .btn-affiliate{
    border: 1px solid var(--light-gris-color);
    border-radius: .2rem;
    font-weight: 550;
    padding: .4rem;
    font-size: .9rem;
    background-color: var(--gris-color);
    color: var(--border-color);
  }
  .btn-affiliate:hover{
    color: var(--darck-color);
  }
   .img-product-mobile{
    border-top-left-radius:.5rem;border-top-right-radius:.5rem;width:100%;height:15rem;object-fit:cover;
  }
  .img-affiliate-mobile{
    width:300px;height:100%;border-radius:.4rem;margin-left:0;margin-right:0;
  }
  .container-slider{
    /* width: 100%; */
    min-height: auto;
    padding: 1rem;
}
.card-ads-school-dev {
  padding:1rem;
 animation: fadein 900ms;
 border: 1px solid var(--light-gris-color);
 min-height: 10rem;
 position: relative;
 border-radius: .5rem;
 margin-top:4rem ;
}
.content-title-card{
  border:1px solid var( --primary-color);
  width:5rem;height:5rem;
  border-radius:50%;
  background-color:white;
  position:absolute;
  top:-5rem;left:35%;
}
.card-ads-school:hover .content-title-card {
  background-color: var(--primary-color);
} 
.card-ads-school:hover .title-card {
 color: white;
} 
}
@media screen and (min-width: 768px) and (max-width: 1024px){
  .card-grid {
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
    gap: 1rem; /* On peut augmenter l'espace pour que ce soit plus visible */
  }
  main {
    width: 75%;
    padding-right: 15px;
    padding-left: 15px;
    /* margin-top: 5rem; */
    /* margin-bottom: 10rem; */
    margin-right: auto;
    margin-left: auto;
    min-height: 100vh;
  }
  .container {
    width: 95%;
    max-width: 150rem;
    margin: 0 auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
   table {
	font-size: 100%;
  
  }
    .img-back{
  
    height: 30rem;
  }
  
     #loader-ad {
    border-radius: 3px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    padding: 0;
    height: 0.5rem;
    background-color: var(--warning-color);
    animation: loader_ad 6s infinite linear;
  }

  @keyframes loader_ad {
    0% {
      width: 0;
    }

    100% {
      opacity: 0.8;
      width: 100%;
    }
  }
  
   
  
}