:host {
  display: block;
}

.svg-container {
    display: flex;
    width: 185px;
    height: 125px;
    border-radius: 8px;
    background-color: #f7f7f7;
    padding: 10px 12px;
    box-sizing: border-box;
    position: relative;
  }
  
  .svg-container__background{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .svg-container__header {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
  }
  
  .svg-container__circle {
    width: 9px;
    height: 9px;
    border-radius: 50%;
  }
  
  .svg-container__circle--red {
    background-color: #ed7678;
  }
  
  .svg-container__circle--yellow {
    background-color: #eddb76;
  }
  
  .svg-container__circle--green {
    background-color: #7ad08e;
  }
  
  .svg-container__section{
    width: 100%;
  }
  
  .svg-container__collumn {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .svg-container__inline {
    display: flex;
    flex-direction: row;
    gap: 6px;
  }
  
  .svg-container__line {
    height: 13px;
    border-radius: 4px;
    background-color: #d9d9d9;
    margin-bottom: 4px;
  }
  
  .svg-container__line--short {
    width: 39.68px;
    height: 7px;
    border-radius: 3.5px;
  }
  
  .svg-container__line--long {
    width: 100%;
  }