.anchorselectorfield {
  &__indicator {
    color: var(--cms-text-colour);
  }

  &__control {
    color: var(--cms-text-colour);
    border-color: var(--cms-border-colour);
    background-color: var(--cms-background-colour--dark);
  }

  &__control--menu-is-open & {
    &__value-container {
      * {
        opacity: 1;
      }
    }
  }

  &__value-container {
    * {
      opacity: .5;
      color: var(--cms-text-colour);
    }
  }

  &__menu {
    border: 1px solid var(--cms-border-colour);
    background-color: var(--cms-background-colour--dark);

    &,
    * {
      border-radius: 3px;
      color: var(--cms-text-colour);
    }

  }

  &__option {
    background-color: transparent;

    &:hover {
      color: var(--cms-accent-text-colour, var(--cms-background-colour--dark));
      background-color: var(--cms-accent-colour);
    }
  }
}

.form-check-label {
  span {
    &:before {
      border-color: var(--cms-border-colour) !important;
      background-color: transparent !important;
    }
  }

  input:checked+span {
    &:before {
      background-color: var(--cms-background-colour--light) !important;
    }
  }
}

.griddle-footer {
  margin-top: 40px;
  margin-bottom: 40px;

  .griddle-previous,
  .griddle-next {
    button {
      height: auto !important;
      background-color: var(--cms-primary-colour) !important;

      &:before {
        line-height: 28px;
        height: auto !important;
        color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
      }
    }
  }
}

.bulk-actions {
  &__action {
    cursor: pointer;
    color: var(--cms-text-colour) !important;

    &:hover {
      background-color: var(--cms-background-colour--dark) !important;
    }
  }
}

.badge {
  &.version-status {
    background-color: var(--cms-background-colour--light);
    border-color: var(--cms-border-colour);
  }
}

.badge-success {
  background-color: var(--cms-accent-colour) !important;
  color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
}

#Root_Blocks {
  .pull-xs-right,
  .btn-toolbar {
    // Generic clearfix
    &:before,
    &:after {
      content: '';
      display: table;
    }
  
    &:after {
      clear: both;
    }
  }

  .pull-xs-right {
    * {
      float: left;
      margin-left: 0;
    }
  }
}

.grid-field__icon-action,
.grid-field__icon-action[class*="font-icon-"] {
  &:before {
    color: var(--cms-accent-colour)!important;
    transition: color .3s ease;
  }
}

.breadcrumbs-wrapper {
  a.cms-panel-link {
    color: var(--cms-link-colour)!important;
  }
}

a.breadcrumb__item-title {
  color: var(--cms-link-colour)!important;
}

.bulk-actions .bulk-actions-counter {
  color: var(--cms-text-colour)!important;
  background-color: var(--cms-background-colour--dynamic)!important;
}


.ui-dialog {
  .linkfield-dialog {
    .btn-toolbar {
      .btn {
        background-color: var(--cms-accent-colour)!important;
        color: var(--cms-accent-text-colour, var(--cms-background-colour--dark));
      }
    }
  }
}

.mce-btn.mce-primary {
  background-color: var(--cms-accent-colour) !important;

  .mce-txt {
    color: var(--cms-accent-text-colour, var(--cms-background-colour--dark))!important;
  }
}

.btn {
  border-radius: 5px;
  border: 0;

  &.btn-primary {
    color: var(--cms-accent-text-colour, var(--cms-background-colour--dark));
    background-color: var(--cms-accent-colour)!important;
    opacity: 1;
    transition: opacity .2s ease;

    &:hover,
    &:focus {
      opacity: .8;
    }
  }
}

.btn-outline-primary {
  color: var(--cms-link-colour)!important;

  &:hover,
  &:focus {
    background-color: transparent!important;
  }
}

.btn-group .btn-primary {
  border-left: 0!important;
}

.ss-gridfield-add-new-multi-class {
  .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    &:before {
      line-height: 25px !important;
    }
  }
}

#preview-states {
  .state-name {
    box-shadow: none!important;
    background-image: none!important;
    border: 0!important;

    &.active {
      background-color: var(--cms-accent-colour);
    }
  }
}

.btn-secondary {
  &:hover,
  &:focus,
  &:active,
  &.active {
    background-color: var(--cms-background-colour--dark) !important;
  }
}

.btn-outline-secondary {
  background-color: var(--cms-background-colour--light) !important;

  &.action_gridfield_relationadd {
    border: 1px solid var(--cms-border-colour);
    margin-left: -4px !important;
  }

  &.disabled,
  &:disabled {
    border: 1px solid transparent !important;
    background-color: transparent !important;
  }

  &:hover {
    border-color: var(--cms-border-colour) !important;
    color: var(--cms-accent-colour) !important;

    &.disabled,
    &:disabled {
      background-color: transparent !important;
      border: 1px solid transparent !important;
      color: var(--cms-text-colour) !important;
    }
  }
}

.btn-outline-secondary {
  color: var(--cms-text-colour) !important;
}

.btn.btn-primary {
  color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
}

.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
  box-shadow: none!important;
  background-color: var(--cms-background-colour--light) !important;
}

.toolbar--content .btn--circular,
.toolbar--north .btn--circular,
.toolbar--south .btn--circular,
.toolbar .btn--circular {
  padding-left: 7px!important;
  padding-right: 7px!important;

  &:before {
    margin-right: 0!important;
  }
}

.toolbar--content .btn-group--circular>.btn,
.toolbar--content .btn-group--circular>.btn:hover,
.toolbar--north .btn-group--circular>.btn,
.toolbar--north .btn-group--circular>.btn:hover,
.toolbar--south .btn-group--circular>.btn,
.toolbar--south .btn-group--circular>.btn:hover,
.toolbar .btn-group--circular>.btn,
.toolbar .btn-group--circular>.btn:hover {
  background-color: var(--cms-accent-colour) !important;
  border-color: transparent !important;
}

.toolbar--content .btn-group--circular>.btn:before,
.toolbar--content .btn-group--circular>.btn:hover:before,
.toolbar--north .btn-group--circular>.btn:before,
.toolbar--north .btn-group--circular>.btn:hover:before,
.toolbar--south .btn-group--circular>.btn:before,
.toolbar--south .btn-group--circular>.btn:hover:before,
.toolbar .btn-group--circular>.btn:before,
.toolbar .btn-group--circular>.btn:hover:before {
  color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
}

.btn-primary.focus,
.btn-primary:focus {
  box-shadow: none!important;
}

input[type="url"],
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="datetime-local"],
.form-control,
.field select,
.field textarea,
.field input.text,
.form__field-holder input.readonly,
.form__field-holder p.readonly,
.form__field-holder span.readonly,
.readonly .form__field-holder > div {
  border-radius: 3px!important;
  box-shadow: none!important;
}

.btn.disabled,
.btn:disabled {
  opacity: .65!important;
  filter: saturate(.5)!important;
  background-color: var(--cms-accent-colour)!important;
}

.popover-actions-simulate,
.search-box__enter {
  background-color: var(--cms-border-colour) !important;
}

.popover-actions-simulate {
  border-radius: 3px !important;
}

.btn.btn-outline-secondary {
  background-color: var(--cms-border-colour) !important;
}

div.switch-states {
  .switch {
    box-shadow: none !important;
  }
}

.preview-mode-selector,
.preview-size-selector {
  .chosen-container-single {
    .chosen-single {
      border: 0 !important;
    }
  }
}

.tag-list {
  .tag-component {
    background-color: var(--cms-accent-colour) !important;

    &,
    &__delete {
      color: var(--cms-accent-text-colour, var(--cms-background-colour--dark))!important;
    }
  }
}

.cms-container {
  color: var(--cms-text-colour);
  overflow: hidden;
}

.cms-content-header {
  background-color: var(--cms-background-colour--dark);
  border-bottom-color: var(--cms-border-colour);
}

.cms-content,
.cms-panel-content {
  background-color: var(--cms-background-colour) !important;
}

.cms-mobile-menu-toggle {
  background-color: var(--cms-background-colour--light) !important;

  span {
    background-color: var(--cms-text-colour);
  }
}

.cms-preview-states {
  .switch {
    background: none !important;
  }

  .state-name {
    line-height: 22px !important;
    background-color: var(--cms-background-colour) !important;
    border-top: 1px solid var(--cms-border-colour) !important;
    border-bottom: 1px solid var(--cms-border-colour) !important;

    &.first {
      border-left: 1px solid var(--cms-border-colour) !important;
      border-radius: 5px 0 0 5px !important;
    }

    &.last {
      border-right: 1px solid var(--cms-border-colour) !important;
      border-radius: 0 5px 5px 0 !important;
    }

    span {
      color: var(--cms-text-colour) !important;
    }

    &.active {
      background-color: var(--cms-accent-colour) !important;

      span {
        color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
      }
    }
  }
}

.bulk-actions {
  background-color: var(--cms-background-colour) !important;
  border-color: var(--cms-border-colour) !important;
}

.bulk-actions-counter {
  color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
}

.form-group,
.form__divider {
  &:after {
    border-color: var(--cms-border-colour) !important;
  }
}

.form__field-description,
.form__field-extra-label {
  color: var(--cms-text-colour--dynamic) !important;
}

.cms-add-form {
  .radio {

    &.selected,
    &:hover {
      background-color: var(--cms-background-colour--light) !important;
    }
  }
}

.toolbar {
  &--north,
  &--south {
    background-color: var(--cms-background-colour--dark) !important;
    color: var(--cms-text-colour) !important;
    border-color: var(--cms-border-colour) !important;
  }
}

a .jstree-pageicon,
.record-icon,
a .jstree-recordicon,
.cms-tree ul li a,
.ui-widget,
.ui-widget-content,
.btn-secondary {
  color: var(--cms-text-colour) !important;
}

.jstree-apple a {
  text-shadow: none !important;
}

.asset-dropzone {
  &.uploadfield__dropzone {
    background-color: var(--cms-background-colour--dark) !important;
    border-color: var(--cms-border-colour) !important;
  }
}

.asset-dropzone {
  .gallery-item {
    background-color: var(--cms-background-colour--dark) !important;
    border-color: var(--cms-border-colour) !important;
  }

  .gallery-item__checkbox-label {
    &:before {
      background-color: var(--cms-background-colour--light) !important;
      border-color: var(--cms-border-colour) !important;
    }
  }

  .gallery-item--selected .gallery-item__checkbox-label {
    &:before {
      color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
      background-color: var(--cms-accent-colour) !important;
    }
  }
}

.gallery-item__thumbnail {
  &:not([style]) {
    background-color: transparent !important;
    opacity: .75 !important;
  }
}

.gallery__sort {
  .chosen-single {
    >span {
      &:before {
        color: var(--cms-text-colour);
      }
    }
  }
}

.table {
  tbody {
    background-color: var(--cms-background-colour) !important;

    tr {
      background-color: transparent !important;

      &:hover {
        background-color: var(--cms-background-colour--dynamic) !important;
      }
    }

    +tbody {
      border-color: var(--cms-border-colour) !important;
    }

    td,
    th button {
      &:hover {
        background-color: var(--cms-background-colour--dynamic) !important;
      }
    }
  }

  thead {
    th button {
      &:hover {
        background-color: var(--cms-background-colour--dynamic) !important;
      }
    }
  }


  td,
  th {
    color: var(--cms-text-colour) !important;
    border-color: var(--cms-border-colour) !important;
    background-color: transparent !important;

    button {
      color: inherit !important;
      background-color: inherit !important;
    }
  }
}

.grid-field__icon-action {
  &:focus,
  &:active,
  &:focus-visible,
  &:hover {
    background-color: transparent !important;

    &:before {
      color: var(--cms-text-colour) !important;
    }
  }
}

.gallery__table .footer-container,
.gallery__table .footer-container:hover {
  background-color: var(--cms-background-colour) !important;
}

.griddle-page {
  select {
    background-color: var(--cms-background-colour--dark) !important;
    border-color: var(--cms-border-colour) !important;
    color: var(--cms-text-colour) !important;
  }
}

.editor {
  border-color: var(--cms-border-colour) !important;
  background-color: var(--cms-background-colour) !important;
}

.ui-tabs-anchor {
  &:after {
    color: var(--cms-text-colour) !important;
  }
}

.cms-panel {
  .cms-panel-toggle {

    .toggle-collapse,
    .toggle-expand {
      border-radius: 5px;

      &:hover {
        background-color: var(--cms-background-colour--light) !important;
      }

      span {
        color: var(--cms-text-colour) !important;
      }
    }
  }
}

.cms-panel-content-collapsed {
  background-color: var(--cms-background-colour) !important;
  border-color: var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;
}

.cms-preview {
  border-color: var(--cms-border-colour) !important;
}

.ss-gridfield-items {
  a {
    .item {
      color: var(--cms-link-colour) !important;
    }
  }
}

.uploadfield-item {
  background-color: var(--cms-background-colour--dark) !important;
  border-color: var(--cms-border-colour) !important;
}

.mce-panel {
  background-color: var(--cms-background-colour--dark) !important;
  border-color: var(--cms-border-colour) !important;
}

.mce-btn-group {
  border-color: var(--cms-border-colour) !important;
}

.mce-txt,
.mce-title,
.mce-path-item,
.mce-divider {
  color: var(--cms-text-colour) !important;
}

.mce-menu-item {

  &:hover,
  &:focus,
  &.mcs-selected,
  &.mce-selected {
    background-color: var(--cms-background-colour--dark) !important;
  }

  .mce-text,
  .mce-ico {
    color: var(--cms-text-colour);
  }

  .mce-caret {
    border-top-color: transparent !important;
    border-left-color: var(--cms-text-colour) !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
  }
}

.mce-menu-item-sep {
  background: var(--cms-background-colour--dark) !important;
  border-color: var(--cms-background-colour--dark) !important;
}

.mce-caret {
  border-top-color: var(--cms-text-colour) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}

.mce-btn {
  background-color: transparent !important;
  border-color: transparent !important;

  &.mce-active {
    background-color: var(--cms-background-colour--light) !important;
    border-color: var(--cms-border-colour) !important;
  }

  i {
    color: var(--cms-text-colour) !important;
    text-shadow: none !important;
  }
}

.mce-menu-item {
  .mce-text,
  .mce-ico {
    color: var(--cms-text-colour) !important;
  }
}

.mce-tinymce iframe {
  background-color: #ffffff;
}

.close {
  &:before {
    color: var(--cms-text-colour) !important;
    text-shadow: none !important;
  }
}

.btn-toolbar .ui-tabs-anchor.active {
  background-color: var(--cms-background-colour--light) !important;
}

.modal-content,
.modal-header,
.modal-footer {
  background-color: var(--cms-background-colour) !important;
  border-color: var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;
}

.modal-header {
  button {
    &:before {
      color: var(--cms-text-colour) !important;
      text-shadow: none !important;
    }
  }
}

.ui-dialog-content {
  background-color: var(--cms-background-colour) !important;
  border-color: var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;
}

.ui-menu {
  background-image: none !important;
  background-color: var(--cms-background-colour--light) !important;
  border: 1px solid var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;
  padding: 5px !important;

  li {
    display: block;

    &:not(:last-child) {
      margin-bottom: 5px !important;
    }

    > * {
      background-image: none !important;
      color: var(--cms-text-colour) !important;

      &.ui-state-focus,
      &.ui-state-active {
        background-image: none !important;
        background-color: var(--cms-accent-colour) !important;
        color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
        border-color: transparent !important;
      }
    }
  }
}

.popover-actions-simulate,
.search-box__enter,
.search-form__wrapper {
  border-color: var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;
  overflow: hidden;
}

.message,
.alert {
  position: relative;
  z-index: 2;
  background-color: var(--cms-background-colour--dynamic) !important;
  border-color: var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;
}

.message.warning,
.message.notice,
.alert.alert-danger,
.alert.error,
.alert.alert-success {
  &:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    mix-blend-mode: overlay;
    border-radius: inherit;
  }
}

.message {
  &.warning {
    &:before {
      background-color: var(--warning);
    }
  }

  &.notice {
    &:before {
      background-color: var(--teal);
    }
  }
}

.alert {
  &.alert-danger,
  &.error {
    &:before {
      background-color: var(--danger);
    }
  }
}

.alert.alert-success {
  &:before {
    background-color: var(--teal);
  }
}

.form__field-holder {
  .alert {
    margin-top: 10px !important;
  }
}

.ui-widget-content {
  background-image: none!important;
}

.cms-content-tools {
  box-shadow: 1px 0 0 0 var(--cms-border-colour) !important;
}

.editor__thumbnail {
  border-top: 1px solid var(--cms-border-colour) !important;
  border-bottom: 1px solid var(--cms-border-colour) !important;
}

.ss-toggle .ui-accordion-header.ui-state-default {
  background-color: var(--cms-background-colour) !important;
  border-color: var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;

  a {
    color: inherit !important;
  }
}

.ui-accordion-content {
  background-color: var(--cms-background-colour--dark) !important;
  border-color: var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;
}

.cms .gridfield-icon.published i {
  color: var(--cms-accent-colour) !important;
}

$field-width: 83%;

.cms-edit-form {
  .tab-pane {
    >.form-group {
      &.field {
        display: block !important;
        max-width: 1500px !important;
        margin-bottom: 0;

        &:before,
        &:after {
          content: '' !important;
          display: table !important;
        }

        &:after {
          clear: both !important;
          margin-top: 0 !important;
          margin-bottom: 0 !important;
        }

        >.form__field-label,
        >.form__field-holder {
          display: block !important;
          float: left;
          margin-bottom: 2rem;
        }

        >.form__field-label {
          width: 100 - $field-width !important;
          max-width: 100 - $field-width !important;
        }

        >.form__field-holder {
          width: $field-width !important;
          max-width: $field-width !important;
        }
      }
    }
  }
}
@mixin cms-logo($url, $width, $height) {
  .cms-sitename {
    &:before {
      content: '';
      display: block;
      width: 100%;
      padding-bottom: percentage($height / $width);
      background-image: url('#{$url}');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
}

.cms-menu {
  color: var(--cms-text-colour);
  background-color: var(--cms-background-colour--dark);

  &,
  &.collapsed {
    width: 250px !important;
  }

  .cms-subsites {
    display: block!important;
    padding-top: 10px!important;
    padding-bottom: 10px!important;
    border-bottom: 1px solid var(--cms-border-colour);

    .chosen-single {
      b {
        background-position: 5px 8px !important;
      }
    }
  }

  .cms-panel-content,
  .cms-menu__list,
  .cms-panel-toggle,
  .cms-subsites {
    box-shadow: inset -1px 0 0 var(--cms-border-colour) !important;
  }

  &__header {
    background-color: var(--cms-background-colour--dark);
    box-shadow: inset -1px 0 0 var(--cms-border-colour) !important;
  }

  .cms-sitename {
    border-bottom: 1px solid var(--cms-border-colour) !important;
    background-color: var(--cms-background-colour--dark)  !important;
    box-shadow: inset -1px 0 0 var(--cms-border-colour)  !important;
    height: auto !important;
    padding: 20px 30px !important;

    &__link,
    &__title {
      display: none !important;
    }
  }

  .cms-login-status {
    min-height: 0 !important;
    font-size: 0 !important;
    box-shadow: inset -1px -1px 0 var(--cms-border-colour)  !important;

    &__profile-link,
    &__logout-link {
      font-size: 14px !important;
      position: relative !important;
      display: inline-block !important;
      vertical-align: middle;
      min-height: 52px !important;
      height: auto !important;
      line-height: 50px !important;
      text-transform: capitalize !important;
      color: var(--cms-text-colour) !important;
      background-color: transparent !important;

      &:before {
        font-size: inherit !important;
        line-height: inherit !important;
      }

      span {
        width: 100%;
        padding-left: 0;
      }

      i {
        position: relative !important;
        display: inline-block !important;
        vertical-align: middle !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin-bottom: -1px;
      }

      * {
        color: inherit !important;
        display: inline-block !important;
        line-height: inherit !important;
        width: auto !important;
        height: auto !important;
        vertical-align: middle !important;
        opacity: 1 !important;
      }
    }

    &__profile-link {
      padding-left: 25px !important;
      width: 80% !important;

      span {
        margin-top: -1px;
        font-weight: 500;
      }
    }

    &__logout-link {
      width: 20% !important;
      text-align: center !important;
    }
  }

  a {
    i {
      padding-left: 0 !important;
    }
  }

  .menu__icon {
    left: 0 !important;
    width: 20px !important;
    margin-top: 0 !important;
    text-align: center !important;

    &:before {
      position: relative;
      z-index: 1;
      line-height: 30px !important;
      color: var(--cms-text-colour);
    }
  }

  &__list {
    padding: 10px;

    li {
      margin-bottom: 10px !important;

      &.current {
        a {
          color: var(--cms-accent-text-colour, var(--cms-background-colour--dark))!important;
          background-color: var(--cms-accent-colour);

          &:hover,
          &:focus {
            color: var(--cms-accent-text-colour, var(--cms-background-colour--dark))!important;
            background-color: var(--cms-accent-colour)!important;
          }
        }

        .menu__icon {
          &:before {
            color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
          }
        }
      }

      a {
        min-height: 0 !important;
        padding: 0 0 0 15px !important;
        text-align: left !important;
        border-radius: 10px;
        color: var(--cms-text-colour);
        background-color: var(--cms-background-colour--dark);
        box-shadow: none!important;
        transition: background-color .2s ease;

        &:hover,
        &:focus {
          color: var(--cms-text-colour);
          background-color: var(--cms-background-colour--light)!important;
        }

        span {
          display: inline-block !important;
          vertical-align: middle !important;
          position: relative !important;
          left: 0 !important;
          margin-left: 0 !important;
        }

        .text {
          padding: 15px !important;
          text-transform: capitalize;
          font-weight: 500;
        }
      }

      .icon-silverstripe-redirectedurls-admin-redirectedurladmin {
        background: none !important;

        &:before {
          content: '@';
          font-family: silverstripe !important;
          font-style: normal !important;
          font-weight: 400 !important;
          font-variant: normal !important;
          text-transform: none !important;
          font-size: 17px;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;

        }
      }
    }
  }

  .cms-panel-toggle {
    .cms-help__toggle,
    .sticky-toggle,
    .toggle-collapse,
    .toggle-expand {
      display: none!important;
    }
  }

  .chosen-single {
    background-color: var(--cms-background-colour) !important;
    border-color: var(--cms-border-colour) !important;
  }

  .chosen-drop {
    border-color: var(--cms-border-colour) !important;
    background-color: var(--cms-background-colour) !important;

    .active-result {
      background-color: var(--cms-background-colour) !important;
    }
  }
}

.cms-mobile-menu-toggle-wrapper {
  padding: 10px;
}

.cms-mobile-menu-toggle {
  width: 32px;
  height: 32px;
  background-color: var(--cms-accent-colour);
  border-radius: 5px;

  span {
    background-color: var(--cms-text-colour);
  }
}

.cms-menu .cms-login-status {
  box-shadow: inset -1px -1px 0 var(--cms-border-colour) !important;
}

.cms-menu .cms-panel-content {
  background: transparent !important;
}

ul.colorpalette {
  margin-bottom: 0;

  li {
    label {
      position: relative;
      border: 0!important;
      // border-radius: .5rem;
      // outline: 2px solid #ced5e1!important;
    }

    input[value="None"],
    input[value="none"],
    input[value="transparent"] {
      + label:before {
        content: 'unset';
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: .6;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        transform: translate(-50%, -50%);
      }

      &:checked + label:before {
        content: none;
      }
    }
  }
}

.colorpalette {
  .form__field-holder,
  ul,
  li {
    overflow: visible !important;
  }

  ul.colorpalette {
    li {
      display: inline-block;
      float: none!important;

      label {
        outline: 1px solid var(--cms-border-colour)!important;
      }
    }
  }

  label {

    span {
      display: none;
      position: absolute;
      z-index: 100;
      top: -5px;
      left: -5px;
      padding: 0 4px;
      border-radius: 2px;
      font-size: 1rem;
      white-space: nowrap;
      text-transform: capitalize;
      border: 1px solid var(--cms-border-colour);
      background-color: var(--cms-background-colour--dark);
      color: var(--cms-text-colour);
    }

    &:hover {
      span {
        display: block;
      }
    }
  }
}

ul.colorpalette {
  font-size: 0;
  padding-top: 10px;

  li {
    label {
      margin-top: 0;
      margin-left: 0;
      margin-bottom: 10px;
      margin-right: 10px;
      border-radius: 1px;

      &:after {
        font-size: 14px;
      }
    }
  }
}
.dropdown-menu {
  color: var(--cms-text-colour) !important;
  background-color: var(--cms-background-colour--dynamic) !important;
}
#Form_EditForm {
  padding-right: 0!important;
}

.input-group {
  input[type="text"] {
    + .input-group-append {
      position: relative;
      margin-left: -5px;
      z-index: 10!important;
    }
  }
}

.form-group {
  &.htmleditor {
    iframe {
      transition: background-color .2s ease;
    }

    .form__field-holder {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;

      @media (min-width: 1200px) {
        width: 66.66667% !important;
        max-width: 66.66667% !important;
        flex: 0 0 66.66667% !important;
      }

      @media (min-width: 1200px) {
        width: 58.33333% !important;
        max-width: 58.33333%!important;
        flex: 0 0 58.33333% !important;
      }
    }

    .form__field-label {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;

      @media (min-width: 1200px) {
        width: 16.66667% !important;
        max-width: 16.66667% !important;
        flex: 0 0 16.66667% !important;
      }
    }
  }
}
.text-muted,
ul.table .history-viewer__row--current .text-muted {
  color: var(--cms-text-colour--dynamic) !important;
}

ul.table {
  color: var(--cms-text-colour) !important;
}

.history-viewer__close-button,
.history-viewer__compare-button {
  color: var(--cms-text-colour) !important;
  border-color: currentColor !important;
}

.btn-outline-light:hover {
  color: var(--cms-background-colour--dark) !important;
  background-color: var(--cms-text-colour) !important;
  border-color: var(--cms-text-colour) !important;
}

.table .history-viewer__row--current,
.table .history-viewer__row--current:hover {
  color: var(--cms-text-colour) !important;
}

.history-viewer__heading,
.history-viewer__row {
  border-color: var(--cms-border-colour) !important;
}

.history-viewer__row {
  background-color: var(--cms-background-colour--dynamic) !important;
}

.grid-field__sort.ss-gridfield-sorted-asc::after,
.grid-field__sort.ss-gridfield-sorted-asc:hover::after,
.grid-field__sort.ss-gridfield-sorted-desc::after,
.grid-field__sort.ss-gridfield-sorted-desc:hover::after {
  color: var(--cms-text-colour) !important;
}

.gallery__sort .chosen-container-active .chosen-single {
  outline: none !important;
  background-color: var(--cms-background-colour--dynamic) !important;
}

.grid-field__sort.ss-gridfield-sorted-asc::after,
.grid-field__sort.ss-gridfield-sorted-asc:hover::after,
.grid-field__sort.ss-gridfield-sorted-desc::after,
.grid-field__sort.ss-gridfield-sorted-desc:hover::after,
.grid-field .grid-field__sort:focus,
.grid-field__sort.ss-gridfield-sorted-asc,
.grid-field__sort.ss-gridfield-sorted-desc {
  border-bottom-color: var(--cms-border-colour) !important;
}
ul.IconField {
  display: block;
  list-style: none;
  border-radius: 0 !important;
  padding: 20px 0 0;
  letter-spacing: 20px;
  font-size: 0;
  border: 0 !important;
  background-image: none !important;

  .option {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: calc(15.73% - 10px);
    margin-bottom: 20px;

    input {
      position: absolute;
      opacity: 0;
      height: 0;
      width: 0;

      &:checked {
        +label {
          background-color: var(--cms-border-colour);
        }
      }
    }

    input[value=""] {
      + label {
        color: var(--cms-background-colour--dynamic);
        background-color: var(--cms-accent-colour) !important;

        &:after {
          content: none !important;
        }

        &:before {
          content: 'none';
          position: absolute;
          color: inherit;
          top: 50%;
          left: 50%;
          // opacity: .6;
          font-size: 10px;
          font-weight: bold;
          letter-spacing: normal;
          text-transform: uppercase;
          transform: translate(-50%, -50%);
        }
      }
    }

    label {
      position: relative;
      display: block;
      border-radius: 3px;
      margin: 0 !important;
      cursor: pointer;
      width: 100% !important;
      height: 0 !important;
      padding: 0 0 100% 0 !important;
      color: var(--cms-text-colour);
      background-color: var(--cms-background-colour);
      box-shadow: inset 0 0 0 1px var(--cms-border-colour);
      transition:
        color .3s ease,
        background-color .3s 0s ease;

      &:hover {
        background-color: var(--cms-background-colour--dark);
      }
    }

    img {
      opacity: 0;
    }

    svg {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 75% !important;
      height: 75% !important;
      object-fit: contain;
      object-position: center;
      transform: translate(-50%, -50%);

      [fill^="#"] {
        fill: currentColor;
      }

      [stroke^="#"] {
        stroke: currentColor;
      }
    }
  }
}

input {
  &[type="text"],
  &[type="password"],
  &[type="email"],
  &[type="number"],
  &[type="date"],
  &[type="time"],
  &[type="url"],
  &[type="search"],
  &[type="datetime-local"] {
    background-color: var(--cms-background-colour--dark) !important;
    border-color: var(--cms-border-colour) !important;
    color: var(--cms-text-colour) !important;
    box-shadow: none !important;
    border-radius: 5px !important;

    &:focus {
      border-color: var(--cms-border-colour) !important;
    }
  }
}

input[type="search"] {
  &,
  &:focus {
    border-color: transparent !important;
  }
}

textarea,
select,
.form-control-static.readonly,
.treedropdownfield {
  background-color: var(--cms-background-colour--dark) !important;
  border-color: var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;
}

.focuspoint.field .form__field-holder {
  background-color: transparent !important;
}

.focuspoint.field {
  background-color: transparent !important;
  border-color: var(--cms-border-colour) !important;
}

.focuspoint-picker__gradient {
  background: none!important;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    background: radial-gradient(circle 80px at center center, rgba(0,0,0,0) 33%, var(--cms-background-colour--dark));
  }
}

.focuspoint-picker__overlay {
  box-shadow: inset 0 0 0 1px var(--cms-border-colour)!important;
}

textarea {
  min-height: 50px !important;
}

[data-name="SilverStripe-CMS-Model-SiteTree"] .col-FoundHide input,
[data-name="SilverStripe-CMS-Model-SiteTree"] .col-action_SetOrderFoundHide input {
  -webkit-appearance: auto!important;
}

.uploadfield-item__complete-icon {
  &:after {
    color: var(--cms-accent-colour)!important;
  }
}

.uploadfield__add-button,
.uploadfield__upload-button {
  &,
  &:hover {
    color: var(--cms-link-colour)!important;
  }
}

.sortable-item {
  border-color: var(--cms-border-colour)!important;
}

.description,
.form__field-description {
  opacity: .7;
  color: var(--cms-text-colour)!important;
}

.field input.text,
.field select,
.field textarea,
.form-control {
  &::-webkit-input-placeholder {
    opacity: .5!important;
    color: var(--cms-text-colour)!important;
  }

  &:-moz-placeholder {
    opacity: .5!important;
    color: var(--cms-text-colour)!important;
  }

  &::-moz-placeholder {
    opacity: .5!important;
    color: var(--cms-text-colour)!important;
  }

  &:-ms-input-placeholder {
    opacity: .5!important;
    color: var(--cms-text-colour)!important;
  }
}

#Form_fileSelectForm_FileSpecs {
  display: inline;
}

.form__field-holder input.readonly,
.form__field-holder p.readonly,
.form__field-holder span.readonly,
.readonly .form__field-holder > div {
  background-color: var(--cms-border-colour)!important;
  border-color: var(--cms-border-colour)!important;
}

.editor__specs,
.uploadfield-item__specs {
  display: inline;
  opacity: .7;
  color: var(--cms-text-colour)!important;
}

.uploadfield-item__thumbnail {
  border-radius: 0 !important;

  &:not([style]) {
    position: relative;
    box-shadow: 0 0 0 1px var(--cms-border-colour);
    background-color: var(--cms-background-colour--light);

    &:before {
      content: 'File';
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 12px;
      text-align: center;
      color: var(--cms-text-colour);
      transform: translate(-50%, -50%);
    }
  }
}

.form__fieldgroup-label {
  color: var(--cms-text-colour--dynamic)!important;
}

.form__field-extra-label {
  float: left;
}

#Form_EditForm_Title {
  width: 100%!important;
}

.form__field-update-url {
  border-radius: 3px!important;
  margin-top: 10px!important;
}

.URL-link,
.showOnClick a,
.uploadfield__upload-button,
.uploadfield__add-button,
label a,
p a,
td a,
a[target="_blank"],
a:not([class]) {
  color: var(--cms-link-colour)!important;
}

.cms-menu__list li a {
  color: var(--cms-text-colour)!important;
}

.ss-loading-screen {
  background-color: var(--cms-background-colour);
}

.cms-content-loading-spinner {
  .spinner {
    background-color: var(--cms-background-colour--dark) !important;
  }
}

.ss-loading-screen__logo {
  path {
    fill: var(--cms-accent-colour);
    stroke: var(--cms-accent-colour);
  }
}

.ss-loading-screen__text {
  color: var(--cms-accent-colour);

  svg {
    circle {
      fill: var(--cms-accent-colour);
    }
  }
}

.cms-content-loading-spinner .spinner__animation__fill {
  stroke: var(--cms-accent-colour);
}

.ui-autocomplete-loading {
  background-image: none !important;
}

.ui-dialog {
  position: fixed!important;
  top: 50%!important;
  left: 50%!important;
  width: 60rem!important;
  height: auto!important;
  max-width: calc(100% - 40px)!important;
  max-height: calc(100% - 40px)!important;
  transform: translate(-50%, -50%)!important;

  .ui-dialog-content {
    width: auto!important;
    height: auto!important;
  }

  .linkfield-dialog {
    padding: 40px!important;
  }

  .btn {
    margin-left: 0!important;
  }

  .ui-tabs .ui-tabs-nav li a {
    padding: 0!important;
  }

  .form__field-extra-label {
    float: none;
  }

  .ui-button {
    top: 0;
    right: 0;
    margin: 0;
    border: 0;
    z-index: 100;
    transform: translate(25%,-25%) scale(1.2);
    background-color: var(--cms-accent-colour);

    &:before,
    &:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      height: 2px;
      width: 60%;
      background-color: var(--cms-background-colour);
    }

    &:before {
      transform: translate(-50%,-50%) rotate(45deg);
    }

    &:after {
      transform: translate(-50%,-50%) rotate(-45deg);
    }

    .ui-button-icon {
      display: none;
    }
  }
}

.pagination-page-number {
  input {
    color: var(--cms-text-colour) !important;
    border-color: var(--cms-border-colour) !important;
    background-color: var(--cms-background-colour--dynamic) !important;
    margin-left: 10px;
    margin-right: 10px;
  }
}
.popover {
  background-color: var(--cms-background-colour--dynamic) !important;
  
  .arrow {
    border-top-color: var(--cms-background-colour--dynamic) !important;
  }
}

input[readonly] {
  border-radius: 0!important;
  border: 0!important;
  background-color: var(--cms-border-colour)!important;
  pointer-events: none!important;
}
.search-form {
  box-shadow: 0 0 0 1px var(--cms-border-colour) !important;
  border-radius: 0 0 5px 5px !important;
}

.search-form__wrapper {
  border-radius: inherit !important;
  background-color: var(--cms-background-colour--dynamic) !important;
}

.field-group-component__small-holder>.form-group .form__field-label {
  color: var(--cms-text-colour) !important;
}
select {
  padding: 5px;
  border-radius: 3px;
  border: 1px solid var(--cms-border-colour) !important;
}

.chosen-container {
  .chosen-single {
    background-image: none !important;

    b {
      background-position: 5px 8px !important;
    }
  }

  .chosen-results {
    padding: 5px !important;
    margin: 0 !important;
    border: 0 !important;

    li {
      border-radius: 5px !important;
      background-image: none !important;
      margin-bottom: 3px !important;
      transition: background-color .2s ease;

      &:hover {
        background: none !important;
        color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
        background-color: var(--cms-accent-colour) !important;
      }
    }
  }
}

.chosen-container-active {

  .chosen-single,
  .chosen-drop {
    border-color: var(--cms-border-colour) !important;
  }

  &.chosen-with-drop {
    .chosen-single {
      border-bottom-left-radius: 0 !important;
    }
  }
}

.treedropdownfield__option-button {
  display: block !important;
  border: 0 !important;
  border-radius: 5px !important;
  padding: 0 !important;
  background-color: var(--cms-accent-colour) !important;

  .treedropdownfield__option-count-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 20px !important;
    color: var(--cms-text-colour) !important;
    height: auto !important
  }
}

.Select-menu-outer {
  border-color: var(--cms-accent-colour) !important;
}

.Select.is-focused>.Select-control {
  border-color: var(--cms-accent-colour) !important;
}

.treedropdownfield__breadcrumbs {
  color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
  background-color: var(--cms-accent-colour) !important;
}

.treedropdownfield__breadcrumbs-button {
  height: 20px !important
}

.chosen-container {
  .chosen-single {
    >span {
      &:before {
        color: var(--cms-text-colour) !important;
      }
    }

    b {
      background-position: 5px 3px !important;
    }
  }
}


.ss-gridfield-add-new-multi-class,
.form-group {
  .chosen-container {
    .chosen-single {
      b {
        background-position: 5px 8px !important;
      }
    }
  }
}

.toolbar--south {
  .chosen-container {
    .chosen-single {
      b {
        background-position: 5px 5px !important;
      }
    }
  }
}

// .toolbar--south>.btn-toolbar>.preview-selector {
//   max-width: 100px !important;
// }

.chosen-choices {
  background-image: none !important;
  background-color: var(--cms-background-colour--light) !important;
  border-color: var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;
}

.chosen-choices li.search-field input[type="text"] {
  color: var(--cms-text-colour) !important;
}

.chosen-results {
  background: transparent !important;

  .active-result {
    background-color: var(--cms-background-colour--light) !important;
    border-color: var(--cms-border-colour) !important;
    color: var(--cms-text-colour) !important;


    &:hover {
      background-color: var(--cms-background-colour--dark) !important;
      color: var(--cms-text-colour) !important;
    }

    &.result-selected {
      background-color: var(--cms-accent-colour) !important;
      color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
    }
  }
}

.cms-content-controls .preview-selector .chosen-container-active .chosen-single,
.toolbar--south .preview-selector .chosen-container-active .chosen-single {
  background-color: var(--cms-background-colour--dark) !important;
  border-color: var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;
}

.chosen-drop {
  background: none !important;
  background-color: var(--cms-background-colour--light) !important;
  border-color: var(--cms-border-colour) !important;

  * {
    color: var(--cms-text-colour) !important;
  }

  li {

    &.result-selected,
    &:hover {
      color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
    }

    &.result-selected {
      background-color: var(--cms-accent-colour) !important;
    }
  }

  .no-results {
    color: var(--cms-text-colour) !important;
    background-color: var(--cms-background-colour) !important;
  }
}

.search-choice {
  box-shadow: none !important;
  background-image: none !important;
  // background-color: var(--cms-background-colour--dark)!important;
  background-color: var(--cms-accent-colour) !important;
  border-color: var(--cms-border-colour) !important;
  // color: var(--cms-text-colour)!important;
  color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
}

.toolbar--south {

  .ui-tabs-anchor,
  .preview-selector .chosen-single {

    &:hover {
      background-color: var(--cms-background-colour--light) !important;
    }
  }
}

.preview-selector .chosen-single {

  span,
  &:before {
    color: var(--cms-text-colour) !important;
  }
}

.chosen-container-single {
  .chosen-single {
    border-color: var(--cms-border-colour) !important;

    span {
      color: var(--cms-text-colour) !important;
    }
  }
}

.btn-toolbar {
  .chosen-drop {
    li {

      &,
      &:before {
        color: var(--cms-text-colour) !important;
      }

      &:not(.result-selected) {
        background-color: var(--cms-background-colour) !important;

        &:hover {
          color: var(--cms-text-colour) !important;
          background-color: var(--cms-background-colour--dark) !important;
        }
      }

      &.result-selected {
        color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
      }
    }
  }
}

.Select-control {
  background-color: var(--cms-background-colour--dark) !important;
  border-color: var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;
}

.Select-menu-outer,
.treedropdownfield__option-button,
.treedropdownfield__option-count-icon {
  @media(prefers-color-scheme: dark) {
    filter: invert(100%);
  }
}

.Select-menu-outer {
  border-color: var(--cms-text-colour) !important;
}

.Select-value-label {
  color: var(--cms-text-colour) !important;
}

.Select--multi {
  .Select-input {
    input {
      color: var(--cms-text-colour) !important;
    }
  }

  .Select-value {
    border-color: var(--cms-border-colour) !important;
    background-color: var(--cms-accent-colour) !important;
  }

  .Select-value-icon,
  .Select-value-label {
    border-color: var(--cms-border-colour) !important;
    color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
  }
}

.search-choice {
  border-color: var(--cms-border-colour) !important;
}

.chosen-container-active .chosen-choices li.search-field input[type="text"] {
  color: var(--cms-text-colour) !important;
}


.ss-searchable-dropdown-field {
  &__control {
    background-color: var(--cms-background-colour--dynamic);
    border-color: var(--cms-border-colour);
    color: var(--cms-text-colour);
  }

  &__input {
    --cms-background-colour--dark: transparent;
  }

  &__menu {
    background-color: var(--cms-background-colour--dynamic);
    border-color: var(--cms-border-colour);
    color: var(--cms-text-colour);
  }

  &__option {
    background-color: var(--cms-background-colour--dynamic);
    border-color: var(--cms-border-colour);
    color: var(--cms-text-colour);
    cursor: pointer;

    &--is-focused {
      background-color: var(--cms-accent-colour);
      color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
    }
  }

  &__single-value {
    color: var(--cms-text-colour);
  }

  &__indicator {
    color: var(--cms-text-colour)!important;
  }

  &__input-container {
    cursor: text;
  }

  &__indicator-separator {
    background-color: var(--cms-border-colour)!important;
  }
}

.cms-tree {
  ul {
    li {
      a {
        background: none!important;
        border-radius: 3px;
        overflow: hidden;
        transition:
          background-color .2s ease,
          box-shadow .2s ease;

        &.jstree-hovered {
          box-shadow: inset 0 0 0 100px var(--cms-background-colour--dark);
        }
      }
    }
  }
}

#vakata-contextmenu {
  background: var(--cms-background-colour--dark) !important;
  border-color: var(--cms-border-colour) !important;
  color: var(--cms-text-colour) !important;
  box-shadow: none!important;

  &:before {
    border-color: var(--cms-background-colour--dark) transparent !important;
  }

  &:after {
    border-color: var(--cms-border-colour) transparent !important;
  }

  a {
    color: inherit!important;
    background: var(--cms-background-colour--dark) !important;

    &:hover {
      background: var(--cms-background-colour--light) !important;
    }
  }

  ul {
    box-shadow: none!important;
    border-color: var(--cms-border-colour) !important;
    background: var(--cms-background-colour--dark) !important;
  }
}

.cms-tree.jstree span.badge.status-modified,
.jstree .status-modified>.jstree-clicked,
.jstree .status-modified>.jstree-hovered,
.cms-tree.jstree span.badge.status-addedtodraft,
.jstree .status-addedtodraft>.jstree-clicked,
.jstree .status-addedtodraft>.jstree-hovered {
  background-color: var(--cms-background-colour--dark);
}

.treedropdownfield {
  &__input {
    opacity: 0 !important;
    ;
  }
}

.ss-tag-field__menu {
  border: 1px solid var(--cms-border-colour) !important;
  background-color: var(--cms-background-colour--dynamic) !important;
  box-shadow: none !important;
}

.ss-tag-field__option {
  color: var(--cms-text-colour) !important;
  background-color: var(--cms-background-colour--dynamic) !important;

  &--is-focused {
    color: var(--cms-accent-text-colour, var(--cms-background-colour--dark)) !important;
    background-color: var(--cms-accent-colour) !important;
  }
}

.step-label .flyout {
  color: var(--cms-accent-colour)!important;
}
form {
  .cms-content-fields {
    .nav-tabs.ui-widget-header {
      .nav-item {
        padding: 10px 5px 10px 0 !important;
        margin-left: 0;
        margin-right: 5px;

        .nav-link {
          padding: 0 !important;
          border-width: 0;

          &.active {
            font-weight: bold;
          }
        }
      }
    }

    .tab-content {
      .nav-tabs.ui-widget-header {
        .nav-link {
          padding: 5px 15px !important;
          border-radius: 5px;
          // background-color: var(--light);
          transition:
            color .3s ease,
            background-color .3s ease;

          &.active {
            font-weight: 400;
            color: var(--cms-text-colour);
            // background-color: var(--dark);
          }
        }
      }
    }
  }
}

.nav-tabs {
  border-color: var(--cms-border-colour) !important;
}

.nav-link,
.ui-tabs-anchor {
  color: var(--cms-text-colour) !important;
}

// .ui-tabs-nav {
//   &.cms-tabset-nav-primary {
//     .nav-item {
//       .nav-link {
//         &:hover {
//           border-color: var(--cms-border-colour) !important;
//         }
//       }

//       &.ui-state-active {
//         .nav-link {
//           &,
//           &:hover {
//             border-color: var(--cms-text-colour) !important;
//           }
//         }
//       }
//     }
//   }
// }

.nav-tabs {
  .nav-item {
    .nav-link {
      &:hover {
        border-color: var(--cms-border-colour) !important;
      }
      &.active {
        &,
        &:hover {
          border-color: var(--cms-text-colour) !important;
        }
      }
    }
  }
}

.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-default .nav-link:hover,
.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-default .ui-tabs-anchor:hover,
.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-default .nav-link:hover,
.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-default .ui-tabs-anchor:hover,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-default .nav-link:hover,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-default .ui-tabs-anchor:hover {
  border-color: var(--cms-border-colour) !important;
}

.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active .nav-link,
.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active .nav-link:hover,
.ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active a,
.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active .nav-link,
.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active .nav-link:hover,
.ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active a,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active .nav-link,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active .nav-link:hover,
.ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active a {
  border-color: var(--cms-text-colour) !important;
}
.ss-tag-field {
  &__control {
    color: var(--cms-text-colour);
    border-color: var(--cms-border-colour)!important;
    background-color: var(--cms-background-colour);

    input {
      background-color: transparent !important;
    }
  }

  &__indicator-separator {
    background-color: var(--cms-border-colour) !important;
  }

  svg {
    color: var(--cms-text-colour);
  }

  .ss-tag-field__multi-value {
    border-radius: 0;
    border-color: var(--cms-background-colour--light)!important;
  }

  .ss-tag-field__multi-value__label,
  .ss-tag-field__multi-value__remove {
    border-radius: 0;
    color: var(--cms-accent-text-colour, var(--cms-background-colour--dark))!important;
    background-color: var(--cms-accent-colour)!important;
    border-color: var(--cms-background-colour--light) !important;

    svg {
      color: inherit!important;
    }
  }
}

#react-select-2-listbox {
  border: 1px solid var(--cms-border-colour);
  background-color: var(--cms-background-colour);

  * {
    color: var(--cms-text-colour);
    border-color: var(--cms-border-colour) !important;
  }

  .ss-tag-field__option {
    cursor: pointer;

    &--is-focused {
      color: var(--cms-accent-text-colour, var(--cms-background-colour--dark));
      background-color: var(--cms-accent-colour);
    }
  }
}

.tox-tinymce {
  color: var(--cms-text-colour)!important;
  border-color: var(--cms-border-colour)!important;
}

.tox-toolbar,
.tox .tox-toolbar-overlord,
.tox:not(.tox-tinymce-inline) .tox-editor-header {
  color: var(--cms-text-colour)!important;
  border-color: var(--cms-border-colour)!important;
  background-color: var(--cms-background-light)!important;
}

.tox .tox-tbtn {
  border: 0!important;
  color: var(--cms-text-colour)!important;
  background-color: var(--cms-background-light)!important;

  &.tox-tbtn--enabled,
  &:hover,
  &:focus,
  &:active {
    color: var(--cms-accent-text-colour, var(--cms-background-colour--dark))!important;
    background-color: var(--cms-accent-colour)!important;
  }

  svg {
    fill: currentColor!important;
  }
}

.tox:not([dir="rtl"]) .tox-toolbar__group:not(:last-of-type) {
  border-color: var(--cms-border-colour)!important;
}

.tox .tox-collection__item-label {
  line-height: 1!important;

  div[style] {
    font-size: 14px!important;
  }
}

.tox-menu {
  border-color: var(--cms-border-colour)!important;
  background-color: var(--cms-background-colour--light)!important;
}

.tox-collection__item {
  * {
    border: 0!important;
    background-color: transparent!important;
    color: var(--cms-text-colour)!important;
  }

  &--active {
    background-color: var(--cms-background-colour--dark)!important;

    * {
      color: var(--cms-text-colour) !important;
    }
  }

  &--enabled {
    background-color: var(--cms-accent-colour)!important;

    * {
      color: var(--cms-accent-text-colour, var(--cms-background-colour--dark))!important;
    }
  }
}

.tox-collection__item-checkmark svg {
  fill: var(--cms-accent-text-colour)!important;
}

.tox-statusbar {
  border-color: var(--cms-border-colour)!important;
  background-color: var(--cms-background-colour--light)!important;

  * {
    color: var(--cms-text-colour)!important;
    border-color: var(--cms-border-colour) !important;
  }
}

.tox .tox-statusbar__resize-handle svg {
  fill: var(--cms-text-colour)!important;
}

.tox-dialog {
  &,
  &__header,
  &__footer {
    color: var(--cms-text-colour)!important;
    background-color: var(--cms-background-colour--light)!important;
  }

  .tox-button {
    border: 0!important;
    color: var(--cms-accent-text-colour, var(--cms-background-colour--dark))!important;
    background-color: var(--cms-accent-colour)!important;

    &--secondary {
      background-color: var(--cms-text-colour)!important;
    }
  }
}

.mce-container {
  &.mce-inline-toolbar {
    background-color: var(--cms-background-colour--dark);
    border-radius: 5px;

    &.mce-arrow-up {
      .mce-container-body {
        &:before {
          border-top-color: transparent;
        }

        &:after {
          border-bottom-color: var(--cms-background-colour);
        }
      }
    }

    &.mce-arrow-down {
      .mce-container-body {
        &:before {
          border-bottom-color: transparent;
        }

        &:after {
          border-top-color: var(--cms-background-colour);
        }
      }
    }
  }

  .mce-container-body {
    background-color: transparent !important;
  }
}

.mce-menu-item:hover,
.mce-menu-item.mce-selected,
.mce-menu-item:focus,
.mce-menu-item-normal.mce-active {
  background-color: var(--cms-background-colour--light)!important;
}

.tox-tinymce {
  min-height: 400px !important;
}

#Root_FormOptions {
  .form-group {
    >.form__field-holder {
      &:has(.htmleditor) {
        max-width: 100% !important;
        width: 100% !important;
        flex-basis: 100% !important;
        margin-left: 0 !important;
      }
    }
  }
}

.cms-content-toolbar {
  margin: 0!important;
  padding: 0!important;
  width: 100%;
}

.cms-content-header {
  .section-heading {
    a {
      color: var(--cms-accent-colour);
    }
  }
}

.ss-gridfield-buttonrow {
  background: var(--cms-background-colour)!important;
  border-bottom-color: var(--cms-border-colour)!important;

  button {
    &:first-of-type {
      margin-left: 0!important;
    }
  }
}

.toolbar--south {
  background-color: var(--cms-background-colour)!important;
  border-color: var(--cms-border-colour)!important;

  .preview-selector {
    .chosen-drop {
      ul.chosen-results {
        li.result-selected,
        li.highlighted {
          background-color: var(--cms-accent-colour)!important;
          color: var(--cms-accent-text-colour, var(--cms-text-colour))!important;

          &:before {
            color: inherit!important;
            background-color: transparent!important;
          }
        }
      }
    }
  }
}

.cms-panel-toggle {
  display: flex;
  padding: 10px 20px!important;
  align-items: center;
  justify-content: left!important;
}

.silverstripe-cms-toolbar-icon {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  width: 20px;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  background-color: transparent!important;

  &--darkmode {
    position: relative;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px currentColor;

    &:hover {
      &:after {
        opacity: 1;
      }
    }

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: currentColor;
      // Clip path to cut this cicle in half
      clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    }

    &:after {
      content: attr(data-darkmode);
      position: absolute;
      display: block;
      color: var(--cms-text-colour);
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      opacity: .3;
      font-size: 8px;
      text-transform: uppercase;
      font-weight: bold;
      margin-left: 5px;
      transition: opacity .2s ease;
    }
  }
}

.bulk-actions-counter {
  background-color: var(--cms-accent-colour)!important;
}

.btn-toolbar {
  border-color: var(--cms-border-colour)!important;
}

.silverstripe-cms-toolbar-icon {
  &--darkmode {
    &:after {
      content: 'darkmode: ' attr(data-darkmode) !important;
      white-space: nowrap;
      opacity: 1 !important;
      letter-spacing: 1px;
      font-weight: 400 !important;
    }
  }
}

.tox {
  .tox-pop {
    &:before,
    &:after {
      content: none!important;
    }

    &__dialog {
      border-color: var(--cms-border-colour)!important;
      background-color: var(--cms-background-colour--dynamic)!important;
    }
  }
}

.tox-dialog__body-content {
  color: var(--cms-text-colour)!important;
}

.htmleditor.white-background {
  iframe {
    background-color: #fff!important;
  }
}

.tox-dialog {
  &__body-nav-item {
    color: var(--cms-text-colour) !important;

    &--active {
      border-color: var(--cms-accent-colour) !important;
    }
  }
}

.tox-label {
  color: var(--cms-text-colour) !important;
}

.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) .tox-collection__item-caret svg {
  fill: var(--cms-accent-colour)!important;
}

.treedropdownfield {
  &__control {
    border-color: var(--cms-border-colour)!important;
    background-color: var(--cms-background-colour--dark)!important;
  }

  &__indicator-separator {
    background-color: var(--cms-border-colour)!important;
  }

  &__indicator {
    svg {
      color: var(--cms-text-colour)!important;
    }
  }

  &__menu {
    z-index: 100;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1.5rem 2rem 0 rgba(0, 0, 0, 0.3);
    background-color: var(--cms-background-colour--dark)!important;
    border-color: var(--cms-border-colour)!important;
  }

  &__menu-list {
    padding-top: 0;
    padding-bottom: 0;
  }

  &__option {
    cursor: pointer;
    color: var(--cms-text-colour)!important;
    background-color: var(--cms-background-colour--dynamic)!important;
    border-color: var(--cms-border-colour)!important;

    &:hover {
      background-color: var(--cms-background-colour)!important;
    }
  }

  &__single-value {
    color: var(--cms-text-colour)!important;
  }
}

/*
<html>
 <head></head>
 <body>
  <div class="treedropdownfield__menu-list react-select-qr46ko">
   <div class="fill-width treedropdownfield__option treedropdownfield__option--is-focused react-select-d7l1ni-option" aria-disabled="false" id="react-select-2-option-1" tabindex="-1">
    <span class="treedropdownfield__option-title-box flexbox-area-grow fill-height"><span class="treedropdownfield__option-title">Home</span></span>
   </div>
   <div class="fill-width treedropdownfield__option react-select-10wo9uf-option" aria-disabled="false" id="react-select-2-option-2" tabindex="-1">
    <span class="treedropdownfield__option-title-box flexbox-area-grow fill-height"><span class="treedropdownfield__option-title">About Us</span></span>
   </div>
   <div class="fill-width treedropdownfield__option react-select-10wo9uf-option" aria-disabled="false" id="react-select-2-option-3" tabindex="-1">
    <span class="treedropdownfield__option-title-box flexbox-area-grow fill-height"><span class="treedropdownfield__option-title">Contact Us</span></span>
   </div>
   <div class="fill-width treedropdownfield__option react-select-10wo9uf-option" aria-disabled="false" id="react-select-2-option-4" tabindex="-1">
    <span class="treedropdownfield__option-title-box flexbox-area-grow fill-height"><span class="treedropdownfield__option-title">Page not found</span></span>
   </div>
   <div class="fill-width treedropdownfield__option react-select-10wo9uf-option" aria-disabled="false" id="react-select-2-option-5" tabindex="-1">
    <span class="treedropdownfield__option-title-box flexbox-area-grow fill-height"><span class="treedropdownfield__option-title">Server error</span></span>
   </div>
  </div>
 </body>
</html>
*/
.ui-dialog {
  background: var(--cms-background-colour--dynamic) !important;
  border-color: var(--cms-border-colour) !important;
  max-height: 80vh;
  overflow: auto;
}

.ui-icon-closethick {
  transform: scale(.75);
}

.ui-dialog-titlebar-close {
  top: 5px!important;
  right: 5px!important;
  transform: none!important;
}

body {
  &[data-darkmode="on"] {
    .ui-dialog {
      .ui-resizable-handle {
        filter: invert(1);
      }
    }
  }

  &[data-darkmode="auto"] {
    @media(prefers-color-scheme: dark) {
      .ui-dialog {
        .ui-resizable-handle {
          filter: invert(1);
        }
      }
    }
  }
}

.form__field-holder {
  &:has(.form__field-update-url) {
    input {
      width: 100%!important;
    }
  }
}

.form__field-update-url {
  &:empty {
    display: none!important;
  }
}

.form__field-holder {
  .preview {
    background-color: transparent !important;
  }

  .readonly {
    background-color: var(--cms-background-colour--dark) !important;
    border-color: var(--cms-border-colour) !important;
  }

  label.readonly {
    background-color: transparent !important;
  }
}

.form__field-label {
  color: var(--cms-text-colour);
}

.uf-field-editor {
  .ss-gridfield-buttonrow-before {
    background-color: var(--cms-background-colour--dark) !important;
    border-color: var(--cms-border-colour) !important;
  }
}

$cms-background-colour: #f1f1f1;

:root {
  --cms-background-colour: #f1f1f1;
  --cms-background-colour--dark: #e9e9e9;
  --cms-background-colour--light: #fefefe;
  --cms-background-colour--dynamic: #e9e9e9;
  --cms-border-colour: #bebebe;
  --cms-link-colour: #036cd7;
  --cms-text-colour: #0e0e0e;
  --cms-text-colour--dynamic: grey;
  --cms-accent-colour: #005a92;
}