#wrap {
	position: 			relative;
	width:    			100%;
	height:				500px;
	overflow: 			hidden;
}

#wrap #column{
	position: 			absolute;
	z-index: 			1001;/*js*/
	top: 				0px;
	left: 				0px;/*js*/
	padding: 			0px 15px 0px 0px;
	width: 				20%;/*js*//*has box sizing*/
	height: 			100%;
	overflow-y: 		scroll;
	background-color:   white;

	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:    0px 0px 10px 0px rgba(0,0,0,0.75);
	box-shadow:         0px 0px 10px 0px rgba(0,0,0,0.75);
}

#wrap #list{
	position: 			absolute;
	z-index: 			1002;/*js*/
	top: 				0px;
	right: 				470px;/*js*/
	padding: 			0px 15px 0px 15px;
	width: 				50%;
	height: 			100%;
	overflow-y: 		scroll;
	background-color:   white;

	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:    0px 0px 10px 0px rgba(0,0,0,0.75);
	box-shadow:         0px 0px 10px 0px rgba(0,0,0,0.75);
}

#wrap #list .css-task{
    cursor: pointer;
}

#wrap #list .css-task:hover .css-badge{
    display: inline-block;
}

#wrap #list .css-task .css-badge{
    display: none;
}


#wrap #form{
	position: 			absolute;
	z-index: 			1000;/*js*/
	top: 				0px;
	right: 				0px;/*js*/
	padding: 			0px 0px 0px 15px;
	width: 				40%;/*js*/
	height: 			100%;
	overflow-y: 		scroll;
	background-color:   white;

	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:    0px 0px 10px 0px rgba(0,0,0,0.75);
	box-shadow:         0px 0px 10px 0px rgba(0,0,0,0.75);
}

@media screen and (max-width:768px){
	
	#wrap #column{
		width: 280px;
	}

	#wrap #list{
		right: auto;
		left: 50%;
		margin-left: -140px;
		width: 280px;
	}

	#wrap #form{
		width: 280px;
	}
}