/* Picture detail page edit & delete button customizations */
.edit-delete-button {
  background-color: #36b009;
  color: #f2f2f2;
  font-size: 0.6rem;
  text-decoration: none;
  border-radius: 0;
  text-align: center;
  font-family: 'Press Start 2P', cursive, monospace;
  box-shadow: 4px 4px 0 #227006;
  transition: all 0.15s ease-in-out;
  user-select: none;
  text-transform: uppercase;
  padding: 5px;
}

.edit-delete-button:hover {
  background-color: #2d9507;
  box-shadow: 2px 2px 0 #227006;
  border-color: #227006;
}

#delete-file-button.edit-delete-button{
  margin-left: 10px;
}

.edit-delete-buttons-group {
  position: fixed;
  top: 6px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  height: 36px;
  flex-direction: row-reverse;
  align-items: center;
}

@media screen and (min-width: 1277px) {
  .edit-delete-buttons-group {
    right: auto;
    right: 27%;   
  }
}
/* END OF Picture detail page edit & delete button customizations */


/* Picture detail page edit & delete button customizations */
.edit-modal, .delete-modal {
  position: fixed;
  z-index: 10001;
	top:60px;
	right:10px;
  min-width: 220px;
  width: 88vw;
  max-width: 500px;
  display: none;
  background: #1e1e1e;
  box-shadow: 4px 4px 0 #000000;
  color: #f2f2f2;
  font-size: 0.9rem;
  font-family: monospace;
}

.edit-modal.open, .delete-modal.open {
  display: inline;
}

.file-edit-modal-box, .file-delete-modal-box {
  padding: 18px 24px 12px 24px;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.edit-file-modal-btn-row, .delete-file-modal-btn-row {
  display: flex;
  gap: 12px;
  padding-top: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.file-modal-buttons {
  padding: 8px 18px;
  border-radius: 0px;
  border: none;
  font-size: 0.7rem;
  cursor: pointer;
  color: #f2f2f2;
  font-family: 'Press Start 2P', cursive, monospace;
}

#save-changes-button, #confirm-delete-button {
  background: #36b009;
  color: #f2f2f2;
  border: 4px 4px 0 solid #2d9507;
  font-family: 'Press Start 2P', cursive, monospace;
  box-shadow: 4px 4px 0 #227006;
  transition: all 0.15s ease-in-out;
  user-select: none;
}

#save-changes-button:hover, #confirm-delete-button:hover {
  background-color: #2d9507;
  box-shadow: 2px 2px 0 #227006;
  border-color: #227006;
}

#cancel-edit-button, #cancel-delete-button {
  background: #c5c5c5;
  color: #000000;
  border: 4px 4px 0 solid #989898;
  font-family: 'Press Start 2P', cursive, monospace;
  box-shadow: 4px 4px 0 #414141;
  transition: all 0.15s ease-in-out;
  user-select: none;
}

#cancel-edit-button:hover, #cancel-delete-button:hover {
  background-color: #989898;
  box-shadow: 2px 2px 0 #414141;
  border-color: #414141;
}

.delete-file-box-title, .edit-file-box-title {
  color: #36b009;
  font-size: 0.8rem;
  margin-bottom: 20px;
  cursor: default;
  font-family: 'Press Start 2P', cursive, monospace;
}

input.edit-input, #edit-description.edit-input {
  padding: 8px 12px;
  border-radius: 0px;
  border: none;
  width: 100%;
  max-width: 95%;
  margin-bottom: 12px;
  font-size: 0.9rem;
  background-color: #373737 !important;
  color: #f2f2f2;
  cursor: text;
  caret-color: #f2f2f2;
  font-family: monospace;
}

label {
  color: #f2f2f2;
  font-size: 1rem;
  font-weight: bold;
}

input.edit-input::placeholder, #edit-description.edit-input::placeholder {
  color: #f2f2f2;
}

/* END OF Picture detail page edit & delete button customizations */

/* Loading Animations */
/* HTML: <div class="loader"></div> */
.loader-container {
    position: absolute;
    z-index: 10002;
    width: 95%;
    height: 57%;
    top: 10px;
    left: 10px;
    display: none;
    background-color: #37373788;
}

#edit-loader.loader-container {
  height: 70%;
}

.loader-container.show {
  display: flex;
}

#delete-loader.loader {
  left: 45%;
  top: 10%;
}

.loader {
  width: 50px;
  position: absolute;
  left: 45%;
  top: 45%;
  aspect-ratio: 1;
  display: flex;
  --c1:linear-gradient(#f2f2f2 0 0);
  --c2:linear-gradient(#36b009 0 0);
  --s:calc(100%/3) calc(100%/3);
  background:
    var(--c1) 0   0 ,var(--c2) 50% 0   ,var(--c1) 100% 0,
    var(--c2) 0  50%,                   var(--c2) 100% 50%,
    var(--c1) 0 100%,var(--c2) 50% 100%,var(--c1) 100% 100%;
  background-repeat: no-repeat;
  animation: l8-0 1.5s infinite alternate;
}
.loader:before {
  content: "";
  width: calc(100%/3);
  height: calc(100%/3);
  background: #623EA8;
  animation: inherit;
  animation-delay: 0s; 
  animation-name: l8-1;
}
  @keyframes l8-0 {
      0%,12.49%   {background-size: var(--s),0 0     ,0 0     ,0 0     ,0 0     ,0 0     ,0 0     ,0 0     }
      12.5%,24.9% {background-size: var(--s),var(--s),0 0     ,0 0     ,0 0     ,0 0     ,0 0     ,0 0     }
      25%,37.4%   {background-size: var(--s),var(--s),var(--s),0 0     ,0 0     ,0 0     ,0 0     ,0 0     }
      37.5%,49.9% {background-size: var(--s),var(--s),var(--s),0 0     ,var(--s),0 0     ,0 0     ,0 0     }
      50%,61.4%   {background-size: var(--s),var(--s),var(--s),0 0     ,var(--s),0 0     ,0 0     ,var(--s)}
      62.5%,74.9% {background-size: var(--s),var(--s),var(--s),0 0     ,var(--s),0 0     ,var(--s),var(--s)}
      75%,86.4%   {background-size: var(--s),var(--s),var(--s),0 0     ,var(--s),var(--s),var(--s),var(--s)}
      87.5%,100%  {background-size: var(--s),var(--s),var(--s),var(--s),var(--s),var(--s),var(--s),var(--s)}
  }
  @keyframes l8-1 {
    0%,
    5%    {transform: translate(0   ,0   )}
    12.5% {transform: translate(100%,0   )}
    25%   {transform: translate(200%,0   )}
    37.5% {transform: translate(200%,100%)}
    50%   {transform: translate(200%,200%)}
    62.5% {transform: translate(100%,200%)}
    75%   {transform: translate(0   ,200%)}
    87.5% {transform: translate(0   ,100%)}
    95%,
    100%  {transform: translate(100%,100%)}
  }

/* End of Loading Animations */