html {
    background-color: rgb(232, 232, 232);
    font-family: Quicksand;
    overflow: hidden;
}

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin: 0;
}

#header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    position: absolute;
    top: 0;
}

#title {
    font-weight: 550;
    margin: 0;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
    align-self: center;
    text-decoration: none;
    color: rgb(39, 39, 39);
}

#logo {
    height: 2.5rem;
}

.btn-hide {
    background-color: transparent;
    border: none;
    padding: 0;
}

.nav-panel-btn-cont-icon {
    fill: rgb(97, 110, 234);
    max-height: 1.75rem;
    max-width: 2rem;
}

#window {
    background: linear-gradient(to bottom, rgb(241, 242, 252), rgb(255, 255, 255));
    width: 90%;
    max-width: 30rem;
    border-radius: 2.5rem;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

#nav-panel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 3.5rem;
    margin-bottom: 1rem;
}

.nav-panel-btn-cont {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    background-color: rgb(210, 214, 249);
    padding: 1rem;
    border-radius: 3rem;
}

.nav-panel-btn-cont-separator {
    width: 0.2rem;
    height: 2rem;
    border-radius: 1rem;
    background-color: rgb(142, 152, 240);
}

#window-item-cont {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    gap: 0.5rem;
    min-height: 18rem;
}

.window-item {
    display: grid;
    grid-template-columns: 2.5rem 1fr max-content;
    height: 3rem;
    padding: 0.5rem 0.5rem;
    border-radius: 1.75rem;
}

.window-item-icon {
    grid-column: 1;
    width: 2.5rem;
    height: 3rem;
    align-self: center;
    justify-self: center;
    margin-left: 0.5rem;
}

.window-item-text {
    grid-column: 2;
    height: 2rem;
    align-self: center;
    justify-self: left;
    margin: 0;
    height: fit-content;
    font-size: 1.25rem;
    font-weight: 550;
    padding-left: 0.75rem;
    color: rgb(30, 30, 30);
    display: inline-block;
    max-width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.window-item-more-btn {
    grid-column: 3;
    width: 1.5rem;
    height: 2rem;
    margin-right: 0.5rem;
}

.red {
    background-color: rgb(255, 185, 185);
    border: solid 0.15rem rgb(255, 128, 128);
}
.red :nth-child(1),
.red :nth-child(3) {
    fill: rgb(219, 87, 87);
}

.yellow {
    background-color: rgb(255, 247, 204);
    border: solid 0.15rem rgb(255, 238, 153);
}
.yellow :nth-child(1),
.yellow :nth-child(3) {
    fill: rgb(189, 164, 40);
}

.green {
    background-color: rgb(217, 255, 204, 1);
    border: solid 0.15rem rgb(179, 255, 153);
}
.green :nth-child(1),
.green :nth-child(3) {
    fill: rgb(78, 190, 39);
}

.blue {
    background-color: rgb(204, 247, 255);
    border: solid 0.15rem rgb(153, 238, 255);
}
.blue :nth-child(1),
.blue :nth-child(3) {
    fill: rgb(40, 164, 189);
}

.purple {
    background-color: rgb(212, 204, 255);
    border: solid 0.15rem rgb(170, 153, 255);
}
.purple :nth-child(1),
.purple :nth-child(3) {
    fill: rgb(127, 108, 224);
}

.pink {
    background-color: rgb(255, 204, 255);
    border: solid 0.15rem rgb(255, 153, 255);
}
.pink :nth-child(1),
.pink :nth-child(3) {
    fill: rgb(198, 83, 198);
}

.orange {
    background-color: rgb(255, 206, 189);
    border: solid 0.15rem rgb(255, 162, 128);
}
.orange :nth-child(1),
.orange :nth-child(3) {
    fill: rgb(215, 105, 66);
}

.white {
    background-color: rgb(249, 249, 249);
    border: solid 0.15rem rgb(216, 216, 216);
}
.white :nth-child(1),
.white :nth-child(3) {
    fill: rgb(147, 147, 147);
}

#backdrop {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.279);
    width: 100%;
    height: 100%;
    z-index: 10;
}

#new-item-window {
    background: linear-gradient(to bottom, rgb(235, 236, 254), rgb(255, 255, 255));
    z-index: 30;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 30rem;
    align-items: center;
    padding: 1.25rem;
    box-sizing: border-box;
    border-radius: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#new-item-window-title {
    margin: 0;
    color: rgb(87, 98, 203);
}

#new-item-window-icon-wrapper {
    background-color: rgba(142, 152, 240, 0.32);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0rem;
    padding: 1rem;
    border-radius: 1rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

.new-item-window-icon {
    width: 2.25rem;
    height: 2.25rem;
    fill: rgb(97, 110, 234);
    stroke: rgb(97, 110, 234);
    background-color: rgba(163, 169, 219, 0.226);
    padding: 0.5rem;
    border-radius: 1rem;
    margin: 0.15rem;
}

#new-item-window-inputs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.new-item-window-input {
    background-color: rgba(210, 214, 249, 0.5);
    border: none;
    height: 2.5rem;
    width: 100%;
    border-radius: 1rem;
    padding-left: 1rem;
    box-sizing: border-box;
    font-family: Quicksand;
    font-weight: 600;
    font-size: 0.8rem;
    color: rgb(46, 46, 46);
}

.new-item-window-input::placeholder {
    color: rgb(108, 119, 211);
    font-size: 1rem;
    font-weight: 550;
}

#new-item-window-confirm-btn-wrapper {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.new-item-window-btn {
    margin-top: 1.5rem;
    width: 100%;
    height: 2.25rem;
    border: none;
    border-radius: 1rem;
    font-size: 0.9rem;
    font-family: Quicksand;
    font-weight: 600;
    color: rgb(30, 40, 125);
}

#new-item-window-confirm-btn {
    background-color: rgb(134, 143, 223);
}

#new-item-window-cancel-btn {
    background-color: rgb(214, 218, 255);
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer-darken {
    cursor: pointer;
    transition: filter ease 0.3s;
}

.cursor-pointer-darken:hover {
    filter: brightness(0.8);
}

#edit-popup.hide,
#not-logged-in-window.hide,
#delete-item-window.hide,
#no-items-div.hide,
#popup.hide,
.hide {
    display: none;
}

.new-item-window-icon-selected {
    background-color: rgba(97, 111, 234, 0.184);
    border: solid 0.15rem rgba(75, 88, 205, 0.794);
    padding: 0.35rem;
}

#new-item-window-color-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    height: max-content;
    background-color: rgba(142, 152, 240, 0.32);
    padding: 1rem;
    border-radius: 1rem;
    justify-self: center;
    margin: 1rem 0;
}

.new-item-window-color {
    width: 100%;
    max-width: 1.5rem;
    aspect-ratio: 1/1;
    border-radius: 100%;
    border: solid;
    display: flex;
    align-items: center;
    justify-content: center;
}

#color-check {
    width: 70%;
    aspect-ratio: 1/1;
}

.edit-popup-icon {
    height: 1.75rem;
    width: 1.75rem;
    fill: rgb(40, 164, 189);
}

#edit-popup {
    display: flex;
    flex-direction: row;
    width: max-content;
    height: max-content;
    background-color: rgba(83, 171, 189, 0.2);
    align-self: center;
    padding: 0.35rem;
    border-radius: 0.9rem;
    gap: 0.25rem;
}

#edit-popup-separator {
    width: 0.17rem;
    height: 1.6rem;
    background-color: rgba(40, 164, 189, 0.6);
    border-radius: 1rem;
    align-self: center;
}

#logo-a {
    height: 40px;
}

#no-items-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    border: 0.2rem dashed rgb(197, 202, 255);
    border-radius: 2rem;
    padding: 2rem;
}

.alert-icon-cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    width: fit-content;
}

#no-items-div-icon {
    width: 5rem;
    height: 5rem;
    fill: rgb(173, 181, 255);
}

#no-items-div-text {
    width: max-content;
    color: rgb(173, 181, 255);
    font-weight: 600;
}

#no-items-div-buttons-cont {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 11rem;
}

.button-default {
    background-color: rgb(210, 214, 249);
    border: none;
    padding: 0.7rem;
    border-radius: 1.2rem;
    font-family: Quicksand;
    font-weight: 600;
    font-size: 0.9rem;
    color: rgb(97, 110, 234);
    width: 100%;
}

.btn-disable {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

#not-logged-in-window {
    z-index: 20;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1rem;
    background: linear-gradient(to bottom, rgb(239, 240, 255), rgb(255, 255, 255));
    width: 18rem;
    border-radius: 1.75rem;
    border: solid 0.2rem rgb(208, 213, 255);
}

#not-logged-in-window-icon {
    width: 5rem;
    height: 5rem;
    fill: rgb(126, 137, 233);
}

.not-logged-in-window-text {
    color: rgb(52, 52, 52);
    font-size: 1rem;
    font-weight: 600;
    width: fit-content;
}

.not-logged-in-window-text-heading {
    font-size: 1.1rem;
    font-weight: 700;
}

#not-logged-in-window-fedorcodev-button {
    background-color: rgb(118, 129, 223);
    border: none;
    padding: 0.5rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

#not-logged-in-window-fedorcodev-icon {
    width: 2rem;
    aspect-ratio: 1/1;
    fill: rgb(65, 65, 153);
}

#not-logged-in-window-fedorcodev-text {
    font-family: Quicksand;
    font-weight: 700;
    font-size: 1rem;
    color: rgb(239, 240, 255);
}

#delete-item-window {
    z-index: 20;
    background: linear-gradient(to bottom, rgb(239, 240, 255), rgb(255, 255, 255));
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    width: 13rem;
    border-radius: 1.5rem;
}

#delete-item-window-text-cont {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

#delete-item-window-buttons-cont {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#delete-item-window-button-delete {
    background-color: rgb(255, 134, 134);
    color: rgb(147, 42, 42);
}

#delete-item-window-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(75, 87, 193);
}

#delete-item-window-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(59, 59, 59);
}

#popup {
    background-color: white;
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 1.5rem;
    gap: 0.75rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: -4rem;
    opacity: 0;
    transition: bottom 1s ease-in-out, opacity 1s ease-out;
    z-index: 500;
}

.popup-show,
#popup.popup-show {
    bottom: 10rem;
    opacity: 1;
}

#popup-icon {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.5rem;
    border-radius: 1rem;
}

.popup-icon-green {
    background-color: rgba(122, 198, 40, 0.449);
    fill: rgb(84, 115, 52);
}

.popup-icon-red {
    background-color: rgba(198, 69, 40, 0.591);
    fill: rgb(177, 59, 43);
}

#popup-text {
    font-size: 1rem;
    font-weight: 500;
    color: rgb(52, 52, 52);
}

.transition-fade,
#new-item-window.transition-fade,
#delete-item-window {
    opacity: 1;
    transition: opacity 0.2s ease;
}

#new-item-window.hide,
#delete-item-window.hide {
    opacity: 0;
    pointer-events: none;
    display: block; /* ensure NOT display:none */
}