/* otakus 升级兼容代码 */
.normal-layout {
  padding-right: 12px;
}

.normal-layout .mi-container .mi-header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom: 0 !important;
}

.normal-layout .hoyoant-app > .hoyoant-card:first-child {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border: 1px solid #00004414 !important;
  box-shadow: 0px 4px 8px 0px #01020b0a, 0px 1px 4px 0px #01020b0f,
    0px 0px 0px 1px #1e2b7614;
}

.normal-layout .hoyoant-app > .hoyoant-card:first-child .hoyoant-card-body {
  padding: 16px 20px 24px !important;
}

.normal-layout .hoyoant-app > .hoyoant-card:not(:first-of-type) {
  margin: 12px 0 !important;
  border: 1px solid #00004414 !important;
}

.normal-layout .hoyoant-app > .without-bottom > .hoyoant-card {
  margin: 12px 0 !important;
  border: 1px solid #00004414 !important;
}

.normal-layout .hoyoant-app > .with-bottom > .hoyoant-card {
  margin: 12px 0 !important;
  border: 1px solid #00004414 !important;
}

.normal-layout .hoyoant-app > .hoyoant-card.first-card {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border: 1px solid #00004414 !important;
  box-shadow: 0px 4px 8px 0px #01020b0a, 0px 1px 4px 0px #01020b0f,
    0px 0px 0px 1px #1e2b7614;
  margin: 0 !important;
}

.normal-layout .hoyoant-app > .hoyoant-card.first-card .hoyoant-card-body {
  padding-top: 16px !important;
}

.normal-layout .hoyoant-app .first-card {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border: 1px solid #00004414 !important;
  box-shadow: 0px 4px 8px 0px #01020b0a, 0px 1px 4px 0px #01020b0f,
    0px 0px 0px 1px #1e2b7614;
  margin: 0 !important;
  background-color: var(--otakus-color-bg-container, #ffffff);
}
.normal-layout .hoyoant-app .hoyoant-tabs-content .first-card {
  border-top: 0 !important;
}

.normal-layout .hoyoant-app .first-card .hoyoant-card-body {
  padding-top: 16px !important;
}

.normal-layout .my-team-build-list .hoyoant-app > .hoyoant-card:first-child,
.normal-layout .collection-confirm .hoyoant-app > .hoyoant-card:first-child{
  border-top: 0 !important;
}
.normal-layout .my-team-build-list .hoyoant-app > .hoyoant-card:first-child .hoyoant-card-body,
.normal-layout .collection-confirm .hoyoant-app > .hoyoant-card:first-child .hoyoant-card-body{
  padding-top: 0px !important;
}

.normal-layout .hoyoant-app .second-card {
  border: 1px solid #00004414 !important;
  margin-top: 12px;
  background-color: white;
  border-radius: 8px;
}

.mi-doc-header-tabs-container{
  border-top: 1px solid #00004414 !important;
}

/* vue组件适配Otakus规范 */
.yc-tabs-cards.has-header .yc-tabs-cards-content {
  padding: 12px 0 !important;
}
.yc-tabs-cards.has-header .yc-tabs-cards-content .mi-card:nth-child(n+2) {
  margin-top: 12px !important;
}
.yc-tabs-cards.has-header .mi-tabs.mi-tabs--top {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  padding: 0 20px !important;
  border: 1px solid #00004414 !important;
  border-top: 0 !important;
}
.mi-doc-header-container{
  padding: 16px 20px 24px !important;
}
div.mi-card .mi-card__header{
  border-bottom: 0;
}
.layout-page .mi-header-with-doc-header {
  padding-left: 20px !important;
}

.otakus-doc-container-header {
  padding: 16px 20px 4px !important;
}
.otakus-doc-container-header-expand-icon-container .otakus-doc-container-header-expand-container {
  z-index: 10 !important;
}  
.mi-doc-header-expand-icon-container .mi-doc-header-expand-container {
  z-index: 100 !important;
}

/* 解决vant组件z-index问题 */
.v-modal {
  z-index: 200 !important;
}

/* 解决MI-UI的样式问题 */
.mi-tooltip__popper {
  font-size: 12px !important;
}
.mi-button--primary.is-outline:focus {
  background: var(--mi-color-primary-light-default);
  border-color: var(--mi-color-primary);
  color: var(--mi-color-primary-hover);
}
.mi-table--enable-row-hover .mi-table__body tr:not(.current-row):hover>td.mi-table__cell{
  background-color: #F8F8FA !important;
}

/**	解决antd modal的样式问题 */
.ant-modal-confirm .ant-modal-confirm-body >.otakuicon {
  flex: none;
  font-size: 22px;
  margin-inline-end: 12px;
}

.ant-modal-confirm .ant-modal-confirm-body-has-title>.otakuicon {
  margin-top: 1px;
}

.ant-btn-primary:not(.ant-btn-dangerous) {
  background: var(--otakus-color-primary, #4e5ff6) !important;
}