/* ---- theme tokens ---------------------------------------------------- */
:root {
  --zk-green: #7ac143;
  --zk-grey-dark: #474b4f;
  --zk-grey: #777c80;
  --zk-border: #D3D4D4;
  --zk-placeholder: #BEBFBF;
}

/*html, body, div, span, applet, h1, h2, h3, h4, h5, h6, ul, li, p {*/
  /*margin: 0px;*/
  /*padding: 0px;*/
  /*list-style-type: none;*/
/*}*/


.l {
  float: left;
}

.r {
  float: right;
}

.login_big_box a:link, .login_big_box a:visited, .login_big_box a:active {
  color: var(--zk-grey-dark);
  text-decoration: none;
}

a:hover {
  color: #000;
  text-decoration: none;
}

.login_big_box {
  background-color: var(--zk-green);
  height: 420px;
  width: 100%;
}

.login_logo {
  background-image: url(/media/img/login/logo_BioTime_new.png);
  _background: none;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/media/img/login/logo_t.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 80px;
  width: 710px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
  padding-bottom: 30px;
}

#wdms.login_logo {
  background-image: url(/media/img/login/logo_ZKBio_WDMS.png);
}

.login_oem {
  background-image: url(/media/img/login/oem.jpg);
  _background: none;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/media/img/login/logo_t.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 80px;
  width: 710px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
  padding-bottom: 30px;
}

.login_box {
  width: 75%;
  margin-right: auto;
  margin-left: auto;
  /*padding-top: 50px;*/
}

.login_box_type {
  margin-bottom: 15px;
  text-align: center;
}

.login_box_type a {
  color: var(--zk-grey-dark);
  text-decoration: none;
}

.login_box_type a.active {
  color: var(--zk-green);
}

.login_box_type a, .login_box_type span {
  font-size: 18px;
}

.login_box .login_inp {
  border: 1px solid var(--zk-border);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 46px;
  height: 46px;
  width: 100%;
  margin-bottom: 20px;
  color: var(--zk-grey);
  padding: 0 8px;
  -webkit-box-sizing: border-box;//Chrome
  -moz-box-sizing: border-box;//Firefox
  box-sizing: border-box;//OtherBrowser
}

.login_box .admin_tab {
  padding-right: 25px;
}

.login_box .employee_tab {
  padding-left: 25px;
}

.login_box .login_inp::-webkit-input-placeholder {
  color: var(--zk-placeholder);
}

.login_box .login_inp::-moz-placeholder {
  color: var(--zk-placeholder);
  opacity: 1;
}

.login_box .login_inp:-ms-input-placeholder {
  color: var(--zk-placeholder);
}

.login_box .login_inp::placeholder {
  color: var(--zk-placeholder);
  opacity: 1;
}

.login_box .login_check {
  line-height: 20px;
  height: 20px;
  width: 20px;
  border: 1px solid var(--zk-green);
}

.login_box .logo_check_box {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: var(--zk-grey-dark);
}

.logo_check_box a:link, .logo_check_box a:visited, .logo_check_box a:active {
  color: var(--zk-grey-dark);
  text-decoration: underline;
}

.logo_check_box a:hover {
  color: #000;
  text-decoration: none;
}

.login_box .login_but {
  margin-top: 15px;
}

.btn_fp, .btn_fp_disabled, .but_login, .but_reset, .empLoginBtn {

  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  background-repeat: no-repeat;
  background-position: left;
  height: 48px;
  background-color: var(--zk-grey-dark);
  text-align: left;
  /*padding-left: 60px;*/
  text-indent: 60px;
  border: 1px solid #FFFFFF;
  cursor: pointer;
}

.btn_fp {
  background-image: url(/media/img/login/button1.png);
  /*min-width: 220px;*/
  padding-right: 10px;
  background-color: var(--zk-green);
  width: 100%;
}

.btn_fp_disabled {
  background-image: url(/media/img/login/fing_disabled.png);
  /*min-width: 220px;*/
  padding-right: 10px;
  color: #cfd3d3;
  background-color: #74777c;
  opacity: 0.9;
  cursor: default;
  width: 100%;
}

.but_login {
  /*background-image: url(/media/img/login/button2.png);*/
  /*min-width: 150px;*/
  background-color: var(--zk-green);
  width: 100%;
  display: block;
  text-align: center;
  text-indent: 0px;
}

.empLoginBtn {
  width: 100%;
  padding-left: 0px;
  text-align: center;
  text-indent: 0px;
  background-color: var(--zk-green);
}

.but_reset {
  background-image: url(/media/img/login/button2.png);

}

.but_fing:hover, .but_login:hover, .but_reset:hover {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
}

.login_copy {
  text-align: center!important;
  color: #999999;
  margin-top: 10px;
  /* margin-bottom: 50px; */
}

.error_tip {
  padding: 2px 0px;
  color: red;
  overflow: visible;
}

.license-register {
  text-align: center!important;
}

.license-register a {
  color: var(--zk-green);
  text-decoration: underline;
}

.license-register a:hover {
  color: var(--zk-green);
  text-decoration: underline;
}

.register-box {

}

.info-box-activation {

}

.info-box-activation a {
  padding: 0 5px;
  text-decoration: underline;
}

.info-box-activation a:hover {
  text-decoration: none;
}

.info-sm-box {
  padding: 3px 10px;
}

.info-sm-box .info-sm-box-label {
  font-size: 18px;
  color: var(--zk-green);
  padding: 3px 0;
}

.info-box-item {
  padding: 3px 0;
}

.info-box-item .box-item-label {
  font-weight: bold;
}

.info-box-item .box-item {
  display: inline-block;
}

.info-box-item .box-item-val {
  text-decoration: underline;
}

.layui-layer-btn .layui-layer-btn0 {
  border-color: var(--zk-green) !important;
  background-color: var(--zk-green) !important;
}

span.required {
  color: red;
}

.online-activation .layui-form-item {
  margin-bottom: 0px;
}

.online-activation .layui-form-item .layui-inline {
  margin: 5px;
}

.online-activation .layui-form-item .layui-input-inline {
  width: 150px;
}

.online-activation .layui-form-label {
  width: 100px;
  padding: 3px;
}

.online-activation .layui-input, .online-activation .layui-select, .online-activation .layui-textarea {
  height: 28px;
}

.online-activation .sn-input .layui-input-inline {
  width: 280px;
}

.online-activation .company-input .layui-input-inline, .upk-download .company-input.layui-input {
  width: 430px;
}

.admin-login .layui-input, .admin-login .layui-select, .admin-login .layui-textarea {
  height: 28px;
}

.license_file-container {
  margin: 15px 0 0 0;
}

.login_about {
  background-image: url(/media/img/login_about.png);
  _background: none;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/media/img/login_about.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 22px;
  width: 20px;
  margin-right: auto;
  margin-left: auto;
}

.login_webpunch {
  background-image: url(/media/img/login_webpunch.png);
  _background: none;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/media/img/login_webpunch.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 25px;
  width: 20px;
  margin-right: auto;
  margin-left: auto;
}

.login_language {
  background-image: url(/media/img/login_language.png);
  _background: none;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/media/img/login_language.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 25px;
  width: 20px;
  margin-right: auto;
  margin-left: auto;
}

.login_about_div{
  float: right;
}


/*base */
.border-0{border:0!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mw-100{max-width:100%!important}.mh-100{max-height:100%!important}.min-vw-100{min-width:100vw!important}.min-vh-100{min-height:100vh!important}.vw-100{width:100vw!important}.vh-100{height:100vh!important}.m-0{margin:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0,.mx-0{margin-right:0!important}.mb-0,.my-0{margin-bottom:0!important}.ml-0,.mx-0{margin-left:0!important}.m-1{margin:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1,.mx-1{margin-right:.25rem!important}.mb-1,.my-1{margin-bottom:.25rem!important}.ml-1,.mx-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2,.mx-2{margin-right:.5rem!important}.mb-2,.my-2{margin-bottom:.5rem!important}.ml-2,.mx-2{margin-left:.5rem!important}.m-3{margin:1rem!important}.mt-3,.my-3{margin-top:1rem!important}.mr-3,.mx-3{margin-right:1rem!important}.mb-3,.my-3{margin-bottom:1rem!important}.ml-3,.mx-3{margin-left:1rem!important}.m-4{margin:1.5rem!important}.mt-4,.my-4{margin-top:1.5rem!important}.mr-4,.mx-4{margin-right:1.5rem!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.ml-4,.mx-4{margin-left:1.5rem!important}.m-5{margin:3rem!important}.mt-5,.my-5{margin-top:3rem!important}.mr-5,.mx-5{margin-right:3rem!important}.mb-5,.my-5{margin-bottom:3rem!important}.ml-5,.mx-5{margin-left:3rem!important}.p-0{padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.pl-0,.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1,.px-1{padding-right:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.pl-1,.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2,.px-2{padding-right:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.pt-3,.py-3{padding-top:1rem!important}.pr-3,.px-3{padding-right:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.pr-4,.px-4{padding-right:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.pt-5,.py-5{padding-top:3rem!important}.pr-5,.px-5{padding-right:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.pl-5,.px-5{padding-left:3rem!important}.m-n1{margin:-.25rem!important}.mt-n1,.my-n1{margin-top:-.25rem!important}.mr-n1,.mx-n1{margin-right:-.25rem!important}.mb-n1,.my-n1{margin-bottom:-.25rem!important}.ml-n1,.mx-n1{margin-left:-.25rem!important}.m-n2{margin:-.5rem!important}.mt-n2,.my-n2{margin-top:-.5rem!important}.mr-n2,.mx-n2{margin-right:-.5rem!important}.mb-n2,.my-n2{margin-bottom:-.5rem!important}.ml-n2,.mx-n2{margin-left:-.5rem!important}.m-n3{margin:-1rem!important}.mt-n3,.my-n3{margin-top:-1rem!important}.mr-n3,.mx-n3{margin-right:-1rem!important}.mb-n3,.my-n3{margin-bottom:-1rem!important}.ml-n3,.mx-n3{margin-left:-1rem!important}.m-n4{margin:-1.5rem!important}.mt-n4,.my-n4{margin-top:-1.5rem!important}.mr-n4,.mx-n4{margin-right:-1.5rem!important}.mb-n4,.my-n4{margin-bottom:-1.5rem!important}.ml-n4,.mx-n4{margin-left:-1.5rem!important}.m-n5{margin:-3rem!important}.mt-n5,.my-n5{margin-top:-3rem!important}.mr-n5,.mx-n5{margin-right:-3rem!important}.mb-n5,.my-n5{margin-bottom:-3rem!important}.ml-n5,.mx-n5{margin-left:-3rem!important}.m-auto{margin:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto,.mx-auto{margin-right:auto!important}.mb-auto,.my-auto{margin-bottom:auto!important}.ml-auto,.mx-auto{margin-left:auto!important}.text-dark{color:#000!important}.text-white{color:#fff!important}.align-items-center{-ms-flex-align:center!important;align-items:center!important}.bg-transparent{background-color:transparent!important}.font-weight-bold{font-weight:700!important}.bg-primary{background-color:#007bff!important}.flex2{flex:2}.d-flex{display:-ms-flexbox!important;display:flex!important}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.align-middle{vertical-align:middle!important}.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th{border:0!important}.zk-tbl .widget-content{padding:1rem;flex-direction:row;align-items:center}.zk-tbl .widget-content .widget-content-wrapper{display:flex;flex:1;position:relative;align-items:center}.zk-tbl .widget-content .widget-content-right{margin-left:auto}.card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border-radius:.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;;height:auto;min-height:55px;line-height:40px;text-transform:uppercase}.card-body{-ms-flex:1 1 auto;flex:1 1 auto;min-height:1px;padding:1.25rem}.card-footer{padding:.75rem 1.25rem;line-height:35px}.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}.scrollbar-container{position:relative;height:100%}.scroll-area{overflow-x:hidden;height:400px;background:transparent!important}[class*=scroll-area-]::-webkit-scrollbar{width:5px;background:transparent!important}[class*=scroll-area-]::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)!important;box-shadow:inset 0 0 6px rgba(0,0,0,.5)!important;border-radius:20px!important;background:transparent!important}[class*=scroll-area-]::-webkit-scrollbar-thumb{border-radius:20px!important;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)!important;box-shadow:inset 0 0 6px rgba(0,0,0,.5)!important;background:rgba(39,43,62,.5)!important;visibility:hidden!important}.card-bg:hover .scroll-area-lg::-webkit-scrollbar-thumb,.card-bg:hover .scroll-area-md::-webkit-scrollbar-thumb,.card-bg:hover .scroll-area-sm::-webkit-scrollbar-thumb,.easy-card-bg:hover .scroll-area-lg::-webkit-scrollbar-thumb,.easy-card-bg:hover .scroll-area-md::-webkit-scrollbar-thumb,.easy-card-bg:hover .scroll-area-sm::-webkit-scrollbar-thumb{visibility:visible!important;transition:all 1s ease!important}​ .scroll-area-xs{height:150px;overflow-x:hidden}.scroll-area-sm{height:200px;overflow-x:hidden}.scroll-area-md{height:330px;overflow-x:hidden}.scroll-area-lg{height:400px;overflow-x:hidden}
/* Base end */

/* ============================================================
   Login page layout  -  fully fluid / responsive
   ============================================================ */

.zk-login-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  box-sizing: border-box !important;
  background: #f9f9f9;
}

@supports (min-height: 100dvh) {
  .zk-login-container {
    min-height: 100dvh;
  }
}

.zk-login {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background-color: #FDFDFD;
  background-image: url(/media/img/login/login-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 8;
}

/* the card is vertically centered in whatever space is left over,
   the footer always keeps its own room -> no more overlapping */
.zk-login-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vh, 40px) 16px;
  min-height: 0;
}

.zk-login-card {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border: 0;
  border-radius: 25px;
  overflow: hidden;
  background: #FFF;
  -webkit-box-shadow: 0 0 40px 0 rgba(0, 152, 68, 0.17);
  -moz-box-shadow: 0 0 40px 0 rgba(0, 152, 68, 0.17);
  box-shadow: 0 0 40px 0 rgba(0, 152, 68, 0.17);
  z-index: 8;
}

/* green panel: plain background colour instead of a 44% gradient,
   so it stays correct in RTL and on every breakpoint */
.zk-login-side {
  flex: 0 0 44%;
  max-width: 44%;
  display: flex;
  background: var(--zk-green);
}

.zk-login-main {
  flex: 1 1 56%;
  max-width: 56%;
  min-width: 0;
  display: flex;
}

.zk-login-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: clamp(14px, 2.6vh, 32px) clamp(16px, 4%, 36px);
}

/* ---------- left (green) panel ---------- */

.left-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2.6vh, 32px) clamp(12px, 4%, 28px);
}

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
}

.img-logo {
  flex: 3 1 0;
}

.img-banner {
  flex: 5 1 0;
}

.left-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.img-logo img {
  max-height: clamp(44px, 10vh, 86px);
}

.img-banner img {
  max-height: clamp(100px, 26vh, 250px);
}

.left-container-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-top: clamp(8px, 1.6vh, 18px);
}

.left-container-footer img {
  height: clamp(26px, 4vh, 38px);
  width: auto;
}

/* ---------- right (form) panel ---------- */

.zk-login .login_label {
  float: left;
  display: none;
}

.zk-login .input-lg {
  height: 40px !important;
}

.zk-login .card-header {
  height: auto;
  min-height: 0;
  line-height: 1.35;
  background: transparent !important;
  position: relative;
  padding: 0 0 clamp(10px, 2.2vh, 26px);
  text-align: center;
}

.zk-login .card-header .header {
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(18px, calc(8px + 1.6vh), 24px);
  color: var(--zk-green);
  margin-bottom: 4px;
}

.zk-login .card-header .sub-header {
  font-size: clamp(12px, calc(6px + 1vh), 15px);
  color: var(--zk-grey-dark);
  /* .card-header forces uppercase; the sub-header is a sentence, not a shout */
  text-transform: none;
}

.zk-login .card-body {
  flex: 1 1 auto;
  padding: 0;
  min-width: 0;
}

.zk-login .card-footer {
  flex: 0 0 auto;
  background: none !important;
  border: 0;
  padding: clamp(8px, 1.8vh, 22px) 0 0;
  line-height: 1;
}

.zk-login .login_box {
  width: 100%;
  max-width: 380px;
  margin-right: auto;
  margin-left: auto;
}

.zk-login .login_box .login_inp {
  height: clamp(36px, calc(16px + 3.2vh), 46px);
  line-height: clamp(36px, calc(16px + 3.2vh), 46px);
  margin-bottom: clamp(10px, 2vh, 20px);
}

.zk-login .login_box_type {
  margin-bottom: clamp(8px, 1.4vh, 14px);
}

.zk-login .btn_fp, .zk-login .btn_fp_disabled, .zk-login .but_login,
.zk-login .but_reset, .zk-login .empLoginBtn {
  height: clamp(38px, calc(18px + 3.4vh), 48px);
  line-height: 1;
}

.login-checkbox {
  margin-top: 0px !important;
}

.login_btn_div {
  display: flex;
  width: 100%;
  line-height: 1.0;
}

.login_button_left {
  flex-grow: 1;
  max-width: calc(100% - 50px - 10px);
  margin-right: 10px;
}

.login_button_right {
  width: 50px;
  flex-shrink: 0;
}

[dir=rtl] .login_button_left {
  margin-right: 0;
  margin-left: 10px;
}

/* ---------- reset password ---------- */

.zk-login .reset-password-tips {
  margin: clamp(10px, 2vh, 24px) 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--zk-grey-dark);
  text-align: center;
}

/* the error line is always in the DOM so that showing a message does not
   shift the form; reserve one line, nothing more */
.zk-login .error_tip {
  margin: 0;
  padding: 0;
  min-height: 20px;
  line-height: 20px;
  font-size: 13px;
  color: red;
  overflow: visible;
}

/* ---------- captcha row ---------- */

.zk-login .captcha-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 10px;
}

.zk-login .captcha-row .login_label {
  flex: 0 0 100%;
}

.zk-login .captcha-row .login_inp {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.zk-login .captcha-row .captcha-img {
  flex: 0 0 42%;
  width: 42%;
  max-width: 42%;
  height: clamp(36px, calc(16px + 3.2vh), 46px);
  margin-bottom: clamp(10px, 2vh, 20px);
  border: 1px solid var(--zk-border);
  box-sizing: border-box;
  object-fit: contain;
  cursor: pointer;
}

/* ---------- social icons ---------- */

.social-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.social-btn-circle {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  padding: 0;
  border-radius: 50%;
  background: #fff;
}

.social-btn-circle:hover {
  background: #EFEFEF;
}

.social-btn-circle img {
  padding: 9px !important;
  max-width: 100%;
}

.social-btn-sm {
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 0.9rem;
}

.social-btn-lg {
  width: 55px;
  height: 55px;
  line-height: 55px;
  font-size: 1.1rem;
}

/* ---------- page footer ---------- */

.zk-login-footer {
  flex: 0 0 auto;
  width: 100%;
  padding: 0 16px clamp(10px, 2vh, 22px);
  text-align: center;
}

.zk-login-footer .layui-form-item {
  margin-bottom: 0;
}

.zk-login-footer .login_copy {
  text-align: center !important;
  color: #999999;
  margin-top: 0;
}

.zk-login-footer .login_copy img {
  height: clamp(22px, 3.2vh, 34px);
  width: auto;
}

.zk-login-footer .license-register a {
  color: #8A8F94;
  text-decoration: underline;
}

.zk-login-footer .license-register a:hover {
  color: var(--zk-green);
  text-decoration: underline;
}

.zk-login-footer .license-register {
  text-align: center !important;
  /* legal fine print: small and muted, it should not compete with the card */
  font-size: 12px;
  line-height: 1.6;
  color: #8A8F94;
  margin-top: 4px;
}

.zk-login-copyright {
  color: var(--zk-grey-dark);
  text-align: center;
  margin: 0 auto;
}

.zkteco-logo {
  width: 150px;
  padding-bottom: 10px;
}

/* ---------- breakpoints ---------- */

/* tablet: keep two columns but give the form more room */
@media (max-width: 991px) {
  .zk-login-card {
    max-width: 720px;
  }
  .zk-login-side {
    flex-basis: 40%;
    max-width: 40%;
  }
  .zk-login-main {
    flex-basis: 60%;
    max-width: 60%;
  }
}

/* phone / very narrow: stack, green strip becomes a compact header */
@media (max-width: 767px) {
  .zk-login-card {
    flex-direction: column;
    max-width: 440px;
  }
  .zk-login-side,
  .zk-login-main {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .left-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
  }
  .img-banner {
    display: none;
  }
  .img-logo {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .img-logo img {
    max-height: 42px;
  }
  .left-container-footer {
    padding-top: 0;
    gap: 14px;
  }
  .left-container-footer img {
    height: 26px;
  }
  .social-footer {
    justify-content: center;
  }
  .zk-login .login_box {
    max-width: none;
  }
  /* keep "remember me" and "forgot password" on one line */
  .zk-login .card-body .layui-form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .zk-login .card-body .layui-form-item .layui-inline {
    float: none !important;
    margin: 0;
  }
}

/* short screens (e.g. 1366x600 windows): trim everything that can be trimmed */
@media (max-height: 640px) {
  .zk-login-body {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .zk-login-footer {
    padding-bottom: 8px;
  }
  .social-btn-sm {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  .social-btn-circle img {
    padding: 7px !important;
  }
}

/* very short windows: drop the illustration so the form still fits */
@media (max-height: 520px) and (min-width: 768px) {
  .img-banner {
    display: none;
  }
  .zk-login-footer .login_copy {
    display: none;
  }
}

/* roomy screens: show the field labels and a slightly larger card */
@media (min-height: 900px) {
  .zk-login .login_label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    color: var(--zk-grey-dark);
  }
  .zk-login-card {
    max-width: 960px;
  }
}