@charset 'UTF-8';

.pn-option-setting .required {
	color: red;
}
.pn-option-setting input[type=textarea],
.pn-option-setting input[type=text],
.pn-option-setting input[type=url],
.pn-option-setting input[type=tel] {
	width: 75%;
}
.pn-option-setting {
	position: relative;
	box-sizing: border-box;
	margin: 5px 15px 2px;
	padding: 1em;
	padding-bottom: 100vh; /* for scroll */
	border: 1px solid #e5e5e5;
	background: #fff;
}
.pn-option-setting th:empty,
.pn-option-setting td:empty {
	display: none;
}
.pn-option-setting table {
	width: 100%;
	padding: 0;
	border: solid 1px #ccc;
	border-collapse: collapse;
}
.pn-option-setting th {
	padding: 1em;
	text-align: left;
	border: solid 1px #ccc;
}
.pn-option-setting td {
	padding: 1em;
	word-break: break-all;
	border: solid 1px #ccc;
}
.pn-option-setting .title {
	width: 45%;
}
.pn-option-setting .id {
	width: 5%;
}
.pn-option-setting .permalink {
	width: 45%;
}
.pn-option-setting .edit {
	width: 5%;
}
.pn-option-setting .not-linked {
	background-color: #ddd;
}
.pn-option-setting .color-description {
	margin-bottom: 30px;
}
#pn {
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	margin-bottom: 30px;
	border: 1px solid #ccc;
	background-color: #fff;
}
#pn-loader {
	position: absolute;
	top: calc(50vh - 10em);
	right: calc(50% - 5em);
	width: 10em;
	height: 10em;
	margin: 50px auto;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load3 1.4s infinite linear;
	animation: load3 1.4s infinite linear;
	text-indent: -9999em;
	border-radius: 50%;
	background: #696969;
	background: -moz-linear-gradient(left, #696969 10%, rgba(255, 255, 255, 0) 42%);
	background: -webkit-linear-gradient(left, #696969 10%, rgba(255, 255, 255, 0) 42%);
	background: -o-linear-gradient(left, #696969 10%, rgba(255, 255, 255, 0) 42%);
	background: -ms-linear-gradient(left, #696969 10%, rgba(255, 255, 255, 0) 42%);
	background: linear-gradient(to right, #696969 10%, rgba(255, 255, 255, 0) 42%);
	font-size: 10px;
}
#pn-loader:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 50%;
	content: '';
	border-radius: 100% 0 0 0;
	background: #696969;
}
#pn-loader:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 75%;
	height: 75%;
	margin: auto;
	content: '';
	border-radius: 50%;
	background: #fff;
}
@-webkit-keyframes load3 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes load3 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
