@import '~assets/scss/_variables.scss';
.tile-container {
    width: 100%;
    .card-list {
        display: inline-flex; 
        margin: 15px;
    .tile {
        height: 240px;
        width: 320px;
        border-radius: 2px;
        background-color:$default-white;
        padding: 15px 0 0 0;
        .more {
            position: relative;
            bottom: 19px;
            float: right;
            .icon {
            color: rgba(0,0,0,0.52);
            }
        }
        .title {
            padding: 0 0 20px 0px;
            .title-txt {
                color: rgba(0,0,0,0.72);
                font-size: 14.95px;
                font-weight: bold;
                letter-spacing: 0.25px;
                line-height: 24px;
                text-align: center;
            }
            .btn-View {
                color: rgba(0,0,0,0.72);
                font-size: 18px;
                font-weight: 500;
                line-height: 24px;
                text-align: center;
            }
            
            .owner {
                color: rgba(0,0,0,0.82);
                font-size: 11px;
                letter-spacing: 0.25px;
                line-height: 24px;
            }
        }
        .status {
            color: rgba(0,0,0,0.52);
            font-size: 11px;
            line-height: 24px;
            text-align: center;
            padding: 13px 0 15px 0;
        }
        .inprogress-status {

        }
        .completed-status {

        }
        .role {
            height: 15px;
            width: 76px;
            border-radius: 2px;
            background-color: $role-owner;
        }
        .role-none {
            height: 15px;
            width: 76px;
            border-radius: 2px;
            background-color: $default-white;
            visibility: hidden;
        }
        .role-txt {
            color: #FFFFFF;	
            font-size: 9px;
            font-weight: 500;
            letter-spacing: 1px;
            line-height: 12px;
            text-align: center;
            padding: 2px;
        }
        .hint {
            color: rgba(0,0,0,0.52);
            font-size: 10px;
            font-style: italic;
            font-weight: 300;
            letter-spacing: 0.25px;
            line-height: 24px;
        }
        .footer {
            display: inline-flex;
            width: 100%;
            border: 1px solid #F7F7F7;
            background-color: #FCFCFC;
            height: 57.48px;
            padding: 17px 010px;
            .members-count {
                color: rgba(0,0,0,0.82);
                font-size: 11px;
                line-height: 24px;
                padding-left: 129px;
            }
            .hint {
                color: rgba(0,0,0,0.52);
                font-size: 10px;
                font-style: italic;
                font-weight: 300;
                letter-spacing: 0.25px;
                line-height: 24px;
            }
            .date {
                color: rgba(0,0,0,0.82);
                font-size: 11px;
                line-height: 24px;
            }
        }
        .action {
            display: none;
            width: 100%;
            height: 57.48px;
            background-color: #0E72DB;
            height: 58.48px;
            border-radius: 2px;
            .action-btn {
                height: 100%;
                width: 100%;
                background-color: #0E72DB;
                .action-txt {
                    color:$default-white;
                    font-size: 11px;
                    font-weight: 400;
                    letter-spacing: 0.23px;
                    line-height: 15px;
                    text-align: center;
                }
            }
            .action-btn:hover {
                .action-txt{
                    font-weight: 500;
                    color:$default-white;
                }
            }
        }

    //     .view-invite {
    //         position: relative;
    //         display: none;
    //         bottom: 65px;
    //         .add-btn {
    //             height: 37px;
    //             width: 108.17px;
    //             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;
    //             }
    //             .btn-txt {
    //                 color: $btn-blue;
    //                 font-size: 12px;
    //                 line-height: 18px;	
    //                 text-align: center;
    //             }
    //         }
    //         .add-btn:hover {
    //             background-color:$btn-blue;
    //             .btn-txt, .plus-btn{
    //                 color: $default-white;
    //             }
    //         }
    //         .requested-txt {
    //             color: $btn-blue;
    //             font-size: 12px;
    //             line-height: 18px;
    //             text-align: center;
    //             font-weight: 500;
    //             bottom: 10px;
    //             position: relative;
    //         }
    //     }
    
    }

    .tile:hover {
        border-radius: 2px;
        background-color: $default-white;
        box-shadow: 0 6px 24px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.2);
        .title{
            .btn-View {
                color: $btn-blue;
            }
        }
        .footer{
            display: none;
        }
        .action {
            display: block;
        }
    }
}
::ng-deep .mat-dialog-container {
    padding: 0
}
::ng-deep .mat-tooltip {
    position: relative;
    border-radius: 3px;
}
::ng-deep .mat-card-header-text {
    width: 100%;
}
::ng-deep mat-grid-tile {
    width: 300px;
}
}
