/* Board */
.prj_board{
    height : 100%;
    .wea-search-tab>span{
        margin-right: 10px;
    }
    .wea-select .ant-select-selection {
        height: 28px;
    }
    .prj_board_container{
        width: 100%;
        padding-top: 20px;
        overflow: scroll;
        height: e("calc(100% - 48px)");
        background-color: #f0f0f0;
        .ant-progress-inner {
            display: inline-block;
            width: 100%;
            background-color: #e2e2e2;
            border-radius: 100px;
            vertical-align: middle;
            height: 6px;
        }
        .addNewStage {
            width: 300px;
            height: 52px;
            line-height: 52px;
            border-radius: 8px;
            background: rgba(77,77,77,.5);
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            margin: 0 10px;
            box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
        }
        
        .addNewStage:not(.Hidden) {
            display: inline-block
        }

        .addNewStage i {
            width: 32px;
            height: 32px;
            line-height: 32px;
            display: inline-block;
            text-align: center;
            vertical-align: top;
            margin: 10px 10px 0;
            background: transparent;
            border-radius: 8px;
            font-weight: bold;
        }

        .addNewStage:hover {
            background: rgba(77,77,77,.75)
        }

        .addNewStage:hover i {
            color: #9e9e9e;
            background: #fff
        }
        .kanban-group {
            height: e("calc(100% - 20px)");
            width: 300px;
            display: inline-block;
            font-size: 14px;
            line-height: 1.5;
            color: rgba(0, 0, 0, .65);
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0px 10px;
            padding: 0;
            list-style: none;
            background: white;
            border-radius: 8px;
            position: relative;
            vertical-align: top;
            box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
            &.moving {
                box-shadow: 0 6px 100px 0 rgba(0, 0, 0, .35)
            }
            .kanban-group-head {
                background: white;
                border-bottom: 1px solid #e8e8e8;
                padding: 0 24px;
                border-radius: 8px;
                zoom: 1;
                margin-bottom: -1px;
                min-height: 48px;
                .kanban-group-head-wrapper {
                    cursor: pointer;
                    .kanban-group-head-title {
                        font-size: 15px;
                        padding: 16px 0;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        color: rgba(0, 0, 0, .85);
                        font-weight: 500;
                        display: inline-block;
                    }
                    .kanban-group-head-extra {
                        float: right;
                        padding: 17.5px 0;
                        text-align: right;
                        margin-left: auto;
                    }
                    input{
                        width: 250px;
                        height: 44px;
                        margin: -12px 10px -2px 0px;
                        padding: 0 13px;
                        border-width: 1px;
                        border-style: solid;
                        border-radius: 3px;
                        font-size: 15px;
                        color: #333;
                        line-height: 1.5;
                    }
                }
               
            }
        }
    }
    .board {
        position: relative;
        margin-left: 1%;
        color: rgba(0,0,0,.65);
    }
    .board-column {
        position: absolute;
        left: 0;
        right: 0;
        width: 300px;
        margin: 0 10px;
        background: #f0f0f0;
        border-radius: 8px;
        z-index: 1;
        will-change: transform;
        -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.2);
        box-shadow: 2px 2px 3px rgba(0,0,0,.2);
        .board-column-content-scroll::-webkit-scrollbar {
            display: none;
        }
        .column_footer{
            // background-color: #eef0f4;
            border-radius: 0 0 7px 7px;
            // height: 44px;
            border: 15px solid transparent;
            border-top: 0px;
            border-bottom: 9px;
            background: white;
            padding: 10px 0px;
            .btnBottomNew {
           
                padding: 5px;
                font-size: 10px;
                cursor: pointer;
                :hover{
                    font-weight: 200;
                    color: black;
                }
            }
        }
        .column_footer_card{
            // background-color: #eef0f4;
            border-radius: 0 0 7px 7px;
            // height: 44px;
            border: 15px solid transparent;
            border-top: 0px;
            border-bottom: 9px;
            background: white;
         
            .btnBottomNew {
           
                padding: 5px;
                font-size: 10px;
                cursor: pointer;
                :hover{
                    font-weight: 200;
                    color: black;
                }
            }
            
       
            .btnBottomSubmit{
                float: left;
                background-color: #22d7bb;
                color: #fff;
                line-height: 23px;
                // display: inline-block;
                height: 23px;
                margin: 6px 5px 6px 0px;
                padding: 0 18px;
                cursor: pointer;
                border-radius: 18px;
                // box-shadow: 0 1px 2px rgba(0,0,0,.12);
                font-size: 12px;
            }
            .btnBottomSubmit:hover {
                box-shadow: 0px 0px 8px 0px rgb(34, 215, 187, 0.5);
                transition: box-shadow 0.3s ease-in-out;
            }
            .btnBottomCancel{
                float: left;
                line-height: 23px;
                // display: inline-block;
                height: 23px;
                margin: 6px 5px 6px 0px;
                padding: 0 18px;
                cursor: pointer;
                // box-shadow: 0 1px 2px rgba(0,0,0,.12);
                font-size: 12px;
            }
            .btnBottomCancel:hover {
                color: black;
            }
            .footer-card {
             
                padding-top: 10px;
                textarea{
                    border-radius: 3px;
                }
                .card-content{
                    // padding : 20px 0 0 0 ;
                    // height: 100px;
                    width: 100%;
                    border-radius: 3px;
                    border: 1px solid #d9d9d9; 
                    font-size: 11px;
                    .clearFix{
                        border-width: 0 0 1px 0;
                        border-style: solid;
                        border-color: #d9d9d9;
                    }                    
                    .kanban-group-manager{
                  
                        .wea-associative-search {
                            min-height: 30px;
                            border-width: 1px;
                            border-style: solid;
                            border-color: rgb(217, 217, 217);
                            border-image: initial;
                            border-radius: 3px;
                        }
                    }
                    .content-landmark {
                        margin-left: 9px;
                        span.ant-input{
                            position: static;                                 
                            cursor: pointer;
                        }
                        .picker-icon + span {
                            margin-left: 20px;
                        }
                    }
                }
            }
        }
    }
    .board-column.muuri-item-releasing {
        z-index: 2;
    }
    .board-column.muuri-item-dragging {
        z-index: 3;
        cursor: move;
    }
    .board-item.muuri-item-releasing {
        z-index: 9998;
      }
    .board-item.muuri-item-dragging {
        z-index: 9999;
        cursor: move;
      }
    .board-column-header {
        position: relative;
        // height: 50px;
        // line-height: 50px;
        overflow: hidden;
        padding: 0 15px;
        text-align: center;
        background:white;
        border-radius: 8px 8px 0 0;
        // border-bottom: 1px solid #e8e8e8;
        .board-column-header-wrapper{
            cursor: pointer;
            .kanban-group-head-title {
                font-size: 15px;
                padding: 14px 0px 5px 0px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                color: rgba(0, 0, 0, .85);
                font-weight: 500;
                float: left;
            }
            .kanban-group-head-extra {
                float: right;
                padding: 14px 0px 5px 0px;
                text-align: right;
                margin-left: auto;
            }
            input{
                width: 250px;
                height: 40px;
                margin: -12px 10px -2px 0px;
                padding: 0 13px;
                border-width: 1px;
                border-style: solid;
                border-radius: 3px;
                font-size: 15px;
                color: #333;
                line-height: 1.5;
            }
        }
    }
    @media (max-width: 600px) {
        .board-column-header {
          text-indent: -1000px;
        }
    }

    .board-column-content {
        position: relative;
        border: 15px solid transparent;
        border-top: 5px;
        border-bottom: 0px;
        min-height: 105px;
        background: white;
    }
    .board-item:hover{
            box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);
            transition: box-shadow 0.3s ease-in-out;
        }
    .board-item {
        position: absolute;
        width: 100%;
        margin: 5px 0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
        transition: box-shadow 0.3s ease-in-out;
        .board-item-finish {
            left: 0;
            position: absolute;
            width: 4px;
            background-color: gray;
            height: 100%;
            display: inline-block;
            margin: auto;
            z-index: 1;
            .status{
                width: 100%;
                bottom: 0px;
                z-index: 10;
                position:absolute;
                left: 0;
                bottom: 0;
            }
        }
        .muuri-item-releasing {
            z-index: 9998;
          }
        .muuri-item-dragging {
            z-index: 9999;      
            cursor: move;
        }
        .muuri-item-hidden {
            z-index: 0;
        }
        .board-item-content {
            position: relative;
            padding: 10px 20px;
            background: #fff;
            border-radius: 8px;
            font-size: 17px;
            cursor: pointer;
            -webkit-box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
            box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
            height: 115px;
            .header{
                color: rgba(0, 0, 0, 0.85);
                margin-bottom: 8px;
                font-size: 13px;
                margin-top: 6px;
                line-height: 24px;
                .title{
                    width: 67%;
                    font-size: 16px;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    /* autoprefixer: ignore next */
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    cursor: pointer;
                    min-height: 24px;
                    max-height: 48px;
                    :hover{
                        font-weight: bold;
                    }
                }
                .manager-list{
                    .item-icon{
                        width: 24px;
                        height: 24px;
                        border-radius: 100%;
                        /* background-color: #e9e9e9; */
                        float: right;
                        // vertical-align: top;
                        position: relative;
                        top: -24px;
                        margin-left: 8px;
                        font-size: 23px;
                        color: #e9e9e9;
                        cursor: pointer;
                        display: block;
                        :hover{
                            color: rgb(161, 161, 161);
                        }
                    }
                    .manager{
                        width: 24px;
                        height: 24px;
                        border-radius: 100%;
                        background-color: #e9e9e9;
                        float: right;
                        vertical-align: top;
                        position: relative;
                        top: -24px;
                        margin-left: 8px;
                        margin-bottom: 5px;
                        .manager-img{
                            width: 24px;
                            height: 24px;
                            border-radius: 100%;
                        }
                    }
                    .landmark{
                        width: 24px;
                        height: 24px;
                        border-radius: 100%;
                        cursor: pointer;
                        float: right;
                        vertical-align: top;
                        margin-left: 8px;
                        font-size: 24px;
                        color: #e9e9e9;
                        position: relative;
                        top: -24px;
                        :hover{
                            color: rgb(161, 161, 161);
                        }
                    }     
                    .detail{
                        width: 24px;
                        height: 24px;
                        border-radius: 100%;
                        cursor: pointer;
                        float: right;
                        vertical-align: top;
                        margin-left: 8px;
                        font-size: 21px;
                        color: #e9e9e9;
                        position: relative;
                        top: -23px;
                        :hover{
                            color: rgb(161, 161, 161);
                        }
                    }  
                }
            }
            .content{
                height: 20px;
                font-size: 12px;
                white-space: nowrap;
                .description1{
                    margin-right: 8px;
                    color: rgba(0, 0, 0, .45);
                }
                .description{
                    color: rgba(0, 0, 0, .45);
                    font-size: 12px;
                    line-height: 22px;
                    // white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: contents;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    padding-right: 5%;                    
                }
            }
        }
        
        .wea-error {
            width: 100%;
            position: relative;
        }
        
    }
   
    @media (max-width: 600px) {
        .board-item-content {
            text-align: center;

        }
        .board-item-content span {
            display: none;
        }
    }
}