guild_front/src/pages/PartnerBid/partnerBid.scss

.partner-bid {
  background: #f1f1f1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  .container {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 23px;

    @media (max-width: 570px) {
      margin-top: 0;
    }
  }

  &__title {
    color: #000000;
    font-weight: 700;
    font-size: 22px;
    line-height: 32px;
  }

  &__qualification {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 37px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    h3 {
      color: #000000;
      font-weight: 500;
      font-size: 22px;
      line-height: 32px;
      margin-bottom: 0;
    }

    &__buttons {
      display: flex;
      align-items: center;

      a {
        max-width: 168px;
        width: 100%;
        height: 48px;
        background: #e1fccf;
        border-radius: 44px;
        font-weight: 500;
        font-size: 15px;
        line-height: 32px;
        color: #000000;
        padding: 8px 24px 10px 32px;
        border: none;

        &:hover {
          color: #000000;
        }
      }

      img {
        width: 44px;
        height: 44px;
        margin-left: 21px;
        cursor: pointer;
      }
    }
  }

  &__switcher {
    display: flex;
    margin: 30px 0;
    justify-content: center;
    align-items: center;

    @media (max-width: 550px) {
      justify-content: space-between;
    }

    .switch-date {
      width: 48px;
      height: 48px;
      background: #8dc63f;
      border-radius: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .disable {
      pointer-events: none;
      opacity: 0.5;
    }

    &__prev {
      transform: rotate(180deg);
    }

    p {
      color: #000000;
      font-weight: 400;
      font-size: 15px;
      line-height: 32px;
      margin: 0 100px;

      @media (max-width: 550px) {
        margin: 0;
      }
    }
  }

  .table__wrapper {
    margin: 0 -28px;
    overflow: hidden;
    position: relative;

    @media (max-width: 1205px) {
      margin: 0;
    }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 28px 0;

      @media (max-width: 1205px) {
        display: grid;
        border-collapse: collapse;
      }

      thead {
        @media (max-width: 1205px) {
          display: grid;
        }
        tr {
          @media (max-width: 1205px) {
            display: grid;
            grid-template-columns: 74% calc(26% - 28px);
            column-gap: 28px;
          }

          @media (max-width: 900px) {
            grid-template-columns: 65% calc(35% - 28px);
          }

          @media (max-width: 515px) {
            grid-template-columns: 65% calc(35% - 10px);
            column-gap: 10px;
          }

          th {
            background: white;
            border-radius: 12px 12px 0 0;
            font-weight: 500;
            font-size: 22px;
            line-height: 32px;

            &:first-child {
              padding: 32px 37px;

              @media (max-width: 640px) {
                padding: 15px;
              }
            }

            &:last-child {
              padding: 32px 50px 32px 48px;

              @media (max-width: 640px) {
                padding: 15px;
              }
            }

            p {
              margin-bottom: 0;
            }

            @media (max-width: 1000px) {
              font-size: 15px;
              line-height: 20px;
              text-align: center;
            }

            @media (max-width: 515px) {
              font-size: 12px;
            }
          }
        }
      }

      tbody {
        @media (max-width: 1205px) {
          display: grid;
        }
        tr {
          @media (max-width: 1205px) {
            display: grid;
            grid-template-columns: 74% calc(26% - 28px);
            column-gap: 28px;
          }

          @media (max-width: 900px) {
            grid-template-columns: 65% calc(35% - 28px);
          }

          @media (max-width: 515px) {
            column-gap: 10px;
            grid-template-columns: 65% calc(35% - 10px);
          }
          td {
            background: white;
            p {
              margin-bottom: 0;
              color: #000000;
              font-weight: 400;
              font-size: 14px;
              line-height: 24px;

              @media (max-width: 515px) {
                font-size: 12px;
                line-height: 18px;
              }

              @media (max-width: 450px) {
                font-size: 10px;
              }
            }
            &:first-child {
              padding: 0 27px 35px 39px;

              @media (max-width: 580px) {
                padding: 15px;
              }
            }

            &:last-child {
              padding: 0 45px 35px;

              @media (max-width: 580px) {
                padding: 15px;
              }
            }

            .qualification__info {
              display: flex;
              align-items: center;

              @media (max-width: 1000px) {
                flex-direction: column;
                row-gap: 5px;

                p {
                  margin: 0 !important;
                  text-align: center;
                }
              }

              .img__wrapper {
                min-width: 48px;
                height: 48px;
                background: #8dc63f;
                border-radius: 50px;
                display: flex;
                justify-content: center;
                align-items: center;

                @media (max-width: 515px) {
                  min-width: 25px;
                  height: 25px;

                  img {
                    width: 17px;
                    height: 17px;
                  }
                }
              }

              p {
                font-weight: 400;
                font-size: 14px;
                line-height: 18px;
                margin-left: 25px;

                @media (max-width: 515px) {
                  font-size: 12px;
                  line-height: 18px;
                }
              }

              .middle {
                color: #406128;
                font-weight: 900;
                font-size: 14px;
                line-height: 18px;

                @media (max-width: 515px) {
                  font-size: 12px;
                  line-height: 18px;
                }
              }
            }
          }

          &:last-child {
            td {
              border-radius: 0 0 12px 12px;
            }
          }
        }
      }
    }
  }

  &__suitable {
    &__title {
      background: #e1fccf;
      border-radius: 12px 12px 0px 0px;
      margin-top: 48px;
      padding: 18px 37px;
      position: relative;

      p {
        color: #000000;
        font-weight: 500;
        font-size: 22px;
        line-height: 32px;

        @media (max-width: 540px) {
          font-size: 15px;
          height: 20px;
        }
      }
    }

    &__persons {
      display: flex;
      flex-direction: column;
      row-gap: 18px;
      position: relative;
      top: -15px;
      max-height: 420px;
      overflow: auto;

      &::-webkit-scrollbar {
        width: 4px;
        background: 0 0;
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.04);
        border-radius: 20px;
      }

      &::-webkit-scrollbar {
        width: 4px;
        border-radius: 20px;
      }

      &::-webkit-scrollbar-thumb {
        background: #8db274;
        border-radius: 20px;
      }

      &::-webkit-scrollbar-track {
        background: #c5c0c6;
        border-radius: 20px;
      }
    }

    &__person {
      display: flex;
      padding: 21px 45px 19px;
      align-items: center;
      background: #ffffff;
      border-radius: 12px;

      &:hover {
        text-decoration: none;
      }

      img {
        max-width: 88px;
        height: 88px;
        width: 100%;
      }

      p {
        color: #000000;
        font-weight: 500;
        font-size: 16px;
        line-height: 32px;
        margin-left: 60px;
        position: relative;
        width: 100%;

        &:after {
          content: "";
          position: absolute;
          background: #52b709;
          border-radius: 12px;
          width: 70%;
          height: 8px;
          bottom: -14px;
          left: 0;
        }
      }

      &__more {
        padding: 9px 45px;
        background: #52b709;
        border-radius: 44px;
        color: #ffffff;
        font-weight: 500;
        font-size: 16px;
        line-height: 32px;
        margin-left: 200px;

        &:hover {
          color: white;
          text-decoration: none;
        }
      }

      &__info {
        width: 24px;
        height: 24px;
        box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
          0px 5px 3px -2px rgba(0, 0, 0, 0.02);
        border-radius: 6px;
        border: 1px solid #dddddd;
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 60px;

        &:before {
          content: "...";
          color: #6f6f6f;
          font-size: 25px;
          position: relative;
          top: -6px;
        }
      }

      @media (max-width: 1100px) {
        justify-content: space-between;
        p {
          margin-left: 0;
        }

        &__more {
          margin-left: 0;
        }

        &__info {
          margin-left: 0;
        }
      }

      @media (max-width: 825px) {
        padding: 15px;
      }

      @media (max-width: 750px) {
        p {
          max-width: 220px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-bottom: 0;
        }
      }

      @media (max-width: 575px) {
        img {
          width: 35px;
          height: 35px;
        }
      }

      @media (max-width: 630px) {
        &__more {
          padding: 5px 20px;
        }
      }

      @media (max-width: 510px) {
        p {
          font-size: 12px;
          max-width: 150px;
        }

        &__more {
          font-size: 12px;
          padding: 2px 10px;
        }
      }
    }
  }

  .modal-decs {
    text-align: center;
    width: 78%;
  }

  .modal-title-delete {
    align-items: center;
    h4 {
      margin: 0 auto;
      font-size: 24px;
    }
  }

  .buttons-modal {
    width: 100%;
    display: flex;
    justify-content: space-evenly;

    &__no,
    &__yes {
      width: 89px;
      height: 50px;
      border-radius: 44px;
      font-size: 14px;
      line-height: 32px;
      color: white;
      border: none;
    }

    &__no {
      background: #a29eb6;
    }

    &__yes {
      background: #52b709;
    }
  }
}