.maolv_bj {                                           /* 蒙版背景 */
  position: fixed;                                    /* 固定定位 */
  left: 0;                                            /* 左边距   */
  top: 0;                                             /* 上边距   */
  width: 100%;                                        /* 宽度     */
  height: 100%;                                       /* 高度     */
  background: rgba(0, 0, 0, 0.5);                     /* 半透明背景色 */
  display: flex;                                      /* 弹性盒子布局 */
  justify-content: center;                            /* 子元素水平居中 */
  align-items: center;                                /* 子元素垂直居中 */
  z-index: 99999;                                     /* 堆叠顺序 */
}

/* 白色背景容器 */
.maolv_box {                                          /* 白色背景容器 */
  width: 80%;                                         /* 宽度     */
}

.maolv_box_content {                                  /* 内容样式 */
	font-size: 16px;                                     /* 字体大小 */
	text-align: center;                                  /* 文本居中 */
	color: #333;                                         /* 字体颜色 */
	line-height: 50px;                                   /* 行高设置 */
	padding: 5px 15px 5px 15px;                        /* 内边距   */
	background: linear-gradient(135deg,rgba(255, 255, 255, 0.93) 0%,rgba(255, 255, 255, 0.93) 100%); /* 半透渐变 */
}

.maolv_box_content_iframe {                           /* iframe内容样式 */
	text-align: center;                                  /* 文本居中 */
	padding: 0px 0px;                                    /* 内边距   */
	background-color: #FFFFFF;                           /* 背景颜色 */
}

.maolv_box_content_iframe iframe {                    /* iframe样式 */
    width: 100%;                                       /* 宽度     */
    height: 80%;                                       /* 高度     */
    border-style: none;                                /* 去除边框 */
    outline: none;                                     /* 确保没有轮廓线 */
}

/* 标题栏样式 ********************************************************/
.maolv_title {                                        /* 标题栏样式 */
  position: relative;                                 /* 相对定位 */
  width: 100%;                                        /* 宽度     */
  height: 50px;                                       /* 高度     */
  background: linear-gradient(135deg,rgba(71, 209, 135, 0.92) 0%,rgba(70, 157, 95, 0.92) 100%); /* 半透渐变 */
  display: flex;                                      /* 弹性盒子布局 */
  justify-content: center;                            /* 子元素水平居中 */
  align-items: center;                                /* 子元素垂直居中 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);        /* 文字阴影 */
  border-radius: 8px 8px 0 0;                         /* 圆角半径 */
}

/* 名称样式 */
.maolv_name {                                         /* 名称样式 */
  width: 100%;                                        /* 宽度     */
  margin-left:20px;;                                  /* 左边距   */
  font-size: 18px;                                    /* 字体大小 */
  color: #fff;                                        /* 字体颜色 */
}

/* 关闭按钮样式 */
.maolv_close {                                        /* 关闭按钮样式 */
  position: absolute;                                 /* 绝对定位 */
  right: 15px;                                        /* 右边距   */
  font-size: 25px;                                    /* 字体大小 */
  color: #fff;                                        /* 字体颜色 */
  cursor:pointer;                                     /* 鼠标指针样式 */
}

/* 确认按钮容器 ********************************************************/
.maolv_btn {                                          /* 确认按钮容器 */
  display: flex;                                      /* 弹性盒子布局 */
  align-items: center;                                /* 垂直居中 */
  justify-content: center;                            /* 水平居中 */
  border-top: 1px solid #DCDCDC;                      /* 上边框 */
  border-radius: 0 0 8px 8px;                         /* 圆角半径 */
  overflow: hidden                                    /* 隐藏溢出 */
}

/* 确认按钮1 */
.maolv_btn .button1 {                                 /* 确认按钮1 */
  flex: 1;                                            /* 平分宽度 */
  color: #999;                                        /* 文字颜色 */
  cursor: pointer;                                    /* 鼠标指针 */
  padding: 13px;                                      /* 内边距 */
  font-size: 18px;                                    /* 字体大小 */
  border-right: 1px solid #DCDCDC;                    /* 右边框 */
  background: linear-gradient(135deg,rgba(255, 255, 255, 0.92) 0%,rgba(255, 255, 255, 0.92) 100%); /* 半透渐变 */
  text-align: center;                                 /* 水平居中 */
}

/* 确认按钮2 */
.maolv_btn .button2 {                                 /* 确认按钮2 */
  flex: 1;                                            /* 平分宽度 */
  color: #00A3FF;                                     /* 文字颜色 */
  cursor: pointer;                                    /* 鼠标指针 */
  padding: 13px;                                      /* 内边距 */
  font-size: 18px;                                    /* 字体大小 */
  background: linear-gradient(135deg,rgba(255, 255, 255, 0.92) 0%,rgba(255, 255, 255, 0.92) 100%); /* 半透渐变 */
  text-align: center;                                 /* 水平居中 */
}

/* 定义名为fadeIn的关键帧动画 */
@keyframes fadeIn {                                    /* 淡入关键帧动画 */
  from {                                              /* 动画开始状态 */
    opacity: 0;                                       /* 完全透明 */
    transform: translate(-50%, -60%);                 /* 初始位置 */
  }
  to {                                                /* 动画结束状态 */
    opacity: 1;                                       /* 完全不透明 */
    transform: translate(-50%, -50%);                 /* 结束位置 */
  }
}

/* 提示框 ***************************************************************************/
.maolv_tishi {                                        /* 提示框 */
    position: fixed;                                  /* 固定定位 */
    z-index: 99999;                                   /* 最前显示 */
    top: 50%;                                         /* 上边距 */
    left: 50%;                                        /* 左边距 */
    border-radius: 8px;                               /* 圆角 */
    background: rgba(0, 0, 0, 0.75);                  /* 半透背景 */
    width: 50%;                                       /* 宽度 */
    height: 35px;                                     /* 高度 */
    overflow: hidden;                                 /* 溢出隐藏 */
    transform: translate(-50%, -50%);                 /* 居中变换 */
    animation: fadeIn 0.4s ease-out both;            /* 淡入效果 */
    
    /* 文字居中 */
    display: flex;                                    /* Flex布局 */
    justify-content: center;                          /* 水平居中 */
    align-items: center;                              /* 垂直居中 */
}

/* 提示文本样式 */
.maolv_tishi .maolv_tishi_text {                      /* 提示文本样式 */
    font-size: 15px;                                  /* 字体大小 */
    text-align: center;                               /* 文本居中 */
    color: #fff;                                      /* 白色文字 */
    line-height: 0.9rem;                              /* 行高设置 */
}

/***********************************************************************************/
/* 加载圈样式 */
.maolv_loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99998;
}

.maolv_loading_content {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  min-height: 50px;
}

.maolv_loading_text {
  margin-top: 10px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
}

/**********************************************************/
/* 齿轮加载 */ 

.spinner {
 width: 50px;
 height: 50px;
 display: grid;
 color: #ffffff;
 background: radial-gradient(farthest-side, currentColor calc(100% - 7px),#0000 calc(100% - 6px) 0);
 -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 15px),#000 calc(100% - 13px));
 border-radius: 50%;
 animation: spinner-sm4bhi 2s infinite linear;
}

.spinner::before,
.spinner::after {
 content: "";
 grid-area: 1/1;
 background: linear-gradient(currentColor 0 0) center,
          linear-gradient(currentColor 0 0) center;
 background-size: 100% 11px,11px 100%;
 background-repeat: no-repeat;
}

.spinner::after {
 transform: rotate(45deg);
}

@keyframes spinner-sm4bhi {
 100% {
  transform: rotate(1turn);
 }
}
/*************************************************************/
/* 加载圈 */ 

.loader {
  border: 4px solid rgba(255, 255, 255, .8);
  border-left-color: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  animation: spin89345 1s linear infinite;
}

@keyframes spin89345 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/**************************************************************/
/* From Uiverse.io by Bodyhc */ 
.custom-loader {
  width: 50px;
  height: 50px;
  display: grid;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side,#0000 40%,#000 41%);
  background: linear-gradient(0deg ,#ffffff 50%,#ffffff 0) center/4px 100%,
    linear-gradient(90deg,#ffffff 50%,#ffffff 0) center/100% 4px;
  background-repeat: no-repeat;
  animation: s3 1s infinite steps(12);
}

.custom-loader::before,
.custom-loader::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: inherit;
  opacity: 0.915;
  transform: rotate(30deg);
}

.custom-loader::after {
  opacity: 0.83;
  transform: rotate(60deg);
}

@keyframes s3 {
  100% {
    transform: rotate(1turn)
  }
}