@font-face {
  font-family: 'JetBrainsMono-Regular';
  src: url('JetBrainsMono-Regular.ttf') format('truetype');
  font-display: swap;
}

html{
	font-family: 'JetBrainsMono-Regular', sans-serif;
}

body{
	background-color: #383444;
	font-size: 16px;
	margin: 15px 30px 0px 30px;
}

.grid-header{
	display: grid;
	grid-template-columns: 1fr 0.1fr; 
	gap: 10px;
	padding: 5px;
}

.header-logo {
	text-align: left;
	margin-bottom: 10px;
}

.grid-header-lang{
	display: grid;
	grid-template-columns: 0.25fr 1fr; 
	gap: 10px;
	height: 0px;
	align-items: center;
}

.header-lang-image{
	max-width: 25px;
	max-height:25px;
}

.header-lang-picker{
	font-family: 'JetBrainsMono-Regular', sans-serif;
	border-radius: 5px;
	font-size: 15px;
	height: 30px;
}

.addNotesDiv{
	padding-left: 5px;
	margin-right:20px;
}

.character-sheet{
	margin-bottom: 20px;
}

.grid-sheet{
  display: grid;
  gap: 5px;
  color: white;
  min-height:92px;
}

.r1 {
  grid-template-columns: 1fr 1fr 0.5fr 0.5fr; 
  min-height:92px;
}

.r2, .r3 {
  grid-template-columns: 1fr 1fr; 
  min-height:92px;
}

.grid-sheet-item{
	padding: 0px 5px 0px 5px;
	color: black;
	min-height:92px;   
}

.floating-label {
  position: relative;
  margin: 20px 0;
  width: 100%;
}

.floating-label label {
	position: absolute;
	font-size: 16px;
	pointer-events: none;
	transition: 0.2s ease all;
	color:#e1df76;
	top: -10px;
	left: 10px;
	font-size: 15px;
	color: #e1df76;
	background-color: #383444;
	border-radius: 5px;
	padding: 0px 10px 0px 10px;
	border: 2px solid #e1df76;
	height: 20px;
}

.content-editable {
	background-color: #383444;
	padding: 18px 10px 10px 10px;
	font-size: 15px;
	border: 2px solid #e1df76;
	border-radius: 5px;
	color: #e1df76;
	resize: none;
	outline: none;
	overflow-y: hidden;
	pointer-events: none;
	user-select: none;
}

.content-editable-notes {
	background-color: #383444;
	padding: 18px 10px 10px 10px;
	font-size: 15px;
	border: 2px solid #e1df76;
	border-radius: 5px;
	color: #e1df76;
	resize: none;
	outline: none;
	overflow-y: hidden;
}

footer{
	border-top: 1px solid #3ff1ff;
	text-align: center;
}

.footer-logos{
	display: grid;
	grid-template-columns: auto auto auto; 
	gap: 40px;
	justify-content: center;
	align-items: center;
}

.footer-text{
	font-size: 12px;
	color: white;
}

.footer-logo-morgborg{
	filter:brightness(0) saturate(100%) invert(84%) sepia(69%) saturate(545%) hue-rotate(14deg) brightness(104%) contrast(106%);
	padding: 5px;
}

.footer-sm-logos{
	display: grid;
	grid-template-columns: auto auto auto; 
	gap: 10px;
	justify-content: center;
	align-items: center;
	padding: 5px;
}

.grid-buttons{
	display: flex;
	color: white;
	margin-bottom: 25px;
	align-items: end;
}

.grid-buttons > div:last-child {
  margin-left: auto;
}

.radioSelectClass{
	display: flex;
	align-items: center;
	padding-left: 5px;
}

.grid-checkboxes{
	align-items: end;
	padding-left: 5px;
}

.chooseClassDiv{
	margin-bottom: 10px;
}

.classPicker{
	margin-left: 10px;
	font-family: 'JetBrainsMono-Regular', sans-serif;
	font-size: 15px;
	border-radius: 5px;
	height: 30px;
	width:auto;
}

.buttonPrint{
	cursor: pointer;
	margin-left:10px;
}

.buttonPrint:hover {
  transform: scale(1.2);
}

.buttonErase{
	cursor: pointer;
}

.buttonErase:hover {
  transform: scale(1.2);
}

.title-print{
	display:none;
}

.print-footer{
	display:none;
}

.buttonAutogen {
	padding: 0.7em;
	border-radius: 5px;
	background-color: #3ff1ff;
	cursor: pointer;
	font-family: 'JetBrainsMono-Regular', sans-serif;
	font-size: 15px;
	margin-left: 50px;
	border:none;
	min-height: 41px;
}

.buttonFunctionsDivMobile{
	display: flex;
	grid-column: 2;
	margin-right: 5px;
	margin-top: 5px;
	justify-content: right;
}

.checkLabel{
	font-size: 15px;
}

.classCheckbox {
	transform: scale(1.5);
}
	
.buttonFunctionsDiv{
	margin-right:5px;
}

@media (max-width: 640px) {
	.grid-sheet{
		gap:0px;
	}
	
	.char-area{
		height:68px;
	}
}

@media (min-width: 540px) {

	.mobile{
		display:none;
	}
}

@media (min-width: 800px) {
	.buttonFunctionsDivMobile{
		display:none;
	}
	
	.buttonAutogen:hover {
		background-color: #383444;
		color: #3ff1ff;
		border:1px solid #3ff1ff;
	}
}

@media (max-width: 539px) {
	.desktop{
		display:none;
	}
}

@media (max-width: 799px) {
	.buttonFunctionsDiv{
		display:none;
	}
}

@media (max-width: 655px) {
	.classPicker{
		margin-left:30px;
		margin-top:10px;
	}
	
	.radioSelectClass{
		display:block;
		margin-top:5px;
	}
	
	.addNotesDiv{
		margin-right:0px;
	}
	
	.buttonAutogen{
		margin-right: 5px;
		min-height: 41px;
	}
	
}

@media (max-width: 768px) {
	body {
		margin: 0px 10px 0px 10px;
	}
	
	.grid-header{
		padding: 2px;
		align-items: center;
	}
	
	.grid-header-lang{
		height: auto;
	}
	
	.footer-logos{
		gap: 20px;
	}	
}

@media (max-width: 899px) {
	.r2 {
		grid-template-columns: 1fr 1fr; 
	}
	
	.r2, .r3 {
		grid-template-columns: 1fr; 
	}
}

@media (max-width: 1024px) {
	.r1 {
		grid-template-columns: 1fr 1fr; 
	}
}

@media print {
	footer, .grid-header, .grid-buttons{
		display:none;
	}
	
	.r2{
		grid-template-columns: 0.5fr 1fr; 
	}
	
	.r3{
		grid-template-columns: 1fr 1fr; 
	}
	
	.content-editable, .content-editable-notes, .floating-label label{
		border: 1px solid black;
		color:black;
	}
	
	.content-editable{
		font-size:12px !important;
	}
	
	.title-print{
		display:block;
		font-size:20px;
		padding-left:5px;
	}
	
	.print-footer {
		display:block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 10px;
        padding: 10px;
        background: white;
        border-top: 1px solid #ccc;
      }
	
	@page {
		margin: 10px;
	}
}