/* All screen sizes */

/****************************************
* Root variables
****************************************/

:root {
  --fni-font-1: 'Open Sans';

  --fni-color-1: #003366;
  --fni-color-2: #0066cc;
  --fni-color-3: #ff6600;
  --fni-color-4: #dc143c;
  --fni-color-5: #e4f1ff;
}

/****************************************
* Typography
****************************************/

h1 {
  font: normal 700 25px/1em var(--fni-font-1);
  text-transform: uppercase;
  color: var(--fni-color-1);
}

h1 span {
  display: block;
  margin-top: .25rem;
  font-size: 18px;
  line-height: 1em;
}

h2 {
  font: normal bold 20px/1em var(--fni-font-1);
  color: var(--fni-color-2);
}

a,
p,
li,
label,
legend {
  font: normal normal 16px/1.5em var(--fni-font-1);
  color: #000000;
}

a {
  color: var(--fni-color-3);
}

a:focus,
a:hover {
  color: var(--fni-color-2);
}

a svg,
button svg {
  width: 15px;
  height: 15px;
  fill: var(--fni-color-3);
}

a:focus svg,
a:hover svg,
button:focus svg,
button:hover svg {
  fill: var(--fni-color-2);
}

a.delete:focus,
a.delete:hover {
  color: var(--fni-color-4);
}

a.delete:focus svg,
a.delete:hover svg {
  fill: var(--fni-color-4)
}

hr {
  border-top: 1px solid #d3e0e5;
}

h1 + *,
h1 + .grid,
.error-message + form {
  margin-top: 2rem;
}

h2 + .grid,
h2 + [class^="clone"],
p + button,
button + .grid,
.flex + p,
.flex + .flex,
.flex + .button,
.flex + p,
.flex + label,
.flex ~ fieldset,
.flex + fieldset,
.grid + .flex,
.grid + .grid,
.grid + .clone,
.grid + label,
.grid + fieldset,
.clone + h2,
.styled-select + .flex,
.styled-select + .grid,
[class^="add-clone"] + h2 {
  margin-top: 1rem;
}

.flex + h1 {
  margin-top: .5rem;
}

[type="number"] {
  display: block;
  max-width: 100px;
}

.nowrap {
  white-space: nowrap;
}

.disclaimer {
  font: normal normal 16px/1.5em var(--fni-font-1);
  color: #757575;
}

/****************************************
* TinyMCE
****************************************/

.tox-tinymce {
  margin-bottom: 1rem;
}

.tox svg {
  width: 24px;
  height: 24px;
}

.tox.tox-tinymce-aux .tox-dialog-wrap__backdrop {
  background-color: rgba(0, 0, 0, .8);
  backdrop-filter: blur(8px);
}

.tox.tox-tinymce-aux .tox-dialog--width-lg {
  max-width: 800px;
}

.tox.tox-tinymce-aux .tox-dialog__header {
  padding: 2rem 2rem 0 2rem;
}

.tox.tox-tinymce-aux .tox-dialog__title {
  font: normal 700 25px/1em var(--fni-font-1);
  text-transform: uppercase;
  color: var(--fni-color-1);
}

.tox.tox-tinymce-aux .tox-dialog__header .tox-button--icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  margin: 0;
  cursor: pointer;
}

.tox.tox-tinymce-aux .tox-dialog__body-content {
  padding: 1rem 2rem;
}

.tox.tox-tinymce-aux .tox-textarea {
  border-radius: 3px;
}

.tox.tox-tinymce-aux .tox-textarea:focus {
  border-color: #eeeeee;
  box-shadow: none;
  outline: 1px solid #33C3F0;
}

.tox.tox-tinymce-aux .tox-dialog__footer {
  padding: 0 2rem 2rem 2rem;
}

.tox.tox-tinymce-aux .tox-dialog__footer .tox-button {
  background-color: var(--fni-color-1);
  border-radius: 4px;
  padding: .75rem 1rem;
  font: normal normal 16px/1.2em var(--fni-font-1);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tox.tox-tinymce-aux .tox-dialog__footer .tox-button--secondary {
  background-color: #f0f0f0;
}

/****************************************
* Header
****************************************/

header {
  background-color: var(--fni-color-1);
  padding: 1rem;
}

header .grid {
  justify-content: center;
  gap: 1rem;
  padding: 0;
}

header .grid > a {
  position: relative;
  z-index: 1;
}

header img {
  margin: 0 auto;
  max-height: 60px;
}

header .flex {
  justify-content: center;
}

header .styled-select select {
  width: 285px;
}

header a,
header a:focus,
header a:hover {
  display: flex;
  align-items: center;
  color: #ffffff;
}

header a:focus svg,
header a:hover svg {
  fill: #ffffff;
}

header svg {
  margin-right: 5px;
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

/****************************************
* Login Wrapper
****************************************/

.login-wrapper {
  margin: 1rem auto;
  max-width: 300px;
}

/****************************************
* Reveal password
****************************************/

.reveal-password {
  position: relative;
}

.reveal-password input {
  padding-right: 34px;
}

.reveal-password button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  background-color: transparent;
  border: none;
  width: 34px;
  height: 34px;
  padding: 0;
}

.reveal-password svg,
.reveal-password button > div {
  width: 20px;
  height: 20px;
}

.reveal-password svg {
  fill: #828282;
  transition: fill .4s ease;
}

.reveal-password button:hover svg {
  fill: #000000;
}

/****************************************
* Buttons
****************************************/

button {
  display: flex;
  align-items: center;
  border: none;
  background-color: transparent;
  padding: 0;
}

.button {
  display: flex;
  align-items: center;
  background-color: var(--fni-color-1);
  border-radius: 4px;
  padding: .75rem 1rem;
  font: normal normal 16px/1.2em var(--fni-font-1);
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 1px;
}

.button-primary {
  background-color: var(--fni-color-5);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fni-color-2);
}

.button-primary:focus,
.button-primary:hover {
  background-color: var(--fni-color-3);
  color: #ffffff;
}

.button svg {
  margin-right: .5rem;
  width: 9px;
  height: 18px;
  fill: #ffffff;
}

.button-link {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: 18px;
  line-height: 1em;
  color: var(--fni-color-3);
  transition: 0.3s;
}

.button-link svg,
.button-link svg {
  width: 20px;
  height: 20px;
  fill: var(--fni-color-3);
  transition: 0.3s;
}

.button-link:focus,
.button-link:hover {
  color: var(--fni-color-2);
}

.button-link:focus svg,
.button-link:hover svg {
  fill: var(--fni-color-2);
}

.button[type="submit"] {
  justify-content: center;
  text-align: center;
}

/****************************************
* Accents
****************************************/

.accent {
  outline: 8px solid rgba(221, 0, 0, 0.04);
  border-radius: 5px;
  background-color: rgba(221, 0, 0, 0.04);
}

.details {
  display: inline-block;
  margin-bottom: 1rem;
  border-radius: 5px;
  background-color: var(--fni-color-5);
  width: auto;
  padding: 1rem;
  word-wrap: anywhere;
}

.details .flex + p {
  margin: 0;
}

.details svg {
  width: 12px;
  height: 12px;
}

.details p {
  font-size: 14px;
}

.details input {
  flex: 1 1 auto;
  margin: 0;
  width: auto;
  height: auto;
  padding: 0 5px;
  text-overflow: ellipsis;
}

.details input[readonly] {
  border: none;
  background-color: transparent;
  padding: 0;
}

/****************************************
* Masonry
****************************************/

.masonry > div {
  border: solid #cccccc 1px;
  border-radius: 3px;
  padding: 1rem;
}

.masonry .button {
  border: none;
  border-radius: 3px;
  background: linear-gradient(to bottom, #e4f1ff, #bcd4ee);
  width: auto;
  padding: 5px 10px;
  text-transform: none;
  color: #0066cc;
}

/****************************************
* CSV file upload button
****************************************/

.csv-file-upload {
  align-self: center;
}

.csv-file-upload .button{
  margin: 0;
}

/****************************************
* Status
****************************************/

.status {
  display: block;
  border-radius: 50%;
  border: 1px solid var(--fni-color-3);
  width: 15px;
  height: 15px;
}

.status.active {
  background-color: var(--fni-color-3);
}

/****************************************
* Table
****************************************/

table {
  margin: 2rem 0;
  width: 100%;
}

h2 + table {
  margin-top: 1rem;
}

table th {
  border-top: 1px solid #B2D6EC;
  background-color: #E2F2FA;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

table th,
table th a {
  text-transform: uppercase;
  font-weight: bold;
  color: var(--fni-color-3);
}

table th:empty,
table th:first-of-type,
table th:last-of-type {
  width: 36px;
}

table th,
table td {
  border-bottom: 1px solid #B2D6EC;
  padding: .25rem .5rem;
  text-align: left;
  vertical-align: middle;
}

table th > a,
table td > a {
  display: flex;
  align-items: center;
}

table svg {
  width: 18px;
  height: 18px;
}

table img {
  width: 20px;
  height: 27px;
}

table .thumbnail {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  overflow: hidden;
}

table .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

table:not(.editable-table) tr:nth-of-type(odd) td {
  background-color: rgba(249, 255, 255, 0.7);
}

/****************************************
* Action menu
****************************************/

.action-menu,
.column-header-action-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 101;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .3);
  width: 154px;
}

.action-menu ul,
.column-header-action-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.action-menu ul li,
.column-header-action-menu ul li {
  margin: 0;
}

.action-menu li + li,
.column-header-action-menu li + li {
  border-top: 1px solid #efefef;
}

.action-menu button,
.column-header-action-menu button {
  display: flex;
  flex-direction: row;
  background-color: transparent;
  border: none;
  width: 100%;
  padding: .5rem 1rem;
  line-height: 15px;
  color: #000000;
}

.action-menu button:hover,
.column-header-action-menu button:hover {
  background-color: rgba(250, 195, 94, 0.9);
  cursor: pointer;
}

.action-menu svg,
.column-header-action-menu svg {
  pointer-events: none;
  margin-right: .5rem;
  width: 15px;
  height: 15px;
}

.action-menu .add-row-above svg,
.action-menu .add-row-below svg,
.column-header-action-menu .add-column-right svg,
.column-header-action-menu .add-column-left svg {
  fill: #2bbd5b;
}

.action-menu .remove-row svg,
.column-header-action-menu .remove-column svg {
  fill: #dc143c;
}

.column-header-action-menu .rename-column svg {
  fill: #ff9f46;
}

/****************************************
* Search bar
****************************************/

.search-wrapper {
  position: relative;
  max-width: 300px;
}

.search-wrapper svg {
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  fill: #a8a8a8;
}

.search-wrapper input {
  margin: 0;
  background-color: transparent;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  width: 100%;
  padding: .5rem .5rem .5rem 1.5rem;
}

#search-results.error-message {
  display: inline-block;
  margin: 0;
  width: auto;
}

/****************************************
* iFrame wrapper
****************************************/

.iframe-wrapper {
  width: 100%;
  height: 152px;
}

.iframe-wrapper iframe {
  width: 100%;
  height: 100%;
}

/****************************************
* Font size adjuster
****************************************/

#font-size-adjust,
#xENTRIES_PER_PAGE {
  margin: 0;
  width: 110px;
}

/****************************************
* Allow HTML toggle
****************************************/

.allow-html-toggle {
  cursor: pointer;
  position: relative;
  z-index: 1;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  background-color: transparent;
  padding: 9px 0.5rem 9px 0.5rem;
  width: 95px;
  line-height: 14px;
  font-size: 14px;
  color:rgba(0, 0, 0, 0.6);
}

.allow-html-toggle[data-value="false"] {
  background-color: transparent;
  transition: background 0.3s;
}

.allow-html-toggle[data-value="true"] {
  background-color: #dcdcdc;
  transition: background 0.3s;
}

.allow-html-toggle.warning {
  border: none;
}

.warning-pulse {
  position: absolute;
  z-index: 0;
  border-radius: 4px;
  background-color: transparent;
  width: 95px;
  height: 34px;
}

.warning-pulse.on {
  border: 3px solid transparent;
  animation-name: warning-pulse;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
}

@keyframes warning-pulse {
  0% {
    border-color: rgba(255, 0, 0, 0);
    transform: scale(1);
  }

  50% {
    border-color: rgba(255, 0, 0, .6);
  }

  100% {
    border-color: rgba(255, 0, 0, 0);
    transform: scale(1.1, 1.3);
  }
}

/****************************************
* Editable table
****************************************/

.editable-table-container {
  display: block;
  margin: 1rem 0;
  max-width: 100%;
  min-height: 400px;
  max-height: calc(100vh - 8rem);
  overflow: auto;
}

.editable-table {
  position: relative;
  display: table;
  table-layout: fixed;
  margin: 0;
  width: auto;
  counter-reset: custom-counter;
  font-size: 12px;
}

.editable-table.reordering-column,
.editable-table.reordering-row {
  border-collapse: separate;
}

.editable-table.reordering-column {
  left: -1em;
  border-spacing: 1em 0px;
}

.editable-table.reordering-row {
  top: -1em;
  border-spacing: 0px 1em;
}

.editable-table.reordering-column tr td,
.editable-table.reordering-row tr td {
  border: none;
}

.editable-table.reordering-column tr td:not(.row-number) {
  border-right: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}

.editable-table.reordering-row tr td:not(.row-number),
.editable-table.reordering-row tr td.row-number::after {
  border-top: 1px solid #e1e1e1;
}

.editable-table.reordering-row tr td:not(.row-number) {
  border-right: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}

.editable-table.reordering-column tr > * + *,
.editable-table.reordering-row tr > * + *,
.editable-table.reordering-column,
.editable-table.reordering-row,
.editable-table.reordering-column tr td.row-number::after,
.editable-table.reordering-row tr td.row-number::after {
  cursor: grabbing !important /* important to overrule any local cursor properties */;
  user-select: none;
}

.editable-table tr > th {
  position: sticky;
  top: 0;
  background-color: #007bbd;
  color: #ffffff;
  text-transform: none;
  white-space: nowrap;
  z-index: 100;
}

.editable-table th.additional-header-column div {
  border-bottom: 1px solid #ffffff;
  min-width: 10px;
}

.editable-table th.additional-header-column div.error {
  border-bottom: 1px solid var(--fni-color-4);
}

.editable-table tr.header th:not(:first-of-type):not(:last-of-type) {
  cursor: context-menu;
}

.editable-table td.row-number {
  cursor: context-menu;
  position: relative;
  border: none;
  min-height: 2em;
  min-width: 36px;
  color: rgba(0, 0, 0, .3);
}

.editable-table td.row-number::after {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #e1e1e1;
  border-left: 1px solid #e1e1e1;
  border-right: 1px solid #e1e1e1;
  min-width: 36px;
  min-height: 2em;
  height: 32px;
  padding: 0.5em;
  content: counter(custom-counter);
}

.editable-table,
.editable-table tr td:nth-of-type(2) {
  border-left: none;
}

.editable-table td.row-number.hide-after::after {
  content: '';
}

.editable-table td.row-number {
  position: sticky;
  z-index: 2;
  left: 0;
}

.editable-table tr.header th:first-of-type {
  z-index: 3;
}

.editable-table td.row-number {
  vertical-align: middle;
  text-align: center;
}

.editable-table td:not(.row-number) {
  cursor: cell;
}

.editable-table:focus-within td:not(.row-number) {
  cursor: auto;
}

.editable-table tr:not(.header) {
  counter-increment: custom-counter;
  height: 32px;
}

.editable-table tr.dark-stripe,
.editable-table tr.dark-stripe td.row-number::after  {
  background-color: #fbfbfb;
}

.editable-table tr.light-stripe,
.editable-table tr.light-stripe td.row-number::after {
  background-color: #ffffff;
}

.editable-table tr.focus,
.editable-table tr.focus td.row-number::after {
  background-color: #d1edff;
}

.editable-table tr.soft-focus,
.editable-table tr.soft-focus td.row-number::after {
  background-color: #dddddd;
}

.editable-table tr.add-above td:not(.row-number) {
  border-top: 2px solid #2bbd5b;
}

.editable-table tr.add-below td:not(.row-number) {
  border-bottom: 2px solid #2bbd5b;
}

.editable-table tr th.temp-element {
  background-color: rgb(125, 203, 255);
}

.editable-table tr td.temp-element {
  background-color: #eeeeee;
}

.editable-table tr.remove,
.editable-table td.remove,
.editable-table tr.remove td.row-number::after {
  background-color: #ffd5de;
}

.editable-table .match {
  background-color: #c4e5fa;
}

.editable-table td.currently-editing,
.editable-table tr.header th.rename-column {
  background-color: rgb(125, 203, 255);
}

.editable-table td.currently-highlighting {
  background-color: #bebebe;
}

.editable-table td {
  position: relative;
  border: 1px solid #e1e1e1;
  padding: 0;
}

.editable-table td:not(.row-number) div {
  max-width: unset;
  padding: .5em;
  line-height: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editable-table td div:focus {
  outline: none;
  max-width: 100%;
}

.editable-table .resize-border {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  user-select: none;
}

.editable-table:not(.reordering-column):not(.reordering-row) .resize-border:hover {
  border-right: 2px solid #000000;
  cursor: ew-resize;
}

.editable-table .drop-to-border-column,
.editable-table .drop-to-border-row {
  position: absolute;
  top: 0;
  background-color: transparent;
  user-select: none;
}

.editable-table .drop-to-border-column {
  left: -1em;
  border-right: 1px solid #e1e1e1;
  width: 1em;
}

.editable-table .drop-to-border-row {
  top: -1em;
  height: 1em;
}

.editable-table .drop-to-border-column:hover,
.editable-table .drop-to-border-row:hover {
  background-color: rgb(125, 203, 255);
  cursor: grabbing;
}

/****************************************
* Dragging Header/Row
****************************************/

.editable-table .dragging-row {
  position: absolute;
  z-index: 101;
  border: 1px solid #e1e1e1;
  background-color: #ffffff;
  padding: 6px;
  width: 36px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.3);
  text-align: center;
}

/****************************************
* Pagination
****************************************/

.pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 1rem 0;
}

.pagination div {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  padding: 0;
  width: 35px;
  height: 35px;
  font-size: 12px;
  outline: none;
}

.pagination .arrow {
  background-color: #007bbd;
  width: 45px;
}

.pagination .arrow:first-of-type {
  border-radius: 10px 0 0 10px;
}

.pagination .arrow:last-of-type {
  border-radius: 0 10px 10px 0;
}

.pagination .arrow > i {
  display: inline-block;
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  padding: 3px;
  pointer-events: none;
}

.pagination .arrow .right {
  transform: rotate(-45deg);
}

.pagination .arrow .left {
  transform: rotate(135deg);
}

.pagination .page {
  color: #005c96;
}

.pagination .page:hover,
.pagination .page.active {
  background-color: rgba(0, 92, 150, .2);
}

/****************************************
* Address
****************************************/

.address {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/****************************************
* Clone
****************************************/

.clone {
  position: relative;
}

[class*="add-clone"] button {
  padding: .5rem .75rem;
  text-transform: none;
  font-size: 14px;
}

.remove-clone {
  position: absolute;
  top: 10px;
  right: -20px;
  background-color: #b3b3b3;
  border: none;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  padding: 0;
  color: #ffffff;
  font-size: 11px;
}

.remove-clone:after {
  content: '\d7';
  position: absolute;
  top: 0;
  left: 4.5px;
  line-height: 15px;
}

.remove-clone:focus,
.remove-clone:hover {
  cursor: pointer;
  background-color: var(--fni-color-4);
}

.clone.repeat + .clone.repeat {
  margin-top: 1rem;
  border-top: 1px solid #efefef;
  padding-top: 1rem;
}

/****************************************
* Overlay
****************************************/

.overlay {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  backdrop-filter: blur(10px);
  padding: 1rem;
  overflow: auto;
}

.overlay .wrapper {
  position: relative;
  margin: auto;
  width: calc(100% - 2rem);
  max-width: 800px;
}

.overlay .wrapper.box {
  border-radius: 10px;
  background-color: #ffffff;
  padding: 2rem;
}

.overlay .close-overlay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  margin: 0;
  cursor: pointer;
}

.overlay .close-overlay,
.overlay .close-overlay svg {
  width: 25px;
  height: 25px;
  fill: #ffffff;
}

.overlay .box .close-overlay svg {
  fill: #000000;
}

.overlay .close-overlay:focus svg,
.overlay .close-overlay:hover svg {
  fill: var(--fni-color-4);
}

/****************************************
* Preview photo
****************************************/

.photo-preview {
  position: relative;
  margin: 1rem 0;
  border: 1px solid #ececec;
  border-radius: 10px;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  max-width: calc(216px + 3rem);
  padding: 1.5rem;
}

.photo-preview.no-border {
  border: none;
  max-width: unset;
  padding: 0;
}

.photo-preview[data-overlay] {
  cursor: pointer;
}

.photo-preview button {
  position: absolute;
  top: .5rem;
  right: .5rem;
  margin: 0;
}

.photo-preview button,
.photo-preview button svg {
  width: 15px;
  height: 15px;
  fill: #000000;
}

.photo-preview button:focus svg,
.photo-preview button:hover svg {
  fill: var(--fni-color-4);
}

#photo-preview-large .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: 100%;
  height: 100%;
}

#photo-preview-large .wrapper img {
  max-height: calc(100vh - 2rem);
}

.thumbnails {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin-top: 1rem;
}

@media (min-width: 576px) {
  .thumbnails {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 902px) {
  .thumbnails {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1140px) {
  .thumbnails {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1400px) {
  .thumbnails {
    grid-template-columns: repeat(8, 1fr);
  }
}

.albums-buttons {
  height: 20px;
}

.albums-buttons a,
.albums-buttons div {
  cursor: pointer;
  font-weight: 600;
}

.thumbnails > div {
  position: relative;
  border: 1px solid #efefef;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 75%;
  /* aspect-ratio: 1; */
  cursor: pointer;
}

.thumbnails .checkbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  border: dashed #dcdcdc 2px;
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.thumbnails .checkbox-overlay .checkbox {
  position: absolute;
  top: 3px;
  padding: 5px 0px 5px 12px;
}

.thumbnails .checkbox-overlay .checkbox svg {
  width: 20px;
  height: 23px;
  fill: var(--fni-color-1);
}

.thumbnails .checkbox-overlay.selected {
  border: solid #409fff 2px;
}

.thumbnails .checkbox-overlay.selected svg {
  fill: #409fff;
}

/****************************************
* Single photo modify form
****************************************/

.single-photo-modify-form {
  position: relative;
}

.single-photo-modify-form .wrapper {
  padding: 1rem 1rem 0 1rem;
  background: #f9f9f9;
}

.single-photo-modify-form .close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

.single-photo-modify-form .close-button svg {
  cursor: pointer;
  position: relative;
}

/****************************************
* Select button
****************************************/

.grayed-out,
.grayed-out div,
.grayed-out button {
  pointer-events: none;
  opacity: 0.5;
  color: #9c9c9c;
  transition: 0.3s;
}

.select-button .select-button-text {
  height: 100%;
}

.select-button .x-mark-select-svg,
.select-button .check-select-svg {
  height: 20px;
}

.grayed-out svg {
  fill: #9c9c9c !important;
}

.selected-actions.grayed-out .button {
  background-color: #9c9c9c;
}

/****************************************
* Selected actions container
****************************************/

.selected-actions {
  margin-top: 0 !important;
}

.selected-actions .flex {
  gap: 1rem;
}

.selected-actions > div {
  align-self: center;
}

.selected-actions .copy-selected-to-album-choices {
  position: absolute;
  z-index: 8;
  margin-top: 0.25rem;
  border-radius: 5px;
  background-color: #212121;
  max-height: 300px;
  max-width: 300px;
  width: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
  gap: 0;
}

.selected-actions .copy-selected-to-album-choices .album-choice {
  padding: 0.75rem;
  color: #dcdcdc;
  max-width: calc(300px - 1.5rem);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.selected-actions .copy-selected-to-album-choices .album-choice:hover {
  cursor: pointer;
  background-color: var(--fni-color-2);
  transition: 0.3s;
}

.selected-actions .copy-selected-to-album-choices .album-choice:not(:first-of-type) {
  border-top: #dcdcdc 1px solid;
}

/****************************************
* Trash actions styles
****************************************/

.trash-actions {
  flex-direction: row-reverse;
  margin-bottom: 1rem;
}

.trash-actions > div {
  cursor: pointer;
}

.trash-actions span {
  height: 20px;
}

.trash-list tr.selected,
.trash-list tr.unselected {
  cursor: pointer;
}

.trash-list tr.unselected:hover td p {
  color: #181818;
}

.trash-list tr.selected td a,
.trash-list tr.unselected td a {
  pointer-events: none;
}

.trash-list tr.unselected td p {
  color: #7c7c7c;
}

.trash-list.selecting .hide-on-select {
  display: none;
}

.trash-list .reveal-on-select {
  display: none;
}

.trash-list.selecting .reveal-on-select {
  display: grid;
}

.trash-list .trash-checkbox {
  border: 2px solid #a1a1a157;
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

.trash-list tr.unselected:hover .trash-checkbox {
  border-color: #a1a1a1b9;
  transition: 0.2s;
}

.trash-list .selected .trash-checkbox {
  border-color: var(--fni-color-2);
  background-color: var(--fni-color-2);
  transition: 0.2s;
}

.trash-list .selected .trash-checkbox-fill svg {
  position: relative;
  bottom: 3px;
  fill: #ffffff;
  height: 14px;
  width: 14px;

}

.trash-list .unselected .trash-checkbox-fill svg {
  fill: transparent;
}

/****************************************
* Manage tool subscriptions
****************************************/

.tools-subscribed-list > div.flex {
  margin-top: 0.25rem;
}

.tools-subscribed-list div.highlighted {
  outline: 2px solid #000000;
  padding-left: 10px;
  background-color: #f3f3f3;
}

.dependency-list-container {
  position: relative;
  gap: 0.5rem;
}

.dependency-list-container .toggle-buttons svg {
  position: relative;
  top: 3px;
  height: 20px;
  width: 20px;
  cursor: pointer;
}

.dependency-list-container .toggle-buttons .hide-button svg {
  z-index: 5;
}

.dependency-list-container .toggle-buttons .show-button svg {
  z-index: 1;
}

.dependency-list-container .tool-dependencies {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: -125px;
  border-bottom-left-radius: 5px;
  border-right: 3px solid #007bbd;
  background-color: #f3f3f38f;
  width: 150px;
  text-align: left;
}

.dependency-list-container .tool-dependencies > div {
  padding: 0 0.5rem;
}

.dependency-list-container .tool-dependencies > div:not(:first-of-type) {
  border-top: #eeeeee8f 2px solid;
}

/****************************************
* Draggable grid
****************************************/

.ghost[draggable] {
  position: relative;
  outline: 3px dashed #d0cdcd !important;
  outline-offset: -3px;
  background: #f7f7f7 !important;
}

.ghost[draggable]::before {
  content: 'Drag to arrange order';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 1rem);
  color: #d0cdcd;
  font: normal 300 12px/1em var(--fni-font-1);
  text-align: center;
}

/****************************************
* Progress bar
****************************************/

.progress-bar .wrapper {
  position: relative;
  margin-top: 2rem;
  border-radius: 10px;
  border: 1px solid #e3e3e3;
  height: 15px;
  overflow: hidden;
}

.progress-bar .done {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: var(--fni-color-3);
  width: 0%;
}

.progress-bar .togo {
  display: none;
  background-color: var(--fni-color-2);
  width: 100%;
}

.progress-bar .stat,
.progress-bar .time {
  margin-top: .25rem;
  font-size: 12px;
  color: #aeaeae;
}

/****************************************
* Form elements
****************************************/

textarea.large {
  min-height: 250px;
}

/****************************************
* Accordion
****************************************/

.accordion  + .accordion .heading {
  border-top: 1px solid #d8d7d7;
}

.accordion.open {
  background-color: #f9f9f9;
}

.accordion .heading {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 50px 1.5rem 1.5rem;
  cursor: pointer;
}

.accordion .heading .complete {
  opacity: .5;
}

.accordion .heading * {
  pointer-events: none;
}

.accordion .toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 100%;
  background-color: var(--fni-color-3);
  width: 30px;
  height: 30px;
  color: #ffffff;
  cursor: pointer;
  transition: all .5s;
}

.accordion .toggle::before,
.accordion .toggle::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  background-color: #ffffff;
  margin: auto;
  width: 16px;
  height: 2px;
  transition: transform .5s;
}

.accordion .toggle::after {
 transform: translateY(-50%) rotate(90deg);
}

.accordion.open .toggle::before {
  transform: translateY(-50%) rotate(45deg);
}

.accordion.open .toggle::after {
  transform: translateY(-50%) rotate(-45deg);
}

.accordion .content {
  padding: 0 1.5rem;
}

.accordion.open .content {
  max-height: 100%;
}

.accordion .content > :last-child {
  margin-bottom: 1.5rem;
}

/****************************************
* Trash actions styles
****************************************/

.trash-actions {
  flex-direction: row-reverse;
  margin-bottom: 1rem;
}

.trash-actions > div {
  cursor: pointer;
}

.trash-actions span {
  height: 20px;
}

.trash-list tr.selected,
.trash-list tr.unselected {
  cursor: pointer;
}

.trash-list tr.unselected:hover td p {
  color: #181818;
}

.trash-list tr.selected td a,
.trash-list tr.unselected td a {
  pointer-events: none;
}

.trash-list tr.unselected td p {
  color: #7c7c7c;
}

.trash-list.selecting .hide-on-select {
  display: none;
}

.trash-list .reveal-on-select {
  display: none;
}

.trash-list.selecting .reveal-on-select {
  display: grid;
}

.trash-list .trash-checkbox {
  border: 2px solid #a1a1a157;
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

.trash-list tr.unselected:hover .trash-checkbox {
  border-color: #a1a1a1b9;
  transition: 0.2s;
}

.trash-list .selected .trash-checkbox {
  border-color: var(--fni-color-2);
  background-color: var(--fni-color-2);
  transition: 0.2s;
}

.trash-list .selected .trash-checkbox-fill svg {
  position: relative;
  bottom: 3px;
  fill: #ffffff;
  height: 14px;
  width: 14px;

}

.trash-list .unselected .trash-checkbox-fill svg {
  fill: transparent;
}

/****************************************
* Manage tool subscriptions
****************************************/

.tools-subscribed-list > div.flex {
  margin-top: 0.25rem;
}

.tools-subscribed-list div.highlighted {
  outline: 2px solid #000000;
  padding-left: 10px;
  background-color: #f3f3f3;
}

.dependency-list-container {
  position: relative;
  gap: 0.5rem;
}

.dependency-list-container .toggle-buttons svg {
  position: relative;
  top: 3px;
  height: 20px;
  width: 20px;
  cursor: pointer;
}

.dependency-list-container .toggle-buttons .hide-button svg {
  z-index: 5;
}

.dependency-list-container .toggle-buttons .show-button svg {
  z-index: 1;
}

.dependency-list-container .tool-dependencies {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: -125px;
  border-bottom-left-radius: 5px;
  border-right: 3px solid #007bbd;
  background-color: #f3f3f38f;
  width: 150px;
  text-align: left;
}

.dependency-list-container .tool-dependencies > div {
  padding: 0 0.5rem;
}

.dependency-list-container .tool-dependencies > div:not(:first-of-type) {
  border-top: #eeeeee8f 2px solid;
}

/*****************************************
* Customizable table toolbar
*****************************************/

.customizable-table-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, .2);
  background-color: #ffffff;
  padding: 0;
}

.customizable-table-toolbar > div {
  justify-content: start;
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.customizable-table-toolbar .flex {
  flex-flow: row wrap;
  gap: .5rem;
}

.customizable-table-toolbar > .flex {
  flex-direction: row;
}

.customizable-table-toolbar .actions {
  align-items: center;
}

.customizable-table-toolbar .styled-select {
  margin: 0;
}

.customizable-table-toolbar .actions > .flex {
  margin-top: 0;
}

.customizable-table-toolbar a,
.customizable-table-toolbar p,
.customizable-table-toolbar button {
  display: flex;
  align-items: center;
  padding: .5rem;
  color: #000000;
}

.customizable-table-toolbar a:focus,
.customizable-table-toolbar a:hover,
.customizable-table-toolbar button:focus,
.customizable-table-toolbar button:hover,
.customizable-table-toolbar .dropdown:hover > button {
  border-radius: 3px;
  background-color: rgba(0, 0, 0, .02);
  color: var(--fni-color-3);
}

.customizable-table-toolbar a:focus svg,
.customizable-table-toolbar a:hover svg,
.customizable-table-toolbar button:focus svg,
.customizable-table-toolbar button:hover svg,
.customizable-table-toolbar .dropdown:hover > button svg {
  fill: var(--fni-color-3);
}

.customizable-table-toolbar svg {
  margin-right: .25rem;
  width: 18px;
  height: 18px;
}

.customizable-table-toolbar .search-input {
  flex-grow: 1;
  position: relative;
}

.customizable-table-toolbar .search-input svg {
  position: absolute;
  top: 50%;
  left: .75rem;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  fill: #9f9f9f;
  pointer-events: none;
}

.customizable-table-toolbar .search-input input {
  margin: 0;
  min-width: 320px;
  height: 34px;
  padding-left: 34px;
  font-size: 16px;
}

.customizable-table-toolbar .reorder-button-container {
  margin-top: 0;
}

.customizable-table-toolbar .reorder-start,
.customizable-table-toolbar .reorder-cancel {
  outline: 2px solid transparent;
  border: 1px solid #eeeeee;
  border-radius: 0;
  padding: 0;
  background-color: #ffffff;
  height: 34px;
  width: 34px;
  color: #000000;
  text-transform: none;
  letter-spacing: normal;
}

.customizable-table-toolbar .reorder-start svg,
.customizable-table-toolbar .reorder-cancel svg {
  margin: auto;
  fill: #212121;
  width: 18px;
  height: 18px;
}

.customizable-table-toolbar select,
.customizable-table-toolbar .search-input input {
  outline: 1px solid transparent;
}

.customizable-table-toolbar .reorder-start:hover,
.customizable-table-toolbar .reorder-cancel:hover,
.customizable-table-toolbar select:not(.columns-to-include):hover,
.customizable-table-toolbar select:not(.columns-to-include):focus-within,
.customizable-table-toolbar .search-container:hover input,
.customizable-table-toolbar .search-input input:focus-within {
  outline-color: #33C3F0;
  transition: outline 0.3s;
}

.customizable-table-toolbar .search-container:focus-within .search-input input {
  outline-color: #33C3F0;
}

.you-can-drag-notification {
  margin-top: 2rem;
  width: 100%;
  max-height: 100%;
  text-align: center;
  transition: max-height 0.4s;
}

.you-can-drag-notification span {
  display: block;
  border-radius: 20px;
  border: 1px solid #eeee;
  padding: 1rem;
  background-color: rgba(0, 100, 255, 0.05);
}

.customizable-table-toolbar .search-container {
  position: relative;
}

.customizable-table-toolbar .search-by-column-container {
  position: absolute;
  right: -1px;
  top: -1px;
}

.customizable-table-toolbar .search-by-column-container .styled-select select {
  background-color: transparent;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-image: linear-gradient(to left, #ffffff 80%, #ffffff, transparent);
  padding: 0 0 0 30px;
}

/*****************************************
* Customizable table table
*****************************************/

.customizable-table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  /* max-height: 600px; */
}

.customizable-table {
  width: auto;
  min-width: 100%;
}

.customizable-table th[data-sort-type] {
  cursor: pointer;
}

.customizable-table.reordering tr {
  cursor: grab;
}

.customizable-table.reordering th {
  pointer-events: none;
  cursor: auto;
}

.customizable-table.reordering a {
  pointer-events: none;
}

.customizable-table.reordering tr.grabbing,
.customizable-table.reordering tr:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

.customizable-table th,
.customizable-table td:not(.allow-wrap) {
  white-space: nowrap;
}

.customizable-table .row-entry {
  border-bottom: solid 2px #efefef;
  background-color: #ffffff;
}

.customizable-table .row-entry.dropzone {
  background-color: #B2D6EC;
}

.hidden--by-filter {
  display: none;
}

.customizable-table tr.was-hidden,
.customizable-table tr.was-hidden td,
.customizable-table tr.was-hidden--by-filter,
.customizable-table tr.was-hidden--by-filter td {
  background-color: rgba(255, 255, 255, 0.7);
  opacity: 0.7;
}

.save-or-reindex-container {
  margin-top: 1rem;
}

/*****************************************
* Products tool styles
*****************************************/

.products-form h2 {
  margin: 2rem 0 1rem 0;
}

.general-categories-and-manufacturers-container > div.grid {
  margin-top: 0;
}

.associated-fields {
  margin: 1rem 0 0 18px;
  width: calc(100% - 38px);
}

.associated-fields .add-clone.new-custom-category-field {
  margin-top: 1rem;
}

.remove-clone {
  background-color: var(--fni-color-2);
}

.custom-category .delete-category-button {
  right: 0;
}

.categories-title {
  margin-bottom: 4px;
}

p.categories-title + button {
  margin-top: 0;
}

.category,
.associated-fields > div,
.custom-field {
  position: relative;
}

.custom-field-wrapper input {
  margin-bottom: 0;
}

.custom-options {
  padding-right: 1rem;
}

.custom-field input,
.custom-field fieldset {
  margin: 0;
}

.custom-field.add-clone {
  margin-top: 1rem;
}

.category .remove-clone,
.new-category .remove-clone,
.custom-field .remove-clone {
  position: absolute;
  top: 10px;
  right: 0;
}

.custom-field > div:nth-of-type(2) input,
.products-categorical-information-wrapper .clone label,
.products-categorical-information-wrapper .category label {
  margin: 0;
  width: calc(100% - 20px);
}

.products-categorical-information-wrapper .clone input,
.products-categorical-information-wrapper .category label,
.products-categorical-information-wrapper .category input {
  margin-bottom: 0;
}

.products-categorical-information-wrapper .clone,
.products-categorical-information-wrapper .category {
  margin: 1rem 0;
}

.products-categorical-information-wrapper .clone:first-of-type,
.products-categorical-information-wrapper .category:first-of-type {
  margin-top: 0;
}

.products-categorical-information-wrapper .category.deleted,
.products-categorical-information-wrapper .custom-category-field.deleted,
.clone.deleted {
  cursor: not-allowed;
}

.products-categorical-information-wrapper .category.deleted input,
.products-categorical-information-wrapper .custom-category-field.deleted input,
.clone.deleted input,
.clone.deleted button,
.clone.deleted button p,
.clone.deleted label {
  background-color: rgba(0, 0, 0, 0.02);
  text-decoration-line: line-through;
  text-decoration-color: #ff0000;
  color: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.products-categorical-information-wrapper .category.deleted label {
  pointer-events: none;
}

.products-categorical-information-wrapper .category.deleted label::before {
  background-color: #ff0000;
}

.trash-dropzone-container {
  position: relative;
  height: 0px;
}

.trash-dropzone-container svg {
  height: 25px;
  width: 25px;
  fill: var(--fni-color-3);
}

.trash-dropzone-container .trash-dropzone {
  position: absolute;
  /* width: 25px;
  height: 25px; */
}

.trash-dropzone-container .trash-dropzone > div {
  justify-self: center;
  align-self: center;
}

:not(.grayed-out) .trash-dropzone-container .trash,
.trash-dropzone-container .trash-undo {
  cursor: pointer;
}

.trash-dropzone-container .trash:hover svg,
.trash-dropzone-container .trash-undo:hover svg {
  fill: var(--fni-color-2);
  transition: fill 0.3s;
}

.product-document-actions {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 0.75rem;
}

.documents-container > :nth-last-child(-n + 1) {
  margin-bottom: 1rem;
  border: none;
}

.product-document-actions * {
  align-self: center;
}

.product-document-actions svg {
  fill: var(--fni-color-3);
}

.product-document-actions .termination-buttons[data-action="unlink"] div[data-will-delete="false"] svg,
.product-document-actions .termination-buttons[data-action="delete"] div[data-will-unlink="false"] svg {
  fill: #9c9c9c;
}

.product-document-actions .termination-buttons div[data-will-unlink="true"] svg,
.product-document-actions .termination-buttons div[data-will-delete="true"] svg {
  fill: #ff0000;
}

.product-document-actions .termination-buttons,
.product-document-actions .termination-buttons > div {
  margin: 0;
}

.product-document-actions .termination-buttons svg {
  height: 25px;
  width: 25px;
}

.product-document-actions .document-information-text {
  gap: 8px;
  align-self: center;
  overflow: ellipsis;
  white-space: nowrap;
}

.product-document-actions .document-information-text.deleted,
.product-document-actions .document-information-text.unlinked {
  color: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.product-document-actions .document-information-text.deleted svg,
.product-document-actions .document-information-text.unlinked svg {
  fill: #9c9c9c;
}

.product-document-actions .document-information-text.deleted {
  text-decoration-line: line-through;
  text-decoration-color: #ff0000;
}

details > .custom-description-textarea {
  background-color: transparent;
  padding: 0;
}

details .toggle {
  background-color: var(--fni-color-3);
}