.pos .base{
	display: flex;
	flex-direction: column;
	/* gap: 10px; */
	gap: 5px;
}

/* .pos .base .bar{
	background: var(--bar-background-color);
    border-radius: var(--border-radius);
	border: 1px solid;
    border-color: var(--topbar-border-color);
	padding: 5px;
} */

.pos .base .bar .searchBar{
	width: 100%;
}

.pos .base .bar .searchBar input{
	background: var(--button-background-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--topbar-border-color);
    font-size: .9em;
    padding: 7px 15px;
    width: 100%;
}

.pos .base .bar .icon{
	display: flex;
    justify-content: center;
    align-items: center;
    background: var(--button-background-color);
    border-radius: var(--border-radius);
    min-width: 34px;
	min-height: 34px;
	border: 1px solid var(--topbar-border-color);
	cursor: pointer;
	position: relative;
}

.pos .base .bar .icon .filter{
	opacity: 0;
	visibility: hidden;
	background: #fff;
	position: absolute;
	transition: .3s all;
	border: 1px solid var(--topbar-border-color);
	border-radius: var(--border-radius);
	z-index: 1;
	top: 35px;
	right: 0;
}

.pos .base .bar .icon:hover .filter{
	opacity: 1;
	visibility: visible;
}

.pos .base .bar .icon .filter .item{
	min-width: 200px;
    padding: 10px;
}

.pos .base .bar .icon .filter .item:hover{
	background: var(--menu-button-selected-background-color);
    color: var(--menu-button-selected-color);
    border-color: var(--menu-button-selected-border-color);
}

.pos .base .bar .icon .filter .setting .item input[type=checkbox]{
	cursor: pointer;
}

.pos .base .bar .icon .filter .setting .item label{
	cursor: pointer;
}

.pos .base .bar .icon .filter .setting .item .size{
	padding: 10px 15px;
	border-radius: var(--border-radius);
}

.pos .base .bar .icon .filter .setting .item .size:hover{
	background: var(--menu-button-selected-background-color);
    color: var(--menu-button-selected-color);
    border-color: var(--menu-button-selected-border-color);
}

.pos .base .bar .icon .filter .setting .item .size.selected{
	background: var(--menu-button-selected-background-color);
    color: var(--menu-button-selected-color);
    border-color: var(--menu-button-selected-border-color);
}

.pos .base .bar .additionalButton .button{
	background: var(--bar-background-color);
    border-radius: var(--border-radius);
    padding: 5px;
    border: 1px solid var(--topbar-border-color);
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    width: 46px;
    cursor: pointer;
}

.pos .base .filterBar{
	padding: 5px;
	border: 1px solid;
	display: flex;
	width: 100%;
	gap: 5px;
	justify-content: flex-end;
}

.pos .base .filterBar .item{
	padding: 3px 10px;
    border: 1px solid;
	cursor: pointer;
}

.pos .base .view{
	display: flex;
	border: 1px solid;
}

.pos .base .view .item{
	display: flex;
	flex-direction: column;
	justify-content: center;
	cursor: pointer;
	padding: 0 7px;
	border: 1px solid;
}

.pos .base .view .item:first-child{
	border-radius: 5px 0 0 5px;
}

.pos .base .view .item:last-child{
	border-radius: 0 5px 5px 0;
}

.pos .base .itemList{	
	/* display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; */
    gap: 10px;
	/* height: calc(100vh - 184px); */
	height: calc(100vh - 160px);
    overflow-y: overlay;
}

.pos .base .itemList .item{
	text-align: center;
    cursor: pointer;
    border: 1px solid;
    display: flex;
    aspect-ratio: 1 / 1;
	position: relative;
}

.pos .base .itemList .item.cardSizeS{
	width: calc(100% / 10);
}

.pos .base .itemList .item.cardSizeM{
	width: calc(100% / 6);
}

.pos .base .itemList .item.cardSizeL{
	width: calc(100% / 4);
}

.pos .base .itemList .item.cardSizeXL{
	width: calc(100% / 2);
}

.pos .base .itemList .item .image{
	background: #e5f1f0;
	border-radius: 5px 5px 0 0;
}

.pos .base .itemList .item img{
	position: absolute;
	min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
	border-radius: var(--border-radius);
	background: #e5f1f0;
}

.pos .base .itemList .item .picture{
	visibility: hidden;
}

.pos .base .itemList .item.showImage .picture{
	visibility: visible;
}

.pos .base .itemList .item .name{
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
}

.pos .base .itemList .item .detail{
	padding: 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    background: rgb(0 0 0 / 70%);
    width: 100%;
    color: #fff;
    bottom: 0;
    border-radius: 0 0 5px 5px;

	height: 100%;
    text-align: center;
    justify-content: center;
    border-radius: var(--border-radius);
}

.pos .base .itemList .item.showImage .detail{
	height: unset;
	text-align: left;
	justify-content: unset;
	font-size: 1em;
	border-radius: 0 0 5px 5px;
}

.pos .base .itemList .item.text img{
	display: none;
}

.pos .base .itemList .item.text .detail{
	position: relative;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 1.5em;
    background: #e5f1f0;
    color: #00796b;
}

.pos .base .itemList .item.showImage .detail .name{
	white-space: nowrap;
}

.pos .base .itemList .item .detail .name{
	white-space: unset
}

.pos .base .itemList .item.cardSizeS .detail, .pos .base .itemList .item.showImage.cardSizeS .detail{
	font-size: .7em;
}

.pos .base .itemList .item.cardSizeM .detail, .pos .base .itemList .item.showImage.cardSizeM .detail{
	font-size: 1em;
}

.pos .base .itemList .item.cardSizeL .detail, .pos .base .itemList .item.showImage.cardSizeL .detail{
	font-size: 1.3em;
}

.pos .base .itemList .item.cardSizeXL .detail, .pos .base .itemList .item.showImage.cardSizeXL .detail{
	font-size: 2em;
}