@charset "utf-8";

.signin-panel{
  background: #fff;
  padding: 3em;
  border-radius: 0.4em;
  box-shadow: 1px 0px 8px #ccc;
  max-width: 36rem;
  margin: 2em auto;
}
.signin-panel h2{
  color: #368DDB;
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1em;
}
.signin-panel label{    
  font-size: 90%;
  margin-bottom: 0;
}
.signin-panel .signin-input > p{
  margin: 0 auto 1em;
  font-size: 1.4rem;
  font-size: 14px;
}
/*Appearance Reset*/
/*elase radio, checkbox and pulldown arrow */
input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/*Appearnce Reset + alpha*/
input, button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
}
/* Placeholder text color */
/* Chrome */
::-webkit-input-placeholder {
  color: #368DDB;
}
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
    transition: .1s;
}
/* Firefox */
::-moz-placeholder {
  color: #368DDB;
}
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
    color: transparent;
    transition: .1s;
}

/* IE */
:-ms-input-placeholder {
  color: #368DDB;
}
input:focus::placeholder,
textarea:focus::placeholder {
    color: transparent;
    transition: .1s;
}


input[type="submit"]{
    background: #368DDB;
    color: #FFF;
    padding: 0.4em 4em;
    width: 100%;
    border: 1px solid #3D9FF5;
    cursor: pointer;
    border-radius: 0.1em;
}
input[type="submit"]:hover{
    background: #3D9FF5;
}
.pass-forget{
    font-size: 1.3rem;
    font-size: 13px;
    text-align: center;
    margin: 2em 0 0;
}

/* Signin & Signup */
#login-panel{
  box-shadow: 1px 0px 8px #ccc;
  border-radius: 0.4em;
  margin: 8em auto;
  max-width: 1024px;
}
#login-panel .signin-panel,
#login-panel .signup-panel{
  position: relative;
  max-width: 100%;
}
#login-panel .signin-panel{
  margin: 0;
  border-radius: 0 0 0.4em 0.4em;
  box-shadow: none;
}
#login-panel .signup-panel h2{
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1em;
}
#login-panel .signup-panel{
  background: #368DDB;
  color: #FFF;
  padding: 3em;
  border-radius: 0.4em 0.4em 0 0;
}
#login-panel .signup-panel .signup-message{
  margin-bottom: 2em;
}
#login-panel .signup-panel a.button{
  background: #FFF;
  color: #368DDB;
  padding: 0.4em 4em;
  width: 100%;
  border: 1px solid #CCC;
  cursor: pointer;
  border-radius: 0.1em;
  text-decoration: none;
  display: block;
  text-align: center;
}
#login-panel .signup-panel:after{
  content: '';
  display: block;
  height: 22px;
  width: 44px;
  border-radius: 0 0 22px 22px;
  position: absolute;
  top: inherit;
  right: inherit;
  left: 50%;
  bottom: -32px;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  background: #368DDB;
  border-right: 1px solid #bcbcbc;
  border-left: 1px solid #bcbcbc;
  border-bottom: 1px solid #bcbcbc;
  border-top: none;
  z-index: 1;
}
@media screen and (min-width: 769px){
  #login-panel{
      display: flex;
      justify-content: center;
  }
  #login-panel .signin-panel,
  #login-panel .signup-panel{
      width: 50%;
  }
  #login-panel .signin-panel{
      border-radius: 0 0.4em 0.4em 0;
  }
  #login-panel .signup-panel{
      border-radius: 0.4em 0 0 0.4em;
  }
  #login-panel .signup-panel:after{
      content: '';
      display: block;
      height: 44px;
      width: 23px;
      border-radius: 0 22px 22px 0;
      position: absolute;
      top: 50%;
      left: calc(100% + 11px);
      -webkit-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      background: #368DDB;
      border-right: 1px solid #bcbcbc;
      border-top: 1px solid #bcbcbc;
      border-bottom: 1px solid #bcbcbc;
      border-left: none;
      z-index: 1;
  }
}