@font-face {
    font-family: "OpenSans";
    src: url("/fonts/OpenSans-Light.ttf");
}

@font-face {
    font-family: "SourceCodePro";
    src: url("/fonts/SourceCodePro-Regular.ttf");
}

html {
    --border-default: solid 1px lightgrey;
    --border-radius-1: 2px;
    --border-radius-2: 4px;
    --box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.3);

    --color-blue: rgb(0, 82, 129);
    --color-darkgrey: rgb(100, 100, 100);
    --color-lightblue: rgb(225, 245, 255);
    --color-lightgrey: rgb(235, 235, 235);
    --color-lightred: rgb(255, 215, 225);
    --color-mediumgrey: rgb(180, 180, 180);
    --color-red: rgb(215, 45, 65);

    --color-primary: var(--client-color-primary);

    --color-infobox: var(--client-color-infobox);
    --color-infobox-bg: var(--client-color-infobox-bg);
    --color-infobox-link: var(--client-color-infobox-link);

    --font-family-default: "OpenSans", sans-serif;
    --font-family-monospace: "SourceCodePro", monospace;
    --font-size-1: 14px;
    --font-size-2: 16px;
    --font-size-default: var(--font-size-2);
    --font-weight-bold: 700;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

aside,
footer {
    color: var(--color-darkgrey);
    font-size: var(--font-size-1);
}

body {
    font-family: var(--font-family-default);
    font-size: var(--font-size-default);
    margin: 0px;
}

h1 {
    margin: 0px;
}

input[type="date"],
input[type="email"],
input[type="password"],
input[type="text"],
select {
    border: var(--border-default);
    border-radius: var(--border-radius-1);
    font-family: var(--font-family-monospace);
    font-size: var(--font-size-default);
    padding: 10px;
}

button:hover:not([disabled]),
button:focus:not([disabled]),
input[type="date"]:focus:not([disabled]),
input[type="email"]:focus:not([disabled]),
input[type="password"]:focus:not([disabled]),
input[type="submit"]:focus:not([disabled]),
input[type="submit"]:hover:not([disabled]),
input[type="text"]:focus:not([disabled]),
select:focus:not([disabled]) {
    box-shadow: var(--box-shadow);
}

button,
input[type="submit"] {
    background-color: var(--color-lightgrey);
    border: none;
    border-radius: var(--border-radius-1);
    font-family: var(--font-family-default);
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    padding: 10px;
}

button[disabled],
input[type="submit"][disabled] {
    cursor: default;
    opacity: 0.3;
}

button.primary,
input[type="submit"] {
    background-color: var(--color-primary);
    color: white;
}

label {
    font-size: var(--font-size-1);
}

p {
    margin: 0px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.error {
    background-color: var(--color-lightred);
    border: 1px solid var(--color-red);
    border-radius: var(--border-radius-1);
    color: var(--color-red);
}

.hint {
    color: var(--color-darkgrey);
    font-size: var(--font-size-1);
}

.info {
    background-color: var(--color-infobox-bg);
    border: 1px solid var(--color-infobox);
    border-radius: var(--border-radius-1);
    color: var(--color-infobox);
}

.info a {
    color: var(--color-infobox-link);
    font-weight: var(--font-weight-bold);
}

.subtitle {
    font-size: var(--font-size-1);
}

div#clientLogo {
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

a#logoRef {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

a#supportLink {
    text-decoration: revert;
    color: revert;
}