body {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    background-color: #365e82;
    color: #fff;
}

header {
    border: 1px solid #333;
    padding: 10px;
    margin: 0px;
}

header div.row {
    margin: 0px;
}

.headline {
    margin: 0px;
    padding: 0px;
}

header h1 {
    margin: 0px;
    padding: 0px;
    font-size: 1.8em;
}

div.userinfo {
    font-size: 0.8em;
}

div#site-content {
    border: 1px solid #333;
    min-height: 400px;
}

/* Closable tabs */
#dialog label,
#dialog input {
    display: block;
}

#dialog label {
    margin-top: 0.5em;
}

#dialog input,
#dialog textarea {
    width: 95%;
}

#tabs {
    margin-top: 1em;
}

#tabs li .ui-icon-close {
    float: left;
    margin: 0.4em 0.2em 0 0;
    cursor: pointer;
}

#add_tab {
    cursor: pointer;
}

img.tabicon {
    float: left;
    padding: 10px 0px 0 10px;
}

/* Tabelle Klassenliste */
table.classlist {
    width: 100%;
}

table.classlist td {
    border: 1px solid #ccc;
}

table.classlist th {
    border: 1px solid #ccc;
    text-align: left;
}

table.classlist_inner {
    border: 0px;
    border-collapse: collapse;
    font-size: 90%;
    width: 100%;
}

table.classlist_inner th {
    width: 25%;
    border-top: 0px;
}

table.classlist_inner td {
    border-bottom: 0px;
}

table.noborder {
    border-collapse: collapse;
    border: none;
}

table.noborder td {
    border-collapse: collapse;
    border: none !important;
    padding: 0px 0.5em 0px 0px !important;
}

/* Objekt */
div.objectform {
    border: 0px solid #ccc;
}

/* Tabelle Objektliste */
table.objectlist {
    width: 100%;
}

table.objectlist td {
    border: 1px solid #ccc;
}

table.objectlist th {
    border: 1px solid #ccc;
    text-align: left;
}


/* Tabelle Objekt */
table.object {
    width: 100%;
}

table.object td {
    border: 1px solid #ccc;
}


/* Tabelle Unter-Objekt */
table.object {
    width: 100%;
}

table.object td {
    border: 1px dotted #ccc;
}

td.showobject_left {
    font-weight: bold;
    padding: 0px 3px 0px 5px;
}



a.action {}

img.actionsymbol {
    float: left;
    padding: 3px 3px 0px 2px;
}

/* ---- */

div.project {
    width: 300px;
    float: left;
    margin: 5px;
    border: 1px dotted grey;
    background-color: lightgreen;
    padding: 0px 10px 10px 10px;
    min-height: 200px;
}

div#tools {
    background-color: lightyellow;

}

table.entry {
    background-color: #ddd;
    margin: 0 3% 2em 3%;
    width: 94%;
}


table td {
    vertical-align: top;
}


td.title {
    width: 90%;
    font-weight: bold;
    font-size: 120%;
}

td.time {
    width: 10%;
    text-align: right;
}

td.project,
td.customer,
td.agent {
    width: 33%;
    padding: 3px 0px 3px 3px;
    border: 1px dotted grey;
    border-collapse: collapse;
}

div.pending table {
    color: #aaa !important;
}

div.highprio table {
    color: #a00 !important;
}

div.done table {
    color: blue !important;
}

input.edit_todo {
    width: 100%;
}

input.formelement_date {
    width: 100%;
    float: left;
}

span.datepicker {
    display: block;
    float: right;
    width: 24px;
}

select.edit_todo {
    width: 100%;
}

input[type="checkbox"] {
    width: 1em;
}

textarea.edit_todo {
    width: 100%;
    height: 180px;
}

table.loglist th {
    border: 1px solid #ddd;
    padding: 5px;
    font-weight: bold;
}

table.loglist td {
    border: 1px solid #ddd;
    padding: 5px;
    vertical-align: top;
}

table.loglist h2 {
    font-size: 12pt;
}

div.logdesc {
    font-size: 10pt;
    color: #333;
    line-height: 10pt;
}

div.tododesc {
    font-size: 10pt;
    color: #353;
    line-height: 10pt;
}

/* --- Submit --- */
div.store_object {
    border: 1px solid gray;
    width: 120px;
    background-color: #55aa55;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
}

/* Submit button at top of form */
div.submit_top {
    margin: 0px 0px 2em 0px;
}

/* (Unter-) Objekte abwechselnd einfärben */
.rowodd {
    background-color: #365E82;
}

.roweven {
    background-color: #2D6596;
}

.property-measure:nth-child(2) {
    background-color: red;

}

/* Formatierungen für Unterobjekte */

.property-person-measure {
    margin: 1em 0px 1em 0px;
    padding: 1em 0px 1em 0px;
    border: 2px solid grey;
}

.property-person-measure:nth-of-type(2) {
    border: 2px solid black;
}

.property-person-payment {
    margin: 1em 0px 1em 0px;
    padding: 1em 0px 1em 0px;
    border: 2px solid grey;
}

.property-person-payment:nth-of-type(even) {
    border: 2px solid black;
}

.bb_property_input {
    margin: 5px 0px 5px 0px;
}



/* Paging */
div.paging {
    background-color: #fff;
    height: 30px;
    margin: 5px 0px 5px 0px;
}

a.paging,
span.currentpage,
span.paging_gap {
    display: block;
    padding: 0px 5px 0px 5px;
    text-align: center;
    width: 30px;
    float: left;
    margin: 0px 10px 0px 0px;
    background-color: #fff;
    font-size: 80%;
    border: 1px solid #ccc;
    text-decoration: none;
}

span.currentpage {
    background-color: #a00;
    color: #fff;
}

img.icon-file {
    float: left;
    margin: 0px 1em 0px 0px;
}


div.uitn_object_publicdescription {
    width: 300px;
    height: 200px;
    border: 2px solid green;
    padding: 20px;
}

div.uitn_object_uitn {
    font-size: 1.5em;
    font-weight: bold;
}

div.teaserbox {
    border: 2px solid green;
    padding: 10px;
}

label.uitn_label {
    font-size: 2em;
}

a.example {
    font-weight: bold;
    color: white;
    text-decoration: underline;
}


div.container p {
    font-size: 1.2em;
    font-weight: 500;
}

div.container ol {
    font-size: 1.2em;
}

div.container ul {
    font-size: 1.2em;
}

div.container a {
    color: #F7941E;
}

div.container a.btn {
    color: #000000;
}

p.intro {
    margin: 0px 0px 2em 0px;
}

div.uitn_teasers {
    margin-top: 2em;
}


/* Header */





/* Eingabefeld Startseite */

input.uitn_input {
    font-size: 3em;
    height: 60px;
    width: 100%;
}

button.uitn_find_button {
    font-size: 2.3em;
    background-image: linear-gradient(to bottom, #5cb85c 0, #419641 100%);
}

a.btn {
    font-size: 1.0em;
}

a.btn.btn-primary {
    color: white;
}

/* ========================================================= */
/* Info-Boxen                                                */
/* http://bootsnipp.com/snippets/featured/simple-card-alerts */
/* ========================================================= */

.notice {
    color: #365e82;
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #7f7f84;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 8px -6px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 8px -6px rgba(0, 0, 0, .2);
}

.notice-sm {
    padding: 10px;
    font-size: 80%;
}

.notice-lg {
    padding: 35px;
    font-size: large;
}

.notice-success {
    color: #365e82;
    border-color: #80D651;
    border-radius: 3px;
}

.notice-success>strong {
    font-size: 1.4em;
}

.notice-info {
    color: #365e82;
    border-color: #45ABCD;
    border-radius: 3px;
}

.notice-info>strong {
    font-size: 1.4em;
}

.notice-warning {
    color: #365e82;
    border-color: #FEAF20;
    border-radius: 3px;
}

.notice-warning>strong {
    font-size: 1.4em;
}

.notice-danger {
    color: #365e82;
    border-color: #d73814;
    border-radius: 3px;
}

.notice-danger>strong {
    font-size: 1.4em;
}

.notice-error {
    color: #365e82;
    border-color: #f00;
    border-radius: 3px;
}

.notice-error>strong {
    font-size: 1.4em;
}


/* === END Info-Boxen === */


/* ====== */
/* Header */
/* ====== */

button.navbar-toggle {
    margin: 45px 0px 0px 30px;
    background-color: #365E82;
}

div.navbar-service {
    font-size: 1.4em;
    padding: 10px 0px 0px 0px;
    color: white;

    width: 300px;
    float: right;
}

span.service_username {
    font-size: 1em;
}

.navbar-slogan {
    color: #365E82;
    font-size: 3.4em;
    margin: 25px 0px 0px 0px;
    width: 400px;
}

/* bs xs */
@media (max-width: 767px) {
    .navbar-slogan {
        margin: 0px 0px 0px 0px;
        font-size: 1.5em;
        width: 320px;
    }
}

/* bs sm */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-slogan {
        margin: 0px 0px 0px 173px;
        font-size: 1.7em;
    }
}

/* bs md */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-slogan {
        margin: 0px 0px 0px 148px;
        font-size: 1.7em;
    }
}

/* Hintergrund der navbar */

.navbar-inverse {
    background-image: url('');
    background-color: #ddd;
    border-color: #ddd;
}

img.header_logo {
    width: 236px;
    margin: 20px 0px 0px 0px;
}

/* bs xs */
@media (max-width: 767px) {
    img.header_logo {
        width: 60%;
        margin: 10px 0px 0px 0px;
    }
}

img.troinky_help {
    width: 150px;
}

img.troinky_help:hover {
    cursor: pointer;
}


img.help {
    border: 3px solid gray;
    border-radius: 20px;
    padding: 20px;
    width: 75%;
}

div.service_menu {
    margin: 1em 0px 0px 0px;
    color: #365E82;
    width: 100%;
    font-size: 1.2em;
}

/* bs xs */
@media (max-width: 767px) {
    div.service_menu {
        margin: 1em 0 1em 0;
        width: 100%;
        font-size: 1.6em;
        line-height: 2em;
    }
}

/* bs sm */
@media (min-width: 768px) and (max-width: 991px) {
    div.service_menu {
        margin: 70px 0 0 20px;
        width: 100%;
        font-size: 1.3em;
        line-height: 1.4em;
    }
}

div.service_menu a {
    color: #365E82;
}

div.service_menu .fa {
    width: 1.3em;
}

div.service_menu_troinky {
    margin-top: 70px;
}

/* === END Header === */

ul.password_constraints {
    margin: 1em 0em 2em 0em;
}

/* ============ */
/* Klassenliste */
/* ============ */

table.bb_classlist {
    border: 3px solid white;
    border-collapse: collapse;
    margin: 0 0 2em 0;
}

table.bb_classlist th {
    border: 1px solid white;
    border-bottom: 3px solid white;
    border-collapse: collapse;
    font-weight: bold;
    padding: 0.5em;
}

table.bb_classlist td {
    border: 1px solid white;
    border-collapse: collapse;
    padding: 0.5em;
}

table.bb_classlist td.overdue {
    background-color: red;
    color: white;
}

table.bb_classlist td.imminent {
    background-color: yellow;
    color: black;
}

table.bb_classlist td.done {
    background-color: green;
    /* changed to green instead of white to make the value invisible */
    color: green;
}

table.bb_classlist .first {
    border-left: 3px solid white;
}

table.dataTable tbody tr {
    background-color: #365E82;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: white;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: white !important;
}

table.dataTable thead th {
    border-bottom: 1px solid white;
}


table.statuscompleted {
    background-color: lightblue;
    color: black;
}

table.statusactive {
    background-color: lightgreen;
    color: black;
}

table.statuscancelled {
    background-color: #ccc;
    color: black;
}

table.statusrejected {
    background-color: #999;
    color: black;
}

/* === END Klassenliste === */


/* === module specific formats === */

.invoice_paid {
    background-color: #d0f5a9;
    color: black;
}

.invoice_unpaid {
    background-color: #fcbba5;
    color: black;
}

/* In Kostenübersicht Nullsummen ausblenden */
tr.person_amount_0 {
    display: none;
}

div.toggle_zero {
    margin: 0px 0px 1em 0px;
}

tr.amount_warning {
    background-color: #fcbba5;
    color: black;
}


/* Checkboxen in Formularen */
.form_checkboxes input {
    display: inline;
    height: 1em;
}

.form_checkboxes label {
    font-weight: normal;
    display: inline;
    margin: 0px 0px 0px 0px;
    vertical-align: middle;
    padding: 0px 0px 9px 10px;
}


textarea.form-control {
    min-height: 15em;
}

/* span odd / even */
span.even {
    color: #5bc0de;
}

span.odd {
    color: #ffffff;
}

div.container a.even {
    color: #5bc0de;
}

div.container a.odd {}

/* Interviews */

h3.interview {
    margin: 0px;
}

.num {
    flex-grow: 1;
    text-align: right;
}

.interview_question_wrapper.odd {
    width: 100%;
    border: 1px solid #4578A6;
    padding: 0 10px 10px 10px;
    margin-top: 20px;
    background-color: #4578A6;
}

.interview_question_wrapper.even {
    width: 100%;
    border: 1px solid #4578A6;
    padding: 0 10px 10px 10px;
    margin-top: 20px;
}


/* Report table */

table.report_table {
    background-color: white;
    color: black;
    border-collapse: collapse;
    margin: 0 0 2em 0;
    width: 560px;
}

table.report_table th {
    padding: 1em;
    border: 1px solid black;
}

table.report_table td {
    padding: 1em;
    border: 1px solid black;

}

table.report_table td.output_title {
    /*
    writing-mode: vertical-lr;
    text-orientation: mixed;
    */
    background-color: #07075e;
    color: white;
    width: 100px;
}


/* Report overview */

table.report_overview {
    background-color: transparent;
    color: white;
    border-collapse: collapse;
    margin: 0 0 2em 0;
}

table.report_overview th {
    padding: 1em;
    border: 1px solid white;
}

table.report_overview td {
    padding: 1em;
    border: 1px solid white;
}

/* Report */

/*
.report {
    background-color: #ddd;
    color: black;
}
*/

div.report {
    width: 100%;
    padding: 1em;
    /* border: 1px solid black; */
}

div.report h1 {
    padding: 0px 0px 0.5em 0px;
    margin: 0px;
}

div.report h2 {
    padding: 0px 0px 0.5em 0px;
    margin: 0px;
}

/*
div.report table.bb_classlist {
    border: 3px solid black;
}

div.report table.bb_classlist th {
    border: 1px solid black;
}

div.report table.bb_classlist td {
    border: 1px solid black;
    min-width: 50px;
    text-align: center;
}

*/

div.report table.bb_classlist td {
    min-width: 50px;
    text-align: center;
}

div.report table.bb_classlist td.name {
    min-width: 360px;
    text-align: left;
}


/* Baseline Study */
input.bbdate {
    color: black;
}

input.bbnumber {
    color: black;
}

.subtopic_wrapper.odd {
    width: 100%;
    border: 1px solid #4578A6;
    padding: 0 10px 10px 10px;
    margin-top: 20px;
    background-color: #4578A6;
}

.subtopic_wrapper.even {
    width: 100%;
    border: 1px solid #4578A6;
    padding: 0 5px 5px 5px;
    margin-top: 20px;
}

div.container a.btn-link {
    color: white;
}

/* Target tables */

td.th {
    font-weight: bold;
}

table.indicator2-target {
    border: none;
}

table.indicator2-target td {
    border: none;
    padding: 0.5em;
}

table.indicator2-target span.label {
    padding: 0px;
    margin: 0px;
}

table.indicator2-target span.value {
    font-size: 2em;
    font-weight: bold;
}

table.indicator2-target-numbers span.value {
    font-size: 2em;
    font-weight: bold;
}

td.target_value {
    font-size: 2em;
    font-weight: bold;
    color: lightblue;
}

td.current_value {
    font-size: 2em;
    font-weight: bold;
}

span.low {
    color: red;
}

span.ok {
    color: orange;
}

span.good {
    color: #80D651;
}

table.indicator2-target td.left {
    border-right: 1px solid grey;
    color: lightblue;
}

/* dashboard */

div.dashboard-box {
    display: flex;
    align-items: start;
    column-gap: 3em;
    border: 2px solid white;
    padding: 1em;
    border-radius: 10px;
    margin: 0px 0px 2em 0px;
}

div.dashboard-box img {
    width: 120px;
}

div.dashboard-box h2 {
    margin: 0.5em 0px 0px 0px;
    padding: 0px;
    font-size: 1.5em;
}

div.dashboard-box a {
    color: white;
}


div.container p.object_timestamps {
    font-size: 0.8em;
    color: #333;
}

/* scan results (module interview) */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.image-item {
    margin: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: center;

}

.image-item img {
    width: 320px;
}

.image-caption {
    margin-top: 5px;
    font-size: 12px;
    text-align: left;
}

p.scan_result {
    border: 1px solid grey;
    padding: 1em;
    margin: 1em 0 1em 0;
    background-color: white;
    color: #365E82;
}

p.error {
    color: red;
    background-color: white;
}

/* number tables */
table.numbers {
    width: 100%;
}

table.numbers td.title {
    width: 80%;
}

table.numbers td.value {
    width: 20%;
}

.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    /* Optional: Adds space between the cells */
}

.flexcell {
    flex: 1 1 300px;
    /* Flex-grow: 1, Flex-shrink: 1, Flex-basis: 300px */
    box-sizing: border-box;
    margin: 0px;
    /* Optional: Adds space around the cells */
    border: 0px solid #ccc;
    /* Optional: Adds a border around each cell */
    padding: 0px;
    /* Optional: Adds padding inside each cell */
}

select.interviewtype {
    color: black;
}


/* Simple Bar Charts */

.chart-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 200px;
    width: 100%;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    padding: 0px 0px 0px 0px;
    margin-top: 20px;
}

.bar {
    width: 14%;
    /* Adjust for spacing */
    background-color: #3498db;
    text-align: center;
    color: white;
    font-size: 0.8em;
}

.x-axis-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 20px;
    width: 100%;
    padding: 0px 0px 0px 0px;
}

.bar-wrapper {
    width: 30%;
    height: 100%;
    text-align: center;
    font-size: 0.8em;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bar-total-number {
    display: none;
}

/* print */

@media print {

    /* Ensure borders are visible for tables with the classes bb_classlist and numbers */
    table.bb_classlist {
        border: 2px solid black;
        border-collapse: collapse;
    }

    table.bb_classlist th,
    table.bb_classlist td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    /* Ensure borders are visible for the smaller table with the class tiny */
    table.tiny,
    table.tiny th,
    table.tiny td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    /* Additional optional styling for print */
    table {
        width: 100%;
        /* Makes sure table fits the page */
    }

    div.navbar-header,
    div.navbar-collapse {
        display: none;
    }

    /* simple bar chart */
    .chart-container {
        border-left: 2px solid black;
        border-bottom: 2px solid black;
    }

    .bar {
        color: black;
        border: 1px solid black;
    }

    .x-axis-container {
        color: black;
        border: 1px solid black;
    }

    .bar-wrapper {
        width: 30%;
        height: 100%;
        text-align: center;
        font-size: 0.8em;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

}