:root {
    --main-mortal-mid-color: rgba(24, 78, 119, 0.4);
    --main-mortal-dim-color: rgba(24, 78, 119, 0.2);

    --main-werewolf-mid-color: rgba(88, 49, 1, 0.4);
    --main-werewolf-dim-color: rgba(88, 49, 1, 0.2);

    --main-mage-mid-color: rgba(83, 33, 89, 0.4);
    --main-mage-dim-color: rgba(83, 33, 89, 0.2);

    --main-vampire-mid-color: rgb(121, 8, 19, 0.4);
    --main-vampire-dim-color: rgb(121, 8, 19, 0.2);

    --main-changeling-mid-color: rgba(42, 92, 165, 0.4);
    --main-changeling-dim-color: rgba(42, 92, 165, 0.2);

    --main-hunter-mid-color: rgba(191, 67, 18, 0.4);
    --main-hunter-dim-color: rgba(191, 67, 18, 0.2);

    --main-demon-mid-color: rgba(226, 88, 34, 0.4);
    --main-demon-dim-color: rgba(226, 88, 34, 0.2);

    --main-wraith-mid-color: rgba(133, 238, 199, 0.4);
    --main-wraith-dim-color: rgba(195, 241, 224, 0.2);

    --main-creature-mid-color: rgba(72, 71, 71, 0.4);
    --main-creature-dim-color: rgba(72, 71, 71, 0.2);

    --darkmode-black: rgb(30, 30, 30);
    --darkmode-white: rgb(255,255,255);

    --darkmode-background-light: rgb(225, 225, 225);
    --darkmode-background-dark: rgb(90, 90, 90);

    --darkmode-area10-background: rgb(50, 50, 50);

    --darkmode-textcolor-light: rgb(90, 90, 90);
    --darkmode-textcolor-dark: rgb(225, 225, 225);
}

.wod-theme-dark.wod20 .window-content {
    background: var(--darkmode-black);
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20 .sheet-area,
.wod-theme-dark.wod20 .dialog-area {
    background: var(--darkmode-area10-background);
    border-radius: 10px;
    margin-top: 2px;
    margin-bottom: 3px;
    padding-left: 2px;
    padding-bottom: 1px;
}

.wod-theme-dark.wod20 .item-row-area.power-row {
  background: var(--darkmode-area10-background);
}

.wod-theme-dark.wod20 input {
    color: var(--darkmode-textcolor-dark);
    background: var(--darkmode-background-dark); 
}

.wod-theme-dark.wod20 .locked input,
.wod-theme-dark.wod20 .locked select,
.wod-theme-dark.wod20 select option,
.wod-theme-dark.wod20 select.editable,
.wod-theme-dark.wod20 input.editable {
    background: var(--darkmode-background-dark); 
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20 optgroup {
    background: var(--darkmode-background-dark);
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20 select option[value=""],
.wod-theme-dark.wod20 .editor .tox-editor-container,
.wod-theme-dark.wod20 .textarea {
    background: var(--darkmode-background-dark);
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20 button.disabled {
    color: var(--darkmode-textcolor-dark) !important;
    background: var(--darkmode-background-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
} 

.wod-theme-dark.wod20 .vrollable:hover,
.wod-theme-dark.wod20 .vrollable:focus {
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod-dialog button .eon-roller__flag {
    color: var(--darkmode-textcolor-light);
}

.wod-theme-dark.wod-dialog button .eon-roller__flag:hover, 
.wod-theme-dark.wod-dialog button .eon-roller__flag:focus {
    color: var(--darkmode-textcolor-light);
}

.wod-theme-dark.wod20 .secondHeadlineTabs {
    color: #fff; 
    font-weight: normal;
}

.wod-theme-dark.wod20 .secondHeadlineTabs:hover {
    color: var(--darkmode-textcolor-light); 
    font-weight: normal;
}

.wod-theme-dark.wod-sheet .sheet-headline,
.wod-theme-dark.wod-item .sheet-headline {
    font-weight: normal;
}

.wod-theme-dark.wod20 .headlineText {
    font-weight: normal;
}

.wod-theme-dark.wod20 .headlineGroup {
    font-weight: normal;
}

.wod20 .headlineList {	
    font-weight: bold;
}

.wod-theme-dark.wod-sheet .sheet-banner .sheet-banner-text {
    width: 25%;
    display: inline-block;
}

.wod-theme-dark.wod-sheet .sheet-banner-text {
    background: var(--darkmode-area10-background);
    border-radius: 10px;
}

.wod-theme-dark.wod-sheet.mortal .sheet-banner-text {
    opacity: 1;
}

.wod-theme-dark.wod-sheet.vampire .sheet-banner-text {
    display: initial;
}

.wod-theme-dark.wod-sheet.mage .sheet-banner,
.wod-theme-dark.wod-sheet.vampire .sheet-banner {
    background: transparent;
}

.wod-theme-dark.wod-sheet .sheet-banner-small {
    /* background: var(--darkmode-background-dark);  */
    width: 95%;
    display: inline-block;
    border-radius: 10px;
    max-width: 250px;
    margin-left: 2px;
    margin-right: 2px;
}

.wod-theme-dark.wod-sheet .tooltip .tooltiptext {
    background-color: #121212;
    color: #e0e0e0;
}

.wod-theme-dark.wod-sheet.mage .sheet-banner-small,
.wod-theme-dark.wod-sheet.vampire .sheet-banner-small {
    background: transparent;
}

.wod20.wod-theme-dark .item-notice,
.wod20.wod-theme-dark .item-create,
.wod20.wod-theme-dark .fa-toggle-on {
  color: rgb(9, 142, 9);
}

.wod20.wod-theme-dark .item-warning {
  color: rgb(223, 147, 6);
}

.wod20.wod-theme-dark .item-delete,
.wod20.wod-theme-dark .fa-toggle-off {
  color: rgb(166, 0, 0);
}

.wod20.wod-theme-dark .item-row-area {
    border-bottom: 0px solid var(--main-full-color);
}

.wod20.wod-theme-dark .condition-checkbox {
    font-weight: normal;
}

/* Migration Wizard Dark Mode Styles */
.wod-theme-dark.wod20.migration-wizard-dialog .dialog-area {
    background: var(--darkmode-area10-background) !important;
    color: var(--darkmode-textcolor-dark);
    border-color: var(--main-full-color);
}

.wod-theme-dark.wod20.migration-wizard-dialog .infobox {
    background: var(--darkmode-area10-background);
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20.migration-wizard-dialog .wizard-page-indicator {
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20.migration-wizard-dialog .wizard-message-area,
.wod-theme-dark.wod20.migration-wizard-dialog .wizard-message-content {
    background: var(--darkmode-area10-background);
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20.migration-wizard-dialog .wizard-checkbox-area {
    background: var(--darkmode-area10-background);
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20.migration-wizard-dialog .wizard-checkbox-area label {
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20.migration-wizard-dialog .wizard-checkbox-area span {
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20.migration-wizard-dialog .migration-wizard-buttons {
    border-top-color: var(--main-full-color);
}

.wod-theme-dark.wod20.migration-wizard-dialog .headlineGroup {
    color: var(--darkmode-textcolor-dark);
}

/* Settings Dialog Dark Mode Styles */
.wod-theme-dark.wod20rule-dialog .window-content {
    background: var(--darkmode-black);
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20rule-dialog .setting-dialog {
    background: var(--darkmode-black);
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20rule-dialog .settings-list {
    background: var(--darkmode-black);
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20rule-dialog .module-header {
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20rule-dialog .setting-area {
    background: var(--darkmode-area10-background);
    color: var(--darkmode-textcolor-dark);
    border-color: var(--main-full-color);
}

.wod-theme-dark.wod20rule-dialog .form-group {
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20rule-dialog label {
    color: var(--darkmode-textcolor-dark);
}

.wod-theme-dark.wod20rule-dialog .notes {
    color: var(--darkmode-textcolor-dark);
    opacity: 0.8;
}

.wod-theme-dark.wod20rule-dialog .sheet-footer {
    background: var(--darkmode-area10-background);
    border-top-color: var(--main-full-color);
}

.wod-theme-dark.wod20rule-dialog .sheet-footer button {
    color: var(--darkmode-textcolor-dark);
    background: var(--darkmode-background-dark);
}

.wod-theme-dark.wod20rule-dialog .sheet-footer button:hover {
    background: var(--darkmode-background-light);
}