.hide-side .side-col {display: none;}
.main-row .side-col, .main-row .main-col {transition: all 0.3s ease 0s;}
.side-col{width: 260px;}

.todo-item.drag-shadow {cursor: move;}

.page-num {padding: 5px 10px; margin: 5px; border: 1px solid #ddd; float: right; cursor: pointer; background: #f0f0f0;}

.trash, .side-handle {display: inline-block; vertical-align: middle;}
.trash{width: 200px;}
.hide-side .trash {right: 50px;}
.trash .tip {position: absolute; right: 90px; top: 6px; display: none;}
.event-dragging .tip {display: block;}
.event-dragging .trash {background: #f0f0f0;}

.assign {position: relative; padding: 5px 5px; left: -5px; top: 0; background-color: rgba(0, 0, 0, 0.25)}

.todo-list {list-style: none; padding-left: 0; margin: 20px 0 0 0;}
.todo-list > li {margin: 10px 0; display: block;}
#todoLists .todo-item {line-height: 24px; border: 1px solid #EEEEEE; padding-left: 5px; position: relative; display: block; font-size: 12px; color: #343434; overflow:hidden;white-space: nowrap; cursor: pointer;}
#todoLists .todo-item[data-type="todo"] {padding-left: 25px;}
#todoLists .todo-item:hover {text-decoration: unset; background-color: #f1f1f1; border-color: #ddd;}
#todoLists .todo-item > .todo-check {position: absolute; left: 0; top: 0; width: 24px; height: 24px; line-height: 24px; text-align: center; color: #EBEBEB; font-size: 14px;}
#todoLists .todo-item > .todo-check:hover {color: #ccc;}
#todoLists .todo-list .active .todo-item > .todo-check {color: #4DC7B8;}
#todoLists .todo-list .active .todo-item > .todo-check:hover {color: #00a768;}
#todoLists .todo-item.drag-shadow {background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);}
#todoLists .todo-item.drag-shadow .todo-edit {opacity: 0!important;}
#todoLists .todo-item .todo-edit {opacity: 0; position: absolute; width: 24px; height: 22px; line-height: 22px; text-align: center; right: 0; top: 1px; background: #fff; transition: opacity .2s;}
#todoLists .todo-item:hover .todo-edit {opacity: 1;}
#todoLists .pager {margin: 0; width: 100%; text-align: center;}
#todoLists .pager > li {display: inline-block;}
#todoLists .pager > li:first-child {float: left;}
#todoLists .pager > li:last-child {float: right;}
#todoLists .pager > li > a, #todoLists .pager > li > span {padding: 4px 8px;}
#todoLists .pager-label {padding: 3px 4px; opacity: .7;}

#main .side-col{width: 250px;}
#main .side-col .nav-secondary > li > a {padding: 16px 0;}
.main-row .main-col + .side-col {padding-left: 10px;}

#sidebar {position: fixed; top: 96px; width: 250px;}