/* ------------------------------------- */

	.drop-drawer {
		position: absolute;
		top: -700px;
		left: 3px;
		width: 452px;
		height: 600px;
		display: none;
		overflow: hidden;
		border-radius: 0 0 7px 7px;
		box-sizing: border-box;
		background: #FFFFFF;
		border-top: 1px solid #777;
		border-right: 2px solid #ccc;
		border-bottom: 2px solid #ccc;
		border-left: 2px solid #ccc;
	}
	
/* ------------------------------------- */

	.drop-container {
		position: relative;
		width: 239px;
		height: 239px;
		overflow: hidden;

		display: flex;
		flex-direction: column;
		justify-content: center; /* vertical */
		align-items: center;     /* horizontal */
		margin-bottom: 10px;
	}
	.drop-overlay {
		width: 239px;
		height: 239px;
/* 
		display: flex;
		justify-content: center;
		align-items: center;
 */
		background: transparent;
	}

	.drop-zone {
		z-index: 200;
		position: relative;
		
		width: 232px;
		height: 245px;
		padding: 0;

		display: flex;
		justify-content: center;
		align-items: center;

		overflow: hidden;
		box-sizing: border-box;
		border-radius: 5px;
		border: 1px solid #CCC;
	}
	.drop-zone.round {
		width: 159px;
		height: 159px;
		border-radius: 50%;
		margin-top: 40px;
	}

	.drop-msg {
		display: block;             /* let flexbox center it */
		text-align: center;
		color: gray;
		font-size: 22px;
		font-family: RobotoLight;
		font-weight: 300;
		line-height: 1.2em;
	}
	.drop-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		overflow: hidden;
		background: transparent;
		padding: 3px;
		border-radius: 5px;
	}

	.drop-zone.dp-dragover span {
		color: #FFFFFF !important;
	}
	.drop-zone.dp-dragover {
		background: green;
	}
	.drop-zone.busy {
		background: red;
	}

	.drop-trash {
		z-index: 999999;
		position: absolute;
		top: 10px;
		right: 10px;
		width: 27px;
		height: 27px;
		display: none;
		cursor: pointer;
		border-radius: 50%;
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAYAAACEYr13AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGQjdGMTE3NDA3MjA2ODExOTQ1N0UxRkMwNEVEQTkzRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCMkE5NzM4NzA5MUExMUU0Qjg0REVDM0ZBRDY0M0RFQSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCMkE5NzM4NjA5MUExMUU0Qjg0REVDM0ZBRDY0M0RFQSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjZGMzFCMEQyMzIyMDY4MTE5MTA5QTdCMTFDNDc5MTA3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZCN0YxMTc0MDcyMDY4MTE5NDU3RTFGQzA0RURBOTNGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+KpoH0AAAAE5JREFUeNpi/P//PwMlgAWPHDaTGUkxgJFUF5DjF0YWNBv/E2kzXB0TA4WAiUAA4qIJGkCxC0YNGAwGMBKgqecCFiKzMdEGMA69WAAIMAAnFgwznOnuZgAAAABJRU5ErkJggg==');
		background-color: blue;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.drop-trash:hover {
		background-color: #EB8900; url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA31pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExOTJCMEM2MkU2NTJERjQ4RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRTZFOTRBNDc1MEQxMUVGQUM1QkY4QTNBRjM0MERDNiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRTZFOTRBMzc1MEQxMUVGQUM1QkY4QTNBRjM0MERDNiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphOTlmZGY5Ny1jMjk5LTQyMWEtOTgwYS1jODcwM2VjYjA3ODUiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo2YmVlOGRhYy0xNjUwLTJiNGEtYTU4MS0xNGEwYWViMjk2NmMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Vfvq2AAAAZUlEQVR42mL8//8/A60BEwMdwKglJAEWYhUyMjJipBBgomGkqiXohmKzFKcDcSVhUgwh5DNGfPkEZBExQUJI3eBJXbCgw0WPZsZRSwa5JbCMhoseGqUwOWUYSWXXaOoavpYABBgApaoxK8ZDCmcAAAAASUVORK5CYII=');
	}
	.drop-image-trash {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 10px;
		height: 12px;
		display: none;
		background: white;
	}

	.drop-image-slider {
		margin-top: 9px;
		font-family: Roboto;
		font-size: 14px;
		color: #777;
	}
	.drop-image-sizer {
		width: 98%;
	}

	.drop-image-buttons {
		position: relative;
		width: 100%;
		height: auto;
		margin-top: 10px;
		display: flex;
		box-sizing: border-box;
	}
	.drop-image-buttons > .cc-button {
		flex: 1;
	}

	/* ---------------------- ^ ---------------------- */