/******************************************************************************/
/* Colors for Light mode */
@media (prefers-color-scheme: light)
{
  :root
  {
    --color: #0F0F0F;
    --background: #F0F0F0;
    --link: #0033cc;
    --disabledColor: #6d6d6d;
    --checkedBackground: #E1E1E1;
    --tablehead: #D0D0D0;
    --tabletreven: #E5E5E5;
    --tabletrhover: rgba(0, 0, 0, 0.3);
  }
}

/******************************************************************************/
/* Colors for Dark mode */
@media (prefers-color-scheme: dark)
{
  :root
  {
    --color: #EEEEEE;
    --background: #222222;
    --link: #809fff;
    --disabledColor: #929292;
    --checkedBackground: #4E4E4E;
    --tablehead: #444444;
    --tabletreven: #333333;
    --tabletrhover: rgba(255, 255, 255, 0.3);
  }
}

/******************************************************************************/
/* Main CSS */
body
{
    background: var(--background);
    color: var(--color);
}

a
{
    color: var(--link);
}
a:hover
{
    opacity: 0.5;
}

select,
input,
button
{
    color: var(--color);
    background: var(--background);
    border: solid 1px var(--color);
}

option
{
    color: var(--color);
    background: var(--background);
}
option:checked
{
    background: var(--checkedBackground);
}
option:disabled
{
  color: var(--disabledColor);
}

table thead
{
    background: var(--tablehead);
}
table tbody tr:nth-child(even)
{
    background: var(--tabletreven);
}

table tbody tr:hover, table tbody tr:nth-child(even):hover
{
    background: var(--tabletrhover);
}

/******************************************************************************/
/* For mobile web browsers */
@media only screen and (max-width: 600px)
{
}