.modal {
  border-radius: 20px;
  .modal-content {
    border-radius: 10px;
    max-height: 70vh;
    // width: 66%;
    border: 0px;
    // overflow-y: scroll;
    overflow-x: hidden;
    background: #ffffff;
    /* border: 1px solid #CCCCCC; */
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
  }

  .modal__header {
    .modal__title {
      .modal__main-title {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: $font-weight-bold;
        font-size: 27px;
        line-height: 29px;
        color: $color-modal-title;
        padding-bottom: 3px;
        margin-bottom: 2px;
      }
      .modal__mini-title {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: $font-weight-normal;
        font-size: 12px;
        line-height: 19px;
        color: $color-modal-miniheader;
        letter-spacing: 0.2em;
        padding-top: 5px;
      }
      .search_btn {
        width: 6vw;
        height: 5vh;
        background: rgb(250, 251, 252);
        border-radius: 100px;
        color: #1a73e8;
        padding: 0.3em;
        margin-left: 1em;
      }
      .edit__post__option {
        float: right;
        margin-left: 12vw;
        font-size: 15px;
        cursor: pointer;
        border: 0px;
        text-decoration: underline;
      }
      .delete__post__option {
        float: right;
        margin-left: 1vw;
        font-size: 15px;
        cursor: pointer;
        border: 0px;
        text-decoration: underline;
      }
    }
    .modal__search {
      width: 50%;
      border: 1px solid #cccccc;
      box-sizing: border-box;
      border-radius: 5px;
      padding-left: 5px;
    }
    input::placeholder {
      font-family: Inter;
      font-style: normal;
      font-weight: normal;
      font-size: 15px;
      line-height: 5px;
      color: #90949c;
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }
  .modal__body {
    overflow-y: scroll;
    .tabs__container {
      width: 100%;
      margin-left: 0px;
      margin-top: -20px;
      .nav__tab {
        .nav__list__container {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          list-style: none;
          border-bottom: 2px solid #eee;
          transition: all 0.5s;
          font-weight: 300;
          color: #262727;

          .nav__single__tab {
            display: inline-block;
            font-family: Inter;
            font-style: normal;
            font-weight: 500;
            font-size: 18px;
            line-height: 22px;
            padding-left: 11px;
            padding-right: 15px;
            padding-bottom: 5px;
            margin-left: 19px;
            text-align: center;
            cursor: pointer;

            &.selected {
              border-bottom: 3px solid #1a73e8;
              color: #1a73e8;
              .tab__icon {
                margin-right: 5px;
              }
            }
            .tab__icon {
              margin-right: 5px;
              font-size: 15px;
            }
          }
        }
      }
    }
    .modal__body-sharebutton {
      margin-right: 8px;
    }
    .modal__mini-title {
      font-family: $font-family-Inter;
      font-style: normal;
      font-weight: $font-weight-normal;
      font-size: 12px;
      line-height: 19px;
      color: $color-modal-miniheader;
      letter-spacing: 0.2em;
      padding-top: 5px;
    }
    .modal__form {
      .modal__row {
        .modal__group {
          .modal__label {
            font-family: $font-family-Inter;
            font-weight: $font-weight-normal;
            font-size: 14px;
            color: $color-modal-form-label;
            margin-bottom: 3px;
            line-height: 17px;
          }
          .modal__post {
            border: 0.75px solid $color-modal-field-border;
            box-sizing: border-box;
            border-radius: 5px;
            text-align: left;
            resize: none;
          }
          .modal__message {
            font-family: $font-family-Inter;
            font-style: normal;
            font-weight: $font-weight-normal;
            font-size: 14px;
            line-height: 17px;

            color: $color-modal-message;
          }
          .upload_community_logo {
            height: 15vh;
            width: 11vw;
            margin-left: 0px;
            margin-top: -0.3em;
            border-radius: 50%;
            border: 1px solid #cccccc;
            box-sizing: border-box;
            border-radius: 5px;
          }
          .modal__textSelection {
            font-style: italic;
            display: block;
            color: #6c757d;
          }
          .form-control:disabled,
          .form-control[readonly] {
            background-color: #ffffff;
          }
        }
      }
      .modal__secondary-title {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: $font-weight-normal;
        font-size: 12px;
        line-height: 19px;
        color: $color-modal-miniheader;
        letter-spacing: 0.2em;
        padding-top: 18px;
      }
    }
    .modal__follower {
      display: flex;
      border-radius: 20px;
      margin-top: 15px;
      margin-bottom: 10px;
      // justify-content: center;
      margin-left: 6px;
      align-items: center;
      .follower__image {
        border: 1px solid #e6e6e5;
        border-radius: 5px;
        min-width: 56px;
        margin-left: 10px;
        padding: 5px;
      }
      .follower__content {
        padding-left: 10px;
        padding-right: 10px;
        width: 50%;
      }
      .follower__btn__container {
        margin-right: 3px;
      }
      .modal__followerPhoto {
        margin-top: 3px;
        height: 43px;
        width: 43px;
      }
      .modal__followerName {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: $font-weight-bold;
        font-size: 16px;
        display: block;
        color: $color-modal-follower-name;
      }
      .modal__followerDescription {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        color: $color-modal-follower-description;
        display: block;
      }
      .modal__followButton {
        background: #fff;
        // box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
        // border-radius: 34px;
        width: 83px;
        height: 4.5vh;
        text-align: center;
        padding: 0px;
      }
      .modal__unFollowButton {
        background: #007bff;
        // box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
        // border-radius: 34px;
        width: 83px;
        height: 4.5vh;
        text-align: center;
        padding: 0px;
      }
      .modal__followText {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: $font-weight-normal;
        font-size: 12px;
        line-height: 15px;

        color: #1a73e8;
      }
      .modal__unFollowText {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: $font-weight-normal;
        font-size: 12px;
        line-height: 15px;

        color: #ffff;
      }
    }
    .modal__member {
      display: flex;
      border-radius: 20px;
      margin-top: 15px;
      margin-bottom: 10px;
      margin-left: 10px;
      align-items: center;
      .member__image {
        border: 1px solid #e6e6e5;
        border-radius: 5px;
        min-width: 56px;
        // margin-left: 10px;
        padding: 5px;
      }

      .member__content {
        padding-left: 10px;
        padding-right: 10px;
        margin-right: 40px;
        width: 50%;
      }

      .modal__memberPhoto {
        margin-top: 3px;
        height: 43px;
        width: 43px;
      }

      .member__btn__container {
        margin-right: 3px;
      }

      .modal__memberName {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: $font-weight-bold;
        font-size: 16px;
        display: block;
        color: $color-modal-follower-name;
      }

      .modal__memberDescription {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        color: $color-modal-follower-description;
        display: block;
      }
      .modal__remove__followButton {
        border: 1px solid #eb5757;
        box-sizing: border-box;
        // box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
        // border-radius: 34px;
        background: transparent;
        width: 83px;
        height: 4.5vh;
        text-align: center;
        padding: 0px;

        .remove_followText {
          font-family: Inter;
          font-style: normal;
          font-weight: 500;
          font-size: 12px;
          line-height: 15px;
          color: #eb5757;
        }
      }
      .modal__removed__followButton {
        border: 1px solid #eb5757;
        box-sizing: border-box;
        // box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
        // border-radius: 34px;
        background: #eb5757;
        width: 83px;
        height: 4.5vh;
        text-align: center;
        padding: 0px;

        .remove_followText {
          font-family: Inter;
          font-style: normal;
          font-weight: 500;
          font-size: 12px;
          line-height: 15px;
          color: #ffff;
        }
      }
    }
    .add__member {
      .add__member__form {
        .email__header {
          font-family: Inter;
          font-style: normal;
          font-weight: 500;
          font-size: 14px;
          line-height: 17px;
          color: #000000;
        }
        .add__member__input__container {
          display: flex;
          .invite__btn {
            margin-left: 3px;
            background: #1a73e8;
            // box-shadow: 1.26667px 2.53333px 6.33333px rgba(0, 0, 0, 0.1);
            // border-radius: 43.0667px;
            width: 83px;
            height: 5.2vh;
            padding: 2px;
            font-family: "Inter";
            font-size: 13px;
          }
        }
        .share__btn__container {
          display: flex;
          flex-wrap: wrap;
          .invite__btn {
            margin-right: 10px;
            background: #1a73e8;
            // box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
            // border-radius: 20px;
            width: 83px;
            height: 4.5vh;
            padding: 0px;
            font-family: "Inter";
            font-size: 13px;
          }
          .share__text {
            font-family: "Inter";
            font-style: normal;
            font-weight: normal;
            font-size: 13px;
            line-height: 16px;
            color: #90949c;
            width: 100%;
            padding-top: 1em;
          }
        }
      }
    }
  }
  .modal__buttons {
    .modal__save {
      background: $color-modal-button-active;
      box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
      // border-radius: 34px;
      width: 80px;
      height: 38.5px;
      margin-right: 20px;
      margin-bottom: 10px;
      margin-left: 14px;
      .modal__buttontext {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 22px;
        /* identical to box height */

        color: #ffffff;
      }
    }
    .modal__cancel {
      border: 1px solid #1a73e8;
      background: $color-modal-button-inactive;
      box-sizing: border-box;
      // border-radius: 34px;
      margin-right: 20px;
      margin-bottom: 10px;
      width: 80px;
      height: 38.5px;
      .modal__buttontext {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: $font-weight-normal;
        font-size: 14px;
        line-height: 22px;
        /* identical to box height */
        color: #1a73e8;
      }
    }
    .modal__delete {
      border: 1px solid #eb5757;
      background: $color-modal-button-inactive;
      box-sizing: border-box;
      // border-radius: 34px;
      margin-right: 20px;
      margin-bottom: 10px;
      width: 80px;
      height: 38.5px;
      .modal__buttontext {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: $font-weight-normal;
        font-size: 14px;
        line-height: 22px;
        /* identical to box height */
        color: #eb5757;
      }
    }
  }
}

.modal__body {
  .modal__setting__btn__container {
    .modal__save {
      background: $color-modal-button-active;
      box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
      // border-radius: 34px;
      width: 80px;
      height: 38.5px;
      margin-right: 20px;
      margin-bottom: 10px;

      .modal__buttontext {
        font-family: $font-family-Inter;
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 22px;
        /* identical to box height */

        color: #ffffff;
      }
    }
  }
}

.modal__body {
   .modal__setting__btn__container {
     .modal__save {
       background: $color-modal-button-active;
       box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
       // border-radius: 34px;
       width: 80px;
       height: 38.5px;
       margin-right: 20px;
       margin-bottom: 10px;

       .modal__buttontext {
         font-family: $font-family-Inter;
         font-style: normal;
         font-weight: bold;
         font-size: 14px;
         line-height: 22px;
         /* identical to box height */

         color: #ffffff;
       }
     }
   }
}
