/*fonts*/
@font-face {
	font-family: gothammedium;
	src: url("../fonts/gotham-medium.ttf");
}
@font-face {
	font-family: belerenb;
	src: url("../fonts/beleren-b.ttf");
}
@font-face {
	font-family: belerenbsc;
	src: url("../fonts/beleren-bsc.ttf");
}
@font-face {
	font-family: matrix;
	src: url("../fonts/matrix.ttf");
}
@font-face {
	font-family: matrixb;
	src: url("../fonts/matrix-b.ttf");
}
@font-face {
	font-family: matrixbsc;
	src: url("../fonts/matrix-bsc.ttf");
}
@font-face {
	font-family: mplantin;
	src: url("../fonts/mplantin.ttf");
}
@font-face {
	font-family: mplantini;
	src: url("../fonts/mplantin-i.ttf");
}
@font-face {
	font-family: goudymedieval;
	src: url("../fonts/goudy-medieval.ttf");
}

:root {
	--light-color: #eee;
}

html {
	user-select: none;
	font-size: 20pt;
}
body {
	margin: 0px;
}

.cardMaster {
	margin: 0.9rem 0px;
}
.cardMasterElement {
	font: 1rem belerenbsc;
	margin-top: 0.1rem;
    display: grid;
    grid-template-columns: 2rem auto 2rem;
    align-items: center;
    background: gray;
}
.cardMasterElement > .handle {
    cursor: move;
    padding: 0.5rem;
    text-align: center;
}
.cardMasterElementMoving {
	background-color: #555;
}
.cardMasterElement > .delete {
	cursor: pointer;
    text-align: center;
}
.cardMasterElement.cardMasterElementSelected {
	background: green;
}

.splitGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0.1rem;
}
.autoGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
	grid-auto-rows: min-content;
}
.frameGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
	grid-auto-rows: min-content;
	grid-gap: 0.1rem;
}
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}
#framePicker, #maskPicker {
	max-height: 260pt;
	overflow-y: auto;
	overflow-x: hidden;
}
#framePicker > div {
	height: 3rem;
	text-align: center;
	width: 100%;
}
#framePicker img {
	max-width: 3rem;
	max-height: 3rem;
}
#maskPicker img {
	max-width: 1.5rem;
	max-height: 1.5rem;
}
#framePicker > div.frameOptionSelected, #maskPicker > div.maskOptionSelected {
	background-color: green;
}
#maskPicker > div, #framePicker > div {
	background-color: gray;
}
#maskPicker > div {
	padding: 0.5rem;
	margin-bottom: 0.1rem;
}

#textPicker {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	grid-auto-rows: min-content;
	grid-gap: 0.1rem;
	margin: 0.1rem 0px;
}
#textPicker > div {
	font: 1rem belerenbsc;
	background: gray;
	padding: 0.5rem;
}
#textPicker > div.selectedText {
	background: green;
}

canvas {
	background: gray;
}

.hidden {
	display: none;
}



.mainGrid {
	display: grid;
	grid-template-columns: 750px auto;
	grid-gap: 1rem;
	background: #eeeeee;
	padding: 1rem;
	margin-bottom: 12rem;
}

.tabPicker {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
	grid-auto-rows: min-content;
	grid-gap: 0.1rem;
	margin-bottom: 1rem;
}
.tabPicker > div {
	font: 1rem belerenbsc;
	text-align: center;
	padding: 0.5rem;
	background: gray;
}
.tabPicker > div.tabOptionSelected {
	background: green;
}

input, textarea, button, select {
	font: 0.8rem mplantin;
	width: 100%;
}