:root {
  --gin-bg-app: #013D40;
  --peacock-1: #10272A;
  --peacock-2: #013D40;
  --peacock-3: #194F54;
  --peacock-4: #316267;
  --peacock-5: #4A747B;
  --peacock-6: #62868E;
  --marble: #EFEEEC;
  --slate-1: #92ABB5;
  --slate-2: #D2DBDE;  
  --marigold: #C19443;

  --gin-bg-layer: #013D40;
  --gin-border-color: #62868E;
}

@font-face {
  font-family: 'suisse_intl';
  src: url('https://dev-theintangibles.pantheonsite.io/themes/custom/theintangibles/fonts/SuisseIntl-Regular.woff2') format('woff2'),
      url('https://dev-theintangibles.pantheonsite.io/themes/custom/theintangibles/fonts/SuisseIntl-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


body,
.region-sticky {
  /* var(--gin-bg-app) */
  background: var(--peacock-2) !important;
  font-family: 'suisse_intl',Helvetica,Arial,sans-serif;
}

.gin-layer-wrapper, 
.block-system-main-block > form, 
.views-exposed-form.views-exposed-form, 
.views-edit-view, 
.views-preview-wrapper, 
#views-entity-list, 
.admin.my-workbench, 
.media-library-views-form, 
.user-admin-permissions, 
.field-config-form {
   /* var(--gin-bg-layer) #013D40 lighten 6% */
  background: #01565a !important;
}

.gin--dark-mode {
  form {

    .form-element {
      /* var(--gin-color-text) */
      color: #fff !important;
      /* var(--gin-bg-input) #013D40 lighten 10% */
      background-color: #02676c !important;
      /* var(--gin-border-color-form-element) */
      border: 1px solid #ccc !important;

      &.tagify-select-widget {
        background-color: #013D40 !important;
      }
    }

    .tagify-widget {
      /*background-color: #013D40 !important;*/
    }

    input.form-element::placeholder {
      color: #fff;
    }

    .ck {
       --ck-color-base-background: #02676c;
       --ck-color-toolbar-background: var(--peacock-2);
    }

    .ck-content {
      color: var(--marble);
    }

    .form-item__description {
      color: var(--slate-2);
    }



  }
}

body.gin--edit-form {
  .page-wrapper__node-edit-form .layout-region-node-secondary {
    background: var(--peacock-2);
    border-inline-start: 1px solid var(--peacock-6);

    .entity-meta__header {
      background: var(--peacock-2);
    }

    .entity-meta > .accordion__item {
      border-color: var(--peacock-6) !important;
    }
  }

  .claro-details__wrapper--accordion,
  .claro-details__wrapper--accordion-item,
  .claro-details__wrapper--vertical-tabs-item {
    background: #01565a;
  }
}

.gin--dark-mode .form-boolean--type-checkbox:not(:checked) {
  /* var(--gin-bg-input) #013D40 lighten 10% */
  background-color: #02676c !important;
}

.form-boolean {
  /* var(--gin-border-color-form-element) */
  border: 1px solid #ccc !important;
}

.gin--dark-mode .form-boolean:hover, .gin--dark-mode .form-boolean:active {
  border-color: #fff !important;
}

[dir="ltr"] .gin-horizontal-scroll-shadow,
.gin-horizontal-scroll-shadow,
table th {
  background: #01565a !important;
}

.toolbar .toolbar-bar #toolbar-item-administration-tray .toolbar-icon-admin-toolbar-tools-help.toolbar-icon-default:before {
  -webkit-mask-image: url(../idownload.png) !important;
  mask-image: url(../download.png) !important;
}

.gin--horizontal-toolbar #toolbar-administration .toolbar-icon-admin-toolbar-tools-help:before {
  -webkit-mask-size: 70px 35px !important;
  mask-size: 70px 35px !important;
}

.gin--dark-mode .block-system > .views-form [data-drupal-selector*=edit-header], 
.gin--dark-mode .block-system > .views-form .views-bulk-actions, 
.gin--dark-mode .view-content .views-form [data-drupal-selector*=edit-header], 
.gin--dark-mode .view-content .views-form .views-bulk-actions {
    background: #013D40 !important;
}

table tbody tr {
  border-block-end: 1px solid #999 !important;
}

.tagify__dropdown__wrapper {
  background-color: #194F54 !important;
  color: #fff !important;
}

.gin--dark-mode .tagify {
  --tag-text-color--edit: var(--gin-color-text);
  --tag-remove-btn-color: var(--gin-color-text);
  --tag-text-color: var(--gin-color-text);
  --tag-bg: #316267;
  --placeholder-color: var(--gin-color-text-light);
  --placeholder-color-focus: var(--gin-color-text);
  --tag-hover: #D2DBDE;
  --tagify-dd-color-primary: #013D40;
  --tagify-dd-bg-color: #194F54;
  --tagify-dd-text-color: #D2DBDE;
  background: var(--peacock-2) !important;

  .tagify__tag:hover .tagify__tag-text {
    color: #1B1B1B;
  }

  .tagify__tag:hover .tagify__tag__removeBtn::after {
    color: #1B1B1B;
  }

  .tagify__tag-text {
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  .tagify__tag__removeBtn::after {
    font-size: 24px;
  }

  .tagify__tag__removeBtn {
    background: none !important;
  }

  .tagify__dropdown__wrapper {
    background-color: #194F54 !important;
    color: #fff !important;
  }
}

body.gin-login .user-form-page,
body.gin-login .user-login-form {
  background: #013D40 !important;
}

input[type="file"]::file-selector-button {
  border: 1px solid var(--peacock-6);
  background-color: var(--peacock-3);
  color: var(--slate-2);
  padding: 6px 16px;
}

.break {
  flex-basis: 100%;
  height: 0;
}

.form__filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;

  .form-type--entity-autocomplete-tagify {
    width: 400px;
  }
}

.form__filter--search {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;

  .views-exposed-form__item .form-text {
    width: 100%;
  }
}

.form__filter--tagify {
  .views-exposed-form__item {
    width: 600px;
  }
}

.gin-breadcrumb-wrapper .gin-breadcrumb__list,
#block-gin-page-title .page-title {
  overflow: visible;
}

#block-gin-content .user-register-form .form-item__description {
  color: #fff;
}

.talent-search__count {
  display: flex;
  justify-content: space-between;
  align-items: center;

  ul {
    margin: 0;
    li {
      margin: 0;
    }
  }
}

.views-exposed-form .views-exposed-form__item {
  margin-inline: 0!important;

  select.form-element--type-select {
    width: 100%;
    max-width: 100%;
  }

  input#edit-field-location{
    width: 100%;
  }

  .tagify__input {
    padding: 0 5px;
  }
}

body.gin-login .user-form-page__user-form img {
  width: 400px;
  margin-left: 32px;
}