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

.formWrapper {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding-top: 10%;
    /* padding: 12rem 0 22rem 0; */
}

#loginForm,
#auth2Form,
#changePWForm,
#otpForm {
    height: fit-content;
    min-width: 550px;
    background-color: var(--MainHighlightColor);
    background-image: url('../../res/images/logo-white.png');
    background-repeat: no-repeat;
    background-size: contain;
    padding: 11rem 5rem 3rem 5rem;
    /* padding: 200px 100px 40px 100px; */
    /* padding: 18% 12% 4% 12%; */
    border: solid #bbb 1px;
    box-shadow:
        0px 0px 10px 1px var(--MainHighlightColor),
        0px 0px 10px 3px #376a88,
        0px 0px 10px 6px #48728a,
        0px 0px 10px 12px #567a8f;
}

.otpHeadGroup .dx-form-group-content:not(.otpBtnGroup .dx-form-group-content) {
    padding-top: .3rem;
}

.dx-field-item-label-text {
    color: var(--MainHighlightFontColor);
}

.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);
}

.hiddenItem {
    visibility: hidden;
    height: 0;
    position: absolute;
}