.workboard_list
{

}

.workboards
{

}

.workboard
{
   	background-color:#fff;
   	height:50px;
	padding:30px 20px 20px 20px;
	margin:0 0 20px 0;
	border-radius:5px;
	box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 4px 0 rgb(0 0 0 / 12%);
	overflow:hidden;
	cursor:pointer;
	background:url('../img/folder_icon_dark.png') left 15px center no-repeat;
	background-size:14px auto;
}

.workboard:hover
{
	box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 1px 4px 0 rgb(0 0 0 / 22%);
}

.workboard .title
{
	position:absolute;
	left:50px;
	top:0;
	width:calc(100% - 170px);
	height:50px;
}

.workboard .title .database_input, .workboard .title .content_input
{
	position:absolute;
	left:0 !important;
	top:0 !important;
	width:100% !important;
	height:50px !important;
	line-height:30px !important;
	font-weight:600 !important;
	text-align:left !important;
	font-size:15px !important;
	overflow:hidden !important;
	text-overflow:ellipsis !important;
  	white-space:nowrap !important;
  	padding:10px 0 10px 0 !important;
  	background:transparent !important;
  	border:none !important; 
}

.workboard .button
{
	position:absolute;
	right:10px;
	top:10px;
	width:30px;
	height:30px;
	background-color:rgba(52,52,52,0.05);
	cursor:pointer;
	background-position:center center !important;
	background-repeat:no-repeat !important;
	background-size:30% auto !important;
	border-radius:50% !important;
}

.workboard .button.second
{
	right:50px;
}

.workboard .button.third
{
	right:90px;
}

.workboard .button:hover
{
	background-color:rgba(52,52,52,0.1);
}

.workboard .button.open
{
	background-image:url('../img/arrow_right_dark.png');
	transform:rotate(90deg);
}

.workboard .button.open.active
{
	background-image:url('../img/arrow_right_dark.png');
	transform:rotate(-90deg);
}

.workboard .button.order
{
	background-image:url('../img/order_icon_dark.png');
}

.workboard .button.delete
{
	background-image:url('../img/delete_icon_dark.png');
}





.workboard_add_button
{
	height:40px;
	line-height:40px;
	font-size:14px;
	font-weight:700;
	text-align:center;
	box-shadow:inset 0 0 0 1px rgba(52,52,52,0.1);
	border-radius:5px;
	cursor:pointer;
	transition:all 0.1s ease-in-out;
	opacity:0.6;
}

.workboard_add_button:hover
{
	opacity:1;
}




















.worknode_list
{
	padding-top:20px;
}

.worknodes
{

}

.worknode
{
   	background-color:#fff;
   	max-height:40px;
	padding:20px;
	margin:0 0 30px 0;
	border-radius:5px;
	background:rgba(52,52,52,0.05);
}

.worknode .author 
{
    position:absolute;
    left:60px;
    top:calc(100% - 8px);
    width: auto;
    height: 16px;
    line-height: 16px;
    padding: 0 7px 0 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    background:#cfc8b8;
}

.worknode .timestamp
{
    position:absolute;
    left:60px;
    top:-8px;
    width: auto;
    height: 16px;
    line-height: 16px;
    padding: 0 7px 0 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 500;
    background:rgba(52,52,52,0.1);
}

.worknode .parent
{
    position:absolute;
    left:150px;
    top:-8px;
    width: auto;
    height: 16px;
    line-height: 16px;
    padding: 0 7px 0 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background:#cfc8b8;
    cursor:pointer;
}

.worknode:hover
{
	background:rgba(52,52,52,0.1);
}

.worknode.open
{
   	max-height:1000000px;
   	background:#fff;
	box-shadow:0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%), 0 0 0 10000px rgba(0,0,0,0.4);
	z-index:99999999!important;
}

.worknode .icon
{
	position:absolute;
	left:20px;
	top:0;
	width:40px;
	line-height:40px;
	font-size:18px;
	text-align:left;
}

.worknode .title
{
	width:calc(100% - 120px);
	height:40px;
	line-height:20px;
	font-weight:600;
	text-align:left;
	font-size:15px;
	overflow:hidden;
	text-overflow:ellipsis;
  	white-space:nowrap;
  	padding:10px 0 10px 0 !important;
  	margin-top:-20px;
  	margin-left:40px;
}

.worknode .title .database_input, .worknode .title .content_input
{
	position:absolute;
	left:0 !important;
	top:0 !important;
	width:100% !important;
	height:40px !important;
	line-height:20px !important;
	font-weight:600 !important;
	text-align:left !important;
	font-size:15px !important;
	overflow:hidden !important;
	text-overflow:ellipsis !important;
  	white-space:nowrap !important;
  	padding:10px 0 10px 0 !important;
  	background:transparent !important;
  	border:none !important;
}



.worknode .worknode_content
{
	height:auto;
  	margin:0 0 10px 0;
  	display:none;
}

.worknode.open .worknode_content
{
  	display:block;
}

.worknode .worknode_content .database_input
{
	width:100%;
	height:auto;
  	background:#fff !important;
}

.worknode .worknode_content .content_textarea
{
	width:100%;
	height:60px;
	max-height:70vh !important;
	line-height:20px !important;
	font-weight:400 !important;
	text-align:left !important;
	font-size:15px !important;
  	padding:10px !important;
  	background:rgba(52,52,52,0.05) !important;
  	border-radius:5px;
  	color:rgba(52,52,52,0.6);
}



.worknode .worknode_attachment
{
	margin-left:70%;
	width:30% !important;
	height:40px !important;
  	background-color:#fff !important;
	background:url('../img/attachment_icon_dark.png') left 15px center no-repeat;
	background-size:14px auto;
	padding-left:50px;
	box-shadow:0 0 0 1px rgba(52,52,52,0.1);
	border-radius:5px;
	display:none;
}

.worknode.open .worknode_attachment
{
  	display:block;
}

.worknode .worknode_attachment .database_input
{
	width:100% !important;
	height:40px !important;
  	background:#fff !important;
}

.worknode .worknode_attachment .content_file_input
{
	position:absolute;
	left:0 !important;
	top:0 !important;
	width:100% !important;
	height:40px !important;
	line-height:20px !important;
	font-weight:400 !important;
	text-align:left !important;
	font-size:15px !important;
	overflow:hidden !important;
	text-overflow:ellipsis !important;
  	white-space:nowrap !important;
  	padding:10px !important;
  	background:#fff !important;
  	border-radius:5px;
  	color:rgba(52,52,52,0.6);
  	transform:none !important;
}



.worknode .button
{
	position:absolute;
	right:10px;
	top:5px;
	width:30px;
	height:30px;
	background-color:rgba(52,52,52,0.05);
	cursor:pointer;
	background-position:center center !important;
	background-repeat:no-repeat !important;
	background-size:30% auto !important;
	border-radius:50% !important;
}

.worknode .button.second
{
	right:50px;
}

.worknode .button.third
{
	right:90px;
}

.worknode .button:hover
{
	background-color:rgba(52,52,52,0.1);
}

.worknode .button.open
{
	background-image:url('../img/arrow_right_dark.png');
	transform:rotate(90deg);
}

.worknode .button.open.active
{
	background-image:url('../img/arrow_right_dark.png');
	transform:rotate(-90deg);
}

.worknode .button.order
{
	background-image:url('../img/order_icon_dark.png');
}

.worknode .button.delete
{
	background-image:url('../img/delete_icon_dark.png');
}





.worknode_add_button
{
	height:40px;
	line-height:40px;
	font-size:14px;
	font-weight:700;
	text-align:left;
	box-shadow:inset 0 0 0 1px rgba(52,52,52,0.1);
	border-radius:5px;
	cursor:pointer;
	transition:all 0.1s ease-in-out;
	opacity:1;
	padding:0 20px 0 20px;
	overflow:hidden !important;
	text-overflow:ellipsis !important;
  	white-space:nowrap !important;
}

.worknode_add_button:hover
{
	opacity:0.6;
}




.worknode .worknode_status
{
  	display:none;
}

.worknode.open .worknode_status
{
  	display:block;
}



.worknode .worknode_children
{
  	display:none;
}

.worknode.open .worknode_children
{
  	display:block;
}