@import "src/assets/scss/variables";

.rescom-box-container {
  width: 100%;
  border: 1px solid #DFDFDF;
  border-radius: 7px;
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  &:not(:first-child){
    margin-left: -1rem;
  }

  .rescom-box {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    .rescom-box-title-link {
      display: flex;
      align-items: center;

      & p{
        margin: 0rem 2.8rem 0rem 3.7rem;
        font-size: 1.8rem;
        font-weight: 900;
        color: $title-color;
      }

      .rescom-box-arrow {
        transform: rotate(270deg);
      }
    }

    .rescom-bar-chart-container{
      width: 100%;
      margin-top: 2.3rem;

      .bar-chart-x-labels {
        font-size: 11px;
        color: $black!important;
      }

      div {
        max-height: 100% !important;
      }
    }
  }

  @media (max-width: 1850px) {
    width: auto;
  }

  @media (max-width: 1400px) {
    &:not(:first-child){
      width: 650px;
      margin-left: 0;
    }
  }
}