html {
  height: 100%;
  font-size: 14px;
}

body {
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100%;
  display: grid;
  grid-template-areas: "header header" "menu content" "footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr;
}
#app .main-layout-header {
  grid-area: header;
}
#app .main-layout-menu {
  grid-area: menu;
  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.15);
}
#app .main-layout-content {
  grid-area: content;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
#app .main-layout-content > hr {
  flex-shrink: 0;
}
#app .main-layout-footer {
  grid-area: footer;
}

.window-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  z-index: 100000;
  display: grid;
  place-items: center;
  background-color: rgba(40, 56, 103, 0.1);
}

.busy-indicator {
  user-select: none;
  text-align: center;
}
.busy-indicator .message {
  margin-bottom: 16px;
}
.busy-indicator .initial-load-message::after {
  content: var(--blazor-load-percentage-text);
}
.busy-indicator .ball {
  width: 16px;
  height: 16px;
  background-color: #283867;
  border-radius: 100%;
  display: inline-block;
  animation: bounce-animation 1.4s infinite ease-in-out both;
}
.busy-indicator .ball:nth-of-type(1) {
  animation-delay: -0.32s;
}
.busy-indicator .ball:nth-of-type(2) {
  animation-delay: -0.16s;
}
@keyframes bounce-animation {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.toolbar-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.buttons-container {
  display: flex;
  gap: 0.5rem;
}

input[readonly], input:disabled {
  color: #343a40;
  background-color: #f8f9fa;
  cursor: text;
}

label.k-label.k-form-label {
  margin-bottom: 0.25rem;
}

.break-spaces {
  white-space: break-spaces;
}

.side-menu {
  height: 100%;
}
.side-menu .side-menu-item-container {
  overflow-x: hidden;
}
.side-menu .side-menu-item-container:hover:not(.disable-hover) {
  background: #e9ecef;
}
.side-menu .side-menu-item-container.active {
  background: #dee2e6;
  box-shadow: inset 4px 0px #283867;
}
.side-menu .side-menu-item-container.active .side-menu-item {
  font-weight: bold;
}
.side-menu .side-menu-item-container:last-of-type {
  margin-top: auto;
}
.side-menu .side-menu-item-container:last-of-type .side-menu-item .side-menu-item-icon-container {
  margin-left: auto;
  color: #283867;
}
.side-menu .side-menu-item-container .side-menu-item {
  height: 50px;
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.side-menu .side-menu-item-container .side-menu-item .side-menu-item-icon-container {
  align-self: stretch;
  width: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.side-menu .side-menu-item-container .side-menu-item-text {
  width: 0px;
  transition-property: width;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
  white-space: nowrap;
  text-align: left;
}
.side-menu .side-menu-item-container .side-menu-item-child-link > a {
  display: block;
  text-decoration: none;
}
.side-menu .side-menu-item-container .side-menu-item-child-link > a.active {
  font-weight: bold;
}
.side-menu .side-menu-item-container .side-menu-item-expandable-content {
  width: 0px;
  height: 0px;
  overflow: hidden;
  transition-property: width, height;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
  margin-left: 50px;
}
.side-menu.expanded .side-menu-item-text,
.side-menu.expanded .side-menu-item-expandable-content {
  width: 150px;
}

.preserve-line-breaks {
  white-space: pre-wrap;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.validation-message {
  color: #dc3545;
}

/* Webkit based browsers */
meter[value="1"].passwordstrength::-webkit-meter-optimum-value {
  background: red;
}

meter[value="2"].passwordstrength::-webkit-meter-optimum-value {
  background: yellow;
}

meter[value="3"].passwordstrength::-webkit-meter-optimum-value {
  background: orange;
}

meter[value="4"].passwordstrength::-webkit-meter-optimum-value {
  background: green;
}

/* Gecko based browsers */
meter[value="1"].passwordstrength::-moz-meter-bar {
  background: red;
}

meter[value="2"].passwordstrength::-moz-meter-bar {
  background: yellow;
}

meter[value="3"].passwordstrength::-moz-meter-bar {
  background: orange;
}

meter[value="4"].passwordstrength::-moz-meter-bar {
  background: green;
}