#views-exposed-form-projets-block-1{ flex-direction: row; position: relative; align-items: center; } #views-exposed-form-base-de-donnees-block-1{ flex-direction: column; margin-top: 1rem; @media (max-width: 479px){ justify-content: center; } .js-form-item{ // flex-direction: column !important; margin-right: 0 !important; margin-bottom: 0.5rem !important; padding: 0.2rem !important; input, select{ width: 100%; text-align: end; } label{ padding-right: 0.5rem !important; flex: 2 0 auto !important; } } } #views-exposed-form-base-de-donnees-block-1, #views-exposed-form-projets-block-1{ display: flex; flex-wrap: wrap; .js-form-item{ display: flex; flex-direction: row; max-width: 100%; margin-right: 1rem; margin-bottom: 1rem; padding: 0.5rem 1rem; align-items: baseline; border: solid black 0.5px ; justify-content: space-evenly; @media(max-width: 810px){ display: flex; flex-direction: row; justify-content: space-between; } label{ flex: 2 1 auto; padding-right: 2rem; &::after{ content: ' : '; } } input{ flex: 2 1 auto; max-width: 55%; @media(max-width: 810px){ max-width: 100%; } } .form-checkbox{ margin-right: 1rem; } .select-wrapper{ margin: 0; } } .js-form-type-checkbox label{ &::after{ content: none; } } .form-actions{ input{ color: white; font-weight: 600; text-transform: uppercase; padding: 0.3rem 0.7rem; background-color: $blue-light; border: none; } } input, select{ border: none; background-color: transparent; font-family: "Marianne"; font-size: 1rem; } }