:root{
	/* --font-family: "Open Sans", "Noto Thai"; */
	--font-family: "LineSeed", "LineSeedTH";
	/* --font-size: 100px; */
	--font-size: 93px;
	--font-color: #171826;
	/* --background-color: #f5f5f5; */
	--background-color: #fdfdfd;
	--border-radius: 5px;
	--bar-background-color: #fff;
	--border-color: #ececec;
	/* --topbar-border-color: #ececec; */
	--topbar-border-color: #d8d8d8;
	--button-background-color: #f5f5f5;
	--menu-button-color: #757575;
	--menu-button-selected-color: #00796B;
	--menu-button-selected-background-color: rgb(0 121 107 / 10%);
	--menu-button-selected-border-color: #00796B;
	--input-border-color: #adadad;
	--pagination-button-color: #fff;
	--pagination-button-background-color: #00796B;
}

*{
	box-sizing: border-box;
	font-family: var(--font-family);
	user-select: none;
	scrollbar-width: thin;
}

@font-face {
	font-family: 'Anuphan';
	src: url('../font/Anuphan-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Anuphan';
	src: url('../font/Anuphan-ExtraLight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Anuphan';
	src: url('../font/Anuphan-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Anuphan';
	src: url('../font/Anuphan-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Anuphan';
	src: url('../font/Anuphan-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Anuphan';
	src: url('../font/Anuphan-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Anuphan';
	src: url('../font/Anuphan-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}


body{
	margin: 0;
	padding: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

body{
	background: var(--background-color);
	color: var(--font-color);
	font-family: var(--font-family);
	font-size: var(--font-size);
	overflow: hidden;
}

*{
	box-sizing: border-box;
	font-family: Anuphan, sans-serif !important;
}

.pos .button{
	user-select: none;
}

.pos .topBar{
	background: var(--bar-background-color);
	border-color: var(--topbar-border-color);
}

.pos .topBar input{
	background: var(--button-background-color);
	border-radius: var(--border-radius);
}

.pos .topBar .operation .button{
	background: var(--button-background-color);
	border-radius: var(--border-radius);
}

.pos .menuBar{
	background: var(--bar-background-color);
	color: var(--font-color);
	border-color: var(--topbar-border-color);
}

.pos .menuBar .button{
	/* border-radius: var(--border-radius); */
	/* border-color: var(--bar-background-color); */
	color: var(--menu-button-color);
}

.pos .menuBar .button.selected{
	background: var(--menu-button-selected-background-color);
	color: var(--menu-button-selected-color);
	/* border-color: var(--menu-button-selected-border-color); */
	border-right: 10px solid var(--menu-button-selected-border-color);
}

.pos .menuBar .button:hover{
	background: var(--menu-button-selected-background-color);
	color: var(--menu-button-selected-color);
	/* border-color: var(--menu-button-selected-border-color); */
}

.pos .sideBar{
	background: var(--bar-background-color);
	color: var(--font-color);
	border-color: var(--topbar-border-color);
}

.pos .sideBar .operation{
	border-color: var(--topbar-border-color);
}

.pos .sideBar .operation .button{
	background: var(--button-background-color);
	border-radius: var(--border-radius);
}

.pos .sideBar .operation input{
	border-radius: var(--border-radius);
	border-color: var(--input-border-color);
}

.pos .sideBar .itemList{
	border-color: var(--topbar-border-color);
}

.pos .sideBar .itemList .item{
	background: var(--button-background-color);
}

.pos .sideBar .summary{
	background: var(--button-background-color);
	border-color: var(--topbar-border-color);
}

.pos .sideBar .pay .button{
	border-radius: var(--border-radius);
	color: var(--bar-background-color);
}

.pos .sideBar .pay .button.payButton{
	background: #00796B;
}

.pos .sideBar .pay .button.orderButton{
	background: #fc8019;
}

.pos .sideBar .pay .button.cancelButton{
	background: #fb3c4c;
}

.pos .base .filterBar{
	background: var(--bar-background-color);
	border-radius: var(--border-radius);
	border-color: var(--topbar-border-color);
}

.pos .base .filterBar .item{
	border-radius: var(--border-radius);
	border-color: var(--bar-background-color);
}

.pos .base .filterBar .item.selected{
	background: var(--menu-button-selected-background-color);
	color: var(--menu-button-selected-color);
	border-color: var(--menu-button-selected-border-color);
}

.pos .base .view{
	background: var(--bar-background-color);
	border-radius: var(--border-radius);
	border-color: var(--topbar-border-color);
}

.pos .base .view .item{
	border-color: var(--bar-background-color);
}

.pos .base .view .item.selected{
	background: var(--menu-button-selected-background-color);
	color: var(--menu-button-selected-color);
	border-color: var(--menu-button-selected-border-color);
}

.pos .base .itemList .item{
	background: var(--bar-background-color);
	border-radius: var(--border-radius);
	border-color: var(--topbar-border-color);
}

.pos .base .dialog .item, .pos .home.item{
	background: var(--bar-background-color);
	border-radius: var(--border-radius);
	box-shadow: 0 0 10px 2px #e9e9e9;
}

.pos .base .dialog .item input, .pos .home.item input{
	border-radius: var(--border-radius);
	border-color: var(--input-border-color);
}

.pos .base .dialog .item .button, .pos .home.item .button{
	border-radius: var(--border-radius);
}

.pos .base .dialog .item .button.submitButton, .pos .home.item .button.submitButton{
	background: #00796B;
	color: #fff;
}

.pos .base .dialog .item .button.cancelButton, .pos .home.item .button.cancelButton{
	background: #878787;
	color: #fff;
}

.pos .posDialog input, .pos .posDialog select{
	border: 1px solid;
    border-radius: var(--border-radius);
    border-color: var(--input-border-color);
	font-size: 1em;
    padding: 8px 10px;
}

.pos .posDialog.memberDialog input{
	/* border-radius: var(--border-radius); */
	border-color: var(--input-border-color);
	border-radius: 20px;
}

.pos .posDialog.memberDialog select{
	/* border-radius: var(--border-radius); */
	border-color: var(--input-border-color);
	border-radius: 20px;
}

select:required:invalid {
	color: gray;
}
option[value=""][disabled] {
	display: none;
}
option {
	color: black;
}

.pos .posDialog.memberDialog .button.submitButton{
	background: #00796B;
	color: #fff;
}

.pos .posDialog.memberDialog .memberCode .button{
	background: var(--button-background-color);
    border-radius: var(--border-radius);
	border-color: var(--input-border-color);
	color: unset !important;
}

.pos .posDialog.memberDialog .memberDetail .button{
	background: var(--button-background-color);
    border-radius: var(--border-radius);
	border-color: red;
	color: red;
}

.pos .posDialog.noteDialog textarea{
	border-radius: var(--border-radius);
	border-color: var(--input-border-color);
}

.pos .posDialog.noteDialog .button.clearButton{
	background: #fb3c4c;
}

.pos .sideBar .itemList .optionContainer{
	color: gray;
}

.pos .sideBar .itemList .optionContainer input{
	border-radius: var(--border-radius);
    border-color: var(--input-border-color);
}

.pos .sideBar .itemList .optionContainer textarea{
	border-radius: var(--border-radius);
    border-color: var(--input-border-color);
}

.paginationContainer .pagination .button:first-child{
	border-radius: 5px 0 0 5px;
}

.paginationContainer .pagination .button:last-child{
	border-radius: 0 5px 5px 0;
}

.paginationContainer .pagination .button{
	background: var(--pagination-button-background-color);
	color: var(--pagination-button-color);
}

.paginationContainer .pagination .input{
	border-color: var(--pagination-button-background-color);
}

.pos .posDialog .giftVoucherList .item{
    background: var(--bar-background-color);
    border-radius: var(--border-radius);
    border-color: var(--topbar-border-color);
}

.pos .posDialog .giftVoucherList .item .button.applied{
	background: #00800024;
    color: green;
}

.pos .posDialog .tab.selected{
	background: var(--menu-button-selected-background-color);
	color: var(--menu-button-selected-color);
}

.pos .posDialog .tab:hover{
	background: var(--menu-button-selected-background-color);
	color: var(--menu-button-selected-color);
}

.pos .posDialog .cashContainer input{
    border-radius: var(--border-radius);
    border-color: var(--input-border-color);
}

.pos .posDialog.paymentDialog table, .pos .posDialog.paymentDialog td{
	background: #e5eaf1;
    color: #0060e7;
}

.pos .posDialog .numpad .num:hover{
	background: #b6d3fb;
}

.pos .posDialog.paymentDialog .button.submitButton{
	background: #00796B;
	color: #fff;
}

.pos .posDialog .button.submit{
	background: #00796B;
	color: #fff;
}

.pos .posDialog .recommendContainer .item{
    background: var(--bar-background-color);
    border-radius: var(--border-radius);
    border-color: var(--topbar-border-color);
}

input.error, textarea.error, select.error{
	border: 1px solid red !important;
}