#step-container {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    margin-top: 60px;
    margin-bottom: 120px;
}

.step-header {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.category-icon {
    width: 40px;
    height: 40px;
}

.step-title {
    color: var(--color-navy);
    font-weight: bold;
    flex-grow: 0;
    font-size: 35px !important;
    font-family: Roboto;
}

.step-subtitle {
    width: 100%;
    color: #021541;
    font-size: 24px !important;
}

.side-image {
    position: absolute;
    width: calc((100% - 500px) / 2);
    right: 0;
    display: flex;
    justify-content: center;
    top: 60px;
}

@media (max-width: 1199px) {
    .side-image {
        max-width: 500px;
        flex-grow: 1;
        width: initial;
        position: initial;
    }
}

#email-valid-icon {
    position: absolute;
    right: 20px;
}

.parrainage-container, .rib-holder {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.active-parrainage, .active-rib-holder {
    border-radius: 20px;
    background-color: #EEF6F9;
    padding: 20px;
}

.ayant-droit-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 20px;
    background-color: #EEF6F9;
    padding: 20px;
}

.ayant-droit-header {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

.ayant-droit-title {
    color: var(--color-navy);
    font-family: Roboto;
    font-weight: bold;
    font-size: 25px !important;
    margin: 0;
}

.ayant-droit-content {
    row-gap: 20px;
    margin-left: -10px;
    margin-right: -10px;
}

.ayant-droit-content .col-item {
    padding-left: 10px;
    padding-right: 10px;
}

.ayant-droit-buttons {
    display: flex;
    gap: 20px;
}

.ayant-droit-buttons .ayant-droit-cancel-btn {
    background-color: var(--color-white);
    border-radius: 10px;
    border: solid 1px rgba(04, 15, 46, 0.1);
    padding: 10px 0;
    color: var(--color-navy);
    font-weight: 600;
    flex: 1;
}

.ayant-droit-buttons .ayant-droit-save-btn {
    background-color: var(--color-navy);
    border-radius: 10px;
    border: solid 1px rgba(04, 15, 46, 0.1);
    padding: 10px 0;
    color: var(--color-white);
    font-weight: bold;
    flex: 1;
}

.ayant-droit-card {
    border: solid 1px #3B7EA1;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ayant-droit-name {
    color: #3B7EA1;
    font-family: Roboto;
    font-weight: 600;
}

.ayant-droit-card-buttons {
    display: flex;
    gap: 15px;
}

.edit-ayant-droit {
    display: flex;
    gap: 5px;
    align-items: center;
    background-color: transparent;
    border: none;
    padding: 0;
}

.edit-ayant-droit > p {
    font-family: Roboto;
    font-size: 14px !important;
    color: #000000;
}

.delete-ayant-droit {
    display: flex;
    gap: 5px;
    align-items: center;
    background-color: transparent;
    border: none;
    padding: 0;
}

.delete-ayant-droit > p {
    font-family: Roboto;
    font-size: 14px !important;
    color: #DF0000;
    text-decoration: underline;
}

#add-child {
    background-color: transparent;
    border: none;
    display: flex;
    gap: 5px;
    align-items: center;
}

#add-child > p {
    font-size: 17px !important;
    font-family: Roboto;
    color: #313131;
}

#childs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pj-list-infos {
    margin: 0;
    color: var(--color-navy);
    font-size: 18px !important;
    margin-top: 30px;
}

.rib-holder-content {
    row-gap: 20px;
}

.rib-owner-not-holder, .rib-owner-not-mentioned {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rib-owner-address-title {
    color: var(--color-navy);
    font-family: Roboto;
    font-weight: bold;
    font-size: 25px !important;
    margin: 0;
}

.rib-owner-address-content {
    row-gap: 20px;
}

.rib-refund-ayant-droit-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 20px;
    background-color: #EEF6F9;
    padding: 20px;
}

.rib-refund-ayant-droit-name {
    color: var(--color-navy);
    font-size: 18px !important;
    font-family: Roboto;
    font-weight: bold;
}

.rib-refund-ayant-droit-content {
    row-gap: 20px;
}

.mandat-resiliation-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 20px;
    background-color: #EEF6F9;
    padding: 20px;
}

.mandat-resiliation-header {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

.mandat-resiliation-title {
    color: var(--color-navy);
    font-family: Roboto;
    font-weight: bold;
    font-size: 26px !important;
    margin: 0;
}

.mandat-resiliation-address-title {
    color: var(--color-navy);
    font-family: Roboto;
    font-weight: bold;
    font-size: 22px !important;
    margin: 0;
}

.mandat-resiliation-infos-title {
    color: var(--color-navy);
    font-family: Roboto;
    font-weight: bold;
    font-size: 25px !important;
    margin: 0;
}

.mandat-resiliation-content {
    row-gap: 20px;
}

.mandat-resiliation-buttons {
    display: flex;
    gap: 20px;
}

.mandat-resiliation-buttons .mandat-resiliation-cancel-btn {
    background-color: var(--color-white);
    border-radius: 10px;
    border: solid 1px rgba(04, 15, 46, 0.1);
    padding: 10px 0;
    color: var(--color-navy);
    font-weight: 600;
    flex: 1;
}

.mandat-resiliation-buttons .mandat-resiliation-save-btn {
    background-color: var(--color-navy);
    border-radius: 10px;
    border: solid 1px rgba(04, 15, 46, 0.1);
    padding: 10px 0;
    color: var(--color-white);
    font-weight: bold;
    flex: 1;
}

.mandat-resiliation-card {
    border: solid 1px #3B7EA1;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mandat-resiliation-name {
    color: #3B7EA1;
    font-family: Roboto;
    font-weight: 600;
}

.mandat-resiliation-card-buttons {
    display: flex;
    gap: 15px;
}

.edit-mandat-resiliation {
    display: flex;
    gap: 5px;
    align-items: center;
    background-color: transparent;
    border: none;
    padding: 0;
}

.edit-mandat-resiliation > p {
    font-family: Roboto;
    font-size: 14px !important;
    color: #000000;
}

.delete-mandat-resiliation {
    display: flex;
    gap: 5px;
    align-items: center;
    background-color: transparent;
    border: none;
    padding: 0;
}

.delete-mandat-resiliation > p {
    font-family: Roboto;
    font-size: 14px !important;
    color: #DF0000;
    text-decoration: underline;
}

.value-style {
    color: var(--color-navy);
    font-size: 17px !important;
}

.mutual-cancel-warning {
    color: var(--color-navy);
    font-weight: bold;
    font-family: Roboto;
    font-size: 18px !important;
    line-height: normal;
}

.mutual-cancel-text {
    color: #45464F;
    line-height: normal;
}

.recap-text {
    color: var(--color-navy);
    font-family: Roboto;
    font-weight: 600;
    font-size: 18px !important;
}

.declaration-container .form-check {
    align-items: start;
}

.recap-warning {
    font-size: 18px !important;
    font-weight: 600;
    color: #45464F;
    margin-bottom: 5px;
}

.recap-warning-text {
    font-size: 15px !important;
    color: #45464F;
}