html {
   font-family: SparkasseWeb,Arial,Helvetica,sans-serif;
   font-size: var(--textRegular);
   line-height: var(--lineHeightReg);
   color: var(--colTextReg);
   box-sizing: border-box;
}

*, *::before, *::after {
   box-sizing: inherit;
}

body {
   background-color: var(--colBgPage);
   margin: 0;
   padding: 0;
}

h1 {
   padding: 10px 0;
   font-size: 20px;
}
h2 {
   font-size: 16px;
}

.content {
  padding: 0 10px 20px 10px;
}

.clickable {
  cursor: pointer;
}

a, a:visited {
  color: var(--colTextLgt);
}

.invisible {
   display: none !important;
}

.hinweis-gross {
   font-size: var(--textLarge);
}

.disclaimer {
   color: var(--colTextLgt);
   font-size: var(--textXSmall);
   line-height: normal;
   text-align: center;
}
.disclaimer > a {
   text-decoration: none;
   color: var(--colTextReg);
}

.border {
   border-top: 1px solid var(--colBorder);
   padding-top: 20px;
   margin-top: 30px;
}

.page-title {
  display: flex;
  align-items: center;
  margin: 10px -10px;
  padding: 16px;
  height: 48px;
  background: var(--colBgPage);
}

.page-title h1 {
  flex: 1;
  color: var(--colTitle);
  font-size: 18px;
  font-weight: normal;
}

/* card elements */
.card {
  background: var(--colBgCardBody);
  border: 1px solid var(--colBorder);
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--colShadow);
}

.card-head {
  background: var(--colBgCardHead);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: var(--colTitle);
  margin-right: auto;
}

.card-body {
  border-top: 1px solid var(--colBorder);
  padding: 10px 16px 15px;
}

.news-card {
  background: var(--colBgCardBody);
  padding: 10px 16px;
  border-top: 1px solid var(--colBorder);
  cursor: pointer;
}

.news-card h3 {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--textRegular);
  font-weight: normal;
}

.news-card p {
  margin: 0;
  font-size: var(--textSmall);
  color: var(--colTextLgt);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-data-row {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-top: 1px solid var(--colBorder);
  align-items: center;
  gap: 3px;
}

.info-group {
    flex: 1;
    min-width: 0;
}
.info-group time,
.info-group p {
    display: block;
    font-size: var(--textSmall);
    color: var(--colTextLgt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.info-group p.title {
    font-size: var(--textRegular);
    color: var(--colTextReg);
}

.price-group {
    text-align: right;
    flex-shrink: 0;
}
.price-group .price {
}
.price-group .change {
    font-size: var(--textSmall);
}
.info-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.info-add-on {
    font-size: var(--textSmall);
    color: var(--colTextLgt);
    white-space: nowrap;
    flex-shrink: 0;
}

.chart-row-top,
.chart-row-bottom {
   display: flex;
   justify-content: space-between;
   gap: 12px;
}

.chart-row-top {
   margin-top: 5px;
   align-items: baseline;
}

.price-box {
   font-size: var(--textXLarge);
   white-space: nowrap;
}

.price-box .date {
   display: block;
   font-size: var(--textSmall);
   color: var(--colTextLgt);
   padding-top: 3px;
}

.perf-box {
   text-align: right;
   white-space: nowrap;
}

.perf-box span {
   display: block;
}

.chart-row-bottom {
   margin-bottom: 5px;
   font-size: var(--textSmall);
   color: var(--colTextLgt);
}


/* icons */

.card-icon {
   display: inline-block;
   width: 31px;
   height: 31px;
   background-color: var(--colBgAreaIcon);
   border-radius: 50%;
}

.card-icon::before {
   content: "";
   display: block;
   width: 100%;
   height: 100%;
   font-family: Pictos-IF;
   font-size: 30px;
   line-height: 25px;
   border-radius: 50%;
}

.icon-chart::before {
   content: "\F60A";
}
.icon-index::before {
   content: "\F75E";
}
.icon-currencies::before {
   content: "\F79B";
}
.icon-commodities::before {
   content: "\F78C";
}
.icon-interests::before {
   content: "\F678";
}
.icon-news::before {
   content: "\F606";
}
.icon-vergleichszahlen::before {
   content: "\F611";
}
.icon-kursdaten::before {
   content: "\F7F4";
}
.icon-list::before {
   content: "\F622";
}
.icon-watchlist::before {
   content: "\F865";
}
.icon-sheet::before {
   content: "\F639";
}
.icon-performance::before {
   content: "\F7D4";
}

[class^="icon-right"] {
   display: inline-block;
   font-size: 32px;
   line-height: 26px;
   font-family: Pictos-IF;
   color: var(--colTitle);
}
.icon-right-chevron::before {
   content: "\F230";
}
.icon-right-reload::before {
   content: "\F25E";
}
.icon-right-list::before {
   content: "\F622";
}
.icon-right-empty::before {
   content: "\F622";
   visibility: hidden;
}

.watchlist-remove::before {
  color: var(--colTextLgt);
  content: "\F864";
  display: inline-block;
  font-size: 42px;
  font-family: Pictos-IF;
}

.data-table, .price-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table td, .price-table td {
  padding: 5px 0;
  border-top: 1px solid var(--colBorder2);
}

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

.data-table td:not(:first-child),
.price-table td:not(:first-child) {
  text-align: right;
}

.price-table {
  margin-top: 20px;
}

.bezeichnung-lang {
   margin: 0;
   font-size: 16px;
   font-weight: bold;
}

.isin {
   margin-top: 5px;
   font-size: 12px;
   color: var(--colTextLgt);
}
.isin > span {
    margin-left: 20px;
}

.zweispaltig {
   display: flex;
   justify-content: space-between;
}

.positiv {
   color: var(--colTextPos);
}
.negativ {
   color: var(--colTextNeg);
}

/* buttons */
button {
   height: 36px;
   font-weight: bold;
   font-size: 15px;
   border-radius: 18px;
   background-color: transparent;
   border: 2px solid var(--colBtSecStdBorder);
   margin-top: 10px;
   margin-bottom: 10px;
}
.button100 {
   width: 100%;
   color: var(--colBtSecStdText);
}
.button50 {
   width: 48%;
   color: var(--colBtSecStdText);
}
.button30 {
   width: 32%;
   color: var(--colBtSecStdText);
}
.button-nav-disabled {
   border: 2px solid var(--colBtSecDisBorder);
   color: var(--colBtSecDisText);
}
.button-disabled {
   background-color: var(--colBtSecDisBackground);
   border-color: var(--colBtSecDisBorder);
   color: var(--colBtSecDisText);
}

/* chart */
.chart-element {
   display: flex;
   flex-direction: column;
   align-self: stretch;
   align-items: center;
   padding: 0 16px 10px 16px;
}
.chart-element picture, .chart-element img {
   width: 100%;
}

/* forms */

.input-data {
    position: relative;
    margin-bottom: 16px;
    width: 100%;
}

.input-data input,
.input-data select {
    width: 100%;
    height: 64px;
    padding: 24px 16px 8px;
    border: 1px solid var(--colInputBorder);
    border-radius: 8px;
    background-color: var(--colInputBg);
    color: var(--colTextReg);
    font-family: inherit;
    font-size: 16px;
    appearance: none;
    transition: all 0.2s ease;
}

.input-data label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--colInputLabel);
    pointer-events: none;
    transition: all 0.2s ease;
    font-size: 16px;
}

.input-data input:focus ~ label,
.input-data input:not(:placeholder-shown) ~ label,
.input-data select ~ label {
    top: 5px;
    transform: translateY(0);
    font-size: 12px;
}

.input-data select {
    cursor: pointer;
    color: var(--colTextLgt);
}

#search-form {
   border-bottom: 1px solid var(--colBorder2);
   padding-bottom: 15px;
   margin-bottom: 20px;
}

.select-arrow::after {
   font-family: Pictos-IF;
   font-size: 25px;
   content: "\F204";
   right: 15px;
   top: 50%;
   z-index: 1;
   position: absolute;
   transform: translateY(-50%);
   pointer-events: none;
}

/* toggle between top-flop and alpha on indexlist */
.index-list-menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--colBgCardBody);
  white-space: nowrap;
  padding: 12px;
  gap: 36px;
  font-size: var(--textRegular);
}

.index-list-menu a.active {
  text-decoration: none;
  font-weight: bold;
}

.perf-notice {
    font-size: var(--textSmall);
    color: var(--colTextLgt);
    hyphens: auto;
}
.perf-notice span {
    font-weight: bold;
}

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