.rd-my-progress {
    /* Hauptcontainer */
    display: block;
    position: relative;
    padding: 16px;
}

.rd-my-progress-flex {
    /* Flex-Layout innerhalb des Hauptcontainers */
    display: flex;
    gap: 16px;
}

.rd-my-progress-diagram {
    /* Diagrammcontainer */
    width: 94px;
}

.circular-chart {

    /* Kreisschart */
    &.multi {
        /* Multichart-Variante */
    }

    .circle-bg {
        /* Hintergrundkreis */
    }

    .circle {

        /* Allgemeiner Kreis */
        &.green {
            /* Grüner Kreis */
        }

        &.green-end {
            /* Endpunkt des grünen Kreises */
        }

        &.green-start {
            /* Startpunkt des grünen Kreises */
        }
    }

    .percentage {
        /* Prozentzahl im Kreis */
    }
}

.rd-my-progress-times {
    /* Zeitcontainer */

    .rd-my-progress-times-flex {
        /* Flex-Layout für Zeitcontainer */

        .rd-my-progress-time {
            /* Einzelne Zeitangabe */

            .rd-my-progress-time-value {
                /* Zeitwert */
        font-weight: var(--rd-fontweights-open-sans-1);
        color: var(--rd-font-dark);
        font-size: var(--rd-fontsize-5);
        line-height: var(--rd-lineheights-1);
            }

            .rd-my-progress-time-text {
                /* Beschreibung der Zeit */

                .pc-tooltip {
                    /* Tooltip */
                }
            ;
        font-size: var(--rd-fontsize-5);
        color: var(--rd-input-focused);
            }

            ;
        display: flex;
        flex-direction: column-reverse;
        }

        .rd-my-progress-time-seperator {
            /* Trennlinie zwischen Zeitangaben */
        }

        .green-time {
            /* Zeit, die bereits absolviert ist */
        }

        .red-time {
            /* Zeit, die noch offen ist */
        }

        ;
        display: inline-flex;
        margin-bottom: 8px;
        gap: 16px;
        flex-direction: row-reverse;
    }
}

.rd-my-progress-counter {
    /* Counter-Container */

    .rd-my-progress-counter-element {
        display: grid;
        grid-template-areas:
            "TIME PROGRESS TEXT ICON";
        grid-template-columns: 130px auto 70px 24px;
        align-items: center;
        gap: 16px;
        margin-bottom: 8px;
        /* Einzelne Counter-Elemente */

        .rd-my-progress-counter-element-text {
            /* Text des Counter-Elements */
        }

        .rd-my-progress-counter-element-progress {
            /* Fortschrittsanzeige */

            .rd-my-progress-counter-element-progress-bg {
                /* Hintergrund der Fortschrittsanzeige */

                .rd-my-progress-counter-element-progress-bar {
                    /* Fortschrittsbalken */
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                background-color: var(--rd-warning-default);
                }
            ;
                overflow: hidden;
                border-radius: 4px;
                height: 8px;
                position: relative;
                min-width: 120px;
                background-color: var(--rd-input-default);
            }

            .rd-my-progress-counter-element-progress-text {
                /* Text für den Fortschrittsstatus */
            }

            .rd-my-progress-counter-element-progress-icon {
                /* Icon für den Fortschrittsstatus */
            }
        ;

        }
    }

    rd-my-progress-counter>div[data-numbersize="1"] {
        grid-template-columns: 130px auto 70px 24px;
    }

    .rd-my-progress-counter>div[data-numbersize="2"] {
        grid-template-columns: 130px auto 80px 24px;
    }

    .rd-my-progress-counter>div[data-numbersize="3"] {
        grid-template-columns: 130px auto 100px 24px;
    }
}
[data-progress="100"] .rd-my-progress-counter-element-progress-bar {
	background-color: var(--rd-success-default);
}
.rd-my-progress-counter-element-progress-icon::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: var(--rd-error-default);
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-position: 50%;
	-webkit-mask-position: 50%;
	mask-image: url("/src/img/2024/svg/icons/x-circle.svg");
	-webkit-mask-image: url("/src/img/2024/svg/icons/x-circle.svg");
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	vertical-align: middle;
}

[data-progress="100"] .rd-my-progress-counter-element-progress-icon::before {
	background-color: var(--rd-success-default);
	mask-image: url("/src/img/2024/svg/icons/check-circle.svg");
	-webkit-mask-image: url("/src/img/2024/svg/icons/check-circle.svg");
}
.rd-my-progress-counter-element-progress-text {
	font-weight: var(--rd-fontweights-open-sans-1);
	color: var(--rd-font-dark);
	text-align:right;
}
.green-time .rd-my-progress-time-text{
	color: var(--rd-success-default) !important;
}
.red-time .rd-my-progress-time-text{
	color: var(--rd-error-default) !important;
}