.notifications {
    display: flex;
    flex-direction: column;
}

.not-item {
    margin-top: 1rem;
    width: 100%;
    height: 3rem;

    transition: all 750ms cubic-bezier(0.125, 1.305, 0.440, 0.975); /* custom */
    transition-timing-function: cubic-bezier(0.125, 1.305, 0.440, 0.975); /* custom */

    border: solid 1px rgb(230, 230, 230);
    border-radius: 0.75rem;

    overflow: hidden;

    background-color: #edebeb;;
}

.not-item-expanded {
    height: 14rem;
}

.not-item i {
    height: fit-content !important;
}



.not-item-header {
    width: 100%;
    height: 3rem;
    padding: 0rem;
    opacity: 1;

    transition: all 750ms cubic-bezier(0.125, 1.305, 0.440, 0.975); /* custom */
    transition-timing-function: cubic-bezier(0.125, 1.305, 0.440, 0.975); /* custom */

    position: relative;

    overflow: hidden;

    padding: 0.5rem;
}


.not-item-header > #icon {
    z-index: 1;
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
}


.not-item-header > #progress {
    z-index: 0;
    position: absolute;
    left: 0rem;
    bottom: 0rem;
    width: 100%;
    height: 5px;
    background-color: rgb(157, 255, 0);
    
    transition: all 750ms cubic-bezier(0.125, 1.305, 0.440, 0.975); /* custom */
    transition-timing-function: cubic-bezier(0.125, 1.305, 0.440, 0.975); /* custom */
}

.not-item-header > #progress.countdown {
    background-color: rgb(111 111 111) !important;
}



.not-item-header-content {
    z-index: 1;
    width: 100%;
    overflow: hidden;
}

.not-item-header-content > #model {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
}


.not-item-header-content > #title {
    font-size: 1.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}




.not-item-header-content > #actions {
    margin-left: auto;
    width: auto;
}

.not-item-header-content > #actions > * {
    margin-left: 0.5rem !important;
}



.not-item-header-content > #actions > #status {
    position: relative;
}

.not-item-header-content > #actions > #status > #loader {
    position: absolute;
    left: -0.3rem;
    top: -0.2rem;
}







.not-item-header-content > #actions > #downloadBtn > #downloadBtnCaption {
    margin-right: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    opacity: 0.6;
    white-space: nowrap;
}

.not-item-header-content > #actions > #downloadBtn > #icon {
    width: fit-content;
}






.not-item-playerContent {
    height: 0rem;
    padding: 0rem;
    transition: 0.2s;
    filter: blur(10px);
    transform: scale(0.7);
    opacity: 0;

    overflow-x: auto;
    overflow-y: hidden;
}

.not-item-playerContent-expanded {
    height: 11rem;
    padding: 2rem 0rem 1rem 0rem;
    filter: blur(0px);
    transform: scale(1);
    opacity: 1;
}

.not-item-playerContent > #stems {
    width: fit-content;
    margin: auto;
}
.not-stem {
    width: 8rem;
    height: 8rem;
}

.not-stem > #icon {
    width: 2rem;
    height: 2rem;
    opacity: 0.8;
}

.not-stem > #caption {
    font-size: 1.2rem;
}

.not-stem > #actions > * {
    margin: 0.5rem;
}

.not-stem > #actions > #downloadBtn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-weight: bold;
}

.not-stem > #actions > * > i {
    width: fit-content;
    margin: 0rem;
}






.list::-webkit-scrollbar {
    width: 0.3rem;
}



.purple.loader:before {
    border-color: rgba(165, 1, 249, 0.2);
}
.purple.loader:after {
    border-color: #a501f9 transparent transparent;
}

.blue.loader:before {
    border-color: rgba(1, 108, 249, 0.2);
}
.blue.loader:after {
    border-color: #016cf9 transparent transparent;
}

.green.loader:before {
    border-color: rgba(0, 179, 9, 0.2);
}
.green.loader:after {
    border-color: #18cf00 transparent transparent;
}