/* -----------------------------
-------------------------------- 
 
TOOLBAR OVERRIDES 
 
--------------------------------
----------------------------- */


.ql-formats {
    margin-right: 0.625rem !important;
    user-select: none !important;
}

.ql-formats * {
    box-shadow: none;
    outline: none;
}

.ql-formats > * {
    cursor: pointer;
    user-select: none !important;
    display: inline-block;
    width: 2rem !important;
    height: 2rem !important;
    line-height: 2rem !important;
    font-size: 1rem !important;
    text-align: center;
    padding: 0 !important;
    margin:0 !important;
    vertical-align: middle;
}

.ql-formats i {
    vertical-align: middle;
}

.ql-formats:last-of-type {
    margin-right: 0!important;
}

.ql-picker:not(.ql-background):not(.ql-align):not(.ql-line-height):not(.ql-color):not(.ql-font), 
.ql-picker:not(.ql-background):not(.ql-align):not(.ql-line-height):not(.ql-color):not(.ql-font) .ql-picker-label {
    width: 2.125rem !important;
    margin-right: 0.5rem !important;
    text-align: left; 
}

.ql-picker, 
.ql-picker-label{
    box-shadow: none;
    outline: none;
    border: none !important;
    padding: 0 !important;
}

.ql-picker-label::before {
    display: inline-block;
    line-height: 2rem !important;
    font-size: 1rem !important;
}

.ql-formats .cryptee-new-comment {
    padding: 0.65rem 0.5rem 0.5rem 0.5rem !important;
}

#mobileToolbar .cryptee-new-comment {
    padding: 0.5rem 0.925rem !important;
}

.ql-formats .cryptee-new-comment svg,
#mobileToolbar .cryptee-new-comment svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
}

.ql-formats .cryptee-new-comment.active svg g
#mobileToolbar .cryptee-new-comment.active svg g {
    stroke: var(--cryptee-yellow) !important;
}

#mobileToolbar .cryptee-new-comment path {
    fill: #aaa !important;
}

.ql-formats * { 
    color: var(--cryptee-0); 
    fill: var(--cryptee-0);
}

.dm .ql-formats * { 
    color: var(--cryptee-4); 
    fill: var(--cryptee-4);
}


.ql-toolbar button.ql-active,
.ql-toolbar .ql-picker-label.ql-active,
.ql-toolbar .ql-picker-item.ql-selected,
.ql-toolbar .ql-picker-label:focus .ql-stroke, 
.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-toolbar .ql-picker-label:focus .ql-stroke-miter, 
.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-toolbar .ql-picker-label.ql-selected .ql-stroke-miter,
.ql-toolbar .ql-active .ql-fill,
.ql-toolbar button.ql-active i,
.ql-toolbar .ql-picker-label.ql-active i,
.ql-toolbar .ql-picker-item.ql-selected i,
.ql-toolbar .ql-picker-label:focus .ql-stroke i, 
.ql-toolbar .ql-picker-label.ql-active .ql-stroke i,
.ql-toolbar .ql-picker-label:focus .ql-stroke-miter i, 
.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter i,
.ql-toolbar .ql-picker-label.ql-selected .ql-stroke-miter i,
.ql-toolbar .ql-active .ql-fill i {
    color: var(--cryptee-green) !important;
    stroke: var(--cryptee-green) !important;
}







/* -----------------------------
-------------------------------- 
 
FONTS / FONT DROPDOWN 
 
--------------------------------
----------------------------- */


#panel-fonts {
    top: var(--top-pos, 3.5rem);
    left: var(--left-pos, 5rem);
    right: auto;

    width: 20rem;
    min-height: 31.5rem;
    border-radius: 1rem;
    
    background-color: #404040;
    display: grid;
    grid-template-columns: 1fr 3rem;
    grid-template-rows: 1fr;
    overflow: hidden;

    transform: translate3d(0, -1.5rem, 0);
}

#panel-fonts.show {
    transform: translate3d(0, 0, 0);
}

#panel-fonts > div { 
    height: 100%;
}

#font-families-wrapper {
    grid-column: 1/2;
    z-index: 2;

    padding: 0.5rem 0;
    box-sizing: border-box;
    background-color: #000;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);
    border-radius: 1rem;

    color: #FFF;
}

#font-sizes-wrapper {
    grid-column: 2/3;
    z-index: 1;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 8rem;
    box-sizing: border-box;
    padding: 0.5rem;
    row-gap: 0.5rem;
}

#font-sizes-wrapper > div {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 2rem;
    background-color: #000;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#font-sizes-wrapper button {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    padding-top: 0.125rem !important;
    color: #bbb;
    background-color: none !important;
    text-align: center;
    padding: 0;
    margin: 0;
    border-radius: 2rem;
    z-index: 2;

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

#font-sizes-wrapper button i {
    width: 2rem;
    line-height: 2rem;
    height: 2rem;
}

/* paragraph button */
#font-sizes-wrapper button[value="p"] {
    line-height: 1.5rem;
    padding-bottom: 0.25rem !important;
}

.selection-highlight {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    background-color: #FFF;
    border: 1px solid #FFF;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    box-sizing: border-box;
    transform: translateY(0);
    transition: 0.5s transform var(--cryptee-cb), 0.5s background-color var(--cryptee-cb);
}

.paragraph-styles .selection-highlight {
    top: auto;
    bottom: 0.75rem;
}

#font-sizes-wrapper button[selected] { color : #000 !important; }


/* font size */
#font-sizes-wrapper button[selected][size="8px"]  ~ .selection-highlight { transform: translateY(0);     }
#font-sizes-wrapper button[selected][size="10px"] ~ .selection-highlight { transform: translateY(2rem);  }
#font-sizes-wrapper button[selected][size="13px"] ~ .selection-highlight { transform: translateY(4rem);  }
#font-sizes-wrapper button[selected][size="16px"] ~ .selection-highlight { transform: translateY(6rem);  }
#font-sizes-wrapper button[selected][size="18px"] ~ .selection-highlight { transform: translateY(8rem);  }
#font-sizes-wrapper button[selected][size="20px"] ~ .selection-highlight { transform: translateY(10rem); }
#font-sizes-wrapper button[selected][size="22px"] ~ .selection-highlight { transform: translateY(12rem); }
#font-sizes-wrapper button[selected][size="24px"] ~ .selection-highlight { transform: translateY(14rem); }
#font-sizes-wrapper button[selected][size="30px"] ~ .selection-highlight { transform: translateY(16rem); }
#font-sizes-wrapper button[selected][size="36px"] ~ .selection-highlight { transform: translateY(18rem); }
#font-sizes-wrapper button[selected][size="40px"] ~ .selection-highlight { transform: translateY(20rem); }
#font-sizes-wrapper button[selected][size="48px"] ~ .selection-highlight { transform: translateY(22rem); }

/* paragraph styles */
#font-sizes-wrapper button[selected]:not([value]):not([size]) ~ .selection-highlight  { transform: translateY(0);      }
#font-sizes-wrapper button[selected][value="3"] ~ .selection-highlight    { transform: translateY(-2rem);  }
#font-sizes-wrapper button[selected][value="2"] ~ .selection-highlight    { transform: translateY(-4rem);  }
#font-sizes-wrapper button[selected][value="1"] ~ .selection-highlight    { transform: translateY(-6rem);  }

#font-sizes-wrapper button[selected][size="16px"] { color: #bbb !important; }
#font-sizes-wrapper button[selected][size="16px"] ~ .selection-highlight {  background-color: #000; }

#font-families-wrapper .fonts-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#font-families-wrapper .labels {
    line-height: 2rem;
    height: 2rem;
    padding: 0 1rem;
}

#font-families-wrapper .fonts-list + .labels {
    padding-top: 0.5rem;
    line-height: 1.5rem;
}

#font-families-wrapper .labels small {
    margin-top: 0;
    color: var(--cryptee-3);
    line-height: 2rem;
}

#font-families-wrapper .labels small:nth-child(2) {
    float: right;
}

#font-families-wrapper .fonts-list .font {
    height: 2rem;
    line-height: 2rem;
    box-sizing: border-box;
    vertical-align: middle;
    font-weight: 350;
    padding: 0 0.25rem 0 1rem;
    width: calc(100% - 0.5rem);
    border-radius: 0 0.5rem 0.5rem 0;

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

    background-color: transparent;
    transition: 0.3s background-color ease;
    
    cursor: pointer;
}

#font-families-wrapper .fonts-list .font[selected] {
    background-color: #404040;
}

#font-families-wrapper .fonts-list .font button {
    height: 1.5rem;
    padding: 0;
    color: #FFF;
    font-size: 0.75rem;
    grid-column: 2/3;
    grid-row: 1/2;
    text-align: center;
    line-height: 1.625rem;
    margin-top: 0.25rem;
    background-color: #000;
    border-radius: 6px;

    opacity: 1;

    transition: 0.3s opacity ease;
}

#font-families-wrapper .fonts-list .font button::before { content: "set default"; }
#font-families-wrapper .fonts-list .font[default] button::before { content: "default"; }

#font-families-wrapper .fonts-list .font:not([selected]):not([default]) button {
    opacity: 0 !important;
    pointer-events: none !important;
}

#font-families-wrapper .fonts-list .font[default] button {
    background-color: transparent;
    pointer-events: none !important;
    text-align: right;
    padding-right: 0.25rem;
}

#font-families-wrapper .fonts-list .font .examples {
    grid-column: 2/3;
    grid-row: 1/2;
    text-align: right;
    padding-right: 0.25rem;
    box-sizing: border-box;
    color: #888;

    transition: 0.3s color ease;
}




/* FONT PREVIEWS & OVERRIDES */


.ql-editor, 
.ql-tooltip {
    font-family: "Josefin Sans"; 
}

/* DEFAULT / DOCUMENT FONTS  */
.ql-editor[font="arial"]            { font-family: 'Arial', sans-serif; }
.ql-editor[font="comic-sans-ms"]    { font-family: 'Comic Sans MS', sans-serif; }
.ql-editor[font="courier"]          { font-family: 'Courier', sans-serif; }
.ql-editor[font="georgia"]          { font-family: 'Georgia', sans-serif; }
.ql-editor[font="helvetica"]        { font-family: 'Helvetica', sans-serif; }
.ql-editor[font="josefin-sans"]     { font-family: 'Josefin Sans', sans-serif; }
.ql-editor[font="palatino"]         { font-family: 'Palatino', sans-serif; }
.ql-editor[font="tahoma"]           { font-family: 'Tahoma', sans-serif; }
.ql-editor[font="times-new-roman"]  { font-family: 'Times New Roman', sans-serif; }
.ql-editor[font="verdana"]          { font-family: 'Verdana', sans-serif; }
.ql-editor[font="arimo"]            { font-family: 'Arimo', sans-serif; }
.ql-editor[font="inter"]            { font-family: 'Inter', sans-serif; }
.ql-editor[font="markazi"]          { font-family: 'Markazi', sans-serif; }
.ql-editor[font="inconsolata"]      { font-family: 'Inconsolata', sans-serif; }

/* USER-SELECTED OVERRIDES & DROPDOWNS */

.ql-font-arial,
#font-families-wrapper .fonts-list .font[font="arial"] .name,
#font-families-wrapper .fonts-list .font[font="arial"] .examples {
    font-family: 'Arial', sans-serif !important;
}

.ql-font-comic-sans-ms,
#font-families-wrapper .fonts-list .font[font="comic-sans-ms"] .name,
#font-families-wrapper .fonts-list .font[font="comic-sans-ms"] .examples {
    font-family: 'Comic Sans MS', sans-serif !important;
}

.ql-font-courier,
#font-families-wrapper .fonts-list .font[font="courier"] .name,
#font-families-wrapper .fonts-list .font[font="courier"] .examples {
    font-family: 'Courier', sans-serif !important;
}

.ql-font-georgia,
#font-families-wrapper .fonts-list .font[font="georgia"] .name,
#font-families-wrapper .fonts-list .font[font="georgia"] .examples {
    font-family: 'Georgia', sans-serif !important;
}

.ql-font-helvetica,
#font-families-wrapper .fonts-list .font[font="helvetica"] .name,
#font-families-wrapper .fonts-list .font[font="helvetica"] .examples {
    font-family: 'Helvetica', sans-serif !important;
}

.ql-font-josefin-sans,
#font-families-wrapper .fonts-list .font[font="josefin-sans"] .name,
#font-families-wrapper .fonts-list .font[font="josefin-sans"] .examples {
    font-family: 'Josefin Sans', sans-serif !important;
}

.ql-font-palatino,
#font-families-wrapper .fonts-list .font[font="palatino"] .name,
#font-families-wrapper .fonts-list .font[font="palatino"] .examples {
    font-family: 'Palatino', sans-serif !important;
}

.ql-font-tahoma,
#font-families-wrapper .fonts-list .font[font="tahoma"] .name,
#font-families-wrapper .fonts-list .font[font="tahoma"] .examples {
    font-family: 'Tahoma', sans-serif !important;
}

.ql-font-times-new-roman,
#font-families-wrapper .fonts-list .font[font="times-new-roman"] .name,
#font-families-wrapper .fonts-list .font[font="times-new-roman"] .examples {
    font-family: 'Times New Roman', sans-serif !important;
}

.ql-font-verdana,
#font-families-wrapper .fonts-list .font[font="verdana"] .name,
#font-families-wrapper .fonts-list .font[font="verdana"] .examples {
    font-family: 'Verdana', sans-serif !important;
}

/* L10N FONTS */

.ql-font-arimo,
#font-families-wrapper .fonts-list .font[font="arimo"] .name,
#font-families-wrapper .fonts-list .font[font="arimo"] .examples {
    font-family: 'Arimo', sans-serif !important;
}

.ql-font-inter,
#font-families-wrapper .fonts-list .font[font="inter"] .name,
#font-families-wrapper .fonts-list .font[font="inter"] .examples {
    font-family: 'Inter', sans-serif !important;
}

#font-families-wrapper .fonts-list .font[font="markazi"] .name,
#font-families-wrapper .fonts-list .font[font="markazi"] .examples {
    font-size: 20px;
    font-family: 'Markazi', sans-serif !important;
}

.ql-font-markazi {
    font-family: 'Markazi', sans-serif !important;
}

.ql-font-inconsolata,
#font-families-wrapper .fonts-list .font[font="inconsolata"] .name,
#font-families-wrapper .fonts-list .font[font="inconsolata"] .examples {
    font-family: 'Inconsolata', sans-serif !important;
}

/* FONT EXAMPLES */

#font-families-wrapper .fonts-list .font[font="arimo"] .examples::after {
    content: "Aä " var(--cyrillic-script-ex) " " var(--greek-script-ex) " " var(--hebrew-script-ex) !important;
}

#font-families-wrapper .fonts-list .font[font="inter"] .examples::after {
    content: "Aä " var(--cyrillic-script-ex) " " var(--greek-script-ex) !important;
}

#font-families-wrapper .fonts-list .font[font="markazi"] .examples::after {
    content: "Aä " var(--arabic-script-ex) !important;
}

#font-families-wrapper .font[default='true'] .examples { 
    display : none !important;
}


/* MOBILE / BUBBLE OVERRIDES */

body.bubble #panel-fonts {
    top: auto;
    bottom: 5rem;
    left: 1rem;

    transform: translate3d(0, 1.5rem, 0);
    /* min-height: 16.5rem; */
}

body.bubble #panel-fonts.show {
    transform: translate3d(0, 0, 0);
}

/* body.bubble #panel-fonts .font-sizes {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.bubble #panel-fonts .font-sizes button {
    display: none !important;
}

body.bubble #panel-fonts .fonts-list.system {
    overflow-y: scroll;
    max-height: 5rem;
}

body.bubble #panel-fonts .fonts-list.system .font[selected] {
   order: -1; 
} */


/* -----------------------------
-------------------------------- 
 
SIZE DROPDOWN 
 
--------------------------------
----------------------------- */

.ql-size .ql-picker-label {
    padding-top: 0.125rem !important;
    font-weight: 350;
}

.ql-size .ql-picker-options span {
    line-height: 2.5rem !important;
    height: 2.5rem !important;
    font-weight: 350;
    text-align: center;
}

.ql-size .ql-picker-options span:last-child {
    margin-bottom: 0.5rem;
}

.ql-size .ql-picker-options .ql-selected {
    color: #000 !important;
    font-weight: 700;
}

.dm .ql-size .ql-picker-options .ql-selected {
    color: white !important;
}

/* -----------------------------
-------------------------------- 
 
HEADER DROPDOWN 
 
--------------------------------
----------------------------- */

.ql-header .ql-picker-label:before,
.ql-header .ql-picker-item:before {
    display: inline-block;
    line-height: 2rem;
    height: 2rem;
    
    font-size: 1rem;
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
    cursor: pointer;
}

.ql-header .ql-picker-label[data-value="1"]:before,
.ql-header .ql-picker-item[data-value="1"]:before {
    content: "\EDE6" !important;
}

.ql-header .ql-picker-label[data-value="2"]:before,
.ql-header .ql-picker-item[data-value="2"]:before {
    content: "\EDE7" !important;
}

.ql-header .ql-picker-label[data-value="3"]:before,
.ql-header .ql-picker-item[data-value="3"]:before {
    content: "\EDE8" !important;
}

.ql-header .ql-picker-label:not([data-value]):before,
.ql-header .ql-picker-item:not([data-value]):before {
    line-height: 2.25rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    font-family: 'Josefin Sans' !important;
    content: "P" !important;
}



/* -----------------------------
-------------------------------- 
 
DIRECTION DROPDOWN 
 
--------------------------------
----------------------------- */

.ql-direction {
    height: 2rem !important;
    padding: 0.5rem !important;
}


/* -----------------------------
-------------------------------- 
 
COLOR PICKER DROPDOWN  
 
--------------------------------
----------------------------- */


.ql-color-picker .ql-picker-options {
    padding: 0.5rem !important;
    grid-template-columns: 1rem;
    grid-auto-rows: 1rem;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    width: auto !important;
    margin-left: 0rem !important;
}

.ql-color-picker .ql-picker-options span {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 1rem !important;
    object-fit: cover;
    transform: scale(1);

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

.ql-color-picker .ql-picker-options .ql-selected  {
    transform: scale(1.25);
    border: none !important;
}

.ql-color-picker .ql-picker-options .ql-selected::before {
    content: "\EB7B";
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #FFF !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    line-height: 1rem;
    font-size: 1rem;
}

.ql-color .ql-picker-options .ql-picker-item[data-value]:not(.ql-primary),
.ql-color .ql-picker-options .ql-picker-item[data-value="#000000"],
.ql-color .ql-picker-options .ql-picker-item[data-value="#ffff00"] {
    display: none;
}

.ql-color .ql-picker-options .ql-picker-item[data-value="#888888"] { display: block !important; }
.ql-color .ql-picker-options .ql-picker-item[data-value="#bbbbbb"] { display: block !important; order: 1;}


.ql-color.ql-color-picker .ql-picker-options .ql-picker-item:not([data-value]) {
    border: 1px solid #FFF !important;
    background-color: #000 !important;
    order: -1;
}

.dm .ql-color.ql-color-picker .ql-picker-options .ql-picker-item:not([data-value]) {
    background-color: #FFF !important;
    border: 1px solid var(--cryptee-0) !important;
    order: -1;
}

.ql-background.ql-color-picker .ql-picker-options .ql-picker-item:not([data-value]) {
    border: 1px solid #000 !important;
    background-color: #FFF !important;
    order: -1;
}

.dm .ql-background.ql-color-picker .ql-picker-options .ql-picker-item:not([data-value]) {
    background-color: var(--cryptee-0) !important;
    border: 1px solid #FFF !important;
    order: -1;
}

.ql-background .ql-picker-options .ql-picker-item[data-value] { display: none; }
.ql-background .ql-picker-options .ql-picker-item[data-value="#f06666"] { display: block; }
.ql-background .ql-picker-options .ql-picker-item[data-value="#ffc266"] { display: block; }
.ql-background .ql-picker-options .ql-picker-item[data-value="#66b966"] { display: block; }
.ql-background .ql-picker-options .ql-picker-item[data-value="#66a3e0"] { display: block; }
.ql-background .ql-picker-options .ql-picker-item[data-value="#c285ff"] { display: block; }
.ql-background .ql-picker-options .ql-picker-item[data-value="#888888"] { display: block; }
.ql-background .ql-picker-options .ql-picker-item[data-value="#bbbbbb"] { display: block; order: 1;}

.ql-color.ql-color-picker .ql-picker-options .ql-picker-item:not([data-value])::before,
.ql-background.ql-color-picker .ql-picker-options .ql-picker-item:not([data-value])::before {
    content: "\EB98";
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #FFF !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    line-height: 0.9rem;
    font-size: 0.9rem;
}

.ql-color.ql-color-picker .ql-picker-options .ql-picker-item:not([data-value])::before,
.dm .ql-background.ql-color-picker .ql-picker-options .ql-picker-item:not([data-value])::before {
    color: #FFF !important;
}

.dm .ql-color.ql-color-picker .ql-picker-options .ql-picker-item:not([data-value])::before,
.ql-background.ql-color-picker .ql-picker-options .ql-picker-item:not([data-value])::before {
    color: #000 !important;
}

/* -----------------------------
-------------------------------- 
 
ALIGN DROPDOWN 
 
--------------------------------
----------------------------- */

.ql-align .ql-picker-options {
    padding: 0.5rem !important;    
    margin-left: -0.25rem !important;
}

.ql-align .ql-picker-options span {
    line-height: 1.25rem;
}




/* -----------------------------
-------------------------------- 
 
LINE HEIGHT DROPDOWN 
 
--------------------------------
----------------------------- */

.ql-line-height svg { display: none !important; }
.ql-line-height .ql-picker-label { text-align: center; }
.ql-line-height .ql-picker-label:before {
    content: "\EEAD" !important;
    display: inline-block;
    line-height: 2rem;
    height: 2rem;
    
    font-size: 1rem;
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
    cursor: pointer;
}

.ql-line-height .ql-picker-options { margin: 0 !important; }
.ql-line-height .ql-picker-options .ql-picker-item::before {
    content: attr(data-label);
    font-size: 1rem;
    font-weight: 350;
}

.ql-line-height .ql-picker-options .ql-picker-item {
    text-align: left;
    text-transform: lowercase;
}

.ql-picker-label[data-value="1.5rem"  ] + .ql-picker-options > .ql-picker-item[data-value="1.5rem"  ]::before,
.ql-picker-label[data-value="1.725rem"] + .ql-picker-options > .ql-picker-item[data-value="1.725rem"]::before,
.ql-picker-label[data-value="1.875rem"] + .ql-picker-options > .ql-picker-item[data-value="1.875rem"]::before,
.ql-picker-label[data-value="2.25rem" ] + .ql-picker-options > .ql-picker-item[data-value="2.25rem" ]::before,
.ql-picker-label[data-value="2.625rem"] + .ql-picker-options > .ql-picker-item[data-value="2.625rem"]::before,
.ql-picker-label[data-value="3rem"    ] + .ql-picker-options > .ql-picker-item[data-value="3rem"    ]::before,
.ql-picker-label[data-value="4.5rem"  ] + .ql-picker-options > .ql-picker-item[data-value="4.5rem"  ]::before { 
    font-weight: 700; 
}

/* -----------------------------
-------------------------------- 
 
ALL DROPDOWNS  
 
--------------------------------
----------------------------- */

.ql-picker-options {
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2) !important;
    border: none !important;
    border-radius: 0.5rem;
    overflow: hidden;
    padding: 0rem 1rem !important;
    margin: 0 0 0 -1rem !important;
    z-index: 3 !important;

    opacity: 0;
    transform: translate3d(0,-0.5rem,0);
    pointer-events: none;
    display: grid !important;

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

.dm .ql-picker-options {
    background-color: var(--cryptee-1) !important;
    color: white;
}

.ql-expanded .ql-picker-options {
    opacity: 1;
    pointer-events: initial;
    transform: translate3d(0,0,0);
}

.ql-bubble .ql-picker-options {
    transform: translate3d(3rem,-0.5rem,0);
}



/* -----------------------------
-------------------------------- 
 
EDITOR OVERRIDES 
 
--------------------------------
----------------------------- */
.ql-container {
    border: none !important;
}

.ql-editor {

    background-color: white;
    
    padding: 4rem 4rem 0rem 4rem;

    height: 100%;
    width: 100%;
    max-width: 62rem;
    margin: auto;
    
    transform: scale(1);

    -webkit-overflow-scrolling: touch;

}

.swiper-container-ios .ql-editor {
    padding:4rem 4rem 60vh 4rem;
}


.ql-editor > *:last-child { margin-bottom: 4rem; }
.ql-editor > * { overflow: visible; }

.dm body:not([paper-stock]) .ql-editor {
    color: white;    
    background-color: var(--cryptee-0);
}

/* Firefox Justify Fix */
/* https://github.com/cryptee/web-client/issues/48 */
.ql-editor .ql-align-justify {
    white-space: normal;
}

/* to fix scroll jump issues */
/* https://github.com/quilljs/quill/issues/1374 */
.ql-clipboard {
    right: 0px !important;
    left: 0 !important;
    opacity: 0 !important;
    /* if you don't add this, browsers try to render the clipboard with the editor on the same layer, causing a massive 100,000px drawing overhead = resulting in ~450mb memory use. fucking hell */
    transform: translateZ(0);
}

/* -----------------------------
-------------------------------- 
 
PRE / SYNTAX / CODE  
 
--------------------------------
----------------------------- */


pre, .ql-syntax {
    font-family: monospace !important;
}




/* -----------------------------
-------------------------------- 
 
BULLETS 
 
--------------------------------
----------------------------- */
/* #region BULLETS */

.ql-editor[font="inter"] ul li::before {
    margin-top: 0;
}

.ql-editor[font="inter"] ul:not([data-checked]) li.ql-indent-2::before,
.ql-editor[font="inter"] ul:not([data-checked]) li.ql-indent-3::before {
    font-size: 0.75rem;
}



/* #endregion BULLETS */





/* -----------------------------
-------------------------------- 
 
HOVERS 
 
--------------------------------
----------------------------- */




@media (-moz-touch-enabled: 0), (pointer:fine) { 
    .ql-toolbar button:hover,
    .ql-toolbar button:focus,
    .ql-toolbar .ql-picker-label:hover,
    .ql-toolbar .ql-picker-item:hover {
        color: var(--cryptee-green) !important;
    }

    .ql-toolbar .ql-picker-label:hover .ql-stroke, 
    .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
    .ql-toolbar .ql-formats *:hover .ql-fill {
        stroke: var(--cryptee-green) !important;
        fill: var(--cryptee-green) !important;
    } 

    .ql-color-picker .ql-picker-options span:hover {
        transform: scale(1.25);
        border: none !important;
    }
}
















/* -----------------------------
-------------------------------- 
 
TABLES 
 
--------------------------------
----------------------------- */




crypteetabledata {
    display: block;
    /* visibility: hidden; */
    /* dont add this, it breaks tabledata */
    height: 0;
    width: 0;
    /* user-select: none; */
    /* don't add this, breaks table selection / copy paste in safari */
}

/* chromium has an arbitrary 1000 / 10000 row limit on grids. and that's not cool */
/* https://bugs.chromium.org/p/chromium/issues/detail?id=688640 */
/* so we use a flex-based approach instead, it performs much better than grid for this use case */

crypteetable {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    pointer-events: none;
    margin-top: 1rem;
    margin-bottom: 1rem;
    transition: 0.3s background-color ease;
    /* page-break-inside:auto;  */
}

crypteetablecell {
    width: calc(100% / var(--columns));
    min-width: 2rem;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    transition: 0.3s border ease, 0.3s background-color ease, 0.3s box-shadow ease;
    padding: 0.25rem 0.5rem;
    pointer-events: all;
    background-color: rgba(255, 255, 255, 0);
    height: auto;
    overflow: hidden;
    /* page-break-inside:avoid;  */
    /* page-break-after:auto; */
}

crypteetable.selected {
    background-color: #000;
}

crypteetablecell.warn,
crypteetable.warn {
    background-color: var(--cryptee-red);
    color: white;
}

crypteetablecell.insertAbove {
    box-shadow: 0px -2px 0px var(--cryptee-green), 0px 2px 0px var(--cryptee-green) inset;
}

crypteetablecell.insertBelow {
    box-shadow: 0px 2px 0px var(--cryptee-green), 0px -2px 0px var(--cryptee-green) inset;
}

crypteetablecell.insertRight {
    box-shadow: 2px 0px 0px var(--cryptee-green), -2px 0px 0px var(--cryptee-green) inset;
}

crypteetablecell.insertLeft {
    box-shadow: -2px 0px 0px var(--cryptee-green), 2px 0px 0px var(--cryptee-green) inset;
}

crypteetablecell * {
    height: auto;
    display: inline-block;
    line-height: initial;
}



/* -----------------------------
-------------------------------- 
 
TABLE META 
 
--------------------------------
----------------------------- */

crypteetable {
    --crypteetable-rounded-borders-radius : 0.5rem;
}

crypteetable[tablemeta~='appearance-rounded-borders']                                                   { border-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-child(1)                     { border-top-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(1)                { border-bottom-right-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="2"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(2)   { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="3"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(3)   { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="4"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(4)   { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="5"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(5)   { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="6"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(6)   { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="7"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(7)   { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="8"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(8)   { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="9"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(9)   { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="10"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(10) { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="11"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(11) { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="12"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(12) { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="13"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(13) { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="14"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(14) { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="15"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(15) { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="16"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(16) { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="17"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(17) { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="18"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(18) { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="19"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(19) { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }
crypteetable[columns="20"][tablemeta~='appearance-rounded-borders'] crypteetablecell:nth-last-child(20) { border-bottom-left-radius: var(--crypteetable-rounded-borders-radius); }





/* -----------------------------
-------------------------------- 
 
TABLE DROPDOWN 
 
--------------------------------
----------------------------- */



#table-dropdown {
    transform: translate3d(0, -1rem, 0);
    transition-duration: 0.15s;
    min-width: 13.5rem;
    height: 21.5rem;
    right: auto;
}

#table-dropdown.show {
    transform: translate3d(0, 0, 0);
}

#table-picker-header {
    grid-row: span 2;
    display: flex;
}

#table-picker-header h2 { flex-grow: 1; } 

#table-picker-header > p { 
    margin-top: 0;
    width: 4.5rem;
    height: 4.5rem;
    line-height: 4.5rem;
    background-color:  var(--cryptee-0);
    
    border-radius: 0.5rem;
    border: 1px solid var(--cryptee-1);
    text-align: center;
    user-select: none;

    transition: 0.3s border linear;
}

#table-picker-header.selection > p {
    border: 1px solid var(--cryptee-green);
}

#table-contextual-button {
    position: absolute;
    top: 0;
    left: 0;
    
    font-size:      1.25rem;
    border-radius:  1.5rem;
    line-height:    1.5rem;
    height:         1.5rem;
    width:          1.5rem;
    
    z-index: 9;
    text-align: center;

    background-color: #000;
    color: #FFF;

    opacity: 1;
    cursor: pointer;
    transition: 0.3s opacity ease;

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


#table-contextual-button:not(.visible) {
    pointer-events: none !important;
    opacity: 0;
}

#table-contextual-button.warn,
#table-contextual-button.insertRight,
#table-contextual-button.insertLeft,
#table-contextual-button.insertAbove,
#table-contextual-button.insertBelow {
    pointer-events: none !important;
    opacity: 0;
}

.dm body:not([paper-stock]) #table-contextual-button {
    background-color: var(--cryptee-1);
    
}



.quill-toolbar.in-table .ql-header,
.quill-toolbar.in-table .ql-blockquote,
.quill-toolbar.in-table .ql-code-block,
.quill-toolbar.in-table .ql-clean,
.quill-toolbar.in-table .ql-list,
.quill-toolbar.in-table .ql-indent,
.quill-toolbar.in-table .ql-hr,
.quill-toolbar.in-table .ql-formula,
.quill-toolbar.in-table .ql-video,
.quill-toolbar.in-table .ql-image,
.quill-toolbar.in-table .cryptee-attachfile,
.quill-toolbar.in-table .cryptee-new-table {
    pointer-events: none !important;
    opacity: 0.2 !important;
}


#doc-contextual-buttons.in-table #mobile-floating-list,
#doc-contextual-buttons.in-table #mobile-floating-check,
#doc-contextual-buttons.in-table #mobile-floating-picture {
    pointer-events: none !important;
    opacity: 0.2 !important;
}

#mobileToolbar.in-table .cryptee-new-table,
#mobileToolbar.in-table .ql-blockquote,
#mobileToolbar.in-table .ql-code-block,
#mobileToolbar.in-table .ql-indent,
#mobileToolbar.in-table .ql-header,
#mobileToolbar.in-table .ql-image,
#mobileToolbar.in-table .ql-clean,
#mobileToolbar.in-table .ql-list,
#mobileToolbar.in-table .ql-hr {
    display: none !important;
}








/* -----------------------------
-------------------------------- 
 
FILES 
 
--------------------------------
----------------------------- */


crypteefile, crypteefolder {
    display: grid;
    grid-template-columns: 1rem 1rem 1fr;
    grid-template-rows: 1fr;
    font-size: 0;
    font-weight: 350;
    background-color: var(--cryptee-4);
    padding: 1rem 1rem 0.75rem 1rem;
    cursor: pointer;
    margin: 1rem 0;
    
    transition: 0.5s opacity ease, 0.15s background-color ease, 0.15s color ease;
    border-left: 1px solid #000;
    opacity: 1;
}

crypteefile::after, crypteefolder::after {
    content: attr(filetitle) attr(foldertitle);
    font-size: 1rem;
    pointer-events: all;
    cursor: pointer;

    overflow: hidden;
    display: block;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    float: left;
}

crypteefile::before, crypteefolder::before {
    
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
        
    display: block;
    margin-top: 0.125rem;

    font-size: 1rem;
    line-height: 1rem;
    width: 1rem;
    height: 1rem;
    pointer-events: all;
    cursor: pointer;
    float: left;
}

crypteefile::before { content: "\EA86"; }
crypteefolder::before { content: "\ED61"; }

crypteefile.selected, crypteefolder.selected {
    background-color: var(--cryptee-1) !important;
    color: #FFF !important;
}

.dm body:not([paper-stock]) crypteefile.selected, 
.dm body:not([paper-stock]) crypteefolder.selected {
    background-color: var(--cryptee-4) !important;
    color: #000 !important;
}

.dm body:not([paper-stock]) crypteefile, 
.dm body:not([paper-stock]) crypteefolder {
    background-color: var(--cryptee-1) !important;
    color: #FFF !important;
    border-left: 1px solid #FFF;
}


/* FORMATS / ICONS */

crypteefile[filetitle$=".gif"]::before,
crypteefile[filetitle$=".png"]::before,
crypteefile[filetitle$=".jpeg"]::before,
crypteefile[filetitle$=".jpg"]::before {
    content : "\EE4A";
}

crypteefile[filetitle$=".7z"]::before,
crypteefile[filetitle$=".tar"]::before,
crypteefile[filetitle$=".gz"]::before,
crypteefile[filetitle$=".zip"]::before,
crypteefile[filetitle$=".dmg"]::before,
crypteefile[filetitle$=".pkg"]::before,
crypteefile[filetitle$=".tgz"]::before,
crypteefile[filetitle$=".rar"]::before {
    content : "\ED1F";
}


crypteefile[filetitle$=".doc"]::before,
crypteefile[filetitle$=".docx"]::before,
crypteefile[filetitle$=".docm"]::before,
crypteefile[filetitle$=".pages"]::before {
    content : "\ED1B";
}

crypteefile[filetitle$=".xls"]::before,
crypteefile[filetitle$=".xlsx"]::before,
crypteefile[filetitle$=".numbers"]::before {
    content : "\ECDD";
}

crypteefile[filetitle$=".ppt"]::before,
crypteefile[filetitle$=".pptx"]::before,
crypteefile[filetitle$=".key"]::before,
crypteefile[filetitle$=".keynote"]::before,
crypteefile[filetitle$=".pps"]::before {
    content : "\ECFF";
}

crypteefile[filetitle$=".mp3"]::before,
crypteefile[filetitle$=".wav"]::before,
crypteefile[filetitle$=".wave"]::before,
crypteefile[filetitle$=".ogg"]::before,
crypteefile[filetitle$=".wma"]::before,
crypteefile[filetitle$=".aif"]::before,
crypteefile[filetitle$=".aiff"]::before {
    content : "\EF87";
}

crypteefile[filetitle$=".mp4"]::before,
crypteefile[filetitle$=".mov"]::before,
crypteefile[filetitle$=".3gp"]::before,
crypteefile[filetitle$=".avi"]::before,
crypteefile[filetitle$=".fvl"]::before,
crypteefile[filetitle$=".mkv"]::before,
crypteefile[filetitle$=".ogv"]::before,
crypteefile[filetitle$=".xvid"]::before,
crypteefile[filetitle$=".wmv"]::before {
    content : "\EF81";
}

crypteefile[filetitle$=".pdf"]::before  { content : "\ED01"; }
crypteefile[filetitle$=".epub"]::before { content : "\EADB"; }
crypteefile[filetitle$=".ecd"]::before  { content : "\ECF3"; }
crypteefile[filetitle$=".uecd"]::before { content : "\ED0F"; }
crypteefile[filetitle$=".enex"]::before { content : "\ECA2"; }

/* MARKDOWN */
crypteefile[filetitle$=".md"]::before,
crypteefile[filetitle$=".mkd"]::before,
crypteefile[filetitle$=".mkdn"]::before,
crypteefile[filetitle$=".mdwn"]::before,
crypteefile[filetitle$=".mdown"]::before,
crypteefile[filetitle$=".markdown"]::before,
crypteefile[filetitle$=".markdn"]::before,
crypteefile[filetitle$=".mdtxt"]::before,
crypteefile[filetitle$=".mdtext"]::before {
    content : "\EF1D";
}



crypteefile.loading, crypteefolder.loading {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

crypteefile.loading::before, crypteefolder.loading::before { 
    content: "\EEC6" !important; 
    animation: spin 0.4s linear infinite !important; 
}

crypteefile.error, crypteefolder.error {
    background-color: var(--cryptee-red);
    border-color: var(--cryptee-red);
    color: white;
}



crypteefile.error::before { 
    content: "\ED19"; 
}

crypteefolder.error::before { 
    content: "\ED86"; 
}

crypteefile.error::after, crypteefolder.error::after { 
    content: "Failed to open " attr(filetitle) attr(foldertitle); 
}





/* -----------------------------
-------------------------------- 
 
tags 
 
--------------------------------
----------------------------- */




crypteetag::before {
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    content: "\F023";
    
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1rem;
    width: 1rem;
    vertical-align: middle;
    font-style: normal;

    margin: -0.25rem 0.25rem 0rem 0.25rem;
}


crypteetag {
    line-height: 1rem;
    margin-top: -0.25rem;
    margin-bottom: -0.25rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border-radius: 1rem;
    text-transform: lowercase;
    background-color: var(--cryptee-4);
    color: var(--cryptee-1);
    display: inline-block;
    max-width: 100%;
}

.dm body:not([paper-stock]) crypteetag {
    background-color: var(--cryptee-1);
    color: var(--cryptee-4);
}


.tribute-container {
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);
}

.tribute-container ul {
    background-color: var(--cryptee-1);
    padding-right: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    color: #FFF;
}

.tribute-container li {
    margin-top: 0;
}

.tribute-container li span {
    font-weight: 350;
    text-transform: lowercase;
    line-height: 2rem;
    height: 2rem;
}

.tribute-container i {
    font-size: 1rem;
    margin: 0 0.5rem;
    line-height: 2rem;
    height: 2rem;
}

.tribute-container i:last-child {
    margin-right: 0;
}












/* -----------------------------
-------------------------------- 
 
toc 
 
--------------------------------
----------------------------- */

.ql-editor .highlighted, 
.ql-editor .highlighted * {
    color: var(--cryptee-green);
}













/* -----------------------------
-------------------------------- 
 
TOOLTIP (urls etc) 
 
--------------------------------
----------------------------- */

.ql-tooltip {
    display: flex;
    text-transform: lowercase;
    background-color: rgba(18,18,18,1); /* cryptee-0 */
    color: #fff;
    font-size: 1rem;
    font-weight: 350;
    white-space: nowrap;
    padding: 0.5rem 1rem 0.25rem 1rem;
    
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}

.ql-tooltip-arrow {
    border-bottom-color: rgba(18,18,18,1) !important;
}

.ql-tooltip::before {
    line-height: 1.5rem;
    margin-right: 1rem;
    font-weight: 700;
}

.ql-tooltip input {
    display: none;
    color: #FFF;
    margin-top: 0;
    width: 10rem;
}

.ql-tooltip[data-mode=link]::before     { content: "enter link"; }
.ql-tooltip[data-mode=formula]::before  { content: "enter formula"; }
.ql-tooltip[data-mode=video]::before    { content: "enter video"; }

.ql-snow .ql-tooltip a.ql-action::after {
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    content: "\EC85";
    font-size: 1rem;
    line-height: 1.5rem;

    margin-left: 1rem;
    padding-right: 1rem;
}

.ql-snow .ql-tooltip a.ql-remove::before {
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    content: "\EC19";
    font-size: 1rem;
    line-height: 1.5rem;
    
    margin-left: 1rem;
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {    
    content: "\EB7B";
    padding-right: 0;
}

.ql-tooltip .ql-action,
.ql-tooltip .ql-remove {
    font-weight: 700;
    color: #FFF;
    font-size: 1rem;
    line-height: 1.5rem;
    display: inline-block;
    text-align: center;
}

.ql-tooltip a.ql-preview {
    font-size: 1rem;
    line-height: 1.5rem;
    display: inline-block;
    max-width: 200px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    color: #FFF;
    text-decoration: underline;
}

.ql-tooltip input {
    box-shadow: inset 0px -1px 0px var(--cryptee-2);
    color: white;
}

.ql-tooltip input:focus {
    -webkit-appearance: none;
    box-shadow: inset 0px -1px 0px white;
}

.ql-tooltip input::placeholder { color: #888 !important; }



/* -----------------------------
-------------------------------- 
 
MOBILE TOOLBAR 
 
--------------------------------
----------------------------- */

.ql-bubble .ql-tooltip {
    z-index: 5;
    padding: 0.5rem 0 calc(0.5rem + 16px) 0; /* intentionally adding +16px to the bottom more to pad for the cubic bezier not matching the ios keyboard spring animation*/
    position: absolute;
    width: 100% !important;
    bottom: 0;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0;
    transform: translateY(16px); /* intentionally adding +16px to the bottom more to pad for the cubic bezier not matching the ios keyboard spring animation*/
    
    transition-duration: 0.5s;
    transition-property: transform;
    transition-timing-function: var(--ios-keyboard-cb);

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

.ql-bubble .ql-tooltip .ql-tooltip-arrow {
    display: none !important;
}

.ql-bubble .ql-tooltip.ql-flip {
    transform: translateY(16px);
}

.ql-bubble .ql-tooltip .fader {
    display: block;
    margin:0;
    height: 100%;
    grid-column: 1/-1;
    grid-row: 1/1;
    pointer-events: none;

    background: linear-gradient(to right, rgba(18,18,18,1) 0%, rgba(18,18,18,0) 1.5rem, rgba(18,18,18,0) calc(100% - 3.5rem), rgba(18,18,18,1) 100%);
}

#rightSlide:not(.activeSlide) .ql-bubble .ql-tooltip,
.ql-bubble .ql-tooltip.ql-hidden {
    display: grid;
}

.ql-tooltip #mobileToolbar {
    padding: 0 0 0 0.75rem;
    display: flex;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    grid-column: 1/-1;
    grid-row: 1/2;
}

.ql-tooltip #mobileToolbar::-webkit-scrollbar { display: none; }

.ql-tooltip #mobileToolbar button,
.ql-tooltip #mobileToolbar span,
.ql-tooltip #mobileToolbar .ql-picker,
.ql-tooltip #mobileToolbar select {
    height: 2rem;
    line-height: 2rem;
    width: calc(3rem - 2px); /* to make sure some buttons always cut off to hint there's more and users should swipe */
    min-width: calc(3rem - 2px); /* to make sure some buttons always cut off to hint there's more and users should swipe */
    margin: 0.5rem 0;
    padding: 0 0.25rem 0 0;
    text-align: center;
    flex-grow: 1;
}

.ql-tooltip #mobileToolbar button i,
.ql-tooltip #mobileToolbar span i,
.ql-tooltip #mobileToolbar .ql-picker i,
.ql-tooltip #mobileToolbar select i { 
    color: #aaa; 
    font-size: 1.25rem;
}

.ql-tooltip #mobileToolbar button.ql-active i,
.ql-tooltip #mobileToolbar .ql-picker.ql-expanded i { 
    color: #FFF;
}

.ql-bubble .ql-expanded .ql-picker-options {
    transform: translate3d(3rem,-2rem,0);
}

.ql-tooltip select,
.ql-tooltip .ql-picker {
    border: none;
    cursor: pointer;
    height: 24px;
    padding: 3px 5px;
    width: 28px;
    text-align: center;
}

.ql-tooltip .ql-picker-options {
    background-color: #000;
    grid-template-columns: repeat(8, 1rem);
}

.ql-tooltip #mobileToolbar button:last-child {
    margin-right: 2.5rem;
}

/* -----------------------------
-------------------------------- 
 
IMAGE OVERLAY & IMAGES
 
--------------------------------
----------------------------- */

/* first child is image size */
/* last child is buttons */
/* rest are handles */

.imageResizeOverlay {
    border: 1px var(--cryptee-green) solid;
}

.imageResizeOverlay > div {
    background-color: var(--cryptee-1) !important;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25) !important;
}

/* resize handles */
.imageResizeOverlay > div:not(:last-child):not(:first-child) {
    background-color: var(--cryptee-green) !important;
    height: 1rem !important;
    width: 1rem !important;
}

.imageResizeOverlay > div:last-child {
    overflow: hidden !important;
    border-radius: 0.5rem !important;
    width: 9rem !important;
    height: 3rem !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}

.imageResizeOverlay > div:last-child span {
    width: 3rem !important;
    height: 3rem !important;
    line-height: 3rem !important;
    padding-top: 0.5rem !important;
}

.imageResizeOverlay > div:last-child span svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    line-height: 3rem !important;
}

.imageResizeOverlay > div:last-child span svg .ql-stroke {
    stroke: #FFF;
}

.imageResizeOverlay > div:nth-child(2),
.imageResizeOverlay > div:nth-child(3),
.imageResizeOverlay > div:nth-child(5) {
    display: none !important;
}



/* -----------------------------
-------------------------------- 
 
IMAGES 
 
--------------------------------
----------------------------- */

.ql-editor img { 
    height: auto;
    min-width: 50px;
}

.ql-editor img[src="//:0"] {
    background-color: var(--cryptee-yellow);
    color: transparent;
    position: relative;
    border: none;
    box-shadow: none;
    outline: none;
    width: 16rem;
    min-width: 16rem;
    height: 4rem;
    text-decoration:none !important;
    text-indent: -32rem;
    overflow: hidden;

    cursor: pointer;
    transition: 0.3s background-color ease;
    pointer-events: none;
} 

.ql-editor img[src="//:0"]::after {
    pointer-events: all;
    
    content: "insecure remote image";
    position: absolute;    
    left: 0rem;
    top: 0rem;
    padding: 1rem 2rem 1rem 4rem;
    color: black;
    height: 2rem;
    line-height: 2rem;
    z-index: 2;
    text-decoration:none !important;
    text-indent: 0rem;
    font-weight: 350;
    
}

.ql-editor img[src="//:0"]::before {
    pointer-events: all;

    transition: 0.3s background-color ease;
    background-color: var(--cryptee-yellow);
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    z-index: 2;

    color: black;
    content: "\F103";
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
    cursor: pointer;
    text-decoration:none !important;
    text-indent: 0rem;
}


/* -----------------------------
-------------------------------- 
 
HR
 
--------------------------------
----------------------------- */

.ql-editor hr {
    height: 0;
    padding: 0;

    border: 1px solid var(--cryptee-2);
    border-top: none;
    border-right: none;
    border-left: none;
}

.dm body:not([paper-stock]) .ql-editor hr { border-color: var(--cryptee-2); }




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

.ql-editor mark[comment] {
    background-color: transparent;
    color: inherit;
    border-bottom: 2.5px dashed var(--cryptee-yellow);
}

.ql-editor mark[comment].hascursor {
    border-bottom: 2.5px solid var(--cryptee-yellow);
}

.ql-editor mark[comment].selected {
    background-color: var(--cryptee-yellow);
}

.ql-editor mark[comment]::selection {
    background: var(--cryptee-yellow);
}

#comment-floater {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.5rem;
    width: 3rem;
    background-color: var(--cryptee-yellow);
    display: block;
    z-index: 1;
    border-radius: 3rem 0;
    margin: 0;

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

    opacity: 1;
    transform: translate(var(--x, 50vw), var(--y, 50vh));
    transition: 0.15s opacity ease, 0.15s border-radius ease;
}

#comment-floater svg {
    display: block;
    margin: 0.625rem auto;
    opacity: 1;
    transition: 0.3s opacity ease;
}

#comment-floater::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -3px;
    height: 2.5px;
    width: 3px;
    background-color: var(--cryptee-yellow);
}

#comment-floater.inverted {
    border-radius: 0 3rem;
}

#comment-floater.inverted::before {
    left: unset;
    right: -3px;
}

#comment-floater:not(.shown) {
    opacity: 0;
    pointer-events: none !important;
}

body.comments-hidden .ql-editor mark[comment] {
    border-bottom: none !important;
}


/* #endregion COMMENTS */



/* -----------------------------
-------------------------------- 
 
HOVERS 
 
--------------------------------
----------------------------- */


@media (-moz-touch-enabled: 0), (pointer:fine) { 
    .ql-tooltip input:hover {
        -webkit-appearance: none;
        box-shadow: inset 0px -1px 0px var(--cryptee-3);
    }

    .ql-tooltip input:hover:focus {
        -webkit-appearance: none;
        box-shadow: inset 0px -1px 0px white;
    }

    crypteefile:not(.loading):not(.error):hover { background-color: #EEE; }
    crypteefile:hover::before { content: "\ECAE"; }
    crypteefile.error:hover::before {content : "\EB96"; }

    .ql-editor img[src="//:0"]:hover,
    .ql-editor img[src="//:0"]:hover::before { background-color: #ffcc00; }

    #font-sizes-wrapper button:hover {
        background-color: transparent !important;
        color: #fff;
    }

    #font-sizes-wrapper button[selected]:hover {
        background-color: transparent !important;
        color: #000;
    }

    #font-families-wrapper .fonts-list .font:not([selected]):hover {
        background-color: #303030;
    }

    #font-families-wrapper .fonts-list .font:not([selected]):hover .examples {
        color: #FFF;
    }

}

@media (-moz-touch-enabled: 1), (pointer:coarse) {  
    #table-picker-header > p { display: none !important; }
}











/* -----------------------------
-------------------------------- 
 
MEDIA QUERIES 
 
--------------------------------
----------------------------- */

/* 70rem */
@media (max-width : 1120px) {
    .ql-formats:nth-of-type(2) {
        margin-right: 0 !important;
    }
}

/* 1008px (editor + left slider) */
@media (max-width : 63rem) {
    body:not([paper-stock]) .ql-editor { 
        max-width: 100%; 
        position: absolute;
    }
}

@media (max-width : 703px) {
    .ql-formats {
        margin-right: 0 !important;
    }   
}