body {
  transition: display ease-in 1s !important;
}

.name, .component-status  {
  text-transform: capitalize;
  letter-spacing : 0.3px;
}
.component-status{
font-weight : bold;
}
.page-status{
  margin-bottom : 0 !important;
}

.child-components-container {
padding-left : 0 !important ;
    }

.components-container{
display: grid;
  grid-template-columns: repeat(2, 1fr);}


.icon-indicator{
display : block !important;
  align-self : center;
}.wrapper {
  display: flex !important;
  flex-direction: column;
  width: 90%;
}
.component-inner-container {
  display: flex !important;
  justify-content: space-between;
}

.component-statuses-legend{
display : flex;
  gap : 15px;
  justify-content : space-evenly;
  margin-right : 0 !important;
  padding : 15px;
  border : 1px solid #f0f0f0;
  background : #f5f5f5;
  border-top-left-radius : 5px;border-top-right-radius : 5px;
  
}

.legend-item{
display : flex !important;
  align-items : center;
}

.service-status{
text-transform : capitalize;
}

.component-container:first-child{
border-top : none !important;
}

@media (max-width: 900px) {
  .components-container{
  grid-template-columns : 1fr
  }
  
  .component-container:first-child{
border-top : 1px solid #f0f0f0 !important;
}
  
  .component-statuses-legend{
  display : none
  }
}