@charset "UTF-8";
/* =================================================== */
/* ==================== 使用者名單 ==================== */
/* ================================================= */
/*遮罩*/
.popover_mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

/*背景*/
.popover_user {
  padding: 16px 16px;
  background: #fff;
  font-size: 16px;
  color: #333;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

/*內容框架*/
.popover_user .userBox {
  min-height: 148px;
  max-height: 700px;
  min-width: 840px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/*標題*/
.userBox .title .league {
  color: #949494;
  font-size: 14px;
}

.userBox .title .title__item {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.userBox .title .title__item p {
  padding: 16px 0 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.userBox .title .title__item p.item {
  cursor: pointer;
}

.userBox .title .title__item p.item:hover {
  border-bottom-color: #e0e0e0;
}

.userBox .title .title__item p.selected {
  border-bottom-color: currentColor;
}

.userBox .title .title__item p.selected:hover {
  border-bottom-color: currentColor;
}

.userBox .title .title__item p span {
  margin: 0 4px;
}

/*名單*/
.userBox .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  overflow-y: auto;
  flex: 1;
  margin-top: 16px;
  padding-bottom: 16px;
}

.userBox .list > a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 250px;
  padding: 4px;
  color: #333;
}

.userBox .list > a:hover {
  background: #f4f4f4;
}

.userBox .list > a .avatar {
  width: 60px;
  height: 60px;
}

.userBox .list > a .name p.mark {
  color: #090;
}

.userBox .list > button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px auto 0 auto;
  width: 20%;
  height: 40px;
  grid-column: 1/-1;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #949494;
  color: #333;
  background: #fff;
  cursor: pointer;
  transition: background 0.3s ease-out;
}

.userBox .list > button:active {
  background: #f4f4f4;
  transition: background 0s;
}

.userBox .list > .empty {
  grid-column: 1/-1;
  padding: 16px 0;
}

/*備注*/
.userBox .note {
  padding-top: 8px;
  color: #bdbdbd;
  border-top: 1px solid #e0e0e0;
}

/*----------效果 更新----------*/
.loading {
  display: inline-block;
  margin: 0 6px;
  width: 10px;
  height: 10px;
  border: 2px solid #bfbfbf;
  border-top-color: transparent;
  border-radius: 50%;
  animation: loading_spin 0.8s linear infinite;
}

@keyframes loading_spin {
  to {
    transform: rotate(360deg);
  }
}