@import "bootstrap.css";
/*@import "all.min.css";*/
:root {
  --jm-g: #006CB9;
  --jm-dark-g: #006CB9;
  --jm-blue-l-100: rgb(0 185 195);
}

.login {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px;
	background-image: url(../images/backendBg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	position: relative;
	font-size: 1rem;
	line-height: 1.5;
}
.login::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
}
.form-signin {
  /* min-width: 480px; */
  max-width: 540px;
  width: 90%;
  padding: 2rem 2.5rem 1.5rem;
  margin: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: rgba(255, 255, 255, .95);
  border-radius: 20px;
  box-shadow: 10px 10px 25px rgb(0 0 0 / 20%);
  position: relative;
  z-index: 2;
}
.form-signin:has(.qrcode){
  max-width: 770px;
}
.form-qrcode{
  max-width: inherit;
}
/* logo */
.form-signin img.logo {
  max-width: 100%;
  height: 45px;
  width: auto;
  margin: .75rem 0 1.25rem;
}
@media (max-width:991px) {
  .form-signin img.logo {
    height: 40px;
    margin: .25rem 0 .5rem;
  }
}
/* main */
.signinBlk{
  width: 90%;
  transition: all .5s;
  min-height: 150px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  transition: all .5s;
  padding: .75rem 0 0;
}
@media (max-width:991px) {
  .form-signin{
    width: 100%;
  }
	.signinBlk{
    width: 100%;
    min-height: inherit;
  }  
  .signinBlk:has(.qrcode){
    width: 100%
  }
}
@media (max-width:768px) {
  .form-signin {
    padding: 2rem 1.5rem 1.5rem;
  }
  .login {
    padding: 40px 20px;
  }
}
.form-signin .btn{
  padding: .65rem .75rem;
  border-radius: 0.25rem;
}
.form-signin .btn-primary{
  background-color: var(--jm-g); 
}
.form-signin .btn-primary:hover{
  background-color: rgb(0 129 221); 
  border-color: rgb(0 129 221);
}
.btn.btn-outline-primary{
  margin-left: .5rem;
}
.form-signin .form-floating{
  width: 100%;
  margin: 0 0 .5rem;
}
.form-signin .form-floating > label{
  color: #999;
}
.form-signin .form-floating>.form-control {
  height: calc(3.35rem + 2px);
  line-height: 1.25;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 4px;
}
.form-signin .form-floating>.form-control:focus {
  border-color: var(--jm-g);
  background: #fff;
}

@media (max-width:576px) {
  .btn.btn-outline-primary.w-25{
    width: 35% !important;
  }
}

/* submit */
.submitBlK{
  display: flex;
  width: 100%;
  margin: 1rem 0 0;
}
/* 忘記密碼 */
.information{
  margin: 1.5rem 0 .5rem ;
  text-align: center;
}
.information p{
  margin: 0;
  font-size: .875rem;
}
.information i{
  font-size: .875rem;
  color: var(--jm-g);
  margin: 0 0 .75rem 0;
}
.information a{
  font-size: .875rem;
  text-decoration: underline;
}

/* password */
.password {
	position: relative;
}
.password .showPass {
	position: absolute;
	right: 14px;
	top: 20px;
	font-size: 1.25rem;
	color: #999;
}
.formBlk .password .showPass {
	top: 9px;
	z-index: 5;
}
.password .form-control.is-invalid {
	background-position: right calc(.375em + 2.5rem) center;
}
label:not(.form-check-label):not(.custom-file-label){
  font-weight: 400;
}

/* 說明 */
.signin-info{
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 .85rem;
  line-height: 1;
  display: flex;
  align-items: center;
}
.signin-info::before {
  content: '';
  display: block;
  width: 3px;
  height: 19px;
  background-color: var(--jm-blue-l-100);
  background-color: #bbb;
  margin: 0 10px 0 .25rem;
  border-radius: 20px;
}
.captcha {
	display: flex;
	margin-bottom: .5rem;
  align-items: center;
}
.captcha .form-floating {
  flex: 1;
  margin: 0;
}

@media (max-width:991px) {
	.captcha .form-floating {
		width: 100%;
	}
}
@media (max-width:441px) {
	.captcha {
    flex-wrap: wrap;
  }
  .captcha .form-floating {
		flex: auto;
	}
}
.captcha .captcha-img {
	padding-left: 0.5rem;
	width: 140px;
}

@media (max-width:441px) {
  .captcha .captcha-img {
    padding-left: 0;
    margin: .5rem 0 0;
    width: auto;
  }
}

.captcha .captcha-img img {
	width: 100%;
  height: auto;
  margin: 0;
}
.refrush {
	margin-left: 0.5rem;
}

.refrush a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 48px;
	background-color: #f1f1f1;
	color: #999;
	font-size: 1.25rem;
	text-decoration: none;
	border-radius: 0.375rem;
}
.refrush a .fas{  
	font-size: 1.25rem;
}
.refrush a:hover {
	background-color: #ddd;
}
@media (max-width:441px) {
  .refrush {
    margin: .5rem 0 0 .5rem;
  }
}