/** 
 * Add block
 */
div#ccm-panel-add-block {
	.ccm-panel-dark();

    div.ccm-panel-header-search {
      input {
        background-color: #333539;
        color: #b8bbc4;
        .placeholder(#555555);
      }
    }

	div.ccm-panel-header-accordion {

		nav {

			ul.ccm-panel-header-accordion-dropdown:after {
				border-color: #60686f transparent;
			}

			li > a:hover {
				background-color: #111215;
			}

			li > a {
				color: #2aa9dd;
			}

			span {
				color: #60686f;
				background-color: #202226;
				&:hover {
					background-color: #111215;
				}
			}
		}
	}

	div.ccm-panel-header-accordion-dropdown-visible {
		nav {
			ul {
				height: 220px !important;
			}
		}
	}

	div.ccm-panel-add-block-set {

		clear: both;

		header {
			font-size: 13px;
			line-height: 13px;
			padding: 0px;
			border-top: 1px solid #474645;
			padding-top: 5px;
			color: #2aa9dd;	
		}

		ul {
          margin-left: 0px;
          padding-left: 0px;
          li {
              list-style-type: none;
              float: left;
              display: block;
              margin: 0px 20px 20px 0px;
              position: relative;
          }

          .ccm-icon-item-grid-available {
              display: block;
          }
        }
	}

	a.ccm-panel-add-block-draggable-block-type:hover {
		cursor: move;
		.box-shadow(0px 0px 2px 0px #fff);
	}
	

	div#ccm-panel-add-block-clipboard-list {

		div.ccm-panel-add-block-clipboard-item {
			border-top: 2px groove #424854;
			.transition(all 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000));
			.opacity(1);
			border-top: 2px groove #424854;		
			position: relative;

			> a {
				position: absolute;
				top: 10px;
				right: 15px;
				color: #424854;
			}

			> a:hover {
				color: #d1322d;
				text-decoration: none;
			}
		}

		div.ccm-panel-add-block-clipboard-item:last-child {
			border-bottom: 2px groove #424854;
		}

		div.ccm-panel-add-block-clipboard-item-delete {
			.opacity(0);
			.translate3d(-100%, 0, 0);
			max-height: 0px;
			padding: 0px;
			border: 0px;
		}

	}

}

div.ccm-panel-add-block-clipboard-item {

	padding: 10px 15px 10px 40px;
	max-height: 200px;

	div.ccm-panel-add-block-clipboard-item-inner {
		max-height: 140px;
		margin-bottom: 10px;
		padding-right: 25px;
		color: #b4bfcb;	
		overflow: hidden;
		font-size: @font-size-base;
	}

	font-size: @font-size-small;
	color: #4b5662;
}

div#ccm-panel-add-block-dragging {		
	div.ccm-panel-add-block-clipboard-item {
		width: 265px;
		background-color: #161c22;
		.border-radius(4px);

		> a {
			display: none;
		}
	}
}

a.ccm-panel-add-block-draggable-block-type {
	display: block;
	height: 90px;
	width: 90px; 
	line-height: 0px;
	padding: 2px;
	box-sizing: padding-box;
	text-align: center;
	background-color: #161c22;
	.border-radius(4px);

	span {
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100%;
		text-overflow: ellipsis;
		text-align: center;
		display: block;
		color: #8f969a;
		background-color: #000;
		font-size: 12px;
		line-height: 12px;
  		padding-top: 10px;
		padding-bottom: 10px;
		overflow: hidden;
		white-space: nowrap;
		.border-bottom-radius(4px);
	}

	img {
		margin-top: 15px;
		height: 24px;
		width: auto;
	}
}

#ccm-panel-add-block-dragging {
	> a, > div {
		cursor: move;
		.rotate(5deg);
		z-index: @index-level-draggable-content-item;
	}
}