/**
 * 这是一个全局的基础样式集合，主要包含以下几类样式：
 * 1. 重置样式
 * 2. 总体布局
 * 3. 小组件的样式集合（不包含第三方插件）
 * 4. 自定义的公用样式，用来弥补 bootstrap 的不足
 */

/**
 * ----------------------------------------------------------
 * 重置样式
 * ----------------------------------------------------------
 */
a {
  text-decoration: none !important;
}

a:not(:has(img, button)):hover {
  opacity: 0.8;
}

a.btn:hover {
  opacity: 1;
}

.nav-link.active {
  color: #1664ff !important;
}

.accordion-button:focus {
  box-shadow: none;
}

/**
 * ----------------------------------------------------------
 * 总体布局
 * ----------------------------------------------------------
 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
  --bs-body-bg: var(--bs-gray-100);
  overflow-x: hidden;
}

body>main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.container-fluid {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* TODO */
.main-min-vh-100 {
  min-height: calc(100vh - 20rem);
}

/**
 * ----------------------------------------------------------
 * 小组件的样式集合（不包含第三方插件）
 * ----------------------------------------------------------
 */
/* Fixed Btns */
.fixed-btns-container {
  z-index: 999;
}

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: calc((100vh - var(--header-height)) / 2);
  transform: translateY(50%);
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--bs-gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bs-light);
  border-radius: 2rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.back-to-top:hover {
  color: var(--bs-gray-dark);
}

.back-to-top img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.back-to-top .fa-arrow-up {
  margin: 1rem 0;
}

/* Fixed Btns */

/* Avatar */
.avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  object-fit: cover;
  object-position: center;
}

.avatar-sm {
  width: 32px !important;
  height: 32px !important;
  border-radius: 16px !important;
}

.avatar-md {
  width: 40px !important;
  height: 40px !important;
  border-radius: 20px !important;
}

.avatar-lg {
  width: 64px !important;
  height: 64px !important;
  border-radius: 32px !important;
}

.avatar-xl {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50px !important;
}

/* Avatar */

/**
 * ----------------------------------------------------------
 * 自定义的公用样式，用来弥补 Bootstrap 的不足
 * ----------------------------------------------------------
 */
/* Color plus */
.text-gray-500 {
  color: var(--bs-gray-500);
}

.text-gray-600 {
  color: var(--bs-gray-600);
}

.text-gray-700 {
  color: var(--bs-gray-700);
}

.text-gray-800 {
  color: var(--bs-gray-800);
}

.bg-blue-gradient-inline {
  background: var(--bg-blue-gradient-inline);
}

.bg-blue-gradient-block {
  background: var(--bg-blue-gradient-block);
}

.text-teal {
  color: var(--bs-teal);
}

.bg-teal {
  background: var(--bs-teal);
}

/* Color plus */

/* font size */
.fs-18px {
  font-size: 1.13rem !important;
}

/* font size */

.cursor-pointer {
  cursor: pointer !important;
}

.sticky-top-header {
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-height);
  z-index: 1020;
}

@media (min-width: 768px) {
  .sticky-md-top-header {
    position: -webkit-sticky;
    position: sticky;
    top: 76px;
    z-index: 1020;
  }
}

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

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

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

.zwiki-loading {
  animation: loading 1s linear infinite;
  display: inline-block;
  margin-right: 0.3rem;
  vertical-align: unset;
}

.empty-icon {
  display: inline-block;
  background: url("/static/images/empty.png") 0 0 no-repeat;
  background-size: 100%;
  width: 10rem;
  height: 11rem;
  opacity: 0.6;
}

.share-dropdown .weixin-qrcode {
  width: 5rem;
}

.share-dropdown .weixin-qrcode img {
  width: 100%;
}

.share-dropdown li {
  line-height: 1.5;
}

.share-dropdown.dropup .shadow {
  box-shadow: 0.03rem 0rem 1rem rgba(var(--bs-body-color-rgb), .15) !important
}