:root {
  --row_bright: #eee;
  --row_dark: #ccc;
  --row_hover: #34495e; /*#023064;*/
  --row_hoverColor: #f9f9f9;
  --head_backColor: #abc;
  --menu_backColor: #3c506e;
  --menu_hover: #233755;
  --menu_ink: #f5f5f5;
}

.elsa-border-modal {
  border: 2px outset;
}

.elsa-text-shadow {
  text-shadow: 1px 1px 1px #0a0a0a;
}

@font-face {
  font-family: BentonBook;
  /*    src:url("#{resource['font:BentonSans-Book.otf']}") format("opentype");  */
  src: url('/font/BentonSans-Book.otf') format("opentype");
}

@font-face {
  font-family: BentonBook;
  font-weight: 800;
  /*    src:url("#{resource['font:BentonSans-Book.otf']}") format("opentype");  */
  src: url('/font/BentonSans-Bold.otf') format("opentype");
}

@font-face {
  font-family: ElsaFont;
  font-weight: 100;
  src: url('/font/Titillium-Thin.otf') format("opentype");
}

@font-face {
  font-family: ElsaFont;
  font-weight: 300;
  src: url('/font/Titillium-Light.otf') format("opentype");
}

@font-face {
  font-family: ElsaFont;
  font-weight: 400;
  src: url('/font/Titillium-Regular.otf') format("opentype");
}

@font-face {
  font-family: ElsaFont;
  font-weight: 600;
  src: url('/font/Titillium-Semibold.otf') format("opentype");
}

@font-face {
  font-family: ElsaFont;
  font-weight: 700;
  src: url('/font/Titillium-Bold.otf') format("opentype");
}

html {
  height: 100%;
}

body {
  /*   font-family:ElsaFont, BentonBook, Arial, Helvetica; */
  height: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows:auto auto 1fr;
}

.loginbox {
  width: 500px;
}

.inset-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

[type='checkbox'],
[type='radio'] {
  accent-color: #444;
}

.lbl_disabled {
  color: #c1c0c9;
}

/* titel login */
.title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.5rem;
  color: var(--menu_backColor);
  text-shadow: 1px 1px 2px #abb2b9;
  margin-left: 2rem;
}

.subtitle {
  font-weight: 200;
  font-size: 1.25rem;
}

.ithlogo {
  max-width: 30%;
  margin-right: 2rem;
  float: right;
}

.c_grid {
  display: grid;
  grid-template-columns:1fr;
  width: 100%;
  background: var(--menu_backColor);
  justify-items: end;
  align-items: stretch;
  font-variant: small-caps;
  padding: .5rem 0;
}

.i_grid {
  display: grid;
  grid-template-columns:1fr 1fr;
  width: 100%;
  justify-items: end;
  align-items: center;
  background: #fff;
  padding: .5rem 0;
}

.menu_info {
  justify-self: start;
}

.c_area {
  color: var(--menu_ink);
  font-weight: 700;
  margin-right: 1rem;
}

.c_area a:hover {
  text-decoration: underline;
  text-underline-offset: .25rem
}

.shadowH {
  box-shadow: 0 1px .5px 0 rgba(0, 0, 0, 0.25);
}

.dynamic-height {
  max-height: calc(100vh - 19rem);
}

dialog::backdrop {
  background-color: #eeeeeebc;
}

.sup1:after {
  color: brown;
  content: '1)';
  display: inline;
  /*	position: relative;
      top: -0.5em;
      font-size:70%;
  */
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

/* Password Info */
a.button {
  display: inline-block;
  border-radius: .125rem;
  box-sizing: border-box;
  border: 2px solid darkgrey;
  color: darkgrey;
  cursor: pointer;
  text-align: center;
  font-weight: 900;
  min-width: 1.75rem;
}

.dropdown {
  position: relative;
  padding: 0;
  margin-left: 1rem;
}

.dropdown summary {
  list-style: none;
  list-style-type: none;
}

.dropdown > summary::-webkit-details-marker {
  display: none;
}

.dropdown .container {
  display: grid;
  grid-template-rows:1fr;
  position: absolute;
  margin: 0;
  width: max-content;
  box-sizing: border-box;
  /*  transform: translate(2.75rem, -1.75rem);*/
  transform: translate(2.75rem, -1.75rem);
  background: #dedededd;
}

/* Close the dropdown with outside clicks */
.dropdown > summary::before {
  display: none;
}

.dropdown[open] > summary::before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}

details[open] summary ~ * {
  animation: open 500ms ease-in-out;
}

@keyframes open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}