:root
{
	--themeColor: #2c5caa;
	--themeColorDark: #204177;
	--themeColorLight: #4479ce;
	--themeColorLighter: #558ae0;
	--themeColorLightest: #a4d4ff;
	--lightText: white;
	--darkText: #111;
	--mediumGrey: #888;
	--lightGrey: #ccc;
	--darkGrey: #333;
	--lighterGrey: #DDD;
	--lightestGrey: #d9d9d9;
	--white: white;
	--black: black;
}

*
{
	color: var(--darkText);
}

body
{
	background-color: var(--lightestGrey);
}

input, select, textarea
{
	color: var(--darkText);
	background-color: var(--white);
	border: 1px solid var(--mediumGrey);
}

.pure-table {
	border: 1px solid var(--mediumGrey);
}

.pure-table .divider
{
    background-color: var(--mediumGrey);
}

.pure-table td
{
	border-left: 1px solid var(--lightGrey);
}

.pure-table tr
{
	background-color: var(--white);
}

.pure-table th
{
	color: var(--darkText);
	background-color: var(--lighterGrey);
}

.pure-table td:first-child
{
	border-left: 1px solid var(--mediumGrey);
}

.pure-table thead, thead span
{
	color: var(--darkText);
}

thead tr, th, thead td
{
	background-color: var(--lightGrey);
	border: 1px solid var(--mediumGrey);
}

.pure-table .pink
{
	background-color: #ffafaf;
}

.pure-table .green
{
	background-color: #dcffd3;
}

.pure-table .highlighted
{
	background-color: #5185ff;
	font-weight: bold;
}

.pure-table .weakHighlight
{
	background-color: #3960ba;
}

tr:nth-child(even)
{
	background-color: var(--lighterGrey);
}

.dropdown-content
{
	background-color: var(--themeColorLight);
}

.subdropdown-content
{
	background-color: var(--themeColorLighter);
}

#nav .dropdown:hover > span, #nav > div > a:hover
{
	background-color: var(--themeColorDark);
}

#nav
{
	background-color: var(--themeColor);
}

#nav, #nav * :not(input)
{
	color: var(--lightText);
}

li:hover
{
	background-color: var(--themeColorDark);
}

.showClickable:hover
{
	background-color: var(--themeColorLightest);
}

.clickableTable tr:hover
{
	background-color: var(--themeColorLightest);
}

::placeholder
{
	color: var(--darkText);
}

button, .buttonLink
{
	background-color: var(--themeColor);
	color: var(--white);
}

button:hover, .buttonLink:hover
{
	background-color: var(--themeColorLighter);
}

button:active, .buttonLink:active
{
	background-color: var(--themeColorLightest);
}

button:disabled, .buttonLink:disabled
{
	background-color: var(--mediumGrey);
	color: var(--lightestGrey);
	border-color: var(--lightestGrey);
}

.modal-content {
	background-color: var(--lighterGrey);
}

/* The modal Close Button */
.close
{
	color: var(--darkGrey);
}

.close:hover, .close:focus
{
	color: var(--black);
}

.toolbar
{
	background-color: var(--black);
}

.toolbar, .toolbar label input
{
	color: var(--darkText);
}

.toolbar span, .toolbar label
{
	color: var(--lightText);
}

.loader
{
	border: 4px solid var(--lightestGrey);
	border-top: 4px solid var(--themeColor);
}

caption
{
	background-color: var(--themeColorLight);
	color: var(--lightText);
}

label
{
	border-color: var(--themeColorLighter);
}

.border
{
	border-color: var(--themeColorLighter);
}