@charset "UTF-8";
/*
0 - 600px:      PDA / Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- pda
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes highlightBlue {
  0% {
    background-color: white;
  }
  10% {
    background-color: rgb(0, 191, 255);
  }
  100% {
    background-color: white;
  }
}
body {
  box-sizing: border-box;
  background: #ffffff;
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior: none;
}

html {
  overscroll-behavior: none;
}

::selection {
  background-color: #07689f;
  color: #fff;
}

/* Im Vollbildmodus das Scrollen aktiviert lassen */
body:fullscreen {
  overflow: scroll !important;
}

body:-ms-fullscreen {
  overflow: scroll !important;
}

body:-webkit-full-screen {
  overflow: scroll !important;
}

body:-moz-full-screen {
  overflow: scroll !important;
}

html[data-useragent*=WT6000] {
  font-size: 22px;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  /*font-size: 16px;*/
  line-height: 1.7;
  color: #777;
}

.paragraph {
  font-size: 1rem;
}
.paragraph:not(:last-child) {
  margin-bottom: 1.5rem;
}

.info-text {
  font-size: 1rem;
}
.info-text:not(:last-child) {
  margin-bottom: 0.3rem;
}

.label {
  font-size: 1rem;
  margin-right: 0.5rem;
  margin-bottom: 0px;
}

a {
  color: #07689f;
  text-decoration: none;
}

@media only screen and (max-width: 56.25em) {
  .d-tab-port-none {
    display: none !important;
  }
}

@media only screen and (max-width: 600px) {
  .d-pda-none {
    display: none !important;
  }
}

.miw-6r {
  min-width: 6rem;
}

.miw-7r {
  min-width: 7rem;
}

.miw-8r {
  min-width: 8rem;
}

.mw-200 {
  max-width: 200px;
}
@media only screen and (max-width: 600px) {
  .mw-200 {
    max-width: 100%;
  }
}

.mw-400 {
  width: 400px;
}
@media only screen and (max-width: 56.25em) {
  .mw-400 {
    max-width: 100%;
  }
}

.mw-600 {
  width: 600px;
}
@media only screen and (max-width: 56.25em) {
  .mw-600 {
    max-width: 100%;
  }
}

.highlightBlue {
  animation: highlightBlue 4s ease-out;
}

.k-pager-numbers {
  padding-inline-start: 0px;
  margin: 0px;
}

@media only screen and (max-width: 600px) {
  .k-window-titlebar {
    padding: 0.3rem 0.3rem;
  }
}

.k-window-title {
  white-space: normal;
}

/* if you add the no-group-header Class to the grid, the following rule 
    will hide the group header so the user cannot change grouping on their own */
.no-group-header .k-grouping-header {
  display: none;
}

/* if you add the hide-first-x-button Class to the grid, the following rule
    will hide the [x] button from the first group indicator, so if you always keep it as the first one
    the user won't be able to remove it on their own.
    If you remove the :first-of-type pseudoclass, you can remove the [x] buttons from all groups
*/
.hide-first-x-button .k-grouping-header .k-indicator-container:first-of-type .k-button.k-button-icon.k-bare {
  display: none;
}

/*
    Angepasster Wizard für PDA mit weniger Rand / Abständen
*/
.telerik-wizard-pda {
  padding: 0;
}

.telerik-wizard-pda .k-wizard-steps {
  margin-top: 0;
}

/* Blazor 3.0 macht Buttons immer qadratisch*/
.k-icon-button {
  aspect-ratio: auto;
}

.navbar-header {
  padding: 0.4rem 1rem;
  background-color: #fff;
  border-bottom: 1px solid #dee2e6;
  min-height: 3.8rem;
  z-index: 2;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
.navbar-header__toggle-sidebar {
  padding: 0.5rem 0.7rem;
}
.navbar-header__title {
  margin: 0.2rem 0.5rem;
  font-size: 1.3rem;
}
@media only screen and (max-width: 600px) {
  .navbar-header__title {
    display: none;
  }
}
.navbar-header__menu {
  display: flex;
  flex-direction: row;
  padding-left: 0;
  margin-top: 0 !important;
  margin-left: auto !important;
  margin-bottom: 0;
  list-style: none;
}
.navbar-header__menu-link {
  display: block;
  padding: 0.5rem 1rem;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

.sidebar-heading {
  border-bottom: 1px solid #dee2e6;
  min-height: 3.8rem;
}

.page {
  background-color: #fff;
  padding: 3rem;
}

#page-content-wrapper {
  background-color: #fff;
}

#sidebar-wrapper {
  min-height: 100dvh;
  -webkit-transition: margin 0.25s ease-out;
  -moz-transition: margin 0.25s ease-out;
  -o-transition: margin 0.25s ease-out;
  transition: margin 0.25s ease-out;
  z-index: 1;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
}

#page-content-wrapper {
  min-width: 100vw;
  display: flex;
  flex-direction: column;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

#wrapper {
  overflow-x: hidden;
}

.page-content {
  padding: 1.5rem;
}

.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 1px;
}

@media (min-width: 768px) {
  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }
}
.login-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.login-box {
  border-radius: 1rem;
  background: #fff;
  padding: 1.5rem;
  width: 90%;
  max-width: 28rem;
  position: relative;
  padding: 0px;
  box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.3);
  text-align: center;
}
.login-box__header {
  padding: 2rem;
}
@media only screen and (max-width: 600px) {
  .login-box__header {
    padding: 0.5rem 2rem;
  }
}
.login-box__footer {
  background-color: #f6f6f6;
  border-top: 1px solid #dce8f1;
  padding: 1.5rem;
  text-align: center;
  border-radius: 0 0 1rem 1rem;
}
@media only screen and (max-width: 600px) {
  .login-box__footer {
    padding: 0.5rem 2rem;
  }
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  grid-gap: 2rem;
  grid-auto-rows: 1fr;
}

.module-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  border: 1px solid #dee2e6;
  outline: none;
}
.module-btn__icon {
  font-size: 2rem;
  margin-top: 0.5rem;
}
.module-btn__title {
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  margin: 0.5rem;
  margin-top: 0;
  word-break: normal;
  hyphens: auto;
}
@media only screen and (max-width: 600px) {
  .module-btn__title {
    font-size: 1rem;
  }
}

.module-btn:hover {
  background-color: #fdfdfd;
  box-shadow: inset 0 0 5px #f8f9fa;
}

.inv-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.inv-liste__group-header {
  grid-column-start: 1;
  grid-column: 1/-1;
  background-color: lightgray;
  padding: 5px;
}

.inv-item {
  display: flex;
  flex-direction: column;
  background-clip: border-box;
  border: 0 solid transparent;
  border-radius: 0.25rem;
}
.inv-item__body {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 10px;
}