: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-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 .range-container .datepicker-wrapper .calendar-icon {
    position: absolute;
    right: 55px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 16px;
}

.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 14px;

}

.etf-chart-area .table-data-box .table-responsive table tbody tr:nth-child(even) td {

    background-color: var(--info-color);

}



.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);



}

.range-input-wrap {max-width: 150px;}
.etf-top-body .etf-filter-bar .filter-box .datepicker-wrapper.range-input-wrap .form-controls {
    padding: 4px 22px 4px 10px;
    border-radius: 5px;
    font-size: 14px;
    max-height: 26px;
    max-width: 100px;
}
div#tooltip1, div#tooltip2 {
    position: absolute;
    left: -2000px;
    visibility: hidden;
    overflow: hidden;
}

ul.tooltipprntholder li span.tooptip {
    background: #d9d4cd;
    border-radius: 10px;
    margin-left: 5px;
}
ul.tooltipprntholder li .active span.tooptip {
    background: #cc000e;
}

.range-input-wrap .calendar-icon {max-width: 16px; max-height: 16px;}
.amount_list {display: flex; flex-wrap: wrap; gap: 8px; margin: 0px; list-style: none; padding: 0px;}
.amount_list li {display: flex; flex:0 0 calc(33.333% - 6px);}
.amount_list button {width: 100%;  padding: 5px 6px; border-radius: 2px; color: var(--white-color); background-color: var(--danger-color); text-align: center; font-size: 14px; font-weight: 500; line-height: 1; border: none;}
.amount_list button:focus {background-color: #ff7881;}

.einzelner-etf-chart-bar { grid-column: span 4; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.etf-toggle-btn {display: flex; align-items: center; justify-content: center; gap: 5px; max-width: fit-content; margin-inline: auto; cursor: pointer;}
.etf-down-icon {display: inline-flex; align-items: center; justify-content: center;}

.etf-chart-area .filter-tabs .filter-tab-link {display: flex; align-items: center; position: relative;}
.etf-chart-area .filter-tabs .filter-tab-link svg path {transition: all ease-in-out 0.3s;}
.etf-chart-area .filter-tabs .filter-tab-link:hover svg path {fill: #ff7881;}
.etf-chart-area .filter-tabs .filter-tab-link.active svg path, .etf-chart-area .filter-tabs .filter-tab-link.active:hover svg path {fill: var(--white-color);}
.etf-chart-area .filter-tabs .filter-tab-link .tooptip {display: inline-flex; align-items: center; justify-content: center;}
.filter-tab-link .tooptip .tooltipmsg { position: absolute; box-shadow: 0px 0px 10px 0px #0000000f; top: 100%; padding: 10px; background: #fff; border: 1px solid #ccc; margin-top: 4px; border-radius: 8px; color: #000 !important; transition: all ease-in-out 0.2s; opacity: 0; visibility: hidden; white-space: normal; min-width: 400px; font-size: 14px; z-index: 1;}
.filter-tab-link .tooptip:hover .tooltipmsg {opacity: 1; visibility: visible;}

/* 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;

    }

    .filter-tab-link .tooptip .tooltipmsg{ min-width: 200px; font-size: 12px; line-height: 22px; right: 0;}

}



@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;

    }
    .filter-tabs .filter-tab-link .tooptip svg {width: 16px; height: 16px;}



    .etf-chart-area {

        padding: 20px;

    }



    .etf-chart-area .einzahlung-grid {

        grid-template-columns: repeat(2, 1fr);

    }
    .einzelner-etf-chart-bar {grid-column: span 2;}



    .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;

    }

}