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

.path-webform{
    .region-content{
        margin-left: 13%;
        margin-right: 20%;
        width: 60%;
        // 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;
            margin-top: 10vh;
            // input:focus ~ label,
            // input:not(:placeholder-shown) ~ label {
            //  z-index: -1;
            // }

            // overflow: visible;
            // .required{
            //         border-color: red !important;
            //         display: block;
            //         content: " ";                                        
            // }

            // .required::after{
            //     content: " * ";
            // }

            #edit-processed-text{
                width: 100%;
            }

            .form-item-titre-du-document{
                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{
                    // overflow: visible;
                    width: 90%;
                    height: 5rem;
                  
                    // ::placeholder{
                    //     content:"Titre du document";
                    // }
                    // &::after{

                    //     display: block;
                    //     content: " ";             
                    //     color: red;
                    //     background-image: url("../images/pictos/twitter_black.svg");
                    //     font-size: 10rem;
                    // }
                }

            }    
                
            .form-item-auteur-s-{
                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-date-de-parution{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                width: 45%;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{
                    width: 90%;
                }
            }
            .form-item-nombre-de-pages{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                width: 45%;
                margin-right: 3rem;
                label{width: 100%;}
                input{
                    // margin-top: 1rem;
                    width: 100%;
                }
            }
            .form-item-nom-de-la-revue-et-de-l-editeur{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                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-{
                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-resume-de-la-ressource{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                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{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                width: 100%;
                
                label{width: 100%;}
                input{
                    width: 90%;
                    height: 3rem;
                }
            }
            .form-item-url-vers-une-video-ou-un-site-internet{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                width: 100%;
                label{width: 100%;}
                input{
                    width: 90%;
                    height: 3rem;
                }
            }
            .form-item-courriel{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                width: 47%;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{width: 90%;}
            }
            .form-item-telephone{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                width: 47%;
                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: 100%;
                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;
            margin-top: 10vh;
            // input:focus ~ label,
            // input:not(:placeholder-shown) ~ label {
            //  z-index: -1;
            // }

            #edit-processed-text{
                width: 100%;
            }

            .form-item-intitule-de-l-offre-de-service{
                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%;
                    height: 5rem;

                }
            }    
                
            .form-item-structure{
                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-localisation{
                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%;
                }
            }
            div{
                width: 100%;
                .form-item-description{
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    margin-top: 2rem;
                    width: 100%;
                    label{width: 100%;}
                    textarea{
                        width: 90%;
                    }
                } 
            }
            .form-item-description{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                width: 100%;
                label{width: 100%;}
                textarea{
                    width: 90%;
                }
            }
            #edit-lien--wrapper{
                width: 100%;
                .form-item-lien-url{
                    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-courriel{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                width: 47%;
                &:after{
                    content: "*";
                    color: red;
                    font-size: 2rem;
                    padding-left: 0.5rem;
                }
                label{width: 100%;}
                input{width: 90%;}
            }
            .form-item-telephone{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-top: 2rem;
                width: 47%;
                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: 100%;
                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: space-between;
            margin-top: 10vh;

          

            #edit-couriel--wrapper{
                width: 100%;
                .form-item-couriel-mail-1{
                    margin-top: 2rem;
                    width: 100%;
                    input{
                        width: 100%;
                    }
                
                }
                .form-item-couriel-mail-2{
                    margin-top: 2rem;
                    width: 100%;
                    input{
                        width: 100%;
                    }
                
                }
            }

            .form-item-question{
                margin-top: 2rem;
                width: 100%;
                textarea{
                    width: 100%;
                }
            
            }
            #edit-actions{
                // display: inline-flex;
                width: 100%;
                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>');
                }
            }
        }
    }
}