.actietekst {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
    width: 100%;
    background: #ebebec;
    border-radius: 7px;
}

.actietekst.actietekst-no-top-bottom-padding {
    padding-top: 0px;
    padding-bottom: 0px;
}

.actietekst.top:before {
    content: " ";
    position: absolute;
    right: calc(50% - 20px);
    margin-top: -29px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ebebec;
}

.actietekst.actietekst-no-top-bottom-padding.top:before {
    margin-top: -19px;
}

.actietekst.bottom:after {
    content: " ";
    position: absolute;
    right: calc(50% - 20px);
    margin-top: 10px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #ebebec;
}

    .step-body-container .actietekst,
    .actietekst.background-white {
        background: #fff;
    }

.actietekst.top {
    margin-top: 25px;
}

.actietekst.bottom {
    margin-bottom: 25px;
}

.step-body-container .actietekst.top:before,
.actietekst.background-white.top:before {
    border-bottom-color: #fff;
}

.step-body-container .actietekst.bottom:after,
.actietekst.background-white.bottom:after {
    border-top-color: #fff;
}

.actietekst.background-mintgroen.top:before {
    border-bottom-color: #5dc4bf;
}

.actietekst.background-orange.top:before {
    border-bottom-color: #f47929;
}

.actietekst.background-yellow.top:before {
    border-bottom-color: #ffc222;
}

.actietekst.background-mintgroen.bottom:after {
    border-top-color: #5dc4bf;
}

.actietekst.background-orange.bottom:after {
    border-top-color: #f47929;
}

.actietekst.background-yellow.bottom:after {
    border-top-color: #ffc222;
}

.actietekst.groen {
    background-color: #5dc4bf;
    color: #ffffff;
}

.actietekst.licht-groen {
    background-color: #89d0c8;
}

.actietekst.top.groen:before {
    border-bottom-color: #5dc4bf;
}

@media (min-width: 769px) {
    .actietekst.right:before,
    .actietekst.right:after {
        right: calc(10%);
    }

    .actietekst.left:before,
    .actietekst.left:after {
        left: calc(10%);
        right: inherit;
    }
}

/* Actietekst blokje met deelnemerbonus (met icoon in cirkel eraan vast) */
.bonus-actieblok {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .bonus-actieblok {
        justify-content: center;
    }
}

.bonus-actieblok .img-actietekst-circle {
    border: 2px solid #5dc4bf;
    border-radius: 50%;
    background-color: #ffffff;
    margin-left: -15px;
}

.bonus-actieblok .img-actietekst-circle .img-actietekst {
        width: 40px;
        padding: 6px;
}