/* 1. Plug-in styles
    including icons, fonts, colors, etc
    */
.document-dates-plugin {
    color: #666;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    padding: 0.2rem 0;
    margin-bottom: 0.6rem;
}
.md-main .document-dates-plugin {
    color: rgba(142, 142, 142, 0.7);
    font-size: 0.75rem;
}
.document-dates-plugin > span {
    display: inline-flex;
    align-items: center;
}
.document-dates-plugin > span:not(:first-child) {
    margin-left: 1.5rem;
}
.document-dates-plugin .material-icons {
    font-size: 1rem;
    opacity: 0.85;
    margin-right: 0.3rem;
}
.md-main .document-dates-plugin .material-icons {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Customized icons, just change the icon name.
    Google Fonts Icons (2500+): https://fonts.google.com/icons

    doc_created:  add_circle, add_circle, note_add, more_time
    doc_modified: update, check_circle, task, refresh
    doc_author:   person, account_circle
    doc_authors:  group, groups */
.document-dates-plugin .material-icons[data-icon="doc_created"]::before {
    content: "more_time";
}
.document-dates-plugin .material-icons[data-icon="doc_modified"]::before {
    content: "refresh";
}
.document-dates-plugin .material-icons[data-icon="doc_author"]::before {
    content: "person";
}
.document-dates-plugin .material-icons[data-icon="doc_authors"]::before {
    content: "group";
}



/* 2. Plug-in wrapper styles
    including divider, margin, padding, etc
    */
.document-dates-plugin-wrapper.document-dates-top,
.document-dates-plugin-wrapper.document-dates-bottom {
    margin: 1rem 0;
    border-bottom: 1px solid rgba(142, 142, 142, 0.15);
}
.md-main .document-dates-plugin-wrapper.document-dates-top {
    margin: -1rem 0 1rem 0;
}

/* Hide the footnote divider immediately following the date information with the CSS adjacent sibling selector */
.document-dates-plugin-wrapper + .footnote hr {
    display: none;
}



/* 3. Tooltip styles
    including theme, arrow, font, color, background color, etc
    */

/* .tippy-box {
    font-size: 12px;
} */

/* Demo of the custom theme 'tomato' (optional) */
.tippy-box[data-theme~='tomato'] {
    background-color: tomato;
    color: white;
}
/* Customize the arrow corresponding to the theme tomato */
.tippy-box[data-theme~='tomato'] > .tippy-arrow::before {
    color: tomato;
}
/* 
Recommended Colors:
    tomato: rgb(241, 112, 91);
    mung_bean: rgb(122, 145, 109);
    cloisonné: rgb(15, 89, 164);
    soft_blue: rgb(16, 104, 152);
*/

/* Customize arrows, resize */
.tippy-arrow::before {
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
}



/* 4. Author Avatar styles */
.avatar-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: -0.15rem;
    padding-left: 0.15rem;
}
.avatar-wrapper {
    margin: 0.15rem;
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    opacity: 0.7;
    filter: grayscale(90%);
    transition: transform 0.2s ease, filter 0.2s ease;
}
.avatar-wrapper:hover {
    transform: scale(1.08);
    filter: grayscale(0%);
    cursor: pointer;
}
.avatar-wrapper img.avatar {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}
.avatar-wrapper .avatar-text {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
    z-index: 1;
}