@charset "utf-8";
/* 头部区域 */
.header {
  background-color: #fff;
  padding: 10px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border-bottom: 1px solid #f0f0f0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo {
    height: 70px;
	transition: all 0.5s ease;
}

.logo-group:hover .logo{
	box-shadow: 1px 5px 10px #4e81d1;
    border-radius: 12px;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.main-title {
  font-size: 1.45rem;
  font-weight: bold;
  color: #333;
  letter-spacing: 5px;
}

.sub-title {
  font-size: 1.25rem;
  color: #333;
  font-weight: bold;
}

.divider {
  color: #ddd;
  font-size: 20px;
  padding: 0 10px;
}

.divider-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #ca4246;
  white-space: nowrap;
}

/* 彩虹渐变文字效果 - 初始状态 */
.gradient-text {
  /* 回退颜色 */
  /*background-color: #CA4246;*/
  /*color: #333;*/ /* 初始文字颜色 */
  
  /* 设置过渡效果 */
  transition: all 0.5s ease;
}

/* 当鼠标悬停在logo-group上时，显示渐变和动画 */
.gradient-text {
  /* 创建渐变 */
  background-image: linear-gradient(45deg, #CA4246 16.666%, #E16541 16.666%, #E16541 33.333%, #F18F43 33.333%, #F18F43 50%, #5191d5 50%, #317eb7 66.666%, #476098 66.666%, #476098 83.333%, #A7489B 83.333%);
  /*linear-gradient(
    45deg,
    #CA4246 16.666%, 
    #E16541 16.666%, 
    #E16541 33.333%, 
    #F18F43 33.333%, 
    #F18F43 50%, 
    #8B9862 50%, 
    #8B9862 66.666%, 
    #476098 66.666%, 
    #476098 83.333%, 
    #A7489B 83.333%);*/
  
  /* 设置背景大小和重复属性 */
  background-size: 100%;
  background-repeat: repeat;

  /* 使用文本作为背景的遮罩 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  background-clip: text;
  text-fill-color: transparent;
  
  /* 初始动画 */
  animation: rainbow-text-simple-animation-rev 0.75s ease forwards;
}

/* 悬停时的动画效果 */
.logo-group:hover .gradient-text{
  animation: rainbow-text-simple-animation 0.5s ease-in forwards;
}

/* 动画定义 */
@keyframes rainbow-text-simple-animation-rev {
  0% {
    background-size: 650%;
  }
  40% {
    background-size: 650%;
  }
  100% {
    background-size: 100%;
  }
}

@keyframes rainbow-text-simple-animation {
  0% {
    background-size: 100%;
  }
  80% {
    background-size: 650%;
  }
  100% {
    background-size: 650%;
  }
}

.hotline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 20px;
  width: 25%;
}

.hotline-desc {
  font-size: 0.9rem;
  color: #333;
}

.hotline-number {
  font-size: 1.3rem;
  font-weight: bold;
  color: #e74c3c;
  letter-spacing: 1px;
}

/* 主导航 */
.main-navigation {
  background: linear-gradient(180deg, rgb(49 119 205) 0%, rgb(9 164 229) 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-item {
  padding: 0 15px;
}

.nav-item-icon {
  padding: 0px;
}

.nav-link {
  color: white !important;
  font-weight: 500;
  padding: 10px 0 !important;
  position: relative;
  transition: all 0.3s;
  font-size: 1.1rem;
}

.nav-link:hover {
  color: rgba(255,255,255,0.9) !important;
}

.nav-link:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: white;
  transition: width 0.3s;
}

.nav-link:hover:after {
  width: 100%;
}

.hovernone{
	pointer-events: none;
}

/*登录*/
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 1000;
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 94%;
    background: transparent; /* 改为透明背景 */
    transform: translate(-50%, -50%);
    perspective: 1000px; /* 添加透视 */
    z-index: 1001;
	max-width: 380px;
}

.popup-content {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    backface-visibility: hidden; /* 隐藏背面 */
}

.member-login, .member-register {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: white; /* 内容背景设为白色 */
}

.member-login {
    transform: rotateY(0deg);
}

.member-register {
    transform: rotateY(180deg);
}

.popup.flipped .member-login {
    transform: rotateY(180deg);
}

.popup.flipped .member-register {
    transform: rotateY(360deg);
}

.member-form-container{
	text-align: left;
}

.member-login, .member-register {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: white;
	border-radius: 10px;
}

.member-login {
	transform: rotateY(0deg);
}

.member-register {
	transform: rotateY(180deg);
}

/* 主要内容区 */
.main-content {
  margin: 1rem auto;
}

.card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.05);
  margin-bottom: 30px;
  overflow: hidden;
}

/*.card-header {
  background-color: white;
  border-bottom: 1px solid var(--border-color);
  padding: 15px;
  font-weight: bold;
  font-size: 18px;
  color: var(--primary-color);
}*/

.card-header strong {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 5px 10px;
}
.card-header{
	/*background: linear-gradient(to right, #bedfff, #f9f9f9);*/
	background: linear-gradient(to right, #328bf5, #09a3e436);
    /*border-radius: 8px;*/
	display: flex;
	align-items: center;
	padding: 10px;
	width: 100%;
}
.card-header i.fa-list-alt {
  /*color: #0d5dc3f2;*/
  color: #fffffff2;
  margin-right: 10px;
  font-size: 1.25rem;
  /*background: rgb(40 76 180 / 16%);*/
  background: rgb(255 255 255 / 30%);
  border-radius: 5px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  padding-left: 1px;
}

/* 新增图标容器样式 */
.card-header .icon-group {
  margin-left: auto;
  display: flex;
  gap: 8px; /* 控制两个图标之间的间距 */
}

.card-header .fa-sync-alt,
.card-header .fa-arrow-left,
.card-header .fa-home,
.card-header .fa-trash-alt,
.card-header .fa-filter {
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
}

.card-header .fa-sync-alt {
  color: #166bb7;
  background: rgb(5 45 97 / 10%);
}

.card-header .fa-home,
.card-header .fa-arrow-left{
  color: #166bb7;
  background: rgb(5 45 97 / 10%);
}

.card-header .fa-trash-alt {
  color: #166bb7;
  background: rgb(5 45 97 / 10%);
}

.card-header .fa-filter {
  color: #1e43b1f2;
  background: rgb(40 76 180 / 16%);
}

.card-header span {
  font-weight: 600;
  /*color: #454545;*/
  color: #fff;
  font-size: 1.1rem;
}

/* 旋转效果 */
.card-header .list-filter-icon {
  transform: rotate(0deg);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.card-header .list-filter-icon.rotated {
  transform: rotate(180deg);
}

@keyframes shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  75%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 0.5s;
}

@keyframes throwAway {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  30% {
    transform: rotate(-20deg) scale(1.1);
  }
  60% {
    transform: rotate(10deg) translateY(-10px);
  }
  100% {
    transform: translateY(100px) rotate(45deg) scale(0.5);
    opacity: 0;
  }
}

.throw-away {
  animation: throwAway 0.8s ease-in-out forwards;
}

/* 悬停效果 */
.card-header .fa-sync-alt:hover,
.card-header .fa-home:hover,
.card-header .fa-arrow-left:hover,
.card-header .fa-trash-alt:hover,
.card-header .fa-filter:hover {
  transform: scale(1.1);
}

.card-header .fa-sync-alt:active,
.card-header .fa-home:active,
.card-header .fa-arrow-left:active,
.card-header .fa-trash-alt:active,
.card-header .fa-filter:active {
  transform: scale(0.95);
}

@keyframes list-refresh-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  /*100% { transform: rotate(360deg) scale(1); }*/
}

.list-refresh-spin-animation {
  animation: list-refresh-spin 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* 工单列表 */
.work-order-list {
  background-color: white;
}

.list-header {
  background-color: var(--light-gray);
  font-weight: bold;
}

.list-item {
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s;
}

.list-item:hover {
  background-color: rgba(55, 158, 241, 0.05);
}

.order-type {
  color: var(--accent-color);
  margin-right: 5px;
}

.status-received {
  background-color: #e3f2fd;
  color: #1976d2;
}

.status-completed {
  background-color: #e8f5e9;
  color: #388e3c;
}

.preload-asset {
	position: absolute;
	width: 1px;
	height: 1px;
	visibility: hidden;
}

/* router load 开始 */
.route-content {
  position: relative;
  min-height: 50vh;

}

.route-transition {

  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
}

.route-out {
  opacity: 0;
  /*transform: translateX(-20px);*/
}

.route-in {
  opacity: 0;
  /*transform: translateX(100%);*/
  animation: templateFadeIn 0.5s ease forwards;
}

.notfound-in {
  opacity: 1;
  /*transform: translateX(100%);*/
  animation: templateFadeIn 0.5s ease forwards;
}

/*.route-transition {
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.route-out {
  transition: all 0.3s ease-out;
}

.route-in {
  animation: slideIn 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}*/

.route-error {
  opacity: 0;
  animation: templateFadeIn 0.5s ease forwards;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes templateFadeIn {
  to {
    opacity: 1;
  }
}

.loading-indicator {
  position: absolute;  /* 相对于 .route-content 定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8); /* 半透明遮罩 */
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 10;        /* 确保遮盖内容 */
  border-radius: 8px; /* 可选：匹配父容器圆角 */
  z-index: 1000;

}
/* load 结束 */

/* 右侧按钮区 */
.sidebar-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.menus {
	position: relative;
	overflow: hidden;
	padding: 15px 15px;
	background: radial-gradient(circle, rgb(49 119 205) 0%, rgb(9 164 229) 100%);
	border-radius: 20px;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
	height: 195px;
	box-shadow: 1px 5px 15px #d2daf5;
}

/* 用户信息样式 */
.user-info {
	display: flex;
	align-items: center;
	padding: 10px;
	margin-bottom: 20px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin-bottom:10px;
}

.user-info .avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 15px;
}

.user-info .avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.user-details {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
}

.username {
	padding-top: 3px;
	font-weight: bold;
	color: var(--primary-color);
	margin-bottom: 3px;
	font-size: 1.1rem;
	text-align: center;
	margin: 0 auto;
}

.logout {
    flex: 0 0 auto;
    padding: 5px 10px;
    border: 1px solid #1b74d3;
    font-size: 0.8rem;
    font-weight: bold;
    color: #3043d7;
    border-radius: 4px;
    display: none;
}

.logout a {
    color: #1b59cf;
    text-decoration: none;
    font-size: 0.8rem;
    /* 添加过渡效果让变化更平滑 */
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* 鼠标悬停效果 */
.logout a:hover {
    text-decoration: underline; /* 添加下划线 */
}

/* 鼠标点击效果 */
.logout a:active {
    transform: translateY(1px); /* 轻微下移模拟按下效果 */
}

.login-prompt {
color: #666;
font-size: 0.9rem;
}

.cont-menu {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

.cont-menu li {
    width: 48%;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s; /* 添加 box-shadow 过渡 */
}

.cont-menu li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    background: rgba(255,255,255,0.9);
    border-radius: 12px;
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* 添加所有属性的过渡 */
}

/* 鼠标悬停效果 - 与 active 类似但稍弱 */
.cont-menu li a:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(0.98); /* 轻微缩小 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 阴影加深 */
}

/* 鼠标点击效果 - 比 hover 更强烈 */
.cont-menu li a:active {
    background: rgba(255, 255, 255, 1); /* 完全不透明 */
    transform: scale(0.95); /* 比 hover 缩小更多 */
    box-shadow: 0 1px 4px rgba(0,0,0,0.2); /* 阴影更扁平 */
    color: var(--primary-color-dark); /* 使用更深的颜色（需定义变量） */
}

.cont-menu li i {
font-size: 1.5rem;
margin-bottom: 8px;
background: var(--gradient-blue);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

ul.cont-menu li span {
font-size: 1.0rem;
}

.sidebar-btn {
  display: block;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.sidebar-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  text-decoration: none;
}

.sidebar-btn img {
  max-width: 100%;
  height: auto;
}

.tips {
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #4361ee;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.tips:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.tip1 {
  font-size: 0.9rem;
  color: #495057;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.4;
  position: relative;
}

.tip1 i{
	color: #e34709;
}

.tip1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}

.tip2 {
  font-size: 0.8rem;
  color: #083b69;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tip2::before {
  content: "推荐现代浏览器:";
  display: block;
  width: 100%;
  font-weight: 500;
  color: #495057;
  margin-bottom: 4px;
}

/* 响应式调整 */
@media (max-width: 991.98px) {
  .tips {
    /*margin-top: 15px;*/
    padding: 12px;
  }
  
  .tip1 {
    font-size: 0.85rem;
    /*padding-left: 20px;*/
  }
  
  .tip2 {
    font-size: 0.75rem;
  }
}

/* 现代浏览器标签样式 */
.browser-tag {
  display: inline-block;
  padding: 2px 8px;
  background-color: #e9ecef;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #495057;
}

/* 如果需要将浏览器名称单独样式化 */
.tip2 {
  /* 原有样式... */
}

.tip2 span {
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 4px;
  padding: 2px 6px;
  background-color: #e9ecef;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* 搜索和筛选 */
.search-filter {
  background-color: white;
  padding: 15px;
  border-radius: 8px;
  /*margin-bottom: 20px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.05);*/
}

.tab-list {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.tab-item {
  padding: 8px 15px;
  border-radius: 20px;
  background-color: var(--light-gray);
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid var(--border-color);
}

.tab-item.active {
  background-color: var(--secondary-color);
  color: white;
  border-color: var(--secondary-color);
}

/* 搜索框容器 */
.type-ahead.search_form {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.search-input-wrapper {
  position: relative;
}

/* 输入框样式 */
.type-ahead__input {
  width: 100%;
  padding: 12px 50px 12px 15px; /* 右侧留出足够空间 */
  border: 1px solid #e0e0e0;
  border-radius: 25px;
  font-size: 1rem;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  height: 45px;
  outline: none;
  -webkit-appearance: none;
}

/* 输入框聚焦效果 */
.type-ahead__input:focus {
  border-color: #3177cd;
  box-shadow: 0 2px 12px rgba(49, 119, 205, 0.2);
}

.type-ahead__input::-webkit-search-cancel-button {
  -webkit-appearance: none; /* Chrome/Safari */
  appearance: none;
}

.type-ahead__input::-ms-clear {
  display: none; /* IE/Edge */
}

/* 图标容器基础样式 */
.search-icon-container,
.search-icon-container-delete {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  border: none;
  background: transparent;
  transition: all 0.3s ease;
}

/* 搜索按钮位置（始终显示） */
.search-icon-container {
  right: 10px;
}

/* 删除按钮位置（默认隐藏） */
.search-icon-container-delete {
  right: 45px; /* 在搜索按钮左侧 */
  opacity: 0;
  pointer-events: none;
}

/* 当输入框有内容时显示删除按钮 */
.type-ahead__input:not(:placeholder-shown) ~ .search-icon-container-delete {
  opacity: 1;
  pointer-events: auto;
}

/* 图标样式 */
.search-icon-container i,
.search-icon-container-delete i {
  pointer-events: none;
  color: #999;
  font-size: 18px;
  transition: color 0.2s ease;
}

/* 移除默认按钮样式 */
.search-button,
.clear-button {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* 删除按钮点击效果 */
.search-icon-container-delete:active i {
  transform: scale(0.9);
}

.search-icon-container-delete {
  pointer-events: auto !important;
}

.search_form {
  position: relative;
}

/* 现代表格样式 */
.modern-table {
  --table-border-color: #eaeef2;
  --table-hover-bg: #f8fafc;
  --primary-color: #4361ee;
  --success-color: #4cc9a0;
  --warning-color: #f8961e;
  --danger-color: #f72585;
  --text-muted: #6c757d;
  
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.95rem;
}

.modern-table thead th {
  background-color: #f8f9fa;
  color: #495057;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--table-border-color);
  padding: 12px 5px;
  position: sticky;
  top: 0;
  z-index: 10;
  text-align: center;
}
.textaligncenter{
	text-align: center;
}
.modern-table tbody tr {
  transition: all 0.2s ease;
}

.modern-table tbody tr:hover {
  background-color: var(--table-hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.modern-table tbody td {
  padding: 12px 5px;
  border-bottom: 1px solid var(--table-border-color);
  vertical-align: middle;
  font-size: 1.0rem;
}

/* 工单标签样式 */
.order-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #212529;
  transition: color 0.2s ease;
  line-height: 1.4;
  font-size: 1.0rem;
}

.order-title i{
	color: #054da3;
}

.order-tag {
  display: inline-block;
  padding: 2px 8px 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  text-align: center;
  color: white;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* 不同类型标签的颜色 */
.order-tag-complaint {  /* 投诉 */
  background: rgb(49 119 205);
  /*background: linear-gradient(180deg, rgb(49 119 205) 0%, rgb(9 164 229) 100%);*/
  /*background-color: #f72585;*/ /* 粉色 */
}

.order-tag-consult {  /* 咨询 */
  background-color: #4361ee; /* 蓝色 */
}

.order-tag-report {  /* 举报 */
  background-color: #7209b7; /* 紫色 */
}

.order-tag-suggestion {  /* 建议 */
  background-color: #4cc9a0; /* 绿色 */
}

.order-tag-help {  /* 求助 */
  background-color: #f8961e; /* 橙色 */
}

/* 悬停效果 */
.order-title:hover {
  color: #4361ee;
}

.order-title:hover .order-tag {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.order-title:visited{
	color: #717171 !important;
}

/* 状态标签样式 */
.order-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  min-width: 60px;
}

.status-received {
	background: #e8f4ff;
    color: #3177cd;
}

.status-completed {
	background: #ffc6d573;
	color: #eb0f4a;
}

.status-pending {
  background-color: rgba(248, 150, 30, 0.1);
  color: var(--warning-color);
}

.status-rejected {
  background-color: rgba(247, 37, 133, 0.1);
  color: var(--danger-color);
}

/* 时间样式 */
.modern-table tbody td:nth-child(3) {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/*分页*/
.pagination{
	padding: 10px;
}

/* 加载动画增强 */
.loading_div {
  background-color: rgb(14 159 226 / 18%);
  backdrop-filter: blur(3px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
}

.inner-loading_div {
  background-color: rgb(14 159 226 / 18%);
  backdrop-filter: blur(3px);
  position: absolute; /* 相对于 content-container 定位 */
  top: 0;
  left: 0;
  width: 100%; /* 覆盖整个 content-container */
  height: 100%;
  z-index: 20;
  display: flex; /* 使用 flex 布局实现居中 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.inner-loading {
  position: relative; /* 改为相对定位，相对于 loading_div */
  display: block;
  width: auto; /* 取消固定宽度 */
  height: auto; /* 取消固定高度 */
  background: transparent; /* 移除背景色，由 loading_div 提供 */
  z-index: 21; /* 比 loading_div 高一级 */
}

.inner-loading .inner-loading-content {
  padding: 15px; /* 增加内边距 */
  position: relative; /* 改为相对定位 */
  margin: 0; /* 移除 margin */
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  height: 45px;
  width: 45px;
  z-index: 22;
  background: #fff;
  border-radius: 50%;
  box-shadow: 1px 2px 20px 0 rgba(0,0,0,0.8);
  display: flex; /* 使用 flex 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.25em;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .modern-table thead {
    /*display: none;*/
  }
  
  .modern-table tbody tr {
    /*display: block;*/
    margin-bottom: 20px;
    border: 1px solid var(--table-border-color);
    border-radius: 8px;
    padding: 10px;
  }
  
  .modern-table tbody td {
    /*display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: none;*/
    padding: 8px 10px;
  }

  .modern-table tbody td:nth-child(3) {
    font-size: 0.8rem !important;
  }
  
  .modern-table tbody td::before {
    /*content: attr(data-label);*/
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 15px;
    font-size: 0.85rem;
  }
  
  .modern-table tbody td:last-child {
    /*border-bottom: none;*/
  }
  
  .order-status {
    margin-left: auto;
  }
}

/* 添加动画效果 */
/*@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.modern-table tbody {
  animation: fadeIn 0.3s ease forwards;
}*/

/*.modern-table tbody tr {
  animation: fadeIn 0.3s ease forwards;
}

.modern-table tbody tr:nth-child(odd) {
  animation-delay: 0.05s;
}

.modern-table tbody tr:nth-child(even) {
  animation-delay: 0.1s;
}*/



/*模板加载*/

.error{
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 50vh;
	color: white;
	overflow: hidden;
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	gap: 10px;
	border-radius: 8px;
}

@keyframes gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.error-contents{
	text-align: center;
    padding: 30px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #ffffff, #f1f1f5);
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

.error-icon i{
	color: #c92525;
	font-size: 7.0rem;
}

.error-text {
	font-size: 2rem;
	animation: pulse 2s infinite;
	color: #333;
    font-weight: bold;
}

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

.error-back-btn{
	background: rgb(44 125 208);
    padding: 10px;
    border-radius: 5px;
	cursor: pointer;
	font-size: 1.5rem;
	min-width: 100px;
}

.to-top {
    display: none;
    position: fixed;
    right: 10px;
    bottom: 170px; /* 改用固定底部距离 */
    top: auto; /* 明确取消顶部定位 */
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    opacity: 0;
    z-index: 999;
    /* 添加以下增强兼容性的属性 */
    -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
    touch-action: manipulation; /* 优化触摸响应 */
    transition: opacity 0.3s ease; /* 添加平滑过渡 */
    
    /* 安全区域适配 */
    margin-bottom: env(safe-area-inset-bottom);
    margin-bottom: constant(safe-area-inset-bottom); /* 旧版iOS支持 */
    
    /* 防止在iOS微信中位置跳动 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.top_icon {
    font-size: 1.7rem;
    color: #3177cd;
	height: 35px;
}

.side_back_icon {
    font-size: 1.7rem;
    margin-top: 2px;
    color: #3177cd;
	height: 35px;
}

/* 页脚 */
.footer {
  background: linear-gradient(to top, rgb(49, 119, 205) 0%, rgb(33 147 195) 100%);
  /*background-color: var(--primary-color);*/
  color: white;
  padding: 20px 0;
  /*margin-top: 50px;*/
}

.footer a {
  color: rgba(255,255,255,1);
  transition: color 0.3s;
}

.footer a:hover {
  color: white;
  text-decoration: none;
}

.footer-bottom {
  background-color: rgba(0,0,0,0.1);
  padding: 10px 0;
  font-size: 1.0rem;
}

.scroll-lock {
	
	overflow: hidden !important;
	touch-action: none !important;
	position: relative; /*fixed;*/ /* 防止 iOS 弹性滚动 */
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: auto !important;
	overflow-y: hidden !important;
}
.is_app_scroll_lock{
	overflow-y: hidden;
}

/*APP下载*/
/* APP下载banner现代风格 */
.app-download-banner {
  width: 100%;
  height: 80px;
  background: linear-gradient(90deg, #4e74f5, #a777e3, #6e8efb); /*linear-gradient(90deg, #6e8efb, #a777e3, #6e8efb);*/
  background-size: 200% 100%;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  /*overflow: hidden;*/
  position: relative;
  animation: mainBannerGradientMove 5s linear infinite;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  animation: mainBannerGradientMove 8s linear infinite;
}

.app-download-banner #MainQrcodeBanner{
  width: 100%;
  height: 80px;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}

@keyframes mainBannerGradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.cloud-wrapper {
  position: absolute;
  left: -100px; /* 初始位置在左侧外 */
}

.cloud {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

svg.defs-only {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

@keyframes shine {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

.banner-content {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  position: absolute;
  z-index: 2;
  height: 100%;
  top: 0;
  z-index: 2;
}

/* App图标保留原有动画 */
.app-icon img {
  width: 60px;
  /*height: 50px;*/
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  animation: gentlePulse 3s ease-in-out infinite;
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* 横向排列的文字信息 */
.app-info {
  flex: 1;
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  overflow: hidden;
  justify-content: space-around;
}

@keyframes textShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* 通用设置 */
.app-info span {
  display: inline-block;
  margin: 10px;
  animation: fadeInUp 1s ease forwards;
  opacity: 1;
}

/* 个性化样式 */
.site-name {
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 5px 10px rgb(66 17 118 / 60%);
  transform: translateY(-3px);
}

.feature-name {
	color: #fff;
	font-weight:bold;
	font-size: 2.8rem;
	text-shadow: 1px 5px 10px rgb(66 17 118 / 60%);
	transform: translateY(-4px);
	/*transform: translateY(-6px);
	text-shadow:0px 0px 0 rgb(190,126,121),-1px 1px 0 rgb(165,101,96),-2px 2px 0 rgb(139,75,70),-3px 3px 0 rgb(114,50,45),-4px 4px 0 rgb(88,24,19),-5px 5px 0 rgb(63,-1,-6),-6px 6px 0 rgb(37,-27,-32), -7px 7px 0 rgb(11,-53,-58),-8px 8px 7px rgba(0,0,0,1),-8px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);*/
}

.slogan {
  font-size: 1.5rem;
  color: #d4e1ff;
  font-style: italic;
  font-weight: bold;
  /*color: white;*/
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /*background: linear-gradient(90deg, #fff, #ffeb3b);*/
  background: linear-gradient(180deg, #ffd7bf, #ffc558);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align:center;
}

.slogan::before {
  content: '';
  position: absolute;
  left: 0;
  color: rgba(255,255,255,0.3);
}

/* 下载按钮 */
.download-btn {
	padding: 8px 15px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #ffffff;
	border-radius: 8px;
	font-size: 1.0rem;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	margin: 0 15px;
	line-height: 1.4;
	position: relative;
	overflow: hidden;
	z-index: 5;
}

.download-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.download-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.2),
    transparent
  );
  transition: none;
  animation: btnShine 2.5s infinite;
  z-index: -1;
}

@keyframes btnShine {
  100% { left: 100%; }
}

/* 二维码样式 - 修复被遮挡问题 */
.appqrcode {
  position: relative;
  transition: all 0.3s ease;
  z-index: 10;
}

.appqrcode img {
  height: 60px;
  border: 3px solid white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 按钮和二维码悬停时放大二维码 */
.download-btn:hover ~ .appqrcode img,
.appqrcode:hover img {
  transform: scale(3) translate(-10px, 12px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid #a387ed;
  padding: 3px;
  background-color: white;
}
.download-btn:active ~ .appqrcode img,
.appqrcode:active img {
  transform: scale(3) translate(-10px, 12px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid #a387ed;
  padding: 3px;
  background-color: white;
}

/* 动画定义 */
@keyframes btnTextShine {
    0% {
        background-position: -100% center;
    }
    100% {
        background-position: 100% center;
    }
}

@keyframes btnShine {
    100% {
        left: 100%;
    }
}

.loading{position:fixed;display:none;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);z-index:1000}
.loading .loading-content{padding-top:5px;padding-left:5px;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;height:45px;width:45px;z-index:1001;background:#fff;border-radius:50%;box-shadow:1px 2px 20px 0 rgba(0,0,0,0.8)}
.loading .loading-content .signuptip{margin:auto;width:50px;height:50px;/*background:url(http://res.ybtvyun.com/assets/templates/wap/default/css/images/signuptip.png)*/}
.loading .loading-content .modal-tip a{color:red}
.loading .loading-content .modal-tip{padding-top:20px;line-height:18px;margin:auto;width:100%;text-align:center}
/*.load_img{
	width:50px;animation: mymove 5s infinite;-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
}*/
@keyframes mymove {
	50% {
	transform: rotate(360deg);
	}
}
@-webkit-keyframes mymove{  /* Safari and Chrome */
	50% {
	transform: rotate(360deg);
	}
}
.loading_animate{
	animation: mymove 5s infinite;
	@-webkit-animation: mymove 5s infinite;
}

.main_loading{display:none;position: absolute;top: 100px;left:0;width:100%;height:60px;z-index:1000}
.main_loading .loading-content{padding-top:5px;margin:auto;text-align:center;z-index:1001;background:#fff;width:45px;height:45px;border-radius:50%;box-shadow:0px 1px 10px 0 rgba(0,0,0,0.5)}
.main_loading .loading-content .signuptip{margin:auto;width:50px;height:50px;/*background:url(http://res.ybtvyun.com/assets/templates/wap/default/css/images/signuptip.png)*/}
.main_loading .loading-content .modal-tip a{color:red}
.main_loading .loading-content .modal-tip{padding-top:20px;line-height:18px;margin:auto;width:100%;text-align:center}
/*.load_img{
	width:50px;animation: mymove 5s infinite;-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
}*/
@keyframes main-mymove {
	50% {
	transform: rotate(360deg);
	}
}
@-webkit-keyframes main-mymove{  /* Safari and Chrome */
	50% {
	transform: rotate(360deg);
	}
}
.main-loading_animate{
	animation: mymove 5s infinite;
	@-webkit-animation: mymove 5s infinite;
}

/*loading card*/
.loading-card {
  display: flex;
  flex-direction: column;
  /*flex-basis: 300px;*/
  flex-shrink: 0;
  flex-grow: 0;
  max-width: 100%;
  background-color: #FFF;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  overflow: hidden;
  /*margin: 1rem;*/
  margin: 0 0 15px 0;
  height: 230px;
  width: 50%;
}

.loading-card-img {
  padding-bottom: 66.25%;
  position: relative;
  display: flex;           /* 新增 */
  align-items: center;     /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.loading-card-img i {
	font-size: 10rem;
	color: #00000029;
	position: absolute;
	top: 15%;
}

.loading-card-img img {
  position: absolute;
  width: 100%;
}

.loading-card-body {
  padding: 1.5rem;
}

.loading-card-title {
  font-size: 1.25rem;
  line-height: 1.33;
  font-weight: 700;
}

.loading-card-title.loading-card-skeleton {
  min-height: 28px;
  border-radius: 4px;
}

.loading-card-intro {
  margin-top: 0.75rem;
  line-height: 1.5;
}

.loading-card-intro.loading-card-skeleton {
  min-height: 72px;
  border-radius: 4px;
}

.loading-card-skeleton {
  background-color: #e2e5e7;
  background-image: linear-gradient(
    90deg, 
    rgba(255, 255, 255, 0), 
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  background-size: 40px 100%;
  background-repeat: no-repeat;
  background-position: left -40px top 0;
  animation: loading-card-shine 1s ease infinite;
}

@keyframes loading-card-shine {
  to {
    background-position: right -40px top 0;
  }
}

/* 针对1024px屏幕的调整 */
@media screen and (max-width: 1024px) {
  .header .container, .container-md, .container-sm{
	max-width: 1024px;
  }
  .banner-content {
    padding: 0 10px; /* 减少水平内边距 */
    /*transform: translateX(-10px);  整体向左微调 */
  }
  
  .app-info {
    gap: 10px; /* 减少元素间距 */
  }
  
  .site-name {
    padding-right: 10px; /* 调整分隔线间距 */
	font-size: 2rem;
  }

  .feature-name {
	font-size: 2.5rem;
  }
  
  .slogan {
    padding-left: 10px; /* 调整分隔线间距 */
    font-size: 1.0rem; /* 适当减小字体大小 */
  }
  
  .download-btn {
    padding: 8px 12px; /* 调整按钮内边距 */
    margin: 0 10px; /* 减少按钮外边距 */
    font-size: 0.9rem; /* 适当减小字体大小 */
  }
  
  .appqrcode img {
    height: 50px; /* 适当减小二维码大小 */
  }

  .username{
	font-size: 1.0rem;
  }

  .logout{
	padding: 5px;
  }
  
  /* 调整放大后的二维码位置 */
  .download-btn:hover ~ .appqrcode img,
  .appqrcode:hover img {
    transform: scale(3) translate(-13px, 9px); /* 向右下方移动 */
  }
}

/* 移动端样式 */
  @media (max-width: 1023.98px) {
    .mobile-sidebar {
      /*margin-bottom: 20px;*/
    }
	.sidebar-buttons{
		gap: 0px;
	}
    .menus{
		height: 190px;
		margin-bottom: 1rem;
		box-shadow: none;
	}
	.work-order-list{
		/*margin-top: 20px;*/
	}
    .tips{
		margin-bottom: 1rem;
	}
	.mobile-sidebar .cont-menu {
      display: flex;
      gap: 10px;
      padding: 0;
    }
    
    .mobile-sidebar .cont-menu li {
      list-style: none;
      flex: 1;
    }
    
    .mobile-sidebar .cont-menu a {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
    }
    
    .mobile-sidebar .cont-menu i {
      margin-right: 5px;
    }
  }
  
  /* 桌面端样式 */
  @media (min-width: 1024px) {
    .sidebar-buttons {
      position: sticky;
      top: 20px;
    }
  }

/* 响应式调整 */
@media (max-width: 992px) {
  .header .container, .container-md, .container-sm{
	max-width: 992px;
  }

  .header-content {
    /*flex-direction: column;*/
    gap: 15px;
  }
  
  .logo-section {
    flex-wrap: wrap;
    /*justify-content: center;*/
  }

  .sidebar-buttons {
    /*flex-direction: row;
    margin-top: 30px;*/
  }
  
  .sidebar-btn {
    flex: 1;
  }

  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  
  .main-navigation .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .main-navigation .nav-item {
    padding: 0 8px;
  }
  .main-navigation .nav-item-icon {
    padding: 0px;
  }
  .main-navigation .nav-link {
    padding: 10px 5px !important;
    font-size: 1.1rem;
    white-space: nowrap;
	font-weight: 500;
  }
  .download-btn:hover ~ .appqrcode img,
  .appqrcode:hover img {
    transform: scale(3) translate(-13px, 9px);
  }
}

@media (max-width: 912px) {
  .app-download-banner {
    padding: 0; /* 添加内边距防止内容贴边 */
  }
  .site-name {
	font-size: 1.8rem;
  }

  .feature-name {
	font-size: 2.0rem;
  }
  .download-btn:hover ~ .appqrcode img,
  .appqrcode:hover img {
    transform: scale(3) translate(-13px, 9px);
  }
}

@media (max-width: 853px) {
  .app-download-banner {
    padding: 0; /* 添加内边距防止内容贴边 */
  }
  .site-name {
	font-size: 1.8rem;
  }

  .feature-name {
	font-size: 2.0rem;
  }
  .download-btn:hover ~ .appqrcode img,
  .appqrcode:hover img {
    transform: scale(3) translate(-13px, 9px);
  }
}

@media (max-width: 820px) {
  .app-download-banner {
    padding: 0; /* 添加内边距防止内容贴边 */
  }
  .site-name {
	font-size: 1.4rem;
  }

  .feature-name {
	font-size: 1.6rem;
  }
  .slogan{
	font-size: 0.9rem;
  }
  .download-btn:hover ~ .appqrcode img,
  .appqrcode:hover img {
    transform: scale(3) translate(-13px, 9px);
  }
}

@media (max-width: 768px) {
  .tab-list {
    flex-wrap: wrap;
  }
  .header .container, .container-md, .container-sm{
	max-width: 768px;
  }
  .header-content {
    /*flex-direction: column;*/
    gap: 15px;
  }

  .app-download-banner {
    /*height: auto;
    padding: 15px;*/
  }
  
  .banner-content {
    /*flex-wrap: wrap;*/
    justify-content: center;
  }
  
  .app-info {
    /*flex-wrap: wrap;*/
    justify-content: center;
    margin: 10px 0;
  }

  .site-name {
	font-size: 1.5rem;
  }

  .feature-name {
	font-size: 1.8rem;
  }
  
  .download-btn, .appqrcode {
    margin: 10px 0;
  }

  .appqrcode{
	margin-left: 10px;
  }
  
  .download-btn:hover ~ .appqrcode img,
  .appqrcode:hover img {
    transform: scale(3) translate(-13px, 9px);
  }
}

@media (max-width: 746px) {
  .header .container, .container-md, .container-sm{
	max-width: 746px;
  }
}

@media (max-width: 745px) {
  .header .container, .container-md, .container-sm{
	max-width: 745px;
  }
}

@media (max-width: 744px) {
  .header .container, .container-md, .container-sm{
	max-width: 744px;
  }
}

@media (max-width: 776px) {
  .header .container, .container-md, .container-sm{
	max-width: 775px;
  }
}

@media (max-width: 744px), (max-width: 745px), (max-width: 746px), (max-width: 775px) {
  .tab-list {
    flex-wrap: wrap;
  }
  
  .header-content {
    /*flex-direction: column;*/
    gap: 15px;
  }

  .hotline{
	margin-left: 0px;
  }

  .app-download-banner {
    /*height: auto;
    padding: 15px;*/
  }
  
  .banner-content {
    /*flex-wrap: wrap;*/
    justify-content: center;
  }
  
  .app-info {
    /*flex-wrap: wrap;*/
    justify-content: center;
    margin: 10px 0;
  }

  .site-name {
	font-size: 1.3rem;
  }

  .feature-name {
	font-size: 1.5rem;
  }
  
  .download-btn, .appqrcode {
    margin: 10px 0;
  }

  .appqrcode{
	margin-left: 10px;
  }
  
  .download-btn:hover ~ .appqrcode img,
  .appqrcode:hover img {
    transform: scale(3) translate(-13px, 9px);
  }
}

@media (max-width: 576px) {
  .sidebar-buttons {
    flex-direction: column;
  }
  
  .list-item {
    padding: 10px;
  }
  
  .order-title {
    font-size: 15px;
  }

  .navbar-expand-lg .navbar-toggler {
    display: block;
  }
  
  .navbar-expand-lg .navbar-collapse {
    display: none !important;
  }
  
  .navbar-expand-lg .navbar-collapse.show {
    display: flex !important;
    flex-direction: column;
  }
}