html {
    --primary: #012875;
    --primary-variant: #001b51;
    --secondary: #fd6b53;
    --secondary-variant: #ff5337;
    --background: #f2f2f2;
    --surface: #ffffff;
    --error: #d7042b;
    --on-primary: #ffffff;
    --on-secondary: #ffffff;
    --on-background: #012875;
    --on-surface: #012875;
    --on-error: #ffffff;
    --title: #87909c;
    --body: #203657;
    --header: #012875;
    --grey1: '#1c1c1e';
    --grey2: '#333333';
    --grey3: '#4f4f4f';
    --grey4: '#828282';
    --grey5: '#bdbdbd';
    --grey6: '#f2f2f2';
    --grey7: '#ffffff';
    --hti-primary: '#012875';
    --hti-primary-variant: '#001b51';
    --hti-secondary: '#fd6b53';
    --hti-secondary-variant: '#ff5337';
    --modal-background: #ffffff;
}

.login-button {
    background-color: var(--hti-primary-light);
    color: var(--on-primary);
}

.accept-button {
    background-color: var(--primary);
    color: var(--on-primary);
}

p.onPrimary,
h1.onPrimary,
h2.onPrimary {
    color: var(--on-primary);
}

p.primary,
h1.primary,
h2.primary {
    color: var(--primary);
}

h1 {
    color: var(--primary);
}
button.accept-button {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

.transition-animate {
    animation: login-fadeIn 0.5s ease-in-out 0s 1 both;
}

@keyframes login-fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.login-form > img {
    width: 150px;
}