:root {
  --admin-nav-bg-color: var(--color-bg-dark);
  --admin-nav-bg-color-tint: var(--color-bg-dark);
  --admin-nav-item-text-color: color-mod(var(--color-text-white) alpha(-37%));
  --admin-nav-item-text-active-color: var(--color-text-white);
  --page-header-padding: 2.375rem;
}

/* utility to get a simple common hover state for admin items */
.HoverItem:hover {
  background-color: var(--color-bg-medium);
  transition: background 0.2s linear;
}

.ContentTable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
}

.ContentTable thead {
  border-bottom: 1px solid var(--color-border);
}

.PageHeader {
  padding-top: var(--page-header-padding);
  padding-bottom: var(--page-header-padding);
}

.PageTitle {
  margin: 0;
}

.Table-actions {
  text-align: right;
}

.ContentTable .Table-actions {
  opacity: 0;
}

.ContentTable td,
.ContentTable th {
  padding: 1em;
}

.ContentTable th {
  color: var(--color-text-dark);
  padding: 1em;
}

/* TODO: remove this and apply AdminHoverItem to content rows */
.ContentTable tbody tr:hover {
  background-color: color-mod(var(--color-brand) alpha(-96%));
}

.ContentTable tr:hover .Table-actions {
  opacity: 1;
  transition: opacity 0.2s linear;
}

.AdminList {
  background-color: var(--color-bg-light);
  border: var(--border-size) var(--border-style) var(--color-border);
  border-radius: var(--default-border-radius);
  width: 266px;
  box-shadow: inset -1px -1px 3px var(--color-shadow);
  padding-bottom: 0.75em;
}

.AdminList-search {
  position: relative;
}

.AdminList-search .Icon {
  position: absolute;
  margin-top: auto;
  margin-bottom: auto;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-left: 1em;
  color: var(--color-text-light);
}

.AdminList-search .AdminInput {
  padding: 0.5em;
  padding-left: 2em;
  font-size: 18px;
  width: 100%;
  border-top-left-radius: var(--default-border-radius);
  border-top-right-radius: var(--default-border-radius);
  border-bottom-color: var(--color-border);
}

.AdminList-item {
  padding: 0.75em 1em 0.75em 1em;
  border: var(--border-size) var(--border-style) transparent;
  border-radius: var(--default-border-radius);
  margin-bottom: 0.25em;
}

.AdminList-item.selected {
  color: var(--color-brand);
}

.AdminList-item.selected,
.AdminList-item:hover {
  background-color: white;
  border-color: var(--color-border);
  margin-left: -0.5em;
  margin-right: -0.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  box-shadow: 0 1px 2px var(--color-shadow);
}

.AdminList-item.disabled {
  color: var(--color-text-medium);
  pointer-events: none;
}

.AdminList-section {
  margin-top: 1em;
  padding: 0.5em 1em 0.5em 1em;
  text-transform: uppercase;
  color: var(--color-text-light);
  font-weight: 700;
  font-size: smaller;
  padding-right: 15px; /* set so that table visibility icons align */
}

.AdminInput {
  color: var(--color-text-dark);
  padding: var(--padding-1);
  background-color: var(--color-bg-light);
  border: 1px solid transparent;
}
.AdminInput:focus {
  border-color: var(--color-brand);
  box-shadow: none;
  outline: 0;
}

.AdminSelect {
  display: inline-block;
  padding: 0.6em 0.9em;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-white);
  border-radius: var(--default-border-radius);
  font-weight: 700;
  min-width: 104px;
}

.AdminSelect:hover {
  border-color: color-mod(var(--color-border) blackness(10%));
}

.AdminSelectBorderless {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px;
}

.AdminSelect--borderless {
  border: none !important;
}
.AdminSelect--borderless .AdminSelect-content {
  margin-left: auto;
}
.AdminSelect--borderless .AdminSelect-chevron {
  margin-left: 0;
}

.AdminSelect-chevron {
  opacity: 0.75;
}

.AdminSelect:hover .AdminSelect-chevron {
  opacity: 1;
}

.MetadataTable {
  min-width: 800px;
}

.MetadataTable-title {
  background-color: var(--color-bg-white);
}

.TableEditor-table-name {
  font-size: 24px;
}

.TableEditor-field-name {
  font-size: 16px;
}

.TableEditor-table-description,
.TableEditor-field-description {
  font-size: 14px;
}

.TableEditor-field-visibility {
  /*color: var(--color-warning);*/
}

.TableEditor-field-visibility .ColumnarSelector-row:hover {
  background-color: var(--color-brand) !important;
  color: white !important;
}

.TableEditor-field-type .ColumnarSelector-row:hover {
  background-color: var(--color-brand) !important;
  color: white !important;
}

.TableEditor-field-semantic-type,
.TableEditor-field-target {
  margin-top: 3px;
}

.TableEditor-field-semantic-type .ColumnarSelector-row:hover,
.TableEditor-field-target .ColumnarSelector-row:hover {
  background-color: var(--color-brand) !important;
  color: white !important;
}

.SaveStatus {
  line-height: 1;
}

.SaveStatus:last-child {
  border-right: none !important;
}

.SettingsInput {
  width: 400px;
}

.SettingsPassword {
  width: 200px;
}

.UserActionsSelect {
  min-width: 180px;
}

.AdminTable {
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
}

.AdminTable th {
  text-transform: uppercase;
  color: var(--color-text-medium);
  padding: var(--padding-1);
  font-weight: normal;
}

.AdminTable thead {
  border-bottom: var(--border-size) var(--border-style) var(--color-border);
}

.AdminTable tbody tr:first-child td {
  padding-top: var(--margin-1);
}

.AdminLink {
  opacity: 0.435;
}

.AdminLink:hover {
  opacity: 1;
}

.ColumnSortHelper {
  box-shadow: 0 7px 20px var(--color-shadow);
}

#formField-details-password .Form-input {
  margin-bottom: 2em;
}