:root{
    --main-color: #f825c4;
    --main-background-color: #232323;
}
html, body{background-color:var(--main-background-color);}
.mbr-form .input-group-btn input[type="submit"]{
    border-radius: 100px !important;
    padding: 1rem 3rem;
}
.btn.round,.no-btn.round,.button.round{border-radius: 100px;}
form .btn.inline-flex{display: inline-flex;}
.relative{ position: relative !important;}
.pr-4{ padding-right: 4em !important;}
.cid-sNHqUBY6YM .btn {width: unset;}
.nav.buttons{
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom: none;
}
.langswitch {
    color: transparent;
    margin: 0px 5px;
    border: none;
    width: 18px;
    height: 12px;
    background-size: contain;
}
.btn.margin-auto{margin:0 auto;}
/*carousel*/
.carousel-item.active, .carousel-item-next, .carousel-item-prev {display: block;}
.cid-sNeb9ty5st .carousel-indicators li.active, .cid-sNeb9ty5st .carousel-indicators li:hover {border-color: rgb(194, 7, 148);}
/*carousel end*/

.tableflow{overflow-x:auto;}
.align-right{text-align:right;}
.align-center{text-align:center;}
.mbri-average:before{content:"\2205"; }
.mbri-back:before{content:"\226A"; }
.mbri-forward:before{content:"\226B"; }
.image-btn{
    width: 50px;
    height: 50px;
    background-position: center;
    background-size: 50px;
    background-color: transparent;
}
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}
/* Firefox */
input[type=number] {
        -moz-appearance: textfield;
        appearance: textfield;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder::before, .video-js .vjs-play-control .vjs-icon-placeholder::before, .vjs-icon-play::before {margin-top: 5px;}
.placeholder{
    position: absolute;
    margin-top: 16px;
    right: 0;
    margin-right: 2.2rem;
    color: #6c757d;
}
.placeholder-date{margin-right: 3.7rem;}
/** Finanzübersicht **/
/* Cards */
.mylogo > img{ 
    display: unset; 
    width: unset;
    background-color: #fff;
    box-shadow: inset 0 0 20px 9px #a3a490;
}
/** Eingabe **/
/* Betrag */
.input-sum{padding-right: 1.5rem;}
/* Input Zeile bei den Vermögenswerten */
.input-asset{margin:auto; width: auto;}
/* Kategorie Auswahl */
.icon-switch{
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: .2rem 0 0 0;
}
.icon-switch input{display:none;}
.icon-switch.loan-switch{margin:0;}
.inputmessage{ background-color: var(--main-background-color);}
.inputmessage img{ width:20px;display:inline;}
.input-buttons > button{display: inline-flex;}
/* Eingabe-Leiste Buttons */
.no-display{display:none;}
.ctl-items{border:1px solid white;}
/* .row.ctl-items{border: none;} */
.ctl-items > ul{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.ctl-items > ul > li{
    width:calc(25% - 10px);
    height:50px;
    margin-right:5px;
    position:relative;
    min-width: fit-content;
}
.ctl-items > ul > li:first-child,.budget-picker{width:50px;}
.ctl-items > ul > li:last-child{margin-right:0px; width:50%;}
.ctl-items > ul > li > .date-calendar,
.ctl-items > .budget-picker > .date-calendar{max-width:50px;}
.ctl-items > ul > li > .date-calendar button.datepicker,
.ctl-items > .budget-picker > .date-calendar button.datepicker{
    position: relative;
    height:50px;
    width:50px;
    margin: 0 0 0 0;
    border-radius:0;
}
.cash-bank{position:relative;}
.repayment-type{min-width:50px;}
/* Bar/Bank + Fix */
.button-switch, .button-fix,.fix-box,.button-budget{
    width:100%;
    height: 25px;
    margin:0;
    text-align:center;
}
/* Checkboxen und Radios ausblenden */
.button-switch input,.button-fix input,.button-budget input{display:none;}
.button-fix,.fix-box,.button-budget{height:50px;}
#comment{
    height:50px;
    width:100%;
    background:none;
    border:none;
    border-radius:0px;
}
/* span für die Checkboxen und Radios */
.box, .radio-btn,.fix-box,.budget-box {
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.box{position:absolute;}
input:checked + .box.categories{ background-color: #6fbece; }
input:checked + .fix-box:before{content: "\e977";}

.categories, .box.positions, .loan{
  background-color: #fff;
  background-size: 50px 50px;
  background-position: center;
}
.box.positions, .detail_logo{
  box-shadow: inset 0 0 20px 9px #a3a490;
}
input:checked + .box.positions, input:checked + .loan{
    background-color:#fff;
    box-shadow: inset 0 0 20px 9px #1e1456;
}
.box.positions img, .button-fix img{ width: 50px; height:50px;}
/* Checkbox Slider */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  margin-bottom:0px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:#721313;
/*  background-color: #132272;*/
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {background-color: #1C8925;}
input:focus + .slider {box-shadow: 0 0 1px #1C8925;}
input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {border-radius: 17px;}
.slider.round:before {border-radius: 50%;}
.text .slider:after {
    /* Text vor dem FlipFlop-Schalter */
    position: absolute;
    font-weight: bold;
    height: 17px;
    left: 33px;
/*    color: #132272;*/
    color: #626369;
    bottom: 7px;
    min-width: 160px;
}

.text input:checked + .slider:after {
    /* Text hinter dem FlipFlop-Schalter */
    color: #1C8925;
    position: absolute;
    left: 33px;
}
.currency{
    display: flex !important;
    position: absolute;
    right: 0 !important;
    max-width: 4em;
    margin-right: 5px;
}
/* Datepicker */
.date-calendar{display:inline-block;width:100%;max-width:200px;}
.date-calendar button.datepicker{
    padding: 1rem;
    position: absolute;
    height: 59px;
    margin: 0 0 0 -53px;
    width:53px;
    background: #32ae56;
    border-radius:.25rem;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}
.inline-flex{ display: inline-flex; }
.select2-container--default .select2-selection--single{
    min-height: 48px;
    padding: 0.6rem 1.2rem;
    font-size: 1.1rem;
}
.select2-selection__arrow {display:none;}
/* Ueberweisungen */
.cid-vltCXDDPVy form.mbr-form {
    background-color: rgb(85, 84, 84);
    color: #fafafa !important;
}
/* Details */
.button{
    padding: 0.6rem 1.2rem;
    border-width: 1px;
    font-style: normal;
    margin: 0.6rem 0.6rem;
    white-space: normal;
    align-items: center;
    justify-content: center;
    word-break: break-word;
}
dd {
    display:none;
    margin-left: 0px;
    margin-bottom: 4px;
    width:100%;
}
.closed, .closed.open {
    height: 20px;
    width: 20px;
    background-image: url("/assets/images/design/menu_down.png");
    background-repeat: no-repeat;
    float: left;
}
.closed.open{ transform: rotate(270deg); }
/* Details - Filterformular */
.cid-sOVFWwm326 form.mbr-form{ background-color: #d3d3d3; }
.extend-search{background-color: #767676;}
.search-btn{text-align: right;}
#filter {
    width: 70%;
    border: 1px solid black;
    padding: 10px;
    background-color: lightgray;
}
#last {
    width: 3rem;
    margin: 0 5px;
    padding: 0 10px;
}
#uebersicht {background-color: #D3D3D3;}
.nBar,.nBank,.uBar,.uBank{
    width:calc(50% - 5px);
    min-width:190px;
    display:inline-block;
}
#bar{background-color:rgba(0,128,0,1);padding-left:5px;}
.nBar,.nBank,.uBar,.uBank{display:inline-table;padding:5px 5px 0 5px;}
#bankonly,#bank{padding-left: 5px;background-color:rgba(122,0,0,1);}
#bankonly span,#bank span,#bar span{color:#fff;}
.stelle {
    background-color:#FFF;
    width:100%;
    height:100px;
    margin-bottom:5px;
}
.stelle.payment{ margin: 0;}
.stelle-button{width: 100%;padding: 0;}
.img-input{
    position:absolute;
    max-width:185px;
    height:100px;
}
.kachel{padding:5px;}
.kachel.payment, .kachel.interests{width:calc(50% - 5px);display:inline-block;}
.kachel.payment{background-color: rgba(0,128,0,.2);}
.kachel.interests{background-color: rgba(122,0,0,.2);}
.kachel-info{height:50px;}
.detail_angabe {
    font-size:10pt;
    line-height:1rem;
    padding-left:5px;
    padding-right:5px;
}
.detail_logo,.detail_angabe{float:left;}
.kat_logo{
    float:inline-end;
    height:25px;
    width:25px;
    background-size: 25px 25px;
    background-position:top;
}
.kachel .dkosten, .kachel .deinnahmen{font-weight:bold;}
.dkosten,.deinnahmen {
    font-size: large;
    text-align: center;
}
.dkosten p, span.dkosten {color: #EB4545;text-align:center;}
.deinnahmen p{
    color: #32ae56;
    padding: 10px;
    margin-bottom: 15px;
}
/* Sparbuch */
div#sparform .field{display:inline-block; }
.sparsum{margin-top:0px;}
.spar-head{background-color: rgb(204, 204, 204);}
.spar-row{transition: all 0.3s ease-in-out;}
.head-item{color:var(--main-color); font-weight:700;}
.date-item{width:20%;}
.value-item,.sum-value-item{width:30%;}
.comment-item{width:50%;}
.sum-item{width:70%;text-align:left;}
.date-item,.value-item,.comment-item,.sum-item,.sum-value-item{padding:.75rem;}
.spar-row .date-item,.spar-row .value-item,
.spar-row .comment-item{
    border-top-color:white;
    border-top-width:1px;
    border-top-style:solid;
}
.spar-row .sum-item,.spar-row .sum-value-item{
    border-top-style: double;
    border-top-color:white;
}
/* Positionen */
#limit{width:60px;}
.media-container-row.positions{display:inline-block;}
#head{height:72px;}
.suche{float:inline-start;}
.neuFeld{float:inline-end;}
.search-form{display: inline-block;}
.suche .field{max-width:180px;display:inline-block;}
.neuFeld{padding-top: 9px;}
.neuFeld .btn{ float:inline-end;}
.pos-input{text-align: center;}
.zid, .kat, .feld, .logo, .fix-pointer{max-width: fit-content;display: inline-flex;}
/* Budget */
.budget{
     box-shadow: 3px 5px 5px #626369;
     border-radius: 10px;
     background-color: #8484842e;
     padding: 0 16px;
}
.budget.image-only{
    height: 50px;
    width: 50px;
    background-color: #96d9b3;
    background-position: center;
    background-size: 50px 50px;
}
.budget-info{margin-bottom: 5px;}
.cid-ua6nAzJVAH .top-line {
        display: flex;
        justify-content: space-between;
        color: white;
}
.progress {
        width: 100%;
        background-color: #05bfc5;
        border-radius: 4px;
        margin-bottom: 10px;
}
      
.progress-bar {
        height: 20px;
        background-color: #1eb33e;
        border-radius: 4px;
}
.progress-bar.warning { background-color: #e1e444; }
.progress-bar.critical { background-color: #c41927; }
.budget-picker{position: absolute;}
.budget-ctl > .nav-item{
  width: calc(100% - 55px);
  height: 50px;
  margin-left: 55px;
  position: relative;
  min-width: fit-content;
}
/* Administration */
.cid-sNNLpoIkbZ .formhead,
.cid-sNSYOPojos .formhead{
    font-weight:700;
    border-bottom: 2px solid #e9ecef;
    border-collapse:collapse;
}
.cid-sNNLpoIkbZ .formhead, .cid-sNNLpoIkbZ .formrow,
.cid-sNSYOPojos .formhead, .cid-sNSYOPojos .formrow{
    padding: .75rem;
    border-top: 1px solid #e9ecef;
}
.cid-sNNLpoIkbZ .field,
.cid-sNSYOPojos .field{
    width:calc(60% - 10px);
    display:inline-block;
}
.cid-sNNLpoIkbZ .form-label,
.cid-sNSYOPojos .form-label,
.cid-sQaJTWHsq2 .form-label,
.cid-ucL727pZF7 .form-label{
    width: 40%;
    float:left;
}

.cid-sNNLpoIkbZ .important{ color: red; }
.cid-sNSYOPojos label{min-width:41px;display:inline-blocK;}
.no-btn{
    background-color:transparent;
    color:#efefef;
    border-color:transparent;
}
/*++ alte mbr-einstellungen für outline */
.btn-primary-outline, .btn-primary-outline:active{border-color: var(--main-color);}
.btn-secondary-outline, .btn-secondary-outline:active{border-color: #32ae56;}
.btn-warning-outline, .btn-warning-outline:active{border-color: #ffe161;}
.btn-info-outline, .btn-info-outline:active{border-color: #e4d295;}
.btn-white-outline, .btn-white-outline:active, .btn-white-outline.active {
    background: none;
    border-color: #ffffff;
    color: #ffffff;
}
.btn-white-outline:hover,
.btn-white-outline:focus,
.btn-white-outline.focus {
  color: #333333;
  background-color: #ffffff;
  border-color: #ffffff;
}
.btn-danger-outline,
.btn-danger-outline:active {
  background: none;
  border-color: #771830;
  color: #771830;
}
.btn-danger-outline:hover,
.btn-danger-outline:focus,
.btn-danger-outline.focus,
.btn-danger-outline.active {
  color: #ffffff;
  background-color: #cc2952;
  border-color: #cc2952;
}
.btn-danger-outline.disabled,
.btn-danger-outline:disabled {
  color: #ffffff !important;
  background-color: #cc2952 !important;
  border-color: #cc2952 !important;
}

.no-btn.round:hover{background-color:#b10687;}
.cid-sNNLpoIkbZ textarea{
    width:100%;
    min-height:200px;
    font-family:monospace;
    font-size: .75rem;
}
input.text-input{width:calc(75% - 40px);display:inline-block;}
.form-ctl{width:calc(15% - 5px);display:inline-block;text-align:center;}
.hide{color:transparent;}
.lang-msg-row{margin-bottom:.4rem;}
.cid-sNSE2O8f0D form .mbr-section-btn .btn {width: unset;}
/* Sprache background */
.lang-card{
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
}
.lang-title{margin-bottom: .5rem;}
.lang-title > span{text-shadow: -1px 0 rgb(255, 255, 255), 0 1px rgb(255, 255, 255), 1px 0 rgb(255, 255, 255), 0 -1px rgb(255, 255, 255);}
.lang-title > button{height:80px;width:80px;}
.lang-title > button.btn > span{margin-left:0;}
/* Geburtstags Overlay */
#my_popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* perfekt zentrieren */
  background: rgba(255,255,255,.4);
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  z-index: 1000; /* über Overlay */
  min-width: 250px;
  max-width: 400px;
  text-align: center;
}
#my_popup_background{ 
    background-image: url('/assets/images/design/geburtstag.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}
#my_popup .bday-text{
    color:#fff;
}
#my_popup .big{ font-size: 44pt; }
#my_popup .old{
    color: purple;
}
/*// Rezepte //*/
/* Rezepte Teaser */
.cid-sOhCgYLa8B .card-box{padding-bottom: 1rem;padding-top: 1rem;}
/*Nährwerttabelle*/
.nutrition-table{
    position: relative;
    top: 101px;
    background: #FFF;
    width: 80%;
    height: 100px;
    border: solid thin #000;
    margin: auto;
    display: flex;
    font-weight: 500;
    font-size: 12px;
    z-index: 90;
}
.nutrition-cell{border-right: solid thin #000;}
.nutrition-cell-sqare{width: 10%;}
.nutrition-cell-long{width: 50%;height: 100%;}
.nutrition-kcal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20%;
}
.nutrition-kcal .cal-number {font-size: 36px; }
.nutrition-kcal .cal {text-transform: uppercase;letter-spacing: 1px; }
.nuturition-infos-line{
    height: 50%;
    border-bottom: solid thin #000;
    display: flex;
    justify-content: space-between;
}
.nutrition-info-cell{
    display: flex;
    align-items: center;
    padding: 0 10px 0 5%;
    height: 100%;
    width: 30%;
    font-size: 14px;
}
.nutrition-cell:last-child {border-right: none;}
.nutrition-info-cell .info {font-weight: 700;}
.fat,.carbs,.protein,.saturated-fat,.sugar,.salt {
    padding-left: 5px;
    background-size: 25px;
    display: inline-block;
    width: 25px;
    height: 25px;
}
.fat{background-image: url('/assets/images/design/fat.png');}
.carbs{background-image: url('/assets/images/design/carbs.png');}
.protein{background-image: url('/assets/images/design/protein.png');}
.saturated-fat{background-image: url('/assets/images/design/saturated_fats.png');}
.sugar{background-image: url('/assets/images/design/sugar.png');}
.salt{background-image: url('/assets/images/design/salt.png');}
.nutrition-portion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.nutrition-portion span {width: 70%;text-align: center;}
.nutrition-carb-type{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
}
.nutrition-carb-type span {
    font-size: 30px;
    line-height: 0.9;
    text-align: center;
    width: 70%;
    padding-top: 4px;
    text-transform: uppercase;
}
.low-carb{background-color: #32ae56; color: #0e3a0e;}
.high-carb{background-color: #ff7c80; color: #c00000;}
/* Noten */
.school{ padding: 0 1.2rem }
.school > label.switch{ margin-bottom: -4px; }
.subject, .subject-edit,.subject-average{display:inline-flex;}
/*.subject-grades{border-bottom-color: white; border-bottom-width: 2px; border-bottom-style: solid;}*/
.cid-sOrWlLXWOg span {color: #ffffff;}
input.grade{ max-width: 2rem; }
input.subject{max-width: fit-content; }
.grade-text{width: 60%;}
.danger{color: #cc2952 !important;}
.success{color: green; }
.big0{ background-color: #32ae56; }
.big1{ background-color: #3d60c0; }
.big2{ background-color: #c0873d; }
.big3{ background-color: #c03d5e; }
/** Chart Konfigurator **/
.chartoptions{
        overflow-y: auto;
        max-height: 800px;
}
/* color picker */
.form-control.form-input,
.cid-sQaJTWHsq2 .clr-field{
    max-width: 50%;
}
.circle .clr-field button {
    width: 22px;
    height: 22px;
    left: 5px;
    right: auto;
    border-radius: 5px;
}
.square .clr-field input,
.circle .clr-field input {padding-left: 36px;}
.circle .clr-field button {border-radius: 50%;}
.ui-dialog-buttonset button {
    background-color: var(--main-color);
    margin: 0 5px;
    border-radius: 30px;
    color: white;
}
/* Benutzermanager */
.cid-udqscfqcTo .card-wrapper{ overflow:visible; }
.cid-ucL727pZF7 .item-wrapper{ background-color: #333333;}
.cid-ucL727pZF7 .user.disabled{ color: rgb(102, 100, 100); }
.cid-ucL727pZF7 .field,
.cid-udqscfqcTo .field{
    width: calc(60% - 10px);
    display: inline-flex;
}
#overlay {
        display: none; /* Standardmäßig unsichtbar */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Schwarzer Hintergrund mit 50% Deckkraft */
        z-index: 999; /* Über allem anderen */
}
#input-mask {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
        background-color: rgb(85, 84, 84); /* Weißer Hintergrund für die Eingabemaske */
        padding: 20px;
        border-radius: 8px;
        z-index: 1000; /* Über dem Overlay */
        display: none; /* Standardmäßig unsichtbar */
}
@media (min-width: 992px) {
    #input-mask {
        width: 33.333%; /* Breite für Geräte mit einer Breite von 992px oder mehr (typischerweise Desktops) */
    }
}
.language-selection .radio-inline {
        position: relative;
        margin-right: 10px;
        cursor: pointer;
}
    
.language-selection input[type="radio"] {display: none;}
.language-selection .flag {
        width: 30px; 
        height: 20px;
        border: 2px solid transparent;
        transition: border-color 0.3s ease;
}
.language-selection input[type="radio"]:checked + .flag {border-color: #54b192;}
.language-selection .radio-inline:focus-within .flag {
        outline: 2px solid #54b192;
        outline-offset: 2px;
}
.notification {color: var(--main-color); font-size: 85%;}
/* Gruppenmanager */
.cid-udqscfqcTo .item, .border-bottom{
  border-bottom-style: solid;
  border-bottom-color: white;
  border-bottom-width: 2px;
}
.groupinfo{
  border-left-style: solid;
  border-left-color: white;
  border-left-width: 2px;    
}
/* Kopfzeile fixieren */
.headrow{
        white-space: nowrap; /* Kein Zeilenumbruch innerhalb der Zellen */
        overflow: hidden; /* Überlaufenden Inhalt verbergen */
        text-overflow: ellipsis; /* Überlaufenden Text mit Ellipsen anzeigen */
        color: #fff;
}
.cell{
        flex: 1;
        padding: 8px;
}
.cell.fixed-width {
        flex: none;
        width: 70px; /* Feste Breite */
}
.fixed-width {
        flex: none;
        width: 70px;
}
/* Eingabe des Modulinhalts */
/* 1) Resets / Schutz vor vererbtem Einzug NUR im Highlight-Layer */
#highlighting,
#highlighting code,
#highlighting-content {
  text-indent: 0 !important;
  margin: 0;
  padding-left: 0;
}
/* falls irgendwo ::first-line gesetzt wird */
#highlighting-content::first-line { text-indent: 0 !important; }

/* 2) Layout: Wrapper + beide Layer deckungsgleich übereinander */
.code-wrap {                 /* <div class="code-wrap"> um beide Layer legen */
  position: relative;
  border: 1px solid #ccc;   /* Rahmen am Wrapper, nicht an den Layern */
  height: 400px;
}

#highlighting,
#code-editor {
  position: absolute;
  inset: 0;                 /* top/right/bottom/left: 0 */
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
  white-space: pre;
  word-wrap: normal;
}

/* 3) Typo / gemeinsame Text-Styles */
#code-editor,
#highlighting,
#highlighting * {
  font-size: 15pt;
  font-family: monospace;
  line-height: 20pt;
  tab-size: 2;
}

/* 4) Komponenten-Details */
#highlighting {
  pointer-events: none;     /* nur Anzeige */
  color: #fff;
  z-index: 0;
}

#code-editor {
  color: transparent;       /* Text unsichtbar, Cursor bleibt */
  background: transparent;
  caret-color: white;
  resize: none;
  z-index: 1;               /* über dem <pre> */
}

/* ADMIN Panel */
a h5{color:rgb(35, 35, 35);}
.cid-uemfeeaIkY .img3{background-color:var(--main-color);}
.cid-uemfeeaIkY .img4{background-color: #20a265;}
.cid-uemfeeaIkY .img5{background-color: #a22020;}
.cid-uemfeeaIkY .img6{background-color: coral;}
.cid-uemfeeaIkY .img7{background-color: #b7b718;}
.cid-uemfeeaIkY .img8{background-color: black;}
.tab {
        display: inline-block;
        width: 4em; /* oder eine andere gewünschte Breite */
}
.ebene-backcolor{background-color: var(--main-background-color);}
.ebene1{
    border-color: #00ffdb;
    background-color: rgba(17, 172, 129,.3);
}
.ebene2 {
    border-color: rgb(255, 223, 126);
    background-color: rgba(232, 229, 75,.3);
}
.ebene3 {
    border-color: rgb(177, 46, 155);
    background-color: rgba(255, 208, 208,.3);
}
.ebene1,.ebene2,.ebene3{
        border-style: solid;        
        padding-top: 8px;
        padding-left: 8px;
        padding-bottom: 8px;
}
/* DEPOT */
.table{
   display: table;
   width: 100%;
   table-layout: fixed;
}
.table .table-head,
.table .table-row {
  display: table-row;
}
.table-head{ background-color: rgb(204, 204, 204);}
.table-item{
    padding: .1rem .3rem;
    display: table-cell;
    box-sizing: border-box;
}

.table-head .depot-item{ background-color: #0f0d0d9c;}
.table-item.depot-item {
  width: 12.5%;
  color: white;
}
.table-row .depot-item{background-color: #0f0d0dc4;}
.table-row:has(.depot-item):hover {
  background-color: #1a1818e0;
}
.depot-item .bad{color: #EB4545;}
.depot-item .ok{color: #32ae56;}
.cid-tynTyR8X6w .filter{margin-bottom: 1rem;}
/* Dicke obere und doppelte untere Linie nur in der Sum-Zeile */
.table > .table-row.sum > .depot-item {
  border-top:    2px solid #fff;   /* 5px durchgezogene Linie oben */
  border-bottom: 3px double #fff;  /* 3px doppelte Linie unten */
}

/* Tabellen-Grundstil */
table.table-depot {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.9rem;
}

/* Kopfzeile */
table.table-depot thead th {
    background-color: #ccc;
    color: #000;
    padding: .3rem .5rem;
    text-align: left;
}

/*  Anpassung (Abstand, Mobilverhalten) */
.table-sm td, .table-sm th {
    padding: .25rem .5rem;
}

/* Zeilen */
table.table-depot tbody td, table.table-depot tfoot td {
    background-color: rgba(15, 13, 13, 0.77); /* entspricht #0f0d0dc4 */
    color: white;
    padding: .3rem .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    word-break: break-word;
}

/* Hover-Effekt für Zeile */
table.table-depot tbody tr:hover {
    background-color: rgba(26, 24, 24, 0.88); /* entspricht #1a1818e0 */
}

/* Summe als Footer oder separat gestylte Zeile */
table.table-depot tfoot td {
    border-top: 2px solid #fff;
    border-bottom: 3px double #fff;
    padding: .3rem .5rem;
    background-color: rgba(15, 13, 13, 0.9);
}

/* stärker spezifizierte Regeln für deine Depot-Tabelle */
table.table-depot td.ok {
    color: #32ae56;
    font-weight: bold;
}

table.table-depot td.bad {
    color: #EB4545;
    font-weight: bold;
}

table.table-depot .spark-bars {
  width: 100%;
  height: 1.2em;
  display: block;
  margin-top: .2em;
}

/* Nutzt bestehenden .ok/.bad-Farben */
table.table-depot .spark-bars rect.ok { fill: #32ae56; }
table.table-depot .spark-bars rect.bad { fill: #EB4545; }

table.table-depot td .diff-value {
  display: inline-block;
  /* Breite anpassen an Deine breitesten Werte: hier z.B. 5 Zeichen */
  width: 8ch;
  text-align: right;
  font-family: monospace; /* alle Ziffern gleich breit */
}

table.table-depot td .diff-arrow {
  display: inline-block;
  width: 1em;
  text-align: center;
  padding: 0 0.2em;
}

table.table-depot td .diff-rel {
  display: inline-block;
  font-family: monospace;
}
.badge.dividende {background-color: #65f289; color: rgb(61, 94, 61); }
.badge.kauf {background-color: #68d9e8; color: rgb(16, 64, 104); }
.badge.verkauf {background-color: #f4b869;color:rgb(102, 74, 21);}
.badge.waehrungskauf, .badge.waehrungsverkauf{background-color: rgb(75, 75, 75);}
.badge.success  { background-color: #40d56b; color: rgb(61, 94, 61); }
.badge.einbuchung, .badge.ausbuchung {background-color: #a7aaa8; color: rgb(213, 245, 34); }
.badge.danger  { background-color: #f49898; color: #580606; }
.btn.ml-3{margin-left: .3rem;}

/* Depot - Handelsübersicht */
.cid-uTbekKCqxt .card-box { background-color: gray;}
.glow-list{box-shadow: 0 0 5px 3px #918D7A;}
.depot-list{background-color: #232323;}
.depot-list .list-group-item {
  border-bottom: 1px dotted white;
}
.depot-list .list-group-item:last-child {
  border-bottom: none;
}
.list-group-flush .list-group-item{
    color: #fff;
    background-color: rgba(135,135,135,.3);
}
.activity-btn{
    color: white;
    border-radius: 15px;
    box-shadow: 0 0 6px currentColor;
}
.activity-btn span{text-shadow: 2px 2px 0 #000}