:root {
  --grey: #9ca3ab;
  --grey-soft-light: hsl(125deg 0% 96%);
  --grey-light: #d5d9dd;
  --grey-medium: #757f8a;
  --grey-medium-dark: #4a5057;
  --grey-soft-dark: #26292c;
  --grey-dark: #1e2124;
  --color-accent: hsl(125deg 45% 44%);
  --color-accent-muted: hsl(125deg 50% 39%);
  --color-accent-light: hsl(125deg 50% 60%);
  --color-mint: hsl(125deg 100% 94%);
  --color-bg: #fff;
  --color-text: #1f262e;
  --line-height-global: 1.5;
  --lh-nav: 185;
  --fz-global: 16;
  --fz-global: 17;
  --fz-sm: .875rem;
  --nav-list-indent: 3ch;
  --pad-h-mobile: .875rem;
  --pad-h-tablet: 2.25rem;
}

.AdminThemeUikit {

  [id="pw-mastheads"] {
    #pw-masthead,
    #pw-masthead-mobile {
      place-content: center;
      background-color: var(--grey-soft-dark);
      .uk-navbar {
        a {
          letter-spacing: .025em;
          color: var(--grey-light);
          &:hover {
            color: var(--color-mint);
          }
        }
        .uk-active a {
          color: var(--color-bg);
        }
        .pw-search-form {
          .pw-search-input {
            border-radius: 0;
            color: var(--grey);
            border-color: var(--grey-medium-dark);
            font-weight: 300;
            letter-spacing: .025em;
            &:focus {
              background: var(--grey-dark);
            }
          }
          .uk-form-icon {
            color: var(--grey-medium);
          }
        }
      }
    }
    .pw-logo-link {
      background-image: url('https://atelierbram.com/favicon.svg?v9');
      width: 3rem;
      height: 3rem;
      display: block;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .pw-logo {
      display: none;
    }
  }
  .uk-description-list {
    > dt {
      color: var(--grey-medium-dark);
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: .05em;
    }
    .fa.fa-3x {
      font-size: 1.5em;
    }
  }
  #main .notes,
  .uk-alert-primary {
    background: var(--color-mint);
    color: var(--color-text);
  }
  .pw-notices .NoticeMessage a.notice-remove {
    color: var(--grey-medium-dark);
  }
  h1,
  .uk-h1 {
    font-size: 1.75rem;
    line-height: 1.15;
  }
  .uk-button-text,
  .uk-tab a,
  a {
    color: var(--color-accent);
    &:hover {
      color: var(--grey-medium-dark);
      text-decoration: none;
    }
  }
  .Inputfields {
    input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.uk-form-blank),
    .Inputfields textarea:not(.uk-form-blank) {
      background-color: var(--grey-soft-light);
      border-color: var(--grey-light);
    }
    .uk-form-custom .uk-button,
    .InputfieldRepeaterAddLink {
      display: inline-flex;
      gap: .33ch;
      align-items: center;
      font-weight: 600;
    }
    .InputfieldRepeater:not(.InputfieldIsColor):not(.InputfieldNoBorder) > .InputfieldHeader,
    .InputfieldRepeater:not(.InputfieldIsColor):not(.InputfieldNoBorder) > .InputfieldContent {
      background: var(--grey-soft-light);
    }

    .langTabs .uk-tab > li,
    .langTabs .uk-tab > li > a {
      letter-spacing: .05em;
    }
    .langTabs .ui-tabs-nav > li.uk-active > a,
    .langTabs .uk-tab > li.uk-active > a {
      color: var(--color-text);
      font-weight: 600;
      background: var(--grey-light);
    }
    .Inputfield {
      .selectize-control.multi .selectize-input.has-items > div {
        background: var(--grey-soft-light);
        border-color: var(--grey-light);
        /* border-radius: 0; */
      }
      .selectize-input {
        border-color: var(--grey-light);
      }
    }
  }
  .uk-tab > .uk-active > a {
    font-weight: 600;
    color: var(--grey-medium-dark);
    letter-spacing: .025em;
  }
  :not(pre)>code,
  :not(pre)>kbd,
  :not(pre)>samp {
    color: var(--grey-medium-dark);
  }
  .pw-panel-container .pw-panel-button.ui-button,
  .ui-button,
  .ui-button.ui-state-default {
    border-radius: 0;
    color: #fff;
    background: var(--color-accent);
    letter-spacing: .025em;
    &:hover {
      background: var(--color-accent-muted);
    }
  }
  .ui-button.ui-state-hover {
    background: var(--color-accent-muted);
  }
  .PageList {
    .PageListItem {
      a.PageListPage {
        color: var(--color-text);
      }
      &.PageListItemOpen {
        border-color: hsl(125deg 16% 89.8%);
        background: hsl(125deg 16% 98%);

        > a.PageListPage > span {
          font-weight: 600;
          letter-spacing: .025em;
        }
        > a.PageListPage,
        &.PageListItemHover > a.PageListPage,
        > a.PageListPage:hover,
        &.PageListItemHover > a.PageListPage:hover {
          color: var(--color-accent);
        }
      }
      .PageListActions {
        margin-left: 1em;

        &[style*="display: inline"] {
          display: inline-flex !important;
          gap: .25em;
          li {
            margin: 0;
          }
        }
      }
    }
    .PageListActions a,
    .PageList .PageListerActions a,
    .PageList .PageListMoveNote a {
      border-radius: 0;
      background: var(--color-accent);
      font-size: .75em;
      padding: .2em 1em;
      font-weight: normal;
      letter-spacing: .025em;

      &:hover {
        color: #fff;
        background: var(--color-accent-muted);
      }
    }
  }
  .detail, .notes, .pw-detail, .pw-notes, .PageList .PageListNumChildren {
    color: var(--grey) !important;
  }
  .PageList .PageListNumChildren,
  .PageListItemOpen span.PageListNote,
  .PageListSorting .PageListSortItem span.PageListMoveNote {
    font-size: .875em;
    padding-left: 0.75em;
  }

  .pw-content {
    .Inputfield >.InputfieldHeader {
      color: var(--grey-medium);
      letter-spacing: .025em;

      &:hover {
        color: var(--grey-medium-dark);
      }
    }
    .Inputfields .InputfieldRepeater .InputfieldContent .InputfieldRepeaterItem >.InputfieldHeader {
      background: var(--color-accent);
      outline-color: var(--color-accent);

      .InputfieldRepeaterItemLabel {
        font-weight: 600;
        letter-spacing: .025em;
      }
      &:hover {
        color: #fff;
        background: var(--color-accent-muted);
      }
    }
    .InputfieldStateRequired > .InputfieldHeader:first-child:after {
      color: var(--color-text);
    }
  }
  ::selection {
    background: var(--color-accent-light);
  }
}