.wrapper {
  max-width: $max-width;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  .topRow {
    display: flex;
    position: sticky;
    top: 50px;
    z-index: 2;
    background-color: rgba(229, 235, 242, 1);
    padding-top: 30px;

    .searchBox {
      flex-grow: 2;
      color: #4f6176;
      margin-bottom: 20px;

      input {
        font-size: 15px;
        width: 425px;
        padding: 6px;
      }
    }

    .createDaoButton {
      text-align: right;
      align-self: center;
      padding-right: 26px;
      margin-bottom: 20px;

      a {
        border-radius: 15px;
        background-color: rgba(3, 118, 255, 1);
        color: $white;
        font-family: $body-font;
        font-weight: $bold;
        font-size: 13px;
        padding: 8px 12px;
        height: 30px;
        line-height: 30px;
        white-space: nowrap;
      }
    }
  }

  .yourDaos,
  .otherDaos {
    .headerWrapper {
      position: sticky;
      top: 130px;
      z-index: 1;
    }

    .headerTitle {
      width: 100%;
      background-color: rgba(229, 235, 242, 1);

      h2 {
        color: rgba(104, 155, 214, 1);
        display: inline-block;
        font-size: 28px;
        font-weight: bold;
        border-bottom: 1px solid rgba(195, 212, 231, 1);
        padding: 0;
        margin: 0;
      }

      .emailIcon {
        color: rgb(104, 155, 214);
        padding-left: 25px;
        font-size: 25px;

        &:hover {
          cursor: pointer;
          color: rgba(3, 118, 255, 1);
        }
      }
    }
    .daoList {
      padding-top: 30px;
    }

    // ****** DAO Card **** //
    a.daoLink {
      text-decoration: none;
      color: $white;
      text-align: left;

      .daoInactive {
        opacity: 0.65;

        .daoName {
          opacity: 0.8;
        }
        &:hover {
          cursor: not-allowed;
        }
      }

      .daoTitle {
        border-radius: 15px 15px 0 0;
        padding: 10px 10px 10px 30px;
        margin-bottom: 10px;
        color: $white;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .daoName {
          font-size: 25px;
          font-weight: bold;
          display: inline-block;
          overflow-x: hidden;
          margin-right: 5px;
        }

        .inactiveFeedback {
          float: right;
          position: relative;
          bottom: 21px;

          .time {
            display: inline-block;
            position: relative;
            bottom: 14px;
            right: 16px;
            font-size: 20px;
          }
        }
      }

      .daoInfo {
        color: $black;
        font-size: $body;
        width: 100%;
        display: inline-block;
        padding: 20px 0;

        b {
          font-size: 25px;
          text-align: center;
          display: block;
        }

        span {
          display: block;
          text-align: center;
          font-size: 16px;
          color: $gray-1;
        }
      }
    }

    .dao {
      width: 335px;
      background-color: $white;
      border-radius: 15px;
      display: inline-block;
      margin: 0 0 20px 20px;
      position: relative;
      left: -15px;
      top: 10px;
      box-shadow: 0 0 15px 0 rgba(133, 168, 208, 0.15);
    }

    table.daoInfoContainer {
      text-align: center;

      width: 100%;
      tr > td {
        width: 40%;
        border: 0;
        padding: 0;
      }
      tr > td:first-child,
      tr > td:last-child {
        width: 10%;
      }
    }
  }
}

// ****** EO DAO Card **** //

@media only screen and (max-width: 710px) {
  .wrapper {
    .topRow {
      .searchBox {
        padding-right: 16px;
        input {
          width: 100%;
        }
      }
    }
  }
}

@media only screen and (max-width: 635px) {
  .wrapper {
    width: auto;
    padding: 0;

    .topRow {
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: center;

      .searchBox {
        padding-right: 20px;
        input {
          width: 100%;
        }
      }
    }

    .yourDaos,
    .otherDaos {
      .headerWrapper {
        top: 178px;
      }

      .headerTitle {
        text-align: left;

        h2 {
          padding: 0 0 0 10px;
        }
      }

      .daoList {
        padding-left: 20px;
        padding-right: 20px;
      }

      .dao {
        width: 100%;
        border-radius: 15px;
        margin: 0 0 20px 0;
        left: 0;
      }

      a.daoLink .daoName {
        border-radius: 0 0 0 0;
      }

      a.daoLink .daoInfo b {
        font-size: 20px;
      }

      a.daoLink .daoInfo {
        span {
          font-size: 13px;
          font-weight: normal;
          font-family: "Open Sans";
        }
      }

      a.daoLink .daoInfo {
        padding: 18px 0;
      }

      a.daoLink .daoTitle {
        padding: 10px 10px 10px 30px;
      }

      table.daoInfoContainer {
        tr > td {
          width: 45%;
        }

        tr > td:first-child,
        tr > td:last-child {
          width: 10%;
        }
      }
    }
  }
}
