#img-buffer {
	display: none;
}

div.grid {
	max-width: 66rem;
	margin: 0px auto;
	display: grid;
	grid-template-columns: 16rem 1fr;
	align-items: top;
	column-gap: 5%;
}

div.left {
	grid-column-start: 1;
	grid-row-start: 1;
	position: relative;
	text-align: center;
	padding: 0.5rem 0px;
}

div.left2 {
	grid-column-start: 1;
}

div.right {
	grid-column-start: 2;
	grid-row-start: 1;
}

div.qr-image {
	width: 100%;
	max-width: 16rem;
}

div.qr-image canvas {
	width: 100%;
	height: 100%;
}

div.qrdesign div.panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2rem;
}

div.hide {
	display: none;
}

div.qrdesign label {
	display: block;
	text-transform: uppercase;
	font-size: 90%;
	font-weight: 600;
	color: #212529;
}

div.panel label {
	font-weight: 600;
}

div.panel input, div.panel select, div.panel textarea {
	display: block;
	width: 100%;
	margin: 0.2rem 0px 0.5rem 0px;
}

div.panel input.btn {
	width: auto;
}

div.panel input[type=color] {
	padding: 0px;
	height: 2rem;
}

div.panel p {
	margin: 0px 0px 1rem 0px;
	font-weight: 600;
}

div.panel .texty p {
	font-weight: inherit;
}

div.panel h3 {
	margin: 1em 0px 0.5em 0px;
}

div.panel a {
	color: #007088;
}

div.form-check-inline {
	display: block;
	margin: 0px 0px 1rem 0px;
}

div.panel label.form-check-label {
	display: inline-block;
	width: auto;
	font-style: italic;
	margin-left: 1rem;
}

div.panel input[type=radio], div.panel input[type=checkbox] {
	display: inline-block;
	width: auto;
}

.tox-tinymce {
	height: 12rem !important;
}

div.panel p.note {
	font-weight: normal;
	font-style: italic;
}

div.filelist div {
	margin: 0.2rem;
}

.gallery, #container-documents {
	margin: 0.5rem 0px;
}

.gallery {
	border: 1px solid #b893c4;
	padding: 0px 0.5rem 0px 0px;
	overflow-x: scroll;
	white-space: nowrap;
}

.gallery .item {
	display: inline-block;
	position: relative;
	height: 8rem;
	padding: 0px;
	margin: 0.5rem 0px 0.5rem 0.5rem;
}

.gallery img {
	height: 100%;
	width: auto;
}

div.panel .delete {
	background-color: #cc0000;
	color: #ffffff;
	text-transform: uppercase;
	font-size: 80%;
	border: none;
	border-radius: 0.2rem;
	padding: 0.2rem 0.5rem;
	cursor: pointer;
}

.gallery .delete {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
}


/* phone */
div.preview {
	font-size: 90%;
	text-align: left;
	top: 0px;
	position: relative;
	transition: top 0.2s;
}

div.preview p {
	text-transform: uppercase;
}

.phoneborder {
	box-sizing: border-box;
	padding: 3%;
	border-radius: 2rem;
	width: 100%;
	max-width: 20rem;
	display: block;
	border: 1px solid #333333;
	background-color: #333333;
}

iframe.previewframe {
	width: 100%;
	aspect-ratio: 0.6;
	border-top: 2px solid #000000;
	border-right: 2px solid #999999;
	border-bottom: 2px solid #999999;
	border-left: 2px solid #000000;
	border-radius: 3px;
	box-sizing: border-box;
	border-radius: 0.5rem;
}

.phonetop {
	margin: 2% auto 5% auto;
	width: 30%;
	background-color: #ffffff;
	border-radius: 0.4rem;
	height: 0.8rem;
}

.watermark {
	z-index: 100;
	position: absolute;
	top: 40%;
	left: 0px;
	right: 0px;
	color: #ffffff;
	opacity: 0.6;
	font-style: italic;
	font-weight: bold;
	font-size: 300%;
	text-align: center;
	text-shadow: 2px 2px 5px #000000;
	transform: rotate(-20deg);
	pointer-events: none;
}

.phonebottom {
	margin: 2% auto 3% auto;
	width: 2.6rem;
	background-color: #ffffff;
	border-radius: 1.3rem;
	height: 2.6rem;
}

/* footer */

section.purple {
	background-color: #f5f2f8;
	padding-bottom: 8rem;
}

div.bubble {
	position: absolute;
	left: 2rem;
	top: 0px;
	height: 10rem;
	width: 14rem;
	max-width: 100%;
	background-image: url('images/bubble.png');
	background-size: contain;
	background-position: top center;
	background-repeat: no-repeat;
	vertical-align: middle;
	text-align: center;
	padding: 3rem 1rem 0px 0px;
	font-weight: 600;
	color: #695a8b;
}

div.questions {
	position: relative;
	padding-left: 19rem;
	padding-top: 3rem;
}

@media (max-width: 850px) {
	div .qrdesign div.panel {
		display: block;
	}

	.tox-tinymce {
		height: 18rem !important;
	}

	#secregister div.flower img {
		position: static;
		display: block;
		float: right;
		width: 7rem;
		margin: 0px 0px 1rem 1rem;
	}

}

@media (max-width: 700px) {
	div.grid {
		display: block;
	}

	div.qr-image, .phoneborder {
		margin: 1rem auto 0px auto;
	}

	div.bubble {
		left: 0px;
	}

	div.questions {
		padding-left: 16rem;
	}

}

@media (max-width: 500px) {
	div.bubble {
		position: static;
		margin: 0px auto;
		height: 7rem;
	}

	div.questions {
		padding: 0px;
		text-align: center;
	}
}