asan-service/sass/pages/user-dashboard/post.scss

.user-dashboard {
  &.post {
    .form_3 {
      .formDB {
        flex-basis: 100%;
        text-align: center;
        margin-top: -20px;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 100%;
          max-width: 200px;
          @extend %userSelect;
        }

        i,
        span {
          display: block;
          font-size: 20px;
          color: $theme;
        }
        span {
          margin-right: 8px;
          font-family: 'iranYekanB';
        }
      }

      .formRow {
        .el-select {
          width: 100%;

          .el-input__inner {
            @include borderRadius(0);
          }

          .el-input__suffix {
            right: 0;
            left: 20px;
            text-align: left;
          }
        }
      }

      hr {
        flex-basis: 100%;
        margin-bottom: 30px;
      }

      #quantity:disabled {
        cursor: not-allowed;
        color: rgba(#000, 0.1) !important;
      }

      #addBtn {
        &:focus {
          outline: 1px solid #000;
        }
      }
    }

    .add-list {
      margin-top: 50px;

      h2 {
        margin-bottom: 20px;
      }
    }

    .terms {
      margin-top: 50px;

      h2 {
        margin-bottom: 20px;
      }

      .form {
        padding: 0;
        margin-top: 30px;
        margin-bottom: 30px;

        .formRow {
          padding-right: 0;

          label {
            padding-right: 0;
          }
        }
      }

      ol {
        margin-top: 20px;
        list-style: decimal;
        list-style-position: inside;
        margin-bottom: 15px;

        li {
          margin-bottom: 5px;

          p {
            display: inline-block;
            color: rgba(#000, 1) !important;
          }
        }
      }

      .agents {
        .el-select {
          width: 100%;
          max-width: 300px;

          .el-input__inner {
            width: 100%;
            @include borderRadius(4px);
            border: 1px solid rgba(#000, 0.2);
          }

          .el-input__suffix {
            right: 0;
            left: 20px;
            text-align: left;
          }
        }

        .btn {
          padding: 8px 30px;
        }

        @media (max-width: 575px) {
          button {
            width: 100%;
            margin-top: 10px;
            text-align: center;
          }

          .el-select {
            max-width: 575px;
          }
        }
      }
    }

    .form-address {
      margin-top: 50px;

      h2 {
        margin-bottom: 20px;
      }

      .no-address {
        color: $red;
        padding: 5px;
      }

      button {
        margin-top: 20px;
      }
    }

    .formError {
      color: red;
    }

    .addStuffBtn {
      cursor: pointer;
      background-color: $theme !important;

      td {
        text-align: center !important;
        cursor: pointer;

        button {
          cursor: pointer;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          border: transparent;
          background: transparent;

          span {
            margin-left: 5px;
          }

          span,
          i {
            color: #fff;
            padding: 0;
          }
        }
      }
    }

    .chooseDataBase {
      margin-bottom: 50px;

      h2 {
        margin-bottom: 30px;
        text-align: center;
      }

      .brandsList {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: stretch;

        .brand {
          flex-basis: 50%;
          max-width: 250px;
          padding: 15px;
          text-align: center;

          &.selected {
            button {
              background: $theme;

              img {
                opacity: 0;

                &.alt {
                  opacity: 1;
                }
              }

              i,
              span {
                color: #fff;
              }
            }
          }

          button {
            width: 100%;
            height: 100%;
            display: inline-block;
            overflow: hidden;
            border: 1px solid $theme;
            cursor: pointer;
            @extend %defaultTransition;
            @extend %defaultBorderRadius;
            background: transparent;
            position: relative;
            padding: 5px;

            &:hover {
              background: $theme;

              img {
                opacity: 0;

                &.alt {
                  opacity: 1;
                }
              }
              i,
              span {
                color: #fff;
              }
            }

            img {
              display: block;
              width: 100%;
              @extend %defaultTransition;

              &.alt {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                opacity: 0;
              }
            }

            i {
              display: block;
              font-size: 50px;
              margin: 10px 0;
              color: $theme;
              @extend %defaultTransition;
            }
            span {
              color: $theme;
              font-family: 'iranYekanB';
              @extend %defaultTransition;
            }
          }
        }
      }
    }

    .btnRow {
      width: 100%;
      text-align: right;

      button {
        margin-top: 20px;
        display: inline-flex;
        justify-content: center;
        align-items: center;

        span {
          color: #fff;
          font-family: 'iranYekanR';
          margin-left: 5px;
        }
      }
    }
  }
}