* {
  font-family: "Poppins";
}

body {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow-y: hidden;
  display: inline;
  justify-content: center;
  align-items: center;
  background: #dde5f4;
  height: 100vh;
}

.screen-1 {
  background: #f1f7fe;
  padding: 2em;
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  box-shadow: 0 0 2em #e6e9f9;
  gap: 2em;
  width: 100%;
  max-width:500px;
  margin: auto;
}
.screen-1 .logo {
  margin-top: -3em;
}
.screen-1 .email {
  background: white;
  box-shadow: 0 0 2em #e6e9f9;
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  border-radius: 20px;
  color: #4d4d4d;
  margin-top: -3em;
}
.screen-1 .email input {
  outline: none;
  border: none;
}
.screen-1 .email input::-moz-placeholder {
  color: black;
  font-size: 0.9em;
}
.screen-1 .email input:-ms-input-placeholder {
  color: black;
  font-size: 0.9em;
}
.screen-1 .email input::placeholder {
  color: black;
  font-size: 0.9em;
}
.screen-1 .email ion-icon {
  color: #4d4d4d;
  margin-bottom: -0.2em;
}
.screen-1 .password {
  background: white;
  box-shadow: 0 0 2em #e6e9f9;
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  border-radius: 20px;
  color: #4d4d4d;
}
.screen-1 .password input {
  outline: none;
  border: none;
}
.screen-1 .password input::-moz-placeholder {
  color: black;
  font-size: 0.9em;
}
.screen-1 .password input:-ms-input-placeholder {
  color: black;
  font-size: 0.9em;
}
.screen-1 .password input::placeholder {
  color: black;
  font-size: 0.9em;
}
.screen-1 .password ion-icon {
  color: #4d4d4d;
  margin-bottom: -0.2em;
}
.screen-1 .password .show-hide {
  margin-right: -5em;
}
.screen-1 .login {
  padding: 1em;
  background: #3e4684;
  color: white;
  border: none;
  border-radius: 30px;
  font-weight: 600;
}
.screen-1 .footer {
  display: flex;
  font-size: 0.7em;
  color: #5e5e5e;
  gap: 14em;
  padding-bottom: 10em;
}
.screen-1 .footer span {
  cursor: pointer;
}

button {
  cursor: pointer;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  text-align: center;
}
.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}
.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}
.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}
.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}
.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}
*	{
  margin: 0;
  padding: 0;
}

html, body	{
  height: 100%;
}

body{
  background:#edf1f4;
  font-size:16px;
  color:#444;
  font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
}

ul, li {
  margin:0;
  padding:0;
  list-style-type:none;
}

#container {
  width:440px;
  padding:10px;
  background:#fefefe;
  margin:0 auto;
  border:1px solid #c4cddb;
  border-top-color:#d3dbde;
  border-bottom-color:#bfc9dc;
  box-shadow:0 1px 1px #ccc;
  border-radius: 20px;
  position:relative;
}

h1	{
  width: 88%;
  color: #4b4b4b;
  font-size: 22px;
  line-height: 24px;
  font-weight: normal;
  margin: 10px auto 30px auto;
}
h2	{
  width: 88%;
  color: #393939;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  margin: 10px auto 30px auto;
}
h3	{
  width: 88%;
  color: #393939;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  margin: 10px auto 30px auto;
}

.aligncentre{
  text-align: center;
}
h1 {
  /* margin:0; */
  padding:10px 0;
  font-size:24px;
  text-align:center;
  /* background:#eff4f7; */
  /* border-bottom:1px solid #dde0e7; */
  /* box-shadow:0 -1px 0 #fff inset; */
  /* border-radius:5px 5px 0 0; */ /* otherwise we get some uncut corners with container div */
  /* text-shadow:1px 1px 0 #fff; */
}


form ul li {
  margin:10px 20px;

}
/*
form ul li:last-child {
    text-align:center;
    margin:20px 0 25px 0;
}
*/

input {
  padding:10px 10px;
  border:1px solid #d5d9da;
  border-radius:5px;
  box-shadow: 0 0 5px #e8e9eb inset;
  width:95%;
  font-size:1em;
  outline:0; /* remove webkit focus styles */
}
input:focus {
  border:1px solid #b9d4e9;
  border-top-color:#b6d5ea;
  border-bottom-color:#b8d4ea;
  box-shadow:0 0 5px #b9d4e9;
}

label {
  color:#555;
  font-size: 18px;
  line-height: 20px;

}
#container span {
  padding: 0 15px;
  /*  display:block;*/
  border-radius:5px;
  margin-top:5px;
}

button {
  background: #57a9eb; /* Old browsers */
  background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */
  background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a9eb', endColorstr='#3a76c4',GradientType=0 ); /* IE6-9 */
  border:1px solid #326fa9;
  border-top-color:#3e80b1;
  border-bottom-color:#1e549d;
  color:#fff;
  text-shadow:0 1px 0 #1e3c5e;
  font-size:.875em;
  padding:8px 15px;
  width:150px;
  border-radius:20px;
  box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset;
}
button:active {
  background: #3a76c4; /* Old browsers */
  background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */
  background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a76c4', endColorstr='#57a9eb',GradientType=0 ); /* IE6-9 */
  box-shadow:none;
  text-shadow:0 -1px 0 #1e3c5e;
}

#pswd_info {
  font-size:.875em;
  /*bottom:-50px;
  bottom: -115px\9;
  width:80%;
  padding:15px;
  background:#fefefe;

  border-radius:5px;
  box-shadow:0 1px 3px #ccc;
  border:1px solid #ddd;*/
}

#pswd_info h4 {
  /*margin:0 0 10px 0;*/
  padding:0;
  font-weight:normal;

}

#pswd_info ol li
{
  /*float:left;*/
  margin-left: 100px;
  font-size:13px;
  /*clear:both;*/
}

#pswd_info ol
{
  clear:both;
}

.invalid {
  background:url(/medias/images/_common/invalid.png) no-repeat 0 50%;
  padding-left:22px;
  line-height:24px;
  color:#ec3f41;
}
.valid {
  background:url(/medias/images/_common/valid.png) no-repeat 0 50%;
  padding-left:22px;
  line-height:24px;
  color:#3a7d34;
}
input[disabled]{
  opacity: 0.5;
}

#changeButton{
  margin-left: 120px;
  margin-top: 20px;
}

#passwd,
#chkpasswd{
  width: 85%;
}

#logo-login	{
  width: 80%;
  margin: 0px auto 25px auto;
  text-align: center;
  font-size: 36px;
  color: #fff;
  /*height: 120px;*/
}