@media (prefers-color-scheme : light), (prefers-color-scheme : no-preference)
{
    .background.green
    {background : lightgreen !important;}

    .background.blue
    {background : lightblue !important;}

    .background.yellow
    {background : yellow !important;}

    .background.lightyellow
    {background : lightyellow !important;}

    .background.red
    {background : #F5C6F6 !important;}

    .background.darkred
    {background : red !important;}

    .background.orange
    {background : orange !important;}

    .background.pink
    {background : hotpink !important;}

    .highlight-read-only
    {background-color : #dddddd !important;}

    button.determination.background.green,
    td.determination.background.green,
    .determination.background.green
    {
        color            : black !important;
        background-color : #90EE90 !important;
    }

    td.determination.background.orange,
    .determination.background.orange
    {
        color            : black !important;
        background-color : #FFA500 !important;
    }

    td.determination.background.yellow,
    .determination.background.yellow
    {
        color            : black !important;
        background-color : #FFFF00 !important;
    }

    button.determination.background.red,
    td.determination.background.red,
    .determination.background.red
    {
        color            : black !important;
        background-color : #F5C6F6 !important;
    }

    td.determination.background.purple,
    .determination.background.purple
    {
        color            : black !important;
        background-color : #DC8ADD !important;
    }
}

@media (prefers-color-scheme : dark)
{
    html,
    body,
    .ui.tabular.menu .item
    {
        color      : white;
        background : #313638;
    }

    .ui.table,
    .ui.table > thead > tr > th,
    .ui.table > tfoot > tr > td,
    .ui.button,
    .ui.button:hover,
    .ui.search > .results .result:hover,
    .ui.label,
    .ui.tabular.menu .active.item
    {
        background : #282A2B;
    }

    tr,
    .ui.modal,
    .ui.modal > .header,
    .ui.modal > .content,
    .ui.modal > .actions,
    .ui.segment,
    textarea,
    .ui.input > input,
    .ui.input > input:focus,
    .ui.form input:not([type]),
    .ui.form input:not([type]):focus,
    .ui.form input[type='file'],
    .ui.form input[type='file']:focus,
    .ui.form input[type='password'],
    .ui.form input[type='password']:focus,
    .ui.form textarea,
    .ui.form textarea:focus,
    .ui.input textarea,
    .ui.input textarea:focus,
    .ui.selection.dropdown,
    .ui.selection.dropdown:focus,
    .ui.selection.dropdown .menu > .item,
    .ui.search > .results .result,
    .ui.search .results:focus,
    .ui.top.attached.header
    {
        background : #1A1B1C;
        color      : white;
    }

    .ui.inverted.dimmer,
    .ui.vertical.menu,
    .ui.menu,
    .ui.menu .dropdown.item .menu,
    .ui.success.message
    {
        background : #1A1B1C;
    }

    .ui.header,
    .ui.divider,
    .ui.table > thead > tr > th,
    .ui.table > tfoot > tr > td,
    .ui.sortable.table > thead > tr > th,
    .ui.form:not(.inverted) .field > label:not(.button),
    .ui.vertical.menu .item,
    .ui.menu .item,
    .ui.search > .results .result .title,
    .ui.search > .results .result .title:focus,
    .ui.table tbody tr td.selectable:hover,
    .ui.table tbody tr td.selectable:focus,
    .ui.button i:hover,
    .ui.button,
    .ui.label,
    .ui.checkbox input.hidden + label,
    .ui.tabular.menu .active.item,
    .ui.toggle.checkbox label,
    .ui.toggle.checkbox input:checked ~ label,
    .ui.input > input::selection,
    .ui.input i,
    .ui.list .list > .item .header,
    .ui.list > .item .header,
    .ui.table > thead > tr > th.sorted,
    .ui.sortable.table > thead > tr > th.sorted,
    .ui.progress > .label
    {
        color : white;
    }

    .list a:link,
    .ui.menu .ui.dropdown .menu > .item,
    .ui.menu .ui.dropdown .menu > .item:hover,
    .ui.menu .ui.dropdown .menu > .item:focus,
    .ui.menu .ui.dropdown .menu > .selected.item
    {
        background : #1A1B1C !important;
    }

    i.blue.icon:hover,
    i.icon.black,
    .ui.menu .ui.dropdown .menu > .item,
    .determination.background
    {
        color : white !important;
    }

    .ui.menu a.item:hover,
    .ui.selection.dropdown .menu > .item:hover,
    .ui.button:hover,
    .ui.tabular.menu .item:not(.active):hover,
    .ui.menu .link.item:hover,
    .ui.menu a.item:hover,
    .ui.menu .dropdown.item:hover,
    .ui.table > thead > tr > th:hover,
    .ui.sortable.table > thead > tr > th:hover,
    .ui.table > thead > tr > th.sorted:hover,
    .ui.sortable.table > thead > tr > th.sorted:hover
    {
        color : #2185D0;
    }

    .ui.menu .ui.dropdown .menu > .item:hover,
    .ui.menu .ui.dropdown .menu > .selected.item
    {
        color : #2185D0 !important;
    }

    .ui.ui.menu .item.disabled,
    .selectable:hover
    {
        color : dimgrey;
    }

    .ui.loading.form::before
    {
        background : #31363880;
    }

    .ui.progress,
    .selectable:hover,
    .ui.toggle.checkbox label::before,
    .ui.toggle.checkbox label:hover::before
    {
        background : dimgrey;
    }

    .ui.table > thead > tr > th
    {
        border-bottom : thin solid grey;
    }

    .ui.table > tfoot > tr > td
    {
        border-top : thin solid grey;
    }

    .ui.celled.table > tbody > tr > td,
    .ui.celled.table > tbody > tr > th,
    .ui.celled.table > tfoot > tr > td,
    .ui.celled.table > tfoot > tr > th,
    .ui.celled.table > thead > tr > th,
    .ui.celled.table > tr > td,
    .ui.celled.table > tr > th,
    .ui.celled.sortable.table > thead > tr > th:not(:first-child)
    {
        border-left : thin solid grey;
    }

    .ui.table tr td.over, .ui.table tr td.last
    {
        box-shadow : inset 0 1px 0 0 lightgrey, inset 0 -1px 0 0 lightgrey;
    }

    .ui.primary.button:hover
    {
        color : black;
    }

    .ui.attached.segment:not(.basic),
    .ui.form input:not([type]),
    .ui.form input[type='password'],
    .ui.search.dropdown > input.search,
    .ui.multiple.search.dropdown,
    .ui.selection.dropdown .menu > .item,
    .ui.selection.active.dropdown .menu,
    .ui.selection.simple.dropdown:hover .menu,
    .ui.form textarea
    {
        border : thin solid #313638 !important;
    }

    .ui.dropdown .menu > .divider
    { background : white}

    .ui.form input:not([type]).red
    {background : darkred !important;}

    .background.blue
    {background : darkslategray !important;}

    .background.green
    {background : darkgreen !important;}

    .background.orange
    {background : darkorange !important;}

    .background.yellow
    {background : orange !important;}

    .background.lightyellow
    {background : darkolivegreen !important;}

    .highlight-read-only
    {background-color : #333333 !important;}

    .background.green
    {background-color : darkgreen !important;}

    td.determination.background.orange,
    .determination.background.orange
    {
        color            : black !important;
        background-color : orange !important;
    }

    td.determination.background.yellow,
    .determination.background.yellow
    {
        color            : black !important;
        background-color : yellow !important;
    }

    .background.red
    {background-color : darkred !important;}

    td.determination.background.purple,
    .determination.background.purple
    {background-color : rebeccapurple !important;}
}