* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #DAD6DD;
}

/* Right */

.right {
    border-radius: 5px;
}

.para {
    color: #868686;
    font-weight: bold;
    margin: 0;
    font-size: 10px;
}

.welcome {
  color: #868686;
  font-weight: bold;
  margin: 0;
  font-size: 90%;
}

.inputWithIcon {
    position: relative;
  }

input[type="text"] {
    width: 70%;
    border: 2px solid #9478A9;
    border-radius: 4px;
    margin: 8px 0;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
    transition: 0.3s;
  }

.inputWithIcon input[type="text"] {
    padding-left: 40px;
}

input[type="email"] {
  width: 70%;
  border: 2px solid #9478A9;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}


.inputWithIcon input[type="email"] {
  padding-left: 40px;
}

  input[type="password"] {
    width: 70%;
    border: 2px solid #9478A9;
    border-radius: 4px;
    margin: 8px 0;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
    transition: 0.3s;
  }

  .inputWithIcon input[type="password"] {
    padding-left: 40px;
}
  
  .inputWithIcon i {
    position: absolute;
    left: 15%;
    top: 12%;
    padding: 9px 8px;
    color: #9478A9;
    transition: 0.3s;
  }

  .inputWithIcon input[type="checkbox"] {
    color: #868686;
    font-weight: bold;
    margin: 0;
    background: pink;
    font-size: 80%;
}

  .inputWithIcon img {
    width: 40%;
  }

  .forget-password a{
    text-decoration: none;
    font-size: 80%;
  }

  .remember {
    font-size: 80%;
  }

  .submit {
    width: 70%;
    border: none;
    background-color: #3A204D;
    border-radius: 4px;
    margin: 8px 0;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
    transition: 0.3s;
    color: #DAD6DD;
    font-weight: 500;
    transition: background 300ms ease-in-out;
  }

  .submit:hover {
    background-color: #4d2967;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }

  .cwgoogle {
    width: 37%;
    border: 2px solid #9478A9;
    border-radius: 5px;
    padding: 5px 0px;
    font-weight: 600;
    font-size: 80%;
  }

  .cwgoogle:hover {
    background-color: #eee5f5;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }

  .inputWithIcon .google-icon{
    position: absolute;
    left: 31%;
    top: -20%;
    transition: 0.3s;
  }

  .inputWithIcon input[type="submit"] {
    padding-left: 20px;
}

  .register-link a {
    color: #725489;
    text-decoration: none;
    font-weight: 400;
    font-size: 90%;
  }

  .register-link a:hover {
    color: #33114d;
  }

  .hr-text{
    position: relative;
    ouline: 0;
    border: 0;
    height: 1.5em;
  }

  .hr-text:before{
    content: '';
    position: absolute;
    background: green;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
  }

  .hr-text:after{
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;
    padding: 0 2em;
    line-height: 1.5em;
    color: #818078;
    background-color: #fcfcfa;
  }

  .template-login {
    padding-top: 5%;
  }

  /* https://codepen.io/scottzirkel/pen/yNxNME */

/* Left */

.left {
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(58, 32, 77, 100%) 0%, rgba(86, 19, 135, 96%) 50%, rgba(43, 32, 177, 100%) 100%);
}

@media only screen and (max-width: 500px) {

  .left {
      display: none;
  }

  input[type="text"] {
    width: 90%;
  }

  input[type="password"] {
    width: 90%;
  }

  .inputWithIcon i {
    left: 5%;
  }

  .cwgoogle {
    width: 60%;
    font-size: 80%;
  }

  .inputWithIcon .google-icon{
    left: 20%;
    top: -20%;
  }

  .mobile-center {
    margin: 20%;
  }

  .inputWithIcon img {
    width: 70%;
  }
  
}


@media only screen and (max-width: 1000px) and (min-width: 901px) {

  .left {
      display: none;
  }

  .inputWithIcon img {
    width: 30%;
  }

}

@media only screen and (max-width: 1500px) and (min-width: 901px) {

  .cwgoogle {
    width: 50%;
    font-size: 80%;
  }

  .inputWithIcon .google-icon{
    left: 25%;
    top: -20%;
  }

}


@media only screen and (max-width: 900px) and (min-width: 501px) {

  .left {
      display: none;
  }

  .tablet-center {
    margin: 30%;
  }
  
}


@media only screen and (max-width: 910px) and (min-width: 502px) {
  
  .inputWithIcon img {
    width: 40%;
  }
}