* { outline: none; }

html { font-size: 62.5%; }

body#login-body {
  padding: 0;
  margin: 0;
  font-family: 'open sans',arial,verdana,sans-serif;
  font-size: 1.3rem;
  line-height: 1.4em;
  background: #f5f5f5 url(/common_ui/embed_ui/img/login/bg-desk.jpg);
  background-size:cover;
}

div,
input { 
  -webkit-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

h1 { 
  font-size: 2rem;
  font-weight: normal;
  margin: 0 0 1em 0;
  line-height: 1.3em;
}

p { margin: 1.7em 0; }

div.input-wrap {
  margin-bottom: 18px;
  position: relative;
  text-align: left;
}

div.input-wrap span.reveal {
  position: absolute;
  bottom: 12px;
  right: 7px;
  cursor: pointer;
}

/* label { } */

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

input[type="text"],
input[type="password"] {
 -webkit-appearance: none;
  color: #000000;
  border: 1px solid #bbbbbb;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
  border-radius: 0px;
  padding: 10px 30px 10px 10px;
  margin-top: 5px;
  width: 100%;
  font-family: 'open sans',arial,verdana,sans-serif;
  font-size: 1.8rem;
  transition: all 300ms ease-in-out 0s;
}

input[type="text"]:focus,
input[type="text"]:active,
input[type="password"]:focus,
input[type="password"]:active {
  border: 1px solid #000000;
  transition: border 300ms ease-in-out 0s;
}

input.button { 
 -webkit-appearance: none;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
  border-radius: 0px;
  border: 0;
  background: #3973ac;
  color:#ffffff;
  padding: 12px 15px;
  text-transform: uppercase;
  font-family: 'open sans',arial,verdana,sans-serif;
  transition: all 300ms ease-in-out 0s;
  cursor: pointer;
}

input.button:hover,
input.button:focus {
  background: #316292;
  transition: background 300ms ease-in-out 0s;
}

input.button.minor {
  background: #ffffff;
  color: #3973AC;
  border: 0;
}

input.button.minor:hover,
input.button.minor:focus {
  background: #ffffff;
  color: #316292;
  text-decoration: underline;
  border: 0;
  transition: color 300ms ease-in-out 0s;
}

input.button.disabled {
 background-color: #ccc;
}

a, a:visited {
 color: #005099;
 text-decoration: none;
}

a:hover,
a:focus { text-decoration: underline; }

.hidden { display: none; }

div#container { 
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

div#wrapper-box {
  width: 350px;
  position: relative;
  text-align: center;
}

div#login-info-cont { padding: 0 35px; }

div#login-info-cont h1 {
  font-weight: 300;
  font-size: 3rem;
  margin-top: 30px;
}

div#login-layout-wrap {
  padding: 35px;
  background: #ffffff;
  box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.49);
 -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.49);
 -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.49);
}

div#forgot_password_cont,
div#password_changed_cont,
div#change_password_cont {
  display: none;
  padding: 35px;
  margin-top: 30px;
  background: #ffffff;
  box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.49);
 -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.49);
 -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.49);
}

div#change_password_ok,
div#change_password_failed { display: none; }

div#change_password_failed {
  border: 1px solid #ebcaca;
  background-color: #fbdada;
  color: #b80000;
  padding: 10px;
  margin-bottom: 20px;
}

div#change_password_ok { 
  padding: 0;
  text-align: center;
}

div.phase2-layout-cont {
  padding: 35px 35px 35px 35px;
  background: #ffffff;
  box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.49);
 -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.49);
 -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.49);
}

div.phase2-layout-cont p { margin-top: 0; }

div#phase2-info-cont h1 {
  font-size: 3rem;
  font-weight: 300;
  margin-top: 30px;
}

div.notification {
  padding: 10px 10px 10px 40px;
  color: black;
  margin-bottom: 20px;
  position: relative;
  text-align: left;
}

div.notification.inline-block { display: inline-block; }

div.notification.error { 
  background: #fbdada;
  color: #b80000;
  border: 1px solid #ebcaca;
}

p#password_requirement.error { color: #b80000; }

input#new_password.error,
input#new_password2.error { border-color: #b80000; }

div#pw2error {
 position: absolute;
 border: 1px solid #b80000;
 width: 100%;
 padding: 4px 10px;
 background-color: #fbdada;
 margin-top: -11px;
 color: #b80000;
}

div.notification.info { 
  background: #daf0fb;
  color: #006B99;
  border: 1px solid #cae0eb;
}

div.notification::before {
 font-family: 'Material Icons';
 font-size: 23px;
 vertical-align: middle;
 margin-left: -30px;
 position: absolute;
}

div.notification.error::before {
 content: '\E000';
 color: #b80000;
}

div.notification.info::before {
 content: '\E88E';
 color: #006B99;
}

div.notification::after {
 font-family: 'Material Icons';
 font-size: 32px;
 position: absolute;
 left: 0;
 line-height: 1em;
 margin-top: -5px;
 content: '\E5C5';
 display: block;
}

div.notification.no_arrow::after { display: none; }

div.notification.error::after { 
  color: #fbdada;
  text-shadow: 0 2px #ebcaca;
}

div.notification.info::before {
 content: '\E88E';
 color: #006B99;
}

.material-icons,
.material-icons-outlined { 
  font-family: 'Material Icons' !important; 
  font-weight: normal; 
  font-style: normal; 
  font-size: 18px; /* Preferred icon size */ 
  display: inline-block; 
  line-height: 1; 
  text-transform: none; 
  letter-spacing: normal; 
  word-wrap: normal; 
  white-space: nowrap; 
  direction: ltr; 
  transform: rotate(0.03deg);
  
  /* Support for all WebKit browsers. */ 
  -webkit-font-smoothing: antialiased; 

  /* Support for Safari and Chrome. */ 
  text-rendering: optimizeLegibility; 

  /* Support for Firefox. */ 
  -moz-osx-font-smoothing: grayscale; 

  /* Support for IE. */ 
  font-feature-settings: 'liga'; 
} 

.material-icons.size-14 { 
 font-size: 14px;
 -ms-transform: rotate(0.1deg);
 transform: rotate(0.1deg);
 vertical-align: bottom;
}  

.material-icons.size-16 { font-size: 16px; } 
.material-icons.size-24 { font-size: 24px; } 
.material-icons.size-36 { font-size: 36px; } 
.material-icons.size-48 { font-size: 48px; } 

img#netland_apprunnercms { 
  margin: 15px auto 30px auto;;
  display: block;
  transition: all 300ms ease-in-out 0s;
}

a:focus img#netland_apprunnercms,
a:hover img#netland_apprunnercms { 
  opacity: 0.7;
  transition: opacity 300ms ease-in-out 0s;
}