/* Root */
:root {
  --color-primary: #5A43ED;
  --color-primary-light: #7461eb;
  --color-white: #FFFFFF;
  --color-dark: ;
}
/* Modifire */
body {
  font-size: 52.5%;
}
.block {
  padding: 0.5rem 2rem;
}
.text-mute {
  opacity: 0.9;
}
.text--primary {
  color: var(--color-primary);
  opacity: 1;
}
.activities-list::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }
  .metismenu li a i::before{
    color: red;
  }

  .metismenu-red::before {
    color: rgb(255, 116, 116) !important;
  }
  .metismenu-blue::before {
    color: rgb(143, 143, 255) !important;
  }
  .metismenu-blue-dark::before {
    color: rgb(171, 171, 255) !important;
  }
  .metismenu-purple::before{
    color: rebeccapurple!important;
  }
  .metismenu-pink-dark::before {
    color: rgb(255, 116, 183) !important;
  }
  .metismenu-pink-light::before {
    color: rgb(255, 170, 184) !important;
  }
  .metismenu-green::before {
    color: rgb(123, 255, 123) !important;
  }

  /* Inputs */
  .custom-input {
    padding: 1.8rem 0;
    border-radius: 2rem;
    border-right: 0;
  }
  .input-group-text{
    padding: 0 20px ;
    background-color: white;
  }

  .form-icon{
    color: #5A43ED;
  }

  /* Logo */
  .logo {
   display: flex;
   flex-direction: column;
   align-items: center; 
   padding: 0;
  }
  .logo__img{
    width: 50%;
  }
  .logo p {
    margin: 0;
  }
  .logo > * {
    margin: 0;
  }

/* btn */
.btn--primary{
  background-color: var(--color-primary);
  color: var(--color-white);
}
.btn--primary:hover {
  background-color: var(--color-primary-light);
  color: var(--color-white);
}

  /* Form */
.inputs {
  font-size: 1.2rem;
}
  .form {
    display: flex;
    flex-direction: column;
  }
  .form-inputs {
    display: flex;
    flex-direction: column;
    /* gap: 1rem; */
  }
  .form-image {
    display: none;
  }

  .inputs__child > * {
    /* padding-top: 0.5rem; */
  }
  .inputs__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
  }
  .action__btn {
    width: 8rem;
    margin-bottom: 1rem;
  }
  .action__reset-pass {
    color: black;
    font-size: 1rem;
  }
 @media screen and (min-width: 768px) {
    .inputs {
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      gap: 1.5rem ;
    }
    .form-inputs{
      width: 100%;
      padding: 0 1rem;
    }
    .form.block {
      padding: 0;
    }
    .inputs {
      order: -1;
    }
    .form-image {
      display: block;
    }
    .form-image img {
      width: 100% !important;
      height: 100vh;
      object-fit: cover;
    }
    .form {
      display: grid;
      grid-template-columns: 1fr 2fr;
    }
}
@media screen and (min-width: 1024px) {
  .form-inputs{
      width: 100%;
      padding: 0 3rem;
    }
}