.pageelement-buttons.contentbox {
    overflow: unset;
}

.button-item {
    list-style-type: none;
    background-color: var(--white);
    padding: 0.6250rem 1.2500rem;
    margin-bottom: 0.6250rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 20.9375rem;
    min-height: 4.3750rem;
    box-sizing: border-box;
    flex-direction: row;
    border-radius: 0.6250rem 0.6250rem 0 0.6250rem;
}

.button-item.pink {
    border: 0.1875rem solid var(--pink);
}

.button-item.pink .text,
.button-item.pink .button-icon i {
    color: var(--pink);
}

.button-item.purple {
    border: 0.1875rem solid var(--purple);
}

.button-item.purple .text,
.button-item.purple .button-icon i {
    color: var(--purple);
}

.button-item.darkblue {
    border: 0.1875rem solid var(--darkblue);
}

.button-item.darkblue .text,
.button-item.darkblue .button-icon i {
    color: var(--darkblue);
}

.button-item:focus-visible {
    outline-offset: 0.1875rem;
}

.button-item-container {
    width: 100%;
    max-width: 20.9375rem;
}

.button-item .button-icon i {
    font-size: 1.8750rem;
}

.button-item .button-icon-left {
    margin-right: 1.2500rem;
}

.button-item .button-icon-right {
    margin-left: 1.2500rem;
}

.button-item .text {
    font-size: 1.5000rem;
    font-weight: 500;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
    text-align: center;
    line-height: 1.1;
}

.button-item.pink:hover {
    background-color: var(--pink);
}

.button-item.purple:hover {
    background-color: var(--purple);
}

.button-item.darkblue:hover {
    background-color: var(--darkblue);
}

.button-item:hover .text,
.button-item:hover .button.icon i {
    color: var(--white);
}

.button-item:hover .text,
.button-item:hover .button-icon i {
    color: var(--white);
}

@media only screen and (max-width: 28.89rem) {
    .button-item .text {
        font-size: 1.2500rem;
    }
}