@import url('https://fonts.googleapis.com/css?family=Nunito:400,700,900|Heebo:400,500,700,800,900&display=swap');
:root{
  --dk:#003546;
  --dktr:#00354666;
  --dktr80:#003546B3;
  --hl:#ff500a;
  --wt:#D4CFC9;
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.body{
  font-family: 'Heebo', sans-serif;
}
.page_top{
  position: relative;
  display: block;
  color: var(--wt);
  background: var(--dktr80);
  height: 3rem;
  width: 100%;
  box-shadow: .6rem .6rem 1.2rem var(--dktr80);
}
.page_top_logo{
  display: inline-block;
}

.page_top_logo img{
  height: 2.5rem;
  margin: .25rem;
  margin-left: .5rem;
}
.page_top_logo span{
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 3rem;
  vertical-align: top;
  padding-left: .5rem;
}

.wrapper{
  width: 25rem;
  padding: 2.5rem;
  overflow: hidden;
  background: var(--dktr80);
  color: var(--wt) !important;
  margin: 10rem auto;
  box-shadow: .6rem .6rem 1.2rem var(--dktr80);
}
.wrapper h2{
  font-weight: 700;
}
.wrapper input:not([type=submit]),
.wrapper input:not([type=submit]):focus{
  border: none;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid var(--dktr);
  font-weight: 700;
  width:15rem;
  padding: 0;
  color: var(--wt) !important;
  background: none;
}
.wrapper input::placeholder{
  color: var(--wt);
  opacity: .5 !important;
}
.wrapper .help-block{
  color: var(--hl);
  display: block;
}

.wrapper input[type=submit],
.wrapper input[type=submit]:focus{
  float: right;
  box-shadow: none;
  border-radius: 0;
  outline: none;
  border: 0;
  padding: .2rem 1rem;
  background: var(--dk);
  color: var(--wt);
  font-weight: 700;
  opacity: .7;
  transition: all 250ms ease-in-out 250ms;
}
.wrapper input[type=submit]:hover{
  opacity: 1;
  transition: all 250ms ease-in-out;
}

.form-group{
  position: relative;
}
.form-group .pw_show{
  position: absolute;
  top:0;
  left:15rem;
  display: none;
}

.form-group>div label{
  display: inline-block;
  cursor: pointer;
}
.form-group>div:hover i{
  color: var(--hl);
  transition: color 150ms ease-in-out;
}

.wrapper input[type=checkbox]{
  display: none;
}
.wrapper i{
  padding: 0 .5rem;
  width: 2rem;
  opacity: .7;
  transition: color 150ms ease-in-out 150ms;
}
.wrapper i.fa-eye-slash{
  margin-left: -2rem;
  opacity: 0;
}

.bottom{
  position:absolute;
  bottom:0;
  right:0;
  height:4rem;
  padding:.5rem;
  width:100%;
  text-align:right;
  background: var(--wt);
  color: #333;
  box-shadow: -.6rem -.6rem 1.2rem var(--dktr80);
}
.bottom img{
  height: 3rem;
}
.bottom span{
  font-weight:400;
  font-size:1.6rem;
  line-height:3rem;
  vertical-align:top;
}