html,
    body {
        margin: 0px;
        height: 100%;
        padding: 0px;
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: normal;
        background: #f2f2f2;
        color: #717171;
    }

    .wrapper {
        margin: 0 auto;
        height: fit-content;/*100%*/
        width: 100%;
        /*display: grid;
        align-content: space-between;*/
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 100vh;
    }

    .container {
        padding: 0px;
        min-height: 100%;
        height: auto;
        display: grid;
        align-items: center;
        justify-content: center;
        margin: auto auto;
    }

    .content {
        margin-top: 30px;
        margin-bottom: 30px;
        flex: 1;
    }

    .content header {
        display: block;
        padding: 0px;
        text-align: center;
        margin: 0px auto;
    }

    .content header p {
        font-size: large;
        margin: 0px 0px 0px 0px;
    }

    /*content_body white box, federation(service log), Service Details, Table
    .content_body {
        margin: 0 auto;
        max-width: 700px;
        height: auto;
        background-color: #fff;
        box-shadow: 0 0 3px 1px rgba(121, 121, 121, 0.4);
        padding: 20px 20px;
        border: none;
        border-radius: 8px;
    } */
    .content_body {
        margin: 0 auto;
        width: 700px;
        max-width: 100%;
        height: auto;
        background-color: #fff;
        box-shadow: 0 0 3px 1px rgba(121, 121, 121, 0.4);
        padding: 20px 20px;
        border: none;
        border-radius: 8px;
    }

    .hhu_logo {
        width: 150px;
        border: 0;
        margin: 0px;
    }

    .logo {
        display: grid;
        align-items: center;
        justify-content: center;
    }

    .logo img {
        width: 120px;
        border: 0;
        margin: 0px;
    }

    .federation_logo {
        width: 150px;
        border: 0;
        margin: 0px;
    }

    .organization_logo {
        width: 120px;
        border: 0;
        margin: 0px;
    }

    /*section style*/
    .section_details_font {
        font-size: 14px;
        margin-top: 5px;
        text-align: left;
        font-weight: normal;
    }

    .section_details {
        display: flex;
    }

    .section_details img {
        margin-right: 16px;
        width: 20px;
    }

    /* 2025-11-07 gab es nicht */
    strong {
        font-weight: bold;
    }

    /*table design*/
    table {
        border: solid 0.2px #bebebe;
        width: 100%;
        border-radius: 10px;
        padding: 16px;
        overflow: hidden;
    }

    tr {
        height: 17px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.31;
        letter-spacing: normal;
        text-align: left;
    }

    td {
        vertical-align: top;
        padding: 15px 0px 5px 0px;
        border-bottom: solid 0.2px #bebebe;
        word-wrap: break-word;
    }

    /*last row without border*/
    table > tr:last-child > td {
        border-bottom: 0;
        text-align: center;
    }

    /*box style for divs*/
    .box_style {
        margin: 16px 0px 16px 0px;
        padding: 16px;
        border-radius: 10px;
        border: solid 0.2px #bebebe;
        width: auto;
    }

    /*links style*/
    a {
        color: #00247D;
        text-decoration: underline;
    }

    a:visited {
        color: #00247D;
        text-decoration: underline;
    }

    a:focus,
    a:hover,
    a:active {
        color: #F39800;
        text-decoration: underline;
    }

    .output--error {
        font-weight: bold;
        color: red;
    }

    .prompt {
        background-color: #e8f3ff;
        border-left: 4px solid #2b7bff;
        padding: 12px 16px;
        border-radius: 4px;
        color: #084298;
        font-size: 14px;
        max-width: 100%;
        margin: 10px 0;
    }

    legend {
        font-size: medium;
        text-align: center;
    }

    /*Start: Form Elements Design*/
    form {
        margin-top: 12px;
    }

    .form-element-wrapper label {
        display: block;
        margin: 12px 0px 6px 0px;
        width: 100%;/*widh for form input*/
        font-size: medium;
    }

    .form-element-wrapper input{
        width: 100% /*widh for form input*/
    }

    form input {
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 0px;
        box-sizing: border-box;
        color: #2C3E50;
        font-size: 13px;
    }

    ::placeholder {
        color: #717171;
        opacity: 1; /* Firefox */
        font-size: 12px;
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #717171;
        font-style: italic;
    }

    :-ms-input-placeholder { /* Microsoft Edge */
        color: #717171;
        font-size: 14px;
    }

    input[type="text"] {
        font-size: 15px;
    }

    input[type="password"] {
        font-size: 15px;
    }

    input[type="submit"] {
        width: 150px;
        padding: 10px;
        border-radius: 5px;
        border: none;
        font-size: 14px;
        line-height: 1.36;
        letter-spacing: normal;
        text-align: center;
        color: #fff;
        background-color: #005ca2;
    }

    input[type="checkbox"] {
        width: auto;
        padding: 0;
        float: left;
        margin: 5px 10px 5px 0px;
        -ms-transform: scale(1.2); /* IE 9 */
        -webkit-transform: scale(1.2); /* Chrome, Safari, Opera */
        transform: scale(1.2);
    }

    /*Anmelden Button*/
    form button {
        outline: none;
        background: #005CA2;
        width: 100%;
        border: 0;
        border-radius: 4px;
        padding: 8px 10px;
        color: #ffffff;
        font-family: inherit;
        font-size: large;
        font-weight: 500;
        line-height: inherit;
        cursor: pointer;
        margin: 10px 0px 0px 0px;
    }

    form button:hover {
        background: #017ad5;
    }
    /*End: Form Elements Design*/

    /*Start: Support Section*/
    /*Hilfe: Passwort vergessen und Hilfe ben�tigt*/
    .support ul {
        padding: 0px;
        display: flex;
        justify-content: space-between;
        list-style-type: none;
    }

    .support ul a {
        text-decoration: none;
        font-size: small;
        color: #717171;
    }

    .support p {
        padding: 0px;
        text-align: center;
        margin: 10px 0px 0px 0px;
    }
    /*End: Support Section*/

    /*footer section*/
    footer {
        background-color: #717171;
        max-height: 50px;
        border: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-weight: 400;
        font-size: medium;
        padding: 10px;
        position: sticky;
        bottom: 0vh;
    }

    footer a {
        color: #ffffff;
        font-weight: 400;
        text-decoration: none;
        font-size: medium;
    }

    /*font style*/
    .font_style_bold {
        font-weight: bold;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: left;
        margin: 10px 0px 0px 0px;
    }

    .font_style {
        font-size: 14px;
        margin-bottom: 0px;
        line-height: 1;
        letter-spacing: normal;
        text-align: left;
        font-weight: normal;
    }

    #attributeRelease strong{
        font-size: 14px;
        font-weight: normal;
    }

    .service_access_details {
        display: flex;
    }

    .service_access_details img {
        margin-right: 15px;
        width: 20px;
    }

    .service_description {
        display: flex;
    }

    .service_description_details {
        display: flex;
    }

    .service_description_details img {
        margin-right: 15px;
        width: 20px;
    }

    /*buttons at the bottom*/
    #tou-content {
        font-family: monospace;
        width: 100%;
        border: solid 1px #666;
        margin: 4px;
        padding: 10px;
        overflow: hidden;
    }

    #tou-content li {
        margin-bottom: 10px;
    }

    #tou-acceptance {
        width: 100%;
        border: solid 1px #666;
        background-color: #F0F0F0;
        margin: 4px;
        padding: 10px;
        text-align: left;
        overflow: hidden;
    }

    #attributeRelease-consent {
        width: 100%;
        border: solid 1px #666;
        background-color: #F0F0F0;
        overflow: hidden;
    }

    /*attribute release table*/
    .table_header {
        margin-top: 10px;
    }

    #attributeRelease {
        margin: 16px 0px 16px 0px;
        padding: 16px;
        border-radius: 10px;
        border: solid 0.2px #bebebe;
        width: auto;
    }

    #attributeRelease table {
        border-collapse: collapse;
        width: 100%;
    }

    #attributeRelease table tr:nth-child(odd) {
        background-color: #f2f2f2;
    }

    #attributeRelease table td {
        padding: 1px;
    }

    #attributeRelease tr {
        height: 17px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.31;
        letter-spacing: normal;
        text-align: left;
    }

    #attributeRelease td {
        vertical-align: top;
        padding: 15px 0px 5px 0px;
        border-bottom: solid 0.2px #bebebe;
        word-wrap: break-word;
    }

    /*last row without border*/
    #attributeRelease tbody > tr:last-child > td {
        border-bottom: 0;
        text-align: center;
    }

    /*option box of Radios and text info*/
    .choose_option_box {
        margin: 16px 0px 16px 0px;
        padding: 16px;
        border-radius: 10px;
        border: solid 0.2px #bebebe;
        width: auto;
    }

    input[type="radio"] {
        -ms-transform: scale(1.5); /* IE 9 */
        -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
        transform: scale(1.5);
    }

    .options_radio {
        margin: 0px 0px 10px 0px;
        padding: 0px;
    }

    .options_info {
        margin-left: 0px;
    }

    .options_info img {
        margin-right: 3px;
        width: 20px;
    }

    /*action buttons*/
    .form_btn {
        display: flex;
        justify-content: space-between;
    }

    .form_btn input {
        width: 150px;
        padding: 10px;
        border-radius: 5px;
        border: none;
        font-size: 14px;
        line-height: 1.36;
        letter-spacing: normal;
        text-align: center;
        color: #fff;
    }

    .form_btn .accept_btn {
        background-color: #005ca2;
    }

    .form_btn .reject_btn {
        background-color: rgba(213, 53, 53, 0.78);
    }

    .form_btn .print_btn {
        background-color: #757575;
    }

    /* Device specific styles */
/*    @media only screen and (max-device-width: 721px) {*/
    @media only screen and (max-width: 721px) {
        body {
            font-size: 12px;
            line-height: 1.5;
        }

        .wrapper {
            margin: 0 auto;
            height: 100%;
        }

        .container {
            padding: 10px;
            min-height: 100%;
            display: block;
            margin-top: 20px;
            margin-bottom: 30px;
        }

        .content {
            margin-top: 0px;
            margin: 0px;
        }

        /*conten_body white box, federation(service log), Service Details, Table */
        .content_body {
            max-width: 100%;
            width: auto;
            box-shadow: 0 0 3px 1px rgba(121, 121, 121, 0.4);
            border-radius: 8px;
            overflow: auto;
            padding: 2px;
        }

        .organization_logo {
            width: 80px;
            border: 0;
            margin: 0px;
        }

        /*table design for mobile*/
        table tbody tr td {
            display: block;
        }

        #attributeRelease tr {
            line-height: 1.2;
            letter-spacing: normal;
            text-align: left;
            border-bottom: solid 0.2px #bebebe;
        }

        #attributeRelease td {
            vertical-align: top;
            border-bottom: none;
            word-wrap: break-word;
            padding: 10px 0px 0px 0px;
            font-weight: 600;
        }
        /*last row without border*/
        #attributeRelease tbody > tr:last-child > td {
            padding-bottom: 5px;
            text-align: center;
        }

        /*font style*/
        .font_style_bold {
            font-size: 14px;
            font-weight: 600;
        }

        /*option box of Radios and text info*/
        .choose_option_box {
            margin: 16px 0px 16px 0px;
            padding: 6px;
            border-radius: 10px;
            border: solid 0.2px #bebebe;
        }
        /*action buttons*/
        .form_btn {
            display: block;
        }

        .form_btn input {
            width: 100%;
            margin-bottom: 10px;
            padding: 16px;
        }

        #tou-content,
        #tou-acceptance {
            width: auto;
        }

        .service_access_details img {
            margin-right: 15px;
            width: 25px;
        }
    }