@use 'sass:color';
@use '@angular/material' as mat;

.content-container {
  display: flex;
  padding-left: 5px;
  padding-right: 5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tabular-list-container {
  height: 100%;
  width: 100%;
  display: flex;
  padding: 10px;
  margin: 10px;
}

.item-detail-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 5px;
  width: 100%;
}

.item-edit-container {
  display: flex;
  flex-direction: column;
  width:100%;
  max-width:800px;
  justify-content: left;
  align-items: center;
  text-align: center;
}

.item-edit-header {
    display: inline;
    width: 100%;
    margin-top: 5px; 
    margin-bottom: 5px;
}

.item-field{
    padding: 5px;
}

.item-card {
  margin-bottom: 8px;
  margin-right: 5px;
  padding-right: 5px;
  height:100%;
  width:100%;

  &:hover {
      background-color: var(--mat-sys-surface-container-high);
  }
}

.image-holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 5px;
}

.button-container{
    margin: 5px;
}

.button-group{
    margin:5px;
    display: flex;
    flex-direction: row;
}

.form-card{
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: flex;
  width: 100%;
}

.form-card-left{
  justify-content:center;
  align-items: left;
  flex-direction: column;
  display: flex;
  width: 100%;
}

.form-field{
    padding: 5px;
}

.form-field-wide{
    padding: 5px;
    width:100%;
}

.form-action-button{
    margin: 5px;
}