html {
	background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(BACKGROUND.png);
	background-blend-mode: overlay; background-size: cover; background-repeat: no-repeat;
	background-position: center center;	font-size: 16pt; -webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */
}

* {
	margin: 0px; padding: 0px;
	list-style-type: none; text-decoration: none;
}


@font-face {
	font-family: gilc; src: url(http://hub.itnova.com.au/INCLUDES/FONTS/GILC.TTF);
}


p, button, input {
	font-family: gilc; font-size: 1.25rem;
}
h2, b {
	font-family: gilc;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
	display: none;
}

aside {
	width: 180px; margin: 0 10px; padding: 15px;
	background-color: color-mix(in srgb, #bcbcbc 60%, transparent); backdrop-filter: blur(2px);
	border-radius: 25px; float: left;
}
aside li, aside button {
	width: 100%; margin: 0.5rem 0; padding: 0.5rem 1rem;
	background-color: color-mix(in srgb, lightblue 90%, transparent);
	border-radius: 20px; box-shadow: 1px 1px 3px rgba(150, 150, 150, .5);
	display: flex; box-sizing: border-box;
}
aside li input, aside li p {
	height: 1.5rem; width: 2rem; display: inline-block;
	border: none; text-align: center; border-radius: 5px;
}
aside li p {
	width: 4rem;
}
aside button {
	font-weight: 400; color: white; text-align: center;
	background: rgb(0, 156, 255); border: none; display: none;
}
aside button:hover {
	cursor: pointer;
}

#save-grid {
	background-color: mediumseagreen; display: block;
}


#wrapper {
	width: 1100px; height: 1000px; padding: 30px;
	background-color: color-mix(in srgb, #bcbcbc 60%, transparent); backdrop-filter: blur(2px);
	border-radius: 50px; position: relative; display: block; z-index: 7; float: left;
}

#grid-template, #grid-itms {
	width: calc(100% - 60px); height: calc(100% - 60px); position: absolute;
	display: grid; transition: grid-template-columns 0.4s ease-in-out;
}
#grid-template {
	z-index: 3;
}
#grid-template div {
	font-family: gilc; font-size: 1.25rem; background-color: gainsboro; border-radius: 15px;
	display: grid; align-items: center; justify-content: center; cursor: pointer;
}


#grid-itms span {
	width: 100%; height: 100%; background-color: whitesmoke; /*resize: both; overflow: auto;*/
	border: 1px solid black; border-radius: 15px; position: relative; z-index: 5;
	display: flex; justify-content: center; align-items: center;
}
#grid-itms span i {
	padding: 0 7px; font-family: calibri; font-size: 1.2rem; font-weight: 600;
	font-style: normal; color: white; position: absolute; top: 0; right: 0;
	background-color: color-mix(in srgb, crimson 70%, transparent);
	border-radius: 0 15px 0 10px; z-index: 5; transition: .2s;
}
#grid-itms span i:hover {
	cursor: pointer; background-color: crimson;
}

#grid-itms span p {
	width: 50px; height: 50px; font-size: 2rem; text-align: center;
	background-color: lightblue; border-radius: 15px;
	position: relative; display: grid; align-items: center; z-index: 5;
}


#itm-opt_conmenu {
	width: 70px;height: 180px; padding: 10px 15px; background-color: #ff8888; position: absolute;
	box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 8px 0px; border-radius: 5px; display: block; z-index: 5;
}
#itm-opt_conmenu p {
	width: 40px; margin: 10px 0; padding: 5px 15px;
	font-family: calibri; font-size: 14pt; font-style: normal;
	background-color: whitesmoke; border-radius: 20px; transition: .3s;
}
#itm-opt_conmenu p:hover {
	cursor: pointer; background-color: white;
}





/* -------- SIZES -------- */

.single::after, .double-wid::after, .double-len::after, .double-double::after {
	content: ""; width: 100%; height: 100%;
	background-color: black; position: absolute; top: 0; display: block;
}

.single::after {
	mask: url(TABLE_TYPES/1X1_TABLE.svg) no-repeat center / contain;
	-webkit-mask: url(TABLE_TYPES/1X1_TABLE.svg) no-repeat center / contain;
}

.double-wid {
	grid-column: span 2 / span 2;
}
.double-wid::after {
	mask: url(TABLE_TYPES/1X2_TABLE.svg) no-repeat center / contain;
	-webkit-mask: url(TABLE_TYPES/1X2_TABLE.svg) no-repeat center / contain;
}

.double-len {
	 grid-row: span 2 / span 2;
}
.double-len::after {
	mask: url(TABLE_TYPES/2X1_TABLE.svg) no-repeat center / contain;
	-webkit-mask: url(TABLE_TYPES/2X1_TABLE.svg) no-repeat center / contain;
}

.double-double {
	grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
}
.double-double::after {
	mask: url(TABLE_TYPES/2X2_TABLE.svg) no-repeat center / contain;
	-webkit-mask: url(TABLE_TYPES/2X2_TABLE.svg) no-repeat center / contain;
}




/* -------- SENT-CONTAINER -------- */

#sent {
	width: 100vw; height: 0px; position: absolute;
	background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px);
	display: flex; justify-content: center; align-items: center; z-index: 0;
}

#sent-cont {
	width: 400px; height: 0px; padding: 20px 50px; background-color: whitesmoke;
	text-align: center; position: relative; top: 50px; display: block; border-radius: 25px;
	overflow: hidden; opacity: 0; transition: top 0.4s cubic-bezier(0.35, 0.88, 0.5, 0.93);
}
#sent-cont h2 {
	font-size: 2.5rem;
}

#sent-cont h2 b {
	width: 55px; height: 55px; font-size: 34pt;
	font-weight: 400; color: white; background-color: color-mix(in srgb, crimson 70%, transparent);
	position: absolute; top: 0px; right: 0px; border-radius: 0px 0px 0px 15px; transition: .3s;
}
#sent-cont h2 b:hover{
	cursor: pointer; background-color: crimson;
}








/*#wrapper::before {
	content:""; display: block; width: 100%; height: 100%; 
	background: repeating-linear-gradient(#e66465 0px, #e66465 48px, #000 50px, #000 50px);
	position: absolute; top: 0; left: 0;*/