/* ************************************************************************** */
/* CSS file for Musterdepot and Markets                                       */
/* Last change: 2024-09-18 12:00                                              */
/* ************************************************************************** */

/* Font embedding ----------------------------------------------------------- */
/* The fonts have to reside on the same server as the pages! */
@font-face {
   font-family: 'SparkasseWeb';
   src:  url(../fonts/Sparkasse_web_Rg.woff) format('woff'),
         url(../fonts/Sparkasse_web_Rg.ttf) format('truetype');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'SparkasseWeb';
   src:  url(../fonts/Sparkasse_web_Bd.woff) format('woff'),
         url(../fonts/Sparkasse_web_Bd.ttf) format('truetype');
   font-weight:bold;
   font-style:normal;
}

/* Variables for colors and other stuff ------------------------------------- */
/* Style ONLY applied in light mode */
:root {
   --textRegular: 14px; /* Text size regular */
   --textLarge: 16px; /* Text size large */
   --textSmall: 12px; /* Text size small */
   --textXLarge: 24px; /* Text size extra large, used for quote detail */
   --lineHeightReg: 18px; /* Line height regular) */
   --colTextReg: #333; /* Color of regular text */
   --colTextLgt: #565656; /* Color of light text */
   --colTextPos: #60962D; /* Color of positive amounts */
   --colTextNeg: #E00; /* Color of negative amounts */
   --colPlaceholder: #949494; /* Color of placeholder for input fields */
   --colBgPage: #FFF; /* Background color of page */
   --colBgCardHead: #F5F5F5; /* Background color of card head */
   --colBgCardBody: #FFF; /* Background color of card body */
   --colBgPfa: #FFF;  /* Background color for Portfolioanalyse */
   --colBorder: #E3E3E3; /* Color of (card) borders */
   --colBorder2: #E3E3E3; /* Secondary color of borders */
   --colShadow: rgba(0, 0, 0, 0.1); /* Shadow for Cards */
   --colInputBg: #FFF; /* Background color of input fields */
   --colInputBorder: #949494; /* Border color of input fields */
   --colInputText: var(--colTextReg); /* Border color of input fields */
   --colInputLabel: var(--colTextLgt); /* Border color of input fields */
   --colDisabledBg: var(--colBgCardHead); /* Background color of disabled input fields */
   --colBtRoundBackgound: var(--colBgCardHead); /* Background color of round action buttons */
   --colBtRoundBorder: #DBDBDB; /* Border color of round action buttons */
   --colBtRoundText: var(--colTextLgt); /* Text color of round action buttons */
   --colBtPrimBackground: #F00; /* Background color of primary buttons (OLD) */
   --colBtPrimBorder: #F00; /* Border color of primary buttons (OLD) */
   --colBtPrimStdBackground: #E00; /* Background color of primary buttons */
   --colBtPrimStdBorder: #E00; /* Border color of primary buttons */
   --colBtPrimStdText: #FFF; /* Text color of primary buttons */
   --colBtPrimHovBackground: #D40000; /* Background color of primary buttons (hover) */
   --colBtPrimHovBorder: #D40000; /* Border color of primary buttons (hover) */
   --colBtPrimHovText: #FFF; /* Text color of primary buttons (hover) */
   --colBtSecStdBackground: transparent; /* Background color of secondary buttons standard */
   --colBtSecStdBorder: #565656; /* Border color of secondary buttons standard */
   --colBtSecStdText: var(--colBtSecStdBorder); /* Text color of secondary buttons standard */
   --colBtSecHovBackground: #565656; /* Background color of secondary buttons active */
   --colBtSecHovBorder: #565656; /*Border color of secondary buttons active */
   --colBtSecHovText: #E3E3E3; /* Text color of secondary buttons active */
   --colBtSecDisBackground: transparent; /* Background color of secondary buttons disabled */
   --colBtSecDisBorder: #BEBEBE; /* Border color of secondary buttons disabled */
   --colBtSecDisText: var(--colBtSecDisBorder); /* Text color of secondary buttons disabled */
   --colBgAreaIcon: #FFF; /* Background color of icon in tile header */
   --colBgChart: #FFF; /* Background color of charts */
}
/* Style ONLY applied in dark mode */
@media (prefers-color-scheme: dark) {
   :root {
      --colTextReg: #E3E3E3; /* Color of regular text */
      --colTextLgt: #CCC; /* Color of light text */
      --colTextPos: #ADC992; /* Color of positive amounts */
      --colTextNeg: #EDB2B2; /* Color of negative amounts */
      --colPlaceholder: #FFF; /* Color of placeholder for input fields */
      --colBgPage: #292929; /* Background color of page */
      --colBgCardHead: #565656; /* Background color of card head */
      --colBgCardBody: #444; /* Background color of card body */
      --colBgPfa: var(--colBgCardHead); /* Background color for Portfolioanalyse */
      --colBorder: #222; /* Background color of (card) border */
      --colBorder2: #444; /* Secondary color of borders */
      --colShadow: var(--colBgPage); /* Shadow for Cards */
      --colInputBg: #444; /* Background color of input fields */
      --colInputBorder: #949494; /* Border color of input fields */
      --colInputText: var(--colTextReg); /* Border color of input fields */
      --colInputLabel: var(--colTextLgt); /* Border color of input fields */
      --colDisabledBg: var(--colBgCardHead); /* Background color of disabled input fields */
      --colBtRoundBackgound: var(--colBgCardHead); /* Background color of round action buttons */
      --colBtRoundBorder: var(--colBgPage); /* Border color of round action buttons */
      --colBtRoundText: #DBDBDB; /* Text color of round action buttons */
      --colBtPrimStdBackground: #E00; /* Background color of primary buttons */
      --colBtPrimStdBorder: #E00; /* Border color of primary buttons */
      --colBtPrimStdText: #FFF; /* Text color of primary buttons */
      --colBtPrimHovBackground: #D40000; /* Background color of primary buttons (hover) */
      --colBtPrimHovBorder: #D40000; /* Border color of primary buttons (hover) */
      --colBtPrimHovText: #FFF; /* Text color of primary buttons (hover) */
      --colBtSecStdBackground: transparent; /* Background color of secondary buttons standard */
      --colBtSecStdBorder: #E3E3E3; /* Border color of secondary buttons standard */
      --colBtSecStdText: var(--colBtSecStdBorder); /* Text color of secondary buttons standard */
      --colBtSecHovBackground: #E3E3E3; /* Background color of secondary buttons active */
      --colBtSecHovBorder: var(--colBtSecHovBackground); /*Border color of secondary buttons active */
      --colBtSecHovText: #444; /* Text color of secondary buttons active */
      --colBtSecDisBackground: transparent; /* Background color of secondary buttons disabled */
      --colBtSecDisBorder: #949494; /* Border color of secondary buttons disabled */
      --colBtSecDisText: var(--colBtSecDisBorder); /* Text color of secondary buttons disabled */
      --colBgAreaIcon: #444; /* Background color of icon in tile header */
      --colBgChart: #444; /* Background color of charts */
   }
}

/* General declarations ----------------------------------------------------- */
html {
   font-family: SparkasseWeb,Arial,Helvetica,sans-serif;
   font-size: var(--textRegular);
   line-height: var(--lineHeightReg);
   color: var(--colTextReg);
}
body {
   background-color: var(--colBgPage);
   margin: 0px;
   padding: 0px 10px 20px 10px;
}
.nospace {
   margin: 0px;
   padding: 0px;
}
.nospace > div:last-of-type {
   margin: 0px 15px;
}
.bearbeiten {
   background-color: var(--colBgCardHead);
}
.clearfix::after {
   content: "";
   clear: both;
   display: block;
}
.textSmall {
   font-size: var(--textSmall);
}
.invisible {
   display: none !important;
}

/* Upper area of list pages ------------------------------------------------- */
.bestand, .navigation {
   margin: -10px -10px 0px -10px;
   background-color: var(--colBgPage);
}
.bestand {
   border-bottom: 1px solid var(--colBorder2);
   padding: 5px 26px 15px 26px;
}
.navigation {
   padding: 25px 15px 15px 15px;
   display: flex;
   justify-content: space-between;
}

/* Headlines ---------------------------------------------------------------- */
h1 {
   color: var(--colTextReg);
   padding: 10px 0px 10px 0px;
   font-size: 20px;
}
h2 {
   padding: 10px 0px 0px 15px;
   font-size: 16px;
}
.kachelBereichUnten > h2 {
   padding: 0px;
   margin: 5px 0px 15px 0px;
}
.disclaimerHeadline {
   padding-left: 0px;
}

/* Hints and error elements ------------------------------------------------- */
.hinweis {
   margin: 0px -10px 15px -10px;
   padding: 20px;
   background-color: var(--colBgCardHead);
   color: var(--colTextLgt);
   text-align: center;
}
.hinweisGross {
   font-size: 16px;
}
.hinweisKlein{
   font-size: 12px;
}
/* Image for create Musterdepot and delete Musterdepot pages */
.imgMdAnlegen { 
   width: 75%;
   max-width: 500px;
}
.schliessen {
   width: 90%;
   padding: 18px 0px 24px 0px;
   font-size: 20px;
   font-weight: bold;
   float: left;
}
.disclaimer {
   color: var(--colTextLgt);
   font-size: 11px;
   line-height: normal;
   text-align: center;
}
.disclaimer > a, .bearbeiten > p > a {
   text-decoration: none;
   color: var(--colTextReg);
}
.border {
   border-top: 1px solid var(--colBorder);
   padding-top: 20px;
   margin-top: 30px;
}

/* Tile for list elements and areas ----------------------------------------- */
.kachel { /* Used in older design, to be deleted with NBF */
   background-color: var(--colBgCardHead);
   border: 1px solid var(--colBorder);
   border-radius: 10px;
   margin-bottom: 15px;
   padding: 15px;
   /* box-shadow: 0 4px 8px 0 var(--colShadow), 0 6px 20px 0 var(--colShadow); */
   box-shadow: 0 2px 8px 0 var(--colShadow), 0 2px 3px 0 var(--colShadow);
}
.kachelBereich, .kachelPosition {
   border: 1px solid var(--colBorder);
   background-color: var(--colBgCardBody);
   border-radius: 10px;
   margin-bottom: 15px;
   /* box-shadow: 0 4px 8px 0 var(--colShadow), 0 6px 20px 0 var(--colShadow); */
   box-shadow: 0 2px 8px 0 var(--colShadow), 0 2px 3px 0 var(--colShadow);
}
.kachelBereich {
   padding-bottom: 5px;
}
.kachelBereichOben, .kachelBereichUnten, .kachelPositionOben, .kachelPositionUnten {
   padding: 10px 16px;
   border: 1px solid var(--colBorder);
   border-bottom-width: 0px;
}
.kachelBereichObenMarkets {
   padding: 10px;
   border: 1px solid var(--colBorder);
}
.kachelBereichOben, .kachelPositionOben, .kachelBereichObenMarkets {
   border-radius: 8px 8px 0px 0px;
   border-color: var(--colBorder);
   background-color: var(--colBgCardHead);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
   flex: none;
   order: 0;
   align-self: stretch;
   flex-grow: 0;
}
.kachelBereichOben div:first-of-type, .kachelBereichObenMarkets div:first-of-type {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0px;
   gap: 8px;
   flex: none;
   order: 0;
   flex-grow: 0;
   max-width: 100%;
}
.kachelPositionOben {
   /* box-sizing: border-box; */
   align-items: flex-start;
}
.kachelPfa {
   margin-top: 30px;
   background-color: var(--colBgPfa);
}
.kachelUeberschrift, .kachelBezeichnung {
   font-weight: bold;
   font-size: 16px;
   display: flex;
   flex-direction: row;
   flex: none;
   order: 10;
   align-self: stretch;
   flex-grow: 1;
   align-items: center;
}
.kachelBereichUnten, .kachelPositionUnten {
   border-top: 0px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   border-color: var(--colBorder);
   background-color: var(--colBgCardBody);
}
/* ??????
border-radius: 0px 0px 8px 8px;
zu .kachelPositionUnten (312) hinzufügen
 */
/* Area icons --------------------------------------------------------------- */

.kachelBereichIcon::before {
   background-image: url(../images/pictos-if-gray.png);
   background-size: 500px auto;
   background-repeat: no-repeat;
   content: " ";
   display: inline-block;
   width: 31px;
   height: 31px;
   border-radius: 50%;
   text-align: center;
   background-color: var(--colBgAreaIcon);
}
.iconChart::before {
   background-position: -469px -94px;
}
.iconCurrencies::before {
   background-position: -344px -687px;
}
.iconCommodities::before {
   background-position: -375px -656px;
}
.iconInterests::before {
   background-position: -125px -564px;
}
.iconNews::before {
   background-position: 0px -156px;
}
.iconDetails::before {
   background-position: -375px -249px;
}
.iconGermany::before {
   background-size: 600px auto;
   background-position: -527px -153px;
}
.iconEurope::before {
   background-size: 560px auto;
   background-position: -527px -142px;
}
.iconInternational::before {
   background-position: -0px -313px;
}
.iconEnergy::before {
   background-position: -188px -626px;
}
.iconNature::before {
   background-position: -281px -688px;
}
.iconSheet::before {
   background-position: -156px -438px;
}
.iconList::before {
   background-position: -63px -250px;
}

#chartData, .chartData {
   width: 100%;
}
.ChartKurs {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
   margin-bottom: 10px;
}
.ChartKursGross {
   font-size: xx-large;
   font-weight: 600;
}
.ChartVeraenderung {
   text-align: right;
   margin-top: -10px;
}
.chartKursOben, .chartKursUnten {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
.chartKursOben {
   margin-top: 5px;
}
.chartKursOben > div:first-of-type {
   font-size: var(--textXLarge);
   white-space: nowrap;
}
.chartKursOben > div:last-of-type {
   text-align: right;
   white-space: nowrap;
}
.chartKursUnten {
   font-size: var(--textSmall);
   color: var(--colTextLgt);
   margin-bottom: 5px;
}
.kachelListe {
   padding-bottom: 12px;
   margin-bottom: 12px;
   border-bottom: 1px solid var(--colBorder);
}
.kachelListe:last-of-type {
   padding-bottom: 0px;
   margin-bottom: 0px;
   border-bottom: 0px solid var(--colBorder);
}
.kachelListe span {
   font-size: 12px;
   color: var(--colTextLgt);
}
.kachelListe span:last-of-type {
   display: inline-block;
   margin-top: 3px;
   font-size: 16px;
   color: var(--colTextReg);
}

.kachelBereichUnten table {
   margin: 8px 0px 18px 0px;
}
.kachelBereichUnten table tr td:last-of-type span {
   text-align: right;
}
.kachelDetailNbf {
   width: 100%;
   padding: 0px;
   color: var(--colTextReg);
   margin: 0px !important;
}
.kachelDetailNbf tr td:last-of-type {
   text-align: right;
}
.kachelDetailNbf tr td {
   padding-top: 5px;
}
.kachelDetailNbf tr:first-of-type td {
   padding-top: 0px;
}
.obenLinks {
   float: left;
   width: 90%;
}
.obenRechts {
   width: 9%;
   float: right;
   text-align: right;
   margin-bottom: 0px;
}
.pageTitle { /* Used on modal pages */
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   align-items: center;
   margin: 0px -10px 10px -10px;
   padding: 12px 16px;
   height: 48px;
   background: var(--colBgPage);

}
.pageTitle div:first-of-type {  /* Text of page title */
   color: var(--colTextReg);
   font-size: 18px;
   line-height: 20px;
   flex: none;
   order: 0;
   flex-grow: 1;
}
form p.bezeichnungLang {
   padding: 15px 0px 0px 16px;
}
form p.isin {
   padding-left: 16px;
}
.bezeichnungLang, .bezeichnung {
   margin: 0px;
   font-size: 16px;
   font-weight: bold;
}
.kachelPositionOben .bezeichnungLang {
   padding-left: 4px;
   width: calc(100% - 40px);
}
.divider {
   border-top: 1px solid var(--colBorder2);
   padding-bottom: 16px;
}
.isin {
   margin-top: 5px;
   font-size: 12px;
   color: var(--colTextLgt);
   white-space: nowrap;
}
.isin > span {
   margin-left: 20px;
}
.kachelBereichOben .isin, .kachelPositionOben .isin {
   margin-bottom: 0px !important;
}
.oben {
   height: 28px;
}
.kachelDetail, .kachelDetailOben, .formBearbeiten {
   border-top: 1px solid var(--colBorder);
   border-collapse: collapse;
   width: 100%;
}
.kachelDetailOben {
   border-top: 1px solid var(--colBorder2);
}
/* .kachelDetail {
   position: relative;
   top: -4px;
} */
.kachelDetail tr td, .kachelDetailOben tr td {
   padding-top: 5px;
   color: var(--colTextReg);
}
.geldBrief, .detailListe {
   width: 100%;
}
.detailListe tr td, .geldBrief tr td {
   border-top: 1px solid var(--colBorder2);
   padding: 5px 0px;
}
.kachelDetail tr:first-of-type td, .kachelDetailOben tr:first-of-type td,
   .formBearbeiten tr:first-of-type td {
   padding-top: 12px;
   border-top: 0px;
}
.kachelDetail tr td:last-of-type, .kachelDetailOben tr td:last-of-type,
   .geldBrief tr td:last-of-type, .geldBrief tr td:nth-of-type(2),
   .formBearbeiten tr td:last-of-type, .detailListe tr td:last-of-type {
   text-align: right;
}
.bestand > .kachelDetail {
   border-top: none;
}
.detailListe {
   margin: 0px !important;
}
.detailListe tr:first-of-type td {
   border-top: 0px;
}
.geldBrief {
   margin-top: 10px !important;
}
.marketsOutput, .newsOutput {
   background-color: var(--colBgCardBody);
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 10px 16px;
   border-top: 1px solid var(--colBorder);
   flex: none;
   order: 0;
   align-self: stretch;
   flex-grow: 0;
}
.newsOutput {
   flex-direction: column;
   align-items: flex-start;
}
.newsOutput > div:first-of-type {
   flex-direction: column;
   width: calc(100% - 20px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.newsOutput > div:last-of-type {
   font-size: var(--textSmall);
   color: var(--colTextLgt);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   line-clamp: 3;
   overflow: hidden;
}
.marketsOutput:last-of-type, .newsOutput:last-of-type {
   border-radius: 0px 0px 8px 8px;
}
.marketsOutputLink {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   flex: none;
   order: 0;
   align-self: stretch;
   flex-grow: 1;
}
.marketsOutputLink > div:first-of-type {
   box-sizing: border-box;
   width: 150px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0px;
   flex-grow: 1;
   order: 0;
}
.marketsOutputLink > div:last-of-type {
   box-sizing: border-box;
   width: 100px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   padding: 0px;
   flex: none;
   order: 1;
   flex-grow: 0;
}
.marketsOutputLink > div > span {
   font-size: var(--textSmall);
}
.marketsOutputLink > div:first-of-type > span {
   color: var(--colTextLgt);
}

.toggleList {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: flex-start;
   background-color: var(--colBgCardBody);
   white-space: nowrap;
   padding: 12px;
   gap: 36px;
}
.toggleListActive, .toggleListPassive {
   font-size: 14px;
   color: var(--colTextReg);
}
.toggleListActive {
   text-decoration: none;
   font-weight: bold;
}
.toggleListPassive {
   text-decoration: underline;
}
.iconRechts {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
   padding: 0px 0px 0px 16px;
   width: 40px;
   height: 40px;
   flex: none;
   order: 1;
   align-self: stretch;
   flex-grow: 0;
}
.formBearbeiten {
   margin-top: 10px;
}
.formBearbeiten tr td {
   color: var(--colTextReg);
   padding-top: 8px;
}
.formBearbeiten tr:last-of-type {
   padding-bottom: 10px;
}
.formSuchen {
   margin: 0px -10px 15px -20px;
   padding: 15px 10px 15px 20px;
   border-bottom: 1px solid var(--colBorder2);
   background-color: var(--colBgPage);
}
.formHinweis {
   clear: both;
   border-bottom: 1px solid var(--colBorder);
   color: var(--colTextLgt);
   font-size: 12px;
   line-height: 1.2em;
   padding: 10px 0px 10px 0px;
   margin-bottom: 10px;
}
.noborder {
   border: 0px;
   padding: 0px;
   margin-bottom: 15px;
}
.leer {
   margin: -16px 0px 6px 0px;
}
.error {
   clear: both;
   color: var(--colTextNeg);
   font-weight: bold;
}
.zweispaltig, .dreispaltig {
   display: flex;
   justify-content: space-between;
}
.dreispaltig {
   gap: 10px;
}
.twoButtons {
   align-items: center;
   margin: 0px 45px 0px 45px;
}
.fett {
   font-weight: bold;
}
.positiv {
   color: var(--colTextPos);
}
.negativ {
   color: var(--colTextNeg);
}
.buttonLink {
   display: block;
   text-align: center;
   font-weight: bold;
   font-size: 16px;
   text-decoration: none;
   border-radius: 18px;
   background-color: transparent;
   border: 2px solid var(--colTextReg);
   color: var(--colTextReg);
   padding: 9px 0px 9px 0px;
   line-height: 1em;
}

/* Buttons ------------------------------------------------------------------ */
button {
   height: 36px;
   font-weight: bold;
   font-size: 15px;
   border-radius: 18px;
   background-color: transparent;
   border: 2px solid var(--colBtSecStdBorder);
}
.button100 {
   width: 100%;
   margin: 12px 0px;
   color: var(--colBtSecStdText);
}
.buttonSuchen {
   color: var(--colBtSecStdText);
   width: 100% !important;
   margin: 18px 0px 0px 0px;
}
.button50 {
   width: 48%;
   margin: 10px 0px;
   color: var(--colBtSecStdText);
}
.button30 {
   width: 30%;
   margin: 10px 0px;
   white-space: nowrap;
   color: var(--colBtSecStdText);
}
.buttonNavPassiv, .buttonNavAktiv, .buttonNavDisabled {
   font-size: 16px;
   border: 2px solid var(--colBtSecStdBorder);
}
.secondary {
   border: 2px solid var(--colBtSecStdBorder);
}
.buttonNavPassiv, .secondary {
   color: var(--colBtSecStdText);
   cursor: pointer;
}
.buttonNavDisabled {
   border: 2px solid var(--colBtSecDisBorder);
   color: var(--colBtSecDisText);
}
.buttonNavAktiv {
   background-color: var(--colBtSecStdBorder);
   border: 2px solid var(--colBtSecStdBorder);
   color: var(--colBtSecHovText);
   cursor: default;
}
.navigation button {
   width: 50%;
}
.navigation button:first-of-type {
   border-radius: 24px 0px 0px 24px;
}
.navigation button:last-of-type {
   border-radius: 0px 24px 24px 0px;
}
.buttonRund {
   color: var(--colBtRoundText);
   cursor: pointer;
   font-weight: bold;
   font-size: 12px;
   border: 0px solid transparent;
   margin-bottom: 10px;
   height: 115px;
   max-width: 120px;
}
.buttonRund::before {
   content: "\a0";
   display: inline-block;
   width: 55px;
   height: 55px;
   border-radius: 50%;
   margin: 10px 20px;
   text-align: center;
   background-color: var(--colBtRoundBackgound);
   border: 1px solid var(--colBtRoundBorder);
}
.buttonBearbeiten::before, .buttonLoeschen::before, .buttonKaufen::before, .buttonAddToMd::before {
   background-image: url(../images/pictos-if-dark.png);
   background-size: 832px auto;
   background-repeat: no-repeat;
}
.buttonAddToMd::before {
   background-position: -675px 2px;
}
.buttonBearbeiten::before {
   background-position: -102px -725px;
}
.buttonLoeschen::before {
   background-position: -570px -362px;
}
.buttonKaufen::before {
   background-position: -623px 2px;
}
.buttonDisabled {
   background-color: var(--colBtSecDisBackground);
   border-color: var(--colBtSecDisBorder);
   color: var(--colBtSecDisText);
}

/* Chart-Elemente ----------------------------------------------------------- */
.chartElement {
   display: flex;
   flex-direction: column;
   align-self: stretch;
   align-items: center;
   padding: 0px 16px 10px 16px;
   /* background-color: var(--colBgCardBody); */
   /* border-bottom: 1px solid var(--colorLight2); */
}
.chartElement img {
   width: 100%;
}
.chartControl {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-self: stretch;
   align-items: center;
   gap: 20px;
   padding: 15px 36px 5px 36px;
}
/* .chartControl div {
   color: var(--colorDark2);
} */
.chartActive {
   text-decoration: none;
   font-weight: bold;
}
.chartDisabled {
   text-decoration: none;
   font-weight: normal;
   color: var(--colBtSecDisText);
}
.chartPassive {
   text-decoration: underline;
   font-weight: normal;
}

/* Forms -------------------------------------------------------------------- */

.inputData > input, .inputData > select {
   border: 1px solid var(--colInputBorder);
   border-radius: 8px;
   background-color: var(--colInputBg);
   color: var(--colTextReg);
   width: 140px;
   height: 64px;
   padding-left: 16px;
   font-family: inherit;
   font-size: 1.2rem;
   cursor: auto;
}
.inputData > select {
   padding-left: 12px;
   padding-top: 16px;
   background-color: var(--colInputBg);
   /* appearance: none;
   -moz-appearance: none; */
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
   -moz-text-fill-color: var(--colTextLgt);
   -webkit-text-fill-color: var(--colTextLgt);
}
.inputWrapper {
  width: 100%;
  padding: 0px;
}
.inputWrapper .inputData {
   height: 64px;
   width: 100%;
   position: relative;
   margin-bottom: 16px;
}
/* Input Field formatting */
.inputWrapper .inputData input {
   height: 100%;
   width: 100%;
   font-size: 16px;
   border: 1px solid var(--colInputBorder);
   border-radius: 8px;
   padding: 24px 16px 12px 16px;
}
/* Label formatting when field is empty */
.inputWrapper .inputData label{
   font-size: 16px;
   position: absolute;
   bottom: 22px;
   left: 16px;
   color: var(--colInputLabel);
   pointer-events: none;
   transition: all 0.3s ease;
}
/* Label formatting when field has focus or is filled (check only for required fields possible)*/
.inputData input:focus ~ label, .inputData input:valid ~ label,
.inputData input:disabled ~ label, .inputData input[type="date"] ~ label {
   transform: translateY(-20px);
   font-size: 12px;
   color: var(--colInputLabel);
}
.inputWrapper .inputData .labelSelect {
   font-size: 12px;
   position: absolute;
   bottom: 42px;
   left: 16px;
   color: var(--colInputLabel);
}
.input100 {
   box-sizing: border-box;
   width: 100% !important;
   /* margin-bottom: 20px; */
}
input:disabled, select:disabled {
   background-color: var(--colDisabledBg);
   color: var(--colPlaceholder);
   -webkit-text-fill-color: var(--colPlaceholder);
}

/* Correct darkened text on iOS */
@media (prefers-color-scheme: dark) {
   input:disabled, select:disabled {
      -webkit-text-fill-color: var(--colTextReg) !important;
   }
}

/* Correct bottom margins of input and select field */
#search-form .inputData {
   margin-bottom: 0px;
}

.imgPfa {
   background-image: url(../images/pfaLight.png);
   background-repeat: no-repeat;
   background-size: contain;
   width: 100%;
}
/* Correct background color on page "Musterdepot löschen" */
body.bearbeiten div.pageTitle {
   background-color: var(--colBgCardHead);
}

.hinzufuegen, .chevron, .iconReload, .kachelBereichIcon::before, .buttonBearbeiten::before,
.buttonLoeschen::before, .buttonKaufen::before, .close, .selectArrow::after,
.iconKursliste, .iconCurrencies {
   background-image: url(../images/pictos-if-dark.png);
   display: inline-block;
   background-repeat: no-repeat;
}

/* Now an arrow pointing right ---------- */
.chevron {
   background-size: 400px auto;
   background-repeat: no-repeat;
   background-position: -0px -75px;
   content: " ";
   width: 24px;
   height: 24px;
   /* position: relative;
   top: 20px; */
}
.iconReload {
   align-self: center;
   background-size: 560px auto;
   background-position: -75px -460px;
   content: " ";
   width: 24px;
   height: 24px;
   margin-top: 4px;
   margin-right: -4px;
}
.close {
   align-self: center;
   background-size: 600px auto;
   background-position: -453px -7px;
   content: " ";
   width: 30px;
   height: 30px;
   margin-top: 2px;
   transform: rotate(45deg);
}
.hinzufuegen {
   background-size: 500px auto;
   background-position: -376px -0px;
   border: 1px solid var(--colTextReg);
   border-radius: 20px;
   content: " ";
   width: 30px;
   height: 30px;
}
.selectArrow::after {
   background-size: 490px auto;
   background-position: -5px -30px;
   content: "";
   margin-left: calc(100% - 40px);
   z-index: 1;
   position: relative;
   pointer-events: none;
   margin-bottom: -27px;
   top: 18px;
   width: 20px;
   height: 25px;
}

.iconKursliste {
   background-size: 540px auto;
   background-position: -72px -274px;
   content: " ";
   width: 24px;
   height: 24px;
}
.spacer {
   height: 15px
}
.chartNotice {
   color: var(--colTextLgt);
   font-size: 12px;
   line-height: 12px;
   text-align: center;
   margin: 10px 0 10px 0;
}
.buyingPriceNotice {
   font-size: var(--textSmall);
}
.kachelBereichUnten.chart .buyingPriceNotice {
   margin-left: 12px;
}
.buyingPriceNotice svg {
   margin-left: 0px;
   width: 13px;
   height: 11px;
}
.buyingPriceNotice svg rect {
   width: 11px;
   height: 11px;
   fill: var(--colTextPos);
}
/* Special adjustments for dark mode ---------------------------------------- */
@media (prefers-color-scheme: dark) {
   .hinzufuegen, .chevron, .kachelBereichIcon::before, .buttonBearbeiten::before,
   .buttonLoeschen::before, .buttonKaufen::before, .close, .selectArrow::after,
   .iconKursliste, .buttonAddToMd::before {
      background-image: url(../images/pictos-if-light.png);
   }
   .kachelBereichOben {
      border-bottom: 0px;
   }
   .imgPfa {
      background-image: url(../images/pfaDark.png);
   }
}

/* Classes for PFA integration ---------------------------------------------- */
body.pfa {
   height: 100%;
   padding: 0px;
   margin: 0px;
}
body.pfa > .pageTitle { /* Used on modal pages */
   margin: 0px;
}
body.pfa > iframe {
   border: 0px;
   width: 100%;
   height: calc(100vh - 50px);
}
#FormTool {
   height: 0px;
}
/* Adjustments for dynamic chart integration Musterdepot */
.kachelBereichUnten.chart {
   padding-left: 2px;
   padding-right: 2px;
}
.kachelBereichUnten.chart .ChartKurs, .kachelBereichUnten.chart .zweispaltig {
   padding-left: 10px;
   padding-right: 10px;
}

/* Adjustments for portfolio chart */
#portfolioChartArea {
   text-align: center;
}

/* Notice about performance below chart */
.perfNotice {
   border-bottom: 0;
   margin: 0;
   padding: 0;
   font-size: var(--textSmall);
   color: var(--colTextLgt);
   hyphens: auto; 
}
.chart > .perfNotice {
   margin: 10px 10px 0 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--colBorder);
}
.perfNotice span {
   font-weight: 700;
}
.ChartKurs {
   margin-top: 20px;
}
.rot {
   background-color: var(--colBtPrimStdBackground);
   border-color: var(--colBtPrimStdBackground);
   color: var(--colBtPrimStdText);
}

/* END OF FILE -------------------------------------------------------------- */