/**************************************************************************
* Document Structure
**************************************************************************/

html, body {height: 100%; margin: 0; padding: 0; touch-action: manipulation;}
html {font-size: 62.5%; height: 100%;}
body {color: var(--epos-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; font-weight: 400; height: 100%; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

a, a:link, a:visited {color: var(--epos-text-secondary); text-decoration: none;}
a:focus, a:hover, a:active {color: var(--epos-text); text-decoration: none;}

h1 {font-size: 2.4rem; margin: 0;}
h2 {font-size: 2.2rem; margin: 0;}
h3 {font-size: 2.0rem; margin: 0;}


/**************************************************************************
* General Classes
**************************************************************************/

.clear-fix:after {clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden;}
.hidden {display: none !important;}


/**************************************************************************
* Layout Styles
**************************************************************************/

.l_login {background-color: var(--epos-bg);}



/**************************************************************************
* UI Styles
**************************************************************************/

.ui-nav-panel-open {color: var(--epos-text-muted); cursor: pointer; font-size: 3rem; left: 0; padding: 20px; position: absolute; top: 0; z-index: 1000; transition: color 0.15s;}
.ui-nav-panel-open:focus,
.ui-nav-panel-open:hover,
.ui-nav-panel-open:active {color: var(--epos-text);}

#ui-nav-panel {background-color: var(--epos-panel); bottom: 0; left: -240px; position: fixed; top: 0; width: 240px; z-index: 2000; box-shadow: 4px 0 16px rgba(0,0,0,0.4); transition: left 300ms ease-in-out;}
#ui-nav-panel .footer {bottom: 0; left: 0; position: absolute; right: 0;}
#ui-nav-panel .footer .tool {color: var(--epos-text-secondary); display: block; position: relative; transition: background 0.15s;}
#ui-nav-panel .footer .tool:focus,
#ui-nav-panel .footer .tool:hover,
#ui-nav-panel .footer .tool:active {background-color: var(--epos-surface-hover); text-decoration: none; color: var(--epos-text);}
#ui-nav-panel .footer .tool i {left: 12px; position: absolute; top: 12px;}
#ui-nav-panel .footer .tool .title {display: block; font-size: 1.4rem; line-height: 20px; padding: 10px 10px 10px 42px;}

#ui-nav-panel-open-overlay {background-color: rgba(0, 0, 0, 0.5); bottom: 0; display: none; left: 0; opacity: 0; right: 0; position: fixed; top: 0; z-index: 1500;}

body.np-open #ui-nav-panel {left: 0;}
body.np-open #ui-nav-panel-open-overlay {display: block; opacity: 1;}


/**************************************************************************
* Page: Login
**************************************************************************/

.p_login .login-wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px;}
.p_login .login-wrap .logo {display: block; margin: 0 auto 30px; max-width: 200px;}

.p_login .login-wrap .input-wrap {margin-bottom: 8px; position: relative;}
.p_login .login-wrap .pin-display {
  border: 1px solid var(--epos-border-light); color: #fff; display: flex;
  align-items: center; font-size: 22px; height: 46px; margin: 0; padding: 0 10px 0 46px;
  width: 100%; box-sizing: border-box; border-radius: 8px;
  background: transparent; letter-spacing: 6px;
}
.p_login .login-wrap .pin-display::after {
  content: ''; display: inline-block; width: 2px; height: 22px;
  background: var(--epos-accent); margin-left: 2px;
  animation: pinCursorBlink 1s step-end infinite;
}
@keyframes pinCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.p_login .login-wrap .pin-display .mdi {position: absolute; left: 0; top: 0; width: 46px; height: 46px; line-height: 46px; text-align: center; color: var(--epos-text-secondary); letter-spacing: normal;}
.p_login .login-wrap .pin-display .pin-text {letter-spacing: 6px;}
.p_login .login-wrap input.submit {
  background-color: var(--epos-accent); border: 0; color: #fff; cursor: pointer;
  display: block; font-size: 16px; font-weight: 600; padding: 12px 0;
  text-transform: uppercase; width: 100%; -webkit-appearance: none;
  border-radius: 8px; transition: background 0.15s, transform 0.1s; letter-spacing: 0.5px;
}
.p_login .login-wrap input.submit:focus,
.p_login .login-wrap input.submit:hover,
.p_login .login-wrap input.submit:active {background-color: var(--epos-accent-hover);}
.p_login .login-wrap input.submit:active {transform: scale(0.98);}

.p_login .login-wrap .forgot {margin-top: 20px; text-align: center;}
.p_login .login-wrap .forgot a,
.p_login .login-wrap .forgot a:link,
.p_login .login-wrap .forgot a:visited {color: var(--epos-text-muted); font-size: 14px;}
.p_login .login-wrap .forgot a:focus,
.p_login .login-wrap .forgot a:hover,
.p_login .login-wrap .forgot a:active {color: var(--epos-text); text-decoration: underline;}

.printer-label {
  color: var(--epos-text-muted); font-weight: 400; font-size: 10px;
  width: 60%; margin-left: 20%; padding: 4px;
}


/* Login page inherits .ui-keypad from ui.css */



/* Open register */
.p_login .form-title {font-size: 2rem; padding: 0 0 10px; text-align: center; text-transform: uppercase; color: #fff; white-space: nowrap; font-weight: 500; letter-spacing: 1px;}
.p_login .form-subtitle {font-size: 1.3rem; padding: 0 0 10px; margin-bottom: 15px; text-align: center; text-transform: uppercase; color: var(--epos-text-secondary);}


/* Login register (quick) */
.p_login .hack-app-wrap {bottom: 0; left: 0; overflow: hidden; position: fixed; right: 0; top: 0;}

@media (max-width: 600px) {
  .l_login {background-color: var(--epos-bg);}
}