.signings {
    padding: calc(var(--content-spacing) * 2) 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.signing {
    --spacing: 20px;
    /*display: grid;*/
    margin: 0 0 calc(var(--content-spacing) * 2);
    gap: 0 var(--spacing);
    grid-template-columns: auto 1fr;
    grid-template-areas: 'amount  title' 'content content';
}

@media (min-width: 768px) {
    .signing {
        --spacing: 30px;
    }
}

@media (min-width: 1024px) {
    .signing {
        --spacing: var(--content-spacing);
    }
}

.signing__amount {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 19px;
    width: 38px;
    height: 38px;
    /*display: flex;*/
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--font-weight-bold);
    margin: 8px 0;
    grid-area: amount;
}

@media (min-width: 768px) {
    .signing__amount {
        width: 46px;
        height: 46px;
        /*margin: 18px 0 30px;*/
        margin: 18px 30px 20px 0;
        font-size: 24px;
    }
}

.signing__amount--none {
    background-color: rgb(152, 152, 152);
}

.signing__title {
    margin: 0;
    color: var(--color-black);
    border-left: 1px solid rgb(217, 217, 217);
    padding: 0 0 0 var(--spacing);
    grid-area: title;
    /*display: flex;*/
    display: inline-flex;
    align-items: center;
    font-size: 20px;
    font-weight: var(--font-weight-bold);
}

@media (min-width: 1024px) {
    .signing__title {
        font-size: 32px;
    }
}

.signing__title-wrapper {
    padding: 15px 0 20px;
}

@media (min-width: 768px) {
    .signing__title-wrapper {
        padding: 15px 0 25px;
    }
}

.signing__box {
    --spacing: 12px;
    min-height: 230px;
    background-color: var(--color-white);
    padding: 40px calc(2 * var(--spacing));
    border-top: 2px solid rgb(217, 217, 217);
    grid-area: content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

@media (min-width: 768px) {
    .signing__box {
        --spacing: 20px;
    }
}

@media (min-width: 1024px) {
    .signing__box {
        --spacing: 30px;
    }
}

.signing .button {
    width: 100%;
}

@media (min-width: 768px) {
    .signing .button {
        width: auto;
    }
}

.signatures__sign-all {
    margin-top: 30px;
}

@media (min-width: 768px) {
    .signatures__sign-all {
        width: auto;
        margin-left: auto;
    }
}

.signatures {
    margin: -30px 0;
    list-style: none;
    flex: 1;
    background-color: var(--color-white);
}

@media (min-width: 1024px) {
    .signatures {
        padding: 15px 0;
    }
}

.signatures__signature {
    position: relative;
    margin: 35px 0 40px;
    padding: 0;
    display: grid;
    gap: 35px 26px;
    grid-template-columns: 37px 1fr;
    grid-template-areas: 'icon title' 'data data';
}

    .signatures__signature:not(:first-child) {
        padding-top: 35px;
    }

        .signatures__signature:not(:first-child)::before {
            content: '';
            height: 0;
            width: calc(100% + (4 * var(--spacing)));
            position: absolute;
            left: calc(var(--spacing) * -1 * 2);
            top: 0;
            display: block;
            border-top: 2px dashed var(--color-ruler);
        }

.signatures__signature--signed {
    grid-template-areas: 'icon title' 'icon data';
}

.signatures__signature--no-sign {
    gap: 0 26px;
}

@media (min-width: 768px) {
    .signatures__signature {
        gap: 0 var(--spacing);
        grid-template-columns: 50px 1fr 1fr;
        grid-template-areas: 'icon title data';
    }

        .signatures__signature:not(:first-child) {
            padding-top: 40px;
        }
}

.signatures__icon {
    grid-area: icon;
    align-self: flex-start;
    margin: 0;
}

.signatures__title {
    grid-area: title;
    align-self: center;
}

.signatures__headline {
    margin: 0;
    color: var(--color-black);
    font-weight: var(--font-weight-bold);
}

@media (min-width: 768px) {
    .signatures__headline {
        margin: 0 0 3px;
    }
}

.signatures__created {
    grid-area: created;
    margin: 0;
    font-size: 12px;
}

.signatures__data {
    grid-area: data;
    align-self: center;
    display: flex;
    flex-direction: column-reverse;
}

.signatures__signature > .signatures__data--signed {
    display: inherit !important;
}

.signatures__data--signed {
    padding-top: 20px;
    border-top: 2px dashed var(--color-ruler);
    display: contents !important;
}

@media (min-width: 768px) {
    .signatures__data {
        display: block;
        text-align: right;
        border: 0;
        padding: 0;
    }
}

.signatures__link {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
}

@media (min-width: 768px) {
    .signatures__link {
        font-size: 18px;
    }
}

.signatures__updated {
    margin: 0;
    font-size: 12px;
}

.signing__empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    text-align: center;
}

.signing__empty-left {
    margin: 0 0 15px;
    flex: 1 0 auto;
}

.signing__empty-image {
    width: 72px;
    margin: 0;
}

.signing__empty-right {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
}

    .signing__empty-right::before {
        background-image: url('/gfx/icons/alert-small.svg');
        width: 37px;
        height: 37px;
        margin: 35px auto 20px;
    }

    .signing__empty-right::after {
        content: '';
        height: 0;
        width: calc(100% + (4 * var(--spacing)));
        position: absolute;
        left: calc(var(--spacing) * -1 * 2);
        top: 0;
        display: block;
        border-top: 1px solid var(--color-ruler);
    }

@media (min-width: 768px) {
    .signing__empty {
        font-size: 18px;
    }

        .signing__empty .button {
            width: 100%;
        }

    .signing__empty-image {
        width: 105px;
    }

    .signing__empty-right::before {
        width: 47px;
        height: 47px;
        margin: 40px 0 20px;
    }

    .signing__empty-right {
        text-align: left;
    }
}

@media (min-width: 1024px) {
    .signing__empty {
        flex-direction: row;
    }

        .signing__empty .button {
            width: auto;
        }

    .signing__empty-image {
        width: 136px;
    }

    .signing__empty-right {
        width: 35%;
        margin-left: 120px;
    }

        .signing__empty-right::after {
            border-top: 0;
            height: calc(100% + 80px);
            width: 0;
            top: -40px;
            border-left: 1px solid var(--color-ruler);
        }
}

/* Popup */
.signing-popup {
    list-style: none;
    margin: 20px 0 0;
    font-size: 15px;
}

.signing-popup__item {
    padding: 30px 0 30px 60px;
    position: relative;
}

    .signing-popup__item:not(:first-child) {
        border-top: 1px solid var(--color-ruler);
    }

    .signing-popup__item::before {
        content: '';
        display: block;
        background: center / cover no-repeat;
        height: 40px;
        width: 40px;
        position: absolute;
        left: 0;
        top: 30px;
    }

.signing-popup__item--checked::before {
    background-image: url('/gfx/icons/tjeckmark.svg');
}

.signing-popup__item--alert::before {
    background-image: url('/gfx/icons/alert.svg');
}

.signing-popup__headline {
    margin: 0 0 5px;
}

.signing-popup__text {
    margin: 0;
}

@media (min-width: 768px) {
    .signing-popup__item {
        padding: 40px 0 40px 100px;
        position: relative;
    }

        .signing-popup__item::before {
            height: 60px;
            width: 60px;
            top: 40px;
        }
}

.signing-popup__closer {
    text-align: right;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    margin-top: 50px;
}