@import 'elements';

.indexForumMarginTop {
  width: 100%;
  height: 300px;
}

.indexForum {
  @include backgroundDefaultDivStyle;

  position: relative;
  z-index: 0;

  width: 1400px;
  height: auto;

  margin-left: auto;
  margin-right: auto;
}

  @mixin forumDiv {
    width: 91%;
    height: 60px;

    padding-bottom: 3%;
    padding-left: 4.5%;
    padding-right: 4.5%;

    margin-top: 3%;

    margin-left: auto;
    margin-right: auto;
  }

  @mixin gapTopBetweenElements {
    border-bottom: 2px dashed;
    border-color: rgba(117,82,29,0.7);
  }

  @mixin gapBetweenItems {
    border-bottom: 1px dashed;
    border-color: rgba(117,82,29,0.7);
  }

  @mixin gapBetweenSections {
    border-right: 1px dashed;
    border-color: rgba(117,82,29,0.7);
  }

  .forumTitle {
    @include forumDiv;
    @include gapTopBetweenElements;
    p {
      font-size: 50px;
      float: left;
      margin-right: 50px;
    }

    button {
      float: right;
      margin-top: 15px;
    }

    :last-child{
      float: right;
      font-size: 20px;
      margin-top: 20px;
    }

     :first-child {
       font-size: 20px;
       margin-top: 20px;
     }

  }

  .forumItemsList {
    @include gapTopBetweenElements;

    .forumListItem:last-child{
      border-bottom: 0px dashed;
    }
  }
    .forumListItem {
      width: 90%;
      height: 50px;
      padding-right: 5%;
      padding-left: 5%;
      padding-top: 15px;

      @include gapBetweenItems;

      p:first-child {
        font-size: 30px;
        float: left;
      }

      p:last-child {
        float: right;
        padding-top: 10px;
        min-width: 120px;
        text-align: right;
      }


      div {
        float: right;
        width: auto;
        margin-top: -5px;

        img {
          width: 30px;
          height: 30px;
          margin-top: 5px;
          margin-right: 20px;
        }
        button {
          float: left;
          margin-right: 40px;
        }
      }

      &:last-child{
        border-bottom: 0px;
      }

      &:hover {
        background-color: rgba(22,28,29,0.5);
      }
    }

    .forumListComment {
      width: 100%;
      height: auto;
      transition-duration: 0.5s;
      display: flex;

      @include gapBetweenItems;

      &:last-child{
        border-bottom: 1px;
      }
    }

    .commentAvatar {
      width: 20%;
      padding: 50px;
      padding-bottom: 30px;
      text-align: center;
      @include gapBetweenSections;

      img {
        width: 200px;
        height: 200px;
        margin-bottom: 20px;
      }
    }
    .commentText {
      width: 47.5%;
      height: auto;

      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 2.5%;
      padding-right: 2.5%;

      word-wrap: break-word;

      @include gapBetweenSections;
    }
    .commentRating {
      width: 15%;
      height: 100px;

      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 2.5%;
      padding-right: 2.5%;

      text-align: center;
    }

    .forumFormSubject {
      @include forumDiv;

      height: auto;
      display: flex;
      transition-duration: 0.5s;

      @include gapTopBetweenElements;
      form {
        width: 100%;
      }
      input {
        width: 100%;
        float: left;
        text-align: left;
      }
      select {
        width: 100%;
        float: left;

      }
      textarea {
        width: 100%;
        height: 200px;
        float: left;
      }
      button {
        float: right;
      }
      p {
        padding-top: 10px;
        margin-right: 50px;
        float: left;
      }
    }

    .forumFormComment {
      @include forumDiv;

      height: auto;
      display: flex;
      transition-duration: 0.5s;

      @include gapTopBetweenElements;
      textarea {
        width: 100%;
        height: 200px;
      }
      button {
        float: right;
      }
      p {
        padding-top: 10px;
        margin-right: 50px;
        float: left;
      }
    }

  .forumFoot {
    @include forumDiv;
    button {
      float: right;
    }
  }

.forumHiddenDiv {
  height: 0px;
  display: none;
  transition-duration: 0.5s;
}
