//for semanticAnalysisForDiscussion
.semantic-analysis-container {
  .banner {
    align-items: center;
    background-position-x: -50px;
    background-size: cover;
    display: flex;
    height: 107px;
    width: 100%;

    .margin-lr {
      margin-right: 0;
      margin-left: 0;
    }

    h1 {
      color: $white;
      font-family: $font-family4;
      font-size: 20px;
      letter-spacing: 1.1px;
    }
  }
}

.semantic-analysis {
  color: $black;
  font-family: $font-family, sans-serif;

  h3 {
    font-family: $font-family;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.3;
  }

  h4 {
    color: $black;
    font-family: $font-family4;
    font-size: 18px;
    letter-spacing: 0;
  }

  div {
    color: $black;
    font-family: $font-family4;
    font-size: 18px;
    letter-spacing: 1.1px;
    line-height: 1.78;
  }

  .padding-top {
    padding-top: 20px;
  }

  .sentimentBar {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
  }

  &.container {
    padding-top: 10px;
    padding-bottom: 30px;
  }
}

@media screen and (min-width: $screen-sm-min) {
  .semantic-analysis {
    h4 {
      font-size: 25px;
      text-align: center;
    }

    .sm-margin-m {
      margin-top: 20px;
      margin-bottom: 0;
    }

    .sentimentBar {
      margin-top: 5px;
      width: 38%;
    }
  }

  .semantic-analysis-container {
    .banner {
      height: 134px;

      .margin-lr {
        margin-right: auto;
        margin-left: auto;
      }

      h1 {
        font-size: $font-size-xll;
      }
    }
  }
}

@media screen and (min-width: $screen-md-min) {
  .semantic-analysis {
    .sentimentBar {
      margin-top: 15px;
      width: 45%;
    }

    .md-wordcloud-padding {
      padding-right: 30px;
      padding-top: 20px;
    }

    .slider {
      margin-bottom: 100px;
      padding-right: 20px;
    }
  }
}

@media screen and (min-width: $screen-md-min) {
  .semantic-analysis-container {
    .banner {
      background-position-x: 0;
    }
  }
}

@media screen and (min-width: $screen-lg-min) {
  .semantic-analysis {
    h4 {
      font-size: 30px;
    }

    .keyword-info {
      margin-bottom: 20px;
    }

    .md-wordcloud-padding {
      padding-right: 60px;
    }

    .padding-l {
      padding-left: 0;
      padding-right: 20px;
    }

    .slider {
      margin-top: 40px;
    }
  }

  .semantic-analysis-container {
    .banner {
      height: 193px;

      h1 {
        font-size: $font-size-xxl;
      }

      .margin-lr {
        margin-right: auto;
        margin-left: auto;
      }
    }
  }
}

@media screen and (min-width: $screen-xl-min) {
  .semantic-analysis {
    h4 {
      font-size: 30px;
    }

    .keyword-info {
      margin-bottom: 40px;
    }

    .slider {
      margin-bottom: 100px;
    }

    .sentimentBar {
      margin-top: 15px;
      width: 40%;
    }
  }
}

@import '../js/app/components/common/loader/loader.scss';
@import '../js/app/components/common/title/title.scss';
@import '../js/app/components/common/toolbarSlider/toolbarSlider.scss';
@import '../js/app/components/common/titleTooltip/titleTooltip.scss';
@import '../js/app/components/common/titleWithTooltip/titleWithTooltip.scss';
@import '../js/app/components/common/wordCloud/wordCloud.scss';
@import '../js/app/components/common/keywordInfo/keywordInfo.scss';
@import '../js/app/components/common/wordCountInformation/wordCountInformation.scss';
@import '../js/app/components/common/sentimentBar/sentimentBar.scss';
