:root {
   --back-color: white;
   --text-color: #003366;
   
   --red-text:    red;
   --yellow-text: #b8860b;
   --blue-text:   blue;
   --green-text:  #008000;
   --gray-text:   #808080;

   --red-highlight:    #ffb3b3;
   --yellow-highlight: #fff9bf;
   --blue-highlight:   #bfe4ff;
   --green-highlight:  #a3d7a3;
   --orange-highlight: #ffc266;
   --gray-highlight:   #bbcccc;
}

body {
	color: #003366;
	color: var(--text-color);
	background-color: white;
	background-color: var(--back-color);
	font-size: 8pt;
	font-family: Arial;
	padding: 0;
	margin: 0;
}

H1          { font-size: 16pt; }
H2          { font-size: 14pt; }
H3          { font-size: 12pt; }
H4          { font-size: 10pt; }

HR          { color: #ff9900; background-color: #ff9900; }
#content HR { color: #bacde3; background-color: #bacde3; }

.bold         { font-weight: bold }
.italic       { font-style:  italic }
.bold_italic  { font-weight: bold; font-style: italic }


.default_text_color { color: #003366;  var(--text-color); }

.red_text     { color: red;      color: var(--red-text); }
.yellow_text  { color: #b8860b;  color: var(--yellow-text); }
.blue_text    { color: blue;     color: var(--blue-text); }
.green_text   { color: #008000;  color: var(--green-text); }
.gray_text    { color: #808080;  color: var(--gray-text); }

.red_highlight    { background-color: #ffb3b3;  background-color: var(--red-highlight); }
.yellow_highlight { background-color: #fff9bf;  background-color: var(--yellow-highlight); }
.blue_highlight   { background-color: #bfe4ff;  background-color: var(--blue-highlight); }
.green_highlight  { background-color: #a3d7a3;  background-color: var(--green-highlight); }
.orange_highlight { background-color: #ffc266;  background-color: var(--orange-highlight); }
.gray_highlight   { background-color: #bbcccc;  background-color: var(--gray-highlight); }

.error_text  { color: red;     font-weight: bold; font-size: 10pt;  color: var(--red-text); }
.result_text { color: #008000; font-weight: bold; font-size: 10pt;  color: var(--green-text); }

.alert-warning {
   background-color: lightgoldenrodyellow;
   color: black;
   font-size: larger;
   padding: 0.5em;
}
.alert-danger {
   background-color: lightpink;
   color: black;
   font-size: larger;
   padding: 0.5em;
}

#header {
   background-color: #bacde3;
}

#logo {
	float: left;
	margin: 0 1em 0 1em;
}

#logo img {
	height: 50px;
}

#trademark {
   margin: 0 1em 0 1em;
   font-weight: bold;
   font-size: 11pt;
}

#content {
	padding: 1em 3em;
}

#footer {
   position: fixed;
   bottom: 0;
   width: 100%;
   background-color: #bacde3;
}

#contactUs {
   padding: 0 1em 0 1em;
}

.heading {
   font-variant: small-caps;
}

.contact_title {
   font-weight: bold;
   font-size: 11pt;
   color: #e17009;
}

.contact_details {
   font-size: 10pt;
}

input[type=submit] {
	background-color: #bacde3;
	box-shadow: 4px 4px 2px #003366;
	border-radius: 5px;
}

@media screen and (prefers-color-scheme: dark) {
   :root {
      --back-color: #222222;
	  --text-color: #bdc1c1;
	  
	  --red-text:    #e60000;
      --yellow-text: #b8860b;
      --blue-text:   #6e96c4;
      --green-text:  #00cc00;
      --gray-text:   #cccccc;

      --red-highlight:    rgba(153,0,0,0.9);
      --yellow-highlight: rgba(214,184,0,0.9);
      --blue-highlight:   rgba(30,92,153, 0.7);
      --green-highlight:  #006600;
      --orange-highlight: #cc7a00;
      --gray-highlight:   #999999;
   }
   #header, #footer {
      background-color: #113355;
   }
   #logo img {
      filter: brightness(5);
   }
   input[type=submit] {
      background-color: #aaaaaa;
      box-shadow: none;
   }
   a {
      color: var(--text-color);
   }
}