MT-work-fronted/src/app/authentication/auth-sign-up/auth-sign-up.component.scss

@mixin signUp-theme() {
  app-auth-sign-up {
    header {
      width: 100%;
      padding: 4rem 0;
      padding-bottom: 0;
      main {
        text-align: center;
        h1 {
          color: $main-color;
        }
        p {
          color: $main-color;
          font-size: 14px;
          margin-top: 5px;
        }
      }
      .form-type {
        width: 542px;
        padding: 10px 20px;
        background: #2f2c8326 0% 0% no-repeat padding-box;
        border-radius: 10px;
        margin: 2rem auto;
        @media (max-width: 767px) {
          width: 100%;
        }
        p {
          span {
            color: $main-color;
            font-size: 15px;
          }
          button {
            background-color: transparent;
            border: none;
            color: #009fe3;
            text-decoration: underline;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
            a {
              color: $white-blue;
            }
          }
        }
      }
    }

    section {
      .form-container {
        padding: 0 10rem;
        padding-bottom: 3rem;
        @media (max-width: 767px) {
          padding: 0 1rem;
          width: 100%;
        }
        form {
          background-color: #2f2c8326;
          padding: 20px;
          border-radius: 10px;
          p {
            color: $black-color;
            font-size: 15px;
            margin-bottom: 20px;
          }

          .form-input {
            width: 100%;
            label {
              margin-bottom: 5px;
              font-size: 13px;
              span {
                margin: 0 5px;
              }
            }
            input,
            select {
              padding: 15px 20px;
              border-radius: 10px;
              box-shadow: 0px 5px 6px #2f2c8324;
              border: 0.5px solid $main-color;
              border-radius: 10px;
              outline: none;
            }
          }

          .formats-acceptance {
            width: 60%;
            background: $white-color;
            box-shadow: 0px 5px 6px #2f2c8324;
            border: 1px solid red;
            border-radius: 10px;
            margin: 0 auto;
            padding: 10px 0;
            @media (max-width: 767px) {
              width: 90%;
            }
            p {
              font-size: 15px;
              margin: 0;
            }
          }

          .files {
            padding: 30px 0;
            gap: 21px;
            div {
              width: 232px;
              padding: 10px 0;
              background: $white-color;
              box-shadow: 0px 5px 6px #2f2c8324;
              border: 1px solid $main-color;
              border-radius: 10px;
              p {
                text-align: center;
                margin: 0;
                border-bottom: 1px solid $main-color;
                padding-bottom: 10px;
                color: $main-color;
                font-size: 13px;
              }
            }
          }

          .payment {
            .add-payment {
              background-color: $open-light-blue;
              color: $main-color;
              border: 1px solid $open-light-blue;
              padding: 13px 20px;
              border-radius: 10px;
              box-shadow: 0px 5px 6px #2f2c8324;
              transition: all 0.5s;
              &:hover {
                background-color: $light-blue;
                color: $white-color;
              }
            }
          }

          button[type="submit"] {
            background-color: $light-blue;
            color: $white-color;
            padding: 10px 80px;
            border-radius: 10px;
            border: 1px solid $light-blue;
            cursor: pointer;
            transition: all 0.5s;
            &:hover {
              background-color: $main-blue;
              border: 1px solid $main-blue;
            }
          }
        }
      }
    }
  }
}