.window.welcome{
    display: flex;
    flex-direction: column;
}
.notesListContainer{
    display: flex;
    flex-direction: column;
    height: 100%;
    /* flex-grow: 1; */
    overflow: hidden; /* Credit to a specific chat that I needed an overflow hidden here */
}

.notesList{
    padding: 12px;
    
    display: flex;
    /* flex-grow: 1;
    min-height: 0; */
    height: 100%;
    justify-content: flex-start;
    align-content: flex-start;
    overflow: auto;
    gap: 8px;
    flex-wrap: wrap;
}

.list .notesList{
    flex-wrap: initial;
    flex-direction: column;
}

.notesListContainer .top{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    
    padding: 12px;
    padding-bottom: 0;
}
.notesListContainer .top .sort p:first-child{
    color: var(--note-summary-color);
}

.notesListContainer .top .bin{
    margin-left: auto;
    
    display: flex;
    align-items: center;
    padding-left: 40px;
    padding-right: 16px;
}
.notesListContainer .top .bin i:first-child{
    transition: .3s;
    /* transform: translateY(-12px); */
    clip-path: polygon(0 0, 100% 0, 100% 29%, 0 29%);
}
.notesListContainer .top .bin i:nth-child(2){
    clip-path: polygon(0 100%, 100% 100%, 100% 29%, 0 29%);
}

.notesListContainer .top .bin:hover i:first-child,
.notesListContainer .top .bin:focus-visible i:first-child{
    transform: translateY(-16px)rotate(25deg);
}

.notesListContainer .top .viewAnimate i,
.notesListContainer .top .sortAnimate i{
    transition: .3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.notesListContainer .top .viewAnimate i:first-child{
    clip-path: polygon(0 0, 25% 0, 25% 100%, 0% 100%);
}

.notesListContainer .top .viewAnimate i:nth-child(2){
    clip-path: polygon(74% 0, 26% 0, 26% 100%, 74% 100%);
}

.notesListContainer .top .viewAnimate i:nth-child(3){
    clip-path: polygon(75% 0, 100% 0, 100% 100%, 75% 100%);
}

.notesListContainer .top .viewAnimate:hover i:first-child,
.notesListContainer .top .viewAnimate:focus-visible i:first-child{
    transform: translateX(-2px)translateY(-50%);
}
/* .notesListContainer .top .viewAnimate:hover i:nth-child(2),
.notesListContainer .top .viewAnimate:focus-visible i:nth-child(2){
    transform: translateY(-50%)scale(.95, .95);
} */
.notesListContainer .top .viewAnimate:hover i:nth-child(3),
.notesListContainer .top .viewAnimate:focus-visible i:nth-child(3){
    transform: translateX(2px)translateY(-50%);
}


.notesListContainer .top .sortAnimate i:first-child{
    clip-path: polygon(0 40%, 100% 40%, 100% 0, 0 0);
}

.notesListContainer .top .sortAnimate i:nth-child(2){
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
}

.notesListContainer .top .sortAnimate i:nth-child(3){
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
}

.notesListContainer .top .sortAnimate:hover i:nth-child(2),
.notesListContainer .top .sortAnimate:focus-visible i:nth-child(2){
    animation-name: SecondLineSort;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}

@keyframes SecondLineSort {
    0%{
        transform: translateY(-50%);
    }
    50%{
        transform: translateX(4px)scaleX(1.25)translateY(-50%);
    }
    100%{
        transform: translateX(6px)translateY(-50%);
    }
}

.notesListContainer .top .sortAnimate:hover i:nth-child(3),
.notesListContainer .top .sortAnimate:focus-visible i:nth-child(3){
    animation-name: ThirdLineSort;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}

@keyframes ThirdLineSort {
    0%{
        transform: translateY(-50%);
    }
    50%{
        transform: translateX(11px)scaleX(2)translateY(-50%);
    }
    100%{
        transform: translateX(11px)translateY(-50%);
    }
}

.list .notesList .button{
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
    padding: 0 8px;
    min-height: 60px;
}

.notesList .button{
    padding: 12px;
    min-height: 80px;
    min-width: 120px;
}
.button.selected{
    border: 1px solid var(--button-fg);
    background: var(--blue);
    color: var(--button-active-fg);
}
.notesList .button[NID]{
    padding-bottom: 0;
    overflow: hidden;
}
.notesList .button:not([NID]){
    display: flex;
    align-items: center;
    justify-content: center;
}
.notesList .button i{
    position: initial;
    transform: initial;
}

.notesList .button .title{
    color: var(--note-title-color);
    display: flex;
    align-items: center;
    transition: .1s;
}
.notesList .button .summary{
    color: var(--note-summary-color);
    padding: 6px 0;
    transition: .2s;
}
.notesList .button .sortData{
    background-color: var(--note-sortData-bg);
    color: var(--note-sortData-color);
    margin: 0 -12px;
    padding: 4px 12px;
    transition: .3s;
}

.notesList .button:active .title{
    color: var(--note-active-title-color);
}
.notesList .button:active .summary{
    color: var(--note-active-summary-color);
}
.notesList .button:active .sortData{
    background-color: var(--note-active-sortData-bg);
    color: var(--note-active-sortData-color);
}

.notesList .button.folder{
    background-color: var(--note-sortData-bg);
}
.notesList .button.folder:active{
    background-color: var(--button-fg);
}
.notesList .button.folder .title{
    padding: 15px;
}

.notesList .button .device{
    position: absolute;
    top: -3px;
    right: -3px;
    
    display: flex;
    justify-content: center;
    align-items: center;

    width: 32px;
    height: 32px;

    border: 1px solid var(--blue);
    background-color: #222;
    border-radius: 99px;
}
.notesList .button .device span{
    display: none;
}

.notesList .button .device.hide{
    animation-name: devicePopout;
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.41,-0.3,.86,.69);
}

@keyframes devicePopout {
    to{
        transform: translateY(-12px);
        opacity: 0;
    }
}