$primary-blue: rgb(0, 117, 255);
$primary-blue-60: rgba(0, 117, 255, 0.60);
$primary-blue-50: rgba(0, 117, 255, 0.50);
$primary-blue-20: rgba(0, 117, 255, 0.20);
$primary-blue-10: rgba(0, 117, 255, 0.10);
$primary-blue-7: rgba(0, 117, 255, 0.07);
$primary-blue-2: rgba(0, 117, 255, 0.02);
$primary-dark: rgb(16, 38, 64);
$primary-dark-75: rgba(16, 38, 64, 0.75);
$primary-dark-50: rgba(16, 38, 64, 0.5);
$primary-dark-30: rgba(16, 38, 64, 0.3);
$primary-dark-15: rgba(16, 38, 64, 0.15);
$primary-dark-10: rgba(16, 38, 64, 0.10);
$primary-dark-5: rgba(16, 38, 64, 0.05);
$error-red: rgb(233, 31, 79);
$error-red-50: rgba(233, 31, 79, 0.5);
$error-red-10: rgba(233, 31, 79, 0.10);
$error-red-25: rgba(233, 31, 79, 0.25);
$secondary-purple: rgb(108, 25, 173);
$alert-yellow-50: rgba(255, 238, 88, 0.50);
$alert-yellow: rgb(255, 238, 88);
$benchmark-orange: rgb(245, 129, 21);
$benchmark-orange-50: rgba(245, 129, 21, 0.50);
$benchmark-orange-25: rgba(245, 129, 21, 0.25);
$action-green: rgb(158, 206, 56);
$action-green-50: rgba(158, 206, 56, 0.5);
$action-green-5: rgba(158, 206, 56, 0.05);
$box-shadow: 5px 5px 30px 0 rgba(24, 45, 70, 0.05);
$background-color: #F6F9FB;

.bg {
  &-dark {
    background-color: $primary-dark;

    &-75 {
      background-color: $primary-dark-75;
    }

    &-50 {
      background-color: $primary-dark-50;
    }

    &-30 {
      background-color: $primary-dark-30;
    }

    &-15 {
      background-color: $primary-dark-15;
    }

    &-10 {
      background-color: $primary-dark-10;
    }
  }
}

.overflow {
  &-hidden {
    overflow: hidden;
  }

  &-visible {
    overflow: visible;
  }
}

.fc {
  &-white {
    color: #FFF
  }
}

@keyframes gh-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.no-margin-top {
  margin-top: 0 !important;
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

.gh-spinner-wrap {
  display: flex;
  justify-content: center;
  padding: 30px;

  object.gh-spinner {
    max-width: 150px;

    &.white {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
    }

    &.gray {
      filter: invert(100%) sepia(3%) saturate(1259%) hue-rotate(196deg) brightness(118%) contrast(87%);
    }
  }
}

.align-center-space-between {
  display: flex !important;
  justify-content: center;
  gap: 10px;
  align-items: center;

  &.align-top {
    align-items: flex-start;
  }
}


.align-right-space-between {
  display: flex !important;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;

  &.align-top {
    align-items: flex-start;
  }
}

.align-left-space-between {
  display: flex !important;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;

  &.align-top {
    align-items: flex-start;
  }
}

.striked-completed {
  &::before{
    content: '✅';
    margin-right: 5px;
  }
  span{
    text-decoration: line-through;
  }
}

.display-grid {
  display: grid;
  grid-template-columns: repeat( 12, 1fr );
  grid-auto-rows: auto;

  &.gap {
    &-10 {
      gap: 10px;
    }

    &-20 {
      gap: 20px;
    }
  }

  > .full,
  > .span-12 {
    grid-column: span 12;
  }

  > .three-quarters,
  > .span-9 {
    grid-column: span 9;
  }

  > .two-thirds,
  > .span-8 {
    grid-column: span 8;
  }

  > .half,
  > .span-6 {
    grid-column: span 6;
  }

  > .third,
  > .span-4 {
    grid-column: span 4;
  }

  > .quarter,
  > .span-3 {
    grid-column: span 3;
  }

  > .span-1 {
    grid-column: span 1;
  }
}

@media only screen and (max-width: 480px) {
  .display-grid {
    display: flex;
    flex-direction: column;
  }

  .display-flex.stack-on-mobile {
    flex-direction: column;
  }
}

.display-flex {

  display: flex;

  &.flex-end {
    justify-content: flex-end;
  }

  &.flex-start {
    justify-content: flex-start;
  }

  &.center {
    justify-content: center;
  }

  &.space-between {
    justify-content: space-between;
  }

  &.stretch {
    align-items: stretch;
  }

  &.gap-5 {
    gap: 5px;
  }

  &.gap-10 {
    gap: 10px;
  }

  &.gap-20 {
    gap: 20px;
  }

  &.align-center {
    align-items: center;
  }

  &.align-top {
    align-items: flex-start;
  }

  &.align-bottom {
    align-items: flex-end;
  }

  &.column {
    flex-direction: column;
  }

  &.flex-wrap,
  &.wrap {
    flex-wrap: wrap;
  }
}

.space-between:not(.display-flex) {
  display: flex !important;
  justify-content: space-between;
  align-items: center;

  &.align-right {
    justify-content: flex-end;
  }

  &.align-left {
    justify-content: flex-start;
  }

  &.align-center {
    justify-content: center;
  }

  &.gap-20 {
    gap: 20px;
  }

  &.gap-10 {
    gap: 10px;
  }

  &.no-gap {
    gap: 0;
  }

  &.align-top {
    align-items: flex-start;
  }
}

.label-with-input {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.space-above {
  &-5 {
    margin-top: 10px;
  }

  &-10 {
    margin-top: 10px;
  }

  &-20 {
    margin-top: 10px;
  }
}

.space-below {
  &-5 {
    margin-bottom: 10px;
  }

  &-10 {
    margin-bottom: 10px;
  }

  &-20 {
    margin-bottom: 10px;
  }
}

.border-radius {
  &-5 {
    border-radius: 5px;
  }
}


.property-groups {

  min-width: 360px;

  .property-group {

    &:not(:first-child) {
      margin-top: 20px;
    }

    .property-group-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        margin-top: 0;
        font-size: 16px;
      }

      .property-group-more {
        visibility: hidden;
      }
    }

    &:hover {
      .property-group-more {
        visibility: visible;
      }
    }
  }

  .property-group-fields {
    grid-gap: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    .property-field {

      &.col-width-1 {
        grid-column: 1 / 3;
      }

      max-width: 100%;

      .property-label {
        font-weight: 500;
        display: block;
      }

      .checkbox-label {
        font-weight: 400 !important;
        display: block;
      }

      input, select, textarea {
        max-width: 100%;
      }
    }
  }
}

body.groundhogg-admin-page {
  background-color: #F6F9FB;
}

#search-results {

  width: 440px;
  height: 500px;
  overflow-y: auto;

  img {
    width: 25px;
    border-radius: 4px;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    text-align: left;
    padding: 8px;
  }

  th:first-child, td:first-child {
    padding-left: 20px;
  }

  tr:nth-child(even) {
    background-color: $primary-dark-5;
  }

  tr {
    cursor: pointer;

    &:hover {
      background-color: $primary-blue-2;
    }
  }
}

.groundhogg-admin-page {
  h2.nav-tab-wrapper {
    border-bottom: 1px solid $primary-dark-15;
    padding-top: 0;
    margin-top: 20px;

    &.no-margin {
      margin-top: 0;
    }

    .nav-tab {
      border-radius: 3px 3px 0 0;
      border: 1px solid #D3DAE0;
      border-bottom: none;
      //border: none;
      background-color: #D3DAE0;

      margin-left: 0;
      margin-right: 5px;

      &.nav-tab-active {
        border: 1px solid $primary-dark-15;
        background: $background-color;
        border-bottom: 1px solid $background-color;
        margin-bottom: -1px;
      }
    }
  }
}

h2.nav-tab-wrapper.gh {

  border-bottom: 0;
  padding-top: 0;

  .nav-tab {
    border-radius: 3px 3px 0 0;
    border: none;

    margin-left: 0;
    margin-right: 5px;

    &.nav-tab-active {
      border: none;
      background-color: #FFFFFF;
    }
  }

  button {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 3px;

    &:hover {
      background-color: $primary-dark-5;
    }

    .dashicons {
      margin: 0;
    }

    border-radius: 3px;
    background: none;
    border: none;
    cursor: pointer;
    margin: 4px 0;
  }
}

#notes-here,
#tasks-here {
  .notes-widget,
  .tasks-widget {
    //margin: auto -20px;

    .notes-header,
    .tasks-header {
      padding-right: 10px;
      padding-left: 20px;
      margin-bottom: 10px;
    }

    .note,
    .task {
      padding-left: 20px;
      padding-right: 10px;
      box-sizing: border-box;
    }

    .add-note,
    .add-task {
      padding: 20px;
    }
  }
}

@keyframes task-completing {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: $action-green-5;
  }
}

.notes-widget {
  overflow: auto;

  form {
    padding-bottom: 10px;
  }

  .notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    #add-notes {
      margin-left: auto;
    }

    h3 {
      font-size: 14px;
      margin: 0;
    }

    .pill {
      font-weight: 500;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  #note-type {
    width: fit-content;
  }

  .note {
    border-top: 1px solid $primary-dark-10;
    padding-top: 10px;
    //margin-top: 10px;
    //display: flex;
    //gap: 20px;
    //align-items: center;

    > .icon {
      width: 25px;
      padding-top: 10px;
    }

    .note-header {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;

      > svg {
        width: 18px;
        height: 18px;
        color: $primary-dark-30;
      }

      .added-by{
        font-size: 12px;
      }

      .summary {
        color: $primary-dark;
      }

      input.select-note {
        display: none;
      }

      input.select-note:checked {
        display: block;
      }

      &:has(input.select-note:checked) {
        > svg {
          display: none;
        }
      }

      &:hover {
        input.select-note {
          display: block;
        }

        > svg {
          display: none;
        }
      }
    }

    .note-content {

      img {
        max-width: 100%;
        height: auto !important;
      }

      p {
        margin-top: 0;
      }

      ul {
        list-style: disc;
        margin-left: 2em;
      }
    }
  }
}

.saved-replies-widget {

  > :first-child {
    margin-bottom: 20px;
  }

  .reply {
    padding: 10px 30px;
    border-top: 1px solid $primary-dark-15;
  }
}

.tasks-widget {
  overflow: auto;

  .task-settings {
    margin-top: 10px;
  }

  .tasks-header {
    display: flex;
    //justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    gap: 5px;
    flex-wrap: wrap;

    h3 {
      font-size: 14px;
      margin: 0;
    }

    #add-tasks {
      margin-left: auto;
    }
  }

  #task-type {
    width: fit-content;
  }

  form {
    padding-bottom: 10px;
  }

  .task {
    border-top: 1px solid $primary-dark-10;
    padding-top: 10px;

    &:has( .task-activity-timeline, .toggle-activity ) {
      padding-bottom: 10px;
    }

    &.hide-timeline {
      .task-activity-timeline {
        display: none;
      }
    }

    .task-activity-timeline {
      padding-left: 10px;
      border-left: 2px solid $primary-dark;

      .task-activity-item {
        position: relative;

        .timeline-dot {
          position: absolute;
          left: -16px;
          background-color: $primary-dark;
          top: 50%;
          transform: translateY(-50%);
          width: 10px;
          height: 10px;
          border-radius: 5px;
        }

        .task-activity-note {

          padding: 5px 8px;
          background-color: $primary-dark-5;
          //border: 1px solid $primary-dark-15;
          //box-shadow: $box-shadow;
          border-radius: 4px;

          > * {
            line-height: 1.1;
          }

          > *:first-child {
            margin-top: 0;
          }

          > *:last-child {
            margin-bottom: 0;
          }
        }

      }
    }

    a.associated-object {
      font-size: 12px !important;
      display: flex;
      align-items: center;
      margin-bottom: 3px;

      &:hover {
        text-decoration: none;
        color: $primary-dark;
        transition: 0.2s;
      }

      img {
        border-radius: 5px;
        width: 18px;
        margin-right: 5px;
      }

      span.dashicons {
        margin-right: 5px;
      }

    }

    .details {
      font-size: 12px;

      .pill {
        font-size: 11px !important;
      }
    }

    &.complete {
      background: $action-green-5;
    }

    &.completing {
      animation-name: task-completing;
      animation-duration: 1s;
      animation-iteration-count: infinite;

      .mark-complete {
        visibility: hidden;
      }
    }

    .task-header {
      width: 100%;
      display: flex;
      font-weight: 500;
      align-items: center;
      gap: 10px;

      > svg {
        width: 18px;
        color: $primary-dark-30;
      }

      .summary {
        color: $primary-dark;
      }

      input.select-task {
        display: none;
      }

      input.select-task:checked {
        display: block;
      }

      &:has(input.select-task:checked) {
        > svg {
          display: none;
        }
      }

      &:hover {
        input.select-task {
          display: block;
        }

        > svg {
          display: none;
        }
      }
    }

    .task-content {

      overflow: auto;

      img {
        max-width: 100%;
        height: auto !important;
      }

      p {
        margin-top: 0;
      }

      ul {
        list-style: disc;
        margin-left: 2em;
      }
    }
  }
}

.gh-panel {
  > #notes-here > .notes-widget {
    .notes-header {
      padding: 10px;
      margin-bottom: 0;
    }
  }

  > .tasks-widget {
    .tasks-header {
      padding: 10px;
    }

    .task {
      padding-left: 20px;
      padding-right: 10px;
    }
  }
}

#groundhogg-toolbar-quick-search {
  .my-tasks {
    margin: 0 -20px -20px -20px;
    max-height: 80vh;
    overflow: auto;

    .task {
      padding-left: 20px;
      padding-right: 10px;
      box-sizing: border-box;

      &.completing {
        animation-name: task-completing;
        animation-duration: 1s;
        animation-iteration-count: infinite;

        .mark-complete {
          visibility: hidden;
        }
      }
    }
  }
}

input {
  &:invalid {
    border-color: $error-red;

    &:focus {
      border-color: $error-red;
      box-shadow: 0 0 0 1px $error-red;
      outline: 2px solid transparent;
    }
  }
}

body {
  .select2-dropdown {
    z-index: 10001;
  }

  &.modal-open, &.groundhogg-toolbar-quick-search-open {
    .select2-dropdown {
      z-index: 999999;
    }
  }
}

.gh-header {
  display: flex;
  justify-content: space-between;
  box-shadow: $box-shadow;
  align-items: center;
  background: #FFFFFF;
  padding: 8px 12px;
  min-height: 60px;
  box-sizing: border-box;
  position: relative;
  gap: 20px;

  span.white-label-icon {
    height: 60px;
    padding: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
    background-color: $primary-dark;
    color: white;
    font-size: 16px;
    display: flex;
    align-items: center;
    font-family: "Helvetica Neue", Helvetica, Arial, Lucida Grande, sans-serif;
    font-weight: bold;
    letter-spacing: -1px;
  }

  h1 {
    font-size: 20px;
    line-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    margin: 0;
  }

  &.no-padding {
    padding: 0;
  }

  > svg:first-child {
    height: 60px;
    padding: 10px;
    box-sizing: border-box;
    //border-right: 1px solid #ccd0d4;
    flex-shrink: 0;
    background-color: $primary-dark;
  }

  &.is-sticky {
    position: sticky;
    top: 32px;
    z-index: 10000;
  }

  .title-wrap {

    h1.breadcrumbs {
      line-height: 1;
      margin: 0;
      display: flex;
      gap: 10px;
      align-items: center;
      font-size: 1.6em;
      white-space: nowrap;

      .sep,
      .base {
        font-weight: 400;
        cursor: pointer;
      }

      .part {
        font-weight: 500;
      }

      .dashicons {
        color: $primary-dark-30;
      }
    }
  }
}

a.action-link {
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.pill {
  background: $primary-blue-7;
  border-radius: 5px;
  display: inline-block;
  padding: 3px 8px;
  color: $primary-dark;

  &.tag {
    background-color: #f2f2f2;
    &:is(a):hover{
      background-color: $primary-dark-15;
    }
  }

  &.attention,
  &.yellow {
    background: $alert-yellow-50;
    color: darken($alert-yellow, 55);
  }

  &.warning,
  &.orange {
    background: $benchmark-orange-25;
    color: darken($benchmark-orange, 35);
  }

  &.notice,
  &.blue {
    background: $primary-blue-50;
  }

  &.success,
  &.green {
    background: $action-green-50;
    color: darken($action-green, 35);
  }

  &.danger,
  &.red {
    background: $error-red-25;
    color: darken($error-red, 35)
  }

  &.dark {
    background-color: $primary-dark;
    color: #fff;
  }

  &.purple {
    background-color: $secondary-purple;
    color: #fff;
  }

  &.semi-dark {
    background-color: $primary-dark-75;
    color: #fff;
  }

  &.sm {
    font-size: 13px;
  }

  &.bold {
    font-weight: 500;
  }

  &.clickable {
    cursor: pointer;

    &:hover {
      opacity: 0.8;
    }
  }


}

svg,
p.gh-text,
pre.gh-text,
span.gh-text {
  &.red,
  &.danger {
    color: $error-red;

    &.dark {
      color: darken($error-red, 35)
    }
  }

  &.orange,
  &.warning {
    color: $benchmark-orange;
  }

  &.purple{
    color: $secondary-purple;
  }

  &.green {
    color: $action-green;
  }

  &.md {
    font-size: 15px;
  }

  &.sm {
    font-size: 13px;
  }

  &.lg {
    font-size: 18px;
  }

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

.avatars {
  img.avatar {
    width: 20px;
    border-radius: 50%;

    &:not(:first-child) {
      margin-left: -3px;
    }
  }
}

.has-box-shadow {
  box-shadow: $box-shadow;
}

.gh-panel {
  background: #FFFFFF;
  box-shadow: $box-shadow;
  /*margin: 20px;*/
  border-radius: 5px;
  border: none;

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  &.outlined {
    box-shadow: none;
    border: 1px solid $primary-dark-15;

    &:not(:last-child) {
      margin-bottom: 10px;
    }
  }

  &.top-left-square {
    border-top-left-radius: 0;
  }

  .gh-panel-header {

    border-bottom: 1px solid $primary-dark-10;
    display: flex;
    justify-content: space-between;

    h2 {
      justify-content: left;

      .dashicons {
        font-size: 14px;
        height: 14px;
        width: 14px;
        margin-right: 10px;
      }

      font-size: 14px;
      padding: 8px 12px;
      margin: 0;
    }

    button.panel-handle-order-higher,
    button.panel-handle-order-lower,
    button.toggle-indicator {
      background: transparent;
      border: none;

      &:hover {
        background: $primary-dark-5;
      }

      &:focus {
        box-shadow: 0 0 0 1px $primary-blue, 0 0 2px 1px $primary-blue-60;
        outline: 1px solid transparent;
      }

      &::before {
        display: inline-block;
        font: normal 20px/1 dashicons;
        speak: never;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-decoration: none;
      }
    }

    button {

      &.toggle-indicator {
        border-top-right-radius: 5px;
      }

      &.toggle-indicator::before {
        content: "\f142";
      }

      &.panel-handle-order-lower::before {
        content: "\f347";
      }

      &.panel-handle-order-higher::before {
        content: "\f343";
      }
    }

  }

  &.closed {
    .gh-panel-header {

      border-bottom: none;

      button.toggle-indicator::before {
        content: "\f140";
      }
    }
  }

  .inside {
    padding: 20px;
    margin-top: 0;
    margin-bottom: 0;

    > p:first-child {
      margin-top: 0;
    }

    &.no-padding {
      padding: 0;
    }
  }

  &.gh-error {
    background: $error-red-10;
  }
}

.wp-core-ui {

  select {
    vertical-align: initial;
  }

  button {

    &.button {
      &.has-dashicon {
        display: flex;
        align-items: center;
        gap: 5px;
      }
    }
  }
}

a.gh-button {
  display: inline-block;
  line-height: 1.3;
}

a,
input[type='button'],
input[type='submit'],
button {
  cursor: pointer;

  &.dashicon-button {
    border: none;
    background: none;
    opacity: 0.8;

    &:hover {
      opacity: 1;
    }

    &:disabled {
      opacity: 0.5;
      cursor: initial;
    }
  }

  &.gh-button,
  &.gh-submit {
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      text-decoration: none;
    }

    border: none;
    color: #FFFFFF;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 16px;
    font-weight: 400;

    &:disabled {
      opacity: 0.5;
      cursor: initial;
    }

    &.more-nav:after {
      content: "\f347";
      display: inline-block;
      font: normal 18px/1 dashicons;
      vertical-align: middle;
      margin-left: 5px;
      speak: never;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-decoration: none;
    }

    &.dropdown {

      display: flex;
      justify-content: space-between;
      gap: 10px;

      border: 1px solid $primary-dark-50;
      background: #FFFFFF;
      color: $primary-dark;
      padding: 5px 10px;

      &::after {
        content: "\f140";
        display: inline-block;
        font: normal 20px/1 dashicons;
        speak: never;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-decoration: none;
      }
    }

    &.no-border {
      border: none !important;
    }

    &.action {
      background: $action-green;

      &:hover:not(:disabled) {
        background: darken($action-green, 10);
      }
    }

    &#gh-submit,
    &.primary {
      background: $primary-blue;

      &.text {
        background-color: transparent;
        color: $primary-blue;
      }

      &:hover:not(:disabled) {
        background: darken($primary-blue, 10);

        &.text {
          background-color: $primary-blue-10;
          color: $primary-blue;
        }
      }
    }

    &.grey {
      //border: none;
      background: $primary-dark-5;
      color: $primary-dark;
      padding: 5px 10px;
      border: 1px solid $primary-dark-50;

      &:hover:not(:disabled) {
        background: $primary-dark-15;
      }
    }

    &.dark {
      border: none;
      background: $primary-dark;
      color: #fff;
      padding: 5px 10px;

      &:hover:not(:disabled) {
        background: $primary-dark-50;
      }
    }

    &.secondary {
      border: 1px solid $primary-blue-60;
      background: #FFFFFF;
      color: $primary-blue;
      padding: 5px 10px;

      &.page-title-action {
        //padding: 0 10px;

        &:has(.dashicons) {
          display: flex;
          gap: 5px;
        }
      }

      &.text {
        border: none;
        background: transparent;
        color: $primary-dark;
      }

      &:hover:not(:disabled) {
        color: darken($primary-blue, 10);
        border-color: $primary-blue;
        background-color: $primary-blue-2;

        &.text {
          border: none;
          background: $primary-dark-10;
          color: $primary-dark;
        }
      }
    }

    &.danger {
      background: $error-red;

      &.text {
        color: $error-red;
        background-color: transparent;
      }

      &:hover:not(:disabled) {
        background: darken($error-red, 10);

        &.text {
          color: $error-red;
          background-color: $error-red-10;
        }
      }
    }

    &.dashicon {
      border: 1px solid $primary-dark-50;
      color: $primary-dark;
      background-color: #FFF;
      padding: 4px 5px;

      &.filled {
        background: $primary-dark-10;
      }

      &:hover {
        background-color: $primary-dark-10;
      }
    }

    &.icon {
      //background: #FFFFFF;
      //border: 1.2px solid rgba(16, 38, 64, 0.15);
      padding: 7px;
      display: flex;
      align-items: center;
      //color: $primary-blue;

      svg {
        width: 20px;
        height: 20px;
      }

      &.small {
        svg {
          width: 14px;
          height: 14px;
        }
      }

      //&:hover:not(:disabled) {
      //  border-color: rgba(16, 38, 64, 0.25);
      //}
    }

    &.big {
      font-size: 24px;
      padding: 15px 32px;
    }

    &.medium {
      font-size: 18px;
      padding: 11px 22px;

      &.icon {
        gap: 10px;
      }
    }

    &.small {
      font-size: 14px;
      padding: 4px 6px;
    }

    &.bold {
      font-weight: 700;
    }

    &.loud {
      text-transform: uppercase;
    }

    .gh-spinner {
      display: block;
      margin: 0 auto;
      height: 15px;
      width: 15px;
      border: 5px solid rgba(255, 255, 255, 0.4);
      border-bottom-color: #ffffff;
      border-radius: 50%;
      position: relative;
      animation: gh-rotation 1s linear infinite;
    }
  }
}


.gh-button-group {

  display: flex;

  button.gh-button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0;
  }

  button.gh-button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

}


.search-options-widget-wrap {
  position: relative;

  .search-options-widget {
    position: absolute;
    z-index: 999;

    &.fixed {
      z-index: 999999;
      position: fixed;
    }

    border: 1px solid #8c8f94;
    display: flex;
    flex-direction: column;
    //gap: 5px;
    background: #FFFFFF;
    border-radius: 5px;
    box-shadow: 5px 5px 30px rgba(24, 45, 70, 0.05);
    min-width: 170px;

    &.mount-from-bottom {
      bottom: 0;
    }

    .header {
      padding: 5px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #8c8f94;
      gap: 20px;
      margin-bottom: 0;

      button.close {
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        opacity: 0.8;

        &:hover {
          opacity: 1;
        }
      }
    }

    .search-options {
      padding: 5px 8px;
      max-height: 300px;
      overflow: auto;

      &.has-groups {
        .option {
          padding-left: 10px;
        }
      }

      * {
        //padding-top: 3px;
        //padding-bottom: 3px;
      }

      .option-group {
        font-weight: 500;
      }

      .option {
        cursor: pointer;
        border-radius: 3px;
        padding: 2px 5px;
        margin: 0;

        &.focused,
        &:hover {
          background: $primary-blue;
          color: #FFFFFF;
        }
      }
    }
  }
}

.gh-dialog {
  position: fixed;
  top: -100px;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, 0);
  margin: auto;
  padding: 10px 20px;
  box-shadow: $box-shadow;
  z-index: 9999999;
  border-radius: 5px;

  &.gh-dialog-success {
    color: #FFFFFF;
    background-color: $action-green;
  }

  &.gh-dialog-error {
    color: #FFFFFF;
    background-color: $error-red;
  }

  &.gh-dialog-warning {
    color: #FFFFFF;
    background-color: $benchmark-orange;
  }

  &.gh-dialog-info {
    color: #FFFFFF;
    background-color: $primary-dark;
  }
}

#modal-log-details {
  display: none;
}

.gh-legacy-modal {

  #modal-log-details-view {
    width: 500px;
    padding: 30px;

    iframe {
      width: 100%;
    }

    .notice {
      margin: 0;
    }

    h2 {
      margin: 0;
    }
  }

  h3.replacements-group {
    padding-left: 20px;
  }

  table.replacements-table {
    tr > *:first-child {
      padding-left: 20px;
    }
  }

  table.form-table {
    width: 600px;

    tr > *:first-child {
      padding-left: 20px;
    }
  }

  .gh-modal-dialog-content {

    > table.wp-list-table {
      border: none;
      max-width: 800px;
    }
  }

  .gh-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    box-shadow: 5px 5px 30px 0 rgb(24 45 70 / 5%);
    align-items: center;
    background: #FFFFFF;
    padding: 8px 12px;
    box-sizing: border-box;
    position: sticky;
    bottom: 0;

    &.hidden {
      display: none;
    }
  }

}

.gh-modal {
  align-items: center;
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
  z-index: 10000;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  box-sizing: border-box;

  &.hidden {
    display: none;
  }

  .saved-replies-widget .reply {
    margin: 0 -30px;
  }

  &.send-email {
    bottom: 0;
    top: auto;
    right: 20px;
    left: auto;
    height: fit-content;
    width: 500px;

    .gh-modal-dialog {
      height: fit-content;
      width: 100%;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;

      .gh-row {
        align-items: center;
      }

      .select2 {
        select2-container, .select2-selection {
          border: none !important;
          outline: none !important;
        }
      }
    }
  }

  &.mini {
    right: auto;
    bottom: auto;
    width: fit-content;

    .gh-modal-dialog {
      padding: 22px;
    }
  }

  h2 {
    margin-top: 0;
  }

  &-overlay {
    position: fixed;
    background: $primary-dark-50;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
  }

  &-confirmation {
    width: 500px;
    //padding: 30px;
  }

  &-loading {
    width: 200px;
    border-radius: 30px;
    background: transparent !important;
  }

  &-frame {
    box-sizing: border-box;
    max-width: calc(100vw - 100px);
    //max-height: calc(92vh - 64px);
    position: relative;
  }

  &-dialog {

    box-sizing: border-box;
    background: white;
    border-radius: 5px;
    position: relative;
    max-width: calc(100vw - 100px);
    max-height: calc(92vh - 64px);
    overflow: auto;
    overflow-x: hidden;

    .gh-header {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      padding: 8px 20px;

      h3 {
        margin: 0;
      }
    }

    &-content {
      padding: 30px;
    }

    &.overflow-visible {
      overflow: visible;
    }

    &.overflow-auto {
      overflow: auto;
    }

    &.no-padding {
      .gh-modal-dialog-content {
        padding: 0;
      }
    }

    &-alert {
      p {
        font-size: 18px;
        margin: 0;
        line-height: 1.6;
      }

      p:first-child {
        margin-top: 0;
      }
    }

    #search-form {
      padding: 30px 20px;

      input {
        width: 100%;
      }
    }
  }

  &-button-close-top {
    position: absolute;
    right: 3px;
    top: 5px;
    padding: 0;
  }

  &-confirmation-buttons {

    button {
      //width: 100%;
      //padding: 20px;
    }

    display: flex;
    //gap: 1rem;
    margin-top: 20px;
    gap: 10px;
    justify-content: flex-end;
  }

  #quick-search-wrap {

    form {
      padding: 30px;

      input {
        width: 100%;
        font-size: 16px;
      }
    }

    .contact-list {
      height: 500px;
      overflow: auto;
    }
  }
}

input.ui-autocomplete-input {
  &.focus-visible {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.ui-autocomplete {
  z-index: 1000000;
  //box-shadow: $box-shadow;
  //border: 1px solid $primary-dark-15;
}


.gh-radio-group {
  display: flex;
  gap: 20px;
}

.gh-picker-container{
  flex-grow: 1;
  min-width: 0;
}

.gh-input-group,
.input-wrap {
  display: flex;
  justify-content: flex-start;

  input, select, textarea {
    //flex-grow: 1;
    margin: 0;
    min-width: 0;

    &.bigger {
      flex-grow: 2;
    }
  }

  > *:not(:first-child) {

    &.input-with-replacements {
      input {
        border-left: 0 !important;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    .select2-selection {
      border-left: 0 !important;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    border-left: 0 !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  > *:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  > .gh-picker-container{
    &:not(:first-child){
      > .gh-picker {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: none;
      }
    }

    &:not(:last-child){
      > .gh-picker {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
}

p.error,
.commit-errors {
  color: $error-red;
}

.wp-editor-container {
  textarea {
    width: 100%;
    //margin: 0;
    box-shadow: none;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    padding: 10px;
    margin: 1px 0 0;
    line-height: 150%;
    border: 0;
    outline: 0;
    display: block;
    resize: vertical;
    box-sizing: border-box;
  }
}

.gh-input-repeater {

  margin: 5px 0;

  & &-row {
    display: flex;

    select,
    input {
      width: 100%;
      border-right: none;
      border-radius: 0;
      margin: 0;
      flex-grow: 1;
    }

    .input-wrap {
      width: 100%;

      > select,
      > input {
        border-radius: 0;
        border-right-width: 1px;
      }

      > button.replacements-picker-start {
        //border: solid #8c8f94;
        border-right-width: 0;
        border-radius: 0;
      }
    }

    span.handle {
      border-bottom: 1px solid #8c8f94;
      border-radius: 0;
      padding: 6px;
      border-top-width: 0;
      background-color: #FFFFFF;
    }

    button {
      border: 1px solid #8c8f94;
      border-radius: 0;
      padding: 6px;
      border-top-width: 0;

      &:not(:last-child) {
        border-right: none;
      }
    }

    &:first-child {
      > select:first-child,
      > button:first-child,
      > input:first-child {
        border-top-left-radius: 4px;
      }

      span.handle {
        border-top: 1px solid #8c8f94;
      }

      button {
        border-top-width: 1px;
      }

      > button:last-child {
        border-top-right-radius: 4px;
      }
    }

    &:not(:first-child) {
      * {
        border-top-width: 0;
      }
    }

    &:nth-last-child(2) {
      > select:first-child,
      > input:first-child {
        border-bottom-left-radius: 4px;
      }
    }
  }

  & &-row-add {
    display: flex;
    //justify-content: flex-end;

    .spacer {
      width: 100%;
    }

    button {
      padding: 5px 6px;
      border: 1px solid #8c8f94;
      border-top: none;
      border-radius: 0 0 4px 4px;
    }

    &:first-child button {
      border-top: 1px solid #8c8f94;
      border-radius: 4px 4px 4px 4px;
    }
  }
}

button:has(.gh-dropdown-menu) {
  position: relative;
}

.gh-dropdown-menu {

  box-sizing: border-box;
  z-index: 10000;
  position: fixed;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: $box-shadow;
  min-width: 120px;
  border-radius: 5px 0 5px 5px;
  border: 1px solid #8c8f94;
  padding: 5px;
  gap: 5px;

  &.absolute {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateY(100%);
  }

  * {
    box-sizing: border-box;
  }

  &-item {
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    gap: 10px;

    &:hover {
      background-color: $primary-dark-10;
      cursor: pointer;
    }
  }
}

.gh-step-nav {

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;

  & &-join {
    width: 100%;
    border-top: 1px solid $primary-blue;
    border-bottom: none;
  }

  button:disabled + hr.gh-step-nav-join {
    opacity: 0.5;
  }

  & &-step-num {

    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;

    &-label {
      position: absolute;
      bottom: -20px;
    }

    &-circle {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid $primary-dark-50;
      background-color: #FFF;
    }

    &.current {
      .gh-step-nav-step-num-label {
        color: $primary-blue;
      }

      .gh-step-nav-step-num-circle {
        color: #FFFFFF;
        background-color: $primary-blue;
        border-color: $primary-blue;
        font-weight: 500;
      }
    }
  }
}


.gh-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;

  button.add-tag {

    padding-left: 3px;
    padding-right: 3px;

    &:hover {
      background-color: $primary-dark-5;
    }

    .dashicons {
      margin: 0;
    }

    border-radius: 3px;
    background: none;
    border: none;
    cursor: pointer;
  }

  a.gh-tag,
  span.gh-tag {
    background: #f2f2f2;
    padding: 3px 9px;
    gap: 5px;
    border-radius: 3px;
    font-size: 12px;
    display: flex;
    align-items: center;
    color: $primary-dark;

    &.remove {
      background: $error-red-50;
      color: darken($error-red, 35)
    }

    &.adding {
      background: $action-green-50;
      color: darken($action-green, 35)
    }

    .dashicons {
      margin-right: -6px;
      cursor: pointer;
      border-radius: 3px;

      &:hover {
        background-color: $primary-dark-5;
      }
    }
  }
}


.gh-rows-and-columns {
  display: flex;
  flex-direction: column;
  gap: 10px;

  label {
    display: inline-block;
    margin-bottom: 5px;

    &.block {
      display: block;
    }
  }

  input:not([type=checkbox],[type=radio]), select {
    width: 100%;
  }

  .row,
  .gh-row {
    display: flex;
    gap: 10px;
    justify-content: space-between;

    .gh-col, .gh-column, .col {
      width: 100%;
      //display: flex;
      //flex-direction: column;
      //gap: 10px;
    }
  }
}

#select-email-preview {
  width: 100%;
  height: 300px;
  border-radius: 5px;
  border: 1px solid $primary-dark-50;
}

#gh-send-broadcast-form {

  #gh-broadcast-email-preview {
    width: 100%;
    height: 300px;
    border-radius: 5px;
    border: 1px solid $primary-dark-50;
  }

  label {
    display: inline-block;
    margin-bottom: 5px;
  }
}

.gh-progress-bar {
  min-width: 300px;
  //border: 1px solid $primary-blue;
  background-color: $primary-blue-10;
  border-radius: 5px;
  overflow: hidden;
  box-sizing: border-box;
  //position: relative;
  //height: 25px;
  //box-sizing: content-box;

  &.error,
  &.gh-error {

    background-color: $error-red-10;

    .gh-progress-bar-fill {
      background-color: $error-red;
    }
  }

  .gh-progress-bar-fill {
    box-sizing: border-box;
    //position: absolute;
    //top: 0;
    //left: 0;
    //border-radius: 5px;
    width: 1px;
    background-color: $primary-blue;
    padding: 8px;
    display: flex;
    align-items: center;

    .fill-amount {
      font-size: 18px;
      color: #FFFFFF;
      margin-left: 10px;
    }
  }

  &.complete {
    border-color: $action-green;

    .gh-progress-bar-fill {
      background-color: $action-green;
    }
  }

  &.small {

    .gh-progress-bar-fill {

      padding: 4px;

      .fill-amount {
        font-size: 14px;
        color: #FFFFFF;
        margin-left: 6px;
      }
    }
  }
}

.gh-has-tooltip,
:has(>.gh-tooltip) {

  position: relative;
  box-sizing: border-box;

  &:hover {
    .gh-tooltip {
      display: block;
    }
  }

  .gh-tooltip {
    width: max-content;
    display: none;
    position: absolute;
    background-color: $primary-dark;
    color: #FFFFFF;
    box-shadow: $box-shadow;
    z-index: 999999;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: normal;
    //position: relative;
    font-family: 'system-ui', Arial, "Helvetica Neue", Helvetica, sans-serif;

    a {
      text-decoration: underline;
      color: #FFFFFF;
      opacity: 0.8;

      &:hover {
        opacity: 0.4;
      }
    }

    &.right {
      left: calc(100% + 4px);
      top: 50%;
      //left: 50%;
      transform: translate(0, -50%);

      &:before {
        position: absolute;
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-right: 7px solid $primary-dark;
        border-bottom: 7px solid transparent;
        //border-bottom: 5px solid $primary-dark;
        transform: translate(0, -50%);
        top: 50%;
        left: -5px;
      }
    }

    &.left {
      right: calc(100% + 4px);
      top: 50%;
      //left: 50%;
      transform: translate(0, -50%);

      &:before {
        position: absolute;
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-right: 7px solid $primary-dark;
        border-bottom: 7px solid transparent;
        //border-bottom: 5px solid $primary-dark;
        transform: translate(0, -50%) rotate(180deg);
        top: 50%;
        right: -5px;
      }
    }

    &.top {
      bottom: calc(100% + 4px);
      left: 50%;
      transform: translate(-50%, 0);

      &:before {
        position: absolute;
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid $primary-dark;
        transform: translate(-50%, 0) rotate(180deg);
        bottom: -5px;
        left: 50%;
      }
    }

    &.bottom {
      top: calc(100% + 4px);
      left: 50%;
      transform: translate(-50%, 0);

      &:before {
        position: absolute;
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid $primary-dark;
        transform: translate(-50%, 0);
        top: -5px;
        left: 50%;
      }
    }

    &.bottom-right {
      top: calc(100% + 4px);
      right: 0;

      &:before {
        position: absolute;
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid $primary-dark;
        transform: translate(-50%, 0);
        top: -4px;
        right: 5%;
      }
    }
  }
}

.gh-input-inline-label {
  position: relative;

  label {
    position: absolute;
    opacity: 0.5;
    display: inline-block;
    left: 6px;
    top: 6px;
  }

  input {
    padding-left: 60px;
  }
}

.textarea-with-buttons {
  display: flex;

  textarea {
    flex-grow: 1;
    border-top-right-radius: 0;
  }

  .buttons {
    display: flex;
    flex-direction: column;

    button {
      border-left-width: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;

      &:not(:first-child) {
        border-top-width: 0;
        border-top-right-radius: 0;
      }

      &:not(:last-child) {
        border-bottom-right-radius: 0;
      }
    }
  }
}


.select2-step {

  display: flex;
  gap: 20px;
  align-items: center;

  svg {
    width: 25px;
    height: 25px;
  }

  &.benchmark {
    svg {
      color: $benchmark-orange;
    }
  }

  &.action {
    svg {
      color: $action-green;
    }
  }

  .step-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.select2-container .select2-selection--single {
  height: auto;
  min-height: 28px;
}

.contact-quick-edit {
  width: 500px;

  .gh-header {
    img {
      border-radius: 5px;
    }
  }
}


.gh-form-fields {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 10px 10px;
  align-items: stretch;

  label {
    cursor: pointer;
    vertical-align: baseline;
  }

  .gh-input {
    outline: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
  }

  input[type=file].gh-file-uploader {
    width: 100%;
    margin: auto;
    padding: 30px;
    box-sizing: border-box;
    background: #f1f1f1;
    border: 2px dashed #e5e5e5;
    text-align: center;
  }

  * {
    box-sizing: border-box;
  }

  .gh-form-column {
    &.col-1-of-1 {
      grid-column: span 12;
    }

    &.col-1-of-2 {
      grid-column: span 6;
    }

    &.col-1-of-3 {
      grid-column: span 4;
    }

    &.col-1-of-4 {
      grid-column: span 3;
    }

    &.col-2-of-3 {
      grid-column: span 8;
    }

    &.col-3-of-4 {
      grid-column: span 9;
    }
  }
}

.gh-form-wrapper {

  * {
    box-sizing: border-box;
  }

  .form-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .gh-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    ". . . . . . . . . . . .";
    gap: 10px;

    > .gh-form-column {

      &.col-1-of-1 {
        grid-column: span 12;
      }

      &.col-1-of-2 {
        grid-column: span 6;
      }

      &.col-1-of-3 {
        grid-column: span 4;
      }

      &.col-1-of-4 {
        grid-column: span 3;
      }

      &.col-2-of-3 {
        grid-column: span 8;
      }

      &.col-3-of-4 {
        grid-column: span 9;
      }
    }
  }

  label {
    display: block;
  }

  .gh-input {
    width: 100%;
    display: block;
  }

  .gh-message-wrapper {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid;
    border-radius: 4px;

    &.gh-form-errors-wrapper {
      color: darken($error-red, 20);
      background-color: $error-red-10;
      border-color: $error-red-50;
      margin-bottom: 20px;

      ul.gh-form-errors {
        padding-left: 20px;
        margin: 0;
      }
    }

    &.gh-form-success-wrapper {
      color: #155724;
      background-color: #d4edda;
      border-color: #c3e6cb;
      margin-top: 20px;
    }

    &.gh-form-warning-wrapper {
      color: #8a6d3b;
      background-color: #fcf8e3;
      border-color: #faebcc;
    }

  }

  .gh-form-edit-link {
    margin-top: 20px;
  }

  #gdpr-checkboxes-wrap label {
    display: block;
  }

}


/*.clearfix{clear: both}*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.gh-media-uploader {
  .droppable-handler {
    //margin: 20px;
    border: dashed 5px $primary-dark-50;
    text-align: center;
    padding: 40px;

    &.dragover {
      border-color: $primary-blue;
      background: $primary-blue-20;
    }
  }

  #uploaded-files:not(:empty),
  #uploading-files:not(:empty) {
    margin-top: 10px;
  }
}

.text-align {
  &.right {
    text-align: right;
  }
}

#bulk-edit {
  margin-top: 40px;

  #edit-fields {
    width: 600px;
    //margin: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

}

/* Using the ::after pseudo-element for dots */
.loading-dots::after {
  content: ''; /* Start with no dots */
  display: inline-block;
  animation: dots 2s steps(4, end) infinite; /* Steps animation controls dots */
}

/* Keyframes for the dots */
@keyframes dots {
  0% {
    content: '';
  }
  25% {
    content: '.';
  }
  50% {
    content: '..';
  }
  75% {
    content: '...';
  }
  100% {
    content: '';
  }
}

.spinning {
  -webkit-animation: spinning 4s linear infinite;
  -moz-animation: spinning 4s linear infinite;
  animation: spinning 4s linear infinite;
}

@-moz-keyframes spinning {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spinning {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spinning {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.gh-color-picker {
  display: flex;
  align-items: stretch;

  .current-color {
    width: 28px;
    height: 28px;
    border-radius: 5px 0 0 5px;
    border: 1px solid $primary-dark-30;
    border-right-width: 0;
    padding: 7px;
    box-sizing: border-box;
    background-color: $primary-dark-5;

    &::after {
      display: block;
      box-sizing: border-box;
      content: '';
      height: 100%;
      width: 100%;
      border-radius: 3px;
      background-color: var(--color);
    }

    &.not-set {
      //background-color: $error-red-10;

      &::after {
        background-color: $primary-dark-10;
      }

    }
  }

  button.gh-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.gh-color-picker-grid {
  display: grid;
  grid-template-areas:
    'input clear'
    'picker picker';
  align-items: flex-start;

  input {
    grid-area: input;
    width: 145px;
  }

  button {
    grid-area: clear;
  }

  .iris-picker {
    grid-area: picker;
  }
}

.gh-autocomplete {
  &.has-results {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.gh-autocomplete-results {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  border-top: none;
  border-color: #2271b1;
  box-shadow: 0 0 0 1px #2271b1;
  outline: 2px solid transparent;
  border-radius: 0 0 5px 5px;
  background: #FFF;
  overflow-y: auto;

  &.hidden {
    display: none;
  }

  a {
    cursor: pointer;
    font-size: 14px;
    padding: 3px 8px;
    text-overflow: ellipsis;
    overflow: hidden;

    &.pointer {
      color: $primary-dark;
      background: $primary-blue-7;
    }
  }

}

.gh-picker {

  min-height: 31px;
  background-color: #fff;

  &.options-visible {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    .gh-picker-options {
      display: block;
    }
  }

  position: relative;
  border: 1px solid #8c8f94;
  border-radius: 5px;

  .gh-picker-label{
    padding: 3px;
  }

  .gh-picker-selected {
    padding: 3px;

    &.single {
      .gh-picker-item {
        background: none;
        font-size: 14px;
        flex-grow: 1;
        max-width: 100%;
        justify-content: space-between;

        .gh-picker-item-text {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: auto;
        }
      }
    }

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 3px;

    > .gh-picker-search {
      flex-grow: 1;
      width: 150px;
      border: none;
      min-height: 0;
      line-height: 1.7;

      &:focus {
        border: none;
        box-shadow: none;
        outline: none;
      }
    }

    > .gh-picker-item {
      padding: 3px 3px 3px 7px;
      background: $primary-dark-10;
      border-radius: 3px;
      display: flex;
      gap: 5px;
      align-items: center;
      min-width: 0;

      &.is-invalid {
        background: $error-red-10;
        color: darken($error-red, 10);
      }

      .gh-picker-item-delete {
        display: inline-block;
        padding: 3px;
        line-height: 1;
        cursor: pointer;

        &:hover {
          color: $primary-dark;
          font-weight: bold;
        }
      }
    }
  }

  &:focus-within {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 2px solid transparent;
  }

  .gh-picker-options {

    position: fixed;
    z-index: 9999;
    display: none;
    border-top: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 2px solid transparent;
    border-radius: 0 0 5px 5px;
    background: #FFF;
    overflow-y: auto;

    > .gh-picker-search {
      //flex-grow: 1;
      margin: 5px;
      position: relative;
      width: calc(100% - 10px);
      //box-sizing: border-box;
      //border: none;
      //min-height: 0;
      line-height: 1.7;

      &:focus {
        //border: none;
        //box-shadow: none;
        //outline: none;
      }
    }

    .gh-picker-no-options {
      font-size: 14px;
      padding: 5px 10px;
    }

    .gh-picker-option {
      cursor: pointer;
      font-size: 14px;
      padding: 5px 10px;
      text-overflow: ellipsis;
      overflow: hidden;

      &:hover {
        color: $primary-dark;
        background: $primary-blue-7;
      }
    }
  }

}

.image-picker {

  .image-input-preview {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border: 1px solid #8c8f94;
    border-bottom: none;
    background-color: $primary-dark-10;
    cursor: pointer;
    transition: 0.4s;

    background-size: contain;
    aspect-ratio: 16 / 9;
    background-position: center center;
    background-origin: content-box;
    background-repeat: no-repeat;
    padding: 30px;
    box-sizing: border-box;

    &:hover {
      background-color: $primary-dark-5;
      padding: 24px;
    }
  }

  .image-input-preview + .gh-input-group {
    input {
      border-top-left-radius: 0 !important;
    }

    button {
      border-top-right-radius: 0 !important;
    }
  }
}

#remote-notifications {
  .gh-button.dismiss {
    background: transparent;
    color: $primary-dark;
    margin: 3px;
    padding: 4px 4px;

    &:hover {
      background: $primary-dark-10;
    }
  }

  p.all-dismissed {
    font-size: 16px;
    text-align: center;
  }
}

@keyframes skeleton-loading {
  0% {
    background-color: $primary-dark-5;
  }
  100% {
    background-color: $primary-dark-30;
  }
}

.skeleton-loading {
  animation: skeleton-loading 1s linear infinite alternate;
}

.contact-list-item {
  display: flex;
  flex-direction: column;
  gap: 3px;

  h4 {
    display: inline-block;
  }

  &.clickable {
    cursor: pointer;
  }

  .gh-tags {
    gap: 5px;

    .gh-tag {
      font-size: 11px;
      padding: 2px 7px;
    }
  }

  .show-on-hover {
    display: none;
    flex-direction: column;
    gap: 3px;
  }

  &:last-of-type {
    border-bottom: 1px solid $primary-dark-10;
  }

  .subscribed {
    color: $primary-dark-30;
  }

  .name {
    font-weight: 500;
  }

  .contact-phones {
    display: flex;
    gap: 10px;
    align-items: center;

    .contact-phone {
      > svg {
        width: 14px;
      }

      display: flex;
      gap: 5px;
      align-items: center;
    }
  }

  .pill {
    font-size: 12px;
    padding: 2px 5px;
  }

  img.avatar {
    border-radius: 5px;
    width: 30px;
    height: 30px;
  }

  .actions {
    //width: 100%;
    display: flex;
    //gap: 5px;
    justify-content: flex-end;
    visibility: hidden;
    margin-left: auto;
  }

  &:hover {
    .show-on-hover {
      display: flex;
    }
  }
}

.contact-list {
  display: flex;
  flex-direction: column;
  max-height: 70vh;

  p:last-child {
    text-align: center;
  }

  &-item {
    padding: 10px 10px 10px 20px;
    border-top: 1px solid $primary-dark-10;
  }

}


.gh-striped {
  .row:nth-child(odd) {
    background-color: $primary-blue-2;
  }
}

.relationship-editor {
  h4 {
    margin: 0;
  }
}

.has-hover-actions {
  .hover-actions {
    visibility: hidden;
    opacity: 0;
  }

  &:hover {
    .hover-actions {
      visibility: visible;
      opacity: 1;
    }
  }
}

div:has( > button.hide-panel) {
  position: relative;

  > button.hide-panel {
    position: absolute;
    top: 3px;
    right: 3px;

    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    border-radius: 3px;

    &:hover {
      background-color: $primary-dark-15;
    }
  }
}

.gh-accordion{

  display: flex;
  flex-direction: column;
  gap: 5px;

  &-item {
    background-color: #fff;
    border-radius: 3px;
    padding: 10px;
    padding-left: 12px;
    //box-shadow: $box-shadow;

    &.outlined {
      border: 1px solid $primary-dark-15;
    }

    &.expanded {
      .gh-accordion-item-title {
        font-weight: 500;
      }
    }

    &-title {
      font-weight: 400;
      font-size: 14px;
      margin: 0;
      flex-grow: 1;
      cursor: pointer;
    }

    .dashicons-arrow-up-alt2,
    .dashicons-arrow-down-alt2 {
      cursor: pointer;
    }


  }
}