@charset "UTF-8";

/********** .editable **********/

.prp-area.editable {
	--size: 16px;
	background: radial-gradient(circle, orange 50%, transparent 51%) no-repeat;
	background-size: var(--size) var(--size); /* 円のサイズを指定 */
	background-position: top calc(var(--size) / 2 * -1) left calc(var(--size) / 2 * -1); /* 円を右上に配置 */
}

.prp-area {
	height: 100%;
}
.prp-area .prp-view {
	padding: calc(var(--space-unit) / 2)!important;
	height: 100%;
}
.prp-area div.unit-pattern {
	display: flex;
	justify-content: space-between;
	height:100%!important;
}
.prp-area div.unit-pattern div.input-wrap {
	width: calc(100% - 4rem);
}
.prp-area div.unit-pattern div.unit-wrap {
	width: 4rem;
	vertical-align: bottom;
	position: relative;
}
.prp-area div.unit-pattern div.unit-wrap > div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

/********** .prp-form **********/
.prp-form {
	padding: calc(var(--space-unit) / 2 + 2px)!important;
	background-color: inherit;
	width: 100%;
	min-height: 100%;
	border-width: 0!important;
	text-align: left;
	outline: 0px #fff solid;
}
.prp-form.editing {
	background-color: orange;
	color:red;
}
.prp-form:focus {
	background-color: #fee;
}


.prp-area.INT input.prp-form,
.prp-area.DOUBLE input.prp-form {
	text-align: right;
}

select.prp-form {
	min-width: 60px;
}
select.prp-form option {
	border: 1px solid red;
}
textarea.prp-form {
	display: block;
	min-width: 100%;
	max-width: 100%;
	min-height: 140px;
}