/* Reset CSS */

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -webkit-transition: 0.2s ease-in-out;
 -moz-transition: 0.2s ease-in-out;
 -o-transition: 0.2s ease-in-out;
 transition: 0.2s ease-in-out;
}

body {
 font-family: 'Arial', sans-serif;
 font-weight: 400;
 font-size: 15px;
 line-height: 1.4;
 color: #333;
 text-align: left;
 background-color: #fff;
}

#main_content {
 display: flex;
 flex-direction: column;
 height: 100vh;
 float: left;
 width: 100%;
 border-top: 60px solid #deedf6;
}

#main_content.login_main_content {
 background-color: #deedf6;
 border-top: 95px solid #deedf6;
}

#content {
 flex: 1 0 auto;
 float: left;
 width: 100%;
}

#site_bottom {
 float: left;
 width: 100%;
 margin: 20px 0 0 0;
 flex: 0 0 auto;
}

.container {
 max-width: 300px;
 margin: 0 auto;
}

.container.container_wide {
 max-width: 1600px;
}

.wrapper {
 float: left;
 width: 100%;
}

a,
a:link,
a:hover,
a:visited {
 font-family: 'Arial', sans-serif;
 font-weight: 700;
 font-size: 15px;
 line-height: 1.4;
 color: #0c3260;
 text-decoration: none;
}

.fa {
 color: #5e5e62;
}

@media screen and (max-width:1300px) {
 .wrapper {
  padding: 0 2%;
 }
}

@media screen and (max-width:950px) {
 .wrapper {
  padding: 0 2.5%;
 }
}

@media screen and (max-width:676px) {
 .wrapper {
  padding: 0 3%;
 }
}

@media screen and (max-width:550px) {
 .wrapper {
  padding: 0 4%;
 }
}


/* MOBILE HEADER start */

#mobile_header {
 position: fixed;
 top: 0;
 width: 100%;
 border-bottom: 1px solid #ddd;
 background-color: #f7f7f7;
 z-index: 100;
}

#mobile_header .wrapper {
 display: flex;
 align-items: center;
 height: 60px;
}

#mobile_header .logo {
 display: flex;
 align-items: center;
 min-width: 60px;
}

#mobile_header .logo a{
 display: flex;
 align-items: center;
}

#mobile_header .logo img {
 width: 40px;
 height: 40px;
}


#mobile_header.login_mobile_header {
 background-color: #fff;
}

#mobile_header.login_mobile_header .wrapper {
 height: 95px;
}

#mobile_header.login_mobile_header .logo {
 justify-content: center;
 min-width: 100%;
}

#mobile_header.login_mobile_header .logo img {
 width: 75px;
 height: 75px;
}


#mobile_header .icons {
 flex: auto;
 display: flex;
 justify-content: flex-end;
 align-items: center;
}

#mobile_header .icon_messages {
 display: flex;
 align-items: flex-start;
 margin: 0 12px 0 0;
}

#mobile_header .icon_messages .fa {
 margin: 0 0 5px 0;
 font-size: 30px;
}

#mobile_header .icon_messages .num {
 padding: 6px;
 margin: 0 0 0 -10px;
 font-size: 10px;
 line-height: 1;
 color: #fff;
 border-radius: 100%;
 background-color: #b30000;
}

#mobile_header #messages_circle {
 display:none;
}

#mobile_header .icon_cart .fa {
 margin: 0 20px 0 0;
 font-size: 33px;
}

#mobile_header .icon_print .fa {
 margin: 0 20px 0 0;
 font-size: 30px;
}

#mobile_header .icon_user .fa {
 font-size: 30px;
}


/* MOBILE HEADER end */


/* FOOTER start */

#footer {
 float: left;
 width: 100%;
 padding: 15px 0;
 font-size: 12px;
 line-height: 1.1;
 text-align: center;
}

#footer a,
#footer a:link,
#footer a:hover,
#footer a:visited {
 font-size: 12px;
 line-height: 1.1;
}


/* FOOTER end */


/* GENERAL FORM start */

.input_holder {
 float: left;
 width: 100%;
 height: 45px;
 border: 1px solid #ddd;
 background-color: #fff;
}

.input {
 width: 100%;
 height: 100%;
 padding: 0 14px;
 font-family: 'Arial', sans-serif;
 font-weight: 400;
 font-size: 15px;
 color: #000 !important;
 border: none;
 border-radius: 0;
 outline: none;
 background: transparent;
 /* removes Apple customization */
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 opacity: 1;
}

.basic_btn {
 float: left;
 padding: 10px 15px;
 font-family: 'Arial', sans-serif;
 font-weight: 700;
 font-size: 15px;
 line-height: 1.2;
 color: #fff;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 border: none;
 border-radius: 0;
 background: #0c3260;
 cursor: pointer;
 outline: none;
}


/*  */

#x ::placeholder {
 color: #000;
 opacity: 1;
}

#x :focus::placeholder {
 opacity: 0;
}

#x ::-webkit-input-placeholder {
 color: #000;
 opacity: 1;
}

#x :focus::-webkit-input-placeholder {
 opacity: 0;
}

#x :-ms-input-placeholder {
 color: #000;
 opacity: 1;
}

#x :focus:-ms-input-placeholder {
 opacity: 0;
}

#x ::-moz-placeholder {
 color: #000;
 opacity: 1;
}

#x :focus::-moz-placeholder {
 opacity: 0;
}


/* GENERAL FORM end */


/* LOGIN start */

.login .title {
 float: left;
 width: 100%;
 margin: 30px 0 10px 0;
 font-weight: 700;
 font-size: 16px;
 line-height: 1.1;
}

.login .input_holder {
 margin: 0 0 15px 0;
}

.login .input_holder:last-child {
 margin: 0;
 border: none;
 background: none;
}

.login .basic_btn {
 width: 100%;
 height: 100%;
 padding: 0;
 font-size: 27px;
}

.login .basic_btn .fa {
 color: #fff;
}


/* LOGIN end */


/* USERS start */

.users {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 float: left;
 width: 100%;
 margin: 20px 0 0 0;
}

.user {
 display: flex;
 align-items: center;
 float: left;
 width: 100%;
 padding: 0 0 12px 0;
 margin: 0 0 12px 0;
 line-height: 1.1;
 border-bottom: 1px solid #ddd;
}

.user .icon {
 float: left;
 min-width: 30px;
 margin: 0 15px 0 0;
}

.user .icon .fa {
 font-size: 30px;
 color: #0c3260;
}

.user .icon .fa.fa-question-circle-o {
 font-size: 47px;
}

.user .name {
 flex: auto;
 float: left;
 width: 100%;
 font-weight: 700;
 font-size: 20px;
}


/* USERS end */


/* KEYPAD start */

.keypad_container {
 float: left;
 width: 100%;
 margin: 20px 0 0 0;
}

.pin {
 display: flex;
 justify-content: center;
 align-items: center;
 float: left;
 width: 100%;
}

.pin .boxes {
 float: left;
 width: 100%;
 margin: 0 0 10px 0;
}

.pin .boxes .box {
 display: flex;
 justify-content: center;
 align-items: center;
 float: left;
 width: 17.6%;
 height: 45px;
 margin: 0 3% 0 0;
 line-height: 0;
 border: 1px solid #ddd;
 background-color: #fff;
}

.pin .boxes .box:last-child {
 margin: 0;
}

.pin .boxes .box.title {
 font-weight: 700;
 text-transform: uppercase;
 background-color: transparent;
 border: none;
}

.pin .boxes .box .fa {
 display: none;
 color: #333;
}

.pin .boxes .box.filled .fa {
 display: block;
}

.keypad {
 float: left;
 width: 100%;
 border: 1px solid #ddd;
 border-right: none;
 border-bottom: none;
 background-color: #fff;
}

.keypad .btn {
 display: flex;
 justify-content: center;
 align-items: center;
 float: left;
 width: 33.33%;
 height: 60px;
 font-weight: 700;
 font-size: 23px;
 line-height: 1;
 border: 1px solid #ddd;
 border-top: none;
 border-left: none;
}

.keypad .btn.touched {
 background-color: #ddd;
}

.keypad .btn.minus .fa {
 font-size: 28px;
 color: #b30000;
}

.keypad .btn.check .fa {
 font-size: 28px;
 color: #006b00;
}


/* KEYPAD end */


/* APP ICONS start */

.app_icons {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 float: left;
 width: 100%;
 margin: 20px 0 0 0;
}

.app_icon {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-content: flex-start;
 float: left;
 width: 48.5%;
 margin: 0 3% 30px 0;
 line-height: 1;
 text-align: center;
}

.app_icon:nth-child(2n) {
 margin: 0 0 30px 0;
}

@media screen and (min-width: 560px) {
 .app_icon,
 .app_icon:nth-child(2n) {
  width: 29.33%;
  margin: 0 2% 40px 2%;
 }
}

@media screen and (min-width: 800px) {
 .app_icon,
 .app_icon:nth-child(2n) {
  width: 23%;
  margin: 0 1% 50px 1%;
 }
}

.app_icon .icon {
 display: flex;
 justify-content: center;
 align-items: center;
 float: left;
 width: 80px;
 height: 80px;
 padding: 15px;
 margin: 0 0 10px 0;
 border-radius: 100%;
 background-color: #0c3260;
}

.app_icon .icon .fa {
 font-size: 30px;
 color: #fff;
}

.app_icon .title {
 float: left;
 width: 100%;
 padding: 0 10%;
}

.app_icon .title a,
.app_icon .title a:link,
.app_icon .title a:hover,
.app_icon .title a:visited {
 font-weight: 700;
 font-size: 14px;
 color: #333;
 text-transform: uppercase;
}


/* APP ICONS end */














a { text-decoration: none; }

.flo-l { float: left; }
.flo-r { float: right; }
.clr-b { clear: both; }
.clr-l { clear: left; }
.cf { overflow: hidden; }

.small {
 font-family: Arial;
 font-size: 0.72em;
 color: #333;
}
.medium {
 font-family: Arial;
 font-size: 1.1em;
 color: #333;
}
.large {
 color: #333;
 font-size: 1.3em;
 font-family: Arial;
 font-weight: 700;
 margin-bottom: 0.6em;
}

.menu_link {
 width:100%;
 padding:0.5em;
 border-style: solid;
 border-width: thin;
 border-left-width: 0px;
 border-top-width: 0px;
 border-bottom-width: 1px;
 border-right-width: 0px;
 border-color: #ddd;

 color: #333;
 font-size: 1.2em;
 font-family: Arial;
 font-weight: 400;
}
.menu_separator {
 width:100%;
 padding:0.8em 1em 0.7em 1em;
 background-color: #deedf6;
 border-style: solid;
 border-width: thin;
 border-left-width: 0px;
 border-top-width: 0px;
 border-bottom-width: 1px;
 border-right-width: 0px;
/*  border-color: #aaa; */
 border-color: transparent;

 color: #333;
 font-size: 0.9em;
 font-family: Arial;
 font-weight: 600;
 text-transform: uppercase;
 border-radius: 3px;
}

.form {
 width: 100%;
 padding: 1em 1em 0;
}
.form label {
 color: #333;
 font-size: 1em;
 font-family: Arial;
 margin-bottom: 0.6em;
}
.form input[type='text'],
.form input[type='email'],
.form input[type='tel'],
.form input[type='date'],
.form input[type='time'],
.form input[type='number'],
.form select,
.form textarea,
.form input[type='password'] {
 width: 100%;
 margin-bottom: 0.5em;
 border-style: solid;
 border-width: thin;
 border-color: #deedf6;
 background-color: #fdf4d3;
 border-radius: 3px;
 height: 2.2em;
 font-size: 1.2em;
 color: #000;
 padding-left: 0.5em;
 padding-right: 0.5em;
}

.form input[type='submit'],
.form input[type='button'], .div_button {
 display: flex;
 width: 100%;
 margin-top: 0.7em;
 background: #0c3260;
 border: 0;
 border-radius: 3px;
 height: 2.5em;
 color: #fff;
 align-items: center;
 justify-content: center;
 text-align:center;
 font-family: Arial;
 font-size: 1.3em;
 font-weight: 700;
 padding: 0 1em;
}

.form input[type='submit'].div_button,
.form input[type='button'].div_button {
 width: 100%;
 height: auto;
 margin-top: 0.7em;
 background: #0c3260;
 border: 0;
 border-radius: 3px;
 color: #fff;
 align-items: center;
 text-align:center;
 font-family: Arial;
 font-size: 1.1em;
 font-weight: 700;
 padding: 0.5em 1em;
}


.div_button a,
.div_button a:link,
.div_button a:hover,
.div_button a:visited {
 display: block;
 width: 100%;
 color: #fff;
 align-items: center;
 text-align:center;
 font-family: Arial;
 font-size: 1.1em;
 font-weight: 700;
}



.mobile_button {
 background-color:#fff;
 float: left;
 height: 57px;
 padding-bottom: 8px;
 width: 100%;
 border-style: solid;
 border-width: thin;
 border-left-width: 0px;
 border-top-width: 0px;
 border-bottom-width: 1px;
 border-right-width: 0px;
 border-color: #000;
}






.form.cf.padding {
 padding-right: 0;
 padding-left: 0;
}

#printerInfo {
 padding-bottom: 1em;
 border-bottom: 1px solid #ddd;
}

#printer_list .menu_link {
 padding-right: 1em;
 padding-left: 1em;
}