.services{
    display: flex;
    flex-direction: row;   
    gap: 16px;
}

.service { 
  display: flex; 
  flex-direction: row;  
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  color: var(--text); 
  background-color: var(--panel);  
  border-radius: 8px;  
  width: 300px; 
  min-height: 150px; 
  padding: 8px;  
  transition: all 0.2s ease-in-out;  
}

.service:hover{
    transform: scale(1.01); 
    background-color: var(--selected);
    /* border: 1px solid var(--selected); */
}

.service p {
  font-weight: 600;
  margin: 0;
  padding: 0;
}

.status-container{
  display: flex;

  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.service-status{

  border-radius: 50%;

  width: 16px;
  height: 16px;

}
.status-container p{
  font-size: 12px;
  padding: 0;
  margin: 0;
  margin-top: 4px;
  font-weight: 300;

  color: var(--muted);
}

._active{
    background-color: #6EC531;
}
._inactive{
    background-color: red;
}