body {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
}
button:focus-visible,
input:focus-visible {
    outline: 0px;
}

input:required:invalid,
input:focus:invalid,
input:invalid {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);
    background-position: right center;
    background-repeat: no-repeat;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 1px solid #feacac;
    color: #fd5454;
}

input:required:valid {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);
    background-position: right center;
    background-repeat: no-repeat;
}

div#main {
    height: 100%;
}

/*---------start login---------*/
div#main div#login {
    background-color: #f60;
    padding: 10px;
    width: 241px;
}

div#main div#login form {
    text-align: center;
}

div#main div#login input#input {
    padding: 5px 10px;
    margin: 10px;
    border: none;
    border-radius: none;
    width: 190px;
}

div#main div#login input#input:focus {
    border: none;
    border-radius: none;
}

div#main div#login input#login {
    margin: 10px auto;
    padding: 5px 10px;
    border: none;
}

/*---------start end---------*/
/*---------start orders---------*/
div#gird-main {
    width: 100%;
    padding-bottom: 188px;
}

div#gird-main p#order {
    background-color: rgb(255, 194, 153);
    padding: 5px 10px;
    border-radius: 29px;
    margin: 10px 0;
}

div#gird-main p.null#order {
    background-color: #eee;
    border: 1px solid #f60;
}

div#gird-main p#order strong#num {
    min-width: 29px;
    display: inline-block;
}

div#gird-main p#order strong#time {
    float: right;
}

div#gird-main #loading {
    width: 79px;
    padding-top: 299px;
}

div#pro-main {
    background-color: #f60;
    width: 100%;
    padding: 10px;
}

div#pro-main div#pro-row {
    margin: -5px;
}

div#pro-main div#pro-row #loading {
    width: 79px;
}

div#pro-main div#pro-row div#product {
    padding: 5px;
}

div#pro-main div#pro-row div#product button {
    padding: 6px 3px;
}

div#pro-main p#hello {
    margin: 0 0 10px 0;
    color: #fff;
}

div#pro-main p#hello button {
    border: none;
    background: none;
    margin: 0;
    font-weight: bold;
    float: right;
    color: #fff;
}

/*---------end orders---------*/
/*---------start poss---------*/
div#poss-row div#poss {
    padding: 10px;
}

div#poss-row div#poss div.pos {
    color: #666;
    background-color: rgb(255, 194, 153);
    padding: 1px 10px;
    margin-bottom: 10px;
    border-radius: 6px;
}

div#poss-row div#poss div.pos.boss {
    background-color: #f5f5f5;
    border: 1px solid #f60;
    color: #f60;
}

div#poss-row div#poss div.pos p {
    margin: 10px 0;
}

div#poss-row div#poss div.pos p#name {
    text-transform: uppercase;
    color: #f00;
}

div#poss-row div#poss div.pos p#name i {
    color: #666;
    margin-left: 19px;
    font-size: 19px;
}

div#posCtrl {
    background-color: #f60;
    padding: 10px;
}

div#posCtrl div#pos-ctrl {
    margin: -5px;
}

div#posCtrl p#hello {
    margin-bottom: 10px;
    color: #fff;
}

div#posCtrl div#ctrl {
    padding: 5px;
}

div#posCtrl div#pos-form {
    padding-bottom: 5px;
}

div#posCtrl div#pos-form input[type="text"] {
    border: none;
    border-radius: 0;
    width: 100%;
    padding: 3px 6px;
    margin: 5px 0;
}

/*---------end poss---------*/
/*---------start popup---------*/
div#popup {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: auto;
}

div#popup p.null#order {
    background-color: #eee;
    border: 1px solid #f60;
}

div#popup p#order {
    color: #666;
    background-color: rgb(255, 194, 153);
    padding: 1px 10px;
    margin-bottom: 10px;
    border-radius: 39px;
}

div#popup p#order strong#num {
    min-width: 39px;
    display: inline-block;
}

div#popup p#order strong#time {
    float: right;
}

div#popup p#order strong#time i {
    padding-left: 9px;
    font-size: 20px;
    padding-right: 6px;
}

div#popup div#orderDetail {
    margin-bottom: 145px;
    padding-top: 9px;
}

div#popup div#total {
    background-color: #f5f5f5;
    color: #f60;
    padding: 9px 0;
    margin: 0px 0px 10px 0;
    border-radius: 9px;
}

div#popup div#total strong {
    text-align: center;
    padding: 6px 0;
}

div#popup div#dateSelect {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #f60;
    padding: 10px;
    color: #fff;
}

div#popup span#closePop {
    float: right;
    position: relative;
    font-size: 29px;
    margin-right: 6px;
    margin-bottom: -10px;
    margin-top: -10px;
}

div#popup div#dateSelect input#fdate,
div#popup div#dateSelect input#tdate {
    width: 100px;
    border: none;
    padding: 1px 6px;
    text-align: center;
}

/*---------end popup---------*/