* {
  font-family: serif;
}
body {
  margin: 0;
  padding: 0;
  font-size: 13px;
}
.login-bg {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #9053c7;
  background: -webkit-linear-gradient(-135deg, #DB7A33, #FFF240);
  background: -o-linear-gradient(-135deg, #DB7A33, #FFF240);
  background: -moz-linear-gradient(-135deg, #DB7A33, #FFF240);
  /* background: linear-gradient(-135deg, #1e97b3, #c0ccbd); */
  background: linear-gradient(-135deg, #1e97b3, #db7a33);
}

.wrap {
  box-sizing: border-box;
  width: 960px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 80px 130px 80px 95px;
}

.logo {
  width: 320px;
}
.logo img {
  width: 100%;
  border: none;
}

.form {
  width: 300px;
}
.title {
  font-weight: bold;
  font-size: 28px;
  color: #333333;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  margin-bottom: 40px;
}
.title .text {
  display: inline-block;
  position: relative;
}
.title span {
  position: absolute;
  top: 4px;
  right: -6em;
  border-radius: 0.35em;
  background: #db7a33;
  color: white;
  font-size: 12px;
  padding: 0.25em 0.5em;
}

input, button {
  box-sizing: border-box;
  outline: none;
  border: none;
}

.input, .button {
  display: block;
  font-size: 24px;
  line-height: 2em;
  height: 2em;
  width: 100%;
  background: #c0ccbd;
  color: #fff;
  border-radius: 1em;
  padding: 0 30px 0 68px;
  margin: 10px 0;
}
.input::placeholder {
  color: #767171;
  font-size: 20px;
}
.input:focus::placeholder {
  color: transparent;
}
.input.error {
  box-shadow: red inset 0 0 10px;
}
.input.error::placeholder {
  color: #DB7A33;
}

.button {
  cursor: pointer;
  padding: 0;
  color: white;
  background: #1e97b3;
  margin-top: 30px;
}
.button:hover {
  opacity: 0.8;
}

.icon {
  position: relative;
}
.icon::before {
  content: "";
  position: absolute;
  height: 30px;
  width: 30px;
  top: 8px;
  left: 20px;
  background: no-repeat center;
  background-size: contain;
}
.icon.email::before {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTk5NTQ1NDkxMDQ2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEzODUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY1NTgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iODYuNTYyNSIgaGVpZ2h0PSI2NCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNMTA2My45ODkzMTUxNyAxNDQuNjQzMDM3NzNoLTg0Mi4xOTg5ODg1N2MtNTcuOTMwMjYxODIgMC0xMDUuMjk4MTM5MSA0MS44NzcyOTgwMi0xMDUuMjk4MTM5MSA5My4wNjA2NjE1OXY1NTguMzYzOTcxMDNjMCA1MS4xODMzNjQzMyA0Ny4zNjc4NzY1MiA5My4wNjA2NjE1OCAxMDUuMjk4MTM5MSA5My4wNjA2NjE1OGg4NDIuMTk4OTg4NTdjNTcuOTMwMjYxODIgMCAxMDUuMjk4MTM5MS00MS44NzcyOTgwMiAxMDUuMjk4MTM5MS05My4wNjA2NjE1OHYtNTU4LjM2Mzk3MTAzYzAtNTEuMTgzMzY0MzMtNDcuMzY3ODc2NTItOTMuMDYwNjYxNTgtMTA1LjI5ODEzOTEtOTMuMDYwNjYxNTl6IG0wIDE4Ni4xMjEzMjMxN2wtNDIxLjA5OTQ5NDY2IDIzMi42NTE2NTQ3My00MjEuMDk5NDkzOTEtMjMyLjY1MTY1NDczdi05My4wNjA2NjE1OGw0MjEuMDk5NDkzOTEgMjMyLjY1MTY1NDczIDQyMS4wOTk0OTQ2Ni0yMzIuNjUxNjU0NzN2OTMuMDYwNjYxNTh6IiBwLWlkPSI2NTU5IiBmaWxsPSIjOGE4YThhIj48L3BhdGg+PC9zdmc+');
}
.icon.pass::before {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTk5NTQ1NDIyMDU2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ1MDciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUzNy42IDQyNC45NkM1MDYuODggMzI3LjY4IDQwOS42IDI1NiAzMDIuMDggMjU2IDE2My44NCAyNTYgNTEuMiAzNjguNjQgNTEuMiA1MDYuODhzMTEyLjY0IDI1MC44OCAyNTAuODggMjUwLjg4YzEwNy41MiAwIDIwNC44LTcxLjY4IDIzNS41Mi0xNjguOTZoMTg0LjMydjE2OC45NmgxNjguOTZ2LTE2OC45Nkg5NzIuOFY0MjQuOTZoLTQzNS4yeiBtLTIzNS41MiAxNjMuODRjLTQ2LjA4IDAtODEuOTItMzUuODQtODEuOTItODEuOTJTMjU2IDQyNC45NiAzMDIuMDggNDI0Ljk2czgxLjkyIDM1Ljg0IDgxLjkyIDgxLjkyLTM1Ljg0IDgxLjkyLTgxLjkyIDgxLjkyeiIgcC1pZD0iNDUwOCIgZmlsbD0iIzhhOGE4YSI+PC9wYXRoPjwvc3ZnPg==');
}

.more {
  margin-top: 35px;
  text-align: center;
  color: #767171;
  font-size: 14px;
}
.more a {
  color: #DB7A33;
}

.icp {
  color: #FFF240;
  font-size: 16px;
  margin-top: 50px;
}
.icp a {
  color: white;
  text-decoration: none;
}