/**
 * Allgemeine Dinge
 */
body {
	font-family: 'Trebuchet MS','Open Sans','sans-serif';
    margin: 0;
    padding: 0;
}

img {
	vertical-align: middle;
    border: none;
}

/*** Tabellen ***/
table {
    border-collapse: collapse;
}
td, th {
    vertical-align: top;
}
th {
	color: #666666;
	font-size: small;
}

/* numerische Tabellenzellen */
td.numeric {
    text-align: right;
}
td.neg {
    color: red;
}

/* Tabellenzeilen mit einer Warnung, z.b. veraltete Einträge */
tr.veraltet {
	background-color: #ffcccc !important;
}

/*** Eingabefelder ***/
input[type='checkbox'] {
	vertical-align: middle;
}
input, select, button {
	margin-right: 0.75em;
}

/*** von früher gefüllte Filterwerte hervorheben ***/
input.hilitevalue:not([value='']) {
	background-color: #ffff99;
}
select.hilitevalue {
	background-color: #ffff99;
}
select.hilitevalue[value='-1'],
select.hilitevalue[value='0'],
select.hilitevalue[value=''],
select.hilitevalue[value='-- egal --'],
select.hilitevalue[value='-- aktiv --'],
select.hilitevalue[value='-- alle --'] {
	background-color: white;
}

.cb_dialog input.mandatory, .cb_dialog textarea.mandatory, .cb_dialog select.mandatory {
	background: #F5F6CE;
	font-weight: normal;
}
.cb_dialog td span {
	line-height: 150%;
	margin-right: 5px;
}
*.readonly {
	color: #000080;
    background: #e0e0e0;
}

/*** tablesorter ***/
table thead th.header {
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 24px;
	padding-right: 20px;
}
.RList table thead th:nth-child(n+2) {
	border-left: 1px solid #999;
}
table thead th.header {
	cursor: pointer ;
	background-image: url('images/bg.gif') ;
}
table thead th.headerSortDown {
    background-image: url('images/desc.gif') ;
}
table thead th.headerSortUp{
    background-image: url('images/asc.gif') ;
}

/**
 * Zebra-Listen in Dialogen, die zu grauem Hintergrund passen. 
 */
.RDialog table.zebra tbody tr:nth-of-type(even) {
    background: #e0e0e0;
}
.RDialog table.zebra tbody tr:nth-of-type(odd) {
    background: #d8d8d8;
}
.RDialog table.zebra tbody tr:hover {
    background: #d8c8a0;
    transition: background 0.5s;
}

/**
 * Zebra-Listen in Forms und Listen 
 */
.RForm table tbody tr:nth-child(odd),
.RForm table tbody tr:nth-child(odd) tr,
.RList .ListSpace > table tbody tr:nth-child(odd) {
    background: #f0f0f0;
}
.RForm table tbody tr:nth-child(even),
.RForm table tbody tr:nth-child(even) tr,
.RList .ListSpace > table tbody tr:nth-child(even) {
    background: #e8e8e8;
}
tr.foot {
	border-top: 1px solid #808080;
    background: #f4f4f4;
}
tr.foot th {
	font-size: medium;
	text-align: left;
}





/*** Checkboxes, die aussehen wie iPhone-Switches ***/
input[type='checkbox'].switch {
	display: none;
}
input[type="checkbox"].switch  + label {
	margin-top: 4px;
	width: 40px;
	height: 14px;
	border-radius: 14px;
	border: 1px solid #666;
	background-color: #baa;
	display: inline-block;
	content: "";
	transition: background-color 0.2s linear;
}
input[type="checkbox"].switch + label:hover {
    cursor: pointer;
}
input[type='checkbox'].switch + label::before {
	width: 14px;
	height: 14px;
	border-radius: 14px;
	background-color: white;
	display: block;
	content: "";
	transition: margin 0.1s linear;
}
input[type="checkbox"].switch:checked + label {
	background-color: green; /*#2b8718;*/
}
input[type="checkbox"].switch:checked + label::before {
  	margin: 0 0 0 calc(40px - 14px);
}
input[type="checkbox"].switch:checked + label::before {
  	margin: 0 0 0 calc(40px - 14px);
}
input[type="checkbox"].switch:disabled + label {
  	opacity: 0.4;
}

/* für manche Dinge ist es besser, wenn die angeklickte Checkbox rot ist (dann aber switch und redswitch setzen) */
input[type="checkbox"].redswitch  + label {
	background-color: #aba;
}
input[type="checkbox"].redswitch:checked + label {
	background-color: crimson;
}

/* überall wo "www.Nachlasspfleger-Portal.de" erscheint */
.npp {
    color: #227722;    /* unser grün */
}

/* das Impressum */
table.Impressum {
	font-size: small;
	margin-top: 5mm;
	margin-bottom: 5mm;
}
table.Impressum td {
	padding-right: 5mm;
}

/* Dialoge */
.RDialog form {
    padding: 0.25em;
}
.RDialog table img.button {
	margin: 0 1px 0 1px;
}
.RErrorMsgDialog form .content {
	background: url('button_icons/32/dialog-error.png') left no-repeat;
	padding-left: 3em;
	padding-bottom: 1em;
}
.RInfoMsgDialog form .content {
    background: url('button_icons/32/information.png') left no-repeat;
    padding-left: 3em;
    padding-bottom: 1em;
}
.RConfirmDialog form .content {
    background: url('button_icons/32/help-browser.png') left no-repeat;
    padding-left: 3em;
    padding-bottom: 1em;
}

.selectTabs {
  	overflow: hidden;
  	border: none;
}
.selectTabs button {
	margin-right: 0em;
	border: 1px solid #cccccc;
	border-bottom: 1px solid grey;
  	cursor: pointer;
  	padding: 5px 3px;
  	color: grey;
  	transition: 0.1s;
}
.selectTabs button:hover {
  	background-color: lightlightgrey;
  	color: black;
  	border: 1px solid grey;
}
.selectTabs button.active {
  	background-color: white;
  	border: 1px solid grey;
	border-bottom: 1px solid white;
  	color: black;
}

.NotizDialog select[name=Beteiligte] {
	width: 34em;
	background: #e8e8e8;
}
.NotizAdresseListDialog select {
	width: 30em;
	height: 100px;
	margin-top: 3px;
	margin-bottom: 3px;
}
.NotizAdresseListDialog select:first-child {
	margin-top:23px;
}
.PostNotizDialog .info {
    background: url('button_icons/32/information.png') left no-repeat;
    padding-left: 3em;
    height: 2.5em;
    border-bottom: solid gray 1px;
}
.PostUrkundeErkanntDialog table {
	width: 100% ;
	border: 1px solid #b0b0b0;
	margin-top: 5px;
	margin-bottom: 5px;
}
.PostUrkundeErkanntDialog table th ,
.PostUrkundeErkanntDialog table td {
	padding: 2px 5px;
}
.PostUrkundeErkanntDialog table td:first-of-type {
	width: 20px;
}
.PostUrkundeErkanntDialog table th {
	background-color: #f0f0f0;
	color: black;
	font-size: medium;
	font-weight: bold;
	text-align: left;
}
.PostUrkundeErkanntDialog table tbody tr:nth-of-type(even) {
	background: #e0e0e0;
}
.PostUrkundeErkanntDialog table tbody tr:nth-of-type(odd) {
	background: #d8d8d8;
}
.PostUrkundeErkanntDialog table tbody tr:nth-of-type(1n+1):hover {
	background: #d8c8a0;
    transition: background 0.5s;
}
.UrkundenBestellDialog textarea {
    width: 38em;
    height: 8em;
    margin-top: 2mm;
    margin-bottom: 2mm;
}
.UrkundenBestellDialog select {
	width: 38em ;
	margin-right: 0px ;
}
.VKontoDialog select[name=AdresseID] {
	width: 32em;
}
.FontDialog .content {
    min-height: 14em;				/* wg. dem Drop-Down */
}

.cb_dialog[clazz='KontaktDialog'] {
    width: 55em;
}
.cb_dialog[clazz='GedcomProxyDialog'] {
    width: 30em;
}
.cb_dialog[clazz='EditFamDialog'] {
    overflow-y: visible;		/* wg. ColorPicker */
}
.PersonDialog textarea {
	width: 55em ;
}
.cb_dialog[clazz='FarbeDialog'] {
    overflow-y: visible;		/* wg. ColorPicker */
}

/**
 * Panel
 */
.RPanel .PanelSpace {
    margin-bottom: 0.5em;
    border-bottom-width: 0.5em;
    border-bottom-style: solid;
}
.RPanel .head {
	padding:0.5em 0 0.2em 0;
	color: #333;
    height: 1.5em ;
    text-align: center;
}

/**
 * Listen
 */
.RList {
    width: 100%;
}
.RList .Prolog {
    border-bottom-width: 2px;
    border-bottom-style: solid;
}
.RList table {
    width: 100%;
    max-width: 100%;
}
.RList .ListSpace > table tbody tr:hover {
	background: #d8c8a0;
    transition: background 0.5s;
}
.RList td, .RList th {
	padding: 0.3em 0.4em 0.4em 0.3em;
}
.RList ul, .RList ol, .RList li {
	margin-top: 0px;
	margin-bottom: 0px;
}
.RList .Prolog {
    background-color: #f0f0f0;
    border-top: solid 5px ;
}
.RList .Prolog form {
    padding: 5px 20px;
    line-height: 150%;
}
.RList .Prolog em {
	color: forestgreen;
}
.RList .Prolog p,
.RForm .Prolog p {
    padding: 5px 20px;
    color: #555;
    line-height: 150%;
    margin: 0;
}
.RList .Prolog p:first-of-type,
.RForm .Prolog p:first-of-type {
    padding: 10px 20px;
	font-size: large;
}
.RList .Epilog {
    text-align: center;
    background-color: #d8d8d8;
    border-bottom: solid 5px ;
    margin-bottom: 1.5em;
}
.RList .EmptySpace {
    padding: 1em;
    padding-left: 4em;
    text-align: left ;
    background: url(button_icons/32/information.png) 1em 1em no-repeat;
    background-color: #f0f0f0;
}
.RList img.button {
	margin: 0 1px 0 1px;
}
.dragOver {
	background-color: #d8c8a0 !important;
}

/*** spezielle Listen ***/
.NotizenList > .ListSpace > table,
.WiedervorlageList > .ListSpace > table {
    table-layout: fixed;
}

.VPostenList td:last-child {
	width:6em;
}
.VPostenList td:first-child {
	width:8em;
	break-inside: avoid;
}

.BeteiligteList td:last-child {
	width:4em;
}
.BeteiligteList td:nth-child(5) {   /* evtl. unumbrechbare E-Mail-Adressen abschneiden */
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Dropzone {
	border:dotted 1px blue;
	padding:5px;
	width:150px;
}

.NotizTemplateList td:nth-child(7) {    /* Automatik */
	text-align: center;				
}

.TextList td:nth-last-child(2) {        /* Abgleich mit Standard */
    text-align: center;             
}
.TextList td:nth-last-child(2) div { 
    width: 100px; 
    border-radius: 4px; 
    text-align: center; 
    display: inline-block; 
    font-size: 10pt;
    padding: 2px; 
}

/*** Adresspool, N Adressen, fallbezogen oder nicht ***/
.AdresspoolList td:nth-last-child(2) div {  
    width: 30px; 
    border-radius: 4px; 
    text-align: center; 
    display: inline-block;
    font-size: 10pt;
    padding: 2px; 
}

/*** Datei-Liste ***/
.FileList th:first-child,
.FileList td:first-child {			/* dir oder file */
	display: none;
}
.FileList td:nth-child(6) {         /* Datum / Uhrzeit */
	text-align: center ;
}

/*** Thumbnails in Listen (FileList, ForumPostingList) ***/
.NpList .Thumbnail {
	height: 1.5em ;
    width: 1.5em ;
    overflow: visible ;
}
.NpList .Thumbnail img {
    cursor: pointer;
    transition: 0.3s;
    height: 1.5em;
}
.NpList .Thumbnail:hover img {
	height: 16em;
	border: 3px solid gray;
	border-radius: 5px;
	z-index: 9 ;
	position: relative;
}

/*** Die Aktionen-Spalte als 3-Dot-Menu ***/
.RList .aktionen {
	position: relative ;				/* damit absolute funktioniert */
	display: inline-block ;
	overflow-y: visible ;
	text-align: right ;
}
.RList .aktionen::before {
	content: "\25cf  \25cf  \25cf" ;	/* 3 dots */
	white-space: pre;
	font-size: 6pt ;
	color: #999 ;
	background: #d0d8d0 ;
	border-radius: 6px;
	width: 40px;
	height: 20px;
	padding: 3px 6px;
	margin: 0px 6px;
}
.RList .aktionen > div {				/* das klappt runter .. */
	display: none ;
	position: absolute ;
	z-index: 9 ;
	top: 0px;
	right: 10px;
	padding: 10px;
	background: transparent;
}
.RList tr:nth-last-child(-n+5) .aktionen > div {
	bottom: 0px;						/* die letzten 5 Zeilen klappen hoch  */
	top: inherit;
}
.RList tr:nth-child(-n+5) .aktionen > div {
	top: 0px;					    	/* die ersten 5 Zeilen aber immer nach unten */
	bottom: inherit;
}
.RList tfoot tr:nth-child(n) .aktionen > div {
	bottom: 0px;						/* die Fußzeile klappt immer hoch  */
	top: inherit;
}
.RList .aktionen:hover > div {			/* ... wenn man über die Dots drübermaust */
	display: inline-block ;
}
.RList .aktionen div.inner {
	font-size: 10pt;
	text-align: left;
	vertical-align: middle;
	background: #ddd;
	border: 1px solid gray ;
}
.RList .aktionen div.inner > div {
	padding: 6px;
}
.RList .aktionen img {
	vertical-align: bottom ;
}
.RList .aktionen div.inner > div:hover {
	background: #ccc;
	cursor: pointer;
}

/*
** Daten-Formulare
*/
.RForm {
    margin-bottom: 10px;
}
.RForm .Prolog {
    background-color: #f0f0f0;
	border-top: solid 5px ;
	border-bottom: solid 2px ;
}
.RForm .Prolog p {
    padding: 0.5em 1em;
    color: #555;
    font-weight: bold;
    font-size: small;
    margin: 0;
    background-color: #f0f0f0;
}
.RForm table {
    border-bottom: solid 5px;
}
.RForm table td,
.RForm table th {
    padding: 0.25em 0.75em 0.25em 0.75em;
}
.RForm .name {
    color: #505050;
    font-weight: normal;
    text-align: right;
    width: 25%;
}
.RForm .value {
    color: #303030;
    font-weight: bold;
}
.RForm ul,
.RForm ol,
.RForm li {
	margin-top: 0px;
	margin-bottom: 0px;
}
.RForm .withcomment {
    border-bottom: 1px dotted darkblue;
}
.RForm .withcomment:hover {
    cursor: help;
}

/*** innere Tabellen ohne Verzierung ***/
.RForm table table {
	width: auto;
	border: none;
    background: none;
}
.RForm table table td,
.RForm table table th {
    padding: 0 1em 0 0 ;
}

/*** die PDF-Vorschau ***/
.PreviewPanel .content {
    height: 38em;
    border-bottom: solid 3px gray;
    border-left: solid 1px gray;
    border-right: solid 1px gray;
}
.PreviewPanel iframe {
    width: 100%;
    height: 100%;
}
.PreviewPanel .head {
    border-left-width: 2px;
    border-left-style: solid;
    border-right-width: 2px;
    border-right-style: solid;
}

.InfoPanel .PanelSpace .content {
    padding: 1em;
    padding-left: 4em;
    text-align: left ;
    background: url(button_icons/32/information.png) 1em 1em no-repeat;
    background-color: #f0f0f0;
}

/* ErbfolgePanel (Erbscheinantrag, Urkunden, Plausibilität, Teilbäume) */
.ErbfolgePanel .PanelSpace .content {
	border-left: 2px solid gray;
    border-right: 2px solid gray;
    padding: 1.5em;
    overflow-y: scroll;
	max-height: calc(100vh - 12.5em);
}

.ErbscheinPanelEx .PanelSpace .content,
.SachstandPanel .PanelSpace .content
{
    padding: 1.5em;
	background-color: #f0f0f0;
    overflow-y: scroll;
	max-height: calc(100vh - 12.5em);
}

/**
 * Der Stammbaum (ist auch ein ErbfolgePanel, aber ohne Ränder, Köpfe, Füße)
 */
.StammbaumPanelEx .PanelSpace,
.StammbaumPanelEx .PanelSpace .content {
    border: none;
    overflow-y: visible;
}
.StammbaumPanelEx .PanelSpace .head {
	display: none;
}
.StammbaumPanelEx .PanelSpace div button {
	background-color: #f4f4d4;
}
.StammbaumPanelEx .PanelSpace div button:hover {
	background-color: #ffe066;
}
.StammbaumPanelEx .RStrichMenu {
	position: fixed;
	top: 6em;
	left: 20px;
}

/**
 * Der Stammbaum mit echter PDF-Vorschau
 */
.StammbaumPanelPdf .PanelSpace,
.StammbaumPanelPdf .PanelSpace .content {
    border: none;
    overflow-y: visible;
}
.StammbaumPanelPdf .PanelSpace .head {
    display: none;
}
.StammbaumPanelPdf .PanelSpace div button {
    background-color: #f4f4d4;
}
.StammbaumPanelPdf .PanelSpace div button:hover {
    background-color: #ffe066;
}
.StammbaumPanelPdf .RStrichMenu {
    position: fixed;
    top: 6em;
    left: 20px;
}

/**
 * Die Plausibilitätsprüfung
 */
.PlausiPanel h2 {
    margin-bottom: 0px ;
}
.plausiTable {
    border-collapse: initial ;
    border-spacing: 2px 10px ;
}
.plausiOk {
    font-weight: bold;
    color: #339933;
}
.plausiWarning {
    color: #ff6633;
}
.plausiError {
    color: #cc0033;
}
.plausiAccepted {
    color: #666666;
}
.PlausiPanel .severity {
	font-weight: bold ;
}

/**
 * das Forum
 */
.ForumScreen .latest {
    border: 2px solid gold;
}
.ForumScreen .title {
    color: gray;
    font-size: small;
    font-weight: bold;
}
.ForumScreen .foto {
	width: 60px;
	height: 60px;
    object-fit: cover;
    margin-bottom: 4px;
}
.ForumThumbnail {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.ForumThumbnail:hover {
	opacity: 0.7;
}
.ForumThreadList td:nth-child(2) {
	/* Spalte mit Anzahl Postings im grünen Kreis */
	text-align: center;
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* Background-Icons für einzelne Buttons (muss vor dem anderen background-Zeug kommen) */
button.abgeben {
    background: url('button_icons/32/user_go.png') ;
}
button.add {
    background: url('button_icons/32/add.png') ;
}
button.addposten {
    background: url('button_icons/32/coins_add.png') ;
}
button.adduser {
    background: url('button_icons/32/user_add.png') ;
}
button.attach {
    background: url('button_icons/32/mail-attachment.png') ;
}
button.cal {
    background: url('button_icons/32/office-calendar.png') ;
}
button.calc {
    background: url('button_icons/32/calculator.png') ;
}
button.continue {
    background: url('button_icons/32/edit-redo.png') ;
}
button.copy {
    background: url('button_icons/32/edit-copy.png') ;
}
button.clipboard {
    background: url('button_icons/32/edit-paste.png') ;
}
button.checklist {
	background: url('button_icons/32/check_box_list.png') ;
}
button.contact {
    background: url('button_icons/32/tango_contact.png') ;
}
button.delete {
    background: url('button_icons/32/delete.png') ;
}
button.down {
    background: url('button_icons/32/go-down.png') ;
}
button.download {
    background: url('button_icons/32/download_cloud.png') ;
}
button.edit {
    background: url('button_icons/32/application_edit.png') ;
}
button.envelope {
    background: url('button_icons/32/envelopes.png') ;
}
button.erblasser {
    background: url('button_icons/32/user_silhouette.png') ;
}
button.euro {
    background: url('button_icons/32/euro.png') ;
}
button.excel {
    background: url('button_icons/32/office-excel.png') ;
}
button.fall_new {
    background: url('button_icons/32/folder_add.png') ;
}
button.fall_delete {
    background: url('button_icons/32/folder_delete.png') ;
}
button.fall_edit {
    background: url('button_icons/32/folder_edit.png') ;
}
button.fall_go {
    background: url('button_icons/32/folder_go.png') ;
}
button.fall_vergabe {
    background: url('button_icons/32/folder_user.png') ;
}
button.font {
    background: url('button_icons/32/preferences-desktop-font.png') ;
}
button.footer {
    background: url('button_icons/32/layoutx_footer.png') ;
}
button.forum_add {
    background: url('button_icons/32/comment_add.png') ;
}
button.forum_edit {
    background: url('button_icons/32/comment_edit.png') ;
}
button.gedcom {
    background: url('button_icons/32/binary-tree.png') ;
}
button.gericht {
    background: url('button_icons/32/balance.png') ;
}
button.header {
    background: url('button_icons/32/layoutx_header.png') ;
}
button.hbci {
    background: url('button_icons/32/card_bank.png') ;
}
button.import {
    background: url('button_icons/32/text_imports.png') ;
}
button.inbox {
    background: url('button_icons/32/inbox_images.png') ;
}
button.kontakt {
	background: url('button_icons/32/vcard.png') ;
}
button.kontakt_edit {
	background: url('button_icons/32/vcard_edit.png') ;
}
button.kontakt_abgleich {
	background: url('button_icons/32/match_field.png') ;
}
button.kontakt_link {
    background: url('button_icons/32/link_add.png') ;
}
button.kontakt_new {
	background: url('button_icons/32/vcard_add.png') ;
}
button.kontakt_split {
    background: url('button_icons/32/link_delete.png') ;
}
button.kontakt_veraltet {
    background: url('button_icons/32/emotion_ghost.png') ;
}
button.mail {
    background: url('button_icons/32/internet-mail.png') ;
}
button.map {
    background: url('button_icons/32/internet-web-browser.png') ;
}
button.margin {
    background: url('button_icons/32/layoutx_margin.png') ;
}
button.move {
    background: url('button_icons/32/document_move.png') ;
}
button.nehmen {
    background: url('button_icons/32/rearrange_account.png') ;
}
button.new {
    background: url('button_icons/32/folder-new.png') ;
}
button.newcontact {
    background: url('button_icons/32/contact-new.png') ;
}
button.newdocument {
    background: url('button_icons/32/text-document-new.png') ;
}
button.nutzer_super {
    background: url('button_icons/32/user_superman.png') ;
}
button.off {
    background: url('button_icons/32/lightbulb_off.png') ;
}
button.on {
    background: url('button_icons/32/lightbulb_on.png') ;
}
button.options {
    background: url('button_icons/32/preferences-system.png') ;
}
button.password {
    background: url('button_icons/32/keysicon.png') ;
}
button.pdf {
    background: url('button_icons/32/document-pdf.png') ;
}
button.posthorn {
    background: url('button_icons/32/posthorn.png') ;
}
button.print {
    background: url('button_icons/32/printer.png') ;
}
button.qrcode {
    background: url('button_icons/32/barcode_2d.png') ;   
}
button.refresh {
    background: url('button_icons/32/recycle.png') ;
}
button.rename {
    background: url('button_icons/32/textfield_rename.png') ;
}
button.reset {
    background: url('button_icons/32/edit-undo.png') ;
}
button.save {
    background: url('button_icons/32/saved_imports.png') ;
}
button.search {
    background: url('button_icons/32/system_search.png') ;
}
button.send {
    background: url('button_icons/32/mail-send.png') ;
}
button.sidebar {
    background: url('button_icons/32/layoutx_sidebar.png') ;
}
button.stammbaum {
    background: url('button_icons/32/tree.png') ;
}
button.text {
    background: url('button_icons/32/text-x-generic.png') ;
}
button.text_add {
    background: url('button_icons/32/toolbar_add.png') ;
}
button.text_edit {
    background: url('button_icons/32/toolbar_edit.png') ;
}
button.testament {
    background: url('button_icons/32/script_text.png') ;
}
button.up {
    background: url('button_icons/32/go-up.png') ;
}
button.upload {
    background: url('button_icons/32/upload_for_cloud.png') ;
}
button.umbuchung {
    background: url('button_icons/32/more_exports.png') ;
}
button.vertreter {
    background: url('button_icons/32/meeting_workspace.png') ;
}
button.word {
    background: url('button_icons/32/word.png') ;
}
button.zusatz {
    background: url('button_icons/32/star.png') ;
}

/**
 * Leiste am linken Rand im Stammbaum.
 */
.ExpandedBar {
    display:none; 
    padding:90px 8px 0px 20px;
    width:222px;
}
.ExpandedBar select {
	margin-top: 8px;
	width: 175px;
	padding: 4px 2px;
}
.ExpandedBar button {
	font-weight: normal !important;
	background-color: #f4f4d4;
    border-radius: 3px;
    padding:2px; 
    width:210px; 
    margin-bottom:5px;
}
.ExpandedBar fieldset {
    width: 188px;
    padding: 8px;
    border-color: #999;
    border-width: 1px;
    border-radius: 3px;
    margin-bottom: 10px;
}
.ExpandedBar fieldset button {
	display: inline-block;
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-position: center;
}
.ExpandedBar button.current {
    background-color: lightblue !important;
}
.ExpandedBar button:hover {
    background-color: #ffe066;
}
.CollapsedBar {
	display:none; 
	width: 50px;
	padding:90px 0px;
}
.CollapsedBar img {
    border-width:3px 9px;
    border-style: solid ;
    border-color: transparent ;
}
.CollapsedBar img[onClick]:hover {
	border-color: #ffe066 ;
    background-color: #ffe066 ;
}

/**
 * große Buttons im seitlichen Button-Bar und unterhalb von Listen etc. 
 * (muss nach den icons kommen).
 */
.ButtonBar button,
.DialogButtonBar button,
.Epilog button {
	display: block;
	font-weight: normal !important;
    width: 7em;
    margin-top: 0em;
    margin-bottom: 1em;
    margin-right: 0em;
	padding-top: 2.5em;
    background-color: #f4f4d4;
    background-repeat: no-repeat;
    background-position: center 0.2em;
    border-radius: 3px;
}
.ButtonBarHorizontal button {
    margin-bottom: 0em;
}
.ButtonBar button:hover {
    background-color: #ffe066;
}
.ButtonBar button:disabled {
    background-color: #eeeeee;
}

/* Platz für Buttons, die am rechten Rand eines Dialogs stehen */
.DialogButtonBar {
	float: right;
	width: 7em;
	padding-left:2em;
}

/* span oder div oder img, das anklickbar ist */
*[onClick]:hover,
span.click:hover {
    cursor: pointer;
}

/* images, die mit onClick wie buttons funktioneren */
img.button:hover {
    cursor: pointer;
}

/* spans, die mit onClick wie buttons funktioneren */
span[onClick],
span.click {
    color: #0000ee;
    text-decoration: underline;
}

/* Menüs auf einem Panel */
div.RDivMenu {
	min-height: 72px;
	border-bottom: 3px solid black;
	background-color: #f0f0f0;
	padding: 20px 20px 6px 20px;
	margin: 20px 20px 10px 0px;
	display: inline-block;
	line-height: 2.5;
}
div.RDivMenu > div:first-of-type {
	font-size:14pt;
	height:32px;
	padding-left:42px;
	margin-bottom:8px;
	background-repeat:no-repeat;
}
div.RDivMenu a,
div.RDivMenu button {
	border: 1px solid darkblue;
	border-radius: 3px;
	padding: 3px 8px;
	color: mediumblue;
	text-decoration: none;
	background-color: #f8f0e0;
	margin-right: 10px;
	font-size: 11pt;
}
div.RDivMenu a:visited {
	color: mediumblue;
}
div.RDivMenu a:hover,
div.RDivMenu button:hover {
	background-color: #ffe066;
	transition: background 0.25s;
}

.FallScreen div.RDivMenu {
	border-bottom-color: #77cc66;
}
.ForumScreen div.RDivMenu {
	border-bottom-color: #f8f800;
}
.VerwaltungScreen div.RDivMenu {
	border-bottom-color: mediumblue;
}

/*** Menü-Leiste ***/
.MenuBar, .SubMenuBar {
	z-index: 7;
	position: fixed;
	left: 0em;
	width: 100%;
	padding-left: 50px ;
}
.MenuBar {
	top: 0em;
	height: 2.5em;
    background: #f0f0f0;
}
.MenuBar .loginName,
.MenuBar .portalName {
	font-weight: bold;
	color: gray;
}
.SubMenuBar {
	top: 2.5em;
    background: #e0e0e0;
    border-top: 1px solid #a0a0a0;
    border-bottom: 1px solid #a0a0a0;
}
.MenuItem {
    float: left;
	margin: 0;
    padding: 0.4em 1em 0.4em 1em;
    border-right: 2px solid #d0d0d0;
    border-left: 2px solid #e0e0e0;
    border-bottom: 0.33em solid #e0e0e0;
    font-weight: bold;
    background: #d8d8d8;
    cursor: default;
    text-decoration: none;
    color: black;
}
.CurrItem {
    background: #bcbcbc;
}
.MenuItem:hover {
	cursor: pointer;
	background-color: #ffe066;
	transition: background 0.25s;
}
.DummyItem:hover {
	cursor: default;
	background-color: #d8d8d8;
}
.SubItem {
    font-size: small;
}
.newpostingcount {
	background-color: rgb(200,20,20);
	color: white;
	font-size: 0.75em;
	padding:0 4px 0 3px;
	vertical-align: top;
	border: solid red 2px;
    border-radius: 6px;
}
.itemcount {
	display: inline-block;
	line-height: 1.5;
	padding: 0 4px 0 3px;
	margin-top: -4px;
	background-color: rgb(200,20,20);
	color: white;
	font-size: 0.75em;
	vertical-align: top;
	border: solid red 2px;
    border-radius: 6px;
}

/* für Dropdown-Menüs */
.MenuGroup {
	float: left;
	position: relative;
	top: 0px;
	left: 0px;
}
.MenuDrop {
	display: none;
	border: 1px solid gray;
    padding-top: 1.8em;
	overflow: hidden;
}
.MenuGroup:hover .MenuDrop {
    display: block;
    position: absolute;
    top: 0em ;
    left: 0.25em ;
    z-index: -1;
}
.MenuDrop .MenuItem {
    width: 100%;
    padding-left: 1em;
    margin: 0px;
    border: 0px;
}

.RStrichMenu:hover {
	background-color: #f0f0f0;
}
.RStrichMenu a:hover {
	background-color: #ffe066;
}

/*** Die Content-Area unterhalb des Menüs ***/
.Content {
	position: absolute;
	left: 0em;
	top: 6em;
}

.Fallbild {
	width: 60px;
	height: 60px;
    object-fit: cover;
    align-self: flex-start;
    margin:5px 0px 5px 0px ;
}
.Fallbild_Div {
  	display: flex;
}
.Fallbild_Name {
    padding: 5px;
    margin-left:10px;
}

/* QuickInfo zum aktuellen Fall am rechten Rand */
.CurrentFallQI {
	border: 1px solid #444;
	margin-bottom: 2em;
}
.CurrentFallQI th {
	background: #77cc66;
}
.CurrentFallQI table tbody {
	max-height: 120px !important;
	display: block !important;
	resize: none !important;
}

/* Synthetisiertes Fallbild aus Initialen und farbigem Hintergrund */
.SynthFallbild:before {
	color: white;
	content: attr(initials);
	display: inline-block;
	font-size: 22px;
	vertical-align: middle;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
    margin:5px 0px 5px 0px ;
}
.SynthFallbild[male]:before {
	background: #099bdd;
}
.SynthFallbild[female]:before {
	background: pink;
}

/*** Die Hinweise am rechten Rand ***/
.QuickInfo {
	position: fixed;
	top: 6em;
	left: calc(100vw - 300px);
	width: 250px;
	opacity: 0;
}
.QuickInfo div {
	overflow: hidden;
}
.QuickInfo .qi {
	border: 1px solid #444;
	border-bottom: 2px solid #444;
	background-color: #f8f8f8;
	margin-bottom: 2em;
}
.QuickInfo table {
	width: 100%;
}
.QuickInfo table tbody {
	max-height: 0px;
	resize: vertical;
    overflow-y: auto;
	display: none;
}
.QuickInfo table tr:nth-of-type(even) {
	background: #ddd;
}
.QuickInfo table tr:nth-of-type(odd) {
	background: #eee;
}
.QuickInfo table tr:nth-of-type(1n+1):hover {
	background: #d8c8a0;
    transition: background 0.5s;
}
.QuickInfo table th {
	color: #333;
	text-align: center;
	font-size: medium;
	font-weight: normal;
	padding: 4px 10px;
	width: 16em;
}
/** display wird hier nochmal auf inherit gesetzt, da es von VerwaltungScreen, FallScreen etc. auf sticky gesetzt wurde */
.QuickInfo table th {
	position: inherit;
}
.QuickInfo table td {
	padding: 4px 10px;
	width: 16em;
}
.QuickInfo table.hint th {
	background: #f0a838;
}
.QuickInfo table.entwuerfe th {
	background: #f0a838;
}
.QuickInfo table.alert th {
	background: red ;
	color: white;
	font-weight: bold;
}
.QuickInfo table.korb th {
	background: #90b0f0 ;
}
.QuickInfo table.recent th {
	background: #77cc66;
}
.QuickInfo table.recent tbody tr {
	font-size: large;
}
.QuickInfo table.notification th {
	background: #e0f150;
}
.QuickInfo table.history th {
	background: #dcdcdc;
}
.QuickInfo .expand-img {
	background-image: url("button_icons/16/Plus_black.png");
	background-repeat: no-repeat;
}
.QuickInfo .expand-img.expand {
	background-image: url("button_icons/16/Minus_black.png");
	background-repeat: no-repeat;
}

/* Box mit runden Ecken und Schatten */
.RundMitSchatten {
	border-radius: 5px;
	box-shadow: 5px 5px 5px #666666;		/* x, y, weichzeichnung, farbe */
}

/* der Login-Kasten */
.login {
	position:absolute;
	top:1.5em;
	right:15em;
	border:2px solid #44aa44;
}
.login .caption {
	background-color:#227722;
	color:#eeeeee;
	padding:0.5em;
	font-weight:bold;
}
.login form {
	padding:0.75em;
	background:#cccccc;
}

/* der Anmelden-Kasten */
.anmelden {
	position:absolute;
	top:1.5em;
	right:35em;
	border:2px solid #227722;
}
.anmelden form {
	padding:0.75em;
	background:#ffffff;
	font-weight:bold;
	color:#227722;
}
.anmelden button {
	color:#227722;
	background:#cccccc;
	padding:8px;
	border-radius:5px;
	font-weight:bold;
}

/* der Logout-Kasten wenn man zufällig an einem FreeScreen angemeldet ist */
.FreeScreen .logout {
	position:absolute;
	top:1.5em;
	right:15em;
	border:2px solid #005500;
}
.FreeScreen .logout form {
	padding:0.75em;
	background:#eeeeee;
	color:#227722;
}
.FreeScreen .logout button {
	color:#eeeeee;
	background:darkred;
	padding:6px;
	border-radius:5px;
	font-weight:bold;
}

/* Die Einstiegs- und Reklameseiten */
.FreeScreen {
	padding-bottom: 2em;
}
.FreeScreen h1 {
    color: #333333;
	font-size: 14pt;
}
.FreeScreen .bauchbinde {
	border-bottom:1px solid #303030;
	font-size:30pt; font-weight:bold;
	padding-top:0.75em;
	margin-top:2.5em;
	height:2em;
	width:100%;
	background:#f2f2f2;
}
.FreeScreen .bauchbinde span.portalName {
	color:gray;
	padding-left:4em;
}
.FreeScreen img.klammer {
    z-index: -1;
    position:absolute;
}
.FreeScreen em {
    font-weight: bold;
    font-family: Cambria;
    font-size: 110%;
}
.EntryScreen img.klammer, .HighlightsScreen img.klammer, .ImpressumScreen img.klammer{
	top:10em;              /* Klammer hochkant */
	left:2em;
	width:20em;
}
.LoginScreen img.klammer, .LogoutScreen img.klammer, .ExitScreen img.klammer, .Error404Screen img.klammer{
    top:20em;               /* Klammer quer */
    left:-3em;
    width:24em;
}
.InfoScreen img.klammer {
    top:14.5em;
    left:0em;
    width:12em;
}
.InfoScreen .info {
	padding-left: 20em;
	width: 40em;
}
.HighlightsScreen .head {
    padding-top: 2em ;
    padding-left: 2em;
}
.HighlightsScreen .item {
    padding: 0.5em 2em 0.5em 4em;
}
.HighlightsScreen ul, .HighlightsScreen li {
    padding: 0;
    margin: 0;
}
.HighlightsScreen .item .hilite  {
	position: absolute;
	top: 20em;
	left: 2em;
	width: 36em;
    height: 30em;
	padding: 1em;
	z-index: 9;
    display: none;
    font-size:small;
    background: #eeeeee;
}
.HighlightsScreen .item .init {
	z-index: 8;
    display: block ;
}
.HighlightsScreen .item .hilite img {
    height: 24em;
    width: 36em ;
    position: relative;
    top:0;
    left:0;
    box-shadow: 5px 5px 5px #666666;
}
.HighlightsScreen .item:hover {
    background: #eeeeee;
}
.HighlightsScreen .item:hover .hilite {
    display: block;
}
.KonditionenScreen {
    color: #202020;
}
.KonditionenScreen .change {
    border-right: 0.15em solid #227722;
    padding-right: 1em;
}
.KonditionenScreen h2 {
	font-size: 10pt;
	border-bottom: solid #227722 1px;
}

.FileScreen {
	background: #cccccc;
}

/* die Web-Visitenkarte sowohl für Vorschau als auch in echt */
table.card {
	margin-left: 10em;
	margin-top: 2em;
}
.card {
	padding-left: 10em;
	padding-top: 2em;
}
.card p {
	margin: 0px;
}
.card img.foto {
    width: 120px;
    background: #f2f2f2;
    padding: 12px;
    border-bottom: 1px solid #303030;
    border-right: 1px solid #303030;
    margin-right: 25px;
    margin-top: 0px;
}
.card td:nth-child(2) {
	width: 480px;
}
.card iframe {
	margin-top: 20px;
    margin-bottom: 20px;
	border: none;
    width: 480px;
    height: 300px;
    display: block;
}

/* Farben nach Themen */
.WiedervorlageScreenItem {border-bottom-color: #ff9900;}
.WiedervorlageScreen .Prolog {border-color: #f0a838;}
.WiedervorlageScreen .RList tr.head {background: #f0a838;}
.WiedervorlageScreen .RList th {background-color: #f0a838;}
.WiedervorlageScreen .RList table {border-color: #f0a838;}
.WiedervorlageScreen .Epilog {border-color: #f0a838;}

.FallScreenItem {border-bottom-color: #00e000;}
.FallScreen .Prolog {border-color: #77cc66;}
.FallScreen .RList tr.head, .FallScreen .RForm tr.head, .FallScreen .RPanel .head {background: #77cc66;}
.FallScreen .RList th {background-color: #77cc66;}
.FallScreen .RList table, .FallScreen .RForm table, .FallScreen .RPanel, .FallScreen .Epilog {border-color: #77cc66;}
.FallScreen .RPanel .PanelSpace {border-bottom-color: #77cc66;}
.FallScreen .RPanel .head {border-color: #77cc66;}

.ForumScreenItem {border-bottom-color: rgb(248,248,0);}
.ForumScreen .Prolog, .ForumScreen .Epilog {border-color: rgb(240,240,120);}
.ForumScreen .RList tr.head {background: rgb(240,240,120);}
.ForumScreen .RList th {background: rgb(240,240,120);}

.VerwaltungScreenItem {border-bottom-color: #0000e0;}
.VerwaltungScreen .Prolog, .VerwaltungScreen .Epilog {border-color: #90b0f0;}
.VerwaltungScreen .RList tr.head, .VerwaltungScreen .RForm tr.head, .VerwaltungScreen .RPanel .head {background: #90b0f0;}
.VerwaltungScreen .RList th {background-color: #90b0f0;}
.VerwaltungScreen .RList table, .VerwaltungScreen .RForm table, .VerwaltungScreen .RPanel, .VerwaltungScreen .Epilog {border-color: #90b0f0;}
.VerwaltungScreen .RPanel .PanelSpace {border-bottom-color: #90b0f0;}
.VerwaltungScreen .RPanel .head {border-color: #90b0f0;}

.LogoutScreenItem {border-bottom-color: crimson;}

.AdminScreen .Prolog {border-color: #777;}
.AdminScreen .RList tr.head th, .AdminScreen .RForm tr.head, .AdminScreen .RPanel .head {background-color:#777; border-color:#777; color:white;}
.AdminScreen .Epilog {border-color: #777;}


/*** Panels auf dem VerwaltungScreen ***/
.VerwaltungScreen .PanelSpace .content {
	background-color: #f0f0f0;
	padding: 0.5em 1em;
}
/* aber nicht auf allen Panels */
.VerwaltungScreen .StatistikPanel .PanelSpace .content,
.VerwaltungScreen .MenuPanel .PanelSpace .content,
.VerwaltungScreen .PreviewPanel .PanelSpace .content {
	background-color: inherit ;
	padding: inherit;
}

/*** Boxen im VerwaltungScreen ***/
.VerwaltungScreen .RPanel fieldset {
	margin:5mm 0mm;
	border: #339 solid 1px;
}
.VerwaltungScreen .RPanel fieldset legend {
	background: #ffa;
	padding:3px 6px;
}

/*** Hinweis auf bösen Fehler ***/
.systemError:before {
	content: 'Systemfehler:';
	display: block;
}
.systemError {
	color: #f33;
	padding: 16px;
	background: silver;
	border: 3px solid black;
	border-radius: 9px;
}

/*** Sprechblase mit Hinweis auf fehlendes Feature ***/
.MissingFeature {
	border: 4px solid crimson;
	color: #555;
	font-weight: bold;
	padding: 1em;
	border-radius: 7px;
	width: 40em;
	position: relative;
}
.MissingFeature:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	top: 100%;
	border: 20px solid;
	border-color: crimson transparent transparent crimson;
}
.MissingFeature:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 34px;
	top: 100%;
	border: 15px solid;
	border-color: #ffffff transparent transparent #ffffff;
}

/*** Listen mit Sticky-Headers ***/
@media screen {
	.AdminScreen .ListSpace,
	.VerwaltungScreen .ListSpace,
	.WiedervorlageScreen .ListSpace,
	.ForumScreen .ListSpace,
	.FallScreen .ListSpace {
		max-height: 72vh;		/* damit Wiederherstellen der Scroll-Pos. funktioniert */
		overflow-y: scroll;
	}
	.AdminScreen th,
	.VerwaltungScreen th,
	.WiedervorlageScreen th,
	.ForumScreen th,
	.FallScreen th {
		position: sticky;
		top: 0;
		z-index: 5;
	}
}

/*** Aufteilung der Breite innerhalb des Content ***/
.Content {
	width: calc(100vw - 250px - 100px) ;
	padding-left: 50px;
}
.AdminScreen .Content {
	width: calc(100vw - 100px) ;
	padding-left: 50px;
}
.ButtonBar {
	width: 11em;
    min-width: 11em;
	float: right;
    padding-left: 2em;
    padding-right: 5em;
}
.ButtonBar fieldset {
    margin-bottom: 1em;
    min-width: 10em;
}
.RForm .Prolog,
.RForm .Epilog,
.RForm table,
.RPanel .PanelSpace,
.RList .TotalSpace {
	width: calc(100% - 18em);
}

/*** kleine Bildschirme ***/
@media(max-width:1500px) {
	.ButtonBar {
		padding-left: 1em;
		padding-right: 2em;
	}
	.RForm .Prolog,
	.RForm .Epilog,
	.RForm table,
	.RPanel .PanelSpace,
	.RList .TotalSpace {
		width: calc(100% - 14em);
	}
}

/*** ganz kleine Bildschirme ***/
@media(max-width:1200px) {
	.MenuBar, .SubMenuBar, .Content {
		padding-left:0px;
	}
	.Content {
		width: 100%;
	}
	.ButtonBar {
		padding-left: 1em;
		padding-right: 0em;
	}
	.ButtonBar fieldset {
		min-width: 7em;
    	max-width: 8em;
	}
	.RForm .Prolog,
	.RForm .Epilog,
	.RForm table,
	.RPanel .PanelSpace,
	.RList .TotalSpace {
		width: calc(100% - 12em);
	}
	.QuickInfo {
		display: none;
	}
}

/*** Ausgabe auf Drucker ***/
@media print {
	@page {
		margin-left: 20mm ;
	}
	a {
		text-decoration: none;
	}
	button,
	.MenuBar, .SubMenuBar, .ButtonBar, .QuickInfo,
	.noprint {
		display: none;
	}
	.RList .Prolog,
	.RList .Epilog {
		border: none;
	}
}