.layout-sidebar-first{
    width: 20%;
    // display: flex;
    position: fixed;
    // left: 3%;
    top: $header-height-big;
    // z-index: 98;
    // margin: 1rem 2rem;
    background-color: transparent;
    @media(max-width: 810px){
        position: relative;
        width: 80%;
        top: $header-height-pad;
        margin: auto;
        margin-top: 1rem;
    } 


    #block-quartiers-de-demain-formulaireexposeressourcespage-1,     
    #block-quartiers-de-demain-formulaireexposeactuspage-1{
        background-color: white;
        padding: 0.3rem 0.5rem 1rem 1rem;
        width: 100%;
        @media(max-width: 810px){
            display: flex;
            flex-direction: column;
            margin: auto;
            width: auto;
        }
        h2{
            text-transform: uppercase;
            font-family: "gilroy-medium";
            font-size: 0.7rem;
            &::after{
                content: ' :';
            }   
        }
        form{
            
            .js-form-item{
                display: flex;
                margin-bottom: 0.5rem;

                @media(max-width: 810px){
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                label{
                    flex: 2 1 auto;
                }
                input{
                    flex: 2 1 auto;
                    max-width: 55%;
                    @media(max-width: 810px){
                        max-width: 100%;
                    }
                }
            }
            @media(max-width: 810px){
                display: flex;
                flex-direction: column;
                justify-content: space-between;

            }
        }
        
        .js-form-type-select{
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            border-bottom: solid black 0.5px ;
            padding-top: 0.5rem;
            font-size: 0.7rem;
            font-family: 'gilroy-light';
            label{
                width: 50%;
                text-transform: lowercase;
                font-size: 0.7rem;
                font-family: 'gilroy-light';
                padding-bottom: 0.2rem;
            }
            select{
                background-color: white;
                border: none;
                width: 50%;
                font-size: 0.6rem;
                font-family: 'gilroy-medium';
                padding-bottom: 0.2rem;
                @media(max-width: 810px){
                    width: 100%;
                }
            }
        }
        .js-form-type-textfield{
            label{

                text-transform: lowercase;
                font-size: 0.7rem;
                font-family: 'gilroy-light';
                padding-bottom: 0.2rem;
            }
        }
        .form-actions{
            padding-top:1rem ;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            input{
                background-color: white;
                border: solid black 0.5px;
                width: 45%;
                max-width: 100% !important;
                padding: 0.3rem 0.2rem;
                font-size: 0.7rem;
                font-family: 'gilroy-light';
            }
        }
    }
}
