/* 全局变量 */
:root {
  /* 颜色 */
  --color-primary: #00e9ff;
  --color-default: #1e3b73;
  --color-title: #FFFF00;
  --color-white: #FFF;
  --color-black: #000;
  --color-success: #5BBA69; /* 成功&正确 */
  --color-warning: #FFB403; /* 警告 */
  --color-danger: #FF5757; /* 危险 */
  --color-error: #FF001F; /* 失败&错误 */

  /* 背景透明色 */
  --bg-opacity1: rgba(0, 233, 255, 0.1);
  --bg-opacity2: rgba(0, 233, 255, 0.2);
  --bg-opacity3: rgba(0, 233, 255, 0.3);
  --bg-opacity4: rgba(0, 233, 255, 0.4);
  --bg-opacity5: rgba(0, 233, 255, 0.5);
  --bg-opacity6: rgba(0, 233, 255, 0.6);
  --bg-opacity7: rgba(0, 233, 255, 0.7);
  --bg-opacity8: rgba(0, 233, 255, 0.8);
  --bg-opacity9: rgba(0, 233, 255, 0.9);

  /* 宽高 */
  --width-one: 1480px; /* 页面最大宽 */
  --width-two: 1280px;
}

/*  */
select {
  height: 40px;
  border-radius: 4px;
  color: #fff;
  background-color: rgba(221, 255, 253, 0.2);
  border-radius: 4px;
  font-size: 12px;
  padding: 0 15px !important;
  border: 1px solid transparent;
  box-sizing: border-box;
}

select:hover,
select:focus {
  border-color: var(--bg-opacity6);
}

select option {
  color: #000;
}

.scrollBox {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding-right: 8px;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 6px;
  background-color: #518ebf;
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: rgba(255, 255, 255, 0.1);
}

/* ------------- 按钮 ------------- */
body .layui-btn {
  background-color: rgba(221, 255, 253, 0.15) !important;
  box-shadow: inset 0px 0px 12px 2px var(--bg-opacity8);
  border-radius: 4px;
  font-size: 12px;
  text-shadow: 0px 0px 1px #111;
  border: 1px solid transparent !important;
  box-sizing: border-box;
  color: #fff !important;
  line-height: 1;
  cursor: pointer;
}

body .layui-btn:hover {
  border-color: #fff !important;
  background-color: rgba(221, 255, 253, 0.2) !important;
}

/* 禁用按钮 */
body .layui-btn.layui-btn-disabled,
body .layui-btn[disabled] {
  box-shadow: inset 0px 0px 5px 1px rgba(221, 255, 253, 0.5);
  cursor: not-allowed;
  color: #d2d2d2 !important;
  border-color: transparent !important;
}

/* 白色按钮 */
body .layui-btn-primary {
  box-shadow: inset 0px 0px 12px 2px rgba(221, 255, 253, 0.8);
}

/* 绿色按钮 */
body .layui-btn-normal {
  box-shadow: inset 0px 0px 12px 2px rgba(183, 255, 0, 0.8);
}

/* 黄色按钮 */
body .layui-btn-warm {
  box-shadow: inset 0px 0px 12px 3px rgba(255, 212, 16, 0.8);
}

/* 红色按钮 */
body .layui-btn-danger {
  box-shadow: inset 0px 0px 12px 4px rgba(255, 0, 0, 0.8);
}


/* DIV-loadign */
div[loading] {
  height: 100%;
}

div[loading=true]:before,
div[loading=true]:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

div[loading=true]:before {
  /* background-color: rgba(71, 130, 202, 0.5); */
  background-color: rgba(6, 76, 146, 0.7);
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 70px -10px var(--bg-opacity4);
}

div[loading=true]:after {
  content: "数据加载中...";
  animation: layui-fadeout 1s linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  top: 50%;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 1;
  text-align: center;
  font-size: 15px;
  margin-top: -25px;
  color: var(--color-primary);
  text-shadow: 0px 0px 1px #000;
  letter-spacing: 4px;
}

/* 渐变色标题 */
.lg-title {
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
  color: #FFFFFF !important;
  text-shadow: 0px 2px 3px rgb(4 12 49 / 3%) !important;
  background: linear-gradient(0deg, #77E7FF 0%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1 !important;
}

.lg-title.f {
  background: linear-gradient(0deg, #FFFFFF 0%, #77E7FF 100%) !important;
  -webkit-background-clip: text !important;
}

/**
 * -------------------------------------------------------
 * 按钮 - 四边形
 * -------------------------------------------------------
 */
.btn-sbx {
  min-width: 60px;
  min-height: 30px;
  position: relative;
  color: #88EAFF;
  padding: 0 20px;
  margin: 0 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: baseline;
}

.btn-sbx.hit {
  pointer-events: none;
}

.btn-sbx .icon {
  margin-right: 10px;
}

.btn-sbx:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  border-radius: 2px;
  transform: skewX(-20deg);
  box-shadow: inset 0px 0px 5px 0px rgba(221, 255, 253, 0.4);
  background-color: rgba(11, 87, 168, 0.1);
  border: 1px solid transparent;
  transition: all 0.1s ease-in;
}

.btn-sbx.hit:after,
.btn-sbx:hover:after {
  border-color: var(--bg-opacity9);
  box-shadow: inset 0px 0px 9px 2px var(--bg-opacity9);
}

.btn-sbx.f:after {
  transform: skewX(20deg);
}


/**
 * -------------------------------------------------------
 * 带角标div
 * -------------------------------------------------------
 */
[class*=style_inner] {
  height: 40px;
  line-height: 40px;
  position: relative;
  display: inline-block;
  padding: 0 18px;
  color: #eee;
  text-shadow: 0px 0px 1px #111;
  letter-spacing: 2px;
  cursor: pointer;
  box-sizing: border-box;
  z-index: 0;
}

[class*=style_inner]:hover:before {
  opacity: 1 !important;
}

[class*=style_inner]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, transparent 12px, rgba(255, 255, 255, 0.6));
  z-index: -2;
  border-radius: 1px;
  transition: all 0.1s ease-in;
  opacity: 0.8;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

[class*=style_inner]:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  border-style: solid;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent #e2e2e2;
  z-index: -1;
  opacity: 0.85;
}

[class*=style_inner].f:before {
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 12px, transparent);
}

.style_inner1:before {
  background: linear-gradient(-45deg, transparent 12px, var(--bg-opacity6));
}

.style_inner2:before {
  background: linear-gradient(-45deg, transparent 12px, rgba(255, 51, 11, 0.6));
}

.style_inner1.f:before {
  background: linear-gradient(-45deg, var(--bg-opacity6) 12px, transparent);
}

.style_inner2.f:before {
  background: linear-gradient(-45deg, rgba(255, 51, 11, 0.6) 12px, transparent);
}

[class*=style_inner].f:after {
  top: 0;
  left: 0;
  bottom: auto;
  right: auto;
  border-width: 0 0 8px 8px;
  border-color: transparent #e2e2e2 transparent;
}

[class*=style_inner] input {
  display: block;
  width: 100%;
  height: 39px;
  box-sizing: border-box;
  border: 0;
  background-color: transparent;
  color: #fff;
  text-shadow: 0px 0px 1px #111;
}

[class*=style_inner] input::placeholder {
  color: #fff;
  opacity: 0.5;
}

[class*=style_inner][disabled] {
  opacity: 0.8 !important;
  cursor: not-allowed;
}

[class*=style_inner][disabled]:before {
  background: linear-gradient(-45deg, transparent 12px, rgba(255, 255, 255, 0.7)) !important;
}


/**
 * -------------------------------------------------------
 * 带科技感八边形div
 * -------------------------------------------------------
 */
.style_div1 {
  width: 100%;
  position: relative;
  padding: 3.5% 0;
}

.style_div1 .content:before,
.style_div1 .content:after {
  content: "";
  position: absolute;
  left: -2px;
  box-sizing: border-box;
  width: calc(100% + 4px);
  height: 0px;
  padding-bottom: 3.5%;
  overflow: hidden;
  background: url(../images/bBox.png) no-repeat 0 center;
  background-size: 100% auto;
  pointer-events: none;
}

.style_div1 .content:before {
  bottom: 100%;
}

.style_div1 .content:after {
  top: 100%;
  transform: rotate(180deg);
}

.style_div1 .content {
  position: relative;
  min-height: 70px;
  border-width: 0 2px 0px 2px;
  padding: 12px 22px;
  border-color: #5fc6e5;
  border-style: solid;
  background-color: rgba(88, 226, 254, 0.15);
  color: #fff;
  box-sizing: border-box;
}

/* 带标题的 */
.style_div1 .title,
.gt-title {
  background: url(../img/home_tips_title.png) no-repeat;
  background-size: 100% auto;
  width: 160px;
  height: 33px;
  text-align: center;
  position: absolute;
  top: -40px;
  left: 50%;
  margin-left: -80px;
}

.style_div1 .title span,
.gt-title span {
  line-height: 31px;
  font-size: 15px;
}

.gt-title {
  top: -16px;
}

/**
 * -------------------------------------------------------
 * 带四个角的div
 * -------------------------------------------------------
 */
.style_div2 {
  position: relative;
  box-shadow: inset 0px 0px 15px 2px var(--bg-opacity6);
}

.style_div2 .content {
  padding: 17px;
  min-height: 20px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.style_div2:before,
.style_div2:after,
.style_div2 .content:before,
.style_div2 .content:after {
  content: '';
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--color-primary);
  border-style: solid;
  z-index: 10;
}

.style_div2:before {
  top: -1px;
  left: -1px;
  border-width: 3px 0 0 3px;
}

.style_div2:after {
  top: -1px;
  right: -1px;
  border-width: 3px 3px 0 0;
}

.style_div2 .content:before {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 3px 3px;
}

.style_div2 .content:after {
  bottom: -1px;
  right: -1px;
  border-width: 0 3px 3px 0;
}


/**
 * -------------------------------------------------------
 * 数据库列表
 * -------------------------------------------------------
 */
.DB_Data {
  padding-right: 5px;
  color: #FFFFFF;
}

.DB_Data::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px;
  height: 5px;
}

.DB_Data .head-text {
  height: 30px;
  font-size: 16px;
  color: var(--color-title);
  display: flex;
  align-items: center;
}

.DB_Data .icon {
  width: 7px;
  height: 7px;
  background-color: var(--color-primary);
  margin-right: 10px;
}

.DB_Data .head-childrens li {
  height: 30px;
  padding-left: 26px;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.DB_Data .head-childrens li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: auto;
}

.DB_Data .head-childrens li:hover span {
  color: var(--color-primary);
}

.DB_Data .head-childrens li.active span {
  color: #ff7474 !important;
}

.DB_Data .head-childrens li span i {
  font-size: 12px;
  font-style: normal;
}

.DB_Data .head-childrens li.active:before {
  font-family: element-icons !important;
  content: "\e791";
  position: absolute;
  left: 8px;
  color: #ff7474 !important;
  font-size: 14px;
}

.DB_Data .head-childrens li .delBtn {
  position: relative;
  z-index: 1;
  padding: 5px;
}

.DB_Data .head-childrens li .delBtn:hover {
  color: red !important;
}

.DB_Data .head-childrens li .el-icon-finished {
  position: relative;
  z-index: 1;
  padding-right: 5px;
  color: var(--color-title);
}

.DB_Data .head-childrens li .el-icon-finished:hover {
  color: var(--color-primary) !important;
}

.page-title {
  margin-bottom: 30px;
}

.page-title h2 {
  padding-left: 30px;
  height: 40px;
  line-height: 40px;
  background: url('../images/licai-title.png') no-repeat;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
}

.page-sub-title {
  margin-bottom: 10px;
}

.page-sub-title h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}

.page-main-title {
  margin-bottom: 10px;
  padding-left: 16px;
  height: 40px;
  line-height: 40px;
  background: url('../images/title.png') no-repeat;
  font-size: 16px;
}

.topTip {
  padding: 14px 10px;
  background: url('../images/shuomingkuang.png') no-repeat;
  background-size: 100% 100%;
}

.table-box table {
  width: 80%;
  min-width: 80%;
  border: 1px solid #1ED7FF;
}

.el-message-box__content {
  word-break: break-all !important;
}