h1 img.icon,
h2 img.icon,
h3 img.icon,
h4 img.icon,
h5 img.icon,
h6 img.icon {
	max-width:      1em;
	max-height:     1em;
	vertical-align: baseline;
}


table.docutils td,
table.docutils th {
	padding: 2px;
}

table.docutils th {
	background-color: lightgray;
}

table.docutils td {
	background-color: whitesmoke;
}

table.display-and-select {
	width:           100%;
	max-width:       80em;
	border-collapse: collapse;
	border:          1px solid darkgray;
}

table.display-and-select th,
table.display-and-select td {
	padding: 1px 5px;
	border:  solid 1px darkgray;
}

table.display-and-select thead tr {
	background-color: lightgray;
}

table.display-and-select tbody tr.even {
	background-color: whitesmoke;
}

table.display-and-select tbody tr.odd {
	background-color: #e0e0e0;
}

div#form-space {
	max-width: 60em;
}

div#homepage div#module-list {
	display:               grid;
	grid-gap:              1ex;
	grid-template-columns: repeat(auto-fill, minmax(30em, 1fr));
}

div#homepage div#module-list a.module {
	display:          block;
	border:           1px solid darkgray;
	border-radius:    4px;
	padding:          1ex;
	text-decoration:  none;
	color:            inherit;
	background-color: antiquewhite;
}

div#homepage div#module-list a.module div.title {
	font-weight: bold;
	font-size:   130%;
}

div#homepage div#module-list a.module div.description {
	max-height: 20em;
	overflow: auto;
}

div#homepage div#module-list a.module div.description table.docutils {
	width: 100%;
}

table#member-list td.beitritt {
	text-align: right;
}

table#member-list td.austritt {
	text-align: right;
}

table#member-list td.fees {
	text-align: right;
}

table#member-list td.saldo {
	text-align: right;
}

table#member-list td.saldo.negativ {
	color: red;
}

table#member-list td.saldo.positiv {
	color: green;
}

div#member-overview-pane {
	display:               grid;
	grid-gap:              1em;
	grid-template-columns: auto min-content;
}

div#member-overview-pane div#status img.icon {
	display: none;
	height:  1em;
}

div#member-overview-pane div#status div.value:hover img.icon {
	display: inherit;
}

div.action-box {
	margin-top: 1em;
}

div#member-history-portlet {
	border: 1px solid darkgray;
}

div#member-history-portlet div.content.date-list {
	display:               grid;
	grid-gap:              1ex;
	grid-template-columns: min-content auto;
}

div#member-history-portlet div.content.info-list {

}

div#person-list {
	display:               grid;
	grid-gap:              1ex;
	grid-template-columns: repeat(auto-fill, 30em);

}

div#person-list div.person {
	padding:       1ex;
	border:        1px solid darkgray;
	border-radius: 5px;
	background:    white linear-gradient(#F9F9F9E0 10%, #D8D8D8E0 90%);
}

div#person-list div.person.sex-m {
	background-color: blue;
}

div#person-list div.person.sex-w {
	background-color: red;
}

div#person-list div.person.sex-d {
	background-color: yellow;
}

div#person-list div.person div.infos {
	display:               grid;
	grid-template-columns: auto min-content;
}

div#person-list div.person img.photo {
	max-width:     10em;
	max-height:    10em;
	margin:        0 0 5px 5px;
	border:        5px solid white;
	border-radius: 5px;
}

div#person-list div.person div.name {
	font-size:   150%;
	font-weight: bold;
}


div#person-list div.person div.actions a.inline-action {
	margin-right: 1em;
}

div#bank-list {
	display:               grid;
	grid-gap:              1ex;
	grid-template-columns: repeat(auto-fill, 30em);

}

div#bank-list div.bank {
	position:      relative;
	padding: 1ex 1ex;
	border:        1px solid darkgray;
	border-radius: 5px;
	background:    white linear-gradient(#F9F9F9E0 10%, #D8D8D8E0 90%);
}

div#bank-list div.bank.valid {
	background: lightgreen linear-gradient(#F9F9F9E0 10%, lightgreen 90%);
}

div#bank-list div.bank.blocked {
	background: lightcoral linear-gradient(#F9F9F9E0 10%, lightcoral 90%);
}

div#bank-list div.bank div.actions {
	margin-top: 1ex;
}

div#bank-list div.bank div.status-text {
	position: absolute;
	right:    2px;
	bottom:   0;
}

div#bank-list div.bank.blocked div.status-text {
	font-size: 150%;
	top:       -1ex;
	right:     0;
	transform: rotate(10deg);
	color:     red;
}

div#bank-list div.bank div.mandats-list {
	display:               grid;
	grid-gap:              0 1ex;
	grid-template-columns: min-content auto;

}

div#bank-list div.bank div.mandats-list div.reference {
	font-family:  monospace;
	padding-left: 1em;
}

div#address-list {
	display:               grid;
	grid-gap:              1ex;
	grid-template-columns: repeat(auto-fill, 30em);

}

div#address-list div.address {
	position:      relative;
	padding:       1ex;
	border:        1px solid darkgray;
	border-radius: 5px;
	background:    white linear-gradient(#F9F9F9E0 10%, #D8D8D8E0 90%);
}

div#address-list div.address.invalid {
	background-color: red;
}

div#address-list div.address div.name {
	font-size: 130%;
}

div#address-list div.address div.invalid {
	font-size:   120%;
	font-weight: bold;
	position:    absolute;
	top:         0;
	right:       0;
	transform:   rotate(30deg);
	color:       red;
}

div#address-list div.address div.valid-till {
	text-align: right;
}

div#member-address-delete div.name {
	font-size:   130%;
	font-weight: bold;
}


div.date-list {
	display:               grid;
	grid-gap:              2px 1ex;
	grid-template-columns: min-content min-content;
}

div.date-list div.date {
	white-space: nowrap;
}

div.date-list div.value {
	font-weight: bold;
}

div#member-navigation div.content.active {
	font-weight:      bold;
	background-color: #9acbfc;
}


table#meetings {
	border-spacing:  1px;
	border-collapse: separate;
}

table#meetings th,
table#meetings td {
	padding: 0 3px;
}

table#meetings thead tr {
	background-color: lightgray;
}

table#meetings tbody tr.even {
	background-color: whitesmoke;
}

table#meetings tbody tr.even {
	background-color: #f0f0f0;
}

div#member-header div#title {
	font-size:   36px;
	font-weight: bold;
}

div#member-header div#title img.icon {
	max-width:      1em;
	max-height:     1em;
	vertical-align: baseline;
}

div#member-header div#date {
	font-weight:   bold;
	margin-bottom: 1em;
}

div#meetings-view div#meeting-list-wide {
	display: block;
}

div#meetings-view div#meeting-list-narrow {
	display: none;
}

table#meetings {
	border-spacing:  1px;
	border-collapse: separate;
}

table#meetings th,
table#meetings td {
	padding: 0 3px;
}

table#meetings thead tr {
	background-color: lightgray;
}

table#meetings tbody tr.even {
	background-color: whitesmoke;
}

table#meetings tbody tr.even {
	background-color: #f0f0f0;
}

table#meetings tbody td.type img.meeting-type {
	max-width:      1em;
	max-height:     1em;
	vertical-align: middle;
}

table#meetings tbody td.participants {
	text-align: right;
}

div#meetings a.meeting {
	display:               grid;
	margin-bottom:         2px;
	border:                1px solid gray;
	border-radius:         4px;
	grid-template-columns: min-content auto min-content;
	grid-template-areas:
			"icon title title"
			"icon date time";
}

div#meetings a.meeting.even {
	background-color: whitesmoke;
}

div#meetings a.meeting.even {
	background-color: #f0f0f0;
}

div#meetings a.meeting div {
	padding: 2px;
}

div#meetings a.meeting div.icon {
	grid-area: icon;
}

div#meetings a.meeting div.title {
	grid-area: title;
}

div#meetings a.meeting div.date {
	white-space: nowrap;
	grid-area:   date;
}

div#meetings a.meeting div.time {
	white-space: nowrap;
	grid-area:   time;
}

div#meetings a.meeting div.icon img.meeting-type {
	max-width:      3em;
	max-height:     3em;
	vertical-align: middle;
}

div#member-header div#title {
	font-size:   36px;
	font-weight: bold;
}

div#member-header div#title img.icon {
	max-width:      1em;
	max-height:     1em;
	vertical-align: baseline;
}

div#member-header div#date {
	font-weight:   bold;
	margin-bottom: 1em;
}

div#meetings-view ol#agenda {
	max-width: 60em;
}

div#meetings-view ol#agenda div.title {
	font-weight: bold;
}

div#meetings-protocol-closed div.protocol {
	columns:     40em;
	column-gap:  2em;
	column-rule: 1px solid gray;
}

div#meetings-protocol-running div.protocol {
	max-width: 60em;
}


div.protocol div.protocol-agenda-entry {
	page-break-inside: avoid;
}

div.protocol div.protocol-agenda-entry div.protocol-agenda-title {
	font-size:     120%;
	font-weight:   bold;
	border-bottom: 1px solid gray;
}

div.protocol div.protocol-agenda-entry a.protocol-agenda-paragraphs {
	text-decoration: none;
	color:           black;
}

div.protocol div.protocol-agenda-entry a.protocol-agenda-paragraphs.editable:hover {
	color: blue !important;
}

div.protocol div.protocol-agenda-entry a.protocol-agenda-paragraphs.current {
	display:          block;
	padding:          2px;
	border:           1px solid blue;
	border-radius:    4px;
	background-color: lightblue;
}

div.protocol div.protocol-agenda-entry a.protocol-agenda-paragraphs div.deleted-entry {
	padding:          2px;
	color:            white;
	border:           1px solid red;
	border-radius:    4px;
	background-color: lightsalmon;

}


div#meetings-accreditation div#accredited {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	grid-gap:              2em;
}

div#meetings-accreditation div#accredited table {
	width: 100%;
}

div#meetings-access div#permissions-list {
	display:               grid;
	grid-template-columns: auto auto;
	grid-gap:              1px;
}

div#meetings-access div#permissions-list div.user-row {
	padding: 2px;
}

div#meetings-access div#permissions-list div.even {
	background-color: whitesmoke;
}

div#meetings-access div#permissions-list div.odd {
	background-color: #f0f0f0;
}

div#donations-view div#donations-list {
	width:     min-content;
	min-width: 60em;
}

div#donations-view div.year-tabs {
	display:               none;
	grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
}

div#donations-view div.year-tabs div.tab {
	padding:          2px 4px;
	border:           1px solid gray;
	border-bottom:    0;
	border-radius:    4px 4px 0 0;
	background-color: whitesmoke;
}

div#donations-view div.year div.title {
	font-size:   150%;
	font-weight: bold;
}

table.donation-list {
	width:           100%;
	max-width:       80em;
	border-collapse: collapse;
	border:          1px solid #888888;
}

table.donation-list th {
	padding:          2px 1em;
	border:           solid 1px #888888;
	background-color: #EEEEEE;
}

table.donation-list th.number {
	width: 1%;
}

table.donation-list th.date {
	width: 15%;
}

table.donation-list th.donor {
	width: 34%;
}

table.donation-list th.amount {
	width: 1%;
}

table.donation-list th.type {
	width: 20%;
}

table.donation-list th.comment {
	width: 39%;
}

table.donation-list tbody {
	cursor: pointer;
}

table.donation-list tbody:hover {
	background-color: #d4e9ff !important;
}

table.donation-list tbody.even {
	background-color: white;
}

table.donation-list tbody.odd {
	background-color: #F2F2F2;
}

table.donation-list td {
	padding:        2px 0.5em;
	vertical-align: baseline;
	border-right:   solid 1px #888888;
	border-bottom:  solid 1px #d0d0d0;
}

table.donation-list td.date {
	white-space: nowrap;
}

table.donation-list td.amount {
	text-align: right;
}

div#donation-view div#donation-status {
	font-size:     150%;
	font-weight:   bold;
	margin-bottom: 1em;
}

div#donation-view div#donation-status.announced {
	color: blue;
}

div#donation-view div#donation-status.confirmed {
	color: green;
}

div#donation-view div#donation-status.retracted {
	color: red;
}

div#donation-view div#positions table#positions-table {
	border: 1px solid gray;

}

div#donation-view div#positions table#positions-table td,
div#donation-view div#positions table#positions-table th {
	padding:         0 4px;
	border-collapse: collapse;
	border:          1px solid gray;
}

div#donation-view div#positions table#positions-table thead tr {
	background-color: lightgray;
}

div#donation-view div#positions table#positions-table tr.even {
	background-color: whitesmoke;
}

div#donation-view div#positions table#positions-table tr.odd {
	background-color: #e0e0e0;
}

div#donation-view div#positions table#positions-table td.amount {
	text-align: right;
}


div#donation-view div#attachments {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(26em, 1fr));
	grid-gap:              1ex;

}

div#donation-view div#attachments div.attachment {
	position: relative;
}

div#donation-view div#attachments a.attachment {
	display:               grid;
	padding:               1ex;
	text-decoration:       none;
	color:                 black;
	border:                1px solid darkgray;
	border-radius:         5px;
	background-color:      whitesmoke;
	grid-template-areas:
		'icon title title title'
		'icon filename filename filename'
		'icon description description description'
	    'icon date size uploader';
	grid-template-columns: min-content auto auto auto;
	grid-template-rows:    min-content min-content auto min-content;
	grid-gap:              2px;
}

div#donation-view div#attachments div.attachment a.delete {
	position: absolute;
	top:      -1ex;
	right:    -1ex;
	display:  none;
}

div#donation-view div#attachments div.attachment a.delete img.icon {
	max-width:      2em;
	max-height:     2em;
	vertical-align: baseline;
}

div#donation-view div#attachments div.attachment:hover a.delete {
	display: block;
}

div#donation-view div#attachments a.attachment:hover {
	background-color: #d4e9ff;
}


div#donation-view div#attachments a.attachment img.filetype-icon {
	height:    5em;
	grid-area: icon;
}

div#donation-view div#attachments a.attachment div.title {
	font-weight: bold;
	grid-area:   title;
}

div#donation-view div#attachments a.attachment div.description {
	grid-area: description;
}

div#donation-view div#attachments a.attachment div.filename {
	font-family: monospace;
	grid-area:   filename;
}

div#donation-view div#attachments a.attachment div.uploader {
	font-size: 80%;
	grid-area: uploader;
}

div#donation-view div#attachments a.attachment div.size {
	font-size: 80%;
	grid-area: size;
}

div#donation-view div#attachments a.attachment div.date {
	font-size: 80%;
	grid-area: date;
}

div#donation-view div#history {
	max-width: 60em;
}

div#donation-view div#history div.donation-history {
	display:               grid;
	margin-bottom:         3px;
	padding:               2px;
	border:                1px solid gray;
	background-color:      whitesmoke;
	grid-gap:              5px;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows:    min-content auto auto;
	grid-template-areas:
			"title name timestamp"
			"content content content"
			"comment comment comment";
}

div#donation-view div#history div.donation-history div.title {
	font-weight: bold;
	grid-area:   title;
}

div#donation-view div#history div.donation-history div.name {
	white-space: nowrap;
	grid-area:   name;
}

div#donation-view div#history div.donation-history div.timestamp {
	font-style:  italic;
	text-align:  right;
	white-space: nowrap;
	grid-area:   timestamp;
}

div#donation-view div#history div.donation-history div.comment {
	grid-area: comment;
}

div#donation-view div#history div.donation-history div.content {
	grid-area: content;
}

div#donation-view div#history div.donation-history div.content.paid {
	display:               grid;
	grid-template-columns: min-content auto;
	grid-gap:              1em;
}

div#donation-view div#history div.donation-history div.content.paid div.paid {
	white-space: nowrap;
}


div#donation-view div#history div.donation-history div.content.delivered {
	display: block;
}

div#donation-view div#history div.donation-history div.content.delivered div.delivery {
	white-space: nowrap;
}

div#donation-view div#history div.donation-history div.content.sent {
	display: block;
}

div#member-fees-overview a.year-button {
	font-weight:      bold;
	display:          inline-block;
	margin-bottom:    1ex;
	padding:          5px 1em;
	color:            black;
	border:           1px solid darkgray;
	border-radius:    5px;
	background-color: #C0C0C0;

}

div#member-fees-overview a.year-button:hover {
	text-decoration:  none;
	color:            blue;
	background-color: lightblue;
}

div#member-fees-overview a.year-button.active {
	color:            green;
	background-color: #F0F0F0;
}


table#member-account tr.withdrawal.even {
	background-color: #FFE0E0;
}

table#member-account tr.withdrawal.odd {
	background-color: #FFE8E8;
}

table#member-account tr.payment.even {
	background-color: #E0FFE0;
}

table#member-account tr.payment.odd {
	background-color: #E8FFE8;
}

table#member-account tr.future {
	color: grey;
}

table#member-account tr.payment td.amount {
	color: green;
}

table#member-account tr.withdrawal td.amount {
	color: red;
}

table#member-account td.amount {
	text-align: right;
}

table#member-account-quarter-overview {
	width: 100%;

}

table#member-account-quarter-overview th {
	text-align: center;
}


table#member-account-quarter-overview tbody th {
	width:            3em;
	background-color: #F0F0F0;

}

table#member-account-quarter-overview tbody td.paid {
	background-color: green;
}

table#member-account-quarter-overview tbody td.unpaid {
	background-color: red;
}

table#member-account-quarter-overview tbody td.late {
	background-color: orange;
}

div#fees-account-saldo div.saldo {
	font-size:   300%;
	font-weight: bold;
	text-align:  center;
}

div#fees-account-saldo div.saldo.credit {
	color: green;
}

div#fees-account-saldo div.saldo.debit {
	color: red;
}

div#member-account-quarter-legend {
	display:               grid;
	margin:                5px;
	grid-gap:              0 1ex;
	grid-template-columns: 2em auto;
}

div#member-account-quarter-legend div.paid {
	background-color: green;
}

div#member-account-quarter-legend div.unpaid {
	background-color: red;
}

div#member-account-quarter-legend div.late {
	background-color: orange;
}


@media screen and (max-width: 750px) {
	div#member-header div#title {
		font-size: 24px;
	}

	table#member-list tr th:nth-child(5),
	table#member-list tr th:nth-child(6),
	table#member-list tr th:nth-child(7),
	table#member-list tr th:nth-child(8),
	table#member-list tr th:nth-child(9),
	table#member-list tr td:nth-child(5),
	table#member-list tr td:nth-child(6),
	table#member-list tr td:nth-child(7),
	table#member-list tr td:nth-child(8),
	table#member-list tr td:nth-child(9) {
		display: none;
	}

	div#module-list {
		display: block;
	}

	div#person-list {
		display: block;
	}

	div#bank-list {
		display: block;
	}

	div#address-list {
		display: block;
	}

	div#meetings-view div#meeting-list-wide {
		display: none;
	}

	div#meetings-view div#meeting-list-narrow {
		display: block;
	}

	div#member-header div#title {
		font-size: 24px;
	}

	div#meetings-accreditation div#accredited {
		display: block;
	}

}