:root {
  --MainHighlightColor: #999999;
  --MainHighlightAccentYellow: rgb(209, 209, 28);
  --MainHighlightFontColor: white;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* background: rgb(41, 68, 68); */
  background: var(--MainHighlightColor) !important;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.formWrapper {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  height: 100%;
  width: 100%;
  padding-top: 10%;
}

#loginForm {
  height: fit-content;
  min-width: 550px;
  background-color: white;
  background-image: url('../../res/images/logo.jpg');
  background-repeat: no-repeat;
  padding: 11rem 6rem 2rem 6rem;
  border: solid #bbb 1px;
  border-radius: 5px;
  box-shadow:
    0px 0px 10px 1px var(--MainHighlightColor),
    0px 0px 10px 6px #b0afaf,
    0px 0px 10px 12px #cfcece,
    0px 0px 10px 18px #d6d4d4;
}

.dx-field-item-label-text {
  font-weight: 400;
}

.dx-button-mode-contained {
  background-color: var(--MainHighlightColor);
  border-color: var(--MainHighlightAccentYellow);
  color: var(--MainHighlightFontColor);
}

.dx-button-mode-contained.dx-state-focused {
  color: var(--MainHighlightColor);
  border-color: var(--MainHighlightAccentYellow)
}

.dx-button-mode-contained:hover {
  color: var(--MainHighlightColor);
  box-shadow: 0px 0px 2px 2px var(--MainHighlightAccentYellow)
}

.dx-field-item-required-mark {
  display: none;
}

.dx-validationsummary-item {
  color: var(--MainHighlightAccentYellow);
}

.dx-form-group-caption {
  color: var(--MainHighlightFontColor);
}

#twoFactorlabel {
  color: var(--MainHighlightFontColor);
}