@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);

/* Reset styles */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}


/* template */
body {
  background: #f4f5f5;
  font-family: Verdana;
  font-size: 12px;
}

.hidden {
  display: none;
}





#available_items {
  position: absolute;
  height: 100%;
  width: 100%;
}

/*HEADER*/

.pos header {
width:100%;
height:80px;
float:left;
padding:0px;
background: #373638;
box-sizing: border-box;
}


.pos header .logo {
  float:left;
  background: #ffffff;
  height: 100%;
  width: 230px;
  text-align: center;
}
.pos header .logo a{
  line-height: 80px;
  height: 100%;
  width: 100%;
  float: left;
}
.pos header .logo img{
  margin-top: 12px;
}

.pos header .icons{
float:right;
margin:0 auto;}

.pos header .icons a {
  color: #afb0b3;
  text-decoration: none;
  font-size: 9px;
  float: left;
  height: 78px;
  background: #454a4d;
  width: 78px;
  text-align: center;
}
.pos .container {
width:100%;
height: calc(100% - 80px);
float:left;
background: #f2f2f2;
margin:0 auto;
box-sizing: border-box;
overflow: hidden;
}


/*SIDEBAR*/

.pos .sidebar {
width:230px;
height:100%;
background: #252323;
box-sizing: border-box;
padding:20px 0;
float:left;}

.pos .sidebar .row {
width: 50%;
margin-bottom:20px;
float:left;}

.pos .sidebar .separator {
padding:20px;
background: #373638;
color:#aeb3b8;
}

.pos .sidebar .separator h4 {
font-size:14px;
font-weight:700;}




.pos .sidebar .button_1 {
width:80px;
float:left;
margin:0 15px;
min-height: 110px;
}

.pos .sidebar a {
font-size:10px;
line-height: 1.5em;
color:#bcbcbc;
text-align: center;
text-decoration: none;
float:left;}


/*Main Display*/

.pos .display {
width:calc(100% - 230px);
height:100%;
float:left;
box-sizing: border-box;
float:left;
background: lightblue;}

.pos .main-display{
width: calc(100% - 450px);
height:100%;
box-sizing: border-box;
float:left;
margin:0 auto;
background: #f7f7f7;
padding-bottom: 70px;
}

.pos .main-display .content {
width:100%;
height: 100%;
float:left;
box-sizing: border-box;}

.pos .display .main-display .bar {
width:100%;
padding:20px 50px;
background: white;
border: 1px solid #d1d1d1;
box-sizing: border-box;}

.pos .main-display .bar h4 {
font-size:18px;}

.pos .main-display .bar a,.pos a:active, a:link {
color:#373638;
}

.pos .main-display .bar span {
font-weight: 900;}

.pos .main-display .panels {
width:1000px;
height:100%;
box-sizing: border-box;
float:left;
padding:20px 50px;
overflow-y: auto;}

.pos .main-display .panels .customer-title {
float:left;}
.pos .main-display .panels .customer-title  h5 {
font-weight: bold;}


.pos .main-display .panels .customer {
float:left;
padding-left:20px;}

.pos .main-display .panels .customer p {
font-weight: 200;
font-size:14px;
line-height: 1.5em;}

.pos .main-display .panels .table {
width:100%;
margin:30px 0;
float:left;
font-size:12px;
}

.pos .main-display .panels .table .print-icons {
position:absolute;
bottom:20px;
left:1000px;
float:right;
}

.pos .main-display .panels .table .print-icons img {
margin:0 5px;}

.pos .main-display .panels table thead {
font-weight: 700;
background: #e8e8e8;
border:1px solid #c4c8cc; }


.pos .main-display .panels table td {
padding: 15px 5px;
text-align: center;
background: white;
border:1px solid #d1d1d1;}

.pos .main-display .panels table td img {
margin:0 5px;}


.pos .main-display .panels table {
width:100%;
}

.pos .main-display .panels .touch-panel {
width:195px;
height:210px;
box-sizing: border-box;
background-image: -moz-linear-gradient( 90deg, rgb(32,102,164) 0%, rgb(59,154,220) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(32,102,164) 0%, rgb(59,154,220) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(32,102,164) 0%, rgb(59,154,220) 100%);
float:left;
border:1px solid rgb(32, 102, 164);
display:table;
margin:10px;
}

.pos .main-display .panels .touch-panel .child {
display:table-cell;
vertical-align: top;
text-align:center;
font-size:12px;
font-weight:700;
color:white;
padding:0 20px;
}


.pos .main-display .panels .touch-panel-category {
width:195px;
height:195px;
box-sizing: border-box;
background-image: -moz-linear-gradient( 90deg, rgb(251,173,42) 0%, rgb(252,190,53) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(251,173,42) 0%, rgb(252,190,53) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(251,173,42) 0%, rgb(252,190,53) 100%);
float:left;
border:1px solid rgb(251, 173, 42);
display:table;
min-height: 210px;
margin:10px}

.pos .main-display .panels .touch-panel-category .child {
display:table-cell;
vertical-align: middle;
text-align:center;
font-size:14px;
font-weight:700;
color:white;
padding:0 20px;}






/*RACHUNEK*/

.pos .check {
width:450px;
height:100%;
background: #f7f7f7;
float:right;
right:0px;
box-sizing: border-box;
z-index: 10;
position:fixed;
border-left: 10px solid #373638;
overflow-y:auto;
}

.pos .check .bar {
width:100%;
padding:20px 50px;
background: #3b9adc;
box-sizing: border-box;
border-bottom:1px solid #3b9adc;
}

.pos .check .bar h4 {
color:white;
font-size:18px;
text-align: center;
}

.pos .check .check-list {
width:100%;
height: calc(100% - 150px);
padding:20px;
box-sizing: border-box;
float:left;
overflow-y: auto;    
}

.pos .check .check-list table {
width:100%;}



.pos .check .check-list table td {
padding:10px;
line-height: 1;}

.pos .check .check-list span {
text-align:right;
float:right;
padding-right:10px;}

.pos .check .check-list select {
width:100%;
height:40px;
font-size:12px;
color:#bcbcbc;}


.pos .check .check-list .btn {
margin:20px 0;
}

.pos .check .check-list input {
width: 100%;
height:36px;
border:1px solid #d1d1d1;
padding-left:10px;
box-sizing: border-box;
margin: 10px 0;}

.pos .check .check-list label {
margin:10px 0;
font-size:14px;
color:black;
} 

.pos .check .check-list .btn-save {
background: black;
padding:10px 20px;
font-size:14px;
color:white;
text-align: center;
border-radius:5px;
margin:10px 0;
max-width:100px;
height:37px;
line-height: 1;
float:right;
font-weight: 500;
}


/*Klawiatura*/

.pos .keyboard {
width:300px;
height:300px;
background:pink;
position: absolute;
bottom:100px;
right:20px;
box-sizing: border-box;
float:right;
}

/*STATUS*/

.pos .status-yellow {
width:18px;
height:18px;
box-sizing: border-box;
margin:0 auto;
border-radius:5px;
background:#f1d90e;}

.pos .status-red {
width:18px;
height:18px;
box-sizing: border-box;
margin:0 auto;
border-radius:5px;
background:#f10e34;}

.pos .status-green {
width:18px;
height:18px;
box-sizing: border-box;
margin:0 auto;
border-radius:5px;
background:#31c61d;}

.pos .status-black {
width:18px;
height:18px;
box-sizing: border-box;
margin:0 auto;
border-radius:5px;
background:black;} 


.pos .gallery_img_box {
    border: 10px solid transparent;
    height: 75px;
    text-align: center;
    width: 100px;
    display: block;
    margin: 12px auto 12px auto;     
}
.pos .gallery_img_box p {
    line-height: 73px;
    padding: 0px;
}

.pos .gallery_img_box img {
    vertical-align: middle;
    border: none;
    max-width: 100px;
    max-height: 75px;
}






.current_category_path span{
  cursor: pointer;  
}

.categories_container {
  overflow-y: auto;
  overflow-x: hidden;
  float: left;
  height: calc(100% - 100px);
  box-sizing: border-box;
  width: 100%;
}



/*
* 
*     table
*
*/
table.table_1 {
  color: #4D4D4D;
  font: 12px/18px arial,sans-serif; 
  border-collapse: separate;
  border-color: #E0E0E0 #E0E0E0 #E0E0E0;
  border-radius: 4px 4px 4px 4px;
  border-style: solid solid solid none;
  border-width: 1px 1px 1px 0px;
  width: 100%;
  margin: 20px 0px 0px 0px;  
}

table.table_1 th {
  background-color: #F8F8F8;
  background-image: linear-gradient(#F1F2F2, #FCFCFC 19%, #EBEBEB);
  background-repeat: no-repeat;
  font-weight: bold;
  padding: 8px 4px;
}

table.table_1 tr td, table.table_1 tr th {
  border-left: 1px solid #E0E0E0;
}

table.table_1 td {
  padding: 2px 3px;
}

table.table_1 td a{
  color: inherit;
}
table.table_1 tr.a td{
  background-color: #FEFEFE!important;
}
table.table_1 tr.b td {
  background-color: #F9F9F9!important;
}
table.table_1 tr:nth-child(2n) > td {
  background-color: #FEFEFE;
}

table.table_1 tr:nth-child(2n+1) > td {
  background-color: #F9F9F9;
}

table.table_1 thead th:first-child {
    border-radius: 4px 0 0 0;
}

table.table_1 tr:hover td {
  background-color: #F3F3F3;
}

.basket .check-list table div.up, 
.basket .check-list table div.down{
  height: 16px;
  width: 16px;
  cursor: pointer;

}
.basket .check-list table div.up_down{
  float: right;  
}
.basket .check-list table div.value{
  float: left;
  padding: 10px 0px 0px 10px;  
}
.basket .check-list table div.up{
  background: url('../images/bullet_arrow_up.png') no-repeat;
}
.basket .check-list table div.down{
  background: url('../images/bullet_arrow_down.png') no-repeat;
}
.basket .check-list table td.value_td {
  width: 70px;
  padding: 0px;
}



/*
*
*    buttons
*
*/
.button {
  background-repeat: repeat-x;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);  
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 0;
  padding: 16px 20px 16px 20px;
  text-align: center;    
  border-radius: 4px 4px 4px 4px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.30);    
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(255, 255, 255, 0.3) inset;
  text-decoration: none;  
}

.button:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(255, 255, 255, 0.1) inset;
}
.button:focus {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.3) inset; 
}

.button_danger {
    background-color: #F87261;
    background-image: linear-gradient(to bottom, #F87261, #AE432E);   
}
.button_danger:hover {
  background-image: linear-gradient(to bottom, #E86251, #9E331E);
}


.button_info {
    background-color: #1F70BD;
    background-image: linear-gradient(to bottom, #1F70BD, #0E70AD);   
}
.button_info:hover {
  background-image: linear-gradient(to bottom, #0E70AD, #0866A0);
}

/* button_standard */
.button_standard {
  background-color: #00CC00;
  background-image: linear-gradient(to bottom, #45cc23, #008800);   
}
.button_standard:hover {
  background-image: linear-gradient(to bottom, #45bc23, #007800);
}

.button_standard.clicked {
  background-color: #45bc23!important;
}
.button_danger.clicked {
  background-color: #E86251!important;
}

form.style_1{
  width: 100%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box; 
  padding: 20px;  
}

form.style_1 input[type="text"],
form.style_1 input[type="number"],
form.style_1 input[type="password"],
form.style_1 select,
form.style_1 textarea,input[type="file"]  {
  border: solid 1px #D5D5D5;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  border-radius: 3px 3px 3px 3px;
  font-size: 18px;
  line-height: 22px;
  padding: 10px 5px 10px 5px;
  background: linear-gradient(to bottom, #FFFFFF 0%, #F7F7F7 100%) repeat scroll;
  margin-bottom: 10px;
  float: left;
  width: 100%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box; 
}

form.style_1 input[type="text"]:focus,
form.style_1 input[type="password"]:focus {
    border-color: rgba(98, 174, 239, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(98, 174, 239, 0.6);
    outline: 0 none;
}
form.style_1 input[type="submit"] {
  float: left;
  clear:both;
}
/*
* label
*/
form.style_1 label {
  clear: both;
  float: left;
  font-weight: bold;
  width: 200px;
  color: #626262;
  line-height: 26px;
  margin-bottom: 10px;
  text-align: left;
  padding-right: 5px;
  cursor: pointer;
}

.order_form {
  display:none; 
  height: 100%; 
  overflow-y: scroll;
}

.red {
  color: red;
}

.required_fields {
  clear: both;
  margin-top: 40px;
  float: left;
  font-size: 11px;
  margin-bottom: 20px;
}