.toggle-btn[data-v-4dfb0466] {
  position: fixed;
  left: 0;
  top: 100px;
  z-index: 1045;
  border-radius: 0 4px 4px 0;
  padding: 10px;
  border-left: none;
  //border: none;
  //color: white;
  transition: left 0.3s;
}
.toggle-btn.shifted[data-v-4dfb0466] {
  left: 399px;
  background-color: rgba(33, 37, 41, 0.95);
  backdrop-filter: blur(8px);
  color: white;
}
.side-panel[data-v-4dfb0466] {
  position: fixed;
  left: 0;
  top: 0;
  width: 400px;
  height: 100vh;
  background-color: rgba(33, 37, 41, 0.95);
  backdrop-filter: blur(8px);
  color: white;
  overflow-y: auto;
  z-index: 1040;
}
.panel-content[data-v-4dfb0466] {
  padding: 0;
}

/* Slide transition */
.slide-enter-active[data-v-4dfb0466],
.slide-leave-active[data-v-4dfb0466] {
  transition: transform 0.3s ease;
}
.slide-enter-from[data-v-4dfb0466],
.slide-leave-to[data-v-4dfb0466] {
  transform: translateX(-100%);
}


.modal.show[data-v-4206917d] {
  display: block;
}


.modal.show[data-v-43bfc33c] {
  display: block;
}


.modal.show[data-v-64bf076a] {
  display: block;
}


.modal.show[data-v-4eb7c2ff] {
  display: block;
}


.preview-overlay[data-v-01e9ca17] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1050;
}
.blur-background[data-v-01e9ca17] {
  background-color: rgba(33, 37, 41, 0.85);
  backdrop-filter: blur(8px);
}
.preview-container[data-v-01e9ca17] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.preview-image[data-v-01e9ca17] {
  max-height: 95vh;
  max-width: 95vw;
  object-fit: contain;
  transition: transform 0.1s ease-out;
  cursor: grab;
}
.preview-image[data-v-01e9ca17]:active {
  cursor: grabbing;
}
.previews-button-bar[data-v-01e9ca17] {
  background-color: rgba(33, 37, 41, 0.95);
  backdrop-filter: blur(8px);
  color: white;
  z-index: 1060;
}
.nav-area[data-v-01e9ca17] {
  position: absolute;
  top: 0;
  height: 100%;
  width: 20%;
  cursor: pointer;
}
.nav-prev[data-v-01e9ca17] {
  left: 0;
}
.nav-next[data-v-01e9ca17] {
  right: 0;
}
.nav-area[data-v-01e9ca17]:hover {
  cursor: pointer;
}


.gallery-item[data-v-b36e6092] {
  transition: opacity 0.2s ease-in-out;
}
.gallery-item[data-v-b36e6092]:hover {
  opacity: 0.75;
}

/*
CSS FOR Mac OS Dock Menu
 */
#dock-container {
    padding-top: 0.5em;
    position: fixed;
    bottom: 0;
    text-align: center;
    right: 20%;
    left: 20%;
    width: 60%;
    background: rgba(255,255,255,0.2);
    border-radius: 10px 10px 0 0;
}
#dock-container li {
    list-style-type: none;
    display: inline-block;
    position: relative;
}

#dock-container li button {
    width: 64px;
    height: 64px;
    -webkit-box-reflect: below 2px
    -webkit-gradient(linear, left top, left bottom, from(transparent),
            color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
    -webkit-transition: all 0.3s;
    -webkit-transform-origin: 50% 100%;
}

/*
CSS for adding animation for the Mac os dock menu on hover
 */
#dock-container li:hover button {
    -webkit-transform: scale(2);
    margin: 0 2em;
}
#dock-container li:hover + li button,
#dock-container li.prev button {
    -webkit-transform: scale(1.5);
    margin: 0 1.5em;
}

#dock-container li span {
    display: none;
    position: absolute;
    bottom: 140px;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.75);
    padding: 4px 0;
    border-radius: 12px;
}
#dock-container li:hover span {
    display: block;
    color: #fff;
}

.fa-secondary {
    color: var(--bs-secondary);
}


/*# sourceMappingURL=common.db9ac90a3a767bce191e.css.map*/