p {
   color: #b3b3b3;
   font-weight: 300;
}

.content {
   width: 100vw;
   min-height: 100vh;
}

.content .contents .form-group {
   margin-bottom: 0;
   padding: 15px;
   border-bottom: none;
   position: relative;
   background: #edf2f5;
   border-bottom: 1px solid #e6edf1;
}
.content .contents .form-group label {
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   -webkit-transition: 0.3s all ease;
   -o-transition: 0.3s all ease;
   transition: 0.3s all ease;
}
.content .contents .form-group input {
   background: transparent;
}
.content .contents .form-group.first {
   border-top-left-radius: 7px;
   border-top-right-radius: 7px;
}
.content .contents .form-group.last {
   border-bottom-left-radius: 7px;
   border-bottom-right-radius: 7px;
}
.content .contents .form-group label {
   font-size: 12px;
   display: block;
   margin-bottom: 0;
   color: #b3b3b3;
}
.content .contents .form-group.focus {
   background: #fff;
}
.content .contents .form-group.field--not-empty label {
   margin-top: -20px;
   margin-left: -5px;
   color: #2a8564 !important;
   scale: 0.9;
}
.symbol.active {
   color: #2a8564 !important;
   scale: 1.6;
}
.symbol {
   -webkit-transition: 0.3s all ease;
   -o-transition: 0.3s all ease;
   transition: 0.3s all ease;
}
.content .contents .form-control {
   border: none;
   padding: 0;
   font-size: 20px;
   border-radius: 0;
}
.content .contents .form-control:active,
.content .contents .form-control:focus {
   outline: none;
   -webkit-box-shadow: none;
   box-shadow: none;
}

.bannerlogo {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 200px;
   height: auto;
   border-radius: 50%;
   margin-bottom: 10px;
}


@media(min-width: 960px) {
   .loginlogo {
      width: 180px;
   }
   .main-card {
      padding-top: 80px !important;
      padding-bottom: 80px !important;
   }
}
@media(max-width: 960px) {
   .loginlogo {
      width: 180px;
   }
   .main-card {
      padding-top: 80px !important;
      padding-bottom: 80px !important;
   }
}

@media(max-width: 720px) {
   .loginlogo {
      width: 150px;
   }
   .bannerlogo {
      width: 165px;
      height: 165px;
   }
   .main-card {
      padding-top: 60px !important;
      padding-bottom: 60px !important;
   }
}

@media(max-width: 540px) {
   .loginlogo {
      width: 120px;
   }
   .bannerlogo {
      width: 130px;
      height: 130px;
   }
   .main-card {
      padding-top: 20px !important;
      padding-bottom: 40px !important;
   }
}

/* .animateform {
   -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
   animation: anim-shadow 0.5s ease-in-out forwards;
} */

.focus-input100 {
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: -1;
   width: 100%;
   height: 100%;
   box-shadow: 0 0 0 0;
   color: rgba(87, 184, 70, 0.8);
}

.animateinput:focus +.focus-input100 {
   -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
   animation: anim-shadow 0.5s ease-in-out forwards;
}

/* @-webkit-keyframes anim-shadow {
   from {
      box-shadow: 0 0 0 0 rgb(48, 155, 116, 0.6);
   }
   50% {
      box-shadow: 0 0 10px 3px rgb(48, 155, 116, 0.6);
   }
   to {
      box-shadow: 0 0 0 0 rgb(48, 155, 116, 0.6);
   }
}

@keyframes anim-shadow {
   from {
      box-shadow: 0 0 0 0 rgb(48, 155, 116, 0.6);
   }
   50% {
      box-shadow: 0 0 10px 3px rgb(48, 155, 116, 0.6);
   }
   to {
      box-shadow: 0 0 0 0 rgb(48, 155, 116, 0.6);
   }
} */

@-webkit-keyframes anim-shadow {
   to {
      box-shadow: 0 0 70px 25px;
      opacity: 0;
   }
}

@keyframes anim-shadow {
   to {
      box-shadow: 0 0 70px 25px;
      opacity: 0;
   }
}