*,::after,::before
{
	box-sizing:border-box;
	border-width:0;
	border-style:solid;
	border-color:#e5e7eb
}
	::after,::before
{
	--tw-content:''
}
	html
{
	line-height:1.5;
	-webkit-text-size-adjust:100%;
	-moz-tab-size:4;
	tab-size:4;
	font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-feature-settings:normal;
	font-variation-settings:normal
}
	body
{
	margin:0;
	line-height:inherit
	font-size:2.3vh;
}
	hr
{
	height:0;
	color:inherit;
	border-top-width:1px
}
	abbr:where([title])
{
	-webkit-text-decoration:underline dotted;
	text-decoration:underline dotted
}
	h1,h2,h3,h4,h5,h6
{
	font-size:inherit;
	font-weight:inherit
}
	a
{
	color:inherit;
	text-decoration:inherit
}
	b,strong
{
	font-weight:bolder
}
	code,kbd,pre,samp
{
	font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size:1em
}
	small
{
	font-size:80%
}
	sub,sup
{
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline
}
	sub
{
	bottom:-.25em
}
	sup
{
	top:-.5em
}
	table
{
	text-indent:0;
	border-color:inherit;
	border-collapse:collapse
}
	button,input,optgroup,select,textarea
{
	font-family:inherit;
	font-feature-settings:inherit;
	font-variation-settings:inherit;
	font-size:100%;
	font-weight:inherit;
	line-height:inherit;
	color:inherit;
	margin:0;
	padding:0
}
	button,select
{
	text-transform:none
}
	[type=button],[type=reset],[type=submit],button
{
	-webkit-appearance:button;
	background-color:transparent;
	background-image:none
}
	:-moz-focusring
{
	outline:auto
}
	:-moz-ui-invalid
{
	box-shadow:none
}
	progress
{
	vertical-align:baseline
}
	::-webkit-inner-spin-button,::-webkit-outer-spin-button
{
	height:auto
}
	[type=search]
{
	-webkit-appearance:textfield;
	outline-offset:-2px
}
	::-webkit-search-decoration
{
	-webkit-appearance:none
}
	::-webkit-file-upload-button
{
	-webkit-appearance:button;
	font:inherit
}
	summary
{
	display:list-item
}
	blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre
{
	margin:0
}
	fieldset
{
	margin:0;
	padding:0
}
	legend
{
	padding:0
}
	menu,ol,ul
{
	list-style:none;
	margin:0;
	padding:0
}
	dialog
{
	padding:0
}
	textarea
{
	resize:vertical
}
	input::placeholder,textarea::placeholder
{
	opacity:1;
	color:#9ca3af
}
	[role=button],button
{
	cursor:pointer
}
	:disabled
{
	cursor:default
}
	audio,canvas,embed,iframe,img,object,svg,video
{
	display:block;
	vertical-align:middle
}
	img,video
{
	max-width:100%;
	height:auto
}
	[hidden]
{
	display:none
}
	*, ::before, ::after
{
	--tw-border-spacing-x:0;
	--tw-border-spacing-y:0;
	--tw-translate-x:0;
	--tw-translate-y:0;
	--tw-rotate:0;
	--tw-skew-x:0;
	--tw-skew-y:0;
	--tw-scale-x:1;
	--tw-scale-y:1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness:proximity;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width:0px;
	--tw-ring-offset-color:#fff;
	--tw-ring-color:rgb(59 130 246 / 0.5);
	--tw-ring-offset-shadow:0 0 #0000;
	--tw-ring-shadow:0 0 #0000;
	--tw-shadow:0 0 #0000;
	--tw-shadow-colored:0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia: 
}
	::backdrop
{
	--tw-border-spacing-x:0;
	--tw-border-spacing-y:0;
	--tw-translate-x:0;
	--tw-translate-y:0;
	--tw-rotate:0;
	--tw-skew-x:0;
	--tw-skew-y:0;
	--tw-scale-x:1;
	--tw-scale-y:1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness:proximity;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width:0px;
	--tw-ring-offset-color:#fff;
	--tw-ring-color:rgb(59 130 246 / 0.5);
	--tw-ring-offset-shadow:0 0 #0000;
	--tw-ring-shadow:0 0 #0000;
	--tw-shadow:0 0 #0000;
	--tw-shadow-colored:0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia: 
}
.sideMenuColor{
	background-color:#006ce1;
}
.button.bg-green
{
	color:rgb(255,255,255);
}
.button.bg-green:hover 
{
	            background-color: rgb(13, 167, 75);
	        
}
.button.bg-lightGrey
{
	color:rgb(128,131,134);
	background-color: var(--lightGrey);
}
.button.bg-lightGrey:hover 
{
	background-color: rgb(191, 191, 191);
}
.button.ghost-button 
{
	background-color: rgb(250, 251, 252);
	color: rgb(128,131,134);
	border: solid 1px rgb(138,153,173);
}
.button.ghost-button:hover 
{
	            background-color: rgb(64,193,115);
	            color: #ffffff;
	            border-color: transparent;
	        
}
.button.bg-lightOrange
{
	color:rgb(255,255,255);
}
.button.bg-lightOrange:hover 
{
	            background-color: rgb(250, 177, 27);
	        
}
.button.bg-red
{
	color:rgb(255,255,255);
}
.button.bg-red:hover 
{
	            background-color: rgb(251, 45, 69);
	        
}
.form-field 
{
	border: solid 1px rgb(138,153,173);
	border-radius:0.8vh;
	padding-left:1vw;
	padding-right:1vw;
	padding-top:0.5vh;
	padding-bottom:0.5vh;
	        
}
.button
{
	display:inline-block;
	border-radius:0.8vh;
	padding-left:1vw;
	padding-right:1vw;
	padding-top:0.5vh;
	padding-bottom:0.5vh;
	text-align:center;
	font-size:2.3vh;
	line-height:2.5vh;
}
.button.bg-green
{
	color:rgb(255,255,255);
}
.button.bg-green:hover 
{
	            background-color: rgb(13, 167, 75);
	        
}
.button.bg-lightGrey
{
	color:rgb(128,131,134)
}
.button.bg-lightGrey:hover 
{
	            background-color: rgb(191, 191, 191);
	        
}
.button.ghost-button 
{
	            background-color: rgb(250, 251, 252);
	            color: rgb(128,131,134);
	            border: solid 1px rgb(138,153,173);
	        
}
.button.ghost-button:hover 
{
	            background-color: rgb(64,193,115);
	            color: #ffffff;
	            border-color: transparent;
	        
}
.button.bg-lightOrange
{
	color:rgb(255,255,255);
}
.button.bg-lightOrange:hover 
{
	            background-color: rgb(250, 177, 27);
	        
}
.button.bg-red
{
	color:rgb(255,255,255);
}
.button.bg-red:hover 
{
	background-color: rgb(251, 45, 69);
	        
}
.form-field 
{
	border: solid 1px rgb(138,153,173);
	border-radius:1vh;
	padding-left:0.5vw;
	padding-right:0.5vw;
	padding-top:0.5vh;
	padding-bottom:0.5vh;
	        
}
.absolute
{
	position:absolute
}
.relative
{
	position:relative
}
.left-4
{
	left:1vw;
}
.top-1\/2
{
	top: 30%;
}
.mt-1
{
	margin-top:0.1vh;
}
.mt-12
{
	margin-top:1.5vh;
}
.mt-20
{
	margin-top:2.5vh;
}
.mt-4
{
	margin-top:1.6vh;
}
.mt-5
{
	margin-top:1.8vh;
}
.mt-6
{
	margin-top:2vh;
}
.mt-\[48px\]
{
	margin-top:48px
}
.h-4
{
	height:0.5vh;
}
.min-h-screen
{
	min-height:100vh
}
.w-1\/2
{
	width:50%
}
.w-full
{
	width:100%
}
.w-px
{
	width:1px
}
.-translate-y-1\/2
{
	--tw-translate-y:-50%;
	transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.items-center
{
	align-items:center
}
.justify-center
{
	justify-content:center
}
.gap-y-\[30px\]
{
	row-gap:30px
}
.overflow-hidden
{
	overflow:hidden
}
.rounded-lg
{
	border-radius:0.8vh
}
.rounded-xl
{
	border-radius:1vh;
}
.bg-green
{
	background-color:rgb(64,193,115)
}
.bg-grey
{
	background-color:rgb(128,131,134)
}
.bg-white
{
	background-color:rgb(255,255,255);
}
.py-12
{
	padding-top:3vh;
	padding-bottom:3vh;
}
.py-4
{
	padding-top:1vh;
	padding-bottom:1vh;
}
.pl-12
{
	padding-left:3vw;
}
.text-center
{
	text-align:center
}
.text-2xl
{
	font-size: 2.6vh;
    line-height: 2.8vh;
}
.text-4xl
{
	font-size: 3.2vh;
    line-height: 3.5vh;
}
.text-lg
{
	font-size: 3.2vh;
    line-height: 5.2vh;
}
.text-xl
{
	font-size:2.3vh;
	line-height:2.4vh;
}
.text-black
{
	--tw-text-opacity:1;
	color:rgb(0 0 0 / var(--tw-text-opacity))
}
.text-grey
{
	color:rgb(128,131,134)
}
.bg-\[rgba\(0\2c 0\2c 0\2c 0\.4\)\] {
    background-color: rgba(0,0,0,0.4);
}
.items-center {
    align-items: center;
}
.z-30 {
    z-index: 30;
}
.fixed {
    position: fixed;
}
.pt-8 {
    padding-top: 1.8vh;
}
.pb-5 {
    padding-bottom: 1vh;
}
.px-5 {
    padding-left: 1vw;
    padding-right:1vw;
}
.bg-white {
    background-color: rgb(255,255,255);
}
.input {
    width: 100%;
    background-color: rgb(250, 251, 252);
    border: solid 1px var(--borderColor);
    border-radius: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.rounded-2xl {
    border-radius: 2vh;
}
.width-full{
    width: 100%;
}
#dialogTemplate {
    z-index: 9999;
    left: 0px;
    top: 0px;
	width:100vw;
	height:100vh;
}

#dialogTemplate .content{
	margin: auto;
    margin-top: 40vh;
	max-width: 50vw;
}
#dialogTemplate .subject{
	font-size:3.6vh;
	line-height:4vh;
}
.buttonConfirm button{
	height: 5vh;
    line-height: 4vh;
    font-size: 3.2vh;
}
.buttonCancel button{
	height: 5vh;
    line-height: 4vh;
    font-size: 3.2vh;
}
#inputDialogTemplate .value input{
	width: 100%;
    border-bottom: 1px solid;
    margin-top: 8px;
}
#inputDialogTemplate .value input:focus{
    outline: none;
}
#inputDialogTemplate{
	position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 999999;
}
#selecorDialogTemplate{
	position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 99999;
}
#selecorDialogTemplate .buttonValue{
	float:right;
	top:2vh;
}
#sliderDialogTemplate{
	position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 99999;
}
#sliderDialogTemplate .value{
	margin-right: 2vw;
}
#sliderDialogTemplate .ui-slider-handle{
	width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
}
#selecorInputDialogTemplate{
	position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 99999;
}
#inputDialogPassword input{
	width: 100%;
    border-bottom: 1px solid;
    margin-top: 8px;
}
#inputDialogPassword input:focus{
    outline: none;
}
#inputDialogPassword{
	position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 99999;
}
#inputDialogPassword .hint{
	margin-top: 10px;
    font-size: 12px;
    color: #4CAF50;
}
#photoDialogTemplate{
	position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 999999;
}
#photoDialogTemplate .content{
	width:60vw;
	height:60vh;
	background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
	border-radius:1vh;
}
#templateListDialogTemplate{
	position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 99999;
}
#templateListDialogTemplate .content{
	width:80vw;
	height:60vh;
}

#templateListDialogTemplate .tabControls{
    line-height: 4vh;
    font-size: 2.2vh;
}
#templateListDialogTemplate .tabControls .tabControl{
	cursor:pointer;
	padding-right:2vw;
	border-right: 1px solid #808386;
}
#templateListDialogTemplate .tabControls .tabControl:last-child{
	border-right: 0px;
}
#templateListDialogTemplate .tabControls .tabControl.selected{
	color: var(--green);
}
#templateListDialogTemplate .tabControls .tabControl:hover{
	color: var(--green);
}

#templateListDialogTemplate .columnData{
	width:100%;
	text-align: center;
	margin-top:1vh;
}
#templateListDialogTemplate .columnData thead tr{
	background-color: var(--green);
	border-radius: 1vh;
	--tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
	font-size: 2.2vh;
    line-height: 3.5vh;
	
	display: table;
	width: 100%;
	table-layout: fixed; 
}
#templateListDialogTemplate .columnData thead td{
	padding-top: 1vh;
    padding-bottom: 1vh;
	font-size: 2.2vh;
    line-height: 3.5vh;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
#templateListDialogTemplate .columnData thead tr td:first-child { 
	border-top-left-radius: 1vh;
	border-bottom-left-radius: 1vh;
}
#templateListDialogTemplate .columnData thead tr td:last-child { 
	border-top-right-radius: 1vh;
	border-bottom-right-radius: 1vh;
}
#templateListDialogTemplate .columnData tbody tr{
	border-bottom-width: 1px;
	display: table;
	width: 100%;
	table-layout: fixed; 
}
#templateListDialogTemplate .columnData tbody td{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
#templateListDialogTemplate .columnData tbody tr:nth-child(odd){
	background-color:#40c17326;
}
#templateListDialogTemplate .columnData tbody {
  display: block;
  max-height: 70vh; 
  overflow-y: auto;
  font-size: 1.75vh;
  line-height: 2.5vh;
}
#templateListDialogTemplate .columnData .func{
	padding-left: 0.25vw;
    padding-right: 0.25vw;
    cursor: pointer;
    text-decoration: underline;
    color: #0018ff;
}
#templateListDialogTemplate .functions{
	float: right;
    display: inline-block;
    margin-top: -2vh;
}
#templateListDialogTemplate .functions .button {
	height: 5vh;
    font-size: 2vh;
    line-height: 3vh;
}
.editTemplate{
	position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 999999;
	background-color: rgba(0, 0, 0, 0.4);
	justify-content: center;
	align-items: center;
	display: flex;
	margin: 0px !important;
}
.editTemplate .content-board{
	width: 80vw;
    height: 80vh;
}
.editTemplate .content-board .ingoreTemplate{
	display: none;
}
#editor .buttonTemplate{
	display: none;
}
#editor .buttonTemplateClose{
	display: none;
}
.editTemplate #editor .buttonTemplate{
	display: initial;
}
.editTemplate #editor .buttonTemplateClose{
	display: initial;
}
.editTemplate #editor .buttonSave{
	display: none;
}
.editTemplate #editor .buttonExport{
	display: none;
}
.headerIcon{
	background-color: #3F9C35;
    color: #FFFFFF;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    font-weight: bold;
	position:relative;
	cursor:pointer;
}
.headerIcon img{
	position:absolute;
}
.headerFunction .userMenu{
	position: absolute;
    background-color: #FFFFFF;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	margin-left: -60px;
}
@media (orientation: portrait) {
	#dialogTemplate .content{
		max-width: 80vw;
		font-size:3.6vh;
		line-height:4vh;
	}
}
.richText .richText-editor ul{
	list-style:inside;
}
.richText .richText-editor ol{
	list-style:decimal;
}

.statusBG_offline{
	background-color: #eaeaeb !important;
	color: #808386 !important;
}
.statusBG_online{
	background-color: var(--oceanGreen) !important;
	--tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}
.statusBG_error{
	background-color: var(--red) !important;
}
.statusBG_warning{
	background-color: var(--yellow) !important;
}
.generalTable{
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	table-layout: fixed;
}
.generalTable > tbody {
    overflow-y: auto;
    height: 40vh;
}

.generalTable thead{
	background-color: var(--green);
	--tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}
.generalTable thead span{
	font-size: smaller;
    color: #DDDDDD;
}
.generalTable tbody tr.row_item{
}
.generalTable td{
	padding-top: 0.25rem;
    padding-bottom: 0.25rem;
	padding-left: 0.7rem;
    padding-right: 0.7rem;
}
.generalTable tbody td{
    border-bottom-width: 1px;
	overflow:hidden;
}
.generalTable thead td:first-child{
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
}
.generalTable thead td:last-child{
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}
.generalTable td{
	white-space: nowrap;
    text-overflow: ellipsis;
}
.generalTable td.hasFunction{
	white-space: nowrap;
    text-overflow: init;
}
.generalTable td.sortable{
	cursor:pointer;
}
.generalTable thead td i{
	margin-left:8px;
}
.generalTable .row_empty td{
	text-align: center;
}
.switch-toggle{
	cursor:pointer;
}

.generalDialog{
	position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 999;
}
.generalDialog .dialogBody{
	padding: 2rem;
	--tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
	border-radius: 1rem;
	gap: 1.25rem;
	flex-direction: column;
	max-width: 94vw;
    min-width: 40vw;
}
.generalDialog .dialogBody .w-full .w-1\/2{
	width: 49.2%;
}
aside{
	z-index:600 !important;
}
.content-board{
	overflow: auto;
    scrollbar-width: thin;
}
.pageHeaderMenu{
	min-width:10vw;
	max-width:40vw;
}

.sidebar .sku-selector{
	margin-top: 40px;
    width: 80%;
    margin-left: 10%;
}
.sidebar nav{
	margin-top:20px;
}
.flatpickr-calendar.open{
	z-index: 9999999999 !important;
}