@import url('../../css/nc-lib.css');

.kanban-container {
    position: relative;
    box-sizing: border-box;
    width: auto;
    /*added*/
    /*border: solid 1px #8c8e96;*/
    height: 100%;
    display:table;
    overflow:hidden;
    
}

.kanban-container * {
  box-sizing: border-box;
}

.kanban-container:after {
  /*clear: both;*/
  display: block;
  content: "";
}

.kanban-rtl {
    direction: rtl;
}
.kanban-hide {
    display: none;
}
.kanban-selected {
    background-color: #eeeef3 !important;
    /*border:solid 1px #ff6a00 !important;*/
}

.kanban-text-done {
    text-decoration: line-through;
    color: grey;
}

.kanban-board { /*display:inline-block;*/
    position: relative;
    /*float: left;*/
    /*background: #e2e4e6;*/
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    /*added*/
    display: block;
    float: right;
    border: solid 1px #cdebf1;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.kanban-template-item {
    font: 12px arial, verdana;
}
.kanban-template-item .kanban-template-header {
    display: inline-block;
    border-bottom: solid 2px #f68330;
    color: #f68330;
}
.kanban-template-item .kanban-template-footer {
    display: inline-block;
    border-bottom: solid 2px #f68330;
    color: #f68330;
}
.kanban-template-item span {
    color: #000
}
    .kanban-template-item input, .kanban-template-item textarea {
        font-size: 12px;
    }

main.kanban-content {
    width: 100%;
    /*margin-left:4px;*/
    height: 600px;
    overflow-x: auto;
}


.kanban-board.show-board {
    /*display:inline-block;*/
    display: block;
}
.kanban-board.hide-board {
 display:none;
}
.kanban-board.disabled-board {
  opacity: 0.3;
}

.kanban-board.is-moving.gu-mirror {
  transform: rotate(3deg);
}

.kanban-board.is-moving.gu-mirror .kanban-drag {
  overflow: hidden;
  /*padding-right: 50px;*/
}

.kanban-board header {
    /*direction: rtl;*/
    font-size: 16px;
    /*padding: 15px;*/
    /*added*/
    padding: 5px;
    /*background-color: #f7f7f7;
    color: #20a1b5;*/
    background-color: #0074a2;
    color: #fff;
    border-top: solid 1px #8c8e96;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    /*-moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;*/
}
    .kanban-board header i {
        /*color: #20a1b5;*/
        color: #15C8D8;
    }
 

.kanban-board header .kanban-title-board {
            /*font-weight: 700;*/
            margin: 0;
            padding: 0;
            display: inline;
            /*added*/
           
        }

        .kanban-board header .kanban-title-button {
            /*float: right;*/
            /*added*/
            float: left;
        }

.kanban-title-button {
    border: none;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    color: #20a1b5;
 }

    .kanban-board .kanban-drag {
        /*min-height: 200px;*/
        /*padding: 20px;*/
        /*added*/
        padding: 2px;
    }

.kanban-board:after {
  /*clear: both;*/
  display: block;
  content: "";
}

.kanban-item {
    
    /*direction: rtl;*/
    background: #fff;
    padding: 2px;
    /*padding: 15px;
  margin-bottom: 20px;*/
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    /*panel-item*/
    margin-bottom: 5px;
    padding: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /*give the button a drop shadow*/
    -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
    box-shadow: 0 0 4px rgba(0,0,0, .75); /*style the text*/
}

/*panel-item begin*/

.kanban-item-header {
    background-color: #697580;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /*give the button a drop shadow*/
}

    .kanban-item-header > h3 {
        margin-right: 10px
    }

.kanban-item-title {
    background-color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    color: #20a1b5;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /*give the button a drop shadow*/
}

/*panel-item end*/

.kanban-item:hover {
    cursor: move;
    background-color: #eeeef3 !important;
}

.kanban-item:last-child {
  margin: 0;
}

.kanban-item.is-moving.gu-mirror {
  transform: rotate(3deg);
  height: auto !important;
}

/* Dragula CSS  */
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
}

.gu-hide {
  display: none !important;
}

.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.gu-transit {
  opacity: 0.2 !important;
  transform: rotate(0deg) !important;
}

.drag_handler {
    background: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    position: relative;
    float: left;
    top: -3px;
    margin-right: 4px;
}

.drag_handler:hover {
  cursor: move;
}

.drag_handler_icon {
    position: relative;
    display: block;
    background: #000;
    width: 24px;
    height: 2px;
    top: 12px;
    transition: .5s ease-in-out;
}

.drag_handler_icon:before,
.drag_handler_icon:after {
    background: #000;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: .5s ease-in-out;
}

 .drag_handler_icon:before {
    top: 6px;
}

.drag_handler_icon:after {
    bottom: 6px;
}