#step1 .type-annonce-categorie {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

#step1 .type-annonce-categorie .cat .first-type {
    background: rgb(173 201 252);
    padding: 16px;
    color: #333333;
    font-size: 17px;
    border-radius: 10px;
    opacity: 1;
}

#step1 .type-annonce-categorie .cat .first-sous-type {
    margin-top: 10px;
}

#step1 .type-annonce-categorie .cat .first-sous-type .item-categorie {
    padding: 5px;
    padding-left: 14px;
    font-size: 16px;
    color: #333333;
    background-color: rgb(173 201 252);
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
}

#step2 .modele-type {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

#step2 .modele-type>div {
    background: #e5e5e5;
    padding: 26px;
    color: #333333;
    border: 1px solid;
    width: 45%;
    cursor: pointer;
}

#step2 .modele-type>div.selected,
.model-annonce .modele-type>div.selected {
    border: 1px solid #5e00ffb0;
}

.link-create_annonce .content-annonce-step {
    display: flex;
    gap: 10px;
}

.link-create_annonce .content-annonce-step .link-info {
    width: 80%;
}

.link-create_annonce .content-annonce-step .prix_annonce {
    width: 20%;
    background: #F0F0F0;
    border: 1px solid #808080;
    border-radius: 11px;
    padding: 40px;
    padding-bottom: 60px;
    text-align: center;
}

.btn-next-prev {
    margin-top: 20px;
}

.btn-next-prev button {
    background: blue;
    border: none;
    color: #fff;
    padding: 3px 30px;
    border-radius: 5px;
}

.btn-next-prev button:last-child {
    float: right;
}

#step1 .type-annonce-categorie .cat .first-sous-type .item-categorie.active {
    background-color: #30e32585;
}

#step3 form div.field-form {
    display: flex;
    margin-bottom: 30px;

}

#step3 form div.field-form label,
#step3 form div.field-form input {
    width: 50%;
}

#step3 form div.field-form textarea {
    width: 100%;
}

/***/
form.form-petit-annonce-create-edit #edit-field-type-de-l-annonce-wrapper,
form.form-petit-annonce-create-edit #edit-field-modele-content-wrapper,
form.form-petit-annonce-create-edit #edit-field-modele-wrapper,
form.form-petit-annonce-create-edit #edit-field-brouillon-wrapper {
    display: none;
}

#edit-field-nom-du-defunt-wrapper .form-item-field-nom-du-defunt-0-value,
#edit-field-lieu-de-deces-pa-wrapper .form-item,
#edit-field-titre-du-communique-wrapper .form-item,
#edit-field-personne-souhaitant-les-co-wrapper .form-item,
#edit-field-date-du-deces-wrapper,
#edit-field-noms-des-clans-wrapper .form-item,
#edit-field-nom-des-villes-wrapper .form-item,
#edit-field-nom-des-villages-wrapper .form-item,
#edit-field-nom-du-chef-de-famille-wrapper .form-item,
#edit-field-circonstances-du-deces-wrapper .form-item,
#edit-field-lien-de-parente-wrapper .form-item,
#edit-field-noms-des-membres-de-la-fam-wrapper .form-item,
#edit-field-nom-du-corps-d-armee-wrapper .form-item,
#edit-field-nom-le-grade-wrapper .form-item,
#edit-field-nom-de-l-inhumation-wrapper .form-item,
#edit-field-nom-de-la-communaute-wrapper .form-item,
#edit-field-age-wrapper .form-item,
#edit-field-fonction-wrapper .form-item,
#edit-field-programme-wrapper .form-item,
#edit-field-annonce-du-programme-wrapper .form-item,
#edit-field-nom-de-veuve-wrapper .form-item,
#edit-field-nom-de-la-personne-qui-adr-wrapper .form-item {
    display: flex;
    gap: 30px;
    align-items: baseline;
}

#edit-field-nom-du-defunt-wrapper .form-item-field-nom-du-defunt-0-value label,
#edit-field-lieu-de-deces-pa-wrapper .form-item label,
#edit-field-titre-du-communique-wrapper .form-item label,
#edit-field-personne-souhaitant-les-co-wrapper .form-item label,
#edit-field-nom-du-defunt-wrapper .form-item-field-nom-du-defunt-0-value input,
#edit-field-lieu-de-deces-pa-wrapper .form-item input,
#edit-field-titre-du-communique-wrapper .form-item input,
#edit-field-personne-souhaitant-les-co-wrapper .form-item input,
#edit-field-noms-des-clans-wrapper .form-item input,
#edit-field-nom-des-villes-wrapper .form-item input,
#edit-field-nom-des-villages-wrapper .form-item input,
#edit-field-nom-du-chef-de-famille-wrapper .form-item input,
#edit-field-circonstances-du-deces-wrapper .form-item input,
#edit-field-lien-de-parente-wrapper .form-item input,
#edit-field-noms-des-membres-de-la-fam-wrapper .form-item input,
#edit-field-nom-du-corps-d-armee-wrapper .form-item input,
#edit-field-nom-le-grade-wrapper .form-item input,
#edit-field-nom-de-l-inhumation-wrapper .form-item input,
#edit-field-nom-de-la-communaute-wrapper .form-item input,
#edit-field-age-wrapper .form-item input,
#edit-field-fonction-wrapper .form-item input,
#edit-field-programme-wrapper .form-item input,
#edit-field-annonce-du-programme-wrapper .form-item input,
#edit-field-nom-de-veuve-wrapper .form-item input,
#edit-field-nom-de-la-personne-qui-adr-wrapper .form-item input,
#edit-field-noms-des-clans-wrapper .form-item label,
#edit-field-nom-des-villes-wrapper .form-item label,
#edit-field-nom-des-villages-wrapper .form-item label,
#edit-field-nom-du-chef-de-famille-wrapper .form-item label,
#edit-field-circonstances-du-deces-wrapper .form-item label,
#edit-field-lien-de-parente-wrapper .form-item label,
#edit-field-noms-des-membres-de-la-fam-wrapper .form-item label,
#edit-field-nom-du-corps-d-armee-wrapper .form-item label,
#edit-field-nom-le-grade-wrapper .form-item label,
#edit-field-nom-de-l-inhumation-wrapper .form-item label,
#edit-field-nom-de-la-communaute-wrapper .form-item label,
#edit-field-age-wrapper .form-item label,
#edit-field-fonction-wrapper .form-item label,
#edit-field-programme-wrapper .form-item label,
#edit-field-annonce-du-programme-wrapper .form-item label,
#edit-field-nom-de-veuve-wrapper .form-item label,
#edit-field-nom-de-la-personne-qui-adr-wrapper .form-item label,
#edit-field-date-du-deces-wrapper>div,
#edit-field-date-du-deces-wrapper h4 {
    width: 50%;
}

#edit-field-nom-du-defunt-wrapper,
#edit-field-lieu-de-deces-pa-wrapper,
#edit-field-titre-du-communique-wrapper,
#edit-field-personne-souhaitant-les-co-wrapper,
#edit-field-noms-des-clans-wrapper,
#edit-field-nom-des-villes-wrapper,
#edit-field-nom-des-villages-wrapper,
#edit-field-nom-du-chef-de-famille-wrapper,
#edit-field-circonstances-du-deces-wrapper,
#edit-field-lien-de-parente-wrapper,
#edit-field-noms-des-membres-de-la-fam-wrapper,
#edit-field-nom-du-corps-d-armee-wrapper,
#edit-field-nom-le-grade-wrapper,
#edit-field-nom-de-l-inhumation-wrapper,
#edit-field-nom-de-la-communaute-wrapper,
#edit-field-age-wrapper,
#edit-field-fonction-wrapper,
#edit-field-programme-wrapper,
#edit-field-annonce-du-programme-wrapper,
#edit-field-nom-de-veuve-wrapper,
#edit-field-nom-de-la-personne-qui-adr-wrapper,
#edit-field-date-du-deces-wrapper {
    margin-bottom: 30px;
}

#edit-field-text-model-wrapper textarea {
    width: 100%;
}

.btn-next-prev {
    margin-bottom: 50px;
}

#edit-field-date-du-deces-wrapper h4 {
    font-size: inherit;
    font-weight: bold;
    color: #666666;
}

#block-create-annonceblock .type-annonce .categorie.active,
#block-create-annonceblock .type-annonce .sous-categorie.active,
#block-create-annonceblock .type-annonce .model-annonce.active{
    background-color: #FFD2D4;
}
#block-create-annonceblock .type-annonce .categorie:hover,
#block-create-annonceblock .type-annonce .sous-categorie:hover,
#block-create-annonceblock .type-annonce .categorie label:hover,
#block-create-annonceblock .type-annonce .sous-categorie label:hover,
#block-create-annonceblock .type-annonce .model-annonce:hover{
    cursor: pointer;
}
/* style by Bouth */

.container {
    width: 95% !important;
    max-width: 1400px;
}

#block-create-annonceblock .parent-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: solid 1px #EEEFF1;
    padding: 20px 50px 20px 0;
}

#block-create-annonceblock .titre-step {
    font-size: 20px;
    line-height: 27.24px;
    font-weight: 700;
    color: #000;
}

#block-create-annonceblock .multi-step-form {
    display: flex;
    align-items: center;
    gap: 5px;
}

#block-create-annonceblock .multi-step-form .step {
    font-size: 14px;
    line-height: 19.07px;
    font-weight: 600;
    color: #E5E7EA;
    display: flex;
    align-items: center;
    padding: 5px 20px 5px 3px;
    position: relative;
}

#block-create-annonceblock .multi-step-form .stepper-line {
    position: relative;
    width: 35px;
    border-bottom: 2px solid #E5E7EA;
}

#block-create-annonceblock .parent-step .multi-step-form .step .num-step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #E5E7EA;
    color: #fff;
    font-size: 20px;
    line-height: 18.24px;
    font-weight: 700;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#block-create-annonceblock .parent-step .multi-step-form .step.active .num-step {
    background-color: #C3070E;
}

#block-create-annonceblock .parent-step .multi-step-form .step.active {
    color: #C3070E;
    border-radius: 32px;
    background-color: #FFD2D4;
}

#block-create-annonceblock .annonce-type-label {
    /* padding-left: 20%; */
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 700;
    margin: 11px 0;
    color: #000;
}

#block-create-annonceblock .type-annonce {
    /* padding-left: 20%; */
    border-top: solid 1px #EEEFF1;
}

#block-create-annonceblock .type-annonce .row {
    margin: 0;
}

#block-create-annonceblock .type-annonce .col-md-4 {
    border-right: solid 1px #EEEFF1;
    padding: 0;
}

#block-create-annonceblock .type-annonce .categorie-label {
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 400;
    color: #000;
    padding: 5px 0;
    border-bottom: solid 1px #EEEFF1;
}

#block-create-annonceblock .type-annonce .col-md-4:not(:first-child) .categorie-label {
    padding-left: 10px;
}

#block-create-annonceblock .type-annonce .col-md-4 .desc {
    font-size: 12px;
    line-height: 16.34px;
    font-weight: 400;
    color: #BEBEBE;
    margin: 5px 0;
}

#block-create-annonceblock .type-annonce .col-md-4:not(:last-child) .desc {
    padding-right: 10px;
}

#block-create-annonceblock .type-annonce .col-md-4:not(:first-child) .desc {
    padding-left: 10px;
}

#block-create-annonceblock .type-annonce .col-md-4 label {
    font-size: 16px;
    line-height: 14px;
    font-weight: 400;
    color: #000;
    margin: 15px 0;
}

#block-create-annonceblock .type-annonce .col-md-4 .item-categorie.active,
#block-create-annonceblock .type-annonce .col-md-4 .sous-categorie-item.active {
    background-color: #D9D9D940;
}

#block-create-annonceblock .type-annonce .col-md-4 .item-categorie.active label,
#block-create-annonceblock .type-annonce .col-md-4 .sous-categorie-item.active label {
    color: #C3070E;
}

#block-create-annonceblock .type-annonce .col-md-4 .item-categorie.active input,
#block-create-annonceblock .type-annonce .col-md-4 .sous-categorie-item.active input {
    accent-color: #C3070E;
}

#block-create-annonceblock .type-annonce .col-md-4 .sous-categorie .sous-categorie-item {
    padding-left: 10px;
}

#block-create-annonceblock .type-annonce .col-md-4 .modele-type {
    height: 350px;
    overflow: auto;
}

#block-create-annonceblock .type-annonce .col-md-4 .modele-type .choix_modele {
    margin-left: 10px;
    padding: 10px;
    background-color: #D9D9D9;
    color: #000;
    margin-bottom: 10px;
}

#block-create-annonceblock .type-annonce .col-md-4 .modele-type .choix_modele:hover {
    cursor: pointer;
}

#block-create-annonceblock .type-annonce .col-md-4 .modele-type .choix_modele.selected {
    border: solid 1px #C3070E;
}

#block-create-annonceblock .type-annonce .col-md-4 .modele-type .titre-modele {
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 600;
    margin-bottom: 5px;
}

#block-create-annonceblock .type-annonce .col-md-4 .modele-type .text-modele {
    font-size: 12px;
    line-height: 16.34px;
    font-weight: 400;
}

#block-create-annonceblock .type-annonce .btn-next-step {
    display: flex;
    align-items: center;
    justify-content: end;
}

#block-create-annonceblock .type-annonce .button {
    border-radius: 32px;
    background-color: #BC301F;
    border: none;
    color: #fff;
    padding: 10px 58px;
}
#block-create-annonceblock .type-annonce .button.disabled{
    background-color: #e3dfde;
}
form#node-petite-annonce-form.form-petit-annonce-create-edit > div.detail-annonce {
    font-size: 18px;
    line-height: 21.79px;
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
}

#block-gavias-great-content form.form-petit-annonce-create-edit label,
form.form-petit-annonce-create-edit #edit-field-image-petit-annonce-wrapper summary,
#block-gavias-great-content form.form-petit-annonce-create-edit .field--type-datetime h4 {
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 700;
    color: #000;
}

#block-gavias-great-content form.form-petit-annonce-create-edit input,
form.form-petit-annonce-create-edit #edit-field-date-du-deces-0-value-date {
    width: 100% !important;
    border: solid 2px #F2F2F2;
}

#block-gavias-great-content form.form-petit-annonce-create-edit input::placeholder {
    color: #BDBDBD;
}

#block-gavias-great-content .btn-next-prev {
    display: flex;
    justify-content: end;
    align-items: center;
}

form.form-petit-annonce-create-edit #edit-field-date-du-deces-0-value {
    width: 100% !important;
}

#block-gavias-great-content .btn-next-prev .btn-navigate-form-step-4-prev {
    /*border-radius: 32px;*/
    /*color: #BDBDBD;*/
    /*border: none;*/
    /*background-color: unset;*/
    /*padding: 10px 58px;*/
    /*font-size: 16px;*/
    /*line-height: 21.79px;*/
    /*font-weight: 600 !important;*/
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 600 !important;
    border-radius: 32px;
    background-color: #ffced3;
    border: none;
    color: #fff;
    padding: 10px 58px;
    margin-right: 10px;
}

#block-gavias-great-content .btn-next-prev .btn-navigate-form-step-4-next {
    border-radius: 32px;
    background-color: #BC301F;
    border: none;
    color: #fff;
    padding: 10px 58px;
}

.form-petit-annonce-create-edit #edit-field-image-petit-annonce-ajax-wrapper summary {
    display: none;
}

.form-petit-annonce-create-edit #edit-field-image-petit-annonce-ajax-wrapper label {
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 700;
    color: #000;
}

#block-gavias-great-content .form-petit-annonce-create-edit fieldset legend span {
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 700;
    color: #000;
}

#block-gavias-great-content .form-petit-annonce-create-edit fieldset .fieldset-wrapper h4 {
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 400;
    color: #000;
}

#block-gavias-great-content form.form-petit-annonce-create-edit input {
    width: 40%;
    border: solid 2px #F2F2F2;
}

#block-gavias-great-content form.form-petit-annonce-create-edit .field--type-daterange input {
    width: 100%;
}

#block-gavias-great-content form.form-petit-annonce-create-edit .field--type-daterange label {
    font-weight: 600 !important;
}

#block-gavias-great-content form.form-petit-annonce-create-edit input::placeholder {
    color: #BDBDBD;
}

#block-gavias-great-content .form-petit-annonce-create-edit .clearfix input {
    background: unset;
    color: #289A0B;
    border: none;
    text-align: inherit;
}

.form-petit-annonce-create-edit #edit-field-options-supplementaire label,
.form-petit-annonce-create-edit #edit-field-options-parutions--wrapper label {
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 600 !important;
    color: #000;
}

.form-petit-annonce-create-edit #edit-field-options-supplementaire label::after,
.form-petit-annonce-create-edit #edit-field-options-parutions--wrapper label::after {
    display: none;
}

#block-gavias-great-content .form-petit-annonce-create-edit .btn-next-prev,
#block-gavias-great-content .form-petit-annonce-create-edit .form-actions {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-top: 2rem;
}

#block-gavias-great-content .form-petit-annonce-create-edit .form-actions .btn-next-prev-last button {
    /*border-radius: 32px;*/
    /*color: #BDBDBD;*/
    /*border: none;*/
    /*background-color: unset;*/
    /*padding: 10px 58px;*/
    /*margin-right: 20px;*/
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 600 !important;
    border-radius: 32px;
    background-color: #ffced3;
    border: none;
    color: #fff;
    padding: 10px 58px;
    margin-right: 10px;
}

#block-gavias-great-content .form-petit-annonce-create-edit .form-actions #edit-custom-button-pdf {
    border-radius: 32px;
    color: #fff;
    border: none;
    background-color: #BDBDBD;
    padding: 10px 58px;
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 600;
}

#block-gavias-great-content .form-petit-annonce-create-edit .form-actions #edit-submit {
    border-radius: 32px;
    color: #fff;
    border: none;
    padding: 10px 58px;
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 600;
}

#block-descriptiondetarifpetitannonce {
    background-color: #EEEFF1;
    border: none;
    border-radius: unset;
    text-align: inherit;
    width: 100% !important;
    position: unset;
}

#block-descriptiondetarifpetitannonce.scroll-prix {
    position: unset;
}

#block-descriptiondetarifpetitannonce .apercu-article {
    min-height: 220px;
    margin-bottom: 10px;
}

#block-descriptiondetarifpetitannonce .apercu-article .image-apercu {
    float: left;
    width: auto;
    height: 170px;
    display: flex;
    /*margin-right: 10px;*/
}

#block-descriptiondetarifpetitannonce .apercu-article .image-apercu img {
    object-fit: fill;
    width: 170px;
    height: 170px;
    margin-right: 5px;
}

#block-descriptiondetarifpetitannonce .apercu-article .titre-apercu {
    font-size: 24px;
    line-height: 32.68px;
    font-weight: 700;
    color: #000;
}

#block-descriptiondetarifpetitannonce .apercu-article .tetx-apercu {
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 600;
    color: #000;
}

#block-descriptiondetarifpetitannonce #prix_final .tarif {
    background: #F6F6F6;
    color: #000;
    padding: 10px;
    border-radius: 8px;
    margin-top: 0;
}

form.form-petit-annonce-create-edit .field--name-field-image-petit-annonce table.responsive-enabled tr {
    display: flex;
    flex-direction: column;
}

form.form-petit-annonce-create-edit .field--name-field-image-petit-annonce table.responsive-enabled td input {
    width: 100% !important;
}

form.form-petit-annonce-create-edit .field--name-field-image-petit-annonce table tr td:last-child input {
    border-radius: 32px;
    color: #fff !important;
    font-size: 16px;
    line-height: 21.79px;
    font-weight: 600;
}

form.form-petit-annonce-create-edit .clear-Date-btn {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

form.form-petit-annonce-create-edit #edit-field-nombre-de-parution-0-value > div,
form.form-petit-annonce-create-edit table.field-multiple-table td  div.js-form-item {
    flex-direction: row !important;
    display: flex !important;
}

form.form-petit-annonce-create-edit #edit-field-nombre-de-parution-0-value > div input,
form.form-petit-annonce-create-edit table.field-multiple-table td div.js-form-item input {
    width: calc(100% - 80px) !important;
}

form.form-petit-annonce-create-edit #field-nombre-de-parution-values--luYn7d4iomI.field-multiple-table td > div {

}
/*indication scroll*/
.scroll-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    background: #F8C200;
    padding: 7px;
    border-radius: 5px;
    height: 50px;
    width: 50px;
    display: none;
    z-index: 1;
}
.scroll-indicator i{
    font-size: 30px;
}
.scroll-indicator span {
    width: 20px;
    height: 20px;
    border: 2px solid #333;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(45deg);
    margin-bottom: 5px;
}

.scroll-indicator.active {
    opacity: 1;
}
#block-create-annonceblock .type-annonce .categorie.active{
    padding: 13px;
}
#block-create-annonceblock .type-annonce .categorie.active .desc,
#block-create-annonceblock .type-annonce .sous-categorie.active .desc,
#block-create-annonceblock .type-annonce .model-annonce.active .desc{
    color: #333;
}
@media screen and (max-width: 1421px){
    #block-descriptiondetarifpetitannonce .apercu-article .image-apercu img{
        width: 140px;
        height: 140px;
    }
}
@media screen and (max-width: 1200px) {
    #block-create-annonceblock .parent-step {
        flex-direction: column;
        align-items: baseline;
    }

    #block-create-annonceblock .titre-step {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 991px) {
    #block-descriptiondetarifpetitannonce.scroll-prix {
        position: unset;
    }
}

@media screen and (max-width: 768px) {
    #block-gavias-great-content form.form-petit-annonce-create-edit .js-form-item {
        display: flex;
        flex-direction: column;
    }

    form#node-necrologie-form .field--name-field-status-necrologie,
    form#node-necrologie-form .js-form-type-vertical-tabs,
    form.form-petit-annonce-create-edit .js-form-type-vertical-tabs {
        display: none !important;
    }

    #block-gavias-great-content form.form-petit-annonce-create-edit input {
        width: 100% !important;
    }

    #block-gavias-great-content form.form-petit-annonce-create-edit .field--type-datetime {
        display: block;
    }

    #block-gavias-great-content form.form-petit-annonce-create-edit .field--type-datetime>div {
        width: 100%;
    }

    #block-gavias-great-content form.form-petit-annonce-create-edit label,
    form.form-petit-annonce-create-edit #edit-field-image-petit-annonce-wrapper summary,
    #block-gavias-great-content form.form-petit-annonce-create-edit .field--type-datetime h4 {
        width: 100%;
    }

    #block-gavias-great-content .form-petit-annonce-create-edit .btn-next-prev,
    #block-gavias-great-content .form-petit-annonce-create-edit .form-actions {
        flex-direction: column;
    }

    #block-gavias-great-content .form-petit-annonce-create-edit .form-actions #edit-custom-button-pdf {
        margin: 0 0 10px 0;
    }

    form.form-petit-annonce-create-edit .field--name-field-options-supplementaire .fieldset-wrapper #edit-field-options-supplementaire,
    form.form-petit-annonce-create-edit .field--name-field-options-parutions .fieldset-wrapper #edit-field-options-parutions {
        flex-direction: column;
        display: flex;
    }

    form.form-petit-annonce-create-edit .field--name-field-image-petit-annonce table tbody,
    form.form-petit-annonce-create-edit .field--name-field-date-petit-annonce .fieldset-wrapper,
    form.form-petit-annonce-create-edit .field--name-field-options-supplementaire .fieldset-wrapper #edit-field-options-supplementaire div {
        display: inline-flex;
    }

    form.form-petit-annonce-create-edit .field--name-field-choisir-une-ou-plusieurs-d #edit-field-choisir-une-ou-plusieurs-d div {
        width: 50%;
    }

    form.form-petit-annonce-create-edit #edit-field-nombre-de-parution-0-value > div {
        flex-direction: row !important;
        display: flex !important;
    }

    form.form-petit-annonce-create-edit #edit-field-nombre-de-parution-0-value > div input {
        width: calc(100% - 80px) !important;
    }

    #edit-field-date-petit-annonce-0 > div {
        flex-direction: column;
        display: flex;
    }
}

@media screen and (max-width: 500px) {
    #block-create-annonceblock .multi-step-form {
        flex-direction: column;
        align-items: baseline;
    }

    #block-create-annonceblock .multi-step-form .stepper-line {
        display: none;
    }
    .area-main-menu{
        display: block !important;
    }
    #block-create-annonceblock .multi-step-form{
        flex-direction: initial;
    }
    #block-create-annonceblock .multi-step-form .step{
        padding: 5px 9px 1px 0px;
    }
    #block-create-annonceblock .parent-step{
        padding: 20px 20px 20px 0;
    }
    .scroll-indicator{
        display: block;
        text-align: center;
    }
    #block-gavias-great-content .form-petit-annonce-create-edit .form-actions .btn-next-prev-last{
        width: 100%;
    }
    #block-gavias-great-content .form-petit-annonce-create-edit .form-actions .btn-next-prev-last button{
        width: 100%;
        margin: 0 0 10px 0;
    }
    body.path-node_add_petite_annonce .ui-dialog{
        width: auto !important;
    }
}