body.color-normal {
    background-color: #EFEFEF;
}

.color-normal {
    border-color: black;
    color: black;
    background-color: #FFF;
}

body.color-invert {
    background-color: #060606;
}

.color-invert {
    border-color: white;
    color: white;
    background-color: #181818;
}

.color-invert input[readonly="readonly"] {
    background-color: #444 !important;
}

.color-normal .button {
    background-color: #FFF;
    color: black;
}

.color-normal .button:hover {
    background-color: #181818;
    color: white;
}

.color-invert .button {
    background-color: #181818;
    color: white;
}

.color-invert .button:hover {
    background-color: #FFF;
    color: black;
}

.color-normal .toggle+label {
    background-color: #FFF;
    color: black;
}

.color-normal .toggle:checked+label {
    background-color: #181818;
    color: white;
}

.color-invert .toggle+label {
    background-color: #181818;
    color: white;
}

.color-invert .toggle:checked+label {
    background-color: #FFF;
    color: black;
}

.color-normal input {
    background-color: #FFF;
    color: black;
}

.color-invert input {
    background-color: #181818;
    color: white;
}

.color-normal select {
    background-color: #FFF;
    color: black;
}

.color-invert select {
    background-color: #181818;
    color: white;
}

.color-normal input::placeholder {
    color: #d9d9d9;
}

.color-invert input::placeholder {
    color: #868686;
}

.color-normal input:-webkit-autofill {
    -webkit-text-fill-color: black;
    -webkit-box-shadow: 0 0 0 44px white inset;
    box-shadow: 0 0 0 44px white inset;
}

.color-invert input:-webkit-autofill {
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0 44px black inset;
    box-shadow: 0 0 0 44px black inset;
}

.color-normal .dropdown {
    color: black;
    background-color: #FFF;
}

.color-normal .dropdown:hover {
    color: white;
    background-color: #181818;
}

.color-invert .dropdown {
    color: white;
    background-color: #181818;
}

.color-invert .dropdown:hover {
    color: black;
    background-color: #FFF;
}

.color-normal .dropdown[open="open"] {
    color: white;
    background-color: #181818;
}

.color-invert .dropdown[open="open"] {
    color: black;
    background-color: #FFF;
}

.color-normal .dropdown_list {
    color: black;
    background-color: #FFF;
}

.color-invert .dropdown_list {
    color: white;
    background-color: #181818;
}

/* 색반전시 Froala 설정 */
.color-invert .fr-box.fr-basic.fr-top .fr-wrapper {
    background-color: #181818;
}

.color-invert .fr-box.fr-basic .fr-element {
    color: white;
}

.color-invert .fr-toolbar {
    color: white;
    background-color: #181818;
    border-top: 5px solid white;
}

.color-invert .fr-toolbar.fr-top {
    box-shadow: 0 1px 3px rgba(255, 255, 255, .32), 0 1px 1px 1px rgba(255, 255, 255, .36);
}

.color-invert .fr-toolbar .fr-command.fr-btn {
    color: white;
}

.color-invert .fr-popup .fr-command.fr-btn {
    color: black;
}

.color-invert .fr-toolbar .fr-command.fr-btn.fr-dropdown::after,
.color-invert .fr-popup .fr-command.fr-btn.fr-dropdown::after {
    border-top: 4px solid white;
}

.color-invert .CodeMirror-scroll {
    color: white;
    background-color: black;
}

.color-invert .CodeMirror-gutter,
.color-invert .CodeMirror-gutters {
    background-color: #333;
}

.color-invert .fr-box .fr-counter {
    background-color: #444;
}

.color-invert .fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a {
    color: black;
}

.color-invert .fr-desktop .fr-command:hover,
.color-invert .fr-desktop .fr-command:focus {
    background: #909090;
}

/* ------------------- */

.color-invert .list tr.now * {
    background-color: #202030;
}

.color-invert .list .icon.anonymity {
    background-image: url('/attach/board/anonymity-invert.svg');
}

.color-invert .shop.list>.item {
    border: 1px solid #000;
}

.color-invert .shop.list>.item:hover {
    background-color: #000011;
    border: 1px solid #909090;
    box-shadow: 5px 5px 3px #666;
}

.color-invert .shop.list>.nick .icon {
    background-image: url('/attach/shop/nick-invert.svg');
}

.color-invert .shop.list>.nick-color .icon {
    background-image: url('/attach/shop/nick-color-invert.svg');
}

.color-invert .shop.list>.profile-image .icon {
    background-image: url('/attach/shop/profile-image-invert.svg');
}

.color-invert .shop.list>.profile-introduction .icon {
    background-image: url('/attach/shop/profile-introduction-invert.svg');
}

.color-invert .shop.list>.invitation .icon {
    background-image: url('/attach/shop/invitation-invert.svg');
}

.color-invert .shop.list>.fiftyfifty .icon {
    background-image: url('/attach/shop/money-invert.svg');
}

.color-invert .game.list>.item {
    border: 1px solid #000;
}

.color-invert .game.list>.item:hover {
    background-color: #000011;
    border: 1px solid #909090;
    box-shadow: 5px 5px 3px #666;
}

.color-invert .game.list>.roulette .icon {
    background-image: url('/attach/game/roulette-invert.svg');
}

.color-invert .game.list>.kuji .icon {
    background-image: url('/attach/game/kuji-invert.svg');
}

.color-invert .game.list>.fiftyfifty .icon {
    background-image: url('/attach/game/balance-invert.svg');
}

.color-invert .work .collapsible-box .data table {
    border-color: #666;
}

.color-invert .work .collapsible-box .data table .season {
    background-color: #666;
}

.color-invert .work .collapsible-box.open>.title {
    background-image: url('/attach/anime/arrow_up-invert.svg');
}

.color-invert .work .collapsible-box.close>.title {
    background-image: url('/attach/anime/arrow_down-invert.svg');
}

.color-invert .collapsible-box.open>.title {
    background-image: url('/attach/anime/arrow_up-invert.svg');
}

.color-invert .collapsible-box.close>.title {
    background-image: url('/attach/anime/arrow_down-invert.svg');
}

.color-invert .data-list {
    background-color: #181818;
}

.color-invert .data-list table td:hover {
    background-color: #181818;
}

.color-invert .hidden-modal .content {
    background-color: #181818;
}

.color-invert .assist p .add {
    color: #AAF;
}

.color-invert .collapsible-box .episode-box .multi {
    background-color: #55B;
}

.color-invert .collapsible-box .episode-box .add {
    color: #AAF;
}

.color-invert .hidden-modal-work>.content {
    background-color: #000;
}