/**************************/
/*        Section         */
/**************************/

.section__fluid {
  width: 100%;
  display: flex;
  flex-direction: column;
}

section .header__container {
  background-color: white;
  padding-top: var(--gap3);
  padding-bottom: var(--gap3);
}

section .main__container {
  flex: 1;
  padding-top: var(--gap1);
  padding-bottom: var(--gap4);
  background-color: var(--lightest-grey);
}

.section__pagination {
  justify-content: flex-end;
  margin-top: -0.5rem;
  flex-wrap: nowrap;
}

/**************************/
/*     Tabbed layout      */
/**************************/

.sections {
  padding-top: var(--gap2);
  flex-direction: column;
  overflow: auto;
}

.section {
  scroll-margin: var(--navbar-height);
  margin-bottom: 3rem;
  width: 100%;
}

.section__title--info p.MuiTypography-root,
p.section__title.MuiTypography-root,
.section__title--info {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: bold;
}

p.section__title.MuiTypography-root {
  border-bottom: thin solid var(--separator-color);
  line-height: 30px; /* same as help component icon */
}

.section__title--info {
  border-bottom: thin solid var(--separator-color);
  align-items: center;
  display: flex;
  gap: 0.25rem;
}

.section__pagination {
  justify-content: flex-end;
  margin-top: -0.5rem;
  flex-wrap: nowrap;
}

/**************************/
/*        Toolbars        */
/**************************/

.toolbar__container {
  background-color: white;
  position: sticky;
  top: var(--navbar-height);
  z-index: 1090;
  border-bottom: solid thin var(--separator-color);
}

.toolbar {
  justify-content: space-between;
  flex-wrap: nowrap;
  column-gap: 0.625rem;
}

.toolbar svg {
  font-size: 1rem;
}

.toolbar__left,
.toolbar__right {
  flex: 1;
  column-gap: 0.625rem;
  row-gap: 1.8rem;
  padding: 0.8rem;
}

.toolbar__left {
  padding-right: 0;
}

.toolbar__right {
  padding-left: 0;
}

.toolbar__group {
  column-gap: 0.625rem;
}

.toolbar__group.left {
  border-right: solid thin var(--light-grey);
  padding-right: 0.625rem;
}

.toolbar__group.right {
  border-left: solid thin var(--light-grey);
  padding-left: 0.625rem;
}

.toolbar__left > div:last-child > .toolbar__group.left,
.toolbar__right > div:first-child > .toolbar__group.right {
  border: 0;
}

.toolbar__item {
  font-size: 1rem;
}

.toolbar__item--active > svg {
  color: var(--success);
}

.toolbar__item--partial > svg {
  color: var(--warning);
}

.toolbar__item--partial-blocked > svg {
  color: var(--warning);
  opacity: 0.35;
}

.toolbar__item--active-blocked > svg {
  color: var(--success);
  opacity: 0.35;
}

.toolbar__item--highlighted > svg {
  color: var(--warning);
}

.toolbar__item--highlighted-blocked > svg {
  color: var(--warning);
  opacity: 0.35;
}

/**************************/
/*         Tables         */
/**************************/

.table {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
}

.table a {
  text-decoration: none;
}

.table .table__link--level.MuiTableCell-root > .table__link--prevent-propagation > a {
  /* centers the level icon image */
  display: flex;
  align-items: center;
  justify-content: center;
}

.table .table--icon {
  font-size: 1rem;
}

/* row hover */

.table .table--row.Mui-selected:hover,
.table .table--row:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.table .table--row:not(.Mui-selected):hover {
  background-color: var(--lightest-grey);
}

.table .table--row:not(.Mui-selected):hover a:not(.MuiButtonBase-root),
.table .table--row:not(.Mui-selected):hover p.MuiTypography-root {
  text-decoration: underline;
  color: var(--primary);
}

/* text */

.table p.table__header,
.table p.table__text,
.table a.table__text {
  color: var(--text-primary-color);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 125%;
  word-break: inherit;
  /*font-weight: bold;*/
}

.table p.table__text:hover {
  /*text-decoration: underline;*/
}

.table p.table__text--no-link:hover {
  text-decoration: none;
}

/**************************/
/*        Dialogs         */
/**************************/

.dialog__header {
  padding: 1rem;
}

.dialog__title {
  margin-bottom: 1rem;
}

.dialog__message ul.MuiTypography-root,
.dialog__message p.MuiTypography-root,
.dialog__message {
  font-size: var(--fs-md);
  line-height: 150%;
  color: var(--text-secondary-color);
  margin-bottom: 0.625rem;
}

.dialog__actions {
  justify-content: space-between;
  background-color: var(--lightest-grey);
  padding: 1rem;
}

.dialog__buttons-right {
  column-gap: 0.625rem;
}

/**************************/
/*   Sidebar list menus   */
/**************************/

p.sidebar__title.MuiTypography-root {
  padding: 0.8rem 1rem;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  color: var(--text-secondary-color);
}

.aside-menu__title {
  text-transform: uppercase;
  color: var(--text-secondary-color);
}

a.aside-menu__button svg {
  font-size: 1.2rem;
}

.aside-menu__button .MuiListItemText-root {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
}

/* used to normalize react router's <Link> */
a.aside-menu__link {
  color: var(--text-primary-color);
  text-decoration: none;
}

/**************************/
/*  Export/import dialog  */
/**************************/

.import-export__accordion {
  background-color: var(--lightest-grey);
  box-shadow: none;
  max-width: 100%;
  border: none;
}

.import-export__accordion p.title {
  text-transform: uppercase;
  display: inline;
}