#wrapper, html, body {
    height: 100%;
    width :100%;
    margin: 0;
    overflow: hidden;    
    background-color: #5E5E5E;
    font-family: 'Nunito';
    font-display: swap; 


    --element-border-color :#E8E8E8;
    --viewer-items-color: #F7F9FC;
    --main-CTA-color : #5E5E5E;
    --secondary-CTA-color : #E8E8E8;
    --hover-selection-color: #979797;


    --importance-color-level-null : #E8E8E8;
    --importance-color-level-1 :  #FFD98E;
    --importance-color-level-2 : darksalmon;
    --importance-color-level-3 : #E34A27;
}



.objectString{
    outline:none;
}

body{
    position: fixed;
    display:flex;   
    flex-direction:column; 
}


#wrapper{
    display: grid;    
    grid-template-columns: min-content 1fr;
    grid-auto-rows:100%;
    height:100%;
    width :100%;
    
    overflow:hidden;
}




#navigation{    
    background-color:rgb(250,250,250);
    height: 100%;
    overflow-y: scroll;
    overflow-x:hidden;

    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

#navigation::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}



#opencloseNavigation{
    width:1.5rem;
    text-align:center;
    border-radius:4px;
}

#opencloseNavigation:hover{
    background-color:var(--hover-selection-color);
}




.viewItem{
    cursor: pointer;
    height: 100%;
}


#exportimport{
    float: bottom;
    display: flex;
    gap : 3em;
    justify-content: center
}

#project {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

#items{
    flex-grow:5;
}

#tobjectgrids{
    height: 100%;    
    display: flex;
}


@media only screen and (max-width: 1040px) {
    #connectedInformation{
        display:none;
    }

    #connectedDiv{
        gap:0.4rem;
    }

    #gnlSearch{
        width:50px!important;        
    }

    #gnlSearchInput{
        border-radius:5px!important
    }

}

@media only screen and (max-width: 600px) {
    #tobjectgrids{
        flex-direction:column;        
    }

    #wrapper:has(#navigation[focus = 'second']) .secondView  {
        display:none;
    }
    
    #wrapper{
        grid-template-columns: 50% 1fr!important;
    }
}

.tobjectGrid{
    flex:1;
    overflow:auto;

    display:flex;
}

.tobjectGrid:not(.filtered){    
    transition: all 1s;
}

.tobjectGrid.filtered{
    flex-grow: 0.001;
    transition: all 1s;
}


/*------- Filter -----*/
#filterGrid{
    grid-row-start:1;
    grid-row-end:1;

    grid-column-start:1;
    grid-column-end:3;  
}

#filter{
    height:75%;     
    margin-top:0.5em;
    margin-left:2em;
    margin-right:2em;
    
    border-radius:20px;
    background-color:white;

    display: grid;
    align-items: center;  
}

#filterDiv{

}


.object.filtered{
    display: none;
}


/*------- Knowledge Open -----*/
.knowledge.open{
    margin-right: 0rem;   
    border-radius: 20px 0 0 20px;

    background-color: #5E5E5E;
    color: white;
    transition: 0.5s;
}

#knowledgeView{
    flex-grow: 5;
    background-color: #5E5E5E;
    overflow-y: scroll;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#knowledgeView.tobjectsShown{
    flex-wrap: nowrap;
}

#knowledgeContent{
    margin-top: 3rem;
    vertical-align:middle;
    width: 60%;
    overflow-wrap: break-word;
    justify-content: center;
    color: white;
    caret-color: #97B2C0;    
}

#knowledgeItems{
    display: none;
    grid-column-start: 1;
    grid-column-end: 3;    
}

#knowledgeItems.active{
    display: block;
}

#knowledgeItems .objectInKnowledge{
    display:none;
}

#knowledgeItems.active #tobjectgrids{
    display: flex;
    flex-direction: column;
}

#knowledgeItems.active .tobjectGrid{
    width: 30em;
    
    overflow: scroll;
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

#knowledgeItems.active .tobjectGrid::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

#knowledgeContent  .knowledgeString{
    all: revert;
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    
    font-size: 2em;
    text-decoration: bold;
    outline: none;
}

.ql-editor{
    font-family: 'Nunito'!important;
    padding: 0px!important;
    font-size: 1.1rem!important;
}


.ql-tooltip{
    left : 0px!important;
}

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


#knowledgeContent  .knowledgeText{
    all: revert;
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    
    font-size: initial;    
    outline: none;
    padding-top: 1rem;
    height: 100%;
}


#knowledgeItemsBTN{
    z-index: 20;
    position: absolute;
    right: 0px;
    width: 5em;
    height: 5em;
    color : white; 
}

#knowledgeItemsBTN span {
    display:block;
    margin-top:0.2em;

}
/*/////////////////////////////*/
/*------- Knowledge Open OLD-----*/
/*
#project.knowledgeopen{
    grid-auto-columns: 10% 90%;
    grid-auto-rows : 30% 70% ;       
    transition: 0.5s;
}


#knowledgesGrid.knowledgeopen{
    max-height: 100%;    
    grid-column-start: 2;
}

#items.knowledgeopen{
    background-color: #1B1B1B;
    grid-column-start: 2;

}

.knowledge.knowledgeopen{
    max-width: 100%;
    flex: 1;
    margin-left: 2em;
    margin-right: 2em;
    transition: 0.5s;

    grid-auto-rows: 10% 80% 10%;
    
}

#closeKnowledgeDiv{
    background-color: #1B1B1B;
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 3;
}


#closeKnowledgeDivBTN{
    font-size: xxx-large;
    margin-left: 1em;
    margin-top: 1em;
}
*/
/* --------- Knowledge ------ */

#knowledgesGrid{
    overflow-y:hidden;
    overflow-x:scroll;
    background-color:rgb(240,240,240);  

    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */

    flex-basis:15rem;
    flex-shrink:0;
}

#knowledgesGrid::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

#knowledges{
    height:100%;
    display:flex;
    flex-direction: column;
    gap:1em;
    min-width:170px;

    overflow-x: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

#knowledges::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.knowledge{
    display: grid; 
    grid-auto-rows: 33% 33% 33% ;
    grid-auto-columns:100%;

    background-color:white;
    border-radius:20px;

    padding:0.5em;
    margin-left: 1em;
    margin-right: 1em;    

    max-height: 95px;
    transition: 0.5s;
}

.knowledge .archiveBTN{
    float: left;
    display: inline-block;
}

#knowledges[archived = "false"] .knowledge[archived = "true"]{
    display:none;
}

/* animation is a bit too much right now ... maybe create a menu ??
.knowledge:hover .archiveBTN{
    display: inline-block;
}*/

#knowledgeArchiveViewToggle{ /* this is the LAZIEST way to do it ... cannot be bothered right now*/
    position:absolute; 
    top:0.9rem; 
    left:0.8rem;
}

#knowledgeArchiveViewToggle .faICN{
    background-color: #979797
}

.knowledge .objectInfo{
    color: #979797;
    margin-bottom: 0.5rem;
}

.knowledge .faICN{
    font-family: 'Nunito';

    display:inline-block;
    background-color: #979797;    

    font-size: small;
}

.knowledgeString{
    font-family: 'Nunito';
    font-style: normal;
    font-size:1.2em;
    font-weight: 700;

    width:100%;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.knowledgeString:focus{
    text-overflow: clip;
}

.knowledgeString:not(:focus) {
    text-overflow:ellipsis;
}

.knowledgeText{
    outline:none;
    color: #979797;
    font-size:1em;
    
    height: 2ch;

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

/*
.knowledgeopen .knowledgeString{
    width: 100%;
    height: auto;
}

.knowledgeopen .knowledgeText{
    width: 100%;
    height: auto;
}
*/

.knowledgeText:focus{
    text-overflow: clip;
}

.knowledgeText:not(:focus) {
    text-overflow:ellipsis;
}


.knowledge .objectInfo {
    text-align:right;
}




.knowledge .allTagsInItemInfo{
    display:none;
    
    text-align:left;
    background-color: white;
    position:fixed;

    border-radius:0.5em;
    box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

    padding:0.3em;    
}


#createKnowledge{
    margin-top: 1rem;
    margin-right: 2rem;

    display: table;
    text-align: right;

}

#createKnowledge .fa-solid{
    font-size:large;    
    display: table-cell;    

}


.faICN{
    font-family: 'Nunito';

    display:inline-block;
    background-color:black;
    padding-left:0.2em;
    padding-right:0.2em;

    border-radius:0.2em;

    margin-right:0.5em;
    margin-left:0.2em;
}



/* --------- tObjects ------ */


.tobjects{    
    flex:1;

    margin:2em;
    margin-top: 1em !important;

    border-radius:1rem;
    background-color:var(--viewer-items-color);

    overflow:scroll;
    display:flex;
    flex-direction:column;

    padding:0.5em;

    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.tobjects::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}


.tobject{
    display:grid;    
    grid-template-columns: auto minmax(0, 1fr) auto;

    border:solid;
    border-radius: 10px;    
    border-width: 1px;

    background-color: white;

    border-color:var(--element-border-color);

    margin:0.5em;    
}

.tobject .tobject{
    border-color: rgb(220,220,220);
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0px;

    padding-top: 0.5rem;   
}

.tobject .tobject .tobjectProjectInfo{
    display: none; /* this should not be retrieved at all for perf issue ... but way easier that way */
}

.tobjectString{
    outline:none;
    grid-row-start: 1;
    grid-column-start: 2;

    -webkit-user-select: text;
    user-select: text;
}


.tobjectString.thoughtString{
    grid-column-start:1;
    grid-column-end:3;
    padding-left:1rem;
}

.definedVarDiv{    
    grid-row-start: 1;    
    grid-column-start: 3;   
    text-align: right; 
}

.definedVar{    
    display: inline-block;
    margin-right :0.2rem;
    margin-top: 0.2rem;  
    width: 1em;
    height: 1em;

    border-radius: 20rem;
}




.definedVar[state = 'null']{
    background-color: var(--importance-color-level-null);
}

.definedVar[state = "1"]{
    background-color: var(--importance-color-level-1);
}

.definedVar[state = "2"]{
    background-color: var(--importance-color-level-2);
}

.definedVar[state = "3"]{
    background-color: var(--importance-color-level-3);
}

.tobject[importance = 'null']{
    border-color: var(--importance-color-level-null);
}

.tobject[importance = '1']{
    border-color: var(--importance-color-level-1);
}

.tobject[importance = '2']{
    border-color: var(--importance-color-level-2);
}

.tobject[importance = '3']{
    border-color: var(--importance-color-level-3);
}


.tobject .objectInfo{
    margin-top:0.2em;
    margin-bottom:0.2em;

    grid-column-start:1;
    grid-column-end:4;

    display: flex;
    flex-wrap: wrap;
    align-items:center;
    gap: 8px;

    color: #939393;    
    
    padding-left: 5px;
}

.tobject .objectInfo *{
    font-size: 12px!important;
    flex-basis: content;

    
    display: flex;
    gap: 2px;
    align-items: center;
}

.todo .objectInfo .allTagsInItemInfo{
    order: 10;
    display : flex;
    gap:8px;
    flex-direction:row-reverse;
    flex-wrap: wrap;
    padding-right:0.5em;
}

.allTagsInItemInfo .tagElIcn {
    margin: 0!important;
    color: #939393;
}

.todo .subTobjectNumber{
    display: flex;
    align-items: center;
    gap: 5px;
}

.todoDone{

}


.subTobjectNumber:empty{
    background-color: blue;
}

.subThoughts:empty{
    background-color: blue;
}


.subToDos{
    grid-row-start: 3;
    grid-column-start: 1;
    grid-column-end: 3;
}

.thought .objectInfo .allTagsInItemInfo{
    display: flex;
    flex-direction: row-reverse;
    gap:8px;
    padding-right: 0.5em;
}

.objectHeader{
    display: grid;
    grid-auto-columns:1fr 1fr;
    margin: 0rem 1rem 1rem 1rem;
}

.objectTitle{
    display:inline-block;
    font-size:150%; 
    font-weight: bolder;
    
    text-align:left;

    grid-row-start:1;
}

.objectCreate{
    display:inline-block;
    font-size:150%; 
    text-align:right;
    grid-row-start:1;
}

/* replace thoughts/todo by objectHeader... */

.tObjectHeader{
    display:flex;
    justify-content:space-between;
    margin:1rem;
    font-size:150%; 
}

.tObjectHeaderTitle{
    display:flex;
    align-items:center;
    gap:0.5rem;

    
    font-weight: bolder;
    
    text-align:left;   
}




/* ---------- To Do -------- */

.todoDueDate{    
    text-align:left;
    color: darksalmon;
    order: 1;

    display:flex;
    align-items:center;
}


.todoDueDate i {
    margin-right:0.2em;
}



.objectInKnowledge{    
    order:8;
    text-align:left;    
}


/*----------- Tag Overlay ------*/
#tagList {        
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    overflow: auto;
    overflow-x: hidden;
    box-shadow: 0 2px 10px rgb(0 0 0 / 30%);
    border-radius: 0 0 3px 3px;
    max-height: 160px;

}

#tagList .tagEl {
    border-bottom: 1px solid #eee;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    cursor: pointer;
}

.tagElIcn{
    margin-left: 1rem;
    margin-right: 1rem;
    color: #5E5E5E;
}


.createTagEl{
    padding-left: 1rem;
}

#tagList  .tagEl:hover:not(.header) {
    background-color: #eee; /* Add a hover effect to all links, except for headers */
}

#tagList  .tagEl:focus:not(.header) {
    background-color: #312; /* Add a hover effect to all links, except for headers */
}

.tagEl:focus{
    background-color: #312; /* Add a hover effect to all links, except for headers */
}

.tagEl.active{
    background-color: #eee!important; /* Add a hover effect to all links, except for headers */
}


/* ------- Projects -------- */
.projectDiv{
    display:flex;
    flex-direction:column;
    justify-content:center;    
    padding-left:2rem;    
    max-width:20ch;
    margin-right:1rem;
}

.projectDiv p{    
    margin-right:0rem;
    margin-top:0.5rem;
    margin-bottom: 0.5rem;
    margin-left:0.5rem;    
}

.projectLine{
    display: flex;
    align-items: center;    
}

.projectDiv[childproject = "0"] .projectChevron{
    visibility: hidden;
}

.projectChevron{
    color : var(--main-CTA-color)
}

.projectDiv[projectLine = "close"] > .projectsIn{
    display:none;
}

.projectDiv[projectLine = "open"] > .projectsIn{
    display:block;
}

.projectInfo{
    display:flex; 
    
    padding-left:0.5rem;      
    border-radius:0.4em;     
    width:500px;
}

.projectTitle{
    min-width:10ch;
    max-width: 10ch;
    overflow-wrap: break-word;
}

.projectInfo:hover {    
    transition:0.3s;
    background-color:rgb(240,240,240);
}

.projectInfo.hovered{
    transition:0.3s;
    background-color:rgb(240,240,240);
}

.projectEditButton{
    display:none;
}

.projectInfo:hover > .projectEditButton{
    display:inline-block;   
    padding-right:1rem;
}




.projectDiv.activeView>.projectLine .projectInfo{
    border-radius:0.4em 0em 0em 0.4em;
    transition:0.3s;
    background-color:rgb(240,240,240);

    margin-right: -2rem;
}

.projectGoButton{
   /* color:var(--main-CTA-color)*/
}


/* ------- Filter -------- */

#filterDiv{
    display: flex;
    gap: 1em;
    margin-left: 2em;
}


div[showused = "true"] .thought[used="true"]{
    /*order: 999;*/
}

div[showused = "false"] .thought[used="true"]{
    order: 999;
    display:none;
}

div[showdone = "true"] .todo[done="true"]{
    order: 999;
}

div[showdone = "false"] .todo[done="true"]{
    order: 999;
    display:none;
}

.thought[braindump="true"]:has(.thoughtString:empty){
    display:none;
}

#quickThoughtDiv > .thought[braindump="true"]:has(.thoughtString:empty){
    display: grid;
}

#definedVarFilter{
    display:flex;
}

/* ------ Navigation ----*/
/* ----- View ----- */

.viewItem{
    margin : 0.5rem;
    padding: 0.5rem;
}

.viewItem.activeView{
    border-radius:0.4em;
    transition:0.3s;
    background-color:rgb(240,240,240)
}



/*----- TagsView ----*/
#tagsViewer{
    display: grid;
    grid-auto-columns: 20% 80%;
    width:100%;
    height: 100%;    
}

#tagsViewer #items{
    display: block;
}

#tagsNavigation{
    display:flex;
    flex-direction:column;
    gap:3rem;

    overflow: scroll;
    background-color: rgb(230,230,230);

    padding-left: 2rem;
    padding-top: 1rem;

    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.tagSection:nth-child(2){
    border-top: 1px solid black;
}

#tagsNavigation::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.taginlist{
    cursor: pointer;    
    border-radius:2rem;
    padding-right:1rem;
    padding-left:1rem;
    width:70%;
}

.taginlist .removeTagBTN{
    float: right;    
    display: none;
}

.taginlist.active{
    transition:300ms;
    background-color:rgb(240,240,240);
}

.taginlistName{

}

.taginlist.active .removeTagBTN {
    display: inline-block;
}


.metataginlist .title{
    font-size: large;
}

.metataginlist .taginlist{
    margin-left: 1em;
}

.tagSection > .title{
    font-size: x-large;
}

#tagsViewer #items{ 
    grid-auto-rows: 100%;
    grid-row-start: 1;
    grid-column-start:2;
    grid-column-end:3;

    display: grid;
}

#tagsViewer > #filterGrid{
grid-row-start: 1;
}

#tagsViewer > #items{
    display: grid;
    grid-row-start: 1;
    grid-auto-columns: 50% 50%;    
}

#tagsViewer #thoughtsGrid{
    grid-column-start: 1;
}


#tagsViewer #todosGrid{
    grid-column-start: 2;
}
/* ----- CalendarView ---- */
#calendar{
    width:100%;
    height: 100%;    

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#actualCalendar{
    margin-top: 1rem;
    flex-basis:90%;
    
    
    width: 85%;
    border-radius:1rem;
    padding:1rem;


    background-color:var(--viewer-items-color);

    overflow: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

#actualCalendar::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

#calendar .objectInfo .todoDueDate{
    grid-row-start:1;
    grid-auto-columns: 1fr 1fr 1fr 1fr;
    grid-column-start:1;
    grid-column-end:5;

}

#calendar .objectInfo .tobjectProjectInfo{
    display:flex;
    align-items:center;
    order:9;
}

#calendar .objectInfo .tobjectKnowledgeInfo{
    grid-row-start:1;
    grid-column-start:3;
}


#importantTObjectList {
    display: block;
}

#importantTObjectList.closed {
    display: none;
}

.daySection .title{
    font-size: large;
}



/*------------todoViewer-------*/
#viewer{
    position:relative;    
}



#todoPopUp{
    position:absolute;
    top:0rem;
    height:100%;
    width:100%;
    background-color: rgba(0,0,0,0.8);    
    
    display:flex;
    justify-content:center;
}


#todoViewer{    
    background-color:white;
    align-self: center;
    border-radius:1rem;
    
    width: 50%;
    height:80%;
    text-align: left;
}

#todoInObjects{
    height:80%
}

#navigationBetweenObjectTypes{
    margin-top:1rem;
    margin-left : 2rem;
    display:flex;
    gap:3rem;
}

.navigationBTWobjectItem{

}

.navigationBTWobjectItem.active{
    text-decoration:underline;
}

#inObjectViewer{
    height:100%;
    overflow:scroll;
}

#inObjectViewer > .active{
    display:block;
}

#inObjectViewer > .inactive{
    display:none;
}

/* -------- Review View ------*/

.donetodo{
    display: flex;
    flex-direction: row;
}



/* -------- Focus Mode ------*/

#navigation

#navigation[focus = 'main']{
    display: none;
}

#viewer[focus ='main']{
    grid-column-start: 1;
    grid-column-end: 3;
}

#viewer[focus ='main'] #project{
    display: block;
}

#viewer[focus ='main'] #items{
    height: 100%;
}

#viewer[focus ='main'] .secondView{
    display: none;
}

#navigation[focus = 'second']{
    display: none;
}

#viewer[focus ='second']{
    grid-column-start: 1;
    grid-column-end: 3;
}

/*----- Review View -----*/
#review{
    overflow:scroll;
    height:100%
}

/* ------ Animation -----*/
.fadeOut05s{
    animation: fadeOut 0.5s forwards;   
}

@keyframes fadeOut {
    0% { opacity: 1;}    
    100% { opacity: 0;}
}






/*----- Sortable Drag -----*/

.sortable-ghost{
    opacity:0.2;
    background-color: black;
}






input[type="checkbox" i] {
    background-color: initial;
    cursor: default;
    appearance: auto;
    box-sizing: border-box;
    margin: 3px 3px 3px 4px;
    padding: initial;
    border: initial;
    
    width: 15px;
    height: 15px;
}

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

#header{
    min-height: 30px; 
    max-height:4%;

    background-color:rgb(50,50,50);
    display:flex;

    align-items:center;
    justify-content:space-between;

    padding-left:6rem;
    padding-right:6rem;
    gap:5rem;
    -webkit-app-region: drag;
}


@media only screen and (max-width: 600px) {
    #header{
        padding-left:0.5rem;
        padding-right:0.5rem;
        gap:0.2rem;
    }

    #opencloseNavigation{
        margin-left:0.5rem;
        margin-right:0.5rem;
    }
}

#gnlSearch{
    background-color:rgb(150,150,150);
    width:150px;
    display:flex;
    align-items:center;    
    gap:0.5rem;
    padding-left:0.5rem;
    padding-right:0.5rem;
    border-radius:5px;
}




#gnlSearch.active{
    background-color:white;   
    width:350px;       
}

#gnlSearch.active > *{
    background-color:white;    
}



#gnlSearch:hover{
    background-color:white;
}

#gnlSearch:hover > *{
    background-color:white;
}



#gnlSearch.active > #gnlSearchInput{
    width:300px;
}

#gnlSearchInput{
    all: unset;
    width:100px;
    background-color:rgb(150,150,150);
}


#gnlSearchInput::placeholder{
    color:black;
}




#searchResultsDiv{
    position:absolute;
    background-color:white;
    max-height:400px;
    width:400px;

    background-color: #fff;
    overflow: auto;
    overflow-x: hidden;
    box-shadow: 0 2px 10px rgb(0 0 0 / 30%);
    border-radius:  5px;    
}

#searchResultsPopup.inactive{
    display:none;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: .3;
  pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
  filter: invert(1);
}

#searchResultsPopup{
    display:block;
    height:100%;
    width: 100%;
    position: fixed;
    top: 4%;
    left: 0;
    bottom: 0;
    right: 0;
    content: ' ';
}

#overlayToKillSearchResults{
    height:100%;
    width: 100%;
}

#searchResults{
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    display:flex;
    flex-direction:column-reverse;
}

#searchResults .searchResult {
    border-bottom: 1px solid #eee;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    cursor: pointer;
}

#searchResults .searchResult[done="true"]{
      text-decoration: line-through;
      text-decoration-color: #5E5E5E;
}

#searchResults .searchResult:hover {
    background-color: #eee;
}


.searchResult i{
    margin-left:5px;
    margin-right:5px;
    color: #5E5E5E;
}

#searchViewer{
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

#searchViewer > #knowledgesGrid{
    padding-top:2rem;
}


#tObjectsDivs{
    grid-column-start: 1;
    grid-column-end: 3;
    
    height:100%;
    display:flex;
    align-items: stretch;
}



#searchHeader{
    display:flex;
    justify-content:space-around;

}

.searchCTA{    
    border-radius:10px;
    margin:10px;
    padding:5px;

    flex: 1 1 0;
    text-align:center;
}

#searchCTA{
    background-color: var(--main-CTA-color);
    color:white;
}

#filterCTA{
    background-color:var(--secondary-CTA-color)
}


#filterBTN{
    color:white;
}

#filterNavigation{
    display:flex;
}

#filterNavigation.close > #filters{
    display:none;
}

#filters{
    display:flex;
    color:white;
}


/* --------connectedDiv-----*/
#connectDiv{    
    order:1;
    display:flex;
    gap:1rem;
}

#connectedDiv{
    display: flex;
    gap:1rem;
    color:white;
}

#connectedDot{
    color:green;
}

#lastSyncedInfo{
    color:grey;
    font-size:small;
}

#connect{
    display:flex;
    gap:0.5rem;
    align-items:center;
}

#connectBTN{
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;

    background-color: rgb(150,150,150);
    color:white;
    border-radius:4px;
    padding-left:4px;
    padding-right:4px;
}

input[name="username"]{
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;

    color:white;
    border-bottom: solid;
    border-color:rgb(140,140,140);
    width: 100px
}

input[name="key"]{
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;

    color:white;
    border-bottom: solid;
    border-color:rgb(140,140,140);
    width: 100px
}

input[name="username"]:focus {
    outline: none;
}

input[name="key"]:focus {    
    outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-transition-delay: 99999s;
}

/*___________________________________________*/
/*_____________ Make View ___________________*/
/*___________________________________________*/

#makeview{
    margin : 2rem;
    display :flex;
    gap :1rem;
    height:90%;
}

#makeview > * {
    flex: 1 1 0;
    width: 0;
    background-color: var(--viewer-items-color);
    border-radius: 20px;    
    padding:1rem;
}

/*_____________ Brain Dump __________________*/

#braindump{
  
}

#braindump > .header{
    display:flex;
    justify-content: space-between;
}

/*_____________ organisedDay __________________*/

#organisedDay{
}

#calendarDay{
    height:100%
}


/*_____________ Pomodoro __________________*/

#pomodoro{
    display:flex;
    justify-content:center;
    align-items:center;
}

#pomodoroTimer{
    font-size:xx-large;
}

.title{
    font-weight: bold;
}


/*___________________________________________*/
/*_______________ ELECTRON __________________*/
/*___________________________________________*/

/*_________ Quick Thought  ___________*/

#quickThoughtHeader{
    height:30px;
}


/*___________________________________________*/
/*_______________ CSS GENERIC CLASS _________*/
/*___________________________________________*/

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.clickable{
    cursor:pointer;
}