@font-face {
  font-family: 'Montserrat';
  src: url('Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
 
 

body {
width: 100%;
height: 100vh;
/*background: url(./../images/bg_change.jpg) top center no-repeat;*/
background-size: cover;
 
}
.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);
}