.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: 1300px){
        top: $header-height;
    } 
    @media(max-width: 810px){
        position: relative;
        width: 100%;
        top: $header-height;
        margin: auto;
        margin-top: 1rem;
        background-color: white;
        padding-top: 1rem;
        padding-bottom: 1rem;
    } 
    .sidebar_first_container{
        @media(max-width: 810px){
            width: 80%;
            margin: auto;
        }

    }

    #block-quartiers-de-demain-formulaireexposeressourcespage-1,     
    #block-quartiers-de-demain-formulaireexposeactuspage-1{
        background-color: white;
        padding: 0.3rem 0.5rem 1rem 1rem;
        width: 111%;
        @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{
            display: grid;
            
            .js-form-item{
                display: flex;
                margin-bottom: 0.5rem;
                padding-bottom: 0.3rem;

                @media(max-width: 810px){
                    display: flex;
                    flex-direction: row;
                    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';
            align-items: center;
            label{
                width: 60%;
                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{
            flex-direction: column;
            padding-top: 0.8rem;
           
            label{
                display: flex;
                flex-direction: row;
                text-transform: lowercase;
                font-size: 0.7rem;
                font-family: 'gilroy-light';
                padding-bottom: 0.2rem;
                &::after{
                    content: "";
                    display: block;
                    background: url("../img/loupe.svg");
                    background-repeat: no-repeat;
                    width: 38px;
                    height: 30px;
                    margin-left: 0.5rem;
                }
            }
            input#edit-combine--3,
            input#edit-combine--2{
                max-width: 100%;
                height: 25px;
                width: 96%;
            }
            &.js-form-item{
                @media(max-width: 810px){
                flex-direction: column;
                }
            }
        }
        .form-actions{
            padding-top:0rem ;
            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';
                &:hover{
                    background-color: black;
                    color: white;
                    font-family: "gilroy-regular";


                }
            }
        }
    }
}

.ss-search,
.ss-option,
.ss-list{
    font-size: 0.7rem;
}

.js-form-item-field-tous-les-sites-value{
    display: none !important;
}

.ss-main{
    border: none;
}

.ss-placeholder{
    display: none !important;
}



.js-form-item-field-mots-clefs-target-id{
order: 1;
}
.js-form-item-field-type-de-ressource-target-id{
order: 2;
}

.js-form-item-field-site-target-id-verf{
order: 3;
}
.js-form-item-combine{
order: 4;
}
.form-actions{
    order: 5;
}