/* setup.css */

body, html {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    overflow-y: auto;
}

/*Links*/

a, a:visited, a:active {
    color: blue;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*Navigationsleiste*/

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    overflow: hidden;
    background-color: #606060;
    color: #FFFFFF;
    padding: 0 10px;
    font-size: 14px;
    line-height: 40px;
}

/*header a, header a:visited, header a:active {
    color: inherit;
}*/

header .container{
    width: 100%;
    margin: 0 auto;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.navbar div.title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar div.title a:hover {
    text-decoration: none;
}

/* content and footer */

#content-and-footer {
    position: absolute;
    top: 40px;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 40px);
    width: 100%;
}


/*.setup {
    background-color: #F2F2F2;
    text-align: center;
}*/

/* content wrapper */

.content-wrapper {

    background-color: #F2F2F2;
    text-align: center;

    flex: 1 1 auto;
}

/*Seiteninhalt*/

.content {
    display: inline-block;
    max-width: 500px;
}

/*Form*/

.box {
    background-color: #FFFFFF;
    padding: 15px 15px 30px 15px;
    margin-top: 2em;
    text-align: left;
}

.error h2 {
    color: #FF0000;
}

li {
    line-height: 1.5em;
}

h2 {
    text-align: center;
}

.error-message{
    display: none;
    color: #000000;
    background-color: #FFEBEE;
    line-height: 1.25em;
    border: 1px solid #FF0000;
    padding: 10px;
    padding-top: 10px;
    margin-bottom: 15px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
}

form label {
    display: block;
    margin: 0.5em 0;
}

form input[type="email"],
form input[type="password"],
form input[type="text"],
form input[type="number"],
form textarea {
    font-size: 1em;
    padding: 8px 10px;
    margin: 4px 4px 4px 4px;
    display: inline-block;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
}

/*form input[type="email"].error,
form input[type="password"].error,
form input[type="text"].error,
form input[type="number"].error,*/
form input[type].error,
form textarea.error {
    /*form input.error {*/
    /*background-color: #ffdddd;*/
    border: 1px solid #ff0000;
}

form label.error {
    color: #ff0000;
}

form input[type="number"] {
    width: 8em;
}

.checkbox-container {
    margin: 1em 0;
}

.checkbox-container input {
    display:inline-block;
}
.checkbox-container label {
    display:inline;
}

/*form input[type="password"] {
    display: inline-block;
    width: -webkit-calc(100% - 3em);
    width:    -moz-calc(100% - 3em);
    width:         calc(100% - 3em);
}*/

.password-container {
    display: flex;
}

/* toggle password visibility */

.toggle-password-type {
    display: inline-block;
    width: 2em;
    padding: 10px;
    border: none;
    border-radius: 0px;
    color: black;
    background-color: transparent;
    text-align: center;
}

.toggle-password-type:hover {
    background-color: #CCCCCC;
}

.toggle-password-type:active {
    background-color: #CCCCCC;
}

#form-subject-label,
#form-subject
{
    display: none;
}

/* submit button */

.submit-button-wrapper {
    text-align: center;
}

#submit-button {
    display: inline-block;
    font-size: 1em;
    background-color: #43A047;
    color: #FFFFFF;
    font-weight: 700;
    text-align: center;
    border: 1px solid #1b9949;
    border-radius: 4px;
    padding: .5em 2em;
    margin-top: 1em;
}

#submit-button:hover {
    background-color: #2E7D32;
    cursor: pointer;
}

#submit-button:disabled,
#submit-button[disabled] {
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
}

#submit-button:disabled:hover,
#submit-button[disabled]:hover {
    cursor: not-allowed;
}

.appendix {
    margin: 1em 0;
    padding: 15px;
}

/* footer */

footer {
    background-color: #F7F7F7;
    color: #7d8099;
    font-size: 14px;
    padding: 0 20px;
    border-top: 1px solid #cccccc;
    line-height: 40px;
    overflow: hidden;
}

footer a, footer a:visited {
    color: inherit;
}

footer .container{
    width: 100%;
    margin: 0 auto;
}

.footer-bar{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    /*flex-direction: row;*/
    white-space: nowrap;
}

.footer-bar.company {
    padding: 0 0.5em;
}

.footer-bar ul {
    list-style: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
}

.footer-item {
    padding: 0 0.5em;
}

/* media queries */

@media (max-width: 800px) {

    .footer-bar{
        flex-direction: column;
        margin-top: 0.5em;
    }

    footer .company {
        order: 2;
    }
    footer .language-links {
        order: 0;
    }
    footer .footer-links {
        order: 1;
    }
}

@media (max-width: 500px) {

    .box {
        margin-top: 0;
    }
}

@media (max-width: 300px) {

    footer .footer-links ul {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 200px) {

    footer .language-links ul {
        flex-direction: column;
        align-items: center;
    }
}

/* Spezialisierung */

.signup form {
    margin-top: 2em;
}

.content.licenses form h2 {
    text-align: inherit;
}

.content.licenses .billing-country-select {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.content.licenses .billing-country-select select {
    flex-shrink: 0;
    font-size: 1em;
    padding: 8px 10px;
    margin: 4px 4px 4px 4px;
    display: inline-block;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-sizing: border-box;
}
.content.licenses .billing-country-select input[type="text"] {
    flex-grow: 1;
}

.privacy .content,
.terms .content,
.data-processing-agreement .content {
    max-width: 1000px;
}

.data-processing-agreement h2 {
    counter-reset: chapter;
}

.data-processing-agreement h3 {
    counter-increment: chapter;
}

.data-processing-agreement h3::before {
    content: counter(chapter) ". ";
}

.data-processing-agreement .appendix h2 {
    margin-top: 2em;
}

.data-processing-agreement .appendix h2 {
    text-align: left;
}