:root {
  --hover-color: black;
}

body {
  font-family: sans-serif;
  line-height: 1.5;
  margin-top: 0;
  background-color: #f5f5f5;
  display: grid;
  grid-template-areas: "header header" "alert alert" "main sidebar" "footer footer";
  grid-auto-rows: min-content;
  grid-template-columns: 1fr 28%;
  grid-gap: 1em;
}

img.imageIcon {
  top: -2px;
  padding-left: 1em;
  padding-right: .5em;
  vertical-align: middle;
  border: 0;
}

.formValidationError {
  color: red;
  margin-left: .5em;
}

a, a:visited, .dummyLink {
  text-decoration: none;
  color: #0071EB;
  cursor: pointer;
  font-weight: bold;
}

a:hover {
  color: #0071EB;
  text-decoration: underline;
}

a:focus {
  color: white;
  background-color: var(--hover-color);
}

a[target="_new"] {
  color: dodgerBlue;
}

a[target="_new"]:hover {
  background-color: DodgerBlue;
  color: white;
}

.dummyLink {
  padding-left: 1em;
  cursor: pointer;
}

table, tr, td, th {
  font-size: small;
}

td {
  padding: .6em;
  background-color: white;
}

fieldset {
  border: 1px solid LightGray;
  border-radius: 1em;
  border-radius: 1em;
  padding: 1%;
  display: inline-block;
  vertical-align: top;
}

form fieldset {
  padding: 0;
  margin-bottom: 1em;
  border: 0;
  display: flex;
  align-items: center;
}

form {
  background-color: white;
  border-radius: 1em;
}

p.description {
  display: inline-block;
  padding: .2em;
}

input {
}

input,button, select, option  {
  font-family: sans-serif;
  font-size: inherit;
  border-radius: .6em;
}

input, select {
  width: 20em;
}

select {
  padding: .6em;
  background-color: white;
  border: 1px solid LightGray;
  border-radius: .6em;
}

input, button, textarea {
  border: 1px solid LightGray;
  border-radius: .6em;
  padding: .6em;
}

input:focus {
  background-color: #F9FFAA;
  border: 1px solid black;
}

button {
  background-color: white;
  color: black;
  text-align: left;
  border: 0;
  padding: .6em;
  margin-right: .5em;
  display: inline-block;
  min-height: 16px;
  min-width: 16px;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #488448;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

button:hover {
  background-color: #3a6f3a;
}

.paginate_enabled_next, .paginate_disabled_next {
  background-image: url(../images/icons/go-next.png);
}

.paginate_enabled_previous, .paginate_disabled_previous {
  background-image: url(../images/icons/go-previous.png);
}

button:enabled, .paginate_enabled_next, .paginate_enabled_previous {
  cursor: pointer;
}

button:disabled, .paginate_disabled_previous, .paginate_disabled_next {
  cursor: crosshair;
  background-color: LightGray;
  color: gray;
  border-color: gray;
}

label {
  display: inline-block;
  width: 10em;
  padding-right: 1em;
  vertical-align: top;
  text-align: right;
}

label.required:after {
  content: ' *';
  color: red;
}

hr {
  border: 0;
  border-bottom: 1px dashed black;
}

h1 {
  font-size: 12pt;
}

h1 span.tld {
  color: gray;
}

h2:first-child {
  margin-top: 0;
}

h2 {
  color: #2f2f2f;
  font-size: 13pt;
}

h3 {
  margin-top: 0;
  margin-bottom: 0.3em;
  color: #646464;
  border-bottom: 1px solid #806600;
}

h4 {
  text-decoration: underline;
}

th {
  margin: 0;
  color: #424242;
  padding: .6em;
  margin-top: 1em;
  text-align: left;
  color: black;
}

main {
  grid-area: main;
}

.infobox.nopadding {
  padding: 0;
  padding-bottom: 1em;
}

.infobox.nopadding h2 {
  padding-left: .9em;
  padding-top: 1em;
}

.infobox.nopadding p {
  padding-left: 1em;
}

.infobox.nopadding td:first-child, .infobox.nopadding th:first-child {
  padding-left: 1.2em;
}

main.minimal {
  margin: auto;
  margin-top: 3em;
  width: 50%;
  max-width: 600px;
  display: block;
  grid-column-start: main;
  grid-column-end: sidebar;
}

main.minimal h1 {
  text-align: center;
}

aside {
  display: inline-block;
  vertical-align: top;
  grid-area: sidebar;
}

.infobox {
  padding: 1em;
  border-radius: 1em;
  border-radius: 1em;
  background-color: #fff;
  margin-bottom: 1em;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.infobox:last-child {
  margin-bottom: 0;
}

header {
  background-color: #fff;
  padding: 1em;
  border-radius: 0 0 1em 1em;
  border-radius: 0 0 1em 1em;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-transform: uppercase;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  grid-area: header;
}

h1 {
  flex-grow: 1;
  margin: 0;
  padding: 0;
}

nav {
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

div#advertisingBanner {
  width: 500px;
  height: 100px;
  background-color: #efefef;
  padding: 1em 2em .5em 2em;
  margin: 0 auto 2em auto;
  border-radius: 0 0 1em 1em;
  border-radius: 0 0 1em 1em;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

ul {
  line-height: 2;
  list-style: disclosure-closed;
  padding-left: 1.2em;
}

ul#mainNavigation {
  list-style: none; padding: 0;
  margin: 0;
}

ul#mainNavigation li {
  display: inline-block;
  padding-right: 1em;
}

footer {
  text-align: center;
  color: gray;
  border-top: 1px dashed gray;
  grid-area: footer;
}

table {
  width: 100%;
  border-collapse: collapse;
}

tr:nth-of-type(even) td {
  background-color: #fafafa;
}

tr:hover td {
  background-color: beige;
}

th.sorting_asc {
  background-image: url(../images/icons/go-up.png);
}

th.sorting_desc {
  background-image: url(../images/icons/go-down.png);
}

div.paralellContainer {
  display: inline-block;
  width: 45%;
  margin-right: 1%;
  vertical-align: top;
}

#licenseBlock {
  padding: 2em;
  background-color: white;
  text-align: center;
  border: 1px solid LightGray;
}

.alert {
  background-color: beige;
  padding: .4em;
  border-radius: 1em;
  text-align: center;
  grid-area: alert;
}

li.iconCreate {
  list-style-image: url('../images/icons/create.png');
}

.karmaBad {
  color: red;
  font-weight: bold;
}

p.notification {
  border-radius: 1em;
  background-color: white;
  padding: 1em;
}

.ui-autocomplete {
  background-color: #efefef;
  list-style: none;
  display: inline-block;
  padding: .2em;
  border: 1px solid gray;
  font-size: x-small;
}

dt:after {
  content: ':';
}

tr.stale {
  text-decoration: line-through;
}

.subtle {
  color: gray;
}

#monthHeader {
  text-align: center;
}

#calPrev {
  text-align: right;
}

#dayNames {
  font-weight: bold;
}

img.bannerSmall {
  width: 200px;
}

img.bannerFit {
  max-width: 100%;
}

ul.nextEvents {
  list-style: none;
  padding: 0;
}

ul.nextEvents li {
  border-bottom: 1px solid #efefef;
  margin-bottom: .8em;
}

ul.property-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

ul.property-list li {
  margin-bottom: 1em;
}

ul.property-list li img {
  margin-right: .5em;
  width: 1.6em;
  vertical-align: top;
}

h1 a, h1 a:visited {
  color: black;
}

h1 a:focus {
  color: white;
}

img.favicon {
  background-color: white;
  padding: .3em;
  border-radius: 1em;
  border: 2px solid #999;
}

img.favicon:hover {
  border: 2px solid #0071EB;
  cursor: pointer;
}

td.warn {
  background-color: #f7f7ae !important;
}

td.audit {
  background-color: lightskyblue !important;
}

.gm-style-iw-d h2 {
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
  }

  h1 a, h1 a:visited {
    color: #efefef;
  }

  header {
    background-color: #1e1e1e;
  }

  h2, .infobox:hover h2 {
    color: #efefef;
  }

  .infobox {
    color: #ddd;
    background-color: #1e1e1e;
    box-shadow: #000 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  }
  
  .infobox {
    border: .3em solid #000;
  }

  a, a:visited, a:hover {
    color: skyblue;
  }

  .alert {
    background-color: #c6c660;
  }

  form {
    background-color: #1e1e1e;
  }

  ul.nextEvents li {
    border-bottom: 1px solid #444;
  }

  td {
    background-color: #1e1e1e;
  }

  th {
    background-color: #1e1e1e;
    color: #ddd;
    text-transform: uppercase;
  }

  tr:nth-of-type(even) td {
    background-color: #2e2e2e;
  }

  tr:hover td {
    background-color: sienna;
  }

  .alert {
    color: black;
  }
}

@media screen and (max-device-width: 1024px) {
  html {
  }

  body {
    font-size: 1em;
    padding: 0;
    margin: 0;
    grid-template-areas: "header" "alert" "main" "sidebar" "footer";
    grid-template-columns: 1fr;
  }

  nav {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .infobox {
    border-radius: 0;
  }

  div.paralellContainer {
    width: 100%;
  }

  form {
    padding: .5em;
    margin: .5em;
  }

  td.collapseable, th.collapseable {
    display: none;
  }

  main.minimal {
    width: 100%;
  }
}