/* @formatter:off */
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Bootstrap, Bootswatch Journal, and Font Awesome are loaded via CDN in the layout.
 * Trix (if used) is loaded from the trix gem or CDN.
 */
@import url("/assets/custom-9d51a69c.css");
@import url("/assets/select2-1ca5d8ac.css");
@import url("/assets/select2-bootstrap-0d4f912a.css");
@import url("/assets/trix-d49ab3c9.css");
@import url("/assets/actiontext-f0869af8.css");
@import url("/assets/jsoneditor-94c0fd6d.css");
@import url("/assets/alerts-8f9ba18e.css");
@import url("/assets/assets-112380e8.css");
@import url("/assets/async_processes-298b885a.css");
@import url("/assets/deployment_events-f6269cea.css");
@import url("/assets/deployments-404e208e.css");
@import url("/assets/direct_upload-5c6adc01.css");
@import url("/assets/dragondrop-4f5b7c7f.css");
@import url("/assets/div_table-ce837ebb.css");
@import url("/assets/items-a6a1fff8.css");
@import url("/assets/landing-7ffa202d.css");
@import url("/assets/layout_containers-606d6869.css");
@import url("/assets/notes-6c47ffd4.css");
@import url("/assets/packs-2ef77aa5.css");
@import url("/assets/releases-4e7c7d44.css");
@import url("/assets/searches-94f9ee15.css");
@import url("/assets/sessions-962b5236.css");
@import url("/assets/single_page-ce4021ab.css");
@import url("/assets/tags-d94a0f5e.css");
@import url("/assets/templates-87ba2f65.css");
@import url("/assets/types-5eb24f5e.css");
@import url("/assets/welcome-05a7a6b9.css");

:root {
  --containerPadding: 24px;
  --borderRadius: 8px;
  --pending: #aaa;
  --on_hold: #deb887;
  --ready_for_qa: #369;
  --has_issues: #eb6864;
  --verified: #22b24c;
}

body {
  background-color: #efede5;
}

tr[data-href]:hover {
  cursor: pointer;
}

.pointer {
  cursor: pointer;
}

[data-behavior~="expandable"] {
  & > .expanded_content,
  & > .collapsed_content > .expanded_content {
    display: none;
  }

  & > .collapsed_content,
  & > .expanded_content > .collapsed_content {
    display: inherit;
  }

  &.expanded {
    & > .expanded_content,
    & > .collapsed_content > .expanded_content {
      display: inherit;
    }

    & > .collapsed_content,
    & > .expanded_content > .collapsed_content {
      display: none;
    }
  }
}

.alerts {
  position: absolute;
  top: 10%;
  display: inline;
  z-index: 1;
  left: 50%;
  transform: translate(-50%, 0%);
}

.main-container {
  background-color: #ffffff;
  border-radius: var(--borderRadius);
  padding: var(--containerPadding) !important;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.1), 0 10px 30px #f3ece8;
  overflow: auto;
}

/* adjust container padding for mobile screens */
@media screen and (max-width: 500px) {
  .main-container {
    padding: 5px !important;
  }
  .container-lg {
    padding: 5px;
  }
  .container {
    padding: 5px;
  }
}

.body-container {
  background-color: #ffffff;
  border-radius: var(--borderRadius);
  padding: var(--containerPadding) !important;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.1), 0 10px 30px #f3ece8;

  .attribute-container {
    margin-bottom: 2rem;
  }
}

footer {
  text-align: center;
  padding: 40px 10px;
}

/* Use class="btn btn-rounded-end" in HTML */
.btn-rounded-end {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn svg {
  fill: var(--bs-dark);
}

.btn-primary svg {
  fill: var(--bs-light);
}

.btn-danger svg {
  fill: var(--bs-light);
}

.btn-outline-primary svg {
  fill: var(--bs-primary);
}

.btn-outline-secondary svg {
  fill: var(--bs-secondary);
}

.btn-outline-light {
  svg {
    fill: var(--bs-light);
    transition: fill 0.15s ease-in-out;
  }

  &:hover {
    svg {
      fill: var(--bs-secondary);
    }
  }
}

.navbar {
  z-index: 1;

  &.qa {
    background-color: #2c2c2c;
    & .watermark {
      font-size: 7rem;
      position: absolute;
      top: -45px;
      left: 4px;
      color: #b3b3b3;
      font-family: "Comic Sans MS";
      pointer-events: none;
    }
  }
}

.marked-for-del {
  transition: background-color 0.3s;
  background: #e5e5e5;
  -webkit-box-shadow: inset 0 0 5px #c1c1c1;
  -moz-box-shadow: inset 0 0 5px #c1c1c1;
  box-shadow: inset 0 0 5px #c1c1c1;
  outline: none;
}

/* lock toggle */
.toggle {
  background-color: gray;
  border-radius: 60px;
  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 0 rgba(0, 0, 0, 0.1) inset;
  cursor: pointer;
  width: 80px;
  height: 42px;
  overflow: hidden;
  position: relative;
  transition: all 0.25s linear;

  &-sm {
    transform: scale(0.7);
  }
}

.toggle .slide {
  color: gray;
  background: #efefef;
  border-radius: 50%;
  font-size: 25px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  height: 40px;
  width: 40px;
  position: absolute;
  top: 1px;
  left: 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 1px 1px 0 rgba(255, 255, 255, 0.8) inset;
  transition: all 0.3s cubic-bezier(0.43, 1.3, 0.86, 1);
}

.toggle .slide span {
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7), 0 0 1px rgba(0, 0, 0, 0.3);
}

.toggle .slide:before,
.toggle .slide:after {
  font-family: "Font Awesome 6 Free";
  color: #fff;
  content: "\f3c1" !important;
  font: var(--fa-font-solid);
  font-size: 20px !important;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  -webkit-font-smoothing: antialiased;
  position: absolute;
  bottom: 10px;
}

.toggle .slide:before {
  right: -32px;
  color: black;
  opacity: 0.8;
}

.toggle .slide:after {
  content: "\f023" !important;
  left: -25px;
  color: red;
}

.toggle.on {
  background: darkred;
}

.toggle.on .slide {
  left: 40px;
  color: darkred;
}

/* Tags: use class="badge rounded-pill tag tag-pack" (or tag-item, tag-category) in HTML */
.tag {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 50rem;
  font-size: 0.9rem !important;
}

.tag-pack {
    background-color: var(--pack-bg);
}
  
.tag-item {
    background-color: var(--item-bg);
}
  
.tag-category {
    background-color: var(--category-bg);
}


/* form tags */
li.select2-selection__choice {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 50rem;
  padding: 0.25em 0.4em !important;
  border: none !important;
  background-color: var(--bs-dark) !important;

  .select2-selection__choice__remove {
    color: var(--bs-light) !important;
  }
}

.disabled {
  opacity: 0.65;
  background-color: #e9ecef;
  cursor: not-allowed;
}

button.lockable-pack-item {
  width: 43px;
  height: 40px;
}

button.status {
  &.pending {
    color: #aaa;
    border-color: #aaa;

    &:hover:enabled {
      color: #222;
      background-color: var(--pending);
      border-color: #aaa;
    }
  }

  &.ready_for_qa {
    color: #ffffff;
    background-color: var(--ready_for_qa);
    border-color: #369;

    &:hover:enabled {
      background-color: #29537c;
      border-color: #264d73;
    }
  }

  &.has_issues {
    color: #ffffff;
    background-color: var(--has_issues);
    border-color: #eb6264;

    &:hover:enabled {
      background-color: #ac4c49;
      border-color: #994340;
    }
  }

  &.on_hold {
    color: #ffffff;
    background-color: var(--on_hold);
    border-color: #ceaa7b;

    &:hover:enabled {
      background-color: #ac895c;
      border-color: #8a6d47;
    }
  }

  &.verified {
    color: #ffffff;
    background-color: var(--verified);
    border-color: #22b24c;

    &:hover:enabled {
      background-color: #1c923e;
      border-color: #1a873a;
    }
  }
}

.thumb {
  position: relative;
  order: 0;
  width: fit-content;

  .placeholder-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    background-color: var(--bs-secondary);

    label {
      margin: 0;
    }
  }

  .btn-edit {
    position: absolute;
    top: 0;
    right: -70px;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
  }

  .btn-remove {
    position: absolute;
    top: 45px;
    right: -70px;
  }
}

/* Use class="btn-outline-secondary bg-white btn-cancel" in HTML */
.btn-cancel {
  color: #6c757d;
  border-color: #6c757d;
  background-color: #fff;
}

.btn-lockable {
  height: 38px;
  width: 38px;
  padding: 0;
}

.btn-unlocked {
  background-color: limegreen;
  color: white;

  &:hover {
    color: white;
  }
}

.grabbable {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.grabbable:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.table-container {
  overflow-x: scroll;
  margin: 1em 0 1em 0;
}

table {
  width: calc(100% + var(--containerPadding) * 2);
  border-left: none !important;
  border-right: none !important;

  thead {
    background-color: #eeeeee;
  }

  td {
    vertical-align: middle !important;
    text-align: left !important;

    .form-group {
      margin: 0;
    }

    .batch-selector {
      display: flex;
      justify-content: center;
      height: 75px;
      margin: 0;
    }
  }

  tr:hover {
    background-color: #f8f8f8;
    transition: background-color 0.3s;
  }

  th,
  td {
    text-align: left !important;
  }

  th.fit,
  td.fit {
    white-space: nowrap;
    width: 1%;
  }

  td.status button {
    width: 100%;
  }
}

.asset {
  position: relative;
  overflow: hidden;
  border: 1px solid #dee2e6;
  width: 75px;
  height: 75px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  &.archived::before {
    position: absolute;
    content: url(https://fakeimg.pl/75?text=Archived);
    transform: revert;
    top: 0;
    left: -37px;
    mix-blend-mode: difference;
  }

  label {
    cursor: pointer;
    margin: 0;
  }
}

.asset img {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.asset::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  transform: rotate(45deg);
  background-size: 10px 10px;
  background-image: linear-gradient(45deg, #cecece 25%, transparent 25%),
    linear-gradient(-45deg, #cecece 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cecece 75%),
    linear-gradient(-45deg, transparent 75%, #cecece 75%);
}

.object-fit-cover {
  object-fit: cover;
}

.zip-file-icon-container {
  display: flex;
  justify-content: center;
  width: 75px;
  height: 75px;

  .fa.fa-regular.fa-file-zipper.fa-4x {
    padding: 5px 0px;
    color: #959595;
    position: relative;
    z-index: 1;

    &:hover {
      color: #757575;
    }
  }
}

.status-changes {
  .pending {
    color: var(--pending);
  }

  .has_issues {
    color: var(--has_issues);
  }

  .ready_for_qa {
    color: var(--ready_for_qa);
  }

  .on_hold {
    color: var(--on_hold);
  }

  .verified {
    color: var(--verified);
  }

  #pack-status-update-link {
    color: white;
  }
}

.search-bar {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 1rem 0 1rem 0;
  gap: 20px;

  /* Use class="rounded-end first-field" in HTML for .first-field */
  .first-field {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .form-control {
    border-radius: 0;
  }

  .form-group {
    margin-bottom: 0;
  }
}

.jsoneditor {
  border: none !important;

  .ace_editor {
    min-height: 600px;
  }

  .jsoneditor-tree {
    background-color: antiquewhite;
  }

  /* Use class="rounded-top" for .jsoneditor-menu if needed; border-radius applied below */
  .jsoneditor-menu {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    background-color: var(--primary-bg);
    border-bottom: 1px solid var(--primary-bg);
  }

  .jsoneditor-poweredBy {
    visibility: hidden;
  }
}

.resource-select-preview {
  position: relative;
  span.resource-select-remove {
    position: absolute;
    right: 3px;
    top: -2px;
    cursor: pointer;
  }
}

[data-resource-selector="remove-resource"] {
  cursor: pointer;
}

.resource-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;

  .resource-grid {
    background-color: #f8f9fa;
    padding: 10px;
    min-height: 95px;
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 8px;
    justify-content: center;
  }
}

.hover-img figure {
  background-color: #ffffff;
  color: #fff;
  display: inline-block;
  margin: 8px;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.hover-img * {
  box-sizing: border-box;
  transition: all 0.45s ease;
}

.grabbable-img::before,
.grabbable-img::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  transition: all 0.3s ease;
  z-index: 1;
  opacity: 75%;
  transform: scaleY(2);
}

.square-preview-image {
  width: 75px;
  height: 75px;
  object-fit: contain;
}

.grabbable-img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.hover-img figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  z-index: 2;
  transition-delay: 0.1s;
  font-size: 24px;
  font-family: sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hover-img:hover::before,
.hover-img:hover::after {
  transform: scale(1);
  opacity: 1;
}

.hover-img:hover > img {
  opacity: 0.7;
}

.hover-img:hover figcaption {
  opacity: 50%;
  background-color: black;
}

.resource-selector-container {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.text-size-lg {
  font-size: 5em;
}

.brightness-50 {
  filter: brightness(0.5);
}

.resource-grid-item {
  position: relative;
  padding: 0.5rem;

  input {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
  }

  .resource-link {
    position: absolute;
    bottom: 8px;
    left: 12px;
    color: white;
    text-shadow: 1px 1px #0000003d;
  }
}

.resource-selector-selected-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1rem;
}

.remove-object {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.select2-container--open {
  z-index: 4 !important;
}

.multiselect2 {
  & ~ .select2-container--bootstrap .select2-selection {
    border-radius: 0px;
    min-height: 38px;
    min-width: 175px;

    li.select2-selection__choice {
      color: var(--bs-light) !important;
      background-color: var(--item-bg) !important;
    }
  }
}

.rive {
  &.search-button {
    height: 38px;
    top: -1px;
    padding: 0px;
    margin: 0px;
    border: none;
  }
}

#config-nav-tables {
  .back-to-top-btn {
    bottom: 35px;
    position: relative !important;
    float: right;
  }
}

#config-nav-buttons {
  .nav-link {
    color: #eb6864;
    &:hover {
      color: white;
    }
  }
}

.filters {
  row-gap: 10px;
}

.ready-for-qa-btn {
  color: #ffffff;
  background-color: #336699d4;
  border-color: #369;

  &:hover {
    background-color: var(--ready_for_qa) !important;
    color: #ffffff !important;
  }
}

.sub-menu {
  .dropdown-menu {
    width: auto;
    top: 5px !important;
    .dropdown-item {
      &:active,
      &:hover {
        color: white;
        background: #eb6864;
      }
    }
    .hover-icon-beat {
      &:hover {
        .fa {
          animation-name: fa-beat;
          animation-delay: var(--fa-animation-delay, 0s);
          animation-direction: var(--fa-animation-direction, normal);
          animation-duration: var(--fa-animation-duration, 3s);
          animation-iteration-count: var(--fa-animation-iteration-count, 1);
          animation-timing-function: var(--fa-animation-timing, ease);
        }
      }
    }
    .hover-icon-spin {
      &:hover {
        .fa {
          animation-name: fa-spin;
          animation-delay: var(--fa-animation-delay, 0s);
          animation-direction: var(--fa-animation-direction, normal);
          animation-duration: var(--fa-animation-duration, 3s);
          animation-iteration-count: var(--fa-animation-iteration-count, 1);
          animation-timing-function: var(--fa-animation-timing, ease);
        }
      }
    }
    .hover-icon-spin-reverse {
      &:hover {
        .fa {
          animation-name: fa-spin;
          animation-delay: var(--fa-animation-delay, 0s);
          animation-direction: reverse;
          animation-duration: var(--fa-animation-duration, 3s);
          animation-iteration-count: var(--fa-animation-iteration-count, 1);
          animation-timing-function: var(--fa-animation-timing, ease);
        }
      }
    }
    .hover-icon-shake {
      &:hover {
        .fa {
          animation-name: fa-shake;
          animation-delay: var(--fa-animation-delay, 0s);
          animation-direction: var(--fa-animation-direction, normal);
          animation-duration: var(--fa-animation-duration, 4s);
          animation-iteration-count: var(--fa-animation-iteration-count, 1);
          animation-timing-function: var(--fa-animation-timing, ease);
        }
      }
    }
  }
}

.flex-100 {
  flex: 1 1 100%;
}

.flex-gap-xs {
  gap: 0.25rem;
}

.flex-gap-sm {
  gap: 0.5rem;
}

.flex-gap-md {
  gap: 1rem;
}

.flex-gap-lg {
  gap: 1.5rem;
}

.flex-gap-xl {
  gap: 2rem;
}

.dashed-border {
  border: 3px dashed #ccc;
}

.fa-grip {
  cursor: grab;
}

.div-table {
  display: flex;
  justify-content: space-between;
}

.div-table .div-table-item {
  flex: 1;
  text-align: center;
  overflow: hidden;
  background-color: var(--bs-list-group-bg);
  border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
}

[data-controller='stretched-link'] {
  cursor: pointer;
}

.hidden-inline-field {
  display: none;
}

.inline-edit {
  .hidden-inline-field {
    display: inherit;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.square-preview-image {
  animation: fadeIn 0.4s ease-in;
}