/** 通用 **/
* {
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
	scrollbar-width: thin;
}

.dark {
    * {
        scrollbar-color: auto;
    }
}

.clear {
	clear: both;
}

pre {
	white-space: pre-wrap;
}

a.disabled, a.disabled:hover, a.disabled:active, span.disabled {
	color: #ccc !important;
}

a.enabled, span.enabled, span.green {
	@apply text-emerald-500 dark:text-emerald-600;
}

span.grey, label.grey, p.grey, span.gray, label.gray, p.gray {
    @apply text-gray-500 dark:text-gray-400;
}

p.grey {
	margin-top: 0.8em;
}

span.red, pre.red {
	@apply text-red-400 dark:text-red-500;
}

span.blue {
	color: var(--p-blue-500);
}

span.orange {
    @apply text-orange-400 dark:text-orange-500;
}

pre:not(.CodeMirror-line) {
	font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
}

tbody {
	background: transparent;
}

.table-box {
	margin-top: 1em;
	overflow-x: auto;
}

.table-box::-webkit-scrollbar {
	height: 6px;
}

.table.width30 {
	width: 30em !important;
}

.table.width35 {
	width: 35em !important;
}

.table.width40 {
	width: 40em !important;
}

.table.width1024 {
	width: 1024px !important;
}

.table tr.active td {
	background: rgba(0, 0, 0, 0.01) !important;
}

.truncate {
	white-space: nowrap;
	-ms-text-overflow: ellipsis;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.margin, p.margin {
	margin-top: 1em;
}

.opacity-mask {
	opacity: 0.3;
}

/** 操作按钮容器 **/
.op.one {
	width: 4em;
}

.op.two {
	width: 7.4em;
}

.op.three {
	width: 10em;
}

.op.four {
	width: 13em;
}

.p-datatable {
	.op.one {
		min-width: 4em;
	}

	.op.two {
		min-width: 7.4em;
	}

	.op.three {
		min-width: 10em;
	}

	.op.four {
		min-width: 13em;
	}
}

/** body **/
@keyframes blink {
	from {
		opacity: 0.1;
	}
	to {
		opacity: 0.8;
	}
}

@keyframes rotation {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

.blink {
	animation: blink 2s infinite;
}

*:not(:hover) span.rotate {
	animation: rotation 3s infinite;
}

/** 右侧主操作区 **/
.main {
    position: absolute;
    left: 14.2em;
    top: 3.8em;
    right: 0em;
    bottom: 1em;
    padding-top: 1em;
    padding-bottom: 4em;
    padding-right: 1em;
    overflow-y: auto;
}

.main table td.title {
	width: 10em;
	vertical-align: top;
}

.main table td.middle-title {
	width: 14em;
}

.p-dialog-content {
	table td.title {
		width: 10em;
		vertical-align: top;
	}

	table td {
		vertical-align: top;
	}
}

.main table td {
	vertical-align: top;
}

.main table td.color-border {
	border-left: 1px var(--p-primary-500) solid !important;
}

.main table td.vertical-top {
	vertical-align: top;
}

.main table td.vertical-middle {
	vertical-align: middle;
}

.main table td[colspan="2"] a {
	font-weight: normal;
}

.main table td em {
	font-weight: normal;
	font-style: normal;
	font-size: 0.9em;
}


.main table td em.grey {
	color: grey;
}

.main td span.small {
	font-size: 0.8em;
}

.main-menu::-webkit-scrollbar {
	width: 4px;
}

.main .child-box {
	/* padding: 30px; */
	/* min-height: calc(100vh - 100px); */
	/* background-color: white; */
}

/** 右侧文本子菜单 **/
.text.menu {
	overflow-x: auto;
}

.text.menu::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

@media screen and (max-width: 512px) {
	#footer-outer-box .qrcode {
		margin-left: 0;
		left: 3.5em;
	}
}

/** column **/
@media screen and (max-width: 512px) {
	.column:not(.one) {
		width: 100% !important;
	}
}

/** var **/
span.olive, var.olive {
	color: var(--p-teal-500) !important;
}

span.dash {
	border-bottom: 1px dashed grey;
}

span.hover:hover {
	background: #eee;
}

var.normal {
	font-style: normal;
}

/** td **/
td {
	word-break: break-all;
}

/** 表格 **/
.scroll-box {
	overflow-y: auto;
}

.scroll-box::-webkit-scrollbar {
	width: 4px;
}