.sucessores-group-wrapper {
    margin: 25px;
    --header-bg-color: #3B6CB9;
    --header-text-color: #fff;
}

.sucessores-group {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 2px 2px 10px #0000000F;
    border-radius: 10px;
    margin: 0 0 10px 0;
}

.sucessores-group-wrapper > .sucessores-group > .group-header {
    background: var(--header-bg-color);
    color: var(--header-text-color);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 120px auto 50px;
}

    .sucessores-group-wrapper > .sucessores-group > .group-header > img {
        height: 100px;
        width: 100px;
        padding: 10px;
        border-radius: 50%;
    }

    .sucessores-group-wrapper > .sucessores-group > .group-header > .title {
        padding: 10px 0;
    }

    .sucessores-group-wrapper > .sucessores-group > .group-header > div > h2 {
        padding: 0 !important;
    }

    .sucessores-group-wrapper > .sucessores-group > .group-header > div:last-child{
        text-align: center;
        cursor: pointer;
    }

        .sucessores-group-wrapper > .sucessores-group > .group-header > div:last-child > i {
            position: relative;
            top: 100%;
            transform: translateY(-150%);
        }

.button-add {
    width: 175px;
    height: 35px;
    padding: 5px;
    cursor: pointer;
    position: relative;
    left: 100%;
    transform: translateX(-110%);
    text-align: end;
    background: var(--header-bg-color);
    color: var(--header-text-color);
    margin: 10px;
    border: solid 1px transparent;
    border-radius: 5px;
}

    .button-add > i {
        vertical-align: middle;
    }


    .button-add > span {
        vertical-align: middle;
        padding: 0 10px;
    }

/*Cards*/

.cpcit-sucessores-cards-wrapper {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    --color-card-title: #3B6CB9;
    --color-card-inner-grid-bg: #fff;
    --color-card-inner-grid-color: #3B6CB9;
    --color-button-bg: #3B6CB9;
    --color-button-color: #fff;
}

.cpcit-sucessores-card {
    max-width: 250px;
    min-width: 200px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 2px 2px 10px #0000000F;
    border-radius: 24px;
    opacity: 1;
    padding: 20px;
    text-align: center;
}

    .cpcit-sucessores-card > div.button-delete {
        width: 30px;
        height: 30px;
        text-align: center;
        position: relative;
        left: 100%;
        transform: translateX(-100%);
        color: var(--color-button-color);
        background: var(--color-button-bg);
        border: 1px solid transparent;
        border-radius: 50%;
        cursor: pointer;
    }

        .cpcit-sucessores-card > div.button-delete > i {
            vertical-align: middle;
        }

    .cpcit-sucessores-card > img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }

    .cpcit-sucessores-card > h3 {
        color: var(--color-card-title);
        font-size: 1.25rem;
        font-weight: bold;
        margin-bottom: 1rem;
    }

    .cpcit-sucessores-card > .inner-grid {
        display: grid;
        grid-template-columns: auto;
        text-align: left;
        background: var(--color-card-inner-grid-bg);
        border-radius: 10px;
        padding: 10px;
        gap: 0.2rem;
        box-shadow: 2px 2px 10px #0000000F;
    }

        .cpcit-sucessores-card > .inner-grid > div {
            font-size: 1rem;
            color: var(--color-card-inner-grid-color);
        }

            .cpcit-sucessores-card > .inner-grid > div[data-type="title"] {
                font-size: 1.15rem;
                font-weight: bold;
            }

    .cpcit-sucessores-card > .button-atividades {
        margin: 10px 0 0 0;
        text-align: end;
        color: var(--color-card-inner-grid-color);
        text-decoration: underline;
        cursor: pointer;
        padding: 0 5px;
    }

        .cpcit-sucessores-card > .button-atividades > i {
            margin: 0 0 0 5px;
            vertical-align: middle;
        }