:root {
	/* Farbe für Headerschrift Depot-Investzeile */
	--color-header: #FFFF00;
	/* Farben für Hintergrund Depot-Investzeilen */
	--bg-geld: #FFFF00;
	--bg-aktie: #F2DCDB;
	--bg-fonds: #EBF1DE;
	--bg-immo: #DBEEF4;
	--bg-alt: #EDEDED;
	--bg-renten: #C6D9F1;
	--bg-zert: #CCC1DA;
	--bg-crypto: #dffaf9;
	/* Farben für Hintergrund Orderzeilen */
	--bg-activated: #80c1ff;
	--bg-inactive: #e6f3ff;
	--bg-executed: #98e798;
	--bg-expired: #fce8e8;
	--fg-canceled: #999999;
	/* Farben für Hintergrung Kursdaten (Farbton jeweils 92% )*/
	--bg-hellgruen: #ddffdd;
	--bg-hellrot: #ffdddd;
	--bg-hellgrau: #dddddd;
}

/* Kleiner kompatible Fontsklassen, die es nicht in Bootstrap gibt */

.fs-7 {
font-size: 0.75rem; /* entspricht ~12px */
}

.fs-8 {
font-size: 0.65rem; /* noch kleiner */
}


/* Breiteres Modal-Dialog-Layout */
.modal-dialog-wide {
    max-width: 70vw !important;
    width: 70vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Semantisch extra-breit */
.modal-dialog-xwide {
    max-width: 85vw !important;
    width: 85vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* leicht höher zentriertes Modal (z. B. 66%) */
.modal-dialog-center-high {
    align-items: flex-start !important;
    padding-top: 20vh !important;   /* 20% Abstand von oben, damit der Dialog höher sitzt */
}

/* Hintergrundfarbe Depotzeile  */
tr.geld{
	background-color: var(--bg-geld); 
}
tr.aktie{
	background-color: var(--bg-aktie); 
}
tr.fonds {
	background-color: var(--bg-fonds); 
}
tr.immo {
	background-color: var(--bg-immo); 
}
tr.alt {
	background-color: var(--bg-alt); 
}
tr.renten {
	background-color: var(--bg-renten); 
}
tr.zert {
	background-color: var(--bg-zert); 
}
tr.crypto {
	background-color: var(--bg-crypto); 
}
/* Formatierung der Tooltips */
/* https://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color */
.tooltip-inner {
	background-color: var(--bs-warning) !important;
	border: 1px solid #000;
	color: #000 ;
}
.tooltip.show {
	opacity: 1;
}

/* Kein Zeilenumbruch */
.unbreakable { white-space:nowrap; }

/* Formatierung Hover */
button:hover, label:hover, a:hover {
	background-color: var(--bs-warning) !important;
	color: var(--bs-dark) !important;
	/* opacity: 0.5; */
	font-weight: 500;
}

/* ############################################## */
/* Sortierungspfeile für Tabelle */
a.asc_desc:link {
	text-decoration: none;
	background-color: LightGrey;
	color: DarkSlateGray;
}
a.asc_desc:visited {
	text-decoration: none;
	color: DarkSlateGray;
}
a.asc_desc:hover {
	background-color: var(--bs-warning);
	text-decoration: none;
}
a.asc_desc:active {
	text-decoration: none;
}
a.asc_desc:after {
	/* Einfacher Pfeil auf/ab */
	content: '\2195';
	/* Einfacher, dicker Pfeil auf/ab 
	content: '\2B0D';*/
	/* Doppelter Pfeil
	content: '\21D5'; */
	/* Zwei Pfeile nebeneinander 
	content: '\21C5';*/

	/* content: '\25B2\25BC'; Dreiecke up/down*/
}

/* NEU: Sortierungspfeile für Tabelle */
a.asc_desc2:link {
	text-decoration: none;
	background-color: LightGrey;
	color: DarkSlateGray;
}
a.asc_desc2:visited {
	text-decoration: none;
	color: DarkSlateGray;
}
a.asc_desc2:hover {
	background-color: var(--bs-warning);
	text-decoration: none;
}
a.asc_desc2:active {
	text-decoration: none;
}

/* ############################################## */


/* div Form/Eingabebereich formatieren */
div.form {
	background-color: var(--bs-warning-bg-subtle); 
	max-width: 600px
}

/* div Textblock formatieren */
div.textblock {
	background-color: var(--bs-warning-bg-subtle); 
	max-width: 600px
}

/* Formatierungen für Gewinn/Verlust-Zahlen  */
.gv_red {
	color: red;
	font-weight: 600;
}
.gv_green {
	color: green;
	font-weight: 600;
}
.gv_grey {
	color: grey;
	font-weight: 600;
}
/* Formatierungen für Hintergrund rot/grün/grau, grau nicht zu dunkel  */
.bg_red {
	background-color: #ffaaaa;
	font-weight: 600;
}
.bg_green {
	background-color: #aaffaa;
	font-weight: 600;
}
.bg_grey {
	background-color: #dddddd;
	font-weight: 600;
}
/* Hellere Formatierungen für Hintergrund rot/grün/grau, grau nicht zu dunkel  */
.bg_red_light {
	background-color: #ffdddd;
	font-weight: 600;
}
.bg_green_light {
	background-color: #ddffdd;
	font-weight: 600;
}
.bg_grey_light {
	background-color: #eeeeee;
	font-weight: 600;
}

/* Formatierung für randlose Tabellen  */
.table-borderless td,
.table-borderless th {
    border: 1px solid #fff !important
}

/* Formatierung für fast randlose Tabellen  */
.table-nearly-borderless td,
.table-nearly-borderless th {
    border: 1px solid #ddd !important
}

/* Formatierung für Superschmale button  */
.btn-supersmall {
	--bs-btn-padding-y: 0.0;
	--bs-btn-padding-x: 0.0;
	--bs-btn-font-size: 0.875rem;
	--bs-btn-border-radius: var(--bs-border-radius-sm);
}



/* Formatierung für Hilfstexte  */
#blockcontent .helptext {
	font-size: 0.8rem;
	color: grey;
}

/* Formatierung für Fehlermeldungen  */
.errorlist {
	color: red;
}
/* Autotrader ausgeschaltet */
.trader_off {
	/* background-color: #deeeee; */
	color: #aaaaaa;
}

/* 
--------------------------------------------------------
tinyMCE  tinyMCE tinyMCE tinyMCE tinyMCE tinyMCE tinyMCE
-------------------------------------------------------- 
*/

#tinymce p {
    font-size: 1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

#tinymce h1 {
    font-size: 1.6rem;
    margin-top: 1.35rem;
    margin-bottom: 0.9rem;
    /* display: inline; */
    background-color: hsl(45 100% 85%);
}

#tinymce h2 {
    font-size: 1.4rem;
    margin-top: 0.9rem;
    margin-bottom: 0.6rem;
    /* display: inline; */
    background-color: hsl(45 100% 90%);
}

#tinymce h3 {
    font-size: 1.2rem;
    margin-top: 0.6rem;
    margin-bottom: 0.4rem;
    /* display: inline; */
    background-color: hsl(45 100% 93%);
}

/* Stil von Tabellen: dünner, grauer Rahmen */
#tinymce thead, tbody, tfoot, tr, td, th {
    border-color: rgb(64, 64, 64);
    border-style: solid;
    border-width: 1px;
}

/* Stil von allgemeinen Links 

#content-wrapper a:link {
    text-decoration: none;
    color: rgb(0, 0, 255);
}
#content-wrapper a:visited {
    color: rgb(0, 0, 255);
}
#content-wrapper a:hover {
    ??? color: var(--bs-primary);
    ??? background: var(--bs-warning);
    text-decoration: underline;
}

*/

/* Hintergrundfarbe für die Eingabe bei Infopage */
#id_name_short {
	background-color: var(--bs-warning-bg-subtle); ;
}
#id_name {
	background-color: var(--bs-warning-bg-subtle); ;
}
#id_einstand {
	background-color: var(--bs-warning-bg-subtle); ;
}
#id_titel {
	background-color: var(--bs-warning-bg-subtle); ;
}

/* ANIMATIONEN FÜR BUTTONs */

/* Farbblitz-Animation (Kurzzeitige Farbänderung) 
Hier ändert der Button kurz seine Farbe, um das Klicken zu signalisieren.
*/
.btn-flash:active {
	background-color: #ffcc00 !important;
	transition: background-color 0.2s ease-in-out;
  }

/* Schrumpf-Animation (Kurzzeitiges Verkleinern)
Hier verkleinert sich der Button beim Klick leicht und kehrt dann zurück. 
*/
.btn-shrink:active {
	transform: scale(0.9);
	transition: transform 0.1s ease-in-out;
  }
  .btn-shrink {
	transition: transform 0.2s ease-out;
  }


/* ######################################################################## */
/* https://github.com/dallaslu/bootstrap-5-multi-level-dropdown/tree/master */
.dropdown-hover-all .dropdown-menu, .dropdown-hover > .dropdown-menu.dropend { margin-left:-1px !important }