/* common */
body {
  font-family: poppinsregular, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";}
::-moz-selection { background: #2668b2; color: #fff;}
::selection { background: #2668b2; color: #fff;}

/* pre-loader */
.pre-loader {
  height: 0;
  width: 0;
  padding: 15px;
  border: 6px solid #ccc;
  border-right-color: #888;
  border-radius: 22px;
  -webkit-animation: rotate 1s infinite linear;
  position: absolute;
  z-index: 9999;
  left: 50%;
  top: 50%;}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

/* autofill */
@-webkit-keyframes autofill {
    to {
        color: #0d3946;
        background: transparent;}
}
input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;}


/* required */
input[required]:invalid {
  border-color: #ff9292 !important;}

/* center div vertically and horizontally */
html, body {
  height: 100%;}
.div-v-h,
.div-v-h .container, 
.div-v-h .row {
  height: 100%;
  min-height: 100%;}
.div-v-h .row {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;}

/* canvas */
canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;}
  
/* button */
button,
.a-btn {
  white-space: nowrap;
  line-height: normal;
  background: #00115C;
  color: #fff;
  border-radius: 20px;
  min-width: 70px;
  padding: 9px 13px;
  font-size: 15px;
  text-transform: capitalize;
  border: transparent;
  text-align: center;}
button:hover,
button:focus,
.a-btn:hover,
.a-btn:focus {
    color: #fff;
    outline: none;}
button:not([disabled]),
.a-btn:not(.disabled) {
    cursor: pointer;}

button:focus,
.a-btn:focus,
a.a-btn:focus {
  outline: none;}


/* container */
.container {
  position: relative;
  z-index: 1;} 

/* login-form */
.login-form {
  text-align: center;
  max-width: 320px;
  padding: 60px 25px 90px 25px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 5px #e4dfdf;
  border-radius: 5px;
  background: #ffffffd1;}  
.login-form img {
  max-height: 70px;
  max-width: 100%;
  margin-bottom: 60px;}
/* form */
.login-form form .page-col {
  margin-bottom: 8px;
  position: relative;}
.login-form form .page-col:nth-last-of-type(1) input {
  padding-right: 35px;}
.login-form form input[type="text"],
.login-form form input[type="password"] {
  width: 100%;
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid #ccc;
  font-size: 14px;}
.login-form form .primary-btn {
  width: 100%;
  margin-top: 15px;
  padding: 12px;
  font-size: 18px;}
.login-form form .toggle-password {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  color: #a29e9e;
  min-width: auto;
  padding: 11px;}

.error_message{
  position: fixed;
  top:30px;
  right:20px;
  left:20px;
  max-height: 300px;
  text-align: center;
  z-index: 900;
}
.error_message p{
  border-radius: 15px;
  margin: auto;
  width: 300px;
  padding: 10px 10px;
}
.error_message .error{
  background-color:coral;
}

.error_message .success{
  background-color:chartreuse;
}