.login-img-bg {
	width: 100%;
}

.login-wrap {
	font-family: 'noto sans TC', sans-serif !important;
}

.no-login {
	color: #333;
	font-size: 14px;
}

.no-login:hover,
.no-login:active {
	color: var(--cnvs-themecolor);
}

.login-wrap .form-group input::placeholder {
	color: #aaa;
}

.login-wrap .btn-base.disabled,
.login-wrap  .btn-base:disabled {
	pointer-events: none !important;
	background-color: #b2b3b4 !important;
	border-color: #b2b3b4 !important;
}

.bg-google {
	background-color: #ededed !important;
}

.bg-facebook {
	background-color: #1877f2 !important;
}

.captcha-img {
	height: 28px;
}

.change-captcha {
	font-size: 13px;
	padding: 5px 9px;
	color: var(--cnvs-txt);
}

.change-captcha i {
	transition: .3s ease;
}

.change-captcha:hover i,
.change-captcha:active i {
	transform: rotate(90deg);
}

.link-btn {
	color: var(--cnvs-blue);
	border-bottom: 1px solid transparent;
}

.link-btn:hover {
	border-color: var(--cnvs-themecolor);
}

.form-check-input {
	border-color: var(--cnvs-themecolor);
}

.form-check-input:checked {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
}

.form-group select {
	-webkit-appearance: none;
	background-image: url(../images/select_arrow.svg);
	background-repeat: no-repeat;
	background-size: 14px;
	background-position: calc(100% - 16px) 14px;
}

.form-group input[type="date"] {
  cursor: pointer;
  padding-right: 2.5rem;
  position: relative;
	height: 46px;
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}

.form-group input[type="date"]::-webkit-inner-spin-button,
.form-group input[type="date"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-group input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  margin: 0;
}

.form-group input[type="date"]::after {
	content: "\f1f6";
	font-size: 15px;
	font-family: bootstrap-icons !important;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.upload_wrap .upload_btn {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
	border: 1px solid var(--cnvs-txt-gray);
  border-radius: 4px;
	overflow: hidden;
}

.upload_wrap i {
  position: absolute;
  color: #aaa;
  font-size: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
	pointer-events: none;
	transition: .3s ease;
}

.upload_wrap .upload_btn input {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.upload_wrap .upload_btn:hover i {
	color: var(--cnvs-white);
}

.upload_wrap .upload_btn input:after {
  content: "";
  position: absolute;
  font-size: 15px;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  display: block;
  background: var(--cnvs-white);
  text-align: center;
  transition: all 0.3s;
}

.upload_wrap .upload_btn:hover input:after {
  background: #9da199;
}

.form-check-input:checked {
	background-color: var(--cnvs-themecolor);
}

.sign-popup-wrap .modal-dialog {
	max-width: 800px;
}

.sign-popup-wrap .sign-wrap {
	width: 100%;
	max-width: 500px;
	height: 200px;
	border: 1px solid var(--cnvs-txt);
}

@media(max-width:991px) {
	.login-img-bg {
		width: 100%;
	    filter: blur(3px);
    	opacity: 0.9;
	}

	.sign-popup-wrap .modal-dialog {
		max-width: 80%;
	}
}

@media(max-width:767px) {
	.sign-popup-wrap .modal-dialog {
		max-width: 90%;
	}
}

@media(max-width:575px) {
	.captcha-wrap {
		flex-wrap: wrap;
	}

	.captcha-img {
		margin-left: 0 !important;
		margin-top: 12px;
	}

	.change-captcha {
		margin-top: 12px;
	}

	.sign-popup-wrap .modal-dialog {
		max-width: 100%;
	}
}