:root {
    --bg: #363636;
    --sorter-margin : -24rem;
}


/* -----------------------------
-------------------------------- 
 
LAYOUT 
 
--------------------------------
----------------------------- */

html, body {
    width: 100%;
    height: 100%;
    background: var(--cryptee-4);
    overflow: hidden;
}

.dm body {
    background: var(--oled-safe-black);
    color: var(--cryptee-2);
}

main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(auto-fit, 16rem) minmax(0, 1fr);
    column-gap: 4rem;
    
    width: 100%;
    height: calc(100% - 8rem);
    padding-top: 8rem;
    margin-bottom: 12rem;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none; /* to hide scrollbars in windows firefox */
    -ms-overflow-style:none; /* to hide scrollbars in windows / IE / Edge etc */
}

main::-webkit-scrollbar { display: none; }

#help {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    margin-top: 0;
    opacity: 0.4;
    transition: 0.3s opacity linear;
}

#logo {
    display: block;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    width: 2rem;
    height: 2rem;
    margin-top: 1rem;
    margin-left: 1rem;
    user-drag: none; 
    user-select: none;
    outline: none;
    z-index: 2;

    transform: translate3d(0,0,0);
    opacity: 0.4;

    transition : 0.3s opacity var(--cryptee-cb), 0.5s transform var(--cryptee-cb);
}

#logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    user-drag: none; 
    user-select: none;
}

.dm #logo img { filter: invert(1); }

#searchInput {
    margin-top: 0;
    grid-row: 1/2;
    grid-column: 2/-3;
    line-height: 4rem;
    height: 4rem;
    box-shadow: none !important;
    z-index: 2;

    transition: 0.3s opacity var(--cryptee-cb), 0.5s transform var(--cryptee-cb);
    transform: translate3d(0,0,0);
    opacity: 1;
}

.dm ::placeholder           { color: #ccc; }
.dm :-ms-input-placeholder  { color: #ccc; }
.dm ::-ms-input-placeholder { color: #ccc; }

/* mozilla treats placeholder colors differently. */
@-moz-document url-prefix() {
    .dm ::placeholder { color: #ccc !important; }
}



/* -----------------------------
-------------------------------- 
 
NAV LAYOUT
 
--------------------------------
----------------------------- */
/* #region NAV */


nav {
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 0 2rem 1fr 1fr 2rem 0;
    grid-template-rows: 4rem 0;
    column-gap: 1rem;
    z-index: 9;
}

nav .background { 
    grid-column: 1 / -1; 
    transform: translate3d(0,0,0);
    transition: 0.5s background-color var(--cryptee-cb), 0.5s transform var(--cryptee-cb); 
}

nav .top.background { grid-row: 1 / 2;    background-color : var(--cryptee-4); }
nav .bottom.background { grid-row: 2 / 3; background-color : var(--cryptee-4); }

.dm nav .top.background { grid-row: 1 / 2;    background-color : var(--oled-safe-black); }
.dm nav .bottom.background { grid-row: 2 / 3; background-color : var(--oled-safe-black); }


nav .buttons        { display: flex; }

nav button {
    line-height: 4rem;
    height: 4rem;
    width: 8rem;
    margin-top: 0;
    opacity: 0.4;
    transition: 0.3s opacity var(--cryptee-cb), 0.5s transform var(--cryptee-cb);
    user-select: none;
    display: inline-block;
    transform: translate3d(0,0,0);
    z-index: 2;
}

.top.buttons button:nth-child(2) { transition-delay: 0.05s; }

.dm nav button, .dm #help { color: white; }
.dm #delete-button { opacity: 0.6; }

label[for="upload-input"] {
    cursor: pointer;
    display: block;
    height: 100%;
}

.progress {
    grid-row: 2/3;
    grid-column: 1/-1;
    opacity: 0.2;
    transition: 0.5s opacity var(--cryptee-cb);
    z-index: 2;
}

.dm .progress { filter: invert(1); }

#searchInput {
    grid-column: 3/4;
    grid-row: 1/2;
    width: 100%;
}

#gallery-button {
    grid-column: 2/4;
    grid-row: 1/2;

    display: grid;
    width: 7rem;
    grid-template-columns: 2rem 5rem;   
}

#gallery-button i {
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    line-height: 2rem;
    color: #FFF;
    text-align: center;
    background-color: #000;
    font-size: 1.25rem;
    margin-top: 1rem;

    transform: scale(1);
    transition: 0.5s transform var(--cryptee-cb);
}

.dm #gallery-button i {
    background-color: #FFF;
    color: #000;
}

#gallery-button span {
    margin-left: 1rem;
}

#sort-button {
    grid-column: -3/-4;
    grid-row: 1/2;
    margin-left: auto;
    text-align: right;
    display: grid;
    width: 100%;
    grid-template-columns: minmax(1rem,1fr) 2rem;
}

#sort-button i {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: 1.5rem;
    margin-top: 1rem;
    margin-left: auto;
    grid-column: -1 / -2;
    box-sizing: border-box;
    border-radius: 3rem;
}

#sort-button span {
    margin-right: 1rem;
}

#action-button {
    grid-column: -3/-2;
    grid-row: 1/2;
    width: 2rem;
    height: 2rem;
    margin-top: 1rem;
    line-height: 2rem;
    border-radius: 2rem;
    background-color: #000;
    transition: 0.3s opacity var(--cryptee-cb), 0.5s transform var(--cryptee-cb), 0.5s border-radius var(--cryptee-cb), 0.5s background-color var(--cryptee-cb);
}

.dm #action-button {
    background-color: #FFF;
}

#action-button i {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    color: #FFF;
    text-align: center;
    font-size: 1.5rem;
    margin-top: 0;
    vertical-align: baseline;
    transform: rotate(0) scale(1);
    transition: 0.5s transform var(--cryptee-cb);
}

.dm #action-button i {
    color: #000;
}

#searchInput:focus, 
#searchInput:not(:placeholder-shown) {
    grid-column: 3/-3; 
}

#searchInput:focus ~ .progress { opacity: 1; }




/* #endregion NAV */




/* -----------------------------
-------------------------------- 
 
SORT POPUP / SORTER 
 
--------------------------------
----------------------------- */

#sorter {
    background: black;
    color: white;

    grid-row: 1/3;
    grid-column: 1/-1;
    z-index: 3;

    display: grid;
    grid-template-columns: 1fr 3rem 3rem 3rem;
    grid-template-rows: repeat(4, 3rem);
    gap: 0.5rem;
    height: 18rem;
    width: 17rem;
    margin: 4rem 3rem 0 auto;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    box-sizing: border-box;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);
    transform: translate3d(0,var(--sorter-margin),0);
    transition: 0.5s transform var(--cryptee-cb);
    pointer-events: none;

    border-radius: 1rem;
    overflow: hidden;
}

.dm #sorter {
    background-color: var(--cryptee-0);
}

#sorter.shown {
    transform: translate3d(0,0,0);
    pointer-events: all;
}

#sorter small {
    margin-top: 0 !important;

    min-width: 4rem;
    max-width: 4rem;
    
    height: 3rem;
    line-height: 3rem;
    
    user-select: none;
    text-align: left;
}

#sorter i {
    min-width: 3rem;
    max-width: 3rem;
    
    height: 3rem;    
    line-height: 3rem;
    
    text-align: center;
    cursor: pointer;

    opacity: 0.7;
    transition: 0.3s opacity ease;
    margin: 0;
}

#sorter i.selected {
    opacity: 1 !important;
    background-color: #363636;
    border-radius: 4rem;
}

body.nav-favorites #sorter i[type='fav-only'].filter-button::before,
#sorter i.filter-button.selected::before {
    content: "\ed22";
}

body[filter-fav-only] #sort-button,
body[filter-video-only] #sort-button,
body[filter-raw-only] #sort-button { opacity: 1; }

body.nav-favorites #sorter-fav,
body.nav-favorites #sorter-name,
body.nav-favorites .filter-button[type='fav-only'],
body.nav-favorites .sort-button[type^='az'],
body.nav-favorites .sort-button[type^='fav'] {
    opacity: 0.25 !important;
    pointer-events: none !important;
}

body[filter-fav-only] #sort-button span,
body[filter-video-only] #sort-button span,
body[filter-raw-only] #sort-button span { text-decoration: wavy underline;}

body[filter-fav-only] #sort-button i,
body[filter-video-only] #sort-button i,
body[filter-raw-only] #sort-button i { 
    background-color: #000;
    color: #fff;
}

.dm body[filter-fav-only] #sort-button i,
.dm body[filter-video-only] #sort-button i,
.dm body[filter-raw-only] #sort-button i { 
    background-color: #fff;
    color: #000;
}

body:has(#sorter.shown) #sort-button i:before {
    content: "\eb99";
}


/* -----------------------------
-------------------------------- 
 
ACTION BUTTON POPUP 
 
--------------------------------
----------------------------- */
/* #region ACTION BUTTON POPUP */

#actions {
    background: black;
    color: white;

    grid-row: 1/3;
    grid-column: 1/-1;
    z-index: 3;

    width: 18rem;
    height: 17rem;
    margin: -0.5rem -0.5rem 0 auto;
    padding: 1rem 1rem 1rem 1.5rem;
    box-sizing: border-box;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);
    transform: translate3d(19rem,0,0);
    transition: 0.5s transform var(--cryptee-cb);
    pointer-events: none;

    border-radius: 0 0 0 1rem;
    overflow: hidden;
}

#actions label {
    display: grid;
    grid-template-columns: 1fr 3rem;
    column-gap: calc(0.5rem + 1px);
    height: 3rem;
    margin-bottom: 1rem;
    cursor: pointer;
}

#actions label p {
    line-height: 3rem;
    margin-top: 0;
    text-align: right;
    opacity: 1;
    transition: 0.75s opacity ease;
}

#actions label i {
    line-height: 3rem;
    margin-top: 0;
    text-align: center;
    font-size: 1.5rem;
    background-color: var(--cryptee-1);
    border-radius: 3rem;
    transition: 0.15s color ease, 0.3s background-color ease;
}

.dm #actions {
    background-color: var(--cryptee-0);
}

#actions.shown {
    transform: translate3d(0,0,0);
    pointer-events: all;
}

.dm body:has(#actions.shown) #action-button i { 
    color: #FFF;
}

body:has(#actions.shown) #action-button {
    opacity: 1;
    z-index: 4;
    transform: scale(1.5);
    background-color: var(--cryptee-1);
}

body:has(#actions.shown) #action-button i {
    transform: rotate(-45deg) scale(0.75);
}

body:has(#actions.shown) #sort-button {
    opacity: 0;
    pointer-events: none !important;
}

#actions:not(.shown) label p {
    opacity: 0;
}


/* #endregion ACTION BUTTON POPUP */


/* -----------------------------
-------------------------------- 
 
DOWNLOAD SIZE PICKER POPUP 
 
--------------------------------
----------------------------- */
/* #region DOWNLOAD SIZE PICKER POPUP */


#download-size-picker {

    background: #202020;
    color: white;

    grid-row: 1/3;
    grid-column: 1/-1;
    z-index: 3;

    display: grid;
    grid-template-columns: 3rem 1fr;
    grid-template-rows: 3rem 3rem 3rem 3rem;
    gap: 0.5rem;
    height: 12rem;
    padding: 0.5rem;
    box-sizing: border-box;

    border-radius: 0 1.125rem 1.125rem 0;
    margin: 4rem 0 0 0rem;
    width: 16rem;
    height: 14.5rem;

    transform: translateX(0rem);
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.2);
    transition: 0.65s transform var(--cryptee-cb);

}

#download-size-picker:not(.shown) {
    transform: translateX(-20rem);
    pointer-events: none !important;
}

#download-size-picker i {
    width: 3rem;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    font-size: 1.25rem;
    transform: scale(1.25);
    transition: 0.15s transform ease;
    cursor: pointer;
}

#download-size-picker p {
    line-height: 3rem;
    margin-top: 0;
}

#download-size-picker button b {
    margin: auto;
    border-radius: 3rem;
    background-color: #FFF;
}

#download-size-picker #button-download-ogsize b {
    width: 1.25rem;
    height: 1.25rem;
}

#download-size-picker #button-download-lgsize b {
    width: 1rem;
    height: 1rem;
}

#download-size-picker #button-download-smsize b {
    width: 0.75rem;
    height: 0.75rem;
}

#download-size-picker button {
    grid-column: 1/-1;
    color: #FFF;
    text-align: left;
    line-height: 3rem;
    height: 3rem;
    width: 100%;
    opacity: 0.5;

    display: grid;
    grid-template-columns: 3rem 1fr 4.5rem;
    gap: 0.5rem;
}

#download-size-picker button small {
    background-color: var(--cryptee-1);
    padding: 0.5rem;
    border-radius: 3rem;
    text-align: center;
    margin: 0.5rem 0.5rem 0 0;
    height: 1rem;
}



/* #endregion DOWNLOAD SIZE PICKER POPUP */



/* -----------------------------
-------------------------------- 
 
SELECTOR POPUP 
 
--------------------------------
----------------------------- */
/* #region SELECTOR POPUP */


#photos-selector {
    position: fixed;
    z-index: 8;
    bottom: 1rem;
    left: 1rem;
    height: 12rem;
    background-color: var(--cryptee-folder);
    border-radius: 1rem;
    padding: 0 1rem;
    box-sizing: border-box;

    transform: translateX(0) translateY(0);
    opacity: 1;

    box-shadow: 0 1rem 2rem rgba(0,0,0,0.2);

    transition-property: transform, opacity;
    transition-duration: 0.6s;
    transition-timing-function: var(--cryptee-cb);
}

#photos-selector small {
    text-align: center;
    width: 100%;
}

#photos-selector .select-unselect {
    display: flex;
    gap: 1rem;
}

#photos-selector .select-unselect button {
    flex-grow: 1;
    width: 50%;
    text-align: center;
    border-radius: 0.5rem;
}

#photos-selector button {
    background-color: var(--cryptee-1);
    color: #FFF;
    height: 3rem;
    line-height: 3rem;
}

#photos-selector .selection-actions div {
    opacity: 1;
    min-width: 3.25rem;
    max-width: 4rem;
    height: 4.875rem;
    overflow: visible;
    display: inline-block;
    margin: 1rem 0.125rem 0 0;
    transition-property: min-width, max-width, margin, opacity;
    transition-duration: 0.5s;
    transition-timing-function: var(--cryptee-cb);
    overflow: hidden;
}

#photos-selector .selection-actions div:last-child {
    margin-right: 0;
}

#photos-selector .selection-actions button {
    margin: 0 auto;
    display: block;
    width: 3rem;
    text-align: center;
    border-radius: 3rem;
}

#photos-selector .selection-actions button i {
    font-size: 1.5rem;
    width: 3rem;
    text-align: center;
}

#photos-selector .selection-actions small {
    color: #FFF;
}

#photos-selector .selection-actions .delete button {
    background-color: var(--cryptee-red);
}

/* selector states */

#photos-selector:not(.multiple) .selection-actions .cover,
#photos-selector:not(.multiple) .selection-actions .delete {
    min-width: 4rem;
}

#photos-selector .selection-actions .cover small {
    min-width: 4rem;
}

#photos-selector.multiple .selection-actions .cover {
    min-width: 0;
    max-width: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
}

body:has(.modal.show) #photos-selector,
body:has(.panel.show) #photos-selector,
body:has(.popup.show) #photos-selector {
    pointer-events: none !important;
    transform: translateY(10.75rem);
}


/* #endregion SELECTOR POPUP */


/* -----------------------------
-------------------------------- 
 
SEARCH & SEARCH ANIMATIONS 
 
--------------------------------
----------------------------- */

/* SEARCH IS IN FOCUS & USER TYPED SOMETHING INTO SEARCH */
#searchInput:focus ~ button { 
    opacity: 0 !important; pointer-events: none; 
}

#searchInput:not(:placeholder-shown) ~ #sort-button,
#searchInput:focus ~ #sort-button { transform: translate3d(0.5rem,0,0); }

#searchInput:not(:placeholder-shown) ~ #action-button,
#searchInput:focus ~ #action-button { transform: translate3d(0.75rem,0,0); }

#searchInput:not(:placeholder-shown) ~ button { opacity: 0 !important; pointer-events: none; }

#searchInput:not(:placeholder-shown) ~ #sorter {
    transform: translate3d(0, var(--sorter-margin), 0) !important;
    pointer-events: none !important;
}


/* ------------------------------
---------------------------------
 
NAV BUTTONS & STATES & SELECTIONS 
 
---------------------------------
------------------------------ */


#delete-button { color: var(--cryptee-red); }

/* default gallery state */
/* body.nav-gallery */

body:not(.nav-gallery) #searchInput {
    transform: translate3d(0,-1rem,0);
    opacity: 0 !important;
    pointer-events: none !important;
}

body.nav-selection #gallery-button,
body:not(.nav-album):not(.nav-favorites) #gallery-button { 
    transform: translate3d(0,1rem,0);
    opacity: 0 !important;
    pointer-events: none !important;
}

body:not(.nav-gallery) #logo {
    transform: translate3d(0,-1rem,0);
    opacity: 0 !important;
    pointer-events: none !important;
}

body.starting #action-button,
body.loading #action-button,
body.offline #action-button,
body.searching #action-button {
    opacity: 0 !important; 
    pointer-events: none; 
}

body:not(.loading):not(.starting):not(.offline):not(.searching) #action-button {
    opacity : 0.7;
}

body.nav-selection #action-button,
body.nav-favorites #action-button {
    opacity: 0 !important; 
    pointer-events: none; 
    transform: translate3d(0.75rem,0,0);
}

body.nav-selection #sort-button {
    transform: translate3d(0.5rem,0,0);
    opacity: 0 !important; 
    pointer-events: none; 
}

body:not(.nav-selection) #photos-selector {
    transform: translateX(-26rem);
    opacity: 0;
    pointer-events: none !important;
}


body.nav-favorites #lightbox-info {
    display: none !important;
}

/* selections */

body:not(.loading):not(.starting).nav-selection #searchInput {
    transform: translate3d(0,1rem,0);
    opacity: 0 !important;
    pointer-events: none !important;
}

/* tagging */

body.tagging .media.selected i {
    background-color: var(--cryptee-green);
}

body.tagging .media.selected i::before {
    content: "\F023";
}

body.tagging #tag-button {
    transform: translate3d(0,1rem,0);
    opacity: 0 !important;
    pointer-events: none !important;
}


/* -----------------------------
-------------------------------- 
 
STARTUP / LOADING  
 
--------------------------------
----------------------------- */

body.searching #main-progress,
body.starting #main-progress,
body.loading #main-progress { 
    opacity: 1; 
}

body.offline nav button,
body.searching nav button,
body.starting nav button,
body.loading nav button { 
    opacity: 0; pointer-events: none; 
}

body.offline #searchInput,
body.starting:not(.searching) #searchInput, 
body.loading:not(.searching) #searchInput { 
    opacity: 0; pointer-events: none; 
}

body.offline #timeline small,
body.searching #timeline small, 
body.starting #timeline small, 
body.loading #timeline small { 
    transform: translateX(4rem) !important; 
    pointer-events: none !important;
}

body.offline #sorter,
body.searching #sorter,
body.starting #sorter,
body.loading #sorter {
    transform: translate3d(0, var(--sorter-margin), 0) !important;
    pointer-events: none !important;
}


body.offline::before {
    content: "";
    display: block;
    position: fixed;
    z-index : 997;
    top: 4rem;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--cryptee-4);
}

body.offline::after {
    content : "looks like you are offline. \a\ayou can only use cryptee photos with an internet connection. \a\aif you are connected to the internet, but having issues only with cryptee, an ad-blocker / vpn / company firewall or another network filter may be mistakenly blocking cryptee. try disabling it & reload cryptee.";
    white-space: break-spaces;
    position: fixed;
    z-index : 998;
    top: 4rem;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;

    width: 12rem;
    height: 22rem;
    background-color: #FFF;
    color: var(--cryptee-0);
    
    padding: 4rem;

    font-weight: 350;
    line-height: 1.5rem;
    text-align: justify;
}


/* -----------------------------
-------------------------------- 
 
TIMELINE
 
--------------------------------
----------------------------- */

#timeline {
    position: absolute;
    right: 0;
    top: 8rem;

    height: calc(100% - 12rem);
    width: 4rem;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    margin-left: auto;
    max-width: 4rem;
    z-index: 2;

    scrollbar-width: none; /* to hide scrollbars in windows firefox */
    -ms-overflow-style:none; /* to hide scrollbars in windows / IE / Edge etc */
}

#timeline::-webkit-scrollbar { display: none; }

#timeline small {
    float: right;
    width: 4rem;
    margin-top: 0;
    border-bottom: 1px solid black;
    display: block;
    opacity: 0.4;
    cursor: pointer;
    user-select: none;

    color: var(--cryptee-1);

    transform: translateX(0);
    transition: opacity, transform, color;
    transition-duration: 0.3s;
    transition-timing-function: var(--cryptee-cb);
    will-change: opacity, transform;
}

.dm #timeline small {
    color: white;
    border-bottom: 1px solid white;
}

#timeline .sub                          { height : 1rem; transform: translateX(1rem); }
#timeline small.active                  { opacity: 1; }
#timeline small.sub.active              { transform: translateX(1.5rem); }
#timeline small:not(.sub).active        { transform: translateX(0.5rem); }

#timeline small.sub:not(.active)        { transform: translateX(2rem); }
#timeline small:not(.sub):not(.active)  { transform: translateX(1rem); }

body.searching #timeline small,
#timeline.loading small,
#timeline small.loading {
    transform: translateX(4rem) !important;
}

#timeline.compact small.sub {
    height: 0.35rem !important;
    color: transparent !important;
    overflow: hidden !important;
}

#timeline.compact small:not(.sub) {
    transform: translateX(0.5rem);
}

#timeline.compact small.sub.active {
    transform: translateX(1.25rem);
}

/* -----------------------------
-------------------------------- 
 
GALLERY / ALBUM CONTENTS 
 
--------------------------------
----------------------------- */

/* #albumContents & searchContents */
.contents {
    position: relative;
    grid-column: 2/-2;
    grid-row: 1/-6;

    display: block;
    margin-left: -4rem;

    -webkit-overflow-scrolling: touch;

    padding-bottom: 4rem;

    opacity: 1;
    transition: 0.3s opacity ease;
}

body:not(.searching) #searchContents {
    pointer-events: none !important;
    opacity: 0 !important;
}

main:not(.scrolling):not(.browsing) .content.loading {
    animation: loadingBlink 0.75s linear infinite;
}

.content.loading:nth-child(2n)  { animation-delay: 0.03s !important; }
.content.loading:nth-child(3n)  { animation-delay: 0.06s !important; }
.content.loading:nth-child(4n)  { animation-delay: 0.09s !important; }
.content.loading:nth-child(5n)  { animation-delay: 0.12s !important; }
.content.loading:nth-child(6n)  { animation-delay: 0.15s !important; }
.content.loading:nth-child(7n)  { animation-delay: 0.18s !important; }
.content.loading:nth-child(8n)  { animation-delay: 0.21s !important; }
.content.loading:nth-child(9n)  { animation-delay: 0.24s !important; }
.content.loading:nth-child(10n) { animation-delay: 0.27s !important; }
.content.loading:nth-child(11n) { animation-delay: 0.30s !important; }







/* This is to put them on the same layer for rendering & gain some performance benefits */
.contents, .contents > * { z-index: 1; }

.contents img {
    object-fit: cover;
    object-position: center;
    opacity: 1;
    user-select: none;
    transition: 0.75s opacity ease;
}

/* only onscreen elements get the optimization */
/* since they're the only ones that will change their opacity */

.contents > .onscreen {
    will-change: opacity;
}

.contents > .loading img,
.contents img[src=""] {
    opacity: 0;
}

.contents.loading {
    opacity: 0 !important;
    pointer-events: none !important;
}

body:not(.loading) #albumContents:empty:not(.loading)::before {
    content: "welcome to cryptee photos! \a\alooks like you don't have any albums or photos. \ato get started, drag & drop some photos or a folder full of photos here. \a\ayou can also press the upload button on the top right to upload photos as well.";
    font-weight: 320;
    line-height: 1.5rem;
    display: block;
    grid-column: 1/-1;
    margin-top: auto;
    padding: 4rem;
    white-space: pre-wrap;
}

/* -----------------------------
-------------------------------- 
 
PHOTO / MEDIA ITEM 
 
--------------------------------
----------------------------- */

.media {

    float: left;    
    width: 16rem;
    height: 16rem;
    margin: 0 0 4rem 4rem;

    background-color: var(--bg);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    user-select: none;

    border-radius: 1.125rem;

}

.media img {
    width: 100%;
    height: 100%;
}

.media i {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;

    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 3rem;
    font-size: 2rem;
    text-align: center;

    opacity: 0;
    transform: scale(1);
    /* transition: 0.15s opacity ease, 0.15s transform ease, 0.15s background-color ease; */
    
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    color: white;
    background-color: var(--cryptee-0);
}

.media i::before {
    content: "\eb7a";
}

.media.selected i {
    opacity: 1;
    background-color: var(--cryptee-green);
    transform: scale(0.9);
}

.media.loading i {
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
}


body.highlight-deletions .media.selected i,
body.highlight-deletions .media.selected u {
    background-color: var(--cryptee-red);
}

body.highlight-deletions .media.selected i::before {
    content: "\ec27";
}

.media.onscreen {
    transform: translateX(0) translateY(0) scale(1);
    transform-origin: center;
    transition: 0.3s transform var(--cryptee-cb);
}

.media.in-lightbox {
    transform: translateX(var(--xTransitionToCenter, 0)) translateY(var(--yTransitionToCenter, 0)) scale(2);
    z-index: 2;
}

.media.in-lightbox img {
    opacity: 0;
}

.media.in-lightbox i, 
.media.in-lightbox u {
    opacity: 0 !important;
}

.media.video::after {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 2;

    width: 2.5rem;
    height: 2.5rem;
    border-radius: 2.5rem;
    line-height: 2.5rem;

    font-size: 1.5rem;
    text-align: center;

    transform: scale(0.9);
    transition: 0.15s opacity linear, 0.3s transform var(--cryptee-cb);
    
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    opacity: 0.5;
    color: var(--cryptee-0);

    content: "\F00A";

    background-color: #FFF;
}

.media.video.selected::after {
    transform: scale(0.9) !important;
    opacity: 0.5 !important;
}

.media u {
    text-decoration: none;
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 2;

    width: 2.25rem;
    height: 1rem;
    background-color: #000;
    color: #FFF;
    padding: 0.25rem 0.25rem 0.25rem 2rem;
    font-size: 0.75rem;
    line-height: 1.175rem;
    border-radius: 1rem;

    overflow: hidden;

    background-repeat: no-repeat;
    background-size : 1.5rem;
    background-position : left;
    transition: 0.3s padding ease 0.125s, 0.3s filter ease 0.3s;
}

.media u::before {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--cryptee-2);
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1.5rem;
    text-align: center;
    line-height: 1.675rem;
    transition:  0.3s transform ease;
    transform: translateX(0);
}

.media.selected u::before {
    transform: translateX(-2rem);
}

.media u[maker='leica']::before {
    background-color: var(--cryptee-red);
    content: 'L';
    /* background-image: url('../imgs/other-logos/leica.svg');     */
}

.media u[mono] { filter: saturate(0); }

.media u[maker='hasselblad']::before {
    content: 'H';
    font-style: italic;
    background-color: var(--cryptee-1);
    /* background-image: url('../imgs/other-logos/hasselblad.svg'); */
    /* background-position : 0.25rem; */
}

.media u[maker='apple']::before {
    background-color: var(--cryptee-4);
    background-image: url('../imgs/other-logos/pear.svg');
    background-size: 1.5rem;
    background-repeat: no-repeat;
}

.media u[maker='sony']::before {
    background-color: #d46f47;
    content: 'α';
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.25rem;
    line-height: 1.5rem;
}

.media u[maker='nikon']::before {
    background-color: #ffd300;
    content: 'N';
    font-style: italic;
    font-weight: bolder;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    line-height: 1.55rem;
    text-indent: -1px;
}

.media u[maker='canon']::before {
    background-color: var(--cryptee-red);
    content: 'c';
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.25rem;
    line-height: 1.5rem;
    text-indent: -1px;
}

.media u[maker='panasonic']::before {
    background-color: #1f56b3;
    content: 'P';
    font-weight: bolder;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    line-height: 1.55rem;
    text-indent: 1px;
}

.media u[maker='fuji']::before {
    background-color: #FFF;
    color: #000;
    content: 'x';
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.125rem;
    line-height: 1.45rem;
}

.media u[maker='olympus']::before {
    background-color: #4e61bc;
    color: #FFF;
    content: 'O';
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    line-height: 1.55rem;
    text-indent: 1px;
}

.media u[maker='pentax']::before {
    background-color: #FFF;
    content: 'P';
    font-weight: bolder;
    color: var(--cryptee-red);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    line-height: 1.55rem;
    text-indent: 1px;
}

.media u[maker='sigma']::before {
    background-color: #FFF;
    content: 'Σ';
    font-weight: bolder;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    line-height: 1.55rem;
}

.media u[maker='dji']::before,
.media u[maker='phaseone']::before {
    background-color: #FFF;
    content: '1';
    font-weight: bolder;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    line-height: 1.55rem;
}

.media u[maker='dji']::before {
    content: "d";
}

.media u[maker='mamiya']::before {
    background-color: #FFF;
    content: 'M';
    font-weight: bolder;
    color: var(--cryptee-red);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    line-height: 1.55rem;
}

.media u[maker='kodak']::before {
    background-color: var(--cryptee-yellow);
    content: 'K';
    font-weight: bolder;
    color: var(--cryptee-red);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    line-height: 1.55rem;
}

.media u[maker='epson']::before,
.media u[maker='minolta']::before,
.media u[maker='samsung']::before {
    background-color: #4e61bc;
    color: #FFF;
    content: 'S';
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    line-height: 1.55rem;
}

.media u[maker='epson']::before { content: 'E'; }
.media u[maker='minolta']::before { content: 'M'; }


.media.selected u {
    background-position: -2rem;
    padding-left: 0.75rem;
    background-color: var(--cryptee-green);
    filter: saturate(1);
}

body:not(.nav-favorites) .media b { 

    text-decoration: none;
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    z-index: 2;

    font-size: 1.5rem;
    text-align: center;
    
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    width: 1rem;
    height: 1rem;
    color: transparent;
    background-color: transparent;

    font-size: 0.75rem;
    line-height: 1.175rem;
    
    transform: scale(0);
    transition: 0.3s color ease 1s, 0.3s transform var(--cryptee-cb) 1s;

}

body:not(.nav-favorites) .media b::before { content : "\ee0e"; }

/* show heart everywhere except in favorites, since we're already in favorites */
body:not(.nav-favorites) .media b[fav] {
    transform: scale(1);
    color: var(--cryptee-red) !important;
}

body[filter-fav-only]   .media:not([fav])  { display: none !important; }
body[filter-raw-only]   .media:not([raw])  { display: none !important; }
body[filter-video-only] .media:not(.video) { display: none !important; }


/* -----------------------------
-------------------------------- 
 
ALBUM 
 
--------------------------------
----------------------------- */

.album {
    
    float: left;    
    width: 36rem;
    height: 20rem;
    margin: 0 0 4rem 4rem;

    background-color: #141414;
    position: relative;
    cursor: pointer;
    user-select: none;

    overflow: hidden;

    border-radius: 1.125rem;

}

#favorites { 
    width: 76rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}

.album img {
    width: 36rem;
    height: 20rem;
}

#favorites img { 
    min-width: 4rem;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    transition: 1s flex-grow ease, 1s opacity ease;
}

/* album name */
.album::after {
    content: attr(name);
    text-transform: uppercase;
    user-select: none;

    position: absolute;
    bottom: 0rem;
    left: 0rem;

    width: 100%;
    height: 6rem;
    padding: 2rem 7.5rem 0 1.5rem;

    color: #fff;
    
    /* EQUIVALENT OF BOLD P */
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 4.25rem;
    
    box-sizing: border-box;

    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    white-space: nowrap;

    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
    transition: 0.5s width var(--cryptee-cb);
}

/* album date */
.album::before {
    content: attr(date);
    user-select: none;

    z-index: 2;
    position: absolute;
    bottom: 0rem;
    right: 0rem;
    
    width: 100%;
    height: 4rem;
    padding: 0 1.5rem; 
    
    line-height: 4.25rem;
    font-weight: 350;
    font-size: 0.85rem;
    letter-spacing: 0.1rem;
    
    box-sizing: border-box;
    text-align: right;
    color: #fff;

    transition: 0.5s padding var(--cryptee-cb), 0.15s color var(--cryptee-cb);
}

.album i {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;

    width: 4rem;
    height: 4rem;
    line-height: 4rem;

    font-size: 1.25rem;
    text-align: center;

    transform: translate3d(3rem,0,0);
    transition: 0.15s opacity var(--cryptee-cb), 0.5s transform var(--cryptee-cb);
    
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    opacity: 0;
    color: #FFF;
}

.album i::before {
    content: "\EF76";
}

#favorites i {
    pointer-events: none !important;
    right: unset;
    left: 0;
}

#favorites i::before {
    content: '\ee0e';
}

#favorites::after {
    padding-left: 4rem;
}


/* -----------------------------
-------------------------------- 
 
ALBUM DROPDOWN 
 
--------------------------------
----------------------------- */

.album .dropdown {
    position: absolute;
    top: 0;
    right: 4rem;
    width: 12rem;
    height: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.album .dropdown button {
    display: block;
    width: 100%;

    opacity: 0.5;
    transition: 0.3s opacity var(--cryptee-cb);
}

.dm .album .dropdown button:not(.red) {
    color: white;
}

.album .dropdown:not(.show) button {
    pointer-events: none;
    opacity: 0;
}




/* .album .dropdown button:nth-child(4) { transition-delay: 0.s; } */
.album .dropdown button:nth-child(1) { transition-delay: 0s; }
.album .dropdown button:nth-child(2) { transition-delay: 0.05s; }
.album .dropdown button:nth-child(3) { transition-delay: 0.10s; }

/* -----------------------------
-------------------------------- 
 
ALBUM CONTENTS VIEW 
 
--------------------------------
----------------------------- */

#albumheader {
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-left: 4rem;
    width: calc(100% - 4rem);
    user-select: none;
}

#albumheader .name { color: #000; }
.dm #albumheader .name { color: #FFF; }

#albumheader hr {
    border: none;
    border-top: 0.125rem solid var(--bg);
    min-width: 16rem;
    max-width: 36rem;
    margin-top: 1rem;
    width: 100%;
}

.dm #albumheader hr {
    border-top: 0.125rem solid var(--bg);
}

#albumheader .date {
    background-color: #000;
    color: #fff;
    /* width: 7rem; */
    width: 11.25rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    padding: 0;
    margin: 2rem 1rem 0 0;
}

#albumheader .date[exif="0000:00:00"] {
    display: none !important;
}

.dm #albumheader .date {
    background-color: #fff;
    color: #000;
}

#albumheader .name, 
.searchheader .title {
    text-transform: uppercase;
}

#albumheader .name::after {
    opacity: 0;
    
    transition: 0.3s opacity ease;
    font-size: 1rem;
    
    content: "\EFE0";
    
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: auto;
}

#albumheader button {
    background-color: #000;
    color: #FFF;
    height: 3rem;
    width: 3rem;
    line-height: 3rem;
    border-radius: 1.5rem;
    text-align: center;
    margin: 2rem 1rem 0 0;
}

#albumheader button i {
    margin-top: 0;
    font-size: 1.25rem;
    width: 3rem;
}

.dm #albumheader button {
    background-color: #FFF;
    color: #000;
}

/* SHOW A HEART FOR FAVORITES */
.nav-favorites #albumheader h2::after {
    
    opacity: 1;

    display:  inline;

    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
       
    content : "\ee0e"; 

    font-size: 1.65rem;
    line-height: 3rem;
    float: right;

    color: var(--cryptee-red);
    opacity: 0.5;
}

.nav-favorites #albumheader hr { 
    max-width: 100% !important; 
    border-top: 0.125rem solid var(--cryptee-red) !important;
    opacity: 0.5 !important;
}

.nav-favorites #albumheader button {
    display: none !important;
}

.nav-favorites #albumheader .date {
    display: none !important;
}

/* -----------------------------
-------------------------------- 
 
SEARCH 
 
--------------------------------
----------------------------- */

.searchheader {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    margin-left: 4rem;
    width: calc(100% - 4rem);
    user-select: none;
    clear: both;
}

.searchheader .title {
    color: var(--cryptee-1);
    padding: 1.25rem 0 1rem 0;
    width: 100%;
    text-transform: uppercase;

    border-top: 2px solid var(--cryptee-3);
    border-bottom: 2px solid var(--cryptee-3);
}

.dm .searchheader .title {
    color: var(--cryptee-4);
    border-top: none;
    border-bottom: 2px solid var(--cryptee-1);
}

#searchContents .album::before {
    content: attr(photos);
    color: var(--cryptee-3);
    padding: 0 1rem;
}

#searchContents .album::after {
    padding: 2rem 1.5rem 0 1.5rem
}

#searchContents .album i {
    display: none !important;
}

#searchContents::after {
    content: "";
    font-family: 'Josefin Sans';
    font-size: 16px;
    font-weight: 350;

    margin-left: 4rem;
    margin-top: 4rem;
    display: inline-block;
    width: calc(100% - 4rem);

    opacity: 0;
    transition: 0.5s opacity ease;
    
}

body:not(.loading) #searchContents:not(.loading)::after {
    content: "it seems you've reached the end of search results";
    opacity: 1;
}

body:not(.loading) #searchContents:not(.loading):empty::after {
    content: "looks like there aren't any results for '" attr(term) "'";
    opacity: 1;
}

body.searching:not(.loading) #albumContents {
    height: 100%;
    overflow: hidden;
}

/* -----------------------------
-------------------------------- 
 
LIGHTBOX 
 
--------------------------------
----------------------------- */

#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cryptee-0);
    z-index: 9;
    transition: 0.5s opacity var(--cryptee-cb);
    
    opacity: 0;
    pointer-events: none;

    display: grid;
    grid-template-columns: 4rem 4rem 4rem 1fr 4rem 4rem 4rem 1fr 4rem 4rem 4rem;
    grid-template-rows: 4rem 1fr 4rem;

    will-change: opacity;
}

#lightbox.show {
    opacity: 1;
    pointer-events: all;
}

.lightbox-button, .lightbox-player-button {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    margin-top: 0;
    text-align: center;
    color: #FFF;
    z-index: 12;
    grid-row: 1 / 2;
    opacity: 0.7;
    transition: 0.3s opacity linear;
}

.lightbox-player-button { line-height: 4.25rem; }

#lightbox-player-controls {
    transform: translateY(0);
    transition-duration: 1s;
    transition-property: transform, opacity;
    transition-timing-function: var(--cryptee-cb);

    display: grid;
    grid-template-columns: 4rem 4rem 1fr;
    grid-template-rows: 4rem;

    background-color: var(--cryptee-0);
    grid-column: 1/-1;
    grid-row: -2/-1; 
    z-index: 12;
}

#lightbox-player-progress {
    grid-column: 3/-1;
    grid-row: 1/2; 
    padding: 0.5rem 1.5rem 0.5rem 1rem;
    z-index: 12;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 8px; /* intentionally fixed px, and not rem, for calculations */
}

#lightbox-playpause.playing i::before { content: "\EFD7"; }
#lightbox-volume.muted i::before { 
    content: "\F29D";
    color: var(--cryptee-yellow);
}

#lightbox-close      { grid-column: 1/2; }
#lightbox-fullscreen { grid-column: 2/3; }

#lightbox-info       { grid-column: 5/6; }
#lightbox-favorite   { grid-column: 6/7; }
#lightbox-download,
#lightbox-open-in    { grid-column: 7/8; }

#lightbox-previous   { grid-column: -3/-2;}
#lightbox-next       { grid-column: -2/-1;}


#lightbox-previous.disabled,
#lightbox-next.disabled {
    opacity: 0 !important;
    pointer-events: none !important;
}

#lightbox-favorite i::before {
    content: "\ee0f";
}

#lightbox-favorite.fav i::before {
    content: "\ee0e";
}

#lightbox-favorite i {
    transform: scale(1);
    color: white;

    transition: 0.3s transform var(--cryptee-cb), 0.3s color var(--cryptee-cb);
}

#lightbox-favorite.fav i {
    transform: scale(1.3);
    color: var(--cryptee-red);
}

#lightbox-swipe-container {
    grid-row: 2 / -1;
    grid-column: 1 / -1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 11;
    background-color: var(--oled-safe-black);
}

.swiper-video-container::before,
.swiper-zoom-container::before {
    content: "";
    background: linear-gradient(10deg, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0) 55%);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20rem;
    z-index: 2;

    opacity: 0;
    pointer-events: none !important;
    transition: 1s opacity ease;
}

.swiper-slide-active:not(.swiper-slide-zoomed) .swiper-zoom-container[description]:not([description=""])::before,
.swiper-slide-active:not(.swiper-slide-zoomed) .swiper-video-container[description]:not([description=""])::before {
    opacity: 1;
}

.swiper-video-container::after,
.swiper-zoom-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16rem;
    z-index: 2;
    
    opacity: 0;
    pointer-events: none !important;
    transition: 1s opacity ease;
    
    color: #FFF;
    text-align: left;
    padding: 0 50% 4rem 4rem;
    box-sizing: border-box;
    
    display: flex;
    align-self: flex-end;
    align-content: flex-end;
    justify-content: flex-start;
    align-items: flex-end;

    font-size: 1.25rem;
    font-weight: 350;
    line-height: 1.5rem;

    text-transform: lowercase;
}

.swiper-video-container::after { padding: 0 50% 5rem 1.75rem; }

.swiper-slide-active:not(.swiper-slide-zoomed) .swiper-video-container[description]:not([description=""])::after,
.swiper-slide-active:not(.swiper-slide-zoomed) .swiper-zoom-container[description]:not([description=""])::after  {
    content: attr(description);
    opacity: 1;
}

.swiper-slide-zoomed .swiper-video-container::before,
.swiper-slide-zoomed .swiper-video-container::after,
.swiper-slide-zoomed .swiper-zoom-container::before,
.swiper-slide-zoomed .swiper-zoom-container::after {
    display: none !important;
}


.lbox-photo {
    display: block;
    opacity: 1;
    transition: 0.3s opacity ease;
    will-change: opacity;
}

.lbox-video {
    display: block;
    opacity: 1;
    transition: 0.3s opacity ease;
    will-change: opacity;
    height: calc(100% - 4rem);
    width: 100%;
}

.lbox-photo[src=""] { opacity: 0; }
/* .lbox-video:not(.loaded) { opacity: 0; } */

.lightbox-wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
}

.swiper-slide div {
    height: 100%;
}


#lightbox-progress { 
    z-index: 13;
    opacity: 0.4;
}

#popup-album-info input {
    color: white;
    text-transform: uppercase;
    width: 100%;
}

#popup-photo-info input::-webkit-calendar-picker-indicator, 
#popup-album-info input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

#popup-photo-info progress,
#popup-album-info progress {
    opacity: 1;
}

#popup-photo-info input, 
#popup-photo-info textarea {
    color: white;
    text-transform: lowercase;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

#popup-photo-info textarea {
    height: 4rem;
    min-height: 4rem;
    max-height: 4rem;
}

#popup-photo-info p {
    line-height: 1.5rem;
    font-size: 14px;
    font-weight: 300;
    overflow-wrap: break-word;
} 

body[env] #popup-photo-info .photoid,
body[env] #popup-album-info .albumid {
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 300;
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    user-select: all;
}

#popup-photo-info[pid^="v-"] b.h3::before { content: "VIDEO INFO"; }
#popup-photo-info[pid^="p-"] b.h3::before { content: "PHOTO INFO"; }


#lightbox-exif-container {
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    height: 3rem;
    width: calc(100% - 0.5rem);
    z-index: 12;
}

#lightbox-exif-container u {
    text-decoration: none;
    
    margin: 0.5rem 0 0 0.5rem;
    width: auto;
    height: 1rem;

    display: inline-block;

    background-color: var(--cryptee-0);
    color: #666;
    padding: 1rem ;
    font-size: 0.75rem;
    line-height: 1rem;
    border-radius: 1rem;
    overflow: hidden;

    transition: 0.3s all ease;

    user-select: none;

    transform: translateX(-1rem);
    opacity: 0;
}

#lightbox.raw #lightbox-exif-container u {
    transform: translateX(0);
    opacity: 1;
}

#lightbox-exif-container u span:not(#lightbox-exif-maker-logo) {
    line-height: 1.25rem;
    padding: 0 1rem;
    display: inline-block;
    color: #fff;
}

#lightbox-exif-container u span:last-child {
    padding-right: 0.5rem !important;
}

#lightbox-exif-maker-logo {
    float: left;
    height: 1rem;
    width: 1rem;
    margin-right: 0.5rem;
    background-repeat: no-repeat;
    background-size : 1rem;
    background-position : left;
    transition: 0.3s background-position ease;
}

#lightbox-exif-maker-logo[maker='leica'] {
    background-color: "#ED1C24";
    /* background-image: url('../imgs/other-logos/leica.svg');     */
}

#lightbox-exif-maker-logo[mono] { filter: saturate(0); }

#lightbox-exif-maker-logo[maker='hasselblad'] {
    /* background-color: "#ED1C24"; */
    /* background-image: url('../imgs/other-logos/hasselblad.svg'); */
}

#lightbox-exif-maker-logo:not([maker]) { display: none !important; }

/* -----------------------------
-------------------------------- 

LIGHTBOX STATES 

--------------------------------
----------------------------- */

/* LOADING */
#lightbox-progress:not([value][max]) ~ .lightbox-button.hidden-while-loading {
    pointer-events: none !important;
    opacity: 0.15;
}

/* VIDEO PLAYER BUTTONS */
#lightbox-progress:not([value][max]) ~ #lightbox-player-controls,
#lightbox:not(.video) #lightbox-progress[value][max] ~ #lightbox-player-controls {
    pointer-events: none !important;
    transform: translateY(4rem) !important;
}


/* -----------------------------
-------------------------------- 
 
UPGRADE TEXT 
 
--------------------------------
----------------------------- */

#upgrade {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    text-align: left;
    margin-top: 0;
    transition: 0.3s opacity var(--cryptee-cb);
    user-select: none;
    cursor: pointer;
    z-index: 4;
    line-height: 2.25rem;
    padding-left: 0.5rem;
}

body[plan='gift'] #upgrade { display: none !important; }


/* -----------------------------
-------------------------------- 
 
DOWNLOADS 
 
--------------------------------
----------------------------- */

body.downloading #download-button {
    text-decoration: underline;
    opacity: 0.1 !important;
    pointer-events: none !important;    
}

#start-downloads-button {
    opacity: 1;
    transition: 0.3s opacity ease;
}

#start-downloads-button.downloading {
    opacity: 0.3;
    pointer-events: none;
}

#photos-downloader {
    width: 18rem;
    height: 18rem;
    border-radius: 1.125rem;
    background-color: #121212;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 999;
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.2);

    padding: 2rem 1rem 0 1rem;
    box-sizing: border-box;

    transform: translateY(0);
    opacity: 1;

    transition: 0.3s opacity ease, 0.7s transform var(--cryptee-cb) 0.1s;
}

#photos-downloader:not(.show) {
    transform: translateY(20rem);
    opacity: 0;
    pointer-events: none !important;
}

#photos-downloader h4 {
    text-transform: uppercase;
    color: var(--cryptee-4);
    font-weight: 650;
    
    position: absolute;
    top: 1.75rem;
    left: 1.75rem;
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.5rem;
}

#photos-downloader h4::before {
    content : "DECRYPTING & DOWNLOADING";
}

#photos-downloader.done h4::before {
    content : "ALL SET!";
}

#photos-downloader small {
    position: absolute;
    bottom: 3.125rem;
    left: 1.75rem;
    margin: 0;
    margin-top: 0;
    color: var(--cryptee-2);
    opacity: 1;
    transition: 0.3s opacity ease;
}

#photos-downloader.done small {
    opacity: 0;
}

#photos-downloader p {
    position: absolute;
    color: var(--cryptee-2);
    top: 3rem;
    left: 1.75rem;
    opacity: 0;
    transition: 0.3s opacity ease;
}

#photos-downloader.done p {
    opacity: 1;
}

#button-cancel-photos-downloader {
    position: absolute;
    color: var(--cryptee-3);
    top: 5.5rem;
    left: 1.75rem;
    cursor: pointer;
    margin: 0;
    z-index: 2;

    transform: translateY(0);
    opacity: 1;

    transition-duration: 0.3s;
    transition-property: opacity, transform;
    transition-timing-function: ease;
}

#photos-downloader.done #button-cancel-photos-downloader {
    transform: translateY(1rem);
    opacity: 0;
    pointer-events: none !important;
}

#button-close-photos-downloader {
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    line-height: 2.125rem;
    text-align: center;

    position: absolute;
    color: var(--cryptee-3);
    top: 1.25rem;
    right: 1.25rem;
    cursor: pointer;
    margin: 0;
    z-index: 2;
    
    transform: scale(0.5);
    opacity: 0;

    transition-duration: 0.3s;
    transition-property: opacity, transform;
    transition-timing-function: ease;
}

#photos-downloader.done #button-close-photos-downloader {
    transform: scale(1.25);
    opacity: 1;
}


#button-save-multiple-downloads {
    
    background-color: #fff;
    opacity: 0;
    
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 6rem;
    text-align: center;
    line-height: 5.75rem;
    
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;

    transform: scale(0.2);

    transition: 1s transform var(--cryptee-cb) 0.1s, 1s opacity var(--cryptee-cb) 0.1s;

}

#photos-downloader.done #button-save-multiple-downloads {
    transform: scale(1);
    opacity: 1;
}

#photos-downloader:not(.done) #button-save-multiple-downloads {
    pointer-events: none !important;
}

#downloader-dots {
    position: absolute;
    top: 1.75rem;
    bottom: 1.75rem;
    right: 1.75rem;
}

@keyframes circle-opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

#photos-downloader circle {
    animation: circle-opacity 1s forwards infinite;
    transition: 1s opacity var(--cryptee-cb) 0.1s;
}

#downloader-dots circle:nth-child(1),
#downloader-dots circle:nth-child(8),
#downloader-dots circle:nth-child(9),
#downloader-dots circle:nth-child(11),
#downloader-dots circle:nth-child(12) {
  opacity: 0;
}

#downloader-dots circle:nth-child(2) { opacity: 0.1; }
#downloader-dots circle:nth-child(3) { opacity: 0.2; }
#downloader-dots circle:nth-child(4) { opacity: 0.3; }
#downloader-dots circle:nth-child(5) { opacity: 0.4; }
#downloader-dots circle:nth-child(6) { opacity: 0.5; }
#downloader-dots circle:nth-child(7) { opacity: 0.6; }

#downloader-dots circle:nth-child(13) { opacity: 0.8; }
#downloader-dots circle:nth-child(14) { opacity: 0.7; }
#downloader-dots circle:nth-child(15) { opacity: 0.6; }
#downloader-dots circle:nth-child(16) { opacity: 0.4; }
#downloader-dots circle:nth-child(17) { opacity: 0.3; }
#downloader-dots circle:nth-child(18) { opacity: 0.2; }
#downloader-dots circle:nth-child(19) { opacity: 0.1; }

#photos-downloader {
    --delay-increment: 0.05s;
}

#photos-downloader circle:nth-child(1)  { animation-delay: calc(var(--delay-increment) * 1); }
#photos-downloader circle:nth-child(2)  { animation-delay: calc(var(--delay-increment) * 2); }
#photos-downloader circle:nth-child(3)  { animation-delay: calc(var(--delay-increment) * 3); }
#photos-downloader circle:nth-child(4)  { animation-delay: calc(var(--delay-increment) * 4); }
#photos-downloader circle:nth-child(5)  { animation-delay: calc(var(--delay-increment) * 5); }
#photos-downloader circle:nth-child(6)  { animation-delay: calc(var(--delay-increment) * 6); }
#photos-downloader circle:nth-child(7)  { animation-delay: calc(var(--delay-increment) * 7); }
#photos-downloader circle:nth-child(8)  { animation-delay: calc(var(--delay-increment) * 8); }
#photos-downloader circle:nth-child(9)  { animation-delay: calc(var(--delay-increment) * 9); }
#photos-downloader circle:nth-child(10) { animation-delay: calc(var(--delay-increment) * 10); }
#photos-downloader circle:nth-child(11) { animation-delay: calc(var(--delay-increment) * 8); }
#photos-downloader circle:nth-child(12) { animation-delay: calc(var(--delay-increment) * 7); }
#photos-downloader circle:nth-child(13) { animation-delay: calc(var(--delay-increment) * 6); }
#photos-downloader circle:nth-child(14) { animation-delay: calc(var(--delay-increment) * 5); }
#photos-downloader circle:nth-child(15) { animation-delay: calc(var(--delay-increment) * 4); }
#photos-downloader circle:nth-child(16) { animation-delay: calc(var(--delay-increment) * 3); }
#photos-downloader circle:nth-child(17) { animation-delay: calc(var(--delay-increment) * 2); }
#photos-downloader circle:nth-child(18) { animation-delay: calc(var(--delay-increment) * 1); }
#photos-downloader circle:nth-child(19) { animation-delay: calc(var(--delay-increment) * 0); }

#photos-downloader circle.done { 
    animation: none;
    animation-iteration-count: 1;
}

#photos-downloader:not(.show) circle {
    animation: none !important;
}



/* -----------------------------
-------------------------------- 
 
MOVE MODAL OVERRIDES 
 
--------------------------------
----------------------------- */
/* #region MOVE MODAL OVERRIDES */

#modal-move { 
    grid-template-rows: auto auto 1.5rem 1fr 4rem;
}

#albums-for-moving {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
}

#albums-for-moving button::before { display: none; }

#albums-for-moving button {
    height: 4rem;
    background-color: var(--cryptee-folder);
    border-radius: 4rem;
    width: 100%;
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 4rem;
    grid-template-rows: 2rem 2rem;
}

#albums-for-moving button:first-child {
    margin-top: 0;
}

#albums-for-moving button img {
    grid-column: -2/-1;
    grid-row: 1/-1;
    width: 4rem;
    height: 4rem;
    border-radius: 4rem;
    opacity: 1;
    object-fit: cover;
    
    transition: 1s opacity ease;
    transition-delay: calc(var(--i) * 0.05s);
}

#albums-for-moving button:not(.loaded) img {
    opacity: 0;
}

#albums-for-moving button strong {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 900;
    padding: 1rem 0 0 1.5rem;
    width: calc(100% - 1.75rem);
    height: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#albums-for-moving button time {
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.25rem 0 0 1.5rem;
    color: var(--cryptee-2);
}

#albums-for-moving button.selected {
    background-color: #FFF;
    color: #000;
}

#albums-for-moving button.selected::after {
    content: " \eb7a";

    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    color: #000;

    grid-column: -2/-1;
    grid-row: 1/2;
    text-align: center;
    line-height: 4rem;
    font-size: 1.5rem;
    background-color: rgba(255,255,255,0.75);
    border-radius: 4rem;
}


/* #endregion MOVE MODAL OVERRIDES */
/* -----------------------------
-------------------------------- 
 
PANELS / TAGS 
 
--------------------------------
----------------------------- */


.panel {
    position: fixed;
    margin: auto;
    z-index: 9;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    
    height: 26rem;
    width: 100%;
    max-width: 20rem;
    min-width: calc(320px - 5rem);
    
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #121212;
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.2);

    display: grid;
    grid-template-rows: 3rem 10rem 8rem 5rem;
    grid-template-columns: 1fr 1fr;

    color: white;
    padding-top: 2rem;

    transform: translate3d(0, 0, 0);
    opacity: 1;
    
    transition-duration: 0.3s;
    transition-property: opacity, transform;
    transition-timing-function: var(--cryptee-cb);
}

.panel:not(.show) {
    pointer-events: none !important;
    transform: translate3d(0,2rem,0) !important;
    opacity: 0 !important;
}

.panel h2,
.panel p {
    grid-column: span 2;
    padding: 0 2rem;
}

.panel div {
    grid-column: span 2;
    position: relative;
}

.panel textarea {
    width: calc(100% - 4rem);
    min-width: calc(100% - 4rem);
    max-width: calc(100% - 4rem);

    height: calc(100% - 4rem);      /* padding top / bottom 2rem */
    min-height: calc(100% - 4rem);  /* padding top / bottom 2rem */
    max-height: calc(100% - 4rem);  /* padding top / bottom 2rem */

    margin-top: 0;
    resize: none;
    color: transparent;
    caret-color: #FFF;
    background-color: transparent;
    text-transform: lowercase;

    border-top: 2px solid #FFF;
    font-weight: 350;
    padding: 2rem;
    overflow: hidden;

    transition: 0.3s box-shadow ease, 0.3s background-color ease;
}

.panel textarea:focus {
    box-shadow: inset 0px -1px 0px #FFF;
    background-color: #242424;
}

.panel #tags-highlighter {
    width: calc(100% - 4rem);
    min-width: calc(100% - 4rem);
    max-width: calc(100% - 4rem);

    height: calc(100% - 4rem);      /* padding top / bottom 2rem */
    min-height: calc(100% - 4rem);  /* padding top / bottom 2rem */
    max-height: calc(100% - 4rem);  /* padding top / bottom 2rem */

    border-top: 1px solid transparent;
    font-weight: 350;
    line-height: 1.5rem;
    padding: 2rem;
    
    text-transform: lowercase;
    white-space: pre-wrap;
    
    color: var(--cryptee-yellow);
    pointer-events: none !important;

    position: absolute;
}

#tags-highlighter i { color: white; font-style: normal; }

#progress-tagging-photos { 
    opacity: 1; 
    margin-top: -0.25rem;
}

.panel button {
    margin-top: 0;
    padding: 0 2rem;
    line-height: 5rem;
    height: 5rem;

    background-color: transparent;
    color: white;
    transition: 0.3s background-color ease, 0.3s color ease;
}

.panel button:last-child { 
    text-align: right; 
}

#photos-tags-input[disabled] {
    box-shadow: none !important;
}

#tags-highlighter.loading {
    background-color: #242424;
}

#tags-highlighter.loading::before {
    color: #FFF;
    content: "decrypting tags ...";
}

/* -----------------------------
-------------------------------- 
 
MOVE 
 
--------------------------------
----------------------------- */


button.bold.radio[group="move"] {
    padding: 0.25rem 0;
}

button.radio[disabled] {
    opacity: 0.5;
}



/* -----------------------------
-------------------------------- 
 
VIDEO PLAYER PROGRESS 
 
--------------------------------
----------------------------- */

#lightbox-player-progress b {
    width: 16px; /* intentionally fixed px, and not rem, for calculations */
    height: 16px; /* intentionally fixed px, and not rem, for calculations */
    margin: 1rem 0;
    background-color: #242424;
    border-radius: 16px;
    opacity: 1;

    transition-duration: 1s;
    transition-property: transform, background-color, opacity;
    transition-timing-function: linear;
    transform: translateY(0) scale(1);

    cursor: pointer;
}

#lightbox-player-progress:not([time]) b { transform: translateY(3rem) scale(1); pointer-events: none !important; }
#lightbox-player-progress[time] b.played { background-color: #FFF; }
#lightbox-player-progress[time] b.played + b:not(.played) { background-color: #444; }

/* -----------------------------
-------------------------------- 
 
ENVIRONMENT SPECIFIC RULES 
.. i.e. in beta, we show more info in doc panels

--------------------------------
----------------------------- */

body:not([env]) .is-hidden-on-live-env { display: none !important; }
.popup:not(.show) .is-hidden-on-live-env {user-select: none !important; -webkit-user-select: none !important;}



/* -----------------------------
-------------------------------- 
 
IT'S A POINTER DEVICE,
ENABLE HOVERS 
 
--------------------------------
----------------------------- */

@media (-moz-touch-enabled: 0), (pointer:fine) { 

    #logo:hover, 
    #help:hover,
    nav button:hover,
    nav .top.buttons button:hover,
    nav .bottom.buttons:not(.selected) button:hover,
    .album .dropdown button:hover {
        opacity: 1 !important;
    }

    #action-button:hover {
        transform: scale(1.125);
    }

    #gallery-button i:hover {
        transform: scale(1.125);
    }

    body:has(#actions.shown) #action-button:hover,
    #actions label:hover i {
        background-color: #FFF;
        color: #000;
    }

    body:has(#actions.shown) #action-button:hover i {
        color: #000;
    }

    #searchInput:not(:focus):hover ~ .progress { opacity: 0.4; }

    #timeline small:hover           { opacity: 1; }
    #timeline small.sub:hover       { transform: translateX(1.5rem); }
    #timeline small:not(.sub):hover { transform: translateX(0.5rem); }

    main:not(.scrolling):not(.browsing) .media:not(.selected):not(.loading):hover i   { 
        opacity:1; 
    }
    
    main:not(.scrolling):not(.browsing) .album:hover i                                { 
        opacity:1; 
        transform: translate3d(0,0,0);
    }

    #favorites i {
        opacity: 1;
        transform: translate3d(0,0,0);
    }

    #favorites img:hover {
        flex-grow: 1.5;
    }

    main:not(.scrolling):not(.browsing) .album:hover::before                          { 
        padding: 0 3rem 0 1rem;
        color: transparent;
    }

    #sorter i:hover { opacity:1; }
    #lightbox button:hover { opacity:1; }
    
    .panel button:hover { background-color: var(--cryptee-green); }
    .panel button:last-child:hover { background-color: var(--cryptee-yellow); color: #000; }
    #add-tags-button.loading + button:hover {
        color: var(--cryptee-yellow);
        background-color: transparent;
    }

    #lightbox-player-progress b:hover { transform: scale(1.2); background-color: var(--cryptee-3); }

    .media.video:hover::after {
        opacity: 1;
        transform: scale(1);
    }

    #download-size-picker i:first-child:hover {
        transform: scale(1.5);
    }

    #photos-downloader.done #button-close-photos-downloader:hover {
        transform: scale(1.5);
    }

    #photos-downloader.done #button-save-multiple-downloads:hover {
        transform: scale(1.1);
    }

    #albumheader .date { width: 10.75rem; }
}

@media (-moz-touch-enabled : 1), (pointer:coarse) {
    #timeline small:not(.sub)        { transform: translateX(0rem); }
    #timeline small.sub              { transform: translateX(2rem); }
    
    #timeline small.sub.active       { transform: translateX(0.5rem); }
    #timeline small:not(.sub).active { transform: translateX(0rem); }

    #timeline.compact small:not(.sub) { transform: translateX(0.5rem); }

    .media i { 
        opacity:1 !important; 
        transform: scale(0.75) !important; 
        top: 0.5rem;
        right: 0.5rem;
    }

    .album i {
        opacity: 1;
        font-size: 1.25rem;
        height: 3.75rem;
        line-height: 3.5rem;
        transform: translate3d(0,0,0);
    }
    
    .album i::before {
        content: "\EF76";
    }

    .album::before {
        padding: 0 4rem 0 1rem;
    }

    .album::after {
        padding: 2rem 9rem 0 1.5rem
    }

    #favorites::after {
        padding: 2rem 1.5rem 0 4rem
    }
    .album .dropdown.show ~ i {
        transform: rotate(135deg);
    }
}



/* -----------------------------
-------------------------------- 
 
MEDIA QUERIES 
 
--------------------------------
----------------------------- */
@media (min-width:1024px) and (max-width : 1343px) {
    .album, .album img { width: 26rem; }
    .album::after { 
        padding: 2rem 8.5rem 0 1.5rem;
    }

    #favorites { width: 56rem; }
}

@media (max-width : 1023px) {
    .swiper-zoom-container::after { padding: 0 4rem 4rem 4rem; }
    #favorites { width: 36rem; }
}

@media (max-width : 703px) { 
    main {
        grid-template-columns: minmax(4rem, 1fr) minmax(4rem, 1fr) minmax(4rem, 1fr) minmax(4rem, 1fr);
        column-gap: 0;
        padding-top: 4.125rem;
        height: calc(100% - 4.125rem);
    }

    .nav-gallery main #albumContents { max-width: calc(100% - 4rem);}

    .contents { 
        margin-left: 0;
        grid-column: 1/-1;
    }

    .album { 
        width: calc(100% - 2rem); 
        margin: 1rem 1rem 0 1rem;
    }

    #favorites { width: calc(100% - 2rem); }

    .media { 
        width: calc(25vw - 1.25rem); 
        height: calc(25vw - 1.25rem); 
        margin: 1rem 0 0 1rem;
    }

    nav .buttons button { width: 100%; }
    nav .left-side { grid-column: 1/3; }
    nav .right-side { grid-column: 3/-1; }

    .album img { width: 100%; height: 20rem; }
    
    .album::after { width: 100%; }

    .album .dropdown {
        height: 10.5rem;
        width: calc(50% - 5.5rem);
    }

    #albumheader, .searchheader {
        margin-left: 0;
        width: 100%;
    }

    #albumheader h2, .searchheader h2 {
        /* h3 equivalent */
        font-size: 1.325rem;
        line-height: 2rem;          
        letter-spacing: 0.125rem;
        padding: 0 1rem;  
        width: calc(100% - 2rem); 
    }

    .nav-favorites #albumheader h2::after { 
        font-size: 1.325rem;
        line-height: 1.75rem;
    }

    #albumheader .date, 
    .searchheader .title {
        margin-left: 1rem;
    }

    #albumheader hr {
        width: 100%;
        max-width: 100%;
    }

    .searchheader .title {
        text-align: center;
        border: none;
        padding: 0 0 1rem 0;
    }

    #searchContents::after {
        margin-left: 1rem;
    }

    .searchheader {
        border-bottom: none;
        padding-top: 2rem;
        margin-bottom: 0;
    }
    
    #help,
    .nav-album #timeline { display: none !important; }
    
    #upgrade {
        background-color: var(--cryptee-4);
        bottom: 0;
        left: 0;
        width: calc(100% - 2.5rem);
        height: 2rem;
        padding: 1rem 1rem 1rem 1.5rem;
    }

    .dm #upgrade {
        background-color: var(--cryptee-0);
    }

    #sorter {
        margin: 1rem 1rem auto auto;
    }

    body:not(.loading) #albumContents:empty:not(.loading)::after {
        padding: 4rem 1rem;
    }

}

@media (max-width : 544px) {

    .album { height: 16rem; }
    .album img {height: 16rem; }
    .album::after, .album::before { font-size: 0.85rem; }

    #albumheader .date { 
        width: calc(50vw - 1.5rem); 
        margin-right: 0.75rem;
    }

    .media { 
        width: calc(50vw - 1.5rem); 
        height: calc(50vw - 1.5rem); 
    }

    .searchheader {
        border-bottom: none;
        padding-top: 2rem;
    }

    .album { grid-column: span 2; grid-row: span 1; }
    
    .album .dropdown {
        height: 6.5rem;
    }

    #lightbox {
        grid-template-columns: 4rem 4rem 1fr 4rem 4rem 4rem;
    }

    #lightbox-close      { grid-column: 1/2; }
    
    #lightbox-favorite   { grid-column: -3/-2; }
    #lightbox-info       { grid-column: -4/-3; }
    #lightbox-download,
    #lightbox-open-in    { grid-column: -2/-1; }

    #sorter small, #sorter i { max-width: 3rem; min-width: 3rem; }
    #sorter { padding-left: 1.5rem; }

    .swiper-video-container::before,
    .swiper-zoom-container::before { 
        height: 12rem;
    }

    .swiper-zoom-container::after { 
        height: 8rem;
        font-size: 1rem;
        padding: 0 1.75rem 2rem 1.75rem; 
    }

    .swiper-video-container::after { 
        height: 8rem;
        font-size: 1rem;
        padding: 0 1.75rem 5rem 1.75rem;
    }

    #lightbox-exif-model, #lightbox-exif-model + b { display: none !important; }
    #lightbox-exif-container u span:not(#lightbox-exif-maker-logo) {
        padding: 0 0.5rem;
    }

}




/* -----------------------------
-------------------------------- 
 
VIEW TRANSITIONS 
 
--------------------------------
----------------------------- */
/* #region VIEW TRANSITIONS */

@supports (view-transition-name: none) {

    @view-transition { navigation: auto; }

    ::view-transition-group(root) {
        animation-duration: 0.5s;
        animation-timing-function: ease-out;
        animation-direction: normal;
    }
    
}

/* #endregion VIEW TRANSITIONS */
