.start#form{ .entete{ border-top: 1px solid $light-blue; } h2{ margin-top: 0; } .body-wrapper{ width: 100% !important; min-width: 250px; // margin: auto auto 140px auto; margin-bottom: 0 !important; form{ width: 100% !important; display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 20px; margin: auto; & > .form-group{ // width: 100% !important; width: calc( (100% / 2)) !important; // margin: auto; margin-left: 25%; margin-right: 25%; margin-top: 20px; padding-bottom: 20px; .form-data{ @include inlineflex(); margin: 20px 0px; &> div{ overflow: hidden; margin: 10px 10px; min-width: 100px; border: 2px solid $red; border-radius: 30px; padding: 10px 20px; &.check{ background: $red; color: white; } input{ border: none; } input[type='radio'] { visibility: hidden; position: absolute; } label{ cursor: pointer; } } } } & > .form-field.form-group{ &:nth-of-type(n+5):not(:nth-of-type(n+11)){ width: 25% !important; margin-top: 0; margin-bottom: 0; } &:nth-of-type(5){ margin-left: 25%; margin-right: 0; } &:nth-of-type(6){ margin-left: 0; margin-right: 25%; } &:nth-of-type(7){ margin-left: 25%; margin-right: 0; } &:nth-of-type(8){ margin-left: 0; margin-right: 25%; } &:nth-of-type(9){ margin-left: 25%; margin-right: 0; } &:nth-of-type(10){ margin-left: 0; margin-right: 25%; } } .button-wrapper{ order: 12 !important; background: $red; height: 100px; position: relative !important; left: 0; width: 100% !important; bottom: 0; margin-bottom: 0; button{ margin-right: 25%; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: white; border-radius: 30px; padding: 10px 35px; box-shadow:none; border:0; } } } #send-valide{ -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: $red; border-radius: 20px; position: fixed; width: 30%; min-height: 30%; left: 50%; top: 50%; padding: 50px; .toast{ position: relative; text-align: center; color: white; } .ok{ color: white; position: absolute; right: 20px; bottom: 20px; } } } }