.noteEditor.compact {
    position: fixed;
    top: 0; right: 54px;
    opacity: 0;
    margin: 12px;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    width: 300px;
    background: var(--color-base2-lighter);
    min-height: calc(100% - 28px);
    min-width: 480px; max-width: 70vw;
    resize: horizontal !important;
    box-shadow: 0 0 10px black;
    animation: fadeIn .5s ease both !important;
    z-index: 11 !important;
}
@keyframes fadeIn {
    to {
        margin-right: 70px;
        opacity: 1;
    }
}
.noteEditor.compact.active nav.navBar {
    right: -60px;
    visibility: visible;
    opacity: 1;
    display: flex !important;
}
.noteEditor.full {
    position: fixed;
    top: 100px; left: 0 !important;
    background: linear-gradient(to bottom,  var(--color-base2-lighter), #800080b0);
    min-height: 100% !important;
    min-width: 100%;
    border-radius: 10px;
    backdrop-filter: blur(20px);
    border-radius: 0;
    z-index: 99999;
    box-shadow: none !important;
    max-width: 100vw;
    opacity: 0;
    transition: all 1s ease;
}
.noteEditor.full.active {
    opacity: 1;
    top: 0 !important;
}
.noteEditor.full.side {
    min-width: calc(100% - 500px);
}
.noteEditor.compact.active { z-index: 3; }
.noteEditor .topBar {
    display: flex;  
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px;
    color: #fff;
    background: var(--color-base2-lighter);
    backdrop-filter: blur(10px);
    align-items: center;
    user-select: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.noteEditor .topBar > div:first-child > div {
    height: 20px;
    width: 20px;
}
.noteEditor .topBar #NOTEEDITOR_CLOSE {
    background: #ff6161;
}
.noteEditor .topBar #NOTEEDITOR_MINIMIZE {
    background: #feb529;
}
.noteEditor .topBar #NOTEEDITOR_MAXIMIZE {
    background: #01dd01;
}
.noteEditor .topBar > div:first-child {
    display: flex;
    overflow: hidden;
    box-shadow: 0 0 10px #0000004f;
    border-radius: 5px;
}
.noteEditor .topBar #NOTEEDITOR_CLOSE:hover,
.noteEditor .topBar #NOTEEDITOR_MINIMIZE:hover,
.noteEditor .topBar #NOTEEDITOR_MAXIMIZE:hover {
    filter: brightness(80%);
}
.noteEditor .topBar #NOTEEDITOR_TYPE {
    font-size: larger;
}
.noteEditor .topBar #NOTEEDITOR_TIME {
    position: absolute;
    right: 0;
    margin-right: 10px;
    color: #d4d4d4;
}
.noteEditor .textField {
    padding: 10px;
    color: var(--color-font1);
    position: relative;
}
.noteEditor .textField #HEADER_VALUE {
    width: 100%;
    padding: 10px 0;
    font-size: 30px;
    background: none;
    border: none;
    color: #fff !important;
    font-weight: 600;
}
.noteEditor .textField .noteText:empty:before {
    content: attr(data-placeholder);
}
.noteEditor .textField #HEADER_VALUE::placeholder {
    color: var(--color-font2);
}
.noteEditor .textField .noteText {
    color: #fff !important;
    padding: 10px;
    background-color: #00000029;
    line-height: 20px;
    margin-top: 10px;
    border-radius: 10px;
    overflow: auto;
    max-width: 100%;
    cursor: text;
    height: calc(100vh - 220px);
}
.noteEditor.compact nav.navBar .colorBar {
    background: var(--color-base1);
    padding: 10px 5px;
    display: flex;
    border-radius: 10px;
    box-shadow: 0px 0px 10px black;
    flex-wrap: wrap;
}
.noteEditor nav.navBar .colorBar .color {
    height: 20px;
    width: 100%;
    appearance: none;
}
.noteEditor.compact nav.navBar .colorBar .color:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.noteEditor.full nav.navBar .colorBar .color:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.noteEditor nav.navBar .colorBar .color:hover { 
    filter: brightness(140%);
    border: 2px solid #ccc;
}
.noteEditor nav.navBar .colorBar .color.selected {
    border: 3px solid white;
    transform: scale(1.4);
    z-index: 1;
}
.noteEditor.compact nav.navBar .colorBar .color:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.noteEditor.full nav.navBar .colorBar .color:last-child {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}
.noteEditor.compact nav.navBar {
    position: absolute;
    right: 0; top: 0;
    padding: 0 10px;
    opacity: 0;
    visibility: hidden;
    transition: right, opacity, .5s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.noteEditor.full nav.navBar {
    position: absolute;
    display: flex;
    width: 100%;
    align-items: center;
    left: 0; bottom: 0;
    padding: 10px;
    gap: 10px;
    justify-content: center;
}
.noteEditor.full nav.navBar .colorBar {
    display: flex;
    box-shadow: 0px 0px 10px black;
    width: 500px;
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(var(--color-base1), var(--color-base2-lighter));
}
.noteEditor nav.navBar .editorNavBtn {
    font-size: 25px;
    padding: 8px;
    color: var(--color-font1) !important;
    --ionicon-stroke-width: 60px;
}
.noteEditor nav.navBar .editorNavBtn:hover {
    filter: brightness(140%);
}
.noteEditor nav.navBar .btnGrp {
    border-radius: 10px;
    box-shadow: 0px 0px 10px black;
    display: flex;
    flex-direction: column;
    background: var(--color-base1);
}
.noteEditor.full nav.navBar .btnGrp {
    flex-direction: row;
    z-index: 2;
}


/* PREVIEW PANEL >mk< */
.noteEditor.compact .previewPanel { display: none; }
.noteEditor.compact.active .previewPanel {
    position: absolute;
    top: 0; left: 0;
    z-index: -999;
    min-height: 312px;
    min-width: 480px; max-width: 70vw !important;
    color: var(--color-font1);
    border-radius: 10px;
    overflow: auto;
    resize: both !important;
    background: var(--color-base1);
    display: none; opacity: 0;
    box-shadow: 0 0 10px black;
    max-height: 100%;
    animation: opacity__left .5s ease both;
}
.noteEditor.side .previewPanel { display: block !important;  }
@keyframes opacity__left {
    to {
        opacity: 1;
        left: 540px;
        z-index: 1;
    }
}
.noteEditor.full .previewPanel {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    min-width: 500px; max-width: 500px;
    min-height: 100vh; max-height: 100vh;
    color: var(--color-font1);
    background: var(--color-base1);
    z-index: 1;
    overflow: auto;
}
.noteEditor .previewPanel .topbar {
    background: var(--color-base2);
    padding: 10px;
    white-space: nowrap;
    position: sticky !important;
    top: 0; left: 0;
}
.noteEditor.full .previewPanel .topbar {
    width: 100% !important;
}
.noteEditor .previewPanel .preview {
    display: flex;
    flex-direction: column;
    padding: 10px; 
}
.noteEditor .previewPanel .preview:empty::after {
    color: var(--color-font2);
    content: "Try typing some markdown in\athe editor for live changes. \a\a• Quik tips: \a use '#' for headings; \a use '+' for lists; \a use '**text**' to bold; \a use '_text_' to italic.";
    white-space: pre;
    line-height: 30px;
}

/* noteText >ls< */
.noteText .note_item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0000006b;
    border-radius: 10px;
    margin: 10px 0;
    overflow: auto;
}
.noteText .note_item .text {
    color: #fff;
    cursor: text;
}
.noteText .note_item .text:empty::after {
    content: "Sub task";
    font-style: italic;
    color: #ccc;
}
.noteText .note_item .text:empty {
    width: 100% !important;
}
.noteText .note_item::-webkit-scrollbar { height: 0px; }
.noteText .note_item input.checkBox {
    margin-left: 10px;
}
/* ed note type */
.ck > * { 
    background: transparent !important;
    border: 0 !important;
}
.ck.ck-toolbar__separator {
    background: var(--color-font3) !important;
    margin: 10px;
}
.ck.ck-toolbar {
    position: fixed !important;
    padding: 10px !important;
    bottom: 0 !important; left: 0;
    width: 100% !important;
    justify-content: center;
    background: linear-gradient(to right, transparent, var(--color-base2-lighter), transparent) !important;
    display: none !important;
}
.ck.ck-toolbar.focus {
    display: flex !important;
}
.ck.ck-content {
    margin-top: 15px;
    height: 75vh !important;
    border-radius: 10px !important;
    background: #00000029 !important;
}
.ck.ck-dropdown.ck-heading-dropdown > * {
    background: var(--color-base2) !important;
}
.ck.ck-reset.ck-dropdown__panel.ck-dropdown__panel-visible {
    left: -5px;
    transform: translate3d(0,-28%,0);
    box-shadow: 0 0 10px black;
}