.header {
    top: 0;
    position: fixed;
    width: 100%;
}
a, a:hover {
    color: #000;
    text-decoration: none;
}
.header .btn-icon img {
    width: 24px;
    height: 24px;
}
.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 79vh;
}
.wrapper.h-100 {
    height: 100vh!important;
}
.left-0 {
    left: 0!important;
}
.top-0 {
    top: 0!important;
}
.avator {
    position: relative;
}
.tag {
    display: block;
    position: absolute;
    bottom: 0;
    width: 130%;
    height: 0;
    left: -14%;
    bottom: -12px;
    padding-bottom: 45%;
}
.tag-friend {
    background: url(../images/friends/tag-friend.svg) no-repeat center/contain ;
}
.tag-member {
    background: url(../images/friends/tag-member.svg) no-repeat center/contain ;
}
.tag-vip {
    background: url(../images/friends/tag-vip.svg) no-repeat center/contain ;
}
.box-shadow {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
}
.card {
    background: #fff;
    border-bottom: 1px solid;
    /* box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); */
    border-top: 1px solid #f0f4f5!important;
    border-bottom: 1px solid #f0f4f5!important;
    justify-content: space-between;
    align-items: center;
}
.card {
    padding: 10px 24px;
    text-align: left;
    display: flex;
    flex-direction: row;
    border-radius: 0;
    border: none;
}
.card, .card:hover {
    color: #000;
    text-decoration: none;
}
.card .btn {
    padding: 4px 12px;
}
.card .btn-secondary {
    border: 1px solid #702283;
}
.card .btn-outline-secondary {
    background: transparent;
    border: 1px solid #702283;
    color: #702283;
}

/* pagination */
.pagination .btn-icon {
    color: #888;
    font-weight: bold;
}
.pagination .active.btn-icon {
    color: #702283;
}
.pagination .btn-icon img {
    width: 24px;
    height: 24px;
}
.pagination .btn-icon.disabled {
    filter: grayscale(1);
}

/* 分享紀錄 */
.share-wrapper {
    position: relative
}
.share-wrapper p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

[bind^="detail-tab"].active {
    display: flex;
}