:root {
    --menuWidth: min(300px, 75vw);
}

#divMenu, #divAddSidebar {
    position: fixed;
    height: calc(100vh - 56px);    
    width: var(--menuWidth);
    top: 56px;
    transition: all 0.5s ease 0s;
    background-color: #2d3e50;
    border-top: 3px solid slategrey;
    z-index: 101;    
}

#divMenu {
    left: calc(var(--menuWidth) * -1);
}

#divMenu.active {
    left: 0px;
    transition: all 0.5s ease 0s;
}

#divAddSidebar {
    right: calc(var(--menuWidth) * -1);
    padding-top: 24px;
}

#divAddSidebar.active {
    right: 0px;
    transition: all 0.5s ease 0s;
}

#divAddSidebar label {
    padding: 4px;
    color: whitesmoke;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;                   
    cursor: inherit;
    display: block;
    position: relative;    
    width: 80%;
    left: 10%;
}

#divAddSidebar label.task {
    font-weight: bold;
}


#divAddSidebar label.project, #divAddSidebar label.email {
    font-style: italic;
}

.menu-items {
    display: grid;
    grid-auto-rows: 55px;
    position: relative;
    padding-top: 16px;    
}

.menu-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    width: 100%;    
    cursor: pointer;
}


.menu-icon {
    color: slategrey;
    height: 24px;
    width: 24px;
    justify-self: center;
    align-self: center;
}

.menu-text {
    color: white;
    align-self: center;
    cursor: inherit;
}


.add-form {
    display: grid;
    grid-auto-rows: 55px;
    position: relative;
    padding-top: 16px;
    grid-gap: 10px;
}

.add-item {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    width: 90%;    
    left: 5%;
}

.add-input {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    color: white;
    align-self: center;
    background: #01010430;
    border: none;
    padding-block: 16px;
    padding-inline: 55px 10px;
    border-radius: 7px;    
    outline: none;
}

.add-input::placeholder {
    color: darkgray;
}


.add-icon {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    position: absolute;
    left: 10px;
    color: darkgray;
    height: 24px;
    width: 24px;
    justify-self: center;
    align-self: center;
}

.add-item.textarea .add-icon {
    align-self: flex-start;
    top: 12px;    
}

.add-item textarea {
    height: 150px;
}


/* position: absolute;
left: 12px;
top: 12px; */