/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/stylesheets/admin/pos-login.css ***!
  \****************************************************************************************************************************************************************************************************/
/**
*  Converts a hex value into the rgb equivalent.
*
* @param {string} hex - the hexadecimal value to convert
* @return {string} comma separated rgb values
*/
/**
 * Colors
 */
:root {
  --primary:#FFFFFF;
  --secondary:#F6F6F6;
  --text-color-light:#9F9F9E;
  --text-color:#171826;
  --text-color-dark:#171826;
  --primary-accent:#FC8019;
  --primary-accent-light:#f7e1c9;
  --secondary-accent:#09AA29;
  --fixed: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary:#000000b9;
    --secondary:#383737;
    --text-color-light:#FFFFFF;
    --text-color:#FFFFFF;
    --primary-accent:#FC8019;
    --primary-accent-light:#f7e1c9;
    --secondary-accent:#09AA29;
    --text-color-dark:#FFFFFF;
    --fixed: #000000;
  }
}
/**
*  Converts a hex value into the rgb equivalent.
*
* @param {string} hex - the hexadecimal value to convert
* @return {string} comma separated rgb values
*/
/**
 * Colors
 */
/**
 * SCSS Variables.
 *
 * Please use variables from this sheet to ensure consistency across the UI.
 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
 */
/**
*  Converts a hex value into the rgb equivalent.
*
* @param {string} hex - the hexadecimal value to convert
* @return {string} comma separated rgb values
*/
/**
 * Colors
 */
/**
 * Fonts & basic variables.
 */
/**
 * Grid System.
 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 */
/**
 * Dimensions.
 */
/**
 * Shadows.
 */
/**
 * Editor widths.
 */
/**
 * Block & Editor UI.
 */
/**
 * Block paddings.
 */
/**
 * React Native specific.
 * These variables do not appear to be used anywhere else.
 */
/**
*  Converts a hex value into the rgb equivalent.
*
* @param {string} hex - the hexadecimal value to convert
* @return {string} comma separated rgb values
*/
/**
 * Long content fade mixin
 *
 * Creates a fading overlay to signify that the content is longer
 * than the space allows.
 */
/**
 * Breakpoint mixins
 */
/**
 * Focus styles.
 */
/**
 * Applies editor left position to the selector passed as argument
 */
/**
 * Styles that are reused verbatim in a few places
 */
/**
 * Allows users to opt-out of animations via OS-level preferences.
 */
/**
 * Reset default styles for JavaScript UI based pages.
 * This is a WP-admin agnostic reset
 */
/**
 * Reset the WP Admin page styles for Gutenberg-like pages.
 */
/**
 * Breakpoints & Media Queries
 */
:root {
  --wp-admin-theme-color: #007cba;
  --wp-admin-theme-color--rgb: 0, 124, 186;
  --wp-admin-theme-color-darker-10: #006ba1;
  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
  --wp-admin-theme-color-darker-20: #005a87;
  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
  --wp-admin-border-width-focus: 2px;
  --wp-block-synced-color: #7a00df;
  --wp-block-synced-color--rgb: 122, 0, 223;
  --wp-bound-block-color: var(--wp-block-synced-color);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  :root {
    --wp-admin-border-width-focus: 1.5px;
  }
}

body.admin-color-light {
  --wp-admin-theme-color: #0085ba;
  --wp-admin-theme-color--rgb: 0, 133, 186;
  --wp-admin-theme-color-darker-10: #0073a1;
  --wp-admin-theme-color-darker-10--rgb: 0, 115, 161;
  --wp-admin-theme-color-darker-20: #006187;
  --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
  --wp-admin-border-width-focus: 2px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body.admin-color-light {
    --wp-admin-border-width-focus: 1.5px;
  }
}

body.admin-color-modern {
  --wp-admin-theme-color: #3858e9;
  --wp-admin-theme-color--rgb: 56, 88, 233;
  --wp-admin-theme-color-darker-10: #2145e6;
  --wp-admin-theme-color-darker-10--rgb: 33, 69, 230;
  --wp-admin-theme-color-darker-20: #183ad6;
  --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
  --wp-admin-border-width-focus: 2px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body.admin-color-modern {
    --wp-admin-border-width-focus: 1.5px;
  }
}

body.admin-color-blue {
  --wp-admin-theme-color: #096484;
  --wp-admin-theme-color--rgb: 9, 100, 132;
  --wp-admin-theme-color-darker-10: #07526c;
  --wp-admin-theme-color-darker-10--rgb: 7, 82, 108;
  --wp-admin-theme-color-darker-20: #064054;
  --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
  --wp-admin-border-width-focus: 2px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body.admin-color-blue {
    --wp-admin-border-width-focus: 1.5px;
  }
}

body.admin-color-coffee {
  --wp-admin-theme-color: #46403c;
  --wp-admin-theme-color--rgb: 70, 64, 60;
  --wp-admin-theme-color-darker-10: #383330;
  --wp-admin-theme-color-darker-10--rgb: 56, 51, 48;
  --wp-admin-theme-color-darker-20: #2b2724;
  --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
  --wp-admin-border-width-focus: 2px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body.admin-color-coffee {
    --wp-admin-border-width-focus: 1.5px;
  }
}

body.admin-color-ectoplasm {
  --wp-admin-theme-color: #523f6d;
  --wp-admin-theme-color--rgb: 82, 63, 109;
  --wp-admin-theme-color-darker-10: #46365d;
  --wp-admin-theme-color-darker-10--rgb: 70, 54, 93;
  --wp-admin-theme-color-darker-20: #3a2c4d;
  --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
  --wp-admin-border-width-focus: 2px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body.admin-color-ectoplasm {
    --wp-admin-border-width-focus: 1.5px;
  }
}

body.admin-color-midnight {
  --wp-admin-theme-color: #e14d43;
  --wp-admin-theme-color--rgb: 225, 77, 67;
  --wp-admin-theme-color-darker-10: #dd382d;
  --wp-admin-theme-color-darker-10--rgb: 221, 56, 45;
  --wp-admin-theme-color-darker-20: #d02c21;
  --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
  --wp-admin-border-width-focus: 2px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body.admin-color-midnight {
    --wp-admin-border-width-focus: 1.5px;
  }
}

body.admin-color-ocean {
  --wp-admin-theme-color: #627c83;
  --wp-admin-theme-color--rgb: 98, 124, 131;
  --wp-admin-theme-color-darker-10: #576e74;
  --wp-admin-theme-color-darker-10--rgb: 87, 110, 116;
  --wp-admin-theme-color-darker-20: #4c6066;
  --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
  --wp-admin-border-width-focus: 2px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body.admin-color-ocean {
    --wp-admin-border-width-focus: 1.5px;
  }
}

body.admin-color-sunrise {
  --wp-admin-theme-color: #dd823b;
  --wp-admin-theme-color--rgb: 221, 130, 59;
  --wp-admin-theme-color-darker-10: #d97426;
  --wp-admin-theme-color-darker-10--rgb: 217, 116, 38;
  --wp-admin-theme-color-darker-20: #c36922;
  --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
  --wp-admin-border-width-focus: 2px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body.admin-color-sunrise {
    --wp-admin-border-width-focus: 1.5px;
  }
}

/** $format */
/** $format */
/* stylelint-disable block-closing-brace-newline-after */
/* stylelint-enable */
/**
 * Breakpoint mixins
 */
/* stylelint-disable block-closing-brace-newline-after */
/* stylelint-enable */
* {
  font-family: "Roboto";
}

body {
  margin: 0px;
  overflow: hidden;
}

.pos-version {
  position: absolute;
  right: 45px;
  bottom: 32px;
  z-index: 99;
  color: var(--text-color);
}

.pos-version a {
  color: var(--text-color);
  font-weight: 800;
  text-decoration: underline;
}

.wkwcpos-lost-password {
  display: inline-block;
  font-size: 18px;
  color: var(--text-color);
  text-decoration: none;
}

.pos-form-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pos_loginForm {
  height: 100vh;
  width: 100%;
  display: block;
  background-color: var(--secondary);
  overflow: auto;
}

p.login-remember {
  display: inline-block;
  float: right;
}

p.login-remember label {
  margin: 0;
}

#posloginform p {
  margin: auto;
}

#pos-submit {
  cursor: pointer;
}

.input_err {
  border: 1px solid var(--text-color) !important;
}

.pos-login-wrap {
  width: 100%;
}

.pos-login-wrap .home-div {
  display: block;
  margin: 20px auto;
  max-width: 600px;
}

.pos-login-wrap .home-div h2 {
  text-align: center;
  color: var(--text-color);
  font-size: 40px;
  margin: 10px 0px 40px;
}

.pos-footer {
  text-align: center;
  color: var(--text-color);
}

.pos-footer p {
  margin-top: 0px !important;
}

.pos-footer a {
  display: inline-block;
  text-decoration: underline;
}

.pos-footer h3, .pos-footer a {
  color: var(--text-color);
  font-weight: 800;
  font-family: "Roboto";
  margin: 8px;
}

.pos-login-wrap .login-div {
  background-color: var(--primary);
  border-radius: 5px;
  padding: 30px 50px;
  box-shadow: 0px 2px 16px rgba(34, 22, 22, 0.08);
}

.pos-login-wrap .login-div h2 {
  font-weight: 800;
  text-align: center;
  margin: 10px 0;
  color: var(--text-color);
  font-size: 24px;
}

.pos-login-wrap .login-div input[type=text]:focus, .pos-login-wrap .login-div input[type=password]:focus {
  outline: none;
}

.pos-login-wrap .login-div input[type=text], .pos-login-wrap .login-div input[type=password] {
  width: 100%;
  margin-left: 0;
  background-color: var(--secondary);
  font-size: 18px;
  font-weight: 400;
  padding: 12px 10px;
  border-radius: 6px;
  box-shadow: none;
  color: var(--text-color);
}

.pos-login-wrap label {
  display: block;
  font-size: 18px;
  text-align: left;
  margin-top: 20px;
  color: var(--text-color);
  margin-bottom: 5px;
}

.pos-login-wrap input[type=submit] {
  display: inline-block;
  width: auto;
  padding: 12px 60px;
  background-color: var(--primary-accent);
  border: none;
  font-size: 20px;
  color: var(--text-color) !important;
  margin-top: 15px;
  font-weight: 400;
  border-radius: 3px;
}

.pos-login-wrap .login-submit {
  text-align: center;
}

.pos_error {
  display: inline-block;
  width: 100%;
  padding: 10px 0px;
  background: var(--primary);
  text-align: center;
  color: var(--text-color);
  font-weight: 700;
  font-size: 20px;
}

.pos_error strong {
  padding: 0;
}

.pos-login-submit-btn {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 0;
  margin: 0;
}

.pos-login-submit-btn .wc-auth-login-button {
  background-color: var(--primary-accent) !important;
  color: whitesmoke !important;
  border-radius: 6px;
}