d9-eql/web/themes/custom/eql/scss/pages/_webform.scss

.path-webform{
    .region-content{

        // div:nth-of-type(2):not(#edit-actions):not(.form-item-couriel-mail-2):not(.form-item-titre-du-document):not(.form-item-intitule-de-l-offre-de-service){
        //     display: none;
        // }
        [role="contentinfo"]{
            display: none;
        }

        // #block-contenudelapageprincipale{
           .block-system-main-block{
            h2{ display:none}
           } 
        // }

        #webform-submission-deposer-une-contribution-add-form{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            flex-basis: auto;
            justify-content: flex-start;

            #edit-titre{
                width: 100%;
                font-family: 'Source Code Pro';
                font-size: 1.5rem;
                font-weight: 800;
                color: $white;
                background-color: $blue-light;
                text-transform: uppercase;
                padding-left: 13%;
                padding-top: 2rem;
                padding-bottom: 2rem;
                vertical-align: middle;
            }

            #edit-sous-titre{
                width: 100%;
                font-family: 'Source Code Pro';
                font-size: 2rem;
                font-weight: 800;
                color: $white;
                background-color: $blue-light;
                text-transform: uppercase;
                width: fit-content;
                margin-left: 13%;
                margin-top: 8rem;
            }
            #edit-processed-text{
                margin-top: 10vh;
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
            }

            .form-item-titre-du-document{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{
                    width: 90%;
                    height: 5rem;
                }
            }    
                
            .form-item-auteur-s-{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{
                    width: 90%;
                }
            
            }
            .form-item-date-de-parution{
                margin-left: 13%;
                width: 27%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{
                    width: 90%;
                }
            }
            .form-item-nombre-de-pages{
                margin-right: 20%;
                width: 27%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                margin-right: 3rem;
                label{width: 100%;}
                input{
                    // margin-top: 1rem;
                    width: 100%;
                }
            }
            .form-item-nom-de-la-revue-et-de-l-editeur{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{
                    width: 90%;
                }
            }
            .form-item-type-de-document-revue-article-etc-{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{
                    width: 90%;
                }
            }
            .form-item-resume-de-la-ressource{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 1rem;
                }
                label{width:100%}
                div{
                    width: 90%;
                    textarea{width: 100%;}
                }
                
            }
            .form-item-_-ou-4-mots-ou-expression-cles-pour-identifier-le-sujet{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                label{width: 100%;}
                input{
                    width: 90%;
                    height: 3rem;
                }
            }

            .form-item-piece-s-jointe-s-{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                label{width: 100%;}
 
            }
            .form-item-url-vers-une-video-ou-un-site-internet{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                label{width: 100%;}
                input{
                    width: 90%;
                    height: 3rem;
                }
            }
            .form-item-courriel{
                margin-left: 13%;
                width: 28%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{width: 90%;}
            }
            .form-item-telephone{
                margin-right: 20%;
                width: 29%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                margin-right: 3rem;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{width: 90%;}
            }
            #edit-actions{
                // display: inline-flex;
                width: 60%;
                input{
                    width: 30%;
                    align-self: flex-end;
                    background-color: $blue-light;
                    text-transform: uppercase;
                    color: $white;
                    font-size: 1.2rem;
                    font-weight: 600;
                    float: right;
                    margin-top: 1rem;
                    border: none;
                }
                #edit-actions-submit:after{
                    content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)"  fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="0.7"/></svg>');
                }
            }

        }
        #webform-submission-offre-de-service-add-form{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            flex-basis: auto;
            justify-content: flex-start;
            // input:focus ~ label,
            // input:not(:placeholder-shown) ~ label {
            //  z-index: -1;
            // }
            #edit-title{
                width: 100%;
                font-family: 'Source Code Pro';
                font-size: 1.5rem;
                font-weight: 800;
                color: $white;
                background-color: $blue-light;
                text-transform: uppercase;
                padding-left: 13%;
                padding-top: 2rem;
                padding-bottom: 2rem;
                vertical-align: middle;
            }

            #edit-sous-titre{
                width: 100%;
                font-family: 'Source Code Pro';
                font-size: 2rem;
                font-weight: 800;
                color: $white;
                background-color: $blue-light;
                text-transform: uppercase;
                width: fit-content;
                margin-left: 13%;
                margin-top: 8rem;
            }
            #edit-processed-text{
                margin-top: 10vh;
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
            }


            .form-item-intitule-de-l-offre-de-service{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{
                    width: 90%;
                    height: 5rem;

                }
            }    
                
            .form-item-structure{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{
                    width: 90%;
                }
            
            }
            .form-item-localisation{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%; }
                input{
                    width: 90%;
                }
            }
            div{
                
                width: 100%;
                .form-item-description{
                    margin-left: 13%;
                    margin-right: 20%;
                    width: 60%;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    margin-top: 2rem;
                    label{width: 100%;}
                    textarea{
                        width: 90%;
                    }
                } 
            }
            .form-item-description{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                label{width: 100%;}
                textarea{
                    width: 90%;
                }
            }
            .form-item-image{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
            }

            .form-item-des-documents-complementaires-en-pdf{
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
            }

            #edit-lien--wrapper{
                width: 100%;
                .form-item-lien-url{
                    margin-left: 13%;
                    margin-right: 20%;
                    width: 60%;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    margin-top: 2rem;
                    &:after{
                        content: "*";
                        color: red;
                        font-size: 2rem;
                        padding-left: 0.5rem;
                    }
                    label{width: 100%;}
                    input{
                        width: 90%;
                    }
                }
            }
            .form-item-courriel{
                margin-left: 13%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                width: 28%;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{width: 90%;}
            }
            .form-item-telephone{
                margin-right: 20%;
                width: 29%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                margin-right: 3rem;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{width: 90%;}
            }

            .form-item-j-accepte-que-mon-courriel-soit-diffuse-sur-la-page-de-mon-offre{
               
               margin-top: 3rem;
               margin-bottom: 3rem;
                margin-left: 13%;
                margin-right: 20%;
                width: 60%;
            }
            #edit-actions{
                // display: inline-flex;
                width: 60%;
                input{
                    width: 30%;
                    align-self: flex-end;
                    background-color: $blue-light;
                    text-transform: uppercase;
                    color: $white;
                    font-size: 1.2rem;
                    font-weight: 600;
                    float: right;
                    margin-top: 1rem;
                    border: none;
                }
                #edit-actions-submit:after{
                    content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)"  fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="0.7"/></svg>');
                }
            }

        }

        #webform-submission-question-add-form{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            flex-basis: auto;
            justify-content: flex-start;
            margin-top: 10vh;
            width: 60%;
            margin-left: 13%;
            margin-right: 20%;


                .form-item-couriel{
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    margin-top: 2rem;
                    width: 100%;
                    &:after{
                        content: "*";
                        color: red;
                        font-size: 2rem;
                        padding-left: 0.5rem;
                    }
                    label{width: 100%;}
                    input{
                        width: 90%;
                    }
                
                }

            

            .form-item-question{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                width: 100%;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.9rem;
                }
                label{width: 100%;}
                div{
                    width: 90%;
                    textarea{
                        width: 100%;
                        height: 5rem;
                    }
                }
                
            
            }
            #edit-actions{
                // display: inline-flex;
                width: 90%;
                input{
                    width: 30%;
                    align-self: flex-end;
                    background-color: $blue-light;
                    text-transform: uppercase;
                    color: $white;
                    font-size: 1.2rem;
                    font-weight: 600;
                    float: right;
                    margin-top: 1rem;
                    border: none;
                }
                #edit-actions-submit:after{
                    content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)"  fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="0.7"/></svg>');
                }
            }
        }
    }
}