.lists-container::-webkit-scrollbar {
    height: .4rem;
}

/*.lists-container::-webkit-scrollbar-thumb {
    background-color: #fff;
    border: 0.8rem solid #53b374;
    border-top-width: 0;
}*/

.chartdiv::-webkit-scrollbar , .lists-container::-webkit-scrollbar {width: 8px;cursor:pointer;}
.chartdiv::-webkit-scrollbar-track, .lists-container::-webkit-scrollbar-track {background: #F1F4F8;border-radius: 10px;cursor:pointer;}
.chartdiv::-webkit-scrollbar-thumb, .lists-container::-webkit-scrollbar-thumb {background: #A9C1FF;border-radius: 10px;cursor:pointer;}
.chartdiv::-webkit-scrollbar-thumb:hover, .lists-container::-webkit-scrollbar-thumb:hover {background: rgb(100, 100, 100);border-radius: 10px;cursor:pointer;}
.chartdiv::-webkit-scrollbar-thumb:active, .lists-container::-webkit-scrollbar-thumb:active {background: rgb(68, 68, 68);border-radius: 10px;cursor:pointer;}

.lists-container {
    display: flex;
    align-items: start;
    overflow-x: auto;
    height: calc(100vh - 8.6rem);
    position: relative;
    z-index: 2;
}

.list {
    flex: 0 0 20rem;
    display: flex;
    flex-direction: column;
    background-color: #f1f4f9;
    max-height: calc(100vh - 11.8rem);
    border-radius: 0.3rem;
    margin-right: 1rem;
}

.list:last-of-type {
    margin-right: 0;
}

.list-title {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    padding: 1rem;
    margin-bottom:0;
}

.list-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: start;
    padding: 0 0.6rem 0.5rem;
    overflow-y: auto;
    margin-bottom:0;
}

.list-items::-webkit-scrollbar {
    width: 1rem;
}

.list-items::-webkit-scrollbar-thumb {
    background-color: #53b374;
    border-right: 1rem solid #A9C1FF;
}



.list-items li{position:relative;}
.lists-container .article-card__controls {position:absolute; right:5px; top:5px;display:none;}
.list-items li:hover .article-card__controls{display:block;}
.article-card__controls button {border-radius:0px;margin-right: 3px;margin-top:2px;}
.list-items li .article-card__controls a {padding:5px;border:none;border-radius:4px 0 0px 4px;background: #F3F4F6;}
.list-items li .article-card__controls a:hover {background:#53b374}
.list-items li .article-card__controls a:hover svg {fill:#FFF}
.article-card__controls a:hover, .article-card__controls button:hover {background:#ebecf0}
.article-card__controls a:hover svg, .article-card__controls button:hover svg {fill:#172b4d}
.list-items li {
    list-style:none;
}
.list-items li a{
    list-style:none;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    background-color: #fff;
    padding: 0.65rem 0.6rem;color: #4d4d4d;border-bottom: 0.1rem solid #ccc;border-radius: 0.2rem;margin-bottom: 0.6rem;word-wrap: break-word;cursor: pointer;-moz-transition: all 0.1s ease-out;-o-transition: all 0.1s ease-out;-webkit-transition: all 0.1s ease-out;}
.list-items li a {
    color: #4d4d4d;
    display:block;
    border:2px solid #FFF;

} 
.list-items li a:hover {
    /*color: #FFF*/
} 
.list-items li a:last-of-type {
    margin-bottom: 0;
    border: 2px solid #ffffff;
}

.list-items li a:hover {
    background:#FFF;
    border:2px solid #3464e0
}
.list-items li a:hover span.person-card__desc{
    color: #4d4d4d;
}

.list-items li a.add-card-btn {
    display: block;
    color: #838c91;
    text-align: left;
    cursor: pointer;
    background:#FFF; border:2px solid #FFF;
}

.list-items li a.add-card-btn:hover {
    background-color: #FFF;
    color: #4d4d4d;
    text-decoration: none;
    border:2px solid #3464e0
}
.person-card__desc {display:inline-block; margin-top:10px;font-size:14px;}
/*.list-items li a:hover .person-card__desc{
    color:#FFF;
}*/
.add-list-btn {
    flex: 0 0 27rem;
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    background-color: #006aa7;
    color: #a5cae0;
    padding: 1rem;
    border-radius: 0.3rem;
    cursor: pointer;
    transition: background-color 150ms;
    text-align: left;
}

.add-list-btn:hover {
    background-color: #005485;
}

.add-card-btn::after,
.add-list-btn::after {
    content: '...';
}



@supports (display: grid) {
   

    .masthead {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-column-gap: 2rem;
    }

    .boards-menu {
        display: grid;
        grid-template-columns: 9rem 18rem;
        grid-column-gap: 0.8rem;
    }

    .user-settings {
        display: grid;
        grid-template-columns: repeat(4, auto);
        grid-column-gap: 0.8rem;
    }

    .board-controls {
        display: grid;
        grid-auto-flow: column;
        grid-column-gap: 1rem;
    }

    .lists-container {
        display: grid;
        grid-auto-columns: 19rem;
        grid-auto-flow: column;
        grid-column-gap: 1rem;
    }
    
   .lists-container-4 {
        display: grid;
        grid-auto-columns: 22rem;
        grid-auto-flow: column;
        grid-column-gap: 1rem;
    }

    .list {
        display: grid;
        grid-template-rows: auto minmax(auto, 1fr) auto;
    }

    .list-items {
        display: grid;
        grid-row-gap: 0.6rem;
    }

    .list,
    .list-items li,
    .boards-btn,
    .board-info-bar,
    .board-controls .btn,
    .user-settings-btn {
        margin: 0;
    }
}






.list-items::-webkit-scrollbar {width: 8px;}
.list-items::-webkit-scrollbar-track {background: #f1f4f9;border-radius: 10px;cursor:pointer;}
.list-items::-webkit-scrollbar-thumb {background: #f1f4f9;border-radius: 10px;cursor:pointer !important;}
.list-items::-webkit-scrollbar-thumb:hover {background: #3464e0;border-radius: 10px;cursor:pointer;}
.list-items::-webkit-scrollbar-thumb:active {background: #3464e0;border-radius: 10px;cursor:pointer;}