@import '~assets/scss/_variables.scss';
.list-container {
    padding: 20px 15px;
    .table thead tr th {
        opacity: 0.52;
        color: $text-dark-color;
        font-size: 13px;
        font-weight: 500;
        line-height: 24px;
        text-align: left;
    }
    .table tbody  tr:nth-child(odd) {
        box-sizing: border-box;
        height: 66px;
        border: 1px solid rgba(0,0,0,0.02);
        background-color: $default-white;
    }
    .table tbody  tr:nth-child(even) {
        box-sizing: border-box;
        height: 66px;
        border: 1px solid rgba(0,0,0,0.02);
        background-color: $circle-color;
    }
    .table tbody tr {
        td:first-child {
            color: $text-dark-color;
            font-size: 13px;
            font-weight: 500;
            line-height: 24px;
        }
        td {
            color: $text-dark-color;
            font-size: 12px;
            line-height: 18px;
            text-align: left;
            vertical-align: middle;
        }
    }
    .table tbody tr:hover {
        box-sizing: border-box;
        height: 66px;
        border: 1px solid rgba(0,0,0,0.02);
        background-color: $default-white;
        box-shadow: 0 0 12px 0 rgba(0,0,0,0.16), 0 4px 4px 0 rgba(0,0,0,0.16);
        .view-invite {
            visibility: visible;
        }
    }
    .footer {
        .members-pic {
            height: 29px;
            width: 29px;
            border-radius: 50%;
            border: 2px solid $default-white;
            overflow: hidden;
            background-color: dimgray;
        }
        .pic1 {
            right: 5px;
        }
        .pic2{
            right: 10px;
        }
        .members-count {
            opacity: 0.5;
            color: $dark-color-txt;
            font-size: 12px;
            font-weight: 500;
            line-height: 16px;
            padding: 6px 20px 0 0;
            text-align: right;
        }
        .comments-icon {
            color: rgba(0,0,0,0.32);
            font-family: material;
            font-size: 18px;
            line-height: NaNpx;
            text-align: right;
            padding: 6px 0 0 40px;
        }
        .comments-txt {
            opacity: 0.5;
            color: $dark-color-txt;
            font-size: 12px;
            font-weight: 500;
            line-height: 16px;
            padding: 8px 0 0 30px;
        }
    }
    .view-invite {
        position: relative;
        visibility: hidden;
        .add-btn {
            height: 37px;
            width: 166.12px;
            border: 1px solid $btn-blue;
            border-radius: 2px;
            background-color: $default-white;
            box-shadow: 0 2px 6px 0 rgba(0,0,0,0.12);
            .material-icons {
                font-size: 16px;
            }
            .plus-btn {
                color: $btn-blue;
                font-size: 16px;
                line-height: 18px;
                position: relative;
                top: 4px;
            }
            .btn-txt {
                color: $btn-blue;
                font-size: 12px;
                line-height: 18px;	
                text-align: center;
            }
        }
        .more {
            float: right;
            text-align: right;
            padding-left: 30px;
            .icon {
            color: rgba(0,0,0,0.52);
            }
        }
        .add-btn:hover {
            background-color: $btn-blue;
            .btn-txt, .plus-btn{
                color: $default-white;
            }
        }
    }
}