@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
   
   
  
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
  }
   
  .centered-div {
    text-align: center;
    border: 1px solid #ccc;
    padding: 20px;
    max-width: 400px;
    width: 80%;
    overflow: auto;
    margin-top: 50vh !important;
    margin-left: 15px !important;
  }
  
  .myClaseBtn{
    background-color: #FFB6C1;
    color: white; font-size: 20px !important;
  }
  #LinkID{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    left: 0;
    width: 100%;
  }
  p {
  color: #b3b3b3;
  font-weight: 300; }
  
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family:'Montserrat Bold', sans-serif !important; }
  
  a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; }
  a:hover {
  text-decoration: none !important; }
  
  .content {
  padding: 7rem 0; }
  
  h2 {
  font-size: 20px; }
  
  .half, .half .container > .row {
  height: 100vh; }
  
    
  @media (max-width: 991.98px) {
  .half .bg {
  height: 500px; } }
  
  .half .contents, .half .bg {
  width: 100%; 
  }
  @media (max-width: 1199.98px) {
  .half .contents, .half .bg {
  width: 100%; } }
  .half .contents .form-group, .half .bg .form-group {
  margin-bottom: 0;
  border: 1px solid #FFB6C1;
  padding: 15px 15px;
  border-bottom: none; 
  background-color: white !important;
  }
    
      .half .contents .form-group.first, .half .bg .form-group.first {
        border-top-left-radius: 7px;
        border-top-right-radius: 7px; }
      .half .contents .form-group.last, .half .bg .form-group.last {
        border-bottom: 1px solid #FFB6C1;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px; }
      .half .contents .form-group label, .half .bg .form-group label {
        font-size: 12px;
        display: block;
        margin-bottom: 0;
        color: #b3b3b3; }
        
    .half .contents .form-control, .half .bg .form-control {
      border: none;
      padding: 0;
      font-size: 20px;
      border-radius: 0; }
      .half .contents .form-control:active, .half .contents .form-control:focus, .half .bg .form-control:active, .half .bg .form-control:focus {
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none; }
  
  .half .bg {
    background-size: cover;
    background-position: center; }
  
  .half a {
    color: #888;
    text-decoration: underline; }
  
  .half .btn {
    height: 54px;
    padding-left: 30px;
    padding-right: 30px; }
  
  .half .forgot-pass {
    position: relative;
    top: 2px;
    font-size: 14px; }
  
   
  
  
    #activemyIdt  .toast {
      position: absolute;
      top: 25px;
      right: 30px;
      width: 65vh;
      border-radius: 12px;
      background: #fff;
      padding: 20px 35px 20px 25px;
      box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
      animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) forwards, disappear 0.3s linear 4.5s forwards;
      display: block !important;
      opacity: 1; /*au dépar l'alerte s'affichais et repartir mais j'ai ajouter le style opacity: 1; et ça à marcher*/
      font-size: 12px;
      }
    
      #activemyIdt .toast.activemyId {
      transform: translateX(0%);
      }
      #activemyIdt .toasta  .progress:before {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background-color: #4070f4 !important;;
        }
      #activemyIdt .toast .toast-content {
      display: flex;
      align-items: center;
      }
    
      #activemyIdt .toast-content .message {
      display: flex;
      flex-direction: column;
      margin: 0 20px;
      }
    
      #activemyIdt .message .text {
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      }
    
      #activemyIdt .message .text.text-1 {
      font-weight: 600;
      color: #333;
      }
    
      #activemyIdt  .toast .close {
      position: absolute;
      top: 10px;
      right: 15px;
      padding: 5px;
      cursor: pointer;
      opacity: 0.7;
      }
    
      #activemyIdt .toast .close:hover {
      opacity: 1;
      }
    
      #activemyIdt  .toast .progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      width: 100%;
    
      }
    
      #activemyIdt .toast .progress:before {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      height: 100%;
      width: 100%;
      background-color: #4070f4;
      }
    
      #activemyIdt .toast-content .check {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 15px;
      min-width: 15px;
      background-color: #4070f4;
      color: #fff;
      font-size: 10px;
      border-radius: 50%;
      }
    
    
      #activemyIdt .toast  .progress:before {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      height: 100%;
      width: 100%;
      background-color: #c90c0c;
      }
    
      
      #activemyIdt .toast-content .fa-exclamation-triangle {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 15px;
        min-width: 15px;
        background-color: #c90c0c;
        color: #fff;
        font-size: 10px;
        border-radius: 50%;
        }
    
      #activemyIdt .progress.activemyId:before {
      animation: progress 5s linear forwards;
      }
    
      @keyframes progress {
      100% {
          right: 100%;
      }
      }
    
    
          @keyframes shake {
          0% {
              transform: translate(0);
          }
          25% {
              transform: translate(3px, 3px);
          }
          50% {
              transform: translate(0);
          }
          75% {
              transform: translate(-3px, -3px);
          }
          100% {
              transform: translate(0);
          }
          }
    
          @keyframes disappear {
          0% {
              opacity: 1;
          }
          100% {
              opacity: 0;
          }
          }
  
         /* c'est pour la taille de l'image dans login sign et forget passworg*/
  
         #monIDi{
         position: absolute;
         top: 0;
         right: 0;
        }
        
  
            /* 
           
              @keyframes breathing-animation {
                from {
                  transform: scale(0.94);
                }
                to {
                  transform: scale(0.99);
                }
              }
        */
              @media (max-width: 991.98px) {
            /* c'est pour afficher l'image de signup
              #contentSignup{
               position: relative;
               top: 90vh;
               width: 90% !important;
               padding-left: 30px;
             
              }
              #monIDi{
               width: 100% !important;
               } 
               
               ce style est pour donner un box-shadow au formulaire de sign
               background: #fff;
            box-shadow: 8px 8px 11px 11px rgba(0, 0, 0, 0.06); border-radius: 5px;
               
               */
               #myimgclassesignup{
                margin-bottom: 24vh !important;
               }
               #toggle-password{
                position: absolute;
                top: 55vh;
                left: 45vh;
                border: #FFB6C1 solid 1px !important;
                color: #40E0D0;
              }
              }
  
             
              .btn-disabled {
                pointer-events: none;
                cursor: not-allowed;
              }
              
              .btn-disabled:hover {
                background-color: #FFB6C1 !important;
              }
       /*        
  
          #breathing-image {
            width: 50%;  height: 100%;/* ajustez la taille de l'image à vos besoins */
           
           /* background-image: url('./../assets/img/love.svg');  ajoutez votre image de fond */
          /*  background-size: cover;
            animation-name: breathing-animation;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
           z-index: -1 !important;
          
          }
      
          @keyframes breathing-animation {
            from {
              transform: scale(1);
            }
            to {
              transform: scale(1.1);
            }
          }
   */
          @media (max-width: 991.98px) {
            #breathing-image {
              width: 100% !important; /* ajustez la taille de l'image à vos besoins */
              height: 90%;
              background-image: url('images/love.jpg'); /* ajoutez votre image de fond */
              background-size: cover;
              animation-name: breathing-animation;
              animation-duration: 4s;
              animation-iteration-count: infinite;
              animation-direction: alternate;
            } 
          }
  
            #preloader {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 9999;
              overflow: hidden;
              background: #fff;
            }
            
            
            #preloader:before {
              content: "";
              position: fixed;
              top: calc(50% - 30px);
              left: calc(50% - 30px);
              border: 6px solid #FFB6C1;
              border-top-color: #e7e4fe;
              border-radius: 50%;
              width: 60px;
              height: 60px;
              animation: animate-preloader 1s linear infinite;
            }
            
            @keyframes animate-preloader {
              0% {
                transform: rotate(0deg);
              }
            
              100% {
                transform: rotate(360deg);
              }
            }
  
            /* If you like this, be sure to ❤️ it. */
          .wrapper {
            height: 100vh;
            /* This part is important for centering the content */
            display: flex;
            align-items: center;
            justify-content: center;
            /* End center */
            background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);
            background: linear-gradient(to right, #834d9b, #d04ed6);
          }
  
          .wrapper a {
            display: inline-block;
            text-decoration: none;
            padding: 15px;
            background-color: #fff;
            border-radius: 3px;
            text-transform: uppercase;
            color: #585858;
            font-family: 'Montserrat', sans-serif;
          
          }
  
          .modal {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(77, 77, 77, .7);
            transition: all .4s;
            font-size: 23px;
          }
  
          .modal:target {
            visibility: visible;
            opacity: 1;
          }
  
          .modal__content {
            border-radius: 4px;
            position: relative;
            width: 500px;
            max-width: 90%;
            background: #fff;
            padding: 1em 2em;
          }
  
          .modal__footer {
            text-align: center;
            font-size: 16px !important;
          
          }
  
          .modal__footer a {
            color: #585858;
          
          }
          .modal__footer  i {
            color: #d02d2c;
          }
          .modal__close {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #585858;
            text-decoration: none;
          }
  
  
  
  
  
  
  .control {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  
  .control--checkbox .caption {
    margin-left: 30px;
  }
  
  .control--checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  .control__indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: rgb(245, 144, 144);
    border-radius: 4px !important;
  }
  
  .control--checkbox .control__indicator::after {
    content: "";
    position: absolute;
    display: none;
    
  }
  
  .control--checkbox input[type="checkbox"]:checked + .control__indicator {
    background-color: #4169E1;
  }
  
  .control--checkbox input[type="checkbox"]:checked + .control__indicator::after {
    display: block;
    
  }
  
  .control--checkbox .control__indicator::after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }