@charset "UTF-8";
.loading-panel {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 布局方式改为列模式 */
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}

.logo-box {
  /* 向上偏移100个像素 */
  margin-top: -100px;
  /* 增加一个渐显动画 */
  /* 动画名称为show_logo */
  /* 持续时间2秒 */
  /* 动画线性结束放慢 */
  /* 延迟时间为0秒 */
  /* 动画循环执行1次 */
  /* 结束停止在最终帧 */
  /* 统一使用show动画 */
  animation: show 2s ease-out 0s 1 forwards;
  font-size: 100px;
}
.logo-box .logo-1 {
  color: #3e5362;
  font-weight: 500;
}
.logo-box .logo-2 {
  color: #eba209;
  font-weight: 900;
}

.logo-loading {
  font-weight: bold;
  position: relative;
  font-size: 100px;
  color: #544E58;
  /* 默认状态为透明度0，不显示 */
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 增加动画，显示名字 */
  /* 动画名称show_name */
  /* 持续2秒 */
  /* 线性开始结束放慢 */
  /* 延迟0.5秒 */
  /* 执行1次 */
  /* 结束时停在最后一帧 */
  /* 统一使用show动画 */
  animation: show 2s ease-in-out 0.5s 1 forwards;
}

/* 创建动画透明度从开始0到结束1  */
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.logo-loading::before {
  position: absolute;
  /* 这里必须是Unicode编码 */
  /* 注意：转换完毕去掉\后面的U */
  content: "上海职学科技有限公司";
  /* 颜色改为透明让背景色显示出来 */
  color: transparent;
  /* 使用linear-gradient函数生成一个渐变“图片”做背景 */
  /* 渐变颜色随便个人喜好 */
  background-image: linear-gradient(to right, #F8F8FF, #F8F8FF, #F8F8FF, #F8F8FF, #F8F8FF, #F8F8FF, #F8F8FF, #F8F8FF, #F8F8FF, #F8F8FF, #F8F8FF, #F8F8FF, #F8F8FF);
  /* 这个谷歌浏览器不起作用 */
  background-clip: text;
  /* 谷歌浏览器适配 */
  -webkit-background-clip: text;
  /* 制作一个斜矩形遮罩 */
  /* 使用polygon方法 */
  /* 矩形需要定义四个角的坐标，顺时针方向定义 */
  /* 分别为左上、右上、右下、左下 */
  /* 位置以百分比为单位 */
  /* 因为要做动画，所有先将遮罩层移除当前可视区域 */
  clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
  /* 增加动画 */
  /* 动画名称light */
  /* 持续时间2秒 */
  /* 延迟0秒执行 */
  /* 直接方式循环 */
  /* 延迟2秒执行等待显示 */
  animation: light 2s 2s infinite;
}

/* 初始与结束保持一致 */
/* 中间为最右侧 */
@keyframes light {
  0% {
    clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
  }
  50% {
    clip-path: polygon(100% 0%, 120% 0%, 110% 100%, 90% 100%);
  }
  100% {
    clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
  }
}
.ant-descriptions-item-content {
  white-space: pre-wrap;
}

.ant-tabs-content-holder {
  overflow-y: auto;
}

.ant-spin-nested-loading > div > .ant-spin {
  max-height: none;
}

.ant-page-header-heading-extra {
  flex: 1;
  text-align: right;
}

#blazor-error-ui {
  display: none;
}

#components-reconnect-modal {
  position: fixed;
  z-index: 3333;
  background-color: rgba(0, 0, 0, 0.075);
  display: none;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #21d7b9;
}
#components-reconnect-modal.components-reconnect-show {
  display: flex;
}
#components-reconnect-modal.components-reconnect-hide {
  display: flex;
}
#components-reconnect-modal.components-reconnect-failed {
  display: flex;
}
#components-reconnect-modal.components-reconnect-rejected {
  display: flex;
}

.validation-message {
  color: #D73021;
  margin-top: 0.5rem;
}