@import '~assets/scss/_variables.scss';
.detail-content {
    .title-hint {
        color: rgba(0,0,0,0.52);
        font-size: 11px;
        line-height: 16px;
        text-align: left;
    }
    .hint-value {
        color: rgba(0,0,0,0.87);
        font-size: 14px;
        line-height: 24px;
        text-align: left;
        word-break: break-word;
        padding: 0 25px 0 0;
    }
    .prj-url {
        color: $btn-blue;
        word-break: break-all;
    }
    .left-panel{
        float: left;
        width: 100%;
        padding: 0 25px;
        .launch-prj {
            padding-top: 20px;
        }
        .right-margin {
            margin-right: 235px;
        }
        .list {
            display: inline-flex;
            width: 100%;
            margin: 40px 0;
            .prj-desc {
                width: 70%;
            }
            .prjUrl {
                width: 30%;
            }
            .full-width {
                width: 100%;
            }
        }

        .btn-create {
            height: 48px;
            width: 171px;
            border-radius: 2px;
            background-color: $btn-blue;
            .btn-txt{
                color: $default-white;
                font-size: 14px;
                font-weight: 500;
                line-height: 19px;
                text-align: center;
            }
        }
        .comments-txt{
            height: 216.8px;
            width: 292px;
            border: 1px solid $light-gray;
            border-radius: 2px;
        }
        .status-bar {
            box-sizing: border-box;
            height: 77.48px;
            width: 883px;
            border-radius: 4px;
            .completed {
                width: 100%;
                border: 1px solid #C6EFB9;
                background-color: #F2FFEE;
                box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 1px 2px 0 rgba(0,0,0,0.08), 0 1px 1px -1px rgba(0,0,0,0.12);
                padding: 15px 0 0 25px;
                display: inline-flex;
            }
            .inprogress{
                width: 100%;
                border: 1px solid #DFE5EA;
                background-color: #F9FCFF;
                box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 1px 2px 0 rgba(0,0,0,0.08), 0 1px 1px -1px rgba(0,0,0,0.12);
                padding: 15px 0 0 25px;
                display: inline-block;
            }
            .success-img {
                height: 45.18px;
                width: 45.18px;
                border: 1px solid $default-white;
                border-radius: 50%;
                position: relative;
                background-color: $success-color;
                .icon {
                    position: relative;
                    top: 9px;
                    color: $default-white
                }
            }
            .success-msg {
                padding-left: 30px;
            }
            .status-txt {
                color: rgba(0,0,0,0.82);
                font-size: 14px;
                line-height: 24px;
                text-align: left;
                padding: 0;
                margin: 0;
            }
            .status-hint {
                color: rgba(0,0,0,0.6);
                font-size: 11.92px;
                letter-spacing: 0.25px;
                line-height: 16px;
                text-align: left;
            }
        }
       
    }
    .center-panel {
        padding: 50px 15px 0 10px;
        .title {
            .title-txt{
                color: $dark-color-txt;
                font-size: 18px;
                font-weight: 500;
                line-height: 26px;
            }
        }
        .desc {
            padding-top: 15px;
            .desc-txt{
                color: rgba(0,0,0,0.72);
                font-size: 14px;
                line-height: 20px;
            }
        }
        .link{
            padding-top: 25px;
            .link-txt{
                color: $btn-blue;
                font-size: 14px;
                line-height: 20px;
            }
        }
        .comments-txt {
            border-radius: 2px;
            background-color: $circle-color;
            box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
            padding: 20px;
            .cmt-text {
                color: rgba(0,41,64,0.72);
                font-size: 12px;
                line-height: 20px;
            }
        }
        .comment-user {
            padding-top: 10px;
            .member-pic {
                height: 29px;
                width: 29px;
                border-radius: 50%;
                border: 2px solid $default-white;
                overflow: hidden;
                background-color: dimgray;
            }
            .name {
                opacity: 0.72;
                color: $dark-color-txt;
                font-size: 12px;
                line-height: 16px;
                padding-left: 5px;
            }
            .created-on {
                opacity: 0.72;
                color: $text-dark-color;
                font-size: 12px;
                line-height: 24px;
                text-align: right;
                float: right;
            }
        }
        
    }
    .right-panel {
        float: right;
        border: 1px solid rgba(0,0,0,0.06);
        border-radius: 2px;
        text-align: left;
        width: 25%;
        .line {
            box-sizing: border-box;
            height: 2px;
            border: 1px solid rgba(0,0,0,0.06);
        }
        .request-list {
            padding: 20px 0 20px 20px;
            .header {
                padding-bottom: 20px;
                color: $lighter-gray;	
                font-size: 11px;
                line-height: 24px;
            }
            .list {
                overflow-y: scroll;
                height: 100px;
            } 
        }
        .memeber-list {
            padding: 20px 0 20px 20px;
            .header {
                padding-bottom: 20px;
                color: $lighter-gray;	
                font-size: 11px;
                line-height: 24px;
                padding-right: 110px;
            }
            .list {
                overflow-y: scroll;
            }
            .invite-btn {
                height: 32px;
                width: 88px;
                border: 1px solid $btn-border-blue;
                border-radius: 2px;
            }
            .add-btn {
                height: 32px;
                width: 88px;
                border: 1px solid $btn-border-blue;
                border-radius: 2px;
                .material-icons {
                    font-size: 16px;
                }
                .plus-btn {
                    color: $btn-blue;
                    font-size: 16px;
                    line-height: 18px;
                    padding-right: 15px;
                }
                .btn-txt {
                    color: $btn-blue;
                    font-size: 12px;
                    line-height: 16px;
                    bottom: 4px;
                    right: 12px;
                    position: relative;
                }
            }
            .add-btn:hover {
                background-color:$btn-blue;
                .btn-txt, .plus-btn{
                    color: $default-white;
                }
            }
        }
    }
::ng-deep .mat-line{
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    }
}