vocurations/user/themes/vocurations/scss/theme/_forms.scss

.form{
  section{
    &#body-wrapper{
      #custom-form{
        margin-top: 3rem;
        width: $item_content;
        @include grilles;
        .form-field{
          .form-data{
            .form-input-wrapper {
              position: relative;
              &:before{
                display: block;
                content: url(/user/themes/vocurations/images/etoile.svg);
                width: 5px;
                height: 5px;
                position: absolute;
                top: -17px;
                left: -10px;
              }
            }
            input{
              &::-moz-placeholder {
                opacity: 1;
              }
            }
          }
            align-self: center;
          &:nth-child(1){
            grid-column: 1 / 4;
            grid-row: 1;
          }
          &:nth-child(2){
            grid-column: 4 / 7;
            grid-row: 1;
          }
          &:nth-child(3){
            grid-column: 1 / 3;
            grid-row: 2;
          }
          &:nth-child(4){
            grid-column: 3 / 5;
            grid-row: 2;
          }
          &:nth-child(5){
            grid-column: 5 / 7;
            grid-row: 2;
          }
          &:nth-child(6){
            grid-column: 1 / 3;
            grid-row: 3;
          }
          &:nth-child(7){
            grid-column: 3 / 5;
            grid-row: 3;
          }
          &:nth-child(8){
            grid-column: 5 / 7;
            grid-row: 3;
            display: flex;
            position: relative;
            .form-data{
              .dropzone{
                position: absolute;
                min-height: 26px;
                width: 100%;
                left: 0;
                border:none;
                background: transparent;
                &::before{
                  display: none;
                }
                &::after{
                  position: absolute;
                  display: inline-block;
                  width: 1.2rem;
                  height: 1.2rem;
                  content: ' ';
                  background: url('/user/themes/vocurations/images/Upload.svg');
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  right: -0px;
                  top: 5px;
                }
                .dz-preview {
                  width: 100%;
                  position: absolute;
                  left: 0;
                  margin: 0;
                  top: 0px;
                  background: white;
                  min-height: 23px;
                  .dz-image{
                    width: 100%;
                    height: auto;
                    background: white;
                  }
                  .dz-remove{
                    z-index: 999;
                    position: absolute;
                    z-index: 999;
                    right: 0%;
                    top: 50%;
                    width: 54px;
                    height: 54px;
                    margin-top: -27px;
                    margin-right: -27px;
                    color: black;
                    background: white;
                  }
                  .dz-image{
                    display: none;
                  }
                  .dz-details{
                    display: inline-flex;
                    padding: 0em 0em;
                    opacity: 1;
                    align-items: flex-end;
                    & > div{
                      font-size: 1.5rem;
                      text-overflow: ellipsis;
                      margin-bottom: 0;
                      & > span{
                        font-size: 1.5rem;
                        display: flex;
                        flex-wrap: nowrap;
                        padding: 0 1rem 0 0;
                      }
                    }
                    .dz-filename{
                      overflow: hidden;
                    }
                  }
                  .dz-error-message{
                    opacity: 1;
                    top: 120%;
                    left: 0;
                  }
                  .dz-error-mark{
                    display: none;
                  }
                  .dz-progress{
                    height: 5px;
                    width: 100%;
                    margin-top: 0;
                    margin-left: 0;
                    left: 0;
                    top: 110%;
                  }
                  .dz-success-mark{
                    path{
                      fill:green;
                    }
                  }
                }
              }
            }
            .dz-default{
              span{
                display: none;
              }
            }
          }
          &:nth-child(9){
            grid-column: 1 / 7;
            grid-row: 4;
            display: flex;
            align-items: center;
            .form-label{
              margin-right: 1rem;
              label{
                position: relative;
                display: block;
                width: 150px;
                &:before{
                  display: block;
                  content: url(/user/themes/vocurations/images/etoile.svg);
                  width: 10px;
                  height: 10px;
                  position: absolute;
                  top: -17px;
                  left: -10px;
                }
              }
            }
            .form-data{
              @include flexbox;
              .radio{
                  margin-right: 1rem;
                  label{
                    @include flexbox;
                    flex-wrap: nowrap!important;
                    align-items: center;
                    input{
                      margin-right: 10px;
                      border: 1px solid black;
                      position: relative;
                      appearance: none;
                      font-size: inherit;
                      width: 20px;
                      height: 20px;
                      margin: 0;
                      color: inherit;
                      outline: none;
                      transition: 300ms ease-out;
                      vertical-align: baseline;
                      &::after {
                        content: ' ';
                        display: block;
                        text-align: center;
                        width: 18px;
                        height: 18px;
                      }
                      &:active {
                        transform: scale(.6);
                      }
                    }
                    input[type=radio]:checked::after {
                      background: black;
                    }
                  }
              }
            }
          }
          &:nth-child(10){
            grid-column: 1 / 7;
            grid-row: 5/7;
              align-self: stretch;
            .form-label {
              display: none;
            }
            .form-data{
              height: 100%;
            }
            .form-textarea-wrapper {
              height: 100%;
            }
            textarea{
              padding: 0.5rem;
              border : 1px solid black;
              width: 100%;
              height: 100%;
              resize: none;
            }
          }
          &:nth-child(-n+7){
            .form-label{
              display:none
            }
          }
          .form-data{
            input{
              border: none;
              border-bottom: 1px solid black;
              width: 100%;
            }
            textarea::focus, input::focus {
                color: black;
            }
          }
        }
        .buttons{
          grid-column: 1 / 1;
          grid-row: 7;
          align-self: center;
          display: flex;
          button{
            border: none;
            background: white;
          }
        }
      }
    }
  }
  .toast-success{
    font-family: $Regular;
    display: inline-block;
    margin-left: 1rem;
  }
}