body{margin:0;padding:0;font-family: 'Roboto';background:#fbf8f4}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
.text-center{text-align: center;}
.header{padding:20px 0 50px 0;/*position: fixed;top: 0;left: 0;width: 100%;*/}
.container{width:100%;margin:0 auto;}
.logo-left{text-align:center;}
.content{display: flex;flex-direction: column;justify-content: center;
align-items: center;text-align: center;min-height: 100vh;margin: 0 8vw;}
.password-section{width:350px;margin:0 auto;color: #fff}
.password-section h2{text-align:center;margin:0 0 20px 0;font-weight:bold;color: #000000;font-family: 'Alegreya Sans', sans-serif;font-size:45px}
.password-section .form-group {position: relative;font-size: 15px;color: #fff;}
.password-section .form-group + .form-group {margin-top: 15px;}
.password-section .form-group .form-label{position:absolute;z-index: 1;left: 0;top: 8px;transition:0.3s;}
.password-section .form-group .form-control {width: 100%;position: relative;z-index: 3;height: 25px;border: none;padding: 20px 15px;transition: 0.3s;color: #324646;background: #e0f5f3; border-radius: 5px;}
.password-section .form-group .fom-control:invalid {outline: none;}
.password-section .form-group .form-control:focus,.password-section .form-group .form-control:valid {outline: none;box-shadow: none;border-color: #a0a0a0;}
.password-section .form-group .form-control::placeholder{color: #324646}
.password-section .form-group .form-control:focus + .form-label,.password-section .form-group .form-control:valid + .form-label {font-size: 13px;color: #a0a0a0;-webkit-transform: translateY(-15px);transform: translateY(-15px);top:5px;}
.password-section .btn.save{ background-image: linear-gradient(to right, #2ab3b5 , #12c5e0);
border: none;padding: 9px 20px;width: auto;border-radius: 5px;margin: 40px auto 0;display: inline-block;font-size: 15px;color: #fff;font-weight: normal;outline: none;text-align: center;
text-decoration: none;margin: 0 auto;border-radius: 100px;box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;min-width: 130px;cursor: pointer}
.password-section p.alert{color: #d81a1a;margin: 8px 0 0 0;font-size: 14px;line-height: 20px;text-align: left;font-size: 13px;font-weight: 500}
.password-section p.alert.black-alert{color: #646464;margin:20px 0 30px 0;padding-right: 65px}
.password-section p.alert.black-alert.text-center{text-align: center;padding:15px 0 30px;margin:0;}
.password-section .btn.save:disabled {opacity: 0.3;}
.success-msg img{padding:10px 0}
.password-section p.alert.black-alert.text-center span{display: block;font-weight: bold;}
.password-section .btn.save.rest-btn{margin:30px auto}
.password-section p.alert.info-alert{color: #3da5c1;margin:20px 0 30px 0;padding-right: 65px;background-color: #e0f5f3;border-radius: 11px;}
.password-section p.alert.info-alert.text-center{text-align: center;padding:33px;margin:0;}
/*For loader*/
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2bb4b5;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



@media screen and (max-width:500px){ 
  .password-section{width: 100%}
  .password-section h2{font-size:40px}
}
@media screen and (max-width:420px){ 
  .password-section h2{font-size:35px}
}