:root {
    /* --secondary-color: #CC000E;
    --primary-color: #FF7881;
    --info-color: #FFE5E7;
    --text-color: #1E293B;
    --etf-backtest-cool-gray-700: #334155;
    --etf-backtest-cool-gray-500: #64748B;
    --etf-backtest-cool-gray-400: #94A3B8;
    --etf-backtest-cool-gray-100: #F1F5F9;
    --bg-color: #FFF2F3;
    --warning-color: #FFF5F6;
    --success-color: #059669;
    --danger-color: #DC2626; */
    --white-color: #FFFFFF;
}

        /* :root {
            
 --etf-backtest-cool-gray-500
 --etf-backtest-cool-gray-100
        } */

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-ExtraLight.woff2") format("woff2"), url("../font/Poppins-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-Bold.woff2") format("woff2"), url("../font/Poppins-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-ExtraBoldItalic.woff2") format("woff2"), url("../font/Poppins-ExtraBoldItalic.woff") format("woff");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-ExtraBold.woff2") format("woff2"), url("../font/Poppins-ExtraBold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-ExtraLightItalic.woff2") format("woff2"), url("../font/Poppins-ExtraLightItalic.woff") format("woff");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-BoldItalic.woff2") format("woff2"), url("../font/Poppins-BoldItalic.woff") format("woff");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-Light.woff2") format("woff2"), url("../font/Poppins-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-Italic.woff2") format("woff2"), url("../font/Poppins-Italic.woff") format("woff");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-Medium.woff2") format("woff2"), url("../font/Poppins-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-SemiBoldItalic.woff2") format("woff2"), url("../font/Poppins-SemiBoldItalic.woff") format("woff");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-LightItalic.woff2") format("woff2"), url("../font/Poppins-LightItalic.woff") format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-Regular.woff2") format("woff2"), url("../font/Poppins-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-SemiBold.woff2") format("woff2"), url("../font/Poppins-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-Thin.woff2") format("woff2"), url("../font/Poppins-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-MediumItalic.woff2") format("woff2"), url("../font/Poppins-MediumItalic.woff") format("woff");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-Black.woff2") format("woff2"), url("../font/Poppins-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-ThinItalic.woff2") format("woff2"), url("../font/Poppins-ThinItalic.woff") format("woff");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins-BlackItalic.woff2") format("woff2"), url("../font/Poppins-BlackItalic.woff") format("woff");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}

body,
* {
    box-sizing: border-box;
}

p {
    margin: 0px;
}

img {
    max-width: 100%;
}

button {
    outline: none;
    cursor: pointer;
}
span.infomsg {
    font-size: 12px;
    line-height: 16px;
    padding: 5px;
    font-style: italic;
    font-weight: 400;
    color: #a4a4a4;
}
.etf-theme-btn {
    padding: 9px 15px;
    width: 100%;
    border-radius: 30px;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: .64px;
    color: var(--white-color);
    background-color: var(--primary-color);
    box-shadow: 0px 16px 30px 0px rgba(255, 120, 129, .3019607843);
    transition: all ease-in-out .3s;
    border: none;
}

.etf-theme-btn:hover {
    background-color: var(--secondary-color);
}

.etf-container {
    max-width: 1296px;
    margin: 0 auto;
    padding: 0px 20px;
}

.etf-chart-section {
    padding: 80px 0;
    background: url(../images/etf-bg.webp) no-repeat center;
    background-size: cover;
    max-width: 100%;
}

.etf-top-header {
    text-align: center;
    max-width: 750px;
    margin-inline: auto;
    margin-bottom: 30px;
}

.etf-top-header .subtitle {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: var(--secondary-color);
    padding: 4px 16px;
    border-radius: 20px;
    background-color: var(--info-color);
    display: inline-block;
}

.etf-top-header .title {
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    color: var(--primary-color);
    margin: 20px 0px 16px;
}

.etf-top-header .description {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--etf-backtest-cool-gray-700);
    margin: 0;
}

.etf-top-body {
    display: flex;
    gap: 30px;
    align-items: start;
}

.etf-top-body .etf-filter-bar,
.etf-top-body .etf-chart-area {
    background-color: var(--white-color);
    box-shadow: 0px 20px 40px 0px rgba(255, 120, 129, .1019607843);
    border-radius: 30px;
}

.etf-top-body .etf-filter-bar {
    padding: 20px;
    width: 25%;
    position: sticky;
    top: 20px;
    flex: 0 0 auto;
}

.etf-top-body .etf-filter-bar .filter-box {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 16px;
}

.etf-top-body .etf-filter-bar .filter-box label {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--text-color);
    display: inline-block;
    background-color: var(--white-color);
    width: -moz-fit-content;
    width: fit-content;
    padding: 0px 8px;
    margin-bottom: -10px;
    left: 8px;
    position: relative;
    z-index: 5;
}

.etf-top-body .etf-filter-bar .filter-box .datepicker-wrapper {
    position: relative;
    display: flex;
}

.etf-top-body .etf-filter-bar .filter-box .datepicker-wrapper .form-controls {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: .64px;
    color: var(--etf-backtest-cool-gray-400);
    padding: 8px 48px 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--info-color);
    outline: none;
    flex: 1 1 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    width: 100%;
}

.etf-top-body .etf-filter-bar .filter-box .datepicker-wrapper .form-controls::-moz-placeholder {
    color: var(--etf-backtest-cool-gray-400);
}

.etf-top-body .etf-filter-bar .filter-box .datepicker-wrapper .form-controls::placeholder {
    color: var(--etf-backtest-cool-gray-400);
}

.etf-top-body .etf-filter-bar .filter-box .datepicker-wrapper .calendar-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
}

.etf-top-body .etf-filter-bar .range-box {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid var(--info-color);
}

.etf-top-body .etf-filter-bar .range-box label {
    position: unset;
    padding: 0px;
    margin: 0px 0px 10px;
}

.etf-top-body .etf-chart-wrapper {
    width: 75%;
}

.filter-tabs {
    margin: 0px 0px 20px;
    padding: 10px;
    border-radius: 40px;
    background-color: var(--bg-color);
    display: flex;
    list-style: none;
    gap: 16px;
    white-space: nowrap;
}

.filter-tabs li {
    width: 100%;
}

.filter-tabs .filter-tab-link {
    padding: 8px 14px;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--text-color);
    border-radius: 30px;
    transition: all ease-in-out .3s;
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    cursor: pointer;
}

.filter-tabs .filter-tab-link:hover {
    color: var(--primary-color);
}

.filter-tabs .filter-tab-link.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0px 16px 30px 0px rgba(255, 120, 129, .3019607843);
}

.filter-box .select2 {
    width: 100% !important;
}

.filter-box .select2 .select2-selection--single {
    height: 44px;
    border-radius: 8px;
    border-color: var(--info-color);
    outline: none;
}

.filter-box .select2 .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding: 0px 50px 0px 16px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .64px;
    color: var(--etf-backtest-cool-gray-400);
}

.filter-box .select2 .select2-selection--single .select2-selection__arrow {
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.70538 9.29461C7.09466 8.90534 7.72569 8.905 8.11538 9.29384L12 13.17L15.8846 9.29384C16.2743 8.90499 16.9053 8.90534 17.2946 9.29461C17.6842 9.68418 17.6842 10.3158 17.2946 10.7054L12.7071 15.2929C12.3166 15.6834 11.6834 15.6834 11.2929 15.2929L6.70538 10.7054C6.31581 10.3158 6.31581 9.68418 6.70538 9.29461Z" fill="%2364748B"/></svg>') no-repeat center;
    background-size: contain;
    right: 16px;
}

.filter-box .select2 .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-dropdown {
    border-color: var(--info-color);
    border-radius: 8px;
}

.select2-dropdown .select2-search__field {
    border-radius: 4px;
    border-color: var(--info-color) !important;
    padding: 8px 14px;
    outline: none;
    font-size: 14px;
    line-height: 20px;
    color: var(--etf-backtest-cool-gray-700);
}

.select2-dropdown .select2-results__options li {
    font-weight: 400;
    font-size: 14px;
    padding: 8px 16px;
    color: var(--text-color);
}

.select2-dropdown .select2-results__options li.select2-results__option--highlighted {
    background-color: var(--info-color);
    color: var(--primary-color);
}

.select2-dropdown .select2-results__options li[aria-selected=true],
.select2-dropdown .select2-results__options li[aria-selected=true]:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.range-container {
    position: relative;
    width: 100%;
    margin: 0px 0px 3px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.range-container input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--info-color);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.range-container input[type=range]::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) var(--range-progress, 50%), var(--info-color) var(--range-progress, 50%), var(--info-color) 100%);
    border-radius: 4px;
}

.range-container input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .1019607843);
    border: 1px solid rgba(0, 0, 0, .1019607843);
    border-radius: 50%;
    cursor: grab;
    position: relative;
    z-index: 3;
    -webkit-transition: transform .15s ease;
    transition: transform .15s ease;
    top: -4px;
}

.range-container input[type=range]::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.range-container input[type=range]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    cursor: grab;
    -moz-transition: transform .15s ease;
    transition: transform .15s ease;
}

.range-container input[type=range]::-moz-range-thumb:active {
    transform: scale(1.1);
}

.range-container .tooltip {
    /* position: absolute; */
    /* top: 20px; */
    /* background: var(--primary-color); */
    color: var(--secondary-color);
    padding: 0px;
    /* border-radius: 4px; */
    font-size: 14px;
    line-height: 24px;
    white-space: nowrap;
    /* transform: translateX(-50%); */
    transition: left .1s linear;
    pointer-events: none;
}

/* .range-container .tooltip::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    clip-path: polygon(50% 34%, 0% 100%, 100% 100%);
    background-color: var(--primary-color);
} */

.filter-append-data .filter-box {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--info-color);
}

.filter-append-data .filter-box .flotinput-control {
    align-items: center;
    gap: 10px;
}

.filter-append-data .filter-box .flotinput-control .removeBtn {
    cursor: pointer;
}

.select-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.appendBtn {
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 16px;
}

.etf-chart-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 30px;
}

.etf-chart-area .einzahlung-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.etf-chart-area .einzahlung-grid .einzahlung-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    color: var(--etf-backtest-cool-gray-700);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    transition: all ease-in-out .3s;
    border: 1px solid var(--info-color);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    pointer-events: none;
}

.etf-chart-area .einzahlung-grid .einzahlung-item strong {
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    color: var(--text-color);
}

.etf-chart-area .einzahlung-grid .einzahlung-item.active,
.etf-chart-area .einzahlung-grid .einzahlung-item.hover-active {
    background-color: var(--bg-color);
}

.etf-chart-area .einzahlung-grid .einzahlung-item.active strong,
.etf-chart-area .einzahlung-grid .einzahlung-item.hover-active strong {
    color: var(--primary-color);
}

.etf-chart-area .einzahlung-grid .einzahlung-item:hover,
.etf-chart-area .einzahlung-grid .einzahlung-item.active {
    border-color: var(--primary-color);
    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, .0588235294);
}

.etf-chart-area .filter-tabs {
    width: -moz-fit-content;
    width: fit-content;
    white-space: nowrap;
    margin-inline: auto;
    gap: 0px;
}

.etf-chart-area .filter-tabs .filter-tab-link {
    padding: 4px 8px;
}

.etf-chart-area .chart-value-content {
    padding: 10px 0px;
}

.etf-chart-area .rendite-value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.etf-chart-area .rendite-value-grid .rendite-value-item {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid var(--info-color);
    color: var(--etf-backtest-cool-gray-700);
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}

.etf-chart-area .rendite-value-grid .rendite-value-item strong {
    display: block;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    color: var(--success-color);
}

.etf-chart-area .rendite-value-grid .rendite-value-item strong.loss {
    color: var(--danger-color);
}

.etf-chart-area .table-data-box .filter-box {
    text-align: center;
}

.etf-chart-area .table-data-box .filter-box .select2 {
    min-width: 200px;
    width: -moz-fit-content !important;
    width: fit-content !important;
}

.etf-chart-area .table-data-box .filter-box .select2 .select2-selection--single {
    height: 40px;
    border-radius: 40px;
    background-color: var(--bg-color);
    border-color: var(--bg-color);
}

.etf-chart-area .table-data-box .filter-box .select2 .select2-selection--single .select2-selection__rendered {
    font-size: 14px;
    line-height: 40px;
    color: var(--text-color);
    text-align: start;
}

.etf-chart-area .table-data-box .filter-box .select2 .select2-selection--single .select2-selection__arrow {
    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.8844 15.554C12.6969 15.7415 12.4426 15.8468 12.1774 15.8468C11.9123 15.8468 11.658 15.7415 11.4704 15.554L5.81343 9.89702C5.71792 9.80478 5.64174 9.69443 5.58933 9.57243C5.53692 9.45042 5.50934 9.3192 5.50818 9.18642C5.50703 9.05364 5.53233 8.92196 5.58261 8.79907C5.63289 8.67617 5.70714 8.56452 5.80104 8.47063C5.89493 8.37673 6.00658 8.30248 6.12948 8.2522C6.25237 8.20192 6.38405 8.17662 6.51683 8.17777C6.64961 8.17893 6.78083 8.20651 6.90284 8.25892C7.02484 8.31133 7.13518 8.38751 7.22743 8.48302L12.1774 13.433L17.1274 8.48302C17.316 8.30086 17.5686 8.20007 17.8308 8.20235C18.093 8.20463 18.3438 8.3098 18.5293 8.4952C18.7147 8.68061 18.8198 8.93142 18.8221 9.19362C18.8244 9.45582 18.7236 9.70842 18.5414 9.89702L12.8844 15.554Z" fill="%231E293B"/></svg>') no-repeat center;
}

.etf-chart-area .table-data-box .table-responsive {
    margin-top: 16px;
    overflow: auto hidden;
}

.etf-chart-area .table-data-box .table-responsive table {
    width: 100%;
    border-collapse: collapse;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
}

.etf-chart-area .table-data-box .table-responsive table tr th,
.etf-chart-area .table-data-box .table-responsive table tr td {
    padding: 10px 20px;
    font-size: 14px;
}

.etf-chart-area .table-data-box .table-responsive table tr th:first-child,
.etf-chart-area .table-data-box .table-responsive table tr td:first-child {
    border-radius: 8px 0px 0px 8px;
}

.etf-chart-area .table-data-box .table-responsive table tr th:last-child,
.etf-chart-area .table-data-box .table-responsive table tr td:last-child {
    border-radius: 0px 8px 8px 0px;
}

.etf-chart-area .table-data-box .table-responsive table thead tr th {
    font-weight: 600;
    line-height: 21px;
    color: var(--text-color);
    background-color: var(--info-color);
}

.etf-chart-area .table-data-box .table-responsive table thead tr th.spacer {
    padding: 5px 0px;
    background-color: var(--white-color);
}

.etf-chart-area .table-data-box .table-responsive table tbody tr td {
    font-weight: 400;
    line-height: 24px;
    color: var(--text-color);
    background-color: var(--warning-color);
    border-bottom: 2px solid var(--white-color);
}

.etf-footer {
    margin-top: 16px;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    color: var(--text-color);
}

.flatpickr-calendar {
    box-shadow: 0px 20px 40px 0px rgba(255, 120, 129, .1019607843);
    border-radius: 10px;
}

.flatpickr-calendar select,
.flatpickr-calendar .numInput {
    font-size: 14px !important;
}

.flatpickr-calendar .dayContainer span {
    border: none;
}

.flatpickr-calendar .dayContainer span:hover {
    background-color: var(--info-color);
}

.flatpickr-calendar .dayContainer span.selected {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.has-global-padding {
    margin: 0px !important;
    padding: 0px !important;
}
.flatpickr-today-button {
    width: fit-content;
    line-height: 1;
    margin-bottom: 10px;
}
.flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months{
    border-radius: 2px !important;
    border: 1px solid #ececec !important;
    margin-right: 10px !important;
    min-height: 24px;
}
.flatpickr-current-month input.cur-year{
    padding: 0px 10px !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months{
    padding: 0px 15px 0px 5px !important;
    appearance: none !important;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6.70538 9.29461C7.09466 8.90534 7.72569 8.905 8.11538 9.29384L12 13.17L15.8846 9.29384C16.2743 8.90499 16.9053 8.90534 17.2946 9.29461C17.6842 9.68418 17.6842 10.3158 17.2946 10.7054L12.7071 15.2929C12.3166 15.6834 11.6834 15.6834 11.2929 15.2929L6.70538 10.7054C6.31581 10.3158 6.31581 9.68418 6.70538 9.29461Z" fill="%23000000e6"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position-y: center !important;
    background-position-x: calc(100% - 0px) !important;
    background-size: 20px !important;
   
}

 /* Loader */
.loading-show {
overflow: hidden;
position: relative;
}
.loading-show * {
    pointer-events: none;
}
.loading-show .loading {
    position: absolute;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" style="shape-rendering: auto; display: block; background: transparent;"><g><circle stroke-width="2" stroke="%23cc000e" fill="none" r="0" cy="50" cx="50"><animate begin="0s" calcMode="spline" keySplines="0 0.2 0.8 1" keyTimes="0;1" values="0;40" dur="1s" repeatCount="indefinite" attributeName="r"/><animate begin="0s" calcMode="spline" keySplines="0.2 0 0.8 1" keyTimes="0;1" values="1;0" dur="1s" repeatCount="indefinite" attributeName="opacity"/></circle><circle stroke-width="2" stroke="%23ff7881" fill="none" r="0" cy="50" cx="50"><animate begin="-0.5s" calcMode="spline" keySplines="0 0.2 0.8 1" keyTimes="0;1" values="0;40" dur="1s" repeatCount="indefinite" attributeName="r"/><animate begin="-0.5s" calcMode="spline" keySplines="0.2 0 0.8 1" keyTimes="0;1" values="1;0" dur="1s" repeatCount="indefinite" attributeName="opacity"/></circle><g/></g><!-- [ldio] generated by https://loading.io --></svg>');
    background-position: center;
    background-size: 100px;
    background-repeat: no-repeat;
        background-color: var(--bg-color);

}

/* Responsive CSS */

@media(max-width: 1200px) {
    .filter-tabs {
        gap: 0px;
    }
}

@media(max-width: 991px) {
    .etf-top-body {
        flex-direction: column;
    }

    .etf-top-body .etf-filter-bar,
    .etf-top-body .etf-chart-wrapper {
        width: 100%;
    }

    .etf-top-body .etf-filter-bar {
        position: relative;
        top: 0px;
    }
}

@media(max-width: 768px) {
    .etf-top-header .title {
        font-size: 30px;
    }

    .etf-top-header .description {
        font-size: 14px;
        line-height: 24px;
    }

    .etf-chart-area .einzahlung-grid .einzahlung-item {
        font-size: 12px;
        line-height: 20px;
    }

    .etf-chart-area .einzahlung-grid .einzahlung-item strong {
        font-size: 14px;
        line-height: 22px;
    }

    .etf-chart-area .rendite-value-grid .rendite-value-item {
        font-size: 12px;
        line-height: 20px;
        padding: 10px;
    }

    .etf-chart-area .rendite-value-grid .rendite-value-item strong {
        font-size: 16px;
        line-height: 24px;
    }
}

@media(max-width: 576px) {
    .etf-top-body .etf-filter-bar .filter-box label {
        font-size: 12px;
        line-height: 20px;
    }

    .etf-top-body .etf-filter-bar .filter-box .datepicker-wrapper .form-controls {
        font-size: 14px;
        line-height: 22px;
    }

    .etf-top-body .etf-filter-bar .range-box {
        padding: 10px 16px;
    }

    .filter-tabs .filter-tab-link {
        font-size: 12px;
        line-height: 20px;
    }

    .etf-chart-area {
        padding: 20px;
    }

    .etf-chart-area .einzahlung-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .etf-chart-area .filter-tabs {
        flex-direction: column;
        width: 100%;
        border-radius: 15px;
        gap: 10px;
    }

    .etf-chart-area .rendite-value-grid {
        grid-template-columns: 1fr 1fr;
    }

    .etf-chart-area .rendite-value-grid .col-span-2 {
        grid-column: span 2;
    }

    .etf-chart-area .table-data-box .table-responsive table tr th,
    .etf-chart-area .table-data-box .table-responsive table tr td {
        padding: 8px 10px;
        font-size: 12px;
        line-height: 20px;
    }

    .filter-box .select2 .select2-selection--single .select2-selection__rendered {
        line-height: 44px;
        font-size: 14px;
    }

    .etf-footer {
        font-size: 12px;
        line-height: 20px;
    }
}