@charset "UTF-8";

:root {
  /* 定义全局的颜色变量 */
  --dt-row-selected: 220, 53, 69;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 9, 10, 11;
  --dt-row-stripe: 0, 0, 0;
  --dt-row-hover: 0, 0, 0;
  --dt-column-ordering: 0, 0, 0;
  --dt-html-background: white;
}

/* 控制列的样式 */
.dataTable {
	/* & tbody{border-bottom:4px solid #eee} */
	& td.dt-control {
		text-align: center;
		cursor: pointer;

		&:before {
			display: inline-block;
			box-sizing: border-box;
			content: "";
			border-top: 5px solid transparent;
			border-left: 10px solid rgba(0, 0, 0, 0.5);
			border-bottom: 5px solid transparent;
			border-right: 0 solid transparent;
		}
	}

	& tr.dt-hasChild td.dt-control:before {
		border-top: 10px solid rgba(0, 0, 0, 0.5);
		border-left: 5px solid transparent;
		border-bottom: 0 solid transparent;
		border-right: 5px solid transparent;
	}

	/* 滚动条优化 */
	& thead > tr > th:active,
	& thead > tr > td:active {
		outline: none;
	}

	/* 排序箭头 */
	& thead > tr{
		& .dt-orderable-asc,
		& .dt-orderable-desc,
		& .dt-ordering-asc,
		& .dt-ordering-desc{
			position: relative; padding-right:20px;

			& span.dt-column-order{
				position:absolute; right:0; top:0; bottom:0; width:12px;

				&:before, &:after{position:absolute; display:block; left:0; opacity:0.125;line-height:9px; font-size:0.8em}
				&:before {bottom:50%; content:"▲"}
				&:after {top:50%; content:"▼"}
			}
		}

		& .dt-orderable-asc:hover, 
		& .dt-orderable-desc:hover {outline:2px solid rgba(0, 0, 0, 0.05); outline-offset:-2px}

		& .dt-ordering-asc span.dt-column-order:before, 
		& .dt-ordering-desc span.dt-column-order:after,
		& .dt-ordering-asc span.dt-column-order:before,
		& .dt-ordering-desc span.dt-column-order:after {opacity:0.6}
	}

	/* 空表格样式 */
	& :where(th, td).dt-empty {
		font-size: 1.2rem;
		text-align: center;
		font-weight: bold;
		color: rgb(var(--dt-row-selected));
	}

	/* 表头和表尾样式 */
	/* & > thead > tr > :where(th, td):active {
		outline: none;
	}
	& > tfoot > tr > :where(th, td) {
		border-top: 1px solid rgba(0, 0, 0, 0.3);
		padding: 10px 10px 6px;
	}
	& > tbody > tr {
		background-color: transparent;
		&:first-child > * {
			border-top: none;
		}
		&:last-child > * {
			border-bottom: none;
		}
	} */
}

/* 处理中指示器 */
.dt-processing {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	margin-left: -100px;
	margin-top: -22px;
	text-align: center;
	padding: 2px;
	z-index: 10;
	color: rgb(var(--dt-row-selected));

	& > div:last-child {
		width: 80px;
		height: 15px;
		margin: 1em auto;
		position: relative;

		& > div {
			position: absolute;
			top: 0;
			width: 1rem;
			height: 1rem;
			border-radius: 50%;
			background: rgb(var(--dt-row-selected));
			animation-timing-function: cubic-bezier(0, 1, 1, 0);

			&:nth-child(1){left:8px; animation: datas-loader-1 0.6s infinite}
			&:nth-child(2){left:8px; animation: datas-loader-2 0.6s infinite}
			&:nth-child(3){left:32px; animation: datas-loader-2 0.6s infinite}
			&:nth-child(4){left:56px; animation: datas-loader-3 0.6s infinite}
		}
	}
}

/* 动画定义 */
@keyframes datas-loader-1 {
	0% {transform: scale(0)}
	100% {transform: scale(1)}
}

@keyframes datas-loader-3 {
  0% {transform:scale(1)}
  100% {transform:scale(0)}
}

@keyframes datas-loader-2 {
  0% {transform: translate(0, 0)}
  100% {transform: translate(24px, 0)}
}

/* 滚动条内容隐藏 */
.dt-scroll-body {
  & thead tr, & tfoot tr {
    height: 0;

    & th, & td {
      height: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      border-top-width: 0 !important;
      border-bottom-width: 0 !important;

      & .dt-scroll-sizing {
        height: 0 !important;
        overflow: hidden !important;
      }
    }
  }
}

/* 容器样式 */
.dt-container {
	position:relative; clear:both;
	& .dt-layout-row {
		clear: both;
		width: 100%;
	}

	& dt-layout-cell{
		display: table-cell; vertical-align: middle; padding: 5px 0;
		&.dt-full {text-align:center}
		&.dt-start {text-align:left}
		&.dt-end {text-align: right}
		&:empty {display:none}
	}

	& .dt-input {border: 1px solid #80bdff; border-radius: 3px; padding: 5px; background-color: transparent; color: inherit;}
	& select.dt-input {padding: 4px}
	& .dt-search {
		display:flex; align-items:center;
		& .form-control{border-radius:1rem}
	}
}

/* 响应式设计 */
@media screen and (max-width: 767px){
  .dt-container .dt-layout-row, 
  .dt-container .dt-layout-cell {
    display: block;
  }

  .dt-container .dt-layout-cell.dt-full, 
  .dt-container .dt-layout-cell.dt-start, 
  .dt-container .dt-layout-cell.dt-end {
    text-align: center;
  }
}

@media screen and (max-width:640px){
  .dt-container .dt-length,
  .dt-container .dt-search {text-align:center}
  .dt-container .dt-search {margin-top:.5rem; margin-bottom:.5rem}
}

/* 分页样式 */
.dt-paging.paging_full_numbers {float:right}