.statement-topics {
    display: flex;
    gap: 1em;
}

.statement-topic {
    padding: 1.25em 2em 1.25em 4em;
    font-size: var(--font-size);
    border: 0;
    border-radius: var(--border-radius-btn);
    font-weight: 700;
    text-align: center;
    transition: all ease-in-out .2s;
    display: inline-block;
    text-decoration: none;
    background-color: var(--color-grey-light);
    background-repeat: no-repeat;
    background-position: left 1.25em center;
    cursor: default;
}

.statement-topics:not(.statement-topics-overview) .statement-topic:hover {
    background-color: var(--color-grey);
    cursor: pointer;
}

.statement-topic.topic-early-start {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg id='Gruppe_196' data-name='Gruppe 196' transform='translate(-345 -508)'%3E%3Cg id='Ellipse_21' data-name='Ellipse 21' transform='translate(345 508)' fill='%2300be75' stroke='%2300be75' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='12' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='11' fill='none'/%3E%3C/g%3E%3Cg id='Ellipse_23' data-name='Ellipse 23' transform='translate(346.657 510.355) rotate(-2)' fill='none' stroke='%23fff' stroke-width='2' stroke-dasharray='1 6'%3E%3Ccircle cx='10' cy='10' r='10' stroke='none'/%3E%3Ccircle cx='10' cy='10' r='9' fill='none'/%3E%3C/g%3E%3Ccircle id='Ellipse_22' data-name='Ellipse 22' cx='2' cy='2' r='2' transform='translate(355 518)' fill='%23fff'/%3E%3Cline id='Linie_94' data-name='Linie 94' y1='7' transform='translate(357 513)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2'/%3E%3Cline id='Linie_95' data-name='Linie 95' y2='5' transform='translate(362.5 520) rotate(90)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.statement-topic.topic-higher-revenue {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg id='Gruppe_197' data-name='Gruppe 197' transform='translate(-345 -508)'%3E%3Cg id='Ellipse_21' data-name='Ellipse 21' transform='translate(345 508)' fill='%23deab00' stroke='%23deab00' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='12' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='11' fill='none'/%3E%3C/g%3E%3Cline id='Linie_96' data-name='Linie 96' y2='11' transform='translate(357 514.5)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2'/%3E%3Cline id='Linie_97' data-name='Linie 97' y2='11' transform='translate(362.5 520) rotate(90)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.statement-topic.topic-underspending {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg id='Gruppe_198' data-name='Gruppe 198' transform='translate(-345 -508)'%3E%3Cg id='Ellipse_21' data-name='Ellipse 21' transform='translate(345 508)' fill='%23db0028' stroke='%23db0028' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='12' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='11' fill='none'/%3E%3C/g%3E%3Cline id='Linie_97' data-name='Linie 97' y2='11' transform='translate(362.5 520) rotate(90)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.statement-topic.topic-timeframe {
    background-image: url("data:image/svg+xml,%3Csvg id='Komponente_18_2' data-name='Komponente 18 – 2' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg id='calendar-range'%3E%3Cpath id='Pfad_35' data-name='Pfad 35' d='M17,8a2,2,0,0,1,2-2H29v4H19A2,2,0,0,1,17,8ZM1,12H9a2,2,0,0,1,0,4H1Z' transform='translate(1 6)' fill='%230091a3'/%3E%3Cpath id='Pfad_36' data-name='Pfad 36' d='M7,0A1,1,0,0,1,8,1V2H24V1a1,1,0,1,1,2,0V2h2a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4H4a4,4,0,0,1-4-4V6A4,4,0,0,1,4,2H6V1A1,1,0,0,1,7,0ZM2,8V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V8Z' fill='%230091a3'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.statements {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.statement {
    background-color: #fff;
    box-shadow: 0 7px 15px rgba(0,0,0,.15);
    border-radius: var(--border-radius-btn);
    padding: 2em;
    position: relative;
}

.statement .is-label {
    font-weight: 700;
    margin-bottom: .5em;
}

.statement .statement-topics {
    margin-bottom: 2em;
}

.statement-topics.statement-topics-overview {
    margin-bottom: 2em;
}

.statement .statement-topic {
    opacity: .5;
    position: relative;
}

.statement-topics.statement-topics-overview .statement-topic.checked {
    background-color: var(--color-green-light);
}

.statement-topics.statement-topics-overview .statement-topic.input-error {
    background-color: var(--color-red-light);
}

.statement .statement-topic.input-error,
.statement .statement-topic.checked {
    opacity: 1;
}

.statement .statement-topic.selected {
    display: none;
}

.statement .statement-topic.checked:before {
    display: block;
    content: '';
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    position: absolute;
    top: -5px;
    left: -5px;
    border: 2px solid transparent;
    border-radius: calc(var(--border-radius-btn) + .375em);
    transition: all ease-in-out .3s;
}

.statement .statement-topic.checked:before {
    border-color: var(--color-blue-medium);
}

.add-statement {
    background-color: var(--color-blue-light);
    padding: 2em;
    color: var(--color-blue-medium);
    font-weight: 500;
    border-radius: var(--border-radius-btn);
    cursor: pointer;
    transition: all ease-in-out .15s;
    margin: 2em 0 3em;
    font-family: 'Heldane Display';
    text-align: center;
    font-size: 2em;
    line-height: 1;
}

.add-statement:hover {
    background-color: var(--color-blue-medium);
    color: #fff;
}

.statement-delete {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.414' height='13.414' viewBox='0 0 13.414 13.414'%3E%3Cg id='Gruppe_65' data-name='Gruppe 65' transform='translate(-1648.793 -193.793)'%3E%3Cline id='Linie_61' data-name='Linie 61' x2='12' y2='12' transform='translate(1649.5 194.5)' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cline id='Linie_62' data-name='Linie 62' x2='12' y2='12' transform='translate(1661.5 194.5) rotate(90)' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    border: 2px solid #000;
    cursor: pointer;
    height: 2.5em;
    position: absolute;
    right: 1em;
    top: 1em;
    width: 2.5em;
}

@media (max-width: 991px) {
    .statement-topics.statement-topics-overview {
        overflow-x: scroll;
        padding-bottom: 1em;
        margin-bottom: 1em !important;
    }

    .statement-topics.statement-topics-overview .statement-topic {
        white-space: nowrap;
    }

    .statement {
        padding: 1em;
    }

    .statement .statement-topic {
        flex: 1 0 0;
        text-indent: -9999px;
        background-position: center;
        background-size: 2em;
    }

    .statement-content .is-label {
        width: 85%;
    }
}

@media (min-width: 657px) and (max-width: 991px) {
    .statement .statement-topics {
        margin-top: 2em;
    }
}