/*
 * VRCX Dark-Vanilla theme by MintLily
 * https://github.com/MintLily/Dark-Vanilla
 */

 :root {
    --ThemeName: 'Dark Vanilla';
    --ThemeVers: '2.0.2';
    --ThemeAuth: 'MintLily';

    --dv_bright: #eecce0;
    --dv_muted: #906d92;
    --dv_bright-rgb: 238, 204, 224;
    --dv_muted-rgb: 144, 109, 146;
    --dv_bg-top: #1e2427;
    --dv_bg-mid: #191f22;
    --dv_bg-bot: #131719;
    --dv_lg-rounded: 1rem;
    --dv_md-rounded: 0.6rem;
    --dv_sm-rounded: 0.45rem;
    --dv_background-modifier-selected: rgba(var(--dv_bright-rgb), 0.2);
    --dv_background-modifier-hover: rgba(var(--dv_bright-rgb), 0.3);
    --font-primary: 'Encode Sans', 'Tofu', 'Helvetica Neue', Helvetica, Arial,
        sans-serif;
    --shadow: 0 0 15px 5px rgba(0, 0, 0, 0.35);
}

/* MAIN */
html,
body,
.x-menu-container {
    background-color: var(--dv_bg-bot);
}

/* vietnamese */
@font-face {
    font-family: 'Encode Sans';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/encodesans/v19/LDIhapOFNxEwR-Bd1O9uYNmnUQomAgE25imKSbHLR8A6WQw.woff2)
        format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
        U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Encode Sans';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/encodesans/v19/LDIhapOFNxEwR-Bd1O9uYNmnUQomAgE25imKSbHLRsA6WQw.woff2)
        format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Encode Sans';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/encodesans/v19/LDIhapOFNxEwR-Bd1O9uYNmnUQomAgE25imKSbHLSMA6.woff2)
        format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body,
input,
textarea,
select,
button {
    font-family: var(--font-primary);
}

a {
    color: var(--dv_bright);
}

/* Side Bar */
.x-menu-container {
    border-top-right-radius: var(--dv_lg-rounded);
    border-bottom-right-radius: var(--dv_lg-rounded);
}

.el-menu-item.is-active {
    color: var(--dv_bright);
}

.el-menu-item.is-active::before {
    display: none;
}

.el-menu-item:focus,
.el-menu-item:hover {
    background-color: var(--dv_background-modifier-hover);
}

li[class='el-menu-item is-active'] {
    background-color: var(--dv_background-modifier-selected);
}

.el-menu-item:hover i {
    color: #eee;
    transition: 0.3s !important;
}

.el-tooltip__popper.is-dark,
.el-tooltip__popper[x-placement^='right'] .popper__arrow::after {
    background-color: var(--dv_bg-top);
    border-radius: var(--dv_md-rounded);
    box-shadow: var(--shadow);
}

.el-tooltip__popper[x-placement^='right'] .popper__arrow::after {
    background-color: var(--dv_bg-top);
}

/* Main Window Content */
/* Feed */
.x-app {
    background-color: var(--dv_bg-top);
}

.x-container {
    background-color: var(--dv_bg-top);
}

.x-container {
    border-top-left-radius: var(--dv_lg-rounded);
    border-bottom-left-radius: var(--dv_lg-rounded);
}

.el-select:hover .el-input__inner {
    border: none;
}

.el-select > .el-input input,
.el-select .el-input input {
    background-color: var(--dv_bg-bot);
    border-radius: var(--dv_lg-rounded);
}

.el-select-dropdown {
    background-color: var(--dv_bg-top);
    border: none;
    border-radius: var(--dv_lg-rounded);
    box-shadow: var(--shadow);
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background-color: var(--dv_background-modifier-hover);
    transition: 0.2s;
    border-radius: var(--dv_md-rounded);
}

.el-select-dropdown__item.selected {
    color: var(--dv_bright);
}

.el-popper[x-placement^='bottom'] .popper__arrow,
.el-popper[x-placement^='bottom'] .popper__arrow::after {
    border-bottom-color: var(--dv_bg-top);
}

.el-select-dropdown__item {
    color: #eee;
}

.el-input__inner {
    background-color: var(--dv_bg-bot);
    border-radius: var(--dv_lg-rounded);
}

.el-table thead {
    color: #eee;
}

.el-table .descending .sort-caret.descending,
.el-table .ascending .sort-caret.ascending {
    border-top-color: var(--dv_bright);
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    border-bottom-color: #5f5f5f;
}

.el-table tr,
.el-table td.el-table__cell,
.el-table th.el-table__cell {
    background-color: var(--dv_bg-top);
    border: none;
}

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: var(--dv_bg-top);
    border: none;
}

table.el-table__body[style^='width:'] tr[class='el-table__row']:hover td,
table.el-table__body[style^='width:']
    tr[class='el-table__row el-table__row--striped']:hover
    td {
    background-color: var(--dv_background-modifier-hover);
    transition: 0.1s;
}

table.el-table__body[style^='width:']
    tr[class='el-table__row']:hover
    td[class^='el-table_1_column_1'],
table.el-table__body[style^='width:']
    tr[class='el-table__row el-table__row--striped']:hover
    td[class^='el-table_1_column_1'] {
    border-top-left-radius: var(--dv_md-rounded);
    border-bottom-left-radius: var(--dv_md-rounded);
}

table.el-table__body[style^='width:']
    tr[class='el-table__row']:hover
    td[class^='el-table_1_column_5'],
table.el-table__body[style^='width:']
    tr[class='el-table__row el-table__row--striped']:hover
    td[class^='el-table_1_column_5'] {
    border-top-right-radius: var(--dv_md-rounded);
    border-bottom-right-radius: var(--dv_md-rounded);
}

tr[class='el-table__row']:hover .el-table__expand-icon,
tr[class='el-table__row el-table__row--striped']:hover .el-table__expand-icon {
    color: #eee;
}

.el-table__expanded-cell:hover {
    background-color: var(--dv_background-modifier-hover) !important;
    transition: 0.1s;
    border-bottom-left-radius: var(--dv_md-rounded);
    border-bottom-right-radius: var(--dv_md-rounded);
}

.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: var(--dv_background-modifier-selected);
    transition: 0.1s;
}

.el-pagination {
    padding: 8px;

    > button.btn-prev {
        border-top-left-radius: var(--dv_sm-rounded);
        border-bottom-left-radius: var(--dv_sm-rounded);
        background-color: var(--dv_bg-bot);
    }

    > button.btn-next {
        border-top-right-radius: var(--dv_md-rounded);
        border-bottom-right-radius: var(--dv_sm-rounded);
        background-color: var(--dv_bg-bot);
    }

    > ul > li,
    button:disabled {
        background-color: var(--dv_bg-bot);
        color: #c0c4cc;
    }

    > button:hover {
        color: var(--dv_bright);
    }
}

.el-pagination .el-select .el-input .el-input__inner {
    border-radius: var(--dv_sm-rounded);
}

.el-pager li.active,
.el-pager li:hover,
.el-button--text:hover {
    color: var(--dv_bright);
}

.el-message-box {
    background-color: var(--dv_bg-top);
    border-radius: var(--dv_lg-rounded);
    border-color: transparent;
    box-shadow: var(--shadow);
}

/* Game Log */
table.el-table__body[style^='width:']
    tr[class='el-table__row']:hover
    td[class^='el-table_2_column_6'],
table.el-table__body[style^='width:']
    tr[class='el-table__row el-table__row--striped']:hover
    td[class^='el-table_2_column_6'] {
    border-top-left-radius: var(--dv_md-rounded);
    border-bottom-left-radius: var(--dv_md-rounded);
}

table.el-table__body[style^='width:']
    tr[class='el-table__row']:hover
    td[class^='el-table_2_column_11'],
table.el-table__body[style^='width:']
    tr[class='el-table__row el-table__row--striped']:hover
    td[class^='el-table_2_column_11'] {
    border-top-right-radius: var(--dv_md-rounded);
    border-bottom-right-radius: var(--dv_md-rounded);
}

/* Search */
.el-tabs--card > .el-tabs__header .el-tabs__nav:first-child,
.el-tabs--card > .el-tabs__header .el-tabs__nav:first-child:hover {
    border-top-left-radius: var(--dv_lg-rounded);
}

.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border-bottom: 2px solid var(--dv_bright);
}

.el-tabs__item:hover {
    border-bottom: 2px solid var(--dv_muted);
}

.el-tabs--card > .el-tabs__header .el-tabs__nav:last-child,
.el-tabs--card > .el-tabs__header .el-tabs__nav:last-child:hover {
    border-top-right-radius: var(--dv_lg-rounded);
}

.el-tabs__item.is-active,
.el-tabs__item:hover {
    color: var(--dv_bright);
}

.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover,
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
    background-color: var(--dv_background-modifier-hover);
}

.el-button-group > .el-button:first-child {
    border-top-left-radius: var(--dv_md-rounded);
    border-bottom-left-radius: var(--dv_md-rounded);
}

.el-button-group > .el-button:last-child {
    border-top-right-radius: var(--dv_md-rounded);
    border-bottom-right-radius: var(--dv_md-rounded);
}

.el-button-group > .el-button,
.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
    border-color: transparent;
}

.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
    background-color: var(--dv_bg-bot);
    border-radius: var(--dv_md-rounded);
}

.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover,
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
    color: #eee;
}

.x-friend-item:hover,
.x-change-image-item:hover {
    background-color: var(--dv_background-modifier-hover);
    border-radius: var(--dv_lg-rounded);
}

/* Favorites */
.el-switch.is-checked .el-switch__core,
span[class='el-switch__core'][style*='border-color'] {
    background-color: var(--dv_muted) !important;
    border-color: var(--dv_muted) !important;
}

.el-switch__label.is-active {
    color: var(--dv_bright);
}

.el-collapse-item__wrap {
    background-color: var(--dv_bg-top);
    border-bottom-color: transparent;
}

/* Friend Log */
table.el-table__body[style^='width:']
    tr[class='el-table__row']:hover
    td[class^='el-table_4_column_21'],
table.el-table__body[style^='width:']
    tr[class='el-table__row el-table__row--striped']:hover
    td[class^='el-table_4_column_21'] {
    border-top-left-radius: var(--dv_md-rounded);
    border-bottom-left-radius: var(--dv_md-rounded);
}

table.el-table__body[style^='width:']
    tr[class='el-table__row']:hover
    td[class^='el-table_4_column_24'],
table.el-table__body[style^='width:']
    tr[class='el-table__row el-table__row--striped']:hover
    td[class^='el-table_4_column_24'] {
    border-top-right-radius: var(--dv_md-rounded);
    border-bottom-right-radius: var(--dv_md-rounded);
}

/* Moderation */
table.el-table__body[style^='width:']
    tr[class='el-table__row']:hover
    td[class^='el-table_4_column_25'],
table.el-table__body[style^='width:']
    tr[class='el-table__row el-table__row--striped']:hover
    td[class^='el-table_4_column_25'] {
    border-top-right-radius: var(--dv_md-rounded);
    border-bottom-right-radius: var(--dv_md-rounded);
}

/* Notification */
table.el-table__body[style^='width:']
    tr[class='el-table__row']:hover
    td[class^='el-table_4_column_26'],
table.el-table__body[style^='width:']
    tr[class='el-table__row el-table__row--striped']:hover
    td[class^='el-table_4_column_26'] {
    border-top-right-radius: var(--dv_md-rounded);
    border-bottom-right-radius: var(--dv_md-rounded);
}

/* Profile */
.el-tree {
    background-color: var(--dv_bg-bot);
}

div[role='treeitem'][class*='is-focusable'] {
    background-color: var(--dv_bg-mid);
}

.el-switch__core {
    background-color: var(--dv_bg-bot);
}

.el-radio-group label,
.el-radio-button__inner {
    background-color: var(--dv_bg-bot);
    border: none;
    border-radius: var(--dv_md-rounded);
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: var(--dv_muted);
    border-color: var(--dv_muted);
    box-shadow: none;
    border-radius: var(--dv_md-rounded);
}

.el-radio-button__inner:hover {
    color: #eee;
    background-color: var(--dv_background-modifier-hover);
    border-radius: var(--dv_md-rounded);
}

div.options-container[style='margin-top: 45px; border-top: 1px solid rgb(238, 238, 238); padding-top: 30px;']:after {
    content: var(--ThemeName) ' v' var(--ThemeVers) ' by ' var(--ThemeAuth);
    color: var(--dv_bright);
    float: right;
    padding-bottom: 10px;
    padding-right: 10px;
    font-size: 18pt;
}

.el-slider__bar {
    background-color: var(--dv_muted);
}

.el-slider__button {
    border-color: var(--dv_muted);
}

.el-dropdown-menu {
    background-color: var(--dv_bg-top);
    border: none;
    border-radius: var(--dv_lg-rounded);
    box-shadow: var(--shadow);
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
    color: #eee;
    background-color: var(--dv_background-modifier-hover);
    border-radius: var(--dv_md-rounded);
}

.el-input-number__decrease:hover,
.el-input-number__increase:hover {
    color: var(--dv_bright);
}

.el-dialog,
.el-pager
    li:not(li.number, li[class*='btn-quicknext'], li[class*='btn-quickprev']) {
    background-color: var(--dv_bg-top);
    border: none;
    border-radius: var(--dv_lg-rounded);
    box-shadow: var(--shadow);
}

.el-button--primary {
    background-color: var(--dv_muted);
    border-color: var(--dv_muted);
    border-radius: var(--dv_md-rounded);
}

.el-button--primary:focus,
.el-button--primary:hover {
    background-color: rgba(var(--dv_muted-rgb), 0.6);
    border-color: var(--dv_muted);
}

.el-textarea__inner {
    background-color: var(--dv_bg-bot);
}

.el-textarea__inner:hover {
    background-color: var(--dv_bg-mid);
}

.el-textarea .el-input__count {
    background-color: transparent;
}

.el-popover {
    background-color: var(--dv_bg-top);
    border: none;
    border-radius: var(--dv_lg-rounded);
    box-shadow: var(--shadow);
    color: #ddd;
}

.el-popper[x-placement^='top'] .popper__arrow,
.el-popper[x-placement^='left'] .popper__arrow,
.el-popper[x-placement^='right'] .popper__arrow,
.el-popper[x-placement^='bottom'] .popper__arrow {
    display: none;
}

img.x-link,
img.friends-list-avatar {
    border-radius: var(--dv_lg-rounded) !important;
}

.el-tag--mini {
    height: 30px;
    padding: 5px 15px;
    font-size: 10pt;
    border-radius: var(--dv_md-rounded);
}

.el-tag.el-tag--info,
.el-tag--plain.el-tag--success {
    background-color: var(--dv_bg-bot);
}

.el-tag--plain.el-tag--warning,
.el-tag--plain.el-tag--danger,
.el-tag--plain {
    background-color: var(--dv_bg-mid);
}

.el-tag--plain.el-tag--info {
    color: #eee;
}

.el-tabs__active-bar {
    background-color: var(--dv_muted);
}

.el-input--mini .el-textarea__inner:hover {
    background-color: transparent !important;
}

i[class='el-icon-delete'],
i[class='el-icon-switch-button'],
.el-dropdown-menu--small
    .el-dropdown-menu__item.el-dropdown-menu__item--divided:has(
        i[class='el-icon-switch-button']
    ) {
    color: #f56c6c;
}

i[class='el-icon-star-off']:not(.el-menu-item div.el-tooltip i) {
    color: #ffd000;
}

.el-dropdown-menu__item--divided {
    border-color: rgba(255, 255, 255, 0.5);
}

.el-dropdown-menu__item--divided::before {
    background-color: var(--dv_bg-top);
}

.el-tab-pane .el-radio-group[style^='margin-left: '] label {
    background-color: transparent !important;
}

.el-radio__input.is-checked + .el-radio__label {
    color: var(--dv_bright);
}

.el-radio__input.is-checked .el-radio__inner {
    border-color: var(--dv_bright);
    background-color: var(--dv_bright);
}

.el-input-group__append,
.el-input-group__prepend {
    background-color: var(--dv_bg-mid);
    border-color: transparent;
}

.el-input-group__append:hover {
    background-color: transparent;
}

.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
    color: var(--dv_bright);
}

.x-aside-container {
    background-color: var(--dv_bg-bot);
    background: linear-gradient(
        180deg,
        var(--dv_bg-top) 0%,
        var(--dv_bg-bot) 25%,
        var(--dv_bg-bot) 100%
    );
    border-top-left-radius: 2rem;
    border-bottom-left-radius: var(--dv_lg-rounded);
}

.el-dialog__wrapper[style^='z-index: '] {
    background-color: rgba(0, 0, 0, 0.4);
}

.v-modal {
    background: none;
}

.noty_theme__mint.noty_type__error,
.noty_theme__mint.noty_type__success,
.noty_theme__mint.noty_type__alert,
.noty_theme__mint.noty_type__notification,
.noty_theme__mint.noty_type__warning,
.noty_theme__mint.noty_type__info,
.noty_theme__mint.noty_type__information {
    border-radius: var(--dv_lg-rounded);
    box-shadow: var(--shadow);
}

.noty_theme__mint.noty_type__success {
    color: #fff;
    background-color: var(--dv_muted);
    border-bottom: 1px solid var(--dv_bright);
}

::-webkit-scrollbar-track {
    background: var(--dv_bg-mid);
}

::-webkit-scrollbar-thumb {
    background: var(--dv_bg-bot);
}