@charset "utf-8";

/********************** from deprecated yui reset.css *************************/
/*html{color:#000;background:#FFF;}*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}

/*li{list-style:none;}*/
caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

/* to preserve line-height and selector appearance */
sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/*to enable resizing for IE*/
input, textarea, select {
    *font-size: 100%;
}

/*because legend doesn't inherit in IE */
/*legend{color:#000;}*/

/********************** Start Einfaches Form Reset *************************/
button, input[type=button], input[type=submit], select {
    -webkit-padding-start: 4px;
    -webkit-padding-end: 4px;
}

/********************** Ende Einfaches Form Reset *************************/

/********************** Start Allgemeines *************************/
h1, h2, h3, td, th, body, li, p, i {
    font-family: Verdana, Arial, sans-serif;
    font-size: small; /* Achtung: Bei der Einheit px lässt sich im IE die Fontgröße nicht mehr ändern. */
}

h1, h2, h3 {
    margin: 1em 0;
}

h1, h2, h3, h4, h5, h6, strong {
    font-weight: bold;
}

pre {
    font-size: 1.2em;
}

html {
    background: none;
}

body {
    background-color: #fafafa !important;
}

ul, ol {
    margin: 0 0 0 1.5em;
}

li {
    padding-bottom: .1em;
    padding-top: .1em;
}

/* Erscheinungsbild von Links */
a:link {
    color: #000000;
    text-decoration: underline
}

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

a:hover {
    color: #b20768;
    text-decoration: underline
}

a:active {
    color: #b20768;
    text-decoration: underline
}

fieldset {
    border: #eeeeee 2px groove;
    margin: .1em;
    padding: .3em;
}

/********************** Start Django CSS Klassen *************************/
.errorlist {
    /* float: right;  funktioniert nicht richtig, bei Reports (Datumsangabe) ist die Fehlermeldung doch links und abgeschnitten */
    color: red;
    margin: 0;
    padding: 0 0 0 16px; /* ansonsten ist der Aufzählungspunkt ggf. nicht zu sehen*/
}

.errorlist a { /* Link in errorlist auch rot anzeigen (Firefox) */
    color: red;
}

.error {
    color: red;
}

.disabled {
    color: gray;
}

/********************** MODWORK *************************/
/* horizontale Liste */
ul.hlist {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: .2em;
    position: relative;
}

.hlist_left {
    float: left;
    text-align: left;
}

.hlist_right {
    float: right;
    text-align: right;
}

.hlist_center {
}

.hlist li {
    border-right: solid 1px;
    display: inline;
    padding: 0 0.33em;
}

.hlist li:last-child {
    border-right: 0;
}

/*---- Merkmale von Kopf-Elementen ----*/
#header {
    /*noinspection CssUnknownTarget*/
    background-color: #3B6EA3;
    box-shadow: inset 0 25px 30px -30px #000;
}

#header a {
    text-decoration: none !important;
}

/*---- Branding ----*/
#div-branding {
    position: relative;
    padding: 0.2em 0.5em 0 0.5em;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

#div-branding-left {
    margin-right: 10px;
    flex-grow: 0;
    flex-shrink: 0;
}

.branding-text-1 {
    color: #c6c166;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.01em;
}

#div-branding-head {
    flex-grow: 1;
}

.branding_head_title {
    color: white !important;
}

#div-branding-hooks {
    flex-grow: 0;
    flex-shrink: 0;
}

#div-branding-right {
    flex-grow: 0;
    flex-shrink: 0;
}

.branding-text-2 {
    color: #c6c166;
    vertical-align: middle;
}

#branding-logo {
    height: 2em;
    vertical-align: middle;
    width: 2em;
}

#firma-branding-logo {
    height: 2em;
    vertical-align: top;
}

/*---- Headlinks ----*/
#div-headlinks {
    clear: both;
}

#div-headlinks .hlist li {
    border-color: lightgrey;
    float: left;
}

#div-headlinks .hlist_center li {
    color: #d5d800;
    font-weight: bold;
    text-align: center;
}

.topline {
    border: 0;
    margin: 0;
    padding: 0;
}

.topline_link {
    color: white !important;
    white-space: nowrap;
}

.topline_link:hover {
    text-shadow: 0 0 20px #C9DBED;
}

.topline_link_current {
    font-weight: bold;
}

/*---- Breadcrumbs ----*/
#div-breadcrumbs {
    padding: 1px 1px 1px 10px;
    background-color: #fafafa;
}

#div-breadcrumbs a {
    border: 0;
}

/*---- Headline ----*/
#div-headline {
}

/*---- Topline ----*/
#div-topline {
    padding: 5px 0 5px 5px;
    background-color: transparent;
    border-bottom: 1px gray solid;
}

/*---- Box ----*/
.box-head {
    background-color: #3B6EA3;
}

.box-head, .box-head a {
    color: white;
}

div.box-content {
    background-color: white;
}

/* Schema 2 */
.box2 {
    background-color: white;
}

div.box2-content {
    background-color: white;
}

.box2-content-toggle {
    background-color: white;
}

/****** HBox ******/
.hbox {
    background-color: white !important;
}

/* head */
div.hbox-head {
    background-color: #3B6EA3;
}

div.hbox-head, div.hbox-head a {
    color: #eee;
}

/****** VBox ******/
.vbox {
    background-clip: padding-box !important;
    background-color: white !important;
}

/* head */
div.vbox-head {
    background-color: #3B6EA3;
}

div.vbox-head, div.vbox-head a {
    color: #eee;
}

td.vbox-toggle, td.vbox-second-toggle {
    background-color: #FFFFFF !important;
}

/*  Messages Zeile mit Nachrichten zwischen topline und main */
#div-messages {
    background-color: #ffffff;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
}

#div-messages ul {
    margin: 0;
    padding-bottom: 0.5em;
    padding-left: 2em; /* Damit die Aufzählungspunkte zu sehen sind */
    padding-top: 0.5em;
}

ul.messages {
    margin: 0;
}

ul.messages li {
    padding-left: 5px;
    list-style: none;
}

ul.messages li.message-info {
    background: #82D5AE;
}

i.message-info {
    color: #31B404;
}

ul.messages li.message-error {
    background: #ff9191;
}

i.message-error {
    color: #FF4000;
}

i.message-warning {
    color: #ef9b1d;
}

/*
 Hilfetext, der die angezeigte Seite beschreibt.
*/
.page_help {
    font-style: italic;
    width: 15em !important;
}

/*
 field_error: Fehlermeldung neben
 einem Eingabefeld. Ausklappbar ueber
 ein Fragezeichen.
 */
a.field_error {
    color: red;
    font-size: large;
}

.help_opener {
    color: orange;
    cursor: help;
    font-size: small;
}

/* Erste Spalte bei einem Formularfeld */
.form_label {
    padding: .2em;
}

.required {
    font-weight: bold;
}

.form_widget {
    padding: .2em;
}

.form_errors {
    color: red;
    padding: .2em;
}

/* Erste Spalte bei einem Anzeigefeld */
.view_label {
    font-weight: bold;
    padding: .2em;
}

.view_content {
    padding: .2em;
}

table.table tr > th,
table.table tr > th > a
{
    background-color: #3B6EA3;
    color: #eee;
    text-decoration: none;
}

table.toggle_table_button {
    margin: .4em 0 0;
    text-align: left;
    width: 100%;
}

table.toggle_table_button td {
    padding: .2em .2em 0;
    width: 1%;
}

table.toggle_table_button th {
    padding: .2em .2em 0;
}

table.toggle_table {
    margin: 0;
    width: 100%;
}

/*
 IE unterstützt den Child-Selector '>' leider nicht.
*/

table.toggle_table > tbody > tr > td {
    border: 1px #ddd solid;
}

tr.formtdline {
    text-align: left;
}

/*
 Treeview
*/

.yui-skin-sam td {
    border: none;
    padding: 0;
}

.yui-skin-sam table {
    margin: 0;
}

#box_koerbe > table td:first-child {
    padding: 0;
}

td.koerbe_cell {
    white-space: nowrap;
    vertical-align: inherit !important;
}

.koerbe_tab {
    padding-left: 0;
    padding-right: 0;
}

.koerbe_reiter_tab {
    padding: 0;
    background: #c9dbed;
    border-bottom: 1px solid #1A5A9C;
}

.koerbe_link {
    background-color: #5d8bba;
    border: none;
    color: white;
    padding: 0 4px;
}

.koerbe_link:hover {
    background-color: #1A5A9C;
}

.treeview_heading th {
    max-width: 150px;
}
.treeview_heading a {
    word-wrap: break-word;
}


.due_date_light {
    border: 1px solid black;
    float: left;
    height: 6px;
    margin: 4px 2px 0 1px;
    width: 6px;
}

/*
 Tabelle mit Eingabefeldern.
 Erstellt von utils.form2dict()
*/
table.formerrortable {
    display: inline;
}

/*
 Tabelle
*/
table.paginator-table tr th,
table.paginator-table tr th a {
    background-color: #3B6EA3;
    color: #eee;
}
/*
 History Tabelle
*/
table.history {
    margin: 5px;
}

table.history tr td {
    border: 1px solid #aaaaaa;
}

table.history tr th {
    border: 1px solid #aaaaaa;
}

table.history_changes {
    display: inline;
    margin: 0; /* Rand um die Changes Tabelle soll nicht zu sehen sein */
    padding: 0;
}

table.history_statements {
    margin: 0;
    padding: 0;
    width: 100%;
}

table.history_statements tbody tr td {
    border: 0;
    margin: 0;
}

table.history_statements {
    height: 100%;
}

td.history_statements_container {
    padding: 0;
}

td.history_changes_container {
    padding: 0;
}

table.history_changes {
    width: 100%;
}

table.history_changes tbody tr td {
    border: 1px solid #aaaaaa;
    margin: 0;
    padding: .4em;
}

div.beleg_meta {
    border-right: 1px solid black;
    padding: .2em;
    text-align: center;
    vertical-align: top;
}

.locked {
    color: #FC737A;
    margin: 0.4em 0;
}

.locked .material-icons {
    transform: translateY(0.15em);
}

/*
 Actions (Drop-Down Box der möglichen Aktionen)
*/
table.actions {
    margin: 0;
}

table.actions td {
    padding: 1px;
}

/*
 IE vor 7.0 versteht leider nicht, wenn Auswahlfelder deaktiviert
 sein sollen. Außerdem versteht er Attributbedingte Formatierung nicht.
 Mein Django wurde entsprechend angepasst, so dass auch class="disabled"
 gesetzt wird.
*/
option.disabled {
    color: gray;
}

/*
 Zeitueberschreitungen.
 Siehe modwork_esg/hooks.py: Beleg.get_date_created_display() wird ueberschrieben.
*/
.critical {
    color: red;
    font-weight: bold;
}

.warning {
    color: orange;
    font-weight: bold;
}

.ok {
}

.unimportant {
    color: gray;
}

table.table_with_caption {
    border-bottom: 1px solid #ccc;
    width: 100%;
}

table.table_with_caption caption {
    background-color: #3B6EA3;
    color: #FFFFFF;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    text-align: center;
    padding: 0 2px 2px 0;
}

.changed input[type=submit], .changed button[type=submit], .dirty input[type=submit], .dirty button[type=submit],
.changed input[type=reset], .changed button[type=reset], .dirty input[type=reset], .dirty button[type=reset] {
    font-weight: bold;
}

.graytable > tbody > tr > td {
    border: 1px solid darkgray;
}

.graytable > tbody > tr > th {
    border: 1px solid darkgray;
}

/* bei Workflow Übersicht der Schritte */
tr.highlight > td {
    border: 2px solid black;
    font-weight: bold;
}

a.beleg_state_fertig {
    opacity: 0.7;
}

.tag-color {
    padding: 2px 5px 2px 5px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px 1px 1px 10px;
}

.tab_selected {
    padding-left: 0.5em;
    padding-right: 0.5em;
    background: #1A5A9C;
    text-align: center;
    vertical-align: middle !important;
}

.tab_deselected {
    padding-left: 0.5em;
    padding-right: 0.5em;
    background: #5d8bba;
    text-align: center;
    vertical-align: middle !important;
}

.tab_deselected:hover {
    background: #1A5A9C;
}

.tab_selected a:link , .tab_deselected a:link,
.tab_selected a:visited, .tab_deselected a:visited {
    color: white;
    text-decoration: none;
}


.reiter {
    border-collapse: separate;
    flex-wrap: wrap;
    padding: 0.2em 0.2em 0
}

.reiter div {
    display: inline-block;
    margin: 2px 2px 0 2px;
    font-size: 110%;
    padding: 2px 4px;
}

.tab_margin {
    padding-left: 1px;
    padding-right: 0;
}

img.attachment-rotate {
    /* beim Drehen der Bilder sollte der Rand zu sehen sein, damit man das Format besser erkennen kann */
    border: 1px solid black;
}

.highlight-input {
    border: 2px solid orange;
}

.attachment_border {
    border: 1px solid gray;
}

.ba-highlight {
    font-weight: bold;
}

.ba-depth-0 {
    font-weight: bold;
}

.ba-depth-1 {
    font-weight: normal;
    list-style-type: circle;
}

.ba-depth-2 {
    font-style: italic;
    font-weight: normal;
}

.ba-depth-3 {
    font-style: normal;
    font-weight: normal;
    list-style-type: circle;
}

.ba-depth-4 {
    font-style: italic;
    font-weight: normal;
}

.phone-link:before {
    content: "☎"
}

form[name="email"] textarea {
    width: 44em;
}

form[name="email"] input[type="text"] {
    width: 44em;
}

form[name="email"] select[name="to"] {
    width: 44em;
}

form[name="email"] select[name="cc"] {
    width: 44em;
}

form[name="email"] select[name="bcc"] {
    width: 44em;
}

form[name="email"] #id_original_attachments {
    list-style: none;
    margin-left: 0;
}

#id_beleg_form-bearbeitungshinweis, #id_beleg_form-name, #id_beleg_form-text {
    width: 33em;
}

/*
geht leider noch nicht. Erst size="x" bei allen Text-Eingabfeldern entfernen und
durch CSS ersetzen.
https://www.tbz-pariv.lan/index.html/doku.php?id=textarea
input[type="text"]{
    width: 33em;
}
*/

form[name="belegart-edit"] input[name="name"] {
    width: 33em;
}

form[name="belegart-edit"] input[name="text"] {
    width: 33em;
}

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

table.inner_grid tr {
    border-top: 1px solid darkgray;
}

table.inner_grid tr:first-child {
    border-top: none;
}

table.inner_grid td {
    padding: 2px;
    vertical-align: middle;
}

table.inner_grid td button {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

table.inner_grid tr:nth-child(n+1) td:nth-child(5) {
    border-left: 1px solid darkgray;
}

.iframe-pointer-events-off {
    pointer-events: none;
}

em {
    font-style: italic;
}

th {
    font-weight: bold;
    text-align: center;
}

.ui-widget-content.ui-tabs {
    background-color: inherit;
}

/* autocomplete input beleg owner */
input[name^="owner"].ui-autocomplete-input {
    width: 20em;
}

.ui-autocomplete-input {
    padding: 0.05em;
    padding-left: 0.5em;
}

.ui-datepicker-trigger {
    display: inline-block;
    margin-left: -1px !important;
    height: 1.5em;
    width: 2.3em;
}

.ui-datepicker-trigger .ui-button-text {
    padding: 0 0.4em;
}

/********************** Start Mobile Anpassungen *************************/
/* Tablets und kleiner */
@media only screen and (max-width: 768px) {
}

/* Smartphones */
@media only screen and (max-width: 414px) {
}

/********************** Ende Mobile Anpassungen *************************/

.isu_button_link {
    margin-top:    2px;
    margin-bottom: 2px;
}

.inbox_belege {
    border: 1px solid;
    border-radius: 3px;
    display: inline-block;
    margin-left: 5px;
    padding-right: 3px;
    padding-left: 3px;
}

/* look ahead - bootstrap alerts */
.alert {
    display: inline-block;
    border: 1px solid #999;
    border-radius: 8px;
    padding: 8px;
    min-width: 580px;
    margin-bottom: 8px;
}
.alert.alert-info {
    color: #055160;
    background: #cff4fc;
    border-color: #b6effb;
}
.alert.alert-warning {
    color: #664d03;
    background: #fff3cd;
    border-color: #ffecb5;
}

/* jqueryui button links*/
a.submit-button,
a.submit-button:hover,
a.submit-button:visited {
    color: #fff;
}