@media (max-width: 575.98px) {

   .card_login--inputbox {
      position: absolute;
      top: 26%;
      left: 16%;
      width: 78%;
      padding: 10%;
      border-radius: 1rem;
      background: #5d5d628a;
   }

   .card_login--btn {
      margin-right: 0%;
   }

   .inputbox {
      border: none;
      border-bottom: 2px solid rgb(247, 244, 244);
   }

      .inputbox::placeholder {
         color: #ffff;
      }

   .bi-person, .bi-key {
      color: #ffff;
   }
}

@media (min-width: 576px) and (max-width: 767.98px) {
   .card_login--inputbox {
      position: absolute;
      top: 25%;
      left: 22%;
      width: 64%;
      padding: 5%;
      border-radius: 1rem;
      background: #5d5d62c7;
   }

   .inputbox {
      border: none;
      border-bottom: 2px solid rgb(247, 244, 244);
   }

      .inputbox::placeholder {
         color: #ffff;
      }

   .bi-person, .bi-key {
      color: #ffff;
   }
}

@media (min-width: 768px) and (max-width: 991.98px) {

   .card_login--inputbox {
      position: absolute;
      top: 24%;
      left: 31%;
      width: 48%;
      padding: 5%;
      border-radius: 1rem;
      background: #5d5d628a;
   }

   .inputbox {
      border: none;
      border-bottom: 2px solid rgb(247, 244, 244);
   }

      .inputbox::placeholder {
         color: #ffff;
      }

   .bi-person, .bi-key {
      color: #ffff;
   }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
   .card_login--inputbox {
      position: absolute;
      top: 18%;
      left: 33%;
      width: 42%;
      padding: 5%;
      background: #5d5d628a;
      border-radius: 1rem;
   }

   

   .inputbox {
      border: none;
      border-bottom: 2px solid rgb(247, 244, 244);
   }

      .inputbox::placeholder {
         color: #ffff;
      }

   .bi-person, .bi-key {
      color: #ffff;
   }
}

@media (min-width: 1200px) {
}