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

html, body {
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
}

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

body               { background: linear-gradient(to right, #000 4rem, var(--cryptee-4) 4rem); }
.dm body            { background: linear-gradient(to right, var(--cryptee-0) 4rem, var(--oled-safe-black) 4rem); }
body.bubble        { background: linear-gradient(to right, #000 4rem, white 4rem); }
.dm body.bubble     { background: linear-gradient(to right, var(--cryptee-0) 4rem, var(--oled-safe-black) 4rem); }

html.overflowBG, 
body:not(.starting).overflowBG {
    background: linear-gradient(to right, #000 50%, var(--cryptee-4) 50%);
}

html.overflowBG, 
body.bubble:not(.starting).overflowBG {
    background: linear-gradient(to right, #000 50%, white 50%);
}

html.overflowBG, 
.dm body:not(.starting).overflowBG {
    background: linear-gradient(to right, var(--cryptee-0) 50%, var(--oled-safe-black) 50%);
}

html.dm { background: var(--oled-safe-black); }


.full {
    grid-column: 1 / -1;
}

.swiper-container {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: 0.5s opacity ease;
}

.swiper-wrapper {
    overscroll-behavior: none; 
}

.swiper-wrapper, .swiper-slide {
    will-change: transform;
}

#leftSlide {
    min-width: 320px;
    width: 320px;
    max-width: 320px;
    background-color: black;
    color: white;
    display: grid;
    grid-template-rows: repeat(4, 1rem) 1fr 1rem 2rem 1rem;
    grid-template-columns: repeat(auto-fill, 1rem) 1rem 2rem 1rem;
    z-index: 2;

    opacity: 1;
    transition: 0.5s opacity ease, 0.5s background-color ease;
}

#rightSlide {
    background-color: var(--cryptee-4);
    min-width: calc(320px - 4rem);
    max-width: calc(100% - 4rem);
    overflow: hidden;
    width: 100%;
    display: grid;

    grid-template-rows: 1rem 2rem 1rem 1fr 1rem 2rem 1rem;
    grid-template-columns: 1fr 1rem 2rem 1rem;
    z-index: 1;
}

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

.dm #rightSlide {
    background-color: var(--oled-safe-black);
}

body.starting .swiper-container {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* starting circle */
body::after {
    content: "";
    position: absolute;
    top: 1rem;
    left: 1rem;
    height: 2rem;
    width: 2rem;
    margin: auto;
    z-index: 998;
    border-radius: 2rem;
    background-color: rgba(255,255,255,0);
    transition: 1s background-color ease;
    animation: blinkOpacity 0.75s infinite ease forwards;
    animation-play-state: paused;
    pointer-events: none !important;
}

body.starting::after {
    content: "";
    background-color: rgba(255,255,255,1);
    animation-play-state: running;
}

body.starting::before {
    content: attr(msg);
    position: absolute;
    top: 1.5rem;
    left: 5rem;
    z-index: 998;
    pointer-events: none !important;
    font-weight: 350;;
    color: black;
}

.dm body.starting::before {
    color: white;
}








/* -----------------------------
-------------------------------- 
 
LEFT MENU 
 
--------------------------------
----------------------------- */


#leftSlide button i {
    margin-top: 0;
    color: white;
}

#leftSlide button {
    padding-top: 0;
    margin-top: 0;
}

#logo {
    width: 100%;
    height: 100%;
    grid-row: 2 / 4;
    grid-column: 18 / 19;

    opacity: 0.5;
    transition: 0.3s opacity ease, 0.5s filter ease;
}

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








/*  PIN & UPGRADE */

#sliderCaret {
    position: relative;
    text-align: center;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    padding-top: 0;
    margin-top: 0;
    grid-row: 7 / 8;
    grid-column: 18 / 19;

    opacity: 0.5;
    transition: 0.3s opacity ease;
    will-change: opacity;
}

#sliderCaret i {
    transform: scale(1.25);
    transition: 0.3s transform ease;
}

#upgrade {
    padding-top: 0;
    margin-top: 0;
    grid-row: 7 / 8;
    grid-column: 2 / 17;
    user-select: none;
    cursor: pointer;
    line-height: 2.25rem;
}

#upgrade #storageLeft + span {
    color: var(--cryptee-green);
}

#upgrade span:last-child {
    color: var(--cryptee-3);
}

#upgrade.loading {
    pointer-events: none !important;
}

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


/* OFFLINE BADGE */

#offline-badge {
    padding-top: 0;
    margin-top: 0;
    grid-row: 7 / 8;
    grid-column: 2 / 17;
    user-select: none;
    cursor: pointer;
}



/* MOVE & SELECTIONS / ACTION FLOATER */

.actionFloater {
    grid-column: 1 / 20;
    z-index: 4;
    
    background-color: var(--cryptee-1);
    color: white;
    display: flex;
    padding-right: 0.5rem;
    position: relative;

    transform: translateY(0);
    transition-timing-function: var(--cryptee-cb);
    transition-property: transform, background-color;
    transition-duration: 0.5s;

    user-select: none;
}

.actionFloater i {
    line-height: 3rem;
    min-height: 3rem;
    min-width: 3rem;
    text-align: center;
}

.actionFloater i:last-of-type {
    font-size: 1.25rem;
    opacity: 0.5;
    transition: 0.3s opacity ease;
}

.actionFloater p, 
.actionFloater small {
    display: inline;
    flex-grow: 1;
    user-select: none;
    margin-top: 0;
}

.actionFloater p {
    line-height: 3rem;
}

.actionFloater small {
    min-width: 10rem;
    padding-left: 1rem;
    margin-top: 1rem;
    opacity: 1;
    transition-duration: 0.3s;
    transition-property: opacity;
    transition-timing-function: var(--cryptee-cb);
}

.actionFloater progress {
    position: absolute;
    height: 1px;
    top: -1px;
    left: 0;
}

.swiper-slide:not(.activeSlide) .actionFloater {
    pointer-events: none !important;
}

/* MOVE */

#moveFloat { grid-row: 6 / 9; }

#moveFloat button {
    height: 4rem;
    margin: 0;
    min-width: 4.325rem;
    text-align: center;
    background-color: var(--cryptee-green);
    transition-duration: 0.5s;
    transition-property: background-color, min-width;
    transition-timing-function: var(--cryptee-cb);
}

#moveFloat button::before {
    content: "move here";
}

#moveFloat i {
    line-height: 4rem;
    min-height: 4rem;
    cursor: pointer;
}

.swiper-slide:not(.activeSlide) #moveFloat,
#moveFloat:not(.show) {
    transform: translateY(calc(4rem + 3px));
    pointer-events: none !important;
}

#moveFloat.moving small {
    opacity: 0;
}

#moveFloat.moving {
    pointer-events: none !important;
}

#moveFloat.moving i {
    opacity: 0;
}

#moveFloat.moving button {
    min-width: 20rem;
    pointer-events: none !important;
    background-color: var(--cryptee-1) !important;
}

#moveFloat.moving button::before {
    content: "moving...";
}

/* SELECTIONS */

#selectionsFloat { 
    grid-row: 1 / 4; 
    border-bottom: 1px solid white;
    cursor: pointer;
}

.swiper-slide:not(.activeSlide) #selectionsFloat,
#selectionsFloat:not(.show) {
    transform: translateY(calc(-3rem - 3px));
}

#selectionsFloat i:first-of-type {
    font-size: 1rem;
    transform: scale(1);
    transition: 0.3s transform var(--cryptee-cb);
}

#selections-size {
    float: right;
    display: block;
    background-color: #484848;
    color: var(--cryptee-3);

    width: 5rem;
    height: 1.5rem;
    line-height: 1.5rem;

    overflow: hidden;
    text-align: center;
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;

    margin-top: 0.75rem;
    border-radius: 1.5rem;

    pointer-events: none;
    z-index: 2;

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

#selections-size:empty {
    width: 1.5rem;
    opacity: 0.5;
}

#selections-size:empty::before {
    font-family: remixicon !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    content: "\EEC7";
    animation: spin 0.5s linear infinite;
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;

    margin-top: -0.125rem;
    vertical-align: middle;
    font-style: normal;
    color: #FFF;
}

/* kill animations if modal isn't visible */

.swiper-slide:not(.activeSlide) #selectionsFloat #selections-size:empty::before,
#selectionsFloat:not(.show) #selections-size:empty::before {
    animation-play-state: paused;
}

.swiper-slide.activeSlide #selectionsFloat.show #selections-size:empty::before,
#selectionsFloat.show #selections-size:empty::before {
    animation-play-state: running;
}


/* -----------------------------
-------------------------------- 
 
AUTOCOMPLETE TRAP 

this is a sad new addition to our left-panel to combat overly-eager browser autocomplete autofills.
some browsers and bad pass manager extensions try to autofill the search input with emails, usernames, passwords etc
which results in the search activating and hiding the left panel. 

to solve this, we're adding in a hidden trap input which captures autocompleted stuff, and hopefully should prevent issues like this from happening.

--------------------------------
----------------------------- */
/* #region AUTOCOMPLETE TRAP */

#email-autocomplete-trap {
    grid-column: 2 / -1;
    grid-row: 1 / 2;
    transform: translateY(-3rem);
    opacity: 0;
    pointer-events: none;
}

/* #endregion AUTOCOMPLETE TRAP */

/* SEARCH */

#searchInput {
    padding-left: 0;  
    padding-top: 0;

    grid-column: 2 / 17;
    grid-row: 2 / 4;
    z-index: 3;

    height: 2rem;
    line-height: 2rem;
    
    margin-top: 0;
    will-change: transform;
    opacity: 1;
}

#searchTips, #searchClear {
    grid-column: 16 / 17;
    grid-row: 2 / 4;
    z-index: 4;
    margin: 0;
    
    height: 2rem;
    line-height: 2rem;
    
    text-align: center;

    will-change: opacity;
    opacity: 0;
    transition: 0.3s opacity ease;
}

#searchTips i, #searchClear i {
    width: 1rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
}

#searchInput:placeholder-shown:focus ~ #searchTips,
#searchInput:not(:placeholder-shown) ~ #searchClear {
    opacity: 0.7;
}

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

#searchTips.active { opacity: 1 !important; }

#tips-search .search, #tips-search .result {
    background-color: #eaeaea;
    font-weight: 350;
    border-radius: 3rem;
    padding: 0 0.5rem;
    line-height: 1.5rem;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

#tips-search .result {
    border-radius: 0;
    background-color: var(--cryptee-4);
}

#tips-search .results {
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: var(--cryptee-4);
}

#tips-search .result:not(:last-child) {
    border-bottom: 1px solid #e8e8e8;
}

#tips-search .search p, #tips-search .result p {
    display: inline-block;
    margin-top: 0;
    line-height: 2rem;
}

#tips-search .search i, #tips-search .result i {
    float: left;
    line-height: 2rem;
    width: 1.5rem;
    text-align: center;
    margin-right: 0.25rem;
}

#tips-search .search + .search {
    margin-top: 0.25rem;
}

#tips-search del {
    text-decoration: line-through;
}


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

#leftSlide input {
    color: white;
    box-shadow: none !important;
}

#leftSlide input:focus {
    -webkit-appearance: none;
    box-shadow: none !important;
}



/* SEARCH PROGRESS */

#searchProgress {
    grid-column: 2 / 17;
    grid-row: 4 / 5;
    z-index: 4;
    height: 1px;
    opacity: 0.3;
    transition: 0.3s opacity ease;
}

#searchInput:not(:placeholder-shown) ~ #searchProgress,
#searchInput:focus ~ #searchProgress {
    opacity: 1;
}




/* side buttons */

#explorerButtons {
    grid-row: 5 / 6;
    grid-column: 17 / 20;
    text-align: center;
    color: white;

    display: flex;
    flex-direction: column;
}

#explorerButtons button {
    text-align: center;
    display: block;
    width: 4rem;
    height: 3rem;
    line-height: 3rem;
    position: relative;
    user-select: none;
    outline: none;
    box-shadow: none;

    opacity: 0.5;
    transition: 0.3s opacity ease;
    will-change: opacity;
}

#explorerButtons i, 
#sliderCaret i {
    text-align: center;
}

#explorerButtons button.active {
    opacity: 1 !important;
}

#explorerButtons button::after, 
#sliderCaret::after {
    content: attr(alt);
    color: black;
    text-transform: lowercase;
    margin-top: 0.125rem;  
    font-size: 0.75rem;
    line-height: 2rem; 
    text-align: left;
    width: 8rem;
    position: absolute;
    left: 5.5rem;
    user-select: none;
    outline: none;
    box-shadow: none;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}

#sliderCaret::after {
    left: 4.5rem;
}

#explorerButtons button::after {
    line-height: 3rem; 
}

.dm #explorerButtons button::after, 
.dm #sliderCaret::after {
    color: white;
}

#explorerButtons .spacer {
    flex-grow: 1;
}

#leftListWrapper {
    grid-row: 4 / 7;
    grid-column: 1 / 17;
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, 16rem);
}


#leftListWrapper > div {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

    height: calc(100% - 1rem);
    width: 17rem;
    padding: 1rem 0 0 0 ;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    transition: 1s transform var(--cryptee-cb);
    
    scrollbar-width: none; /* to hide scrollbars in windows firefox */
    -ms-overflow-style:none; /* to hide scrollbars in windows / IE / Edge etc */
}

/* to hide scrollbars in windows */
#leftListWrapper > div::-webkit-scrollbar { display: none; }

.swiper-slide:not(.activeSlide) #leftListWrapper > div { 
    transition-duration: 0s; 
}

#leftListWrapper > div:not(#activeFolder) > *:last-child {
    margin-bottom: 1rem;
}

/* SEARCH */
#leftListWrapper[show="results"] > div { transform: translate3d(0,0,0); }
#leftListWrapper[show="results"] ~ #explorerButtons button {
    opacity: 0 !important;
    pointer-events: none !important;
}


/* RECENTS */
#leftListWrapper[show="recents"] > div { transform: translate3d(-16rem,0,0); }
#leftListWrapper[show="recents"] > div::after { height: 1rem; content: ''; } /* this acts as bottom spacer */

/* FOLDERS */
#leftListWrapper[show="folders"] > div { transform: translate3d(-32rem,0,0); }
#leftListWrapper[show="folders"] > div::after { height: 1rem; content: ''; } /* this acts as bottom spacer */


/* ACTIVE FOLDER */
#leftListWrapper[show="folder"] > div { transform: translate3d(-48rem,0,0); }


#leftListWrapper[show="results"] > div:not(#results)      { overflow: hidden; }
#leftListWrapper[show="recents"] > div:not(#recents)      { overflow: hidden; }
#leftListWrapper[show="folders"] > div:not(#folders)      { overflow: hidden; }
#leftListWrapper[show="folder"]  > div:not(#activeFolder) { overflow: hidden; }



/* RECENTS BUTTONS EXCEPTIONS */
.activeSlide #leftListWrapper[show="recents"] ~ #explorerButtons > #recentsButton { opacity: 1 !important; }

/* FOLDERS BUTTONS EXCEPTIONS*/
.activeSlide #leftListWrapper[show="folders"] ~ #explorerButtons > #foldersButton { opacity: 1 !important; }

/* if the sidebar is closed, and we have an active folder, change the folders button label */
#leftSlide:not(.activeSlide) #leftListWrapper[show="folder"] ~ #explorerButtons > #foldersButton::after {
    content: "current folder";
}


#leftListWrapper:not([show="folders"]) ~ #explorerButtons > #archiveButton,
#leftListWrapper:not([show="folders"]) ~ #explorerButtons > #summonButton { 
    pointer-events: none !important;
    opacity: 0 !important;
}



/* ACTIVE FOLDER BUTTONS EXCEPTIONS */
#leftListWrapper:not([show="folder"]) ~ #explorerButtons > #panel-button-sort,
#leftListWrapper:not([show="folder"]) ~ #explorerButtons > #uploadFileButton { 
    pointer-events: none !important;
    opacity: 0 !important;
}



/* NEW FOLDER BUTTON EXCEPTIONS */
/* new folder button should only show in folders / active folder */
#leftListWrapper:not([show^="folder"]) ~ #explorerButtons > #newFolderButton {
    pointer-events: none !important;
    opacity: 0 !important;
}





#leftListWrapper[show="folders"].show-archived ~ #explorerButtons > #archiveButton {
    opacity: 1 !important;
}

#uploadFileButton[disabled] {
    opacity: 0.25 !important;
    pointer-events: none !important;
}

#activeFolder::after {
    position: absolute;
    top:0;
    left: 0;
    
    content: "";
    font-weight: 350;
    user-select: none;
    
    margin-top: 5rem;
    margin-left: 1rem;
    
    opacity: 0;
    transition: 0.6s opacity var(--cryptee-cb);
}


.fader {
    z-index: 2;
    grid-row: 3 / 5;
    grid-column: 1 / 18;
    background: linear-gradient(to bottom, #000000 50%, rgba(0,0,0,0) 100%);
    will-change: transform;
}

.dm .fader {
    background: linear-gradient(to bottom, var(--cryptee-0) 50%, rgba(18,18,18,0) 100%);
}

.fader.inverted {
    grid-row: 6 / 7;
    background: linear-gradient(to top, #000000 50%, rgba(0,0,0,0) 100%);
}

.dm .fader.inverted {
    background: linear-gradient(to top, var(--cryptee-0) 50%, rgba(18,18,18,0) 100%);
}

#leftSlide.activeSlide #sliderCaret i::before {
    content: "\EA64";
}

#leftSlide:not(.activeSlide) #explorerButtons button {
    opacity: 0.5 !important;
}

#leftSlide:not(.activeSlide) #explorerButtons .hidden-while-editing {
    pointer-events: none;
    opacity: 0 !important;
}

#panel-button-sort i       { transition-delay: 0.05s; }
#uploadFileButton i { transition-delay: 0.1s;  }



/* -----------------------------
-------------------------------- 
 
EMPTY SECTIONS IN LEFT SIDEBAR 
 
--------------------------------
----------------------------- */

#leftListWrapper[show="folder"] #activeFolder.empty::after {
    display: block;
    content: "looks like this folder is empty. \a\a you can create a new document, create a new sub-folder,\a or upload some files here\a by pressing the blinking buttons on the right";
    
    padding: 0rem 1rem 0.25rem 0rem;
    white-space: break-spaces;
    line-height: 1.5rem;
    font-weight: 350;
    height: auto;
    opacity: 1;
}


/* 5 seconds round */
@keyframes blinkGroupForAttention1c {
    0%        { color: #FFF;               }
    15%       { color: var(--cryptee-green); }
    30%, 100% { color: #FFF;               }
}

@keyframes blinkGroupForAttention2c {
    0%, 30%   { color: #FFF;               }
    45%       { color: var(--cryptee-green); }
    60%, 100% { color: #FFF;               }
}

@keyframes blinkGroupForAttention3c {
    0%, 60%   { color: #FFF;               }
    75%       { color: var(--cryptee-green); }
    90%, 100% { color: #FFF;               }
}

@keyframes blinkGroupForAttention1o {
    0%        { opacity: 0.5;               }
    15%       { opacity: 1;                 }
    30%, 100% { opacity: 0.5;               }
}

@keyframes blinkGroupForAttention2o {
    0%, 30%   { opacity: 0.5;               }
    45%       { opacity: 1;                 }
    60%, 100% { opacity: 0.5;               }
}

@keyframes blinkGroupForAttention3o {
    0%, 60%   { opacity: 0.5;               }
    75%       { opacity: 1;                 }
    90%, 100% { opacity: 0.5;               }
}

#leftSlide.activeSlide #leftListWrapper[show="folder"].empty-folder ~ #explorerButtons #newDocButton i { animation: blinkGroupForAttention1c 5s infinite ease forwards; }
#leftSlide.activeSlide #leftListWrapper[show="folder"].empty-folder ~ #explorerButtons #newFolderButton i { animation: blinkGroupForAttention2c 5s infinite ease forwards; }
#leftSlide.activeSlide #leftListWrapper[show="folder"].empty-folder ~ #explorerButtons #uploadFileButton i { animation: blinkGroupForAttention3c 5s infinite ease forwards; }

#leftSlide.activeSlide #leftListWrapper[show="folder"].empty-folder ~ #explorerButtons #newDocButton { animation: blinkGroupForAttention1o 5s infinite ease forwards; }
#leftSlide.activeSlide #leftListWrapper[show="folder"].empty-folder ~ #explorerButtons #newFolderButton { animation: blinkGroupForAttention2o 5s infinite ease forwards; }
#leftSlide.activeSlide #leftListWrapper[show="folder"].empty-folder ~ #explorerButtons #uploadFileButton { animation: blinkGroupForAttention3o 5s infinite ease forwards; }

#leftListWrapper[show="recents"] #recents:empty:after {
    display: block;
    content: "looks like you don't have any recent documents. \a\a to create a new document, \a you can press the blinking button";
    
    padding: 0.75rem 1rem 0.25rem 1rem;
    white-space: break-spaces;
    line-height: 1.5rem;
    font-weight: 350;
    height: auto;
    opacity: 1;
}

#leftSlide.activeSlide #leftListWrapper[show="recents"].no-recents ~ #explorerButtons #newDocButton { opacity: 1; }
#leftSlide.activeSlide #leftListWrapper[show="recents"].no-recents ~ #explorerButtons #newDocButton i {
    animation: blinkForAttention 2s infinite ease forwards;
}


#leftListWrapper[show="folders"] #folders:empty:after {
    display: block;
    content: "looks like you don't have any folders. \a\a\a\a to create a new folder, \a you can press the blinking button";
    
    padding: 0.75rem 1rem 0.25rem 1rem;
    white-space: break-spaces;
    line-height: 1.5rem;
    font-weight: 350;
    height: auto;
    opacity: 1;
}


#leftSlide.activeSlide #leftListWrapper[show="folders"].no-folders ~ #explorerButtons #newFolderButton { opacity: 1; }
#leftSlide.activeSlide #leftListWrapper[show="folders"].no-folders ~ #explorerButtons #newFolderButton i {
    animation: blinkForAttention 2s infinite ease forwards;
}











/* -----------------------------
-------------------------------- 
 
DOCUMENTS & SUBFOLDERS
 
--------------------------------
----------------------------- */

.doc, 
.subfolder,
.folderheader button {
    opacity: 0.7 !important;
    transition: 0.3s opacity ease;
}

.doc, 
.subfolder,
.folderheader {
    z-index: 1;
    display: flex;
    cursor: pointer;
    user-select: none;
}

.doc button,
.subfolder button,
.folderheader button {
    display: block;
    min-width: 3rem;
    min-height: 3rem;
    max-width: 3rem;
    max-height: 3rem;
    margin: 0;
    text-align: center;
}
 
.subfolder .icon, 
.doc .icon, 
.folderheader .icon {
    flex-grow: 1;
    position: relative;
}

.subfolder .name,
.doc .name,
.folderheader .name {
    width: 100%;
    margin-top: 1rem;
    display: inline-block;
    min-width: 11rem;
    max-width: 11rem;
    overflow-wrap: break-word;
}

.doc .more ,
.subfolder .more {
    flex-grow: 1;
    float: right;
    opacity: 0 !important;
    transition: 0.3s opacity ease;
}

.doc small {
    display: block;
    margin-top: 0;
    color: var(--cryptee-2);
}

#recents .doc small:last-child {
    margin-bottom: 1rem;
}


.doc .fldr {
    text-transform: lowercase;
    width: calc(100% - 0.5rem);
    margin-top: 0;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: break-spaces;
}

.doc .info {
    filter: blur(0);
    transition: 0.2s filter linear, 0.2s opacity linear;
}

#activeFolder .doc .info .when,
#activeFolder .doc .info .fldr,
#activeFolder .doc .info .tags {
    opacity: 0 !important;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

/* SELECTED DOC */
.doc.selected button.more {
    opacity: 0 !important;
}

.doc.selected .icon i::before {
    content: "\EB82";
}



/* DECRYPTING / LOADING / SAVING DOC */
.doc.decrypting, 
.doc.loading {
    pointer-events: none !important;
}

.doc.decrypting .info {
    filter: blur(3px);
}

.doc.saving .icon i::before,
.doc.decrypting .icon i::before,
.doc.loading .icon i::before {
    content: "\EEC6" !important;
}

.doc.saving .icon i,
.doc.decrypting .icon i,
.doc.loading .icon i {
    animation: spin 0.4s linear infinite;
}

.doc.saving .icon {
    pointer-events: none !important;
}

.doc.loading .info { opacity: 0.5 !important; }
.doc.saving .info { opacity: 0.7 !important; }



/* LOCKED DOC */

.doc:not(.active).locked .when::before {
    color: #FFF;
    content: "\EECE";
    margin-right: 0.5rem;
    font-size: 0.75rem;
    vertical-align: text-bottom;
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* OFFLINE DOC */

.doc.offline:not(.selected):not(.loading):not(.decrypting):not(.selected):not(.saving) .icon:not(:hover) i {
    transform: rotate(180deg) scaleX(-1);
}

.doc.offline:not(.selected):not(.loading):not(.decrypting):not(.selected):not(.saving) .icon:not(:hover) i::before {
   content: "\F198"; 
}

.doc.offline:not(.selected):not(.loading):not(.decrypting):not(.selected):not(.saving) .icon:not(:hover)::before {
    font-size: 0.65rem;
    position: absolute;
    right: 1.1875rem;
    bottom: 0.65rem;
    z-index: 2;

    color: black;

    content: "\F2C1";

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


body.offline .doc:not(.offline) {
    pointer-events: none !important;
}

body.offline .doc:not(.offline) .info {
    opacity: 0.35 !important;
}

body.offline .doc:not(.offline) .icon i::before {
    content: "\ECCE";
}









/* FOLDER HEADER */

.folderheader {
    cursor: auto;
    order: -1;
}

.folderheader button {
    min-width: 3rem;
    max-width: 3rem;
    cursor: pointer;
}

.folderheader .name {
    font-weight: bold;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
}

.folderheader[fid="f-uncat"] .name {
    min-width: 11rem !important;
    max-width: 11rem !important;
}

/* EXTENSION SEPARATOR */

.separator {
    position: relative;
    width: calc(100% - 2rem);
    margin: 2rem 1rem 1rem 1rem;
}

.separator hr {
    opacity: 0.4;
    height: 0px;
    border: none;
    border-bottom: 1px solid white;
}

.separator small {
    background-color: #000;
    position: absolute;
    margin-top: 0;
    top: calc(-0.5rem - 2px);
    left: 1.5rem;
    padding: 0 0.5rem;
    user-select: none;
    font-weight: 700;
}

.dm .separator small {
    background-color: var(--cryptee-0);
}






/* ACTIVE DOC  */



.doc.active { 
    opacity: 1 !important; 
}

.doc.active .info {
    pointer-events: none !important; 
}

.doc.active .when {
    font-size: 0;
}

.doc.active .when::before {
    font-size: 0.75rem;
    content: "editing now";
    color: #FFF;
    font-weight: 350;
}

.doc.active.locked .when::before {
    content: "edits locked, viewing now";
}


.doc.active .when::after {
    color: #FFF;
    font-size: 0.75rem;
    vertical-align: top;

    content: "\EA6D";

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

.doc.active:not(.loading):not(.decrypting):not(.offline):not(.isfile):not(.selected) .icon i::before { 
    content:"\ED0E"; 
}




/* SAVING DOC */

.doc.saving .when::before {
    font-size: 0.75rem;
    content: "saving";
    color: #FFF;
    font-weight: 350;
}


/* -----------------------------
-------------------------------- 
 
FOLDERS 
 
--------------------------------
----------------------------- */

.folder {
    z-index: 1;
    position: relative;
    width: 15rem;
    margin: 0 1rem 1rem 1rem;
    display: grid;
    grid-template-rows: 1rem 1rem max-content;
    grid-template-columns: repeat(auto-fit, 1rem);
    cursor: pointer;
    opacity: 0.7;
    transition-duration: 0.3s;
    transition-property: opacity, max-height, margin;
    transition-timing-function: var(--cryptee-cb);
}

.foldertab {
    grid-row: 1 / 3;
    grid-column: 1 / 13;
    height: 100%;
    margin-top: 0.5rem;
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    z-index: 1;
}

.folder .contents {
    grid-row: 3 / 4;
    grid-column: 1 / -1;

    background-color: var(--cryptee-folder);
    border-radius: 8px;
    border-top-left-radius: 0;
    
    padding: 1rem 2rem 0.75rem 1rem;
}

.folder .name {
    line-height: 1.125rem;
    margin-top: 0;
    font-weight: 450;
    user-select: none;
    color: var(--cryptee-4);

    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: break-spaces;
}

.folder::before {
    content: "";
    position: absolute;
    right: 1rem;
    top: 1.875rem;
    width: 75%;
    height: 0.25rem;
    background-color: var(--fcolor);
    z-index: -1;
    border-radius: 4rem;

    transition: 0.5s background-color linear;
}

.folder i {
    text-align: center;
    grid-row: 3 / 4;
    grid-column: 14 / 16;
    z-index: 2;
    width: 2rem;
    height: 100%;
    line-height: 100%;
    line-height: 2.75rem;
}

.folder.archived {
    opacity: 0;
    max-height: 0;
    margin: 0 1rem 0 1rem;
    transition-duration: 1s;
    overflow: hidden;
    pointer-events: none !important;
}

#leftListWrapper.show-archived .folder.archived {
    opacity: 1;
    margin: 0 1rem 1rem 1rem;
    max-height: 128px;
    pointer-events: all !important;
}

.folder.archived .name::before {
    content: "\EA47";

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

    display: inline-block;
    font-size: 0.75rem;
    line-height: 1rem;
    width: 1rem;
    vertical-align: middle;
    font-style: normal;

    margin-top: -0.325rem;
    margin-right: 0.75rem;
}








/* RESULTS */

#results > .doc.highlight, 
#results > .subfolder.highlight {
    opacity: 1 !important;
    box-shadow: inset 3px 0px 0px #FFF;
}

#results > .doc .tags {
    color: #FFF;
}






/* -----------------------------
-------------------------------- 
 
DROPDOWNS 
 
--------------------------------
----------------------------- */
.dropdown {
    position: absolute;
    top: 8rem;
    left: 16.75rem; /* if you change this, update this in abstractions.js in showDocRightClickDropdown etc */
    min-width: 14rem;
    max-width: 18rem;

    background-color: #242424;
    z-index: 9;

    border-radius: 0.5rem;
    overflow: hidden;

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

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

    pointer-events: none;
}

.dropdown button {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 0.75rem;
    height: 3rem;
    margin-top: 0;

    transition: 0.1s background-color linear;
}

.dropdown button:last-child {
    padding-bottom: 0.5rem;
}

.dropdown button.red {
    color: white;
    background-color: var(--cryptee-red);
}

.dropdown button.yellow {
    color: black;
    background-color: var(--cryptee-yellow);
}

.dropdown button.green {
    color: white;
    background-color: var(--cryptee-green);
}

.dropdown hr {
    border-top: 0 !important;
    margin: 0 !important;
}

.dropdown i {
    margin-left: 0.25rem;
    margin-right: 0.75rem;
}

.dropdown i[color] {
    margin-right: 0.25rem;
    transform: scale(1);
    transition: 0.15s transform var(--cryptee-cb);
}

.dropdown i[color]:nth-child(2) {
    margin-left: 0;
}
.dropdown i[color]:last-child {
    text-shadow: 0 0 0 rgba(255,255,255,1);
    margin-right: 0;
}

.dropdown.show {
    opacity: 1;
    pointer-events: all;
    transform: translate3d(0,0,0);
}

.dropdown[name]::before {
    content: attr(name);
    user-select: none;
    display: block;

    height: 2.75rem;
    line-height: 1.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0.75rem 0.75rem 0.5rem 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    font-weight: 350;
    font-size: 0.75rem; 

    background-color: var(--cryptee-1);
    color: white;
    opacity: 0.5;
}

.dropdown[size]:not([size="-"])[name]::before {
    padding: 0.75rem 6.5rem 0.5rem 0.75rem;
}

.dropdown .filesize {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(54,54,54,0) 0%, #484848 100%);

    width: 5rem;
    height: 2.75rem;
    line-height: 3rem;

    margin-top: 0;
    opacity: 1;

    pointer-events: none;
    z-index: 2;

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

.dropdown .filesize:not([size]),
.dropdown .filesize[size=""] {
    /* width: 1.5rem; */
    opacity: 0;
}

.dropdown .filesize[size]:not([size="-"])::after {
    content: attr(size);
    color: var(--cryptee-3);
    width: 100%;
    display: block;
    overflow: hidden;
    text-align: center;
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.dropdown:not(.for-offline-items) .show-for-offline-folder-or-doc { display: none; }
.dropdown.for-offline-items       .hide-for-offline-folder-or-doc { display: none; }
.dropdown:not([parent])           .hide-in-folders                { display: none; }

.dropdown:not(.for-images)        .show-for-images { display: none; }

.dropdown.for-files               .hide-for-files  { display: none; }
.dropdown.for-active-folder       .hide-for-activefolder { display : none; }
.dropdown:not(.for-active-doc)    .only-for-activedoc { display: none; }

.dropdown.saving       .disabled-while-saving,
.dropdown.for-reserved .disabled-for-reserved,
.dropdown.for-active-doc .disabled-for-activedoc,
.dropdown.for-archived-items .disabled-for-archived,
body.no-doc .dropdown .disabled-for-empty-editor,
body.locked-doc .dropdown .disabled-for-empty-editor,
body.loading-doc .dropdown .disabled-for-empty-editor,
body.viewing-doc .dropdown .disabled-for-empty-editor,
body.focus-mode .dropdown .disabled-for-empty-editor,
#dropdown-selections.ios-multi-download .disabled-for-ios-multi-download {
    opacity: 0.2;
    pointer-events: none !important;
}

/* if folder is archived, change label to "un-archive" */
#dropdown-folder.for-archived-items .show-for-archived-items::before {
    content: "un-";
}

/* and icon to unarchive */
#dropdown-folder.for-archived-items #archiveFolderButton:not(.loading) i::before {
    content: "\EE50";
}

#dropdown-folder:not([fid="f-uncat"]) .for-inbox {
    display: none;
}

.dropdown button .tag {
    color: var(--cryptee-4);
    font-size: 0.75rem;
    margin-top: 0rem;
    float: right;
    text-align: center;
    user-select: none !important;
}

.dropdown button .tag.green {
    color: var(--cryptee-green);
}

.dropdown button.is-hidden-on-live-env {
    width: 18rem;
}

/* -----------------------------
-------------------------------- 
 
PANELS 
 
--------------------------------
----------------------------- */


.panel {
    display: grid;
    grid-auto-rows: max-content;
    grid-template-columns: 3rem 1fr 1fr;

    position: absolute;
    top: 4rem;
    right: 4rem;
    
    min-width: 14rem;
    max-width: 19rem;
    min-height: 3rem;
    
    background-color: #242424;
    z-index: 9;

    border-radius: 0.5rem;
    overflow: hidden;

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

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

.panel i {
    /* margin-top: -0.125rem; */
    height: 3rem;
    line-height: 3rem;
    text-align: center;
}

.panel hr {
    border-top: 0 !important;
    margin: 0 !important;
}

.panel button small {
    max-width: calc(100% - 3rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: text-bottom;
}

.panel i + small,
.panel i + small + small { 
    margin-top: 1.125rem; 
}

.panel hr, .panel b { 
    grid-column: span 3; 
}

.panel b {
    height: 1rem;
}

.panel .wide {
    grid-column: span 2;
    padding-right: 1.25rem;
}

.panel .tall {
    grid-row: span 2;
    height: 7rem;
    padding-bottom: 1rem;
}

.panel .tall .small {
    display: inline;
    width: calc(100% - 3rem);
    float: right;
}

.panel small {
    user-select: none;
}

.panel.show {
    transform: translate3d(0,0,0);
    opacity: 1;
    pointer-events: all;
}

.panel.hidden { display: none !important; }

button[id^="panel-button"].active i { opacity: 1 !important; }
button[id^="panel-button"].active i::before { content: "\EB98"; }

.panel button {
    margin: 0;
    grid-column: span 3;
    height: 3rem;
    padding-right: 1.25rem;
    transition: 0.1s background-color linear;
}

.panel button:first-child {
    margin-top: 0.25rem;
}

.panel button i {
    width: 3rem;
    line-height: 3rem;
    height: 3rem;
}

.panel button span.small {
    margin-top: 0.875rem !important;
}

.panel button .toggle {
    float: right;
    font-size: 1.5rem;
    margin-right: -0.75rem;
    margin-top: -0.25rem;
}

.panel button .toggle::before { 
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    content:"\F219"; 
}

.panel button.on .toggle::before { 
    content:"\F218"; 
}


.panel button.red {
    color: white;
    background-color: var(--cryptee-red);
}

.panel button.yellow {
    color: black;
    background-color: var(--cryptee-yellow);
}

.panel button.green {
    color: white;
    background-color: var(--cryptee-green);
}

.panel input {
    width: 100%;
}

.panel button .tag {
    background-color: var(--cryptee-4);
    color: #000;
    font-size: 0.75rem;
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    border-radius: 1.75rem;
    margin-top: 0.5rem;
    float: right;
    text-align: center;
}

.panel button .tag.green {
    background-color: var(--cryptee-green);
    color: #FFF;
}

/* MOBILE PANELS */
/* this is a minor correction to make panels appear in the correct place for mobile editor */

body.bubble .panel:not(.centered) {
    top: 3.5rem;
    right: auto;
    left: 0.5rem;
    bottom: auto;
}

/* VIEWPORT-CENTERED FLYING PANEL */

.panel.centered {
    position: fixed;
    margin: auto;
    z-index: 9;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    height: 24rem;
    width: 100%;
    max-width: 16rem;
    min-width: calc(320px - 5rem);

    padding: 2rem;
    color: white;

    transform: translate3d(0, 2rem, 0);
    grid-template-columns: 1fr;
    grid-template-rows: 2rem 4rem 2rem;
}

.panel.centered.show {
    transform: translate3d(0, 0, 0);
}

body.bubble .panel.centered {
    width: calc(100% - 9rem);
    margin: 8rem auto auto auto;
}


/* VIEWPORT-CORNER FLYING PANEL */

.panel.corner {
    display: block;
    position: fixed;
    margin: auto;
    z-index: 9;
    top: auto;
    left: auto;
    right: 4rem;
    bottom: 4rem;

    height: auto;
    width: 100%;
    max-width: 16rem;
    min-width: calc(320px - 8rem);
    max-height: 20rem;

    padding: 2rem;
    color: white;

    transform: translate3d(0, 2rem, 0);
}

.panel.corner.show {
    transform: translate3d(0, 0, 0);
}




.panel:not(.for-offline-items) .show-for-offline-folder-or-doc { display: none; }
.panel.for-offline-items       .hide-for-offline-folder-or-doc { display: none; }


.panel.saving       .disabled-while-saving,
.panel.for-reserved .disabled-for-reserved {
    opacity: 0.2;
    pointer-events: none !important;
}


.dropdown.saving::after,
.panel.saving::after {
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    content: "\F24B";
    position: absolute;
    font-size: 1.75rem;
    top: 0.5rem;
    right: 0.625rem;
    text-align: center;
    
    z-index: 1;
    color: white;
    opacity: 0.3;

    animation: animateSavingCloud 2s infinite ease forwards;
}

@keyframes animateSavingCloud {
    0%   {  content: "\F24B"; }
    50%  {  content: "\EB9C"; }
    100% {  content: "\F24B"; }
}


/* DOCUMENT INFO PANEL */

.total-words:empty + span { display: none;}
.total-chars:empty + span { display: none;}
.selection-words:empty + span { display: none;}
.selection-chars:empty + span { display: none;}

.total-words:empty::after { 
    content: "document has no text";
    grid-column: span 2;
    color: var(--cryptee-yellow);
}

.selection-words:empty::after {
    content: "no text selected";
    grid-column: span 2;
    color: var(--cryptee-yellow);
}

#remoteImagesButton {
    border-top: 2px solid #FFF;
}

#remoteImagesButton[remoteimages="hidden"] .small::before {
    content: "this document contains remote images and cryptee blocked them to protect your security & privacy. click here to learn how to fix this, and load remote images in this document if you'd like.";
}

#remoteImagesButton[remoteimages="loaded"] .small::before {
    content: "this document contains remote images which may pose a risk for your security & privacy. click here to block remote images in this document.";
}





/* PAGE SETUP PANEL */

#panel-pagesetup {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
}

#panel-pagesetup .wide, #panel-sort .wide {
    padding-right: 0;
}

#panel-pagesetup p {
    cursor: pointer;
}



/* EXPORT DOC PANEL */

/* SORT PANEL */

#panel-sort {
    top: 19rem;
    left: 19.5rem;
    bottom: auto;

    min-width: 10rem;
    max-width: 10rem;
    grid-template-columns: 2rem 2rem 2rem 2rem 2rem;
    padding: 0.5rem 1rem 0.5rem 1.5rem;
}

#panel-sort p { 
    height: 3rem; 
    line-height: 3rem; 
    margin-top: 0;
}

#panel-sort i {
    transform: scale(1);
    transition: 0.3s transform var(--cryptee-cb);
    cursor: pointer;
}

#panel-sort .wide { grid-column: span 5; }
#panel-sort b     { grid-column: span 1; }

#panel-sort[sort="azdesc"]  i[sort="azdesc"]  { transform: scale(1.5); }
#panel-sort[sort="azasc"]   i[sort="azasc"]   { transform: scale(1.5); }
#panel-sort[sort="gendesc"] i[sort="gendesc"] { transform: scale(1.5); }
#panel-sort[sort="genasc"]  i[sort="genasc"]  { transform: scale(1.5); }
#panel-sort[sort="extasc"]  i[sort="extasc"]  { transform: scale(1.5); }
#panel-sort[sort="extdesc"] i[sort="extdesc"] { transform: scale(1.5); }

#panel-sort[sort="azdesc"]  i[sort="azdesc"]::before { content: "\EA49"; }
#panel-sort[sort="azasc"]   i[sort="azasc"]::before { content: "\EA49"; }
#panel-sort[sort="gendesc"] i[sort="gendesc"]::before { content: "\EA49"; }
#panel-sort[sort="genasc"]  i[sort="genasc"]::before { content: "\EA49"; }
#panel-sort[sort="extasc"]  i[sort="extasc"]::before { content: "\EA49"; }
#panel-sort[sort="extdesc"] i[sort="extdesc"]::before { content: "\EA49"; }

/* -----------------------------
-------------------------------- 
 
ADD LINK PANEL 
NEW DOC PANEL
NEW FOLDER PANEL
 
--------------------------------
----------------------------- */

#link-box, 
#panel-new-folder {
    top: -4rem;
    height : 8.25rem;
}

#panel-new-doc {
    top: -4rem;
    width: 20rem;
    height : 31.5rem;
    max-width: 20rem;
    max-height: 31.5rem;
    box-sizing: border-box;
    grid-template-rows: 2.5rem 2.5rem 3rem 8.75rem 10rem;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    padding: 3rem 0;
}

#panel-new-doc > *:not(button) {
    grid-column: 1/-1;
}

#panel-copy-doc {
    top: -4rem;
    width: 20rem;
    height : 22.25rem;
    max-width: 20rem;
    max-height: 22.25rem;
    box-sizing: border-box;
    grid-template-rows: 2.5rem 2.5rem 3rem 7.25rem 3rem;
    padding: 3rem 0;
}

#link-box .confirm img,
#panel-new-folder .confirm img {
    height: 100%;
    width: 100%;;
}

#link-box input,
#panel-new-folder input {
    transition: 0.15s width var(--cryptee-cb);
    width: calc(100% - 3rem);
}

#panel-new-doc input,
#panel-copy-doc input,
#link-box input:placeholder-shown,
#panel-new-folder input:placeholder-shown {
    width: 100%;
}

#panel-new-doc h3, 
#panel-copy-doc h3 {
    padding: 0 3rem;
}

#panel-new-doc p, 
#panel-copy-doc p, 
#panel-new-doc input,
#panel-copy-doc input {
    margin-top: 0;
    padding: 0 3rem;
}

#panel-new-doc input,
#panel-copy-doc input {
    line-height: 3rem;
    height: 3rem;
}

#panel-new-doc .hints,
#panel-copy-doc .hints {
    margin-top: 0.5rem;
    text-align: center;
    line-height: 1rem;
}

#link-box .confirm,
#panel-new-folder .confirm {

    padding-right: 0 !important;

    position: absolute;
    bottom: 2rem;
    right: 2rem;

    height: 1rem;
    width: 1rem;

    transform: rotate(45deg);

    opacity: 1;
    transition: 0.15s opacity var(--cryptee-cb);

}

#panel-new-doc .confirm {
    grid-column: span 1;

    line-height: 1.5rem;
    text-align: center;

    padding: 0 0 0 3rem;
    height: 9rem;
    width: 100%;
    
    color: var(--cryptee-4);
    
    opacity: 1;

    transition-property: opacity, background-color, color;
    transition-timing-function: var(--cryptee-cb);
    transition-duration: 0.5s;

    display: block;

    font-size: 0.75rem;
    
    background-color: transparent;
}

#panel-new-doc .confirm + .confirm {
    padding: 0 3rem 0 0;
}

#panel-copy-doc .confirm {
    
    grid-column: 1/-1;
    margin: 0 1rem 0 auto;
    padding: 0.825rem;
    
    /* position: absolute; */
    /* bottom: 1.5rem; */
    /* right: 1.5rem; */
    
    height: 3rem;
    width: 3rem;
    
    border-radius: 0.25rem;
    
    background-color: var(--cryptee-green);
    opacity: 1;
    transition-property: opacity, background-color;
    transition-timing-function: var(--cryptee-cb);
    transition-duration: 0.5s;
}

#panel-new-doc .confirm svg {
    user-select: none !important;
}

#panel-new-doc .confirm svg g rect:not(:first-child),
#panel-new-doc .confirm svg g circle,
#panel-new-doc .confirm svg g path {
    transition: 0.3s fill ease;
}

#panel-new-doc .confirm svg .hotkey {
    opacity: 1;
    transition: 0.3s opacity ease;
}

#panel-copy-doc .confirm img { display: none !important; }

#panel-copy-doc .confirm::before {
    content: "\ecd2";
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #FFF;
    font-size: 1.35rem;
    text-align: center;
    width: 100%;
    height: 100%;
}

#link-box input:placeholder-shown ~ .confirm,
#panel-new-folder input:placeholder-shown ~ .confirm {
    opacity: 0;
    pointer-events: none !important;
}

#panel-new-doc:has(input:placeholder-shown) .confirm,
#panel-copy-doc:has(input:placeholder-shown) .confirm {
    opacity: 0.15 !important;
    pointer-events: none !important;
}

#new-doc-recos, 
#copy-doc-recos { 
    margin-top: 0;
    display: block; 
    
    padding: 0.75rem 1rem 0 1.125rem;
    margin-bottom: 1rem;

    transition: 0.3s border ease;
}

#new-doc-recos time, 
#copy-doc-recos time {
    display: block;
    box-sizing: border-box;
    width: 100%;
    
    color: var(--cryptee-2);
    font-weight: 350;
    font-size: 0.85rem;
    line-height: 2rem;
    cursor: pointer;
    transition: 0.15s opacity var(--cryptee-cb);
}

#new-doc-recos time::before,
#copy-doc-recos time::before {
    float: left;
    content: "\eea6";
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 1.125rem;
    margin-top: -0.125rem;

    transition: 0.3s color ease;
}

#new-doc-recos time::after,
#copy-doc-recos time::after {
    float: right;
    content: "";
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-top: -0.125rem;
    opacity: 0;

    line-height: 1.5rem;
    height: 1.5rem;
    width: 1.5rem;
    text-align: center;
    border: 1px solid var(--cryptee-2);
    border-radius: 0.25rem;
    margin-top: 1px;

    transition: 0.3s opacity ease;
}

#new-doc-recos:has(time.selected) time::after,
#copy-doc-recos:has(time.selected) time::after {
    content: "";
}

#new-doc-recos:has(time.selected) ~ .confirm svg .hotkey {
    opacity: 0;
}

#new-doc-recos time.selected,
#copy-doc-recos time.selected {
    color: var(--cryptee-yellow);
}

#new-doc-recos time.selected::after,
#copy-doc-recos time.selected::after {
    content: "⏎" !important;
    opacity: 1 !important;
    border: 1px solid var(--cryptee-yellow);
    animation: keyClick 1s var(--cryptee-cb) 0.5s 3;
}

#new-doc-recos:has(time.selected) ~ .hints::after {
    color: var(--cryptee-yellow) !important;
    content: "quickly name the doc with today's date/time" !important;
}

#new-doc-recos time:last-child,
#copy-doc-recos time:last-child {
    margin-bottom: 0;
}

#confirmCopyDocButton.loading img {
    opacity: 0 !important;
    animation: none !important;
}

#confirmCopyDocButton.loading::before {
    font-family: remixicon !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    content: "\EEC6";
    animation: spin 0.4s linear infinite;
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    font-style: normal;
    color: #FFF;
}

#copy-doc-recos.loading {
    opacity: 0.3;
    pointer-events: none !important;
}

#panel-new-doc .creation-folder-and-input,
#panel-copy-doc .creation-folder-and-input {
    display: grid;
    grid-template-columns: 3rem 1fr;
}

#panel-new-doc .creation-folder-and-input input,
#panel-copy-doc .creation-folder-and-input input {
    grid-column: 1/-1;
    grid-row: 1/2;

    transition-property: padding, color;
    transition-duration: 0.5s;
    transition-timing-function: ease;
}

.creation-folder-and-input input::placeholder           { transition: 0.5s color ease; }
.creation-folder-and-input input:-ms-input-placeholder  { transition: 0.5s color ease; }
.creation-folder-and-input input::-ms-input-placeholder { transition: 0.5s color ease; }

@-moz-document url-prefix() {
    .creation-folder-and-input input::placeholder       { transition: 0.5s color ease; }
}

#panel-new-doc .creation-folder-and-input p,
#panel-copy-doc .creation-folder-and-input p {
    grid-column: 1/-1;
    grid-row: 1/2;
}

#new-doc-target-folder, 
#copy-doc-target-folder {
    position: relative;
    padding: 0!important;
    height: 3rem;
    line-height: 3rem;
    font-size: 1rem;
    position: relative;
    color: var(--cryptee-2);
    text-align: center;
    
    user-select: none !important;

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

    cursor: pointer;

    transition-property: color;
    transition-duration: 0.3s;
    transition-timing-function: var(--cryptee-cb);
    pointer-events: none;
}

#new-doc-target-folder::before,
#copy-doc-target-folder::before {
    position: absolute;
    left: 0.75rem;
    top: 0;

    font-family: remixicon !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    content: "\ED67";
    font-size: 1.25rem;
    line-height: 2.825rem;
    margin-left: 0.25rem;
    pointer-events: all;
}

#new-doc-target-folder::after,
#copy-doc-target-folder::after {
    content: "will be created in folder: " attr(name);
    position: absolute;
    top: 0rem;
    left: 3rem;
    font-size: 0.75rem;
        
    pointer-events: none !important;
    user-select: none !important;

    line-height: 3rem;
    opacity: 0;
    transform: translateX(-3rem);

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

#panel-saveas-template {
    width: 20rem;
    height: 12rem;
    grid-template-columns: 3rem 1fr;
    grid-template-rows: auto;
    column-gap: 1rem;
    overflow: visible;
}

#panel-saveas-template h3, 
#panel-saveas-template p {
    grid-column: 1/4;
}

#panel-saveas-template input {
    grid-row: 3/4;
    grid-column: 1/4;
    margin: 1.5rem 0 2rem 0;
}

#panel-saveas-template button {
    width: 3rem;
    height: 3rem;
    border-radius: 3rem;
    color: #FFF;
    text-align: left;
    font-weight: 350;
    background-color: var(--cryptee-green);
    padding: 0.5rem;
    margin-left: auto;
    display: block;

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

    grid-column: 1/2;
    grid-row: 4/5;
}

#panel-saveas-template button img {
    transform: rotate(135deg) scale(1);
    height: 1.5rem;
    width: 1.5rem;
    margin: auto;
    display: block;

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

#panel-saveas-template input:placeholder-shown ~ button {
    opacity: 0.2;
    pointer-events: none !important;
}

#panel-saveas-template input:placeholder-shown ~ button img {
    opacity: 0.5;
    transform: rotate(45deg);
}

#saveas-template-preview-image {
    width: 6rem;
    height: 8rem;
    display: block;

    text-indent: -8rem; /* hides broken image */

    border-radius: 0.25rem;
    background: var(--cryptee-4);

    object-fit: cover;
    object-position: top;

    transition: 0.25s opacity ease;

    position: absolute;
    bottom: 1rem;
    right: -1rem;

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

#saveas-template-preview-image[src=''] {
    background: linear-gradient(0deg, #FFF, color-mix(in srgb, #000 30%, #FFF), #FFF);
    animation: loadingBGWipeVertical 1s linear infinite;
    background-size: 200% 200%;
}

#saveas-template-preview-image.loaded { opacity: 0.5; background: var(--cryptee-4); }

#saveas-template-preview-image[src^='blob'] { opacity: 1; }

/* -----------------------------
-------------------------------- 
 
NEW TABLE PANEL / POPUP 
 
--------------------------------
----------------------------- */


#table-picker {
    display: grid;
    grid-template-columns: repeat(8, 2rem);
    
    height: 16.5rem; /* 8px for borders */
    width:  16rem;

    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    
    margin-top: 1.25rem;
}

.table-picker-cell {
    height: 2rem;
    line-height: 2rem;
    
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    
    background-color: transparent;
    color: #f5f5f5;

    font-family: monospace;
    text-align: center;
    font-size: 13px;
    letter-spacing: 1px;
    
    padding-left: 2px;
    user-select: none;
    cursor: pointer;
}

.table-picker-cell.s {
    color: transparent;
    background-color: rgba(29,185,84,0.7);
}

#add-table.compact {
    min-width: 12rem;
    max-width: 12rem;
    max-height: 20rem;
}

#add-table.compact #table-picker {
    grid-template-columns: repeat(6, 2rem);
    height: calc(12rem + 6px); /* 6px for borders */
    width: 12rem;
}


#add-table.compact .table-picker-cell[r='7'],
#add-table.compact .table-picker-cell[r='8'],
#add-table.compact .table-picker-cell[c='7'],
#add-table.compact .table-picker-cell[c='8'] {
    display: none !important;
}



/* -----------------------------
-------------------------------- 
 
EMBEDDING IMAGE PANEL 
 
--------------------------------
----------------------------- */

#panel-embedding-image {
    grid-template-rows: 4rem 4rem 4rem;
    height: 9rem;
}



/* -----------------------------
-------------------------------- 
 
PRINT / PAPER MODE PANEL
PAGE SETUP PANEL 
 
--------------------------------
----------------------------- */

#panel-pagesetup {
    max-height: 10rem;
    transition-property: opacity, transform, max-height;
}

#panel-pagesetup p {
    opacity: 0.5;
    transition: 0.3s opacity ease;
    user-select: none !important;
}

#panel-pagesetup .ri-leaf-fill { 
    text-align: left; 
    
    margin-top: 1.125rem;
    line-height: 2rem;
    height: 2rem;
}

#panel-pagesetup .green-reminder {
    opacity: 0;
    transform: translateY(4rem);
    transition-timing-function: ease;
    transition-duration: 0.5s;
    transition-property: opacity, transform;
}

/* continuous mode */

body:not([paper-stock]) #continuous-mode-button {
    opacity: 1;
}

body:not([paper-stock]) #paper-mode-button ~ * {
    opacity: 0.2 !important;
    pointer-events: none !important;
}


/* paper mode */

body[paper-stock] #panel-pagesetup {
    max-height: 20rem !important;
}

body[paper-stock] #continuous-mode-button {
    opacity: 0.5 !important;
}

body[paper-stock] #paper-mode-button {
    opacity: 1 !important;
}

body[paper-stock='a4'] p[mode='a4'], 
body[paper-stock='a3'] p[mode='a3'], 
body[paper-stock='usletter'] p[mode='usletter'],
body[paper-stock='uslegal'] p[mode='uslegal'] {
    opacity: 1 !important;
}

body[paper-stock] .green-reminder {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* body[paper-stock] #panel-pagesetup .paper-zoom-button.active {
    opacity: 1 !important;
    pointer-events: none !important;
} */



/* -----------------------------
-------------------------------- 
 
SAVE AS PANEL
 
--------------------------------
----------------------------- */

#saveas-pdf {
    background-color: #000;
    display: block;
    height: 11rem;
    transition: 0.75s all var(--cryptee-cb);
}

#saveas-pdf.expanded {
    height: 24rem;
}

#pw-protect-pdf {
    position: relative;
    padding: 0.75rem 0 0.75rem 2rem;
    transform: translateX(-2rem);
    width: 100%;
}

#pw-protect-question {
    padding: 0;
    transition: 0.25s padding var(--cryptee-cb);
    user-select: none !important;
}

#pw-protect-question i {
    line-height: 1rem;
    height: 1.25rem;
    margin-left: 0.25rem;
    cursor: pointer;
    transition: 1s opacity var(--cryptee-cb);
    opacity: 0;
}

#pw-protect-question::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 3rem;
    background-color: #242424;
    content: "";
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    transform: translate3d(0);

    transition: 0.75s height var(--cryptee-cb);
}

#saveas-pdf input[type="checkbox"] {
    margin: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    background-color: var(--cryptee-1);
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: translate3d(0,0,0);
    transition: 0.75s all var(--cryptee-cb);
}

#saveas-pdf input[type="checkbox"] + p {
    margin-top: 0 !important;
}

#saveas-pdf input[type="checkbox"]:checked + #pw-protect-question::before {
    height: 16rem;
}

#saveas-pdf input[type="checkbox"]:checked + #pw-protect-question {
    padding: 1rem 0;
}

#saveas-pdf input[type="checkbox"]:checked ~ #pw-protect-question i {
    opacity: 1;
}

#saveas-pdf input[type="checkbox"]:checked {
    background-color: var(--cryptee-green) !important;
    border-radius: 3rem;
}

#saveas-pdf input[type="checkbox"]::after {
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    content: "\EED0";
    color: #FFF;
    font-size: 1.5rem;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    margin: 0.75rem;
    text-align: center;
}

#saveas-pdf input[type="checkbox"]:checked::after {
    content: "\EB7A" !important;
}

#pw-protect-pdf-checkbox {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer !important;
}

#pw-protect-pdf-checkbox:checked {
    transform: translate3d(1rem,-1rem,0) !important;
}

#pw-protect-pdf-checkbox + p ~ * {
    opacity: 1;
    transition: 0.3s opacity var(--cryptee-cb);
}

#pw-protect-pdf-checkbox:not(:checked) + p ~ * { 
    opacity: 0;
    pointer-events: none !important;
}

#pdf-password-protect-input {
    margin-bottom: 2rem;
}

.option {
    background-color: var(--cryptee-1);
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    height: 2rem;
    width: calc(100% - 2rem);
    transition: 0.25s all ease !important;
}

.option p { 
    margin-top: 0.25rem;
    margin-left: 0.75rem;
    float: left; 
}

.option input[type="checkbox"] { 
    margin: 0 !important;
    width: 2rem !important;
    height: 2rem !important;
    float: right;
    background-color: var(--cryptee-red) !important;
    transition: 0.25s all ease !important;
}

.option input[type="checkbox"]::after {
    content: "\EB98" !important;
    width: 2rem !important;
    height: 2rem !important;
    line-height: 2rem !important;
    font-size: 1.5rem !important;
    margin: 0 0.25rem !important;
    text-align: center;
}

.option input[type="checkbox"]:checked {
    border-radius: 0.5rem !important;
}

#pw-protect-pdf-checkbox:checked ~ #pdf-password-protect-input:placeholder-shown ~ .option {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

#saveas-pdf-actions {
    position: absolute;
    bottom: 2rem;
    width: calc(100% - 4rem);
    height: 3rem;
    display: grid;
    grid-template-columns: 1fr 4rem;
    grid-template-rows: 1fr;
    column-gap: 1rem;
}

#saveas-pdf-actions button {
    margin: 0;
    grid-column: span 1;
    text-align: center;
    padding: 0;
    border-radius: 0.5rem;
}

#saveas-pdf-actions button:first-child {
    text-align: left;
}

#saveas-pdf-actions button:last-child {
    background-color: var(--cryptee-green);
}

#saveas-pdf-actions #saveas-pdf-button.loading {
    font-size: 0;
}

#saveas-pdf-actions #saveas-pdf-button.loading::before {
    font-family: remixicon !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    content: "\EEC6";
    animation: spin 0.4s linear infinite;
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
    vertical-align: middle;
    font-style: normal;
    color: #FFF;
}

#saveas-pdf-actions #saveas-pdf-print-button.loading {
    font-size: 0;
    color: #FFF;
    opacity: 1 !important;
}

#saveas-pdf-actions #saveas-pdf-print-button.loading::after {
    content: attr(status);
    font-size: 1rem !important;
    line-height: 3.25rem !important;
}

/* -----------------------------
-------------------------------- 
 
EDITOR & RIGHT VIEW 
 
--------------------------------
----------------------------- */

#rightSlide button i {
    margin-top: 0;
}

#rightSlide button {
    padding-top: 0;
    margin-top: 0;
}


#progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 3px;

    opacity: 1;
}


/* -----------------------------
-------------------------------- 
 
EDITOR TOOLBARS (DESKTOP & MOBILE) 
 
--------------------------------
----------------------------- */

#desktopToolbar, #mobileToolbar {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    padding: 0;
    border: 0;
    box-sizing: initial;
    font-family: 'Josefin Sans' !important;
    font-size: 1rem !important;
    user-select: none !important;

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

#desktopToolbar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#rightSlide > #mobileToolbar {
    display: none;
}

#statusMessage {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    padding-left: 1.5rem;
    margin-top: 0.625rem;
    user-select: none;
    pointer-events: none;

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

/* ios pwa only */
body.safari[pwa="1"] .ql-tooltip:not(.keyboard-visible) #mobileToolbar {
    padding: 0 0 0.5rem 0.75rem;
}

/* -----------------------------
-------------------------------- 
 
URL BOX 
 
--------------------------------
----------------------------- */

#urlbox {
    grid-row: 1 / 4;
    grid-column: 1 / -1;
    padding: 1rem;
    border: 0;
    box-sizing: initial;
    font-family: 'Josefin Sans' !important;
    font-size: 1rem !important;
    line-height: 2rem !important;
    user-select: none !important;
    font-weight: 350;

    background-color: var(--cryptee-green);
    color: #FFF;

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

    display: grid;
    grid-template-columns: 1fr 2rem;
    z-index: 3;
}

#urlbox a::before {
    content: "\ECAE";

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

    display: inline-block;
    margin-top: -0.5rem;
    margin-right: 1rem;
    vertical-align: bottom;
}

#urlbox a {
    display: block;
    width: calc(100% - 3rem);
    height: 2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-transform: lowercase;

    grid-column: span 1;
}

#urlbox button {
    line-height: 1rem;
    height: 2rem;
    width: 2rem;
    text-align: center;
    grid-column: span 1;
    border-radius: 2rem;
 
    background-color: #116e32;
    color: #FFF;
    transform: scale(1);

    transition-property: transform, color, background-color;
    transition-timing-function: var(--cryptee-cb);
    transition-duration: 0.5s;
}

#urlbox-copy-button.copied {
    transform: scale(1.25);
    background-color: #FFF;
    color: #000;
}

#urlbox-copy-button.copied i::before {
    content:"\EB7B";
}

#urlbox:not(.show) {
    transform: translateY(-4rem);
    pointer-events: none !important;
}

body:not(.bubble) #urlbox {
    display: none !important;
    transform: translateY(-4rem) !important;
    pointer-events: none !important;
}

#urlbox.insecure {
    background-color: var(--cryptee-yellow);
    color: #000;
}

#urlbox.insecure button {
    background-color: #bd8a00;
}

/* -----------------------------
-------------------------------- 
 
EDITOR 
 
--------------------------------
----------------------------- */

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

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


/* -----------------------------
-------------------------------- 
 
COMMENTS 
 
--------------------------------
----------------------------- */
/* #region COMMENTS */


#modal-comments {
    padding: 1rem 0 0 1rem;
    box-sizing: border-box;
    width: 20rem;
    height: 100%;
    grid-template-rows: auto auto 1rem 1fr;
}

#modal-comments h3 {
    margin: 0.125rem 0 0 0.5rem;
}

#commentslist {
    overflow-y: scroll !important;
    overflow-x: visible !important;
    -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 */
}

#commentslist::after {
    bottom: 0rem;
    height: 4rem;
}

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

#commentslist .comment {
    width: 100%;
    max-width: 19rem;
    margin-bottom: 1rem;
    height: auto;
    max-height: 20rem;
    display: grid;
    grid-template-columns: 1fr 2rem;
    grid-template-rows: 2rem auto;
    background-color: var(--cryptee-folder);
    border: 1px solid var(--cryptee-folder);
    border-radius: 1rem 0 0 1rem;
    border-right: none !important;
    padding: 1rem 1rem 1rem 1.5rem;
    box-sizing: border-box;
    overflow: hidden;

    transform: translateX(0);
    transition: 0.3s max-height var(--cryptee-cb) 0.3s, 
                0.3s padding var(--cryptee-cb) 0.3s, 
                0.3s margin var(--cryptee-cb) 0.3s, 
                0.3s transform ease;
}

#commentslist .comment time { 
    width: 100%;
    font-size: 0.85rem;
    font-weight: 350;
    color: var(--cryptee-3);
    line-height: 2.25rem;
}

#commentslist .comment .delete {
    width: 2rem;
    height: 2rem;
    background-color: var(--cryptee-1);
    margin: 0;
    text-align: center;
    border-radius: 2rem;
}

#commentslist .comment .delete i {
    margin-top: -1px;
}

#commentslist .comment textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    max-height: 15.5rem;
    grid-column: span 2;
    min-height: 8rem;
    font-weight: 350;
    box-shadow: none !important;
    resize : vertical;
}

#commentslist .comment.deleting {
    max-height: 0;
    margin: 0;
    padding: 0 1rem 0 1.5rem;
    transform: translateX(20rem);
}

#commentslist .comment.highlighted {
    border: 1px solid var(--cryptee-yellow);
}


#commentslist:empty::before {
    content: "this document doesn't have any comments.\a\a to add comments, select some text using your cursor, and press the 'add comment' button from the editor toolbar. alternatively, \a\a on windows/linux you can press: \a\a 'ctrl + alt + m' \a\a or on mac you can press: \a\a 'cmd + alt + m' \a";
    font-weight: 350;
    padding: 0 3rem 0 0.5rem;
    line-height: 1.5rem;
    display: block;
    text-wrap: wrap;
    white-space: break-spaces;
}

/* #endregion COMMENTS */

/* -----------------------------
-------------------------------- 
 
DOCUMENT ACTION BUTTONS
 
--------------------------------
----------------------------- */

/* THIS WAS OVERFLOW:HIDDEN TO PREVENT SOMETHING, BUT CAN'T REMEMBER WHAT. TEST IN WINDOWS & LINUX */

#documentActionButtons {
    grid-row: 4 / 5;
    grid-column: 3 / 4;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#documentActionButtons button {
    text-align: center;
    line-height: 3rem;
    width: 2rem;
    height: 3rem;

    transform: translateX(0) translateY(0);
    transition: 0.5s transform var(--cryptee-cb);
}

#helpButton {
    text-align: center;
    grid-row: 6 / 7;
    grid-column: 3 / 4;
    line-height: 2rem;
    height: 2rem;
}

#hotkeysButton {
    text-align: center;
    grid-row: 2 / 3;
    grid-column: 3 / 4;
    line-height: 2rem;
    height: 2rem;
    transition: 0.5s transform var(--cryptee-cb) 1s, 0.5s opacity var(--cryptee-cb) 1s;
    transform: scale(1);
}

#documentActionButtons i, 
#helpButton i,
#hotkeysButton i {
    color: black !important;
    opacity: 0.4;
    transition: 0.3s opacity ease;
}

.dm #documentActionButtons i, 
.dm #helpButton i,
.dm #hotkeysButton i {
    color: white !important;
}

#documentActionButtons button::before, 
#helpButton::before,
#hotkeysButton::before {
    content: attr(alt);
    color: black;
    text-transform: lowercase;
    text-align: right;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 3rem;
    width: 8rem;
    position: absolute;
    right: 4rem;
    user-select: none;
    outline: none;
    box-shadow: none;
    opacity: 0;
    z-index: 4;
    pointer-events: none;
    will-change: opacity;
}

#helpButton::before,
#hotkeysButton::before {
    line-height: 2rem; 
}

#hotkeysButton::before {
    background-color: var(--cryptee-4);
}

.dm #hotkeysButton::before {
    background-color: var(--oled-safe-black);
}

.dm #documentActionButtons button::before, 
.dm #helpButton::before,
.dm #hotkeysButton::before {
    color: white;
}

body.bubble #panel-button-docinfo.warning i, 
#panel-button-docinfo.warning i { 
    color : var(--cryptee-yellow) !important;
    opacity: 1 !important;
}

body:not(.no-doc):not(.offline) #progress:not(.green) ~ #hotkeysButton { 
    transform: scale(0);
    opacity: 0;
    pointer-events: none !important;
}

body.no-doc #upload-cloud { opacity: 0; }

#upload-cloud {
    width: 1.25rem;
    height: 1.25rem;
    grid-row: 2 / 3;
    grid-column: 3 / 4;
    margin: auto;
    transition: 0.5s fill ease, 0.5s transform ease 1s;
    transform: scale(0);
    fill : var(--cryptee-green); 
    transform-origin: center;
}

#upload-cloud #check { opacity: 1; transform: scale(1); }
#upload-cloud #arrow { opacity: 0; transform: scale(0); }

#upload-cloud #check,
#upload-cloud #arrow {
    transform-origin: center;
    transition: 0.5s opacity ease, 0.5s transform ease;
}

body:not(.no-doc) #progress:not(.green) ~ #upload-cloud {
    fill: #000;
    opacity: 0.4;
    transform: scale(1);
}

.dm body:not(.no-doc) #progress:not(.green) ~ #upload-cloud {
    fill: #FFF;
}

body:not(.no-doc) #progress:not(.green) ~ #upload-cloud #arrow {
    animation: uploadCloudArrow 1s linear infinite;
    transform: scale(1);
}

body:not(.no-doc) #progress:not(.green) ~ #upload-cloud #check {
    transform: scale(0);
    opacity: 0;
}

@keyframes uploadCloudArrow {
    0% {
        transform: translateY(0.5rem) scale(0.5);
        opacity: 0;
    }
    30% { 
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    70% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-0.5rem) scale(0.5);
        opacity: 0;
    }
}



/* -----------------------------
-------------------------------- 
 
table of contents 
 
--------------------------------
----------------------------- */

#tableofcontents > * { 
    margin-top: 0.5rem; 
    cursor: pointer;
    display: block;
}

#tableofcontents:empty::before {
    content: "looks like you don't have any headings in your document. once you add headings to your document – which you can do using the 'H1', 'H2', 'H3' buttons in the editor – your headings will show up here in the table of contents. you can click on a heading here in the table of contents to scroll to the heading inside your document, and navigate through long documents";
    line-height: 1.5rem;
    font-weight: 350;
}


/* -----------------------------
-------------------------------- 
 
HOTKEYS MODAL 
 
--------------------------------
----------------------------- */

#modal-hotkeys table {
    width: 100%;
    font-size: 0.9rem;
}

/* -----------------------------
-------------------------------- 
 
DELETING MODALS
 
--------------------------------
----------------------------- */

#making-online-filenames p::before, 
#deleting-filenames p::before {
    
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    content: "\ECEB";
    
    display: inline-block;
    margin-top: -0.5rem;
    margin-right: 1rem;

    font-size: 1rem;
    line-height: 1rem;
    width: 1rem;
    vertical-align: middle;
    margin-left: 0rem;
    margin-right: 0.75rem;
}   


#making-online-filenames p, 
#deleting-filenames p {
    display: block;
    background-color: #fff;
    color: var(--cryptee-red);
    border-radius: 0.5rem;
    padding: 0.75rem;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.deleting-active-doc-tag, 
.deleting-not-synced-tag {
    width: calc(100% - 1rem);
    display: block;
    background-color: #f2f2f2;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-top: 0.75rem;
}








/* -----------------------------
-------------------------------- 
 
BLANK EDITOR 
 
--------------------------------
----------------------------- */

#blankEditor {

    grid-row: 4 / 5;
    grid-column: 1 / 2;

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

    display: grid;
    grid-template-columns: minmax(4rem, 1fr) minmax(14rem, 40rem) 1fr;
    grid-template-rows: minmax(0,1fr) minmax(16rem, 38rem) minmax(0,1fr);
}

#blankEditor > div {
    grid-column: 2/3;
    grid-row: 1/4;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    color: var(--cryptee-0);

    display: grid;
    grid-template-columns: 4fr 5fr;
    column-gap: 4rem;
    grid-template-rows: 1fr 2px auto 2px auto 1fr;
}

.dm #blankEditor > div { color: #f5f5f5; }

#blankEditor header {
    height: 0;
    display: block;
    grid-column: 1/-1;
}

#blankEditor hr {
    height: 0;
    grid-column: 1/-1;
    border: none;
    border-top: 2px solid #000;
}

.dm #blankEditor hr { border-top: 2px solid #f5f5f5; }

#blankEditor section {
    margin: 1rem 0 4.5rem 0; 
}

#blank-editor-recents .doc { 
    width: 100%; 
    opacity: 0.5;
    display: block;
    line-height: 1.5rem;
    margin-top: 0;
}

#blank-editor-recents .doc .icon,
#blank-editor-recents .doc .more,
#blank-editor-recents .doc .fldr,
#blank-editor-recents .doc .when,
#blank-editor-recents .doc .tags {
    display: none;
}

#blank-editor-recents .doc .name {
    margin-top: 0.425rem;
    line-height: 1.5rem;
    max-width: 100%;
}

#blank-editor-recents .doc.loading .info {
    animation: blinkOpacity 1s infinite linear forwards;
}

body.loading-doc #blank-editor-recents .doc:not(.loading) .info {
    opacity: 0 !important;
    pointer-events: none !important;
}

#blankEditor #getting-started p {
    cursor: pointer;
    opacity: 0.5;
    transition: 0.3s opacity var(--cryptee-cb);
}

#blankEditor p, 
#blankEditor h3,
#blankEditor details,
#blankEditor summary {
    user-select: none;
}

#blankEditor details > summary {
    list-style-type: none;
}

#blankEditor details > summary::-webkit-details-marker {
    display: none;
}

#blankEditor summary { 
    color: var(--cryptee-2); 
}

#blankEditor details > p     { color: var(--cryptee-1); }
.dm #blankEditor details > p { color: var(--cryptee-4); }

body:not(.no-doc) #blankEditor {
    opacity: 0 !important;
    pointer-events: none !important;
}

.quick-recent-docs.no-recents { 
    display: none !important; 
}

.quick-recent-docs .doc {
    position: relative;
}

body:not(.bubble) .quick-recent-docs .doc::before {
    position: absolute;
    left: -2.25rem;
    top: 0.25rem;
    height: 1.5rem;
    width: 1.5rem;
    line-height: 1.625rem;
    text-align: center;
    display: inline-block;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    border: 1px solid var(--cryptee-2);
    pointer-events: none !important;
    background-color: var(--cryptee-4);
    z-index: 1;

    opacity: 0;
    transition: 0.15s opacity linear;
}

body:not(.bubble) .quick-recent-docs .doc:nth-child(1)::before { content: "1"; }
body:not(.bubble) .quick-recent-docs .doc:nth-child(2)::before { content: "2"; }
body:not(.bubble) .quick-recent-docs .doc:nth-child(3)::before { content: "3"; }

.dm body:not(.bubble) .quick-recent-docs .doc::before {
    background-color: var(--oled-safe-black);
}

body.loading-doc #blank-editor-recents .doc:not(.loading)::before {
    display: none !important;
}

@media (max-width : 800px) { 
    #blankEditor {
        grid-template-columns: minmax(4rem, 1fr) minmax(12rem, 40rem) 1fr;
    }

    #blankEditor .doc span { max-width: 16rem; }

    #blankEditor > div {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2px 4.5rem auto 2px 3rem auto 1fr;
    }

    body.bubble #blankEditor > div {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(4rem, 1fr) 2px 4.5rem auto 2px 3rem auto minmax(4rem, 1fr);
    }
    
    #blankEditor h3 {
        font-size: 1rem; 
        letter-spacing: 0;
        line-height: 1.5rem;
    }

    #blankEditor section { margin: 1rem 0 0.5rem 0; }
    #blank-editor-recents { 
        margin-bottom: 4rem !important;  
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #getting-started {
        margin-bottom: 0 !important;  
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body:not(.bubble) .quick-recent-docs .doc::before {
        left: auto;
        right: 0rem;
        top: 0.25rem;
    }
}

@media (max-height : 760px) {
    #blankEditor {
        grid-template-rows: minmax(0,1fr) minmax(16rem, calc(100vh - 8rem)) minmax(0,1fr);
    }
}







/* -----------------------------
-------------------------------- 
 
EDITOR STATES 
 
--------------------------------
----------------------------- */


body.loading-doc #desktopToolbar,
body.no-doc #desktopToolbar, 
body.loading-doc #mobileToolbar,
body.no-doc #mobileToolbar,
body.loading-doc #editorWrapper,
body.no-doc #editorWrapper {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.loading-doc #documentActionButtons button,
body.no-doc #documentActionButtons  button{
    transform: translateX(4rem) !important;
    pointer-events: none !important;
}

body.loading-doc .ql-editor,
body.no-doc .ql-editor {
    pointer-events: none !important;
}







body.loading-doc #statusMessage {
    opacity: 1;
    animation: blinkEntirely 1s infinite ease forwards;   
}

.dm body.loading-doc #statusMessage {
    color: var(--cryptee-4);
}


body.locked-doc #desktopToolbar > .ql-formats {
    opacity: 0.5 !important;
    pointer-events: none !important;
    filter: blur(4px);
}

body.locked-doc #desktopToolbar::before {
    content: "locked";
    position: absolute;
    right: 4rem;
    top: 1.675rem;
    width: calc(100% - 4rem);
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    color: black;
    letter-spacing: 0;
    opacity: 0.7;
    transition: 0.3s opacity ease;
}

.dm body.locked-doc #desktopToolbar::before {
    color: white;
}

/* exporting pdf */

body.exporting-pdf #desktopToolbar,
body.exporting-pdf #mobileToolbar,
body.exporting-pdf #upload-cloud {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.exporting-pdf #documentActionButtons {
    overflow: visible;
}

body.exporting-pdf #documentActionButtons button,
body.exporting-pdf #hotkeysButton,
body.exporting-pdf #helpButton {
    pointer-events: none !important;
}

body.exporting-pdf #documentActionButtons button i,
body.exporting-pdf #hotkeysButton i,
body.exporting-pdf #helpButton i { 
    opacity: 0 !important;
}

body.exporting-pdf #statusMessage {
    opacity: 1;
}


/* -----------------------------
-------------------------------- 
 
VIEWING MODE & FOCUS MODE
 
--------------------------------
----------------------------- */



body.viewing-doc #leftSlide:not(.activeSlide),
body.viewing-doc #progress,
body.focus-mode .fader {
    opacity: 0;
}

body.focus-mode #leftSlide {
    background-color: rgba(0,0,0,0);
}

body.focus-mode #logo {
    opacity: 0.2 !important;
    pointer-events: none !important;
}

html:not(.dm) body.focus-mode #logo {
    filter: invert(1) !important;
}

body.viewing-doc #desktopToolbar,
body.focus-mode #desktopToolbar,
body.focus-mode #leftSlide #explorerButtons button,
body.focus-mode #leftSlide #sliderCaret { 
    opacity: 0 !important; 
    pointer-events: none !important;
}

body.viewing-doc #documentActionButtons,
body.focus-mode #documentActionButtons {
    overflow: visible;
}

body.viewing-doc #documentActionButtons #panel-button-doctools,
body.focus-mode #documentActionButtons #panel-button-doctools {
    transform: translateY(-6.5rem);
}

body.viewing-doc #panel-doctools,
body.focus-mode #panel-doctools {
    transform: translate3d(0,-3.5rem,0);
}

body.viewing-doc #documentActionButtons button:not(#panel-button-doctools),
body.viewing-doc #hotkeysButton,
body.viewing-doc #helpButton,
body.focus-mode #documentActionButtons button:not(#panel-button-doctools),
body.focus-mode #hotkeysButton,
body.focus-mode #helpButton {
    pointer-events: none !important;
}

body.viewing-doc #documentActionButtons button:not(#panel-button-doctools) i,
body.viewing-doc #hotkeysButton i,
body.viewing-doc #upload-cloud,
body.viewing-doc #helpButton i,
body.focus-mode #documentActionButtons button:not(#panel-button-doctools) i,
body.focus-mode #hotkeysButton i,
body.focus-mode #upload-cloud,
body.focus-mode #helpButton i { 
    opacity: 0 !important;
}

body.viewing-doc #documentActionButtons #panel-button-doctools i,
body.focus-mode #documentActionButtons #panel-button-doctools i {
    opacity: 0.2 !important;
}

body.viewing-doc #panel-doctools button:not(#viewingModeButton),
body.focus-mode #panel-doctools button:not(#focusModeButton),
body.viewing-doc #panel-doctools hr,
body.focus-mode #panel-doctools hr {
    display: none !important;
}

body.viewing-doc #panel-doctools button i:last-child,
body.focus-mode #panel-doctools button i:last-child {
    margin-top: 0 !important;
}

body.viewing-doc #panel-doctools button span,
body.focus-mode #panel-doctools button span {
    line-height: 3rem;
}

body.viewing-doc:not(.starting),
body.viewing-doc.overflowBG:not(.starting),
body.focus-mode:not(.starting),
body.focus-mode.overflowBG:not(.starting) {
    background: var(--cryptee-4);
}

.dm body.viewing-doc:not(.starting),
.dm body.viewing-doc.overflowBG:not(.starting),
.dm body.focus-mode:not(.starting),
.dm body.focus-mode.overflowBG:not(.starting) {
    background: var(--oled-safe-black);
}

body.viewing-doc button[id^="panel-button"]:not(.active) i::before { content: "\F2C5"; }
body.focus-mode button[id^="panel-button"]:not(.active) i::before { content: "\EC05"; }

body.focus-mode #progress::-moz-progress-bar        { background: transparent !important; }
body.focus-mode #progress::-webkit-progress-value   { background: transparent !important; }

body.focus-mode #progress.yellow ~ #statusMessage {
    opacity: 0.5 !important;
}

body.focus-mode #statusMessage {
    text-align: center !important;
    padding-left: 0 !important;
}

/* -----------------------------
-------------------------------- 
 
OFFLINE MODE 
 
--------------------------------
----------------------------- */



body.offline .panel button.disabled-in-offline-mode .toggle {
    display: none;
}

body.offline .dropdown .disabled-in-offline-mode,
body.offline .panel .disabled-in-offline-mode,
body.offline .view .disabled-in-offline-mode {
    opacity: 0.2;
    pointer-events: none !important;
}

body.offline .dropdown::after,
body.offline .panel::after,
body.offline .view::after {
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    content: "\F2C1";
    position: absolute;
    font-size: 1.75rem;
    top: 0.5rem;
    right: 0.625rem;
    text-align: center;
    
    z-index: 1;
    color: white;
    opacity: 0.3;
}

body.offline .view::after {
    right: initial;
    left: 0.625rem;
}

body.offline .view .corner-action {
    display: none !important;
}

body.offline .dropdown::before,
body.offline .panel::before,
body.offline .view::before {
    width: calc(100% - 3.75rem);
    padding: 0.75rem 3rem 0.5rem 0.75rem;
    background-color: transparent;
}

body.offline .dropdown .delete,
body.offline .panel .delete,
body.offline .view .delete {
    background-color: transparent;
}

body.offline .dropdown .filesize {
    opacity: 0 !important; 
}

body.offline .cryptee-attachfile,
body.offline .ql-video {
    pointer-events: none !important;
    opacity: 0.2 !important;
}

body.offline #uploadFileButton,
body.offline #newFolderButton {
    display: none !important;
}

body.offline #upgrade { display: none; }
body:not(.offline) #offline-badge {display: none; }

body:not(.offline) #blankEditor .quick-offline {
    display: none !important;
}

body.offline #blankEditor .quick-recent-docs,
body.offline #blankEditor .quick-tips {
    display: none !important;
}

/* sorts all offline recent documents on the top  */
body.offline #recents .doc.offline { order: -1; }

body.offline #view-template-gallery .cryptee-templates {
    display: none !important;
}

body.offline #view-template-gallery .cryptee-templates::before {
    display: none !important;
}

body.offline #view-template-gallery  {
    max-height: 40rem;
}

body.offline #upload-cloud { opacity: 0 !important; }

/* -----------------------------
-------------------------------- 
 
MOBILE MODE 
 
--------------------------------
----------------------------- */

body.bubble:not([paper-stock]).bubble #rightSlide { background-color: white; }
.dm body.bubble:not([paper-stock]).bubble #rightSlide,
.dm body.bubble:not([paper-stock]).bubble .ql-editor { 
    background-color: var(--oled-safe-black); 
}

body.bubble #blankEditor,
body.bubble #editorWrapper {
    grid-row:    1/-1;
    grid-column: 1/-1;
}

body.bubble #blankEditor > div {
    padding: 0 0 0 1.5rem;
    max-width: calc(100% - 1.5rem);
    grid-row: 1/-1;
    grid-column: 1/-1;
}

body.bubble #blankEditor section {
    overflow: hidden;
}

body.bubble #blank-editor-recents,
body.bubble #getting-started {
    padding-right: 1rem;
}
 
body.bubble #blankEditor .doc span {
    max-width: calc(100% - 2rem);
}

body.bubble:not([paper-stock]) #editorWrapper .ql-editor {
    padding: 4rem 1.5rem 0rem 1.5rem;
}

body.bubble #desktopToolbar { 
    justify-content: flex-start;
    padding: 1rem 0 1rem 0.5rem;
    opacity: 1;
    width: 100%;
    margin: auto 0 auto auto;
    z-index: 1;
    grid-column: 1/-1;
    grid-row: 1/3;

    background: rgba(255,255,255,0.975);
}

.dm body.bubble #desktopToolbar {
    background: rgba(8,8,8,0.93);
}

body.bubble[paper-stock] #desktopToolbar { background: var(--cryptee-4) !important; }
.dm body.bubble[paper-stock] #desktopToolbar { background: var(--oled-safe-black) !important; }

body.bubble #desktopToolbar .ql-formats * {
    color: black;
    stroke: black;
    fill: black;
}

.dm body.bubble #desktopToolbar .ql-formats * {
    color: white;
    stroke: white;
    fill: white;
}

body.bubble #desktopToolbar .hidden-tablet {
    display: none;
}

body.bubble #documentActionButtons i, 
body.bubble #helpButton i,
body.bubble #hotkeysButton i  {
    opacity: 0.3;
}

.dm body.bubble #documentActionButtons i, 
.dm body.bubble #helpButton i,
.dm body.bubble #hotkeysButton i  {
    opacity: 0.4;
}

body.bubble #hotkeysButton,
body.bubble #upload-cloud {
    z-index: 2;
}

body.bubble #documentActionButtons {
    text-align: center;
    display: flex;
    flex-direction: row;
}

body.bubble #documentActionButtons button {
    will-change: transform;
    line-height: 2rem;
    height: 2rem;
    width: 2.75rem;
}

body.bubble #documentActionButtons button:first-child {
    margin-top: auto;
}

body.bubble #leftSlide.activeSlide #documentActionButtons button {
    transform: translateY(4rem) !important;
    pointer-events: none !important
}

body.bubble #viewingModeButton,
body.bubble #focusModeButton {
    display: none !important;
}

#mobileSliderCaret {
    opacity: 1;
    transition: 0.3s opacity ease;
    will-change: opacity;
}

body.bubble:not(.no-doc):not(.loading-doc) #rightSlide {
    min-width: 100%;
    max-width: 100%;
}

body.bubble:not(.no-doc):not(.loading-doc) #leftSlide.activeSlide ~ #rightSlide #mobileSliderCaret {
    opacity: 0.3;
}

body.bubble:not(.no-doc):not(.loading-doc) #leftSlide.activeSlide ~ #rightSlide #mobileSliderCaret i::before{
    content: "\f128";
}

body.bubble.no-doc.loading-doc #rightSlide.activeSlide {
    min-width: 100%;
    max-width: 100%;
    transition-property: transform, max-width, min-width, width;
    transition-timing-function: var(--cryptee-cb);
    transition-duration: 0.5s;
}

body.bubble.locked-doc #desktopToolbar::before {
    content: "\f097";

    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 350;
    position: absolute;
    left: 6.5rem;
    top: 0.5625rem;
    height: 3rem;
    line-height: 3rem;
    width: 3rem;
    
    color: #000;

    transform: scale(1.5);
}

.dm body.bubble.locked-doc #desktopToolbar::before {
    color: #FFF;
}

body.bubble.locked-doc #panel-button-doctools {
    opacity: 0;
}

body.bubble #blankEditor .quick-offline p {
    padding-right: 1.5rem;
}

/* -----------------------------
-------------------------------- 
 
DROPZONES
 
--------------------------------
----------------------------- */

#dropzone {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
}

#dropzone > div { 
    grid-row : 1 / -1; 
    
    display: grid;    
    grid-template-rows: 1fr 4rem 6rem 2rem 1fr;
    grid-template-columns: 1fr;
    padding: 4rem;
}

#explorer-dropzone { 
    grid-column : 1/2; 
    background-color: var(--cryptee-0); 
    color: var(--cryptee-4);
}

#document-dropzone { 
    grid-column : 2/3; 
    background-color: var(--cryptee-4); 
    color: var(--cryptee-0);
}

#dropzone.show {
    pointer-events: all !important;
}

#dropzone progress {
    opacity: 0;
    transition: 0.2s opacity ease;
}

#dropzone.show progress:not([value]) {
    opacity: 1 !important;
}

#dropzone.show progress:not([value]),
#dropzone.show div.highlight > progress {
    opacity: 1 !important;
}

#explorer-dropzone i {
    margin-top: -0.325rem;
    margin-right: 0.5rem;
}

body.no-doc #dropzone { grid-template-columns: 1fr; }
body.no-doc #document-dropzone { display: none; }

#dropzone button.close {
    display: block;
    opacity: 0.3;
    height: 2rem;
    width: 2rem;
    margin: 0;

    transform: rotate(45deg);
    transition: 1s opacity ease 5s, 1s transform ease 5s;
}

#dropzone:not(.show) button.close {
    opacity: 0;
    transform: rotate(0);
}


/* -----------------------------
-------------------------------- 
 
SPLIT VIEW MODE 
 
--------------------------------
----------------------------- */

@media (min-width : 1172px) {
    body:not(.pinned).split #desktopToolbar { width: calc(50% + 4rem); }
    body:not(.pinned).split #editorWrapper { width: calc(50% + 4rem); }
}

@media (min-width : 1172px) and (max-width:1831px) { 
    body:not(.pinned).split #desktopToolbar { grid-row: 1/4; }
}

@media (min-width : 1428px) {
    body.split.pinned #desktopToolbar { width: calc(50% - 32px + 6rem); }
    body.split.pinned #editorWrapper { width: calc(50% - 32px + 6rem); }
}

@media (min-width : 1428px) and (max-width:2087px) { 
    body.split.pinned #desktopToolbar { grid-row: 1/4; }
}

@media (max-width : 1273px) { 
    body[paper-stock].pinned #desktopToolbar { grid-row: 1/4; }
}

@media (max-width : 1299px) { 
    body.pinned #desktopToolbar { grid-row: 1/4; }
}


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

PINNED 

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


body.pinned #rightSlide {
    min-width: calc(100% - 320px);
    max-width: calc(100% - 320px);
}

body.pinned #sliderPin i::before {
    content: "\F038";
}
    
body.pinned #sliderPin { 
    opacity: 1; 
    height: 4rem;
}

body.pinned #sliderCaret {
    opacity: 0 !important;
    pointer-events: none;
}

body.pinned #explorerButtons {
    grid-row: 5 / 9;
}




/* -----------------------------
-------------------------------- 
 
ATTENTION GRABBER 
 
--------------------------------
----------------------------- */

/* use these on the icons, not on the buttons */
button.grab-attention i { opacity: 1 !important; }

button.grab-attention i::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;

    width: 2rem;
    height: 2rem;
    border-radius: 2rem;

    background: radial-gradient(ellipse at center,  rgba(29,185,84,0) 0%,rgba(29,185,84,0) 50%,rgba(29,185,84,1) 100%); 

    z-index: -1;

    transform: scale(1);
    transform-origin: center center;
    animation: waveRipple 5s infinite ease-in-out forwards;

}

/* 5 seconds round */
@keyframes waveRipple {
    0%        { transform: scale(0);    }
    50%       { transform: scale(1); }
    100%      { transform: scale(0);    }
}






/* -----------------------------
-------------------------------- 
 
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; }
.is-hidden-on-live-env .copy-on-click {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-flex;
    max-width: 100%;
}



/* -----------------------------
-------------------------------- 
 
TEMPLATE GALLERY 
 
--------------------------------
----------------------------- */

.template-mode {
    border: 1px solid var(--cryptee-4);
    border-radius: 2rem;
    height: 2rem;
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem;
}

.template-mode input { display: none !important; }
.template-mode label { 
    height: 2rem;
    line-height: 2rem;
    color: var(--cryptee-4);
    padding: 0 0.5rem;
    border-radius: 2rem;
    cursor: pointer;
    user-select: none;
    transition: 0.3s all ease;
}

.template-mode label:has(input:checked) {
    background-color: var(--cryptee-4);
    color: var(--cryptee-0);
}

#view-template-gallery .user-templates,
#view-template-gallery .cryotee-templates {
    width: 100%;
}

#view-template-gallery .user-templates:not(:has(.template))::before {
    content: "create docs faster with templates! click 'save as template' in the 'document' menu and your templates —which are stored encrypted— will appear here.";
    line-height: 1.5rem;
    color: var(--cryptee-2);
    font-weight: 350;
    white-space: pre;
    display: block;
    max-width: 100%;
    text-wrap:balance;

    padding-bottom: 2.5rem;
}

body #view-template-gallery .user-templates:not(:has(.template))::after {
    content: "";
    background-image: url(../imgs/in-app-guides/template-button-guide-desktop.webp);
    width: 100%;
    height: 14.5rem;
    display: block;

    background-position: top right;
    background-repeat: no-repeat;
    background-size: 100%;
}

body.bubble #view-template-gallery .user-templates:not(:has(.template))::after {
    background-image: url(../imgs/in-app-guides/template-button-guide-mobile.webp);
    height: 6rem;
    background-position: top left;
    background-size: 100%;
}


#view-template-gallery .cryptee-templates::before {
    content: "templates by the cryptee team";
    line-height: 1.5rem;
    color: var(--cryptee-4);
    font-weight: 350;
    white-space: pre;
    display: block;
    max-width: 100%;
    text-wrap:balance;
    margin-bottom: 2rem;

    border-top: 1px solid var(--cryptee-3);
    padding-top: 2.5rem;
}

.template { 

    position: relative;

    background-color: var(--cryptee-folder);
    color: var(--cryptee-4);
    padding: 1rem;

    display: grid;
    grid-template-columns: 8rem 2fr 3fr;
    grid-template-rows: 1fr 2rem;
    column-gap: 1rem;

    transition: 0.5s all ease; 
    margin-bottom: 2rem;
}

.template:has(.preview-and-back:checked) {
    grid-template-columns: 18rem 2fr 3fr;
}

.template img {
    width: 100%;
    aspect-ratio: 1/1.3;
    background-color: var(--cryptee-4);
    object-fit: cover;
    object-position: top;
    grid-column: 1/2;
    grid-row: 1/-1;
    filter: invert(0);
}

.template img[src$="crypteepaper.svg"] { filter: invert(0.8); }

.template p {
    grid-column: 2/-1;
    grid-row: 1/2;
}

.template button {
    line-height: 2rem;
    margin-top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cryptee-green);
    border-radius: 2rem;
    text-align: center;
    color: #FFF;
}

.template .preview-and-back { display: none; }

.template label {
    line-height: 2rem;
    width: 100%;
    height: 100%;
    background-color: var(--cryptee-1);
    text-align: center;
    border-radius: 2rem;
    cursor: pointer;
    display: block;
}

.template label::before {
    font-family: remixicon !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.template label::after { content: "preview"; }
.template:has(.preview-and-back:checked) label::before { content: "\ea58 "; }
.template:has(.preview-and-back:checked) label::after { content: " back"; }

.template .button-delete-template {
    background-color: transparent;
    width: 2rem;
    height: 2rem;
    line-height: 2.125rem;
    text-align: center;
    position: absolute;
    top: 1rem;
    right: 1rem;

    transition: 0.15s background-color ease;
}

.cryptee-templates .template .button-delete-template {
    display: none !important;
}

.template.template.marked-for-deletion .name::after {
    content: "\a will be deleted. are you sure?";
    color: var(--cryptee-red);
    font-weight: 900;
    white-space: pre-wrap;
}

.template.template.marked-for-deletion .by, 
.template.template.marked-for-deletion label, 
.template.template.marked-for-deletion .button-use-template, 
.template.template.marked-for-deletion .button-delete-template { 
    display: none !important; 
}

.template:not(.marked-for-deletion) .button-cancel-delete-template,
.template:not(.marked-for-deletion) .button-confirm-delete-template {
    display: none !important;
}

.template .button-cancel-delete-template { background-color: var(--cryptee-1); }
.template .button-confirm-delete-template { background-color: var(--cryptee-red); }

/* -----------------------------
-------------------------------- 
 
MEDIA QUERIES 
 
--------------------------------
----------------------------- */
@media (max-width : 1064px) {
    body:not(.bubble) #desktopToolbar {
        grid-row: 1/4;
        min-width: 34rem;
        margin: auto;
    }
}

@media (max-width : 816px) {
    body:not(.bubble) #desktopToolbar {
        grid-row: 1/4;
        min-width: 34rem;
        margin: auto;
    }

    #link-box {
        max-width: calc(100% - 8rem);
    }
    
}

@media (max-width : 896px) {
    #sliderPin { display: none !important; }
}

@media (max-width : 703px) {
    body:not(.bubble) #desktopToolbar {
        grid-row: 2/3;
        width: 100%;
        min-width: 16rem;
    }

    #view-template-gallery { max-height: calc(100% - 4rem); }
}

@media (max-width : 544px) {
    .modal.wide {
        width: 12rem;
    }    

    .modal table {
        font-size: 0.75rem;
    }

    .dropdown {
        left: auto;
        right: 1.75rem;
    }

    #panel-sort { left: 3.5rem; }

    #view-template-gallery {
        grid-template-columns: 1fr 5.5rem;
        grid-template-rows: 5.5rem 5.5rem 1fr;
        max-width: 20rem;
    }

    #view-template-gallery .corner-action {
        grid-column: 1/-1;
        grid-row: 2/3;
        margin-left: 2rem;
        margin-right: 2rem;
        justify-content: space-between;
    }

    body.offline #view-template-gallery {
        max-height: 14rem;
    }

    body.offline #view-template-gallery .view-content {
        max-height: 18rem;
        grid-row: 2/4;
    }

    body:not(.offline) #view-template-gallery .view-content {
        grid-row: 3/4;
    }

    #view-template-gallery .user-templates[count="0"]::before {
        text-align: justify;
    }

    .template {
        display: block;
        width: 14rem;
        margin: 0 auto 2rem auto;
    }

    .template p { margin-bottom: 1rem; text-align: center; }
    .template label { display: none !important; }

    .template img {
        height: 13rem;
        width: 9rem;
        margin: 0 auto;
        display: block;
    }
}

@media (max-width: 348px) {
    .hidden-tiny { display: none; }
    body.bubble #desktopToolbar #documentActionButtons button { width:2.7rem;}
}



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

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

    /* -----------------------------
    -------------------------------- 
     
    LEFT MENU 
     
    --------------------------------
    ----------------------------- */
    #searchInput:hover:placeholder-shown ~ #searchTips,
    #searchInput:hover:not(:placeholder-shown) ~ #searchClear,
    #searchInput:hover + #searchProgress {
        opacity: 0.5;
    }

    #searchTips:hover,
    #searchInput:focus:placeholder-shown ~ #searchTips:hover,
    #searchInput:focus:not(:placeholder-shown) ~ #searchClear:hover,
    #searchInput:hover:focus + #searchProgress {
        opacity: 1;
    }

    #explorerButtons button:hover::after,
    #sliderCaret:hover::after {
        opacity: 1;
    }

    #logo:hover,
    #documentActionButtons button:hover i, 
    #helpButton:hover i,
    #hotkeysButton:hover i,
    #documentActionButtons button:hover::before, 
    #helpButton:hover::before,
    #hotkeysButton:hover::before {
        opacity: 1;
    }

    #leftSlide:not(.activeSlide) #explorerButtons button:hover,
    #explorerButtons button:hover,
    #sliderCaret:hover {
        opacity: 1 !important;
    }

    #explorerButtons button:hover,
    #explorerButtons button:hover i {
        animation-play-state: paused !important;
        color: #FFF !important;
    }

    #sliderCaret:hover i {
        transform: scale(1.5);
    }

    .actionFloater:hover i:first-child {
        transform: scale(1.25);
    }
    
    .actionFloater i:hover:last-of-type {
        opacity: 1;
    }

    .actionFloater button:hover {
        background-color: rgba(29,185,84,0.7) !important;
    }
    
    #selectionsFloat:hover {
        background-color: #242424 !important;
    }

    /* DOCUMENT & SUBFOLDER */
    .folderheader button:hover,
    .subfolder:hover .more,
    .subfolder:hover,
    .doc:hover .more,
    .doc:hover {
        opacity: 1 !important;
    }
    
    .doc:not(.selected) .icon:hover i::before {
        content: "\EB85" !important;
    }
    
    .doc.selected .icon:hover i::before {
        content: "\EB83" !important;
    }

    /* FOLDER */
    .folder:hover {
        opacity: 1;
    }

    /* dropdowns */
    .dropdown i[color]:hover {
        transform: scale(1.5);
    }
    
    .dropdown button:hover,
    .panel button:hover { 
        background-color: black; 
    }

    .dropdown button.red:hover,
    .panel button.red:hover { 
        background-color: rgba(204,1,1,0.7); 
    }

    .dropdown button.green:hover,
    .panel button.green:hover { 
        background-color: rgba(29,185,84,0.7); 
    }

    .dropdown button.yellow:hover,
    .panel button.yellow:hover { 
        background-color: #dea300; 
    }

    #activeDocFolderButton:hover i::before,
    #loadParentOfDocButton:hover i::before {
        content: "\ED6F";
    }

    body:not([paper-stock]) #paper-mode-button:hover,
    body[paper-stock] #panel-pagesetup p:hover {
        opacity: 1 !important;
    }

    body.locked-doc #desktopToolbar:hover:before {
        opacity: 1;
    }

    .table-picker-cell { color: transparent !important; }

    .table-picker-cell:hover {
        background-color: var(--cryptee-green);
    }

    #file-viewer-nav button:hover { opacity: 1 !important;}

    /* THIS WAS OVERFLOW:HIDDEN TO PREVENT SOMETHING, BUT CAN'T REMEMBER WHAT. TEST IN WINDOWS & LINUX */
    #documentActionButtons { overflow: visible; }

    #blankEditor #getting-started p:hover {
        opacity: 1;
    }

    body:not(.bubble) .quick-recent-docs .doc:hover::before {
        opacity: 1;
        animation: keyClick 1s var(--cryptee-cb) 0.5s 3;
    }

    #panel-new-doc .confirm:hover svg g rect:not(:first-child),
    #panel-new-doc .confirm:hover svg g circle,
    #panel-new-doc .confirm:hover svg g path {
        fill: var(--cryptee-1);
    }

    #panel-copy-doc .confirm:hover {
        opacity: 1;
    }
    
    #new-doc-target-folder:hover, 
    #copy-doc-target-folder:hover {
        color: var(--cryptee-4);
    }

    #new-doc-target-folder:hover::before,
    #copy-doc-target-folder:hover::before {
        content: "\ED66";
    }

    #new-doc-target-folder:hover::after,
    #copy-doc-target-folder:hover::after {
        opacity: 1;
        transform: translateX(0rem);
    }

    #panel-saveas-template button:hover {
        transform: scale(0.9);
    }

    #panel-saveas-template button:hover img {
        transform: scale(0.8) rotate(135deg);
    }

    .creation-folder-and-input p:hover + input {
        padding-left: 6rem !important;
        color: transparent !important;
    }

    .creation-folder-and-input p:hover + input::placeholder { color: transparent !important; }
    .creation-folder-and-input p:hover + input:-ms-input-placeholder { color: transparent !important; }
    .creation-folder-and-input p:hover + input::-ms-input-placeholder { color: transparent !important; }
    
    @-moz-document url-prefix() {
        .creation-folder-and-input p:hover + input::placeholder    { color: transparent !important; }
    }
    
    #new-doc-recos time:hover::before,
    #copy-doc-recos time:hover::before {
        color: var(--cryptee-yellow);
    }

    #new-doc-recos:has(time:hover) ~ .hints::after {
        color: var(--cryptee-yellow);
        content: "quickly name the doc with today's date/time";
    }

    .template .button-delete-template:hover {
        background-color: var(--cryptee-red);
    } 

    .comment .delete:hover {
        border-bottom: none !important;
        background-color: var(--cryptee-red) !important;
    }
}






/* -----------------------------
-------------------------------- 
 
TOUCHSCREEN DEVICE 
ENABLE TOUCH SPECIFIC THINGS 

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

@media (-moz-touch-enabled: 1), (pointer:coarse) {  

    #leftSlide { overflow: hidden; }

    #leftListWrapper[show="results"] > #results      button.more { opacity: 1 !important; }
    #leftListWrapper[show="recents"] > #recents      button.more { opacity: 1 !important; }
    #leftListWrapper[show="folders"] > #folders      button.more { opacity: 1 !important; }
    #leftListWrapper[show="folder"]  > #activeFolder button.more { opacity: 1 !important; }

}





/* -----------------------------
-------------------------------- 
 
PRINT MODE 
 
--------------------------------
----------------------------- */


@page {
    size: auto;
    margin-top: 2cm;
    margin-bottom: 2cm;
}

@media print {
    
    * { transition: none !important; }

    html, body {
        position: relative !important;
        height: auto !important;
        overflow: auto !important;
        padding: 0 !important;
        background: transparent !important;
        font-size: 12pt !important;
    }

    .swiper-container, .swiper-wrapper {
        transform: translate3d(0px, 0px, 0px) !important;
        width: 100% !important;
        height: auto !important;
        overflow: auto !important;
        padding: 0 !important;
    }

    #leftSlide, 
    #rightSlide > *:not(#editorWrapper),
    #rightSlide > #editorWrapper > *:not(.ql-editor), 
    body > *:not(.swiper-container) {
        display: none !important; 
    }

     
    #rightSlide {
        padding: 0 !important;
        height: auto !important;
        max-width: 100% !important;
        overflow: auto !important;
        display: block !important;
        background-color: transparent !important;
    }

    #editorWrapper {
        padding: 0 !important;
        grid-row: 1 / -1;
        grid-column: 1 / -1;
        overflow: auto !important;
        height: auto !important;
        width: auto !important;
    }
    
    .ql-editor {
        position: relative !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: auto !important;
        background-color: transparent !important;
    }

}



/* -----------------------------
-------------------------------- 
 
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 */