// * 设置 notification/message 层级在 loading 之上
.el-message,
.el-notification {
	z-index: 99999 !important;
}

// * 设置 el-alert 边框
.el-alert {
	border: 1px solid;
}

// * 当前页面最大化 css
.main-maximize {
	.aside-split,
	.el-aside,
	.el-header,
	.el-footer,
	.tabs-box {
		display: none !important;
	}
}

// * card 卡片样式
.card {
	box-sizing: border-box;
	padding: 20px;
	overflow-x: hidden;
	background-color: #092945;
	// background-color: var(--el-fill-color-blank);
	// border: 1px solid var(--el-border-color-light);
	border-radius: 8px;
	// box-shadow: 0 0 12px rgb(0 0 0 / 5%);
	// height: 56px;
}

// * 不需要 card 卡片样式（在组件内使用 proTable 会使用到）
.no-card {
	.card {
		padding: 0;
		background-color: transparent;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
	.table-search {
		padding: 18px 0 0 !important;
		margin-bottom: 0 !important;
	}
}

// * content-box (常用内容盒子)
.content-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	.text {
		margin: 20px 0 30px;
		font-size: 23px;
		font-weight: bold;
		color: var(--el-text-color-regular);
	}
	.el-descriptions {
		width: 100%;
		padding: 40px 0 0;
		.el-descriptions__title {
			font-size: 18px;
		}
		.el-descriptions__label {
			width: 200px;
		}
	}
}

// * main-box (树形表格 treeFilter 页面会使用，左右布局 flex)
.main-box {
	display: flex;
	width: 100%;
	height: 100%;
	.table-box {
		/* 这里减去的是 treeFilter 组件宽度 */
		width: calc(100% - 300px);
	}
}

// * table 表格页面样式
.table-box,
.table-main {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	position: relative;

	// table-search 表格搜索样式
	.table-search {
		padding: 12px 0 0px 36px;
		margin-bottom: 20px;
		border-radius: 8px;
		// background-color: pink;
		box-sizing: border-box;
		.el-form {
			.el-form-item__content > * {
				width: 160px;
			}
			.el-form-item__label {
				color: var(--el-color-primary);
			}
			.el-input__wrapper {
				background-color: transparent;
				box-shadow: 0 0 0 1px var(--el-color-primary, var(--el-color-primary)) inset;
			}
			.el-input__inner {
				color: white;
			}
			// 去除时间选择器上下 padding
			.el-range-editor.el-input__wrapper {
				padding: 0 10px;
			}
		}
		.operation {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 18px;

			// margin-left: 25px;
		}
	}

	// 表格 header 样式
	.table-header {
		.header-button-lf {
			float: left;
		}
		.header-button-ri {
			float: right;
		}
		.el-button {
			margin-bottom: 15px;
		}
	}

	// el-table 表格样式
	.el-table {
		background-color: transparent;
		flex: 1;

		// 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
		table {
			width: 100%;
		}
		tr {
			background-color: transparent;
		}
		td.el-table__cell {
			background-color: transparent !important;
			border-bottom: 0 !important;
		}
		th.el-table__cell {
			background-color: transparent;
			border-bottom: 0 !important;
		}
		td.el-table-fixed-column--right {
			background-color: transparent !important;
		}
		.el-table__header {
			// background-color: #09405f;
			background: rgba(11, 196, 240, 0.15);
			// background: url("@/assets/images/layoutImg/tableThead.png") no-repeat 0 0;
			// background-size: 100% 100%;
		}
		.el-table__header th {
			height: 60px;
			font-size: 14px;
			// font-weight: bold;
			color: var(--el-color-primary);
			// background: var(--el-fill-color-light);
		}
		.el-table__row:nth-child(2n) {
			height: 60px;
			font-size: 14px;
			background-color: #09314e;
			// background: url("@/assets/images/layoutImg/tableTwoN.png") no-repeat 0 0;
			// background-size: 100% 100%;
		}

		.el-table__row:nth-child(2n-1) {
			height: 60px;
			font-size: 14px;
			// background-color: transparent !important;
		}

		.el-table__row:hover {
			background-color: #09405f;
			// background: url("@/assets/images/layoutImg/TableHover.png") no-repeat 0 0;
			// background-size: 100% 100%;
		}
		.el-table__row {
			height: 60px;
			font-size: 14px;
			color: #c4c4c4;
		}

		// 设置 el-table 中 header 文字不换行，并省略
		.el-table__header .el-table__cell > .cell {
			white-space: nowrap;

			// height: 60px;
		}

		// 解决表格数据为空时样式不居中问题(仅在element-plus中)
		.el-table__empty-block {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			.table-empty {
				margin-top: 20px;
				line-height: 30px;
			}
		}

		// table 中 image 图片样式
		.table-image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
	}

	// 表格 pagination 样式
	.el-pagination {
		display: flex;
		justify-content: center;
		margin-top: 20px;
		.el-pagination__goto {
			color: var(--el-color-primary);
		}
		.el-pagination__classifier {
			color: var(--el-color-primary);
		}
		.el-input__wrapper {
			color: var(--el-color-primary);
			background-color: transparent;
			border: none;
			box-shadow: 0 0 0 1px var(--el-color-primary, var(--el-color-primary)) inset;
			height: 26px;
		}
		.el-input__inner {
			color: var(--el-color-primary);
		}
		.el-pager li {
			background-color: transparent;
			color: var(--el-color-primary);
			border: 1px solid var(--el-color-primary);
			height: 26px;
		}
		.el-pager li:active {
			color: var(--el-color-primary);
			border: none;
			height: 26px;
		}
		.el-pagination__total {
			color: var(--el-color-primary);
		}
		.btn-prev,
		.btn-next,
		.btn-prev:disabled,
		.btn-next:disabled {
			color: var(--el-color-primary);
			background-color: transparent;
			border: 1px solid var(--el-color-primary);
			height: 26px;
		}
	}
}

// 去除表格的横线
// .el-table td.el-table__cell,
// .el-table th.el-table__cell.is-leaf {
// 	border-bottom: none;
// }

// * el-table 组件大小切换样式
.el-table--small {
	.el-table__header th {
		height: 40px !important;
		font-size: 14px !important;
	}
	.el-table__row {
		height: 40px !important;
		font-size: 13px !important;
	}
}
.el-table--large {
	.el-table__header th {
		height: 50px !important;
		font-size: 16px !important;
	}
	.el-table__row {
		height: 50px !important;
		font-size: 15px !important;
	}
}

// * el-drawer 样式
.el-drawer {
	.el-drawer__header {
		padding: 15px 20px 14px;
		margin-bottom: 0;
		border-bottom: 1px solid var(--el-border-color-lighter);
		span {
			font-size: 17px;
			color: var(--el-text-color-primary) !important;
		}
	}
	.el-drawer__footer {
		border-top: 1px solid var(--el-border-color-lighter);
	}

	// drawer select 样式
	.el-select {
		width: 100%;
	}

	// drawer-form 中存在两列 form-item
	.drawer-multiColumn-form {
		display: flex;
		flex-wrap: wrap;
		.el-form-item {
			width: 47%;
			&:nth-child(2n-1) {
				margin-right: 5%;
			}
		}
	}
}

// * el-dialog 样式
.el-dialog {
	background-color: rgba(9, 64, 95, 0.85);
	border-radius: 8px;
	// .el-dialog__body {
	// 	min-height: 300px;
	// }

	// min-height: 50%;
	// 标记弹窗高度
	.el-dialog__header {
		padding: 15px 20px;
		margin: 0;

		// display: flex;
		// align-items: center;
		// border-bottom: 1px solid var(--el-border-color-lighter);
		.el-dialog__title {
			font-size: 20px;
			color: white;
		}
	}
	.el-dialog__footer {
		text-align: center;

		// margin: -36px 0;
	}
}
.hzStyle {
	background-color: #087ba4;
	border-color: #087ba4;
}
.hzCancelStyle {
	margin-right: 14%;
	background-color: transparent;
	border-color: #087ba4;
	color: #0a769a;
}
.addButtonStyle {
	color: #ffffff;
	background-color: #30ac7c;
}
.cancelButtonStyle {
	margin-right: 14%;
	background: rgb(0 0 0 / 10%);
}
.el-table__body tr:hover > td {
	// background-color: #008bff !important;
	background-color: rgb(0 139 255 / 10%) !important;
}
.el-input-group__append {
	padding: 0 8px;
	color: #ffffff;
	cursor: pointer;
	background-color: #008bff;

	// height: 38px;
}
.el-message-box__btns {
	display: flex;
	justify-content: center;
	.el-button--default {
		margin: 0 10%;
	}
}

// 步骤条的
// .el-step__line {
// 	background-color: #3e7bfa;
// }
.el-step__icon.is-text {
	// background-color: #3E7BFA;
	border-radius: 0;

	// color: #3e7bfa;
	// border: 2px solid #3e7bfa;
}

// .el-step__icon {
// 	// background-color: #3E7BFA;
// 	border-radius: 0;
// 	color: pink;
// 	// border: 2px solid #3e7bfa;
// }
.el-step__title.is-process {
	color: #3e7bfa;
}
.el-steps--horizontal {
	margin: 0 0 50px;
}
.el-step__head.is-process {
	color: #3e7bfa;
	border-color: #3e7bfa;
}
.el-input-number {
	width: 100%;
}
.el-input-select {
	width: 100%;
}

// 下载的文件名宽度
.el-upload-list__item-file-name {
	width: 100%;
}
// 按钮的字体大小
.el-button {
	font-size: 12px;
}
// .el-form-item--default{
// 	display: flex;
// 	align-items: center;
// }

// card去除阴影和边框
.el-card {
	border: none;
}
.el-card.is-always-shadow {
	box-shadow: none;
}

// 单选框
.el-radio {
	.el-radio__inner {
		width: 18px !important;
		height: 18px !important;
		background-color: transparent;
	}
	.el-radio__input.is-checked .el-radio__inner {
		width: 18px !important;
		height: 18px !important;
		background-color: transparent;
	}
	.el-radio__inner::after {
		width: 13px;
		height: 13px;
		background: #3f6ab0;
		border-radius: 50%;
	}
}
// 表单
.el-form {
	.el-form-item__label {
		color: var(--el-color-primary);
	}
}