* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Popins, Helvetica;
}

:root {
   --color: #47ddf0;
   --color-dark: #054d67;
}

body {
   min-height: 100vh;
   width: 100vw;
   background-color: var(--color);

   display: flex;
   justify-content: center;
   align-items: center;

   padding: 0 25px;
}

.wrapper {
   width: 60%;
   max-width: 400px;
   min-width: 250px;
}

/* Input */

.input {
   position: relative;
}

input {
   width: 100%;
   height: 40px;
   padding: 10px 30px 10px 10px;

   outline: 0;
   border: 1px solid #fff;
   border-radius: 5px;
   box-shadow: 1px 1px 2px rgba(0,0,0, .4);

   transition: .3s all;
   overflow: hidden;
}

input:focus {
   border: 1px solid var(--color-dark);
}

.eye {
   position: absolute;
   right: 1px;
   top: 1px;

   height: 38px;
   width: 38px;
   border-radius: 50%;

   display: flex;
   justify-content: center;
   align-items: center;

   outline: 0;
   border: 0;

   background-color: transparent;

   cursor: pointer;
   color: #555;

   transition: .3s all;
}

.eye:hover {
   color: #000;
   background-color: #eee;
}

/* Password Steps */

.password-steps {
   padding: 10px;
   margin-top: 15px;
   border-radius: 5px;

   background-color: var(--color-dark);
   box-shadow: 2px 2px 2px rgba(0,0,0, .6);
}

ul {
   list-style: none;
}

li {
   color: #fff;
   margin-bottom: 10px;
   font-weight: 300;
   font-size: 1.1rem;
}

li:last-child {
   margin-bottom: 0;
}

li.is-valid span {
   color: #aaa;
}

li i {
   font-size: .9rem;
   margin-right: 5px;
}

li i.fa-check {
   color: #00ff55;
}

.btn-wrapper {
   height: 0;
   overflow: hidden;
   transition: all .3s ease-in-out;
}

.btn-wrapper.show {
   height: 50px;
}

#btn-submit-password {
   margin-top: 10px;

   height: 40px;
   width: 100%;

   cursor: pointer;
   border-radius: 5px;
   outline: 0;
   border: 0;

   background-color: var(--color);
   font-size: 1.2rem;
   transition: .3s all;
   overflow: hidden; 

   position: relative;
}

#btn-submit-password::after {
   content: '';
   display: block;

   height: 4px;
   width: 0;

   background-color: #fff;

   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin: 0 auto;

   border-radius: 5px;
   transition: all .3s;
}

#btn-submit-password:hover {
   background-color: #4bb1d5;
   color: #fff;
}

#btn-submit-password:hover::after {
   width: 100%;
}

#btn-submit-password i {
   transition: .3s all;
}

#btn-submit-password:hover i {
   animation: dance .2s infinite;
}

@keyframes dance {
   0% {
      color: #000;
      transform: translateY(-1px) translateX(-1px);
   }
   
   100% {
      color: #fff;
      transform: translateY(1px) translateX(1px);
   }
}


#password-count {
   margin-top: 10px;
   text-align: center;
   display: block;
   
   font-style: italic;
   font-size: .9rem;
   color: blue;
}

#password-count:visited {
   color: blue;
}

@media (max-width: 550px) {
   
   .body {
      padding: 0 5px;
   }

   .wrapper {
      width: 100%;
   }

   li {
      font-size: 1rem;
   }

   li i {
      margin-right: 5px;
   }

}