.za-button {
    color: var(--text-color);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 1.076rem;
    opacity: 1;
    text-decoration: none;
}

.za-button:hover {
    color: var(--main-theme-color-light);
}

.za-button[disabled] {
    cursor: default;
    opacity: 0.5;
}

.za-button > i {
    font-size: 1.076rem;
    margin: var(--spacing2);
}

.za-button > img {
    margin: var(--spacing2);
}

.za-button > .za-button-content > i {
    margin: var(--spacing2);
}

.za-button > .za-button-content > .z-icon-pencil {
    margin: var(--spacing2);
}

.za-button-content > img {
    margin: var(--spacing2);
}

.i-toolbarbutton > .z-toolbarbutton-content {
    font-size: 1.1538rem;
}

.za-button.btn-highlight {
    background-color: var(--main-theme-color);
    border-radius: 50%;
    color: var(--main-theme-color-lum);
    animation: pulse-badge-anim 2s infinite;
}

.za-button.btn-highlight > i {
    font-size: 0.8rem;
    padding: var(--spacing4);
}

.za-button.btn-highlight:hover {
    background-color: var(--main-theme-color-light);
    color: var(--main-theme-color-light-lum);
}

.za-button > .z-icon-pencil, .za-button > .z-icon-binoculars, .za-button > .z-icon-file {
    font-size: 1.0769rem;
    margin: var(--spacing4);
}

.za-button > .za-button-content > .z-icon-pencil, .za-button > .za-button-content > .z-icon-binoculars, .za-button > .za-button-content > .z-icon-file {
    font-size: 1.0769rem;
    margin: var(--spacing4);
}

.za-button > .z-icon-close {
    font-size: 1.2308rem;
    margin: var(--spacing4);
}

.za-button > .za-button-content > .z-icon-close {
    font-size: 1.2308rem;
    margin: 4px;
}

.z-menupopup [class^="far"],
.z-menupopup [class^="fas"],
.z-menupopup [class^="fal"] {
    min-width: var(--spacing16);
}

[class^="far"]::before, [class*="fas"]::before, [class*="fal"]::before {
    display: inline;
    text-decoration: inherit;
}

.chart-button-context,
.chart-button-comment {
    background: rgb(255 255 255 / 90%);
    color: var(--text-color2);
    border: var(--border-style);
    border-radius: var(--border-radius4);
    padding: var(--spacing2);
    z-index: 100;
}

.chart-button-context:hover,
.chart-button-comment:hover {
    background: #ededed;
    border: var(--border-style);
}

.chart-button-context > i,
.chart-button-comment > i {
    display: inline-block;
    font-size: 1rem !important;
    position: relative;
    text-align: center;
    top: var(--spacing2);
    width: var(--spacing16);
    height: var(--spacing16);
    margin: 0;
}

.chart-button-context.chart-button-connector i {
    font-size: 0.8rem;
}

[data-comment-count] {
    position: relative;
}

[data-comment-count]::after {
    display: flex;
    justify-content: center;
    align-items: center;
    content: attr(data-comment-count);
    font-size: 0.6rem;
    pointer-events: none;
    position: absolute;
    inset: 0;
}

.body-homepage .chart-button-comment,
.body-homepage .chart-menu-item-comment-hint {
    display: none;
}

.hint-badge {
    background: var(--main-theme-color);
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    opacity: 0.8;
    padding: 2px;
    position: absolute;
    top: 0;
    right: 0;
    height: 12px;
    min-width: 12px;
    box-shadow: 0 2px 4px 0 #00000029;
}

.locale-select-button {
    font-weight: bold;
    margin: 6px 0 0 6px;
}

.cke-button-highlight {
    background: #fff !important;
    border: 1px #bcbcbc solid !important;
    padding: 3px 5px !important;
}


.menu-color-reset-button {
    width: 26px;
    height: 27px;
    position: absolute;
    cursor: pointer;
    z-index: 10;
    color: #888;
    font-size: 16px;
    border-radius: 4px !important;
    padding: 6px 0 0 4px;
    left: 82px;
    top: 16px;
}

.menu-color-reset-button:hover {
    color: #FFF;
    border-color: transparent;
    background-color: var(--main-theme-color-light);
    padding: 5px 0 0 3px;
}