.card_image_selected{
    box-shadow: 0px 0px 0px 2px green;
    border-radius: 2px;
}

.quickdraw{
	float:left;
	border: 5px #CCC solid;
	background-color: #FFF;
}

.quickdraw_colors{
	float:left;
	width: 50px;
	height: 231px;
	cursor: pointer;

}
.quickdraw_color_container{
	float:left;
	width:50px;
	height: 223px;
}

.quickdraw_color{
	float:left; margin-top:5px;
	background: url('images/colors.png?v=4') no-repeat;
	width:25px; margin-left: 0px; margin-right:0px; margin-top:0px;
	height:221px;
	border: 1px solid black;
}
.quickdraw_arrow_left{
	float:left;
	position:relative;
	background: url('images/left-arrow.png?v=4') no-repeat;
	width: 11px;
	height: 11px;
}
.quickdraw_arrow_right{
	float:left;
	position:relative;
	background: url('images/right-arrow.png?v=4') no-repeat;
	width: 11px;
	height: 11px;
}

.quickdraw_tools{
	float:left;
	width: 180px;
	height: 488px;
	background-color: rgb(236, 236, 236);
}

.quickdraw_placeholder_text{
	position: absolute;
	display: none;
	width: 100px;
	height: auto;
	background-color: rgba(255, 255, 255, 0.4);
	border: 1px black dashed;	
	outline: none;
}

.quickdraw_tools_left{
	float:left;
	width:50px;
}

#quickdraw_tools_help{
	float: left;
	height: 70px;
	width: 642px;
	margin-left: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
	background-color: rgba(130, 231, 231, 0.16);
}

.quickdraw_tools_bottom{
	float:left;
	width:150px;
}

.quickdraw_tool_color{
	background: url('images/paint-bucket.png?v=4') no-repeat;	
	width:48px; height:48px;
	border:1px solid white;

}

.quickdraw_color_selected{
	border:1px solid blue;

}

.quickdraw_tool_selected{
	background-color: #d86bcb!important;
}

.qd_menu_name{
	float: left;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-family: Georgia;
    background-color: #e4e4e4;
    font-size: 18px;
	box-shadow: 0px 1px 0px 0px rgb(184, 184, 184);
}

.tool_separator{
	width: 100%;
	height: 3px;
	clear:both;
}

.quickdraw{
	cursor: default;
}

.quickdraw_section{
	background-color: rgba(255, 255, 255, 0.67);
	border: 2px #000 solid;
	display: none;
	width: 500px;
    border-radius:10px;
    padding:20px 20px 20px 20px;
    z-index:1111;
	position: fixed; 
	top: 30%;
}

.sticker{
	width: 24px;
	height: 24px;
	padding: 1px;
}

.quickdraw_btn_save{
	float: right;
	width:105px;
	height:35px;
	display:block;
	/*background-color:green;*/
	margin:20px 0px 10px 10px;	
	cursor: pointer;
}

#quickdraw_custom_text_input{
	background-color: rgba(255, 255, 255, 0.8);
	color: #000;
	border: 1px solid #000;
	padding: 5px;
	width: 100%;
	height: 100px;
}

#quickdraw_custom_sticker{
	z-index:20000;
}

#quickdraw_saving_card_screen{
	z-index:20000;
}

#stickers{
	width: 150px;
	height: 500px;
	top: 40px;
	left: 818px;
	background-color: #4D4D4D;
	display: none;
	position: fixed; 
}

#quickdraw_tool_sticker{
	width: 200px;
}

.greeting_card_source_option{
	float:left;
	margin-right: 10px;
	padding: 25px;
}

.greeting_card_source_option:hover{
	background-color: rgb(255, 247, 149);
}

.greeting_card_source_option_selected{
	background-color: rgb(158, 189, 227);
}

.quickdraw_menu{
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
    list-style-type: none;	
    cursor: pointer;
}

.quickdraw_menu_separator{
	float:left;
	clear:both;
	height: 20px;
}
.quickdraw_menu_separator:hover{
	background-color: transparent!important;
	cursor: default;
}

.quickdraw_menu li, .quickdraw_tools .item{
	float:left; clear: both;
    cursor: pointer;	
	font-family: Tahoma;
	width: 100%;
	line-height: 32px;
	padding: 10px;
    box-sizing: border-box;
	box-shadow: 0px 1px 0px 0px rgb(184, 184, 184);
}

.quickdraw_tools .item{
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    box-shadow: 0px -1px 0px 0px rgb(184, 184, 184);
}

.quickdraw_menu li:hover, .quickdraw_tools .item:hover{
	background-color: rgba(88, 192, 255, 0.38);
}

.quickdraw_tool_icon{
	float: left;
	width: 32px;
	height: 32px;
	background-size: 32px!important;
	border: none;
}

.quickdraw_menu_item_name{
	margin-left: 10px;
	font-size: 16px;
	line-height: 32px;
	float: left;
}

.quickdraw_tool_select{
	background: url('icons/pointer.png?v=4') no-repeat;
}

.quickdraw_tool_add_text{
	background: url('icons/add-text.png?v=4') no-repeat;
}

.quickdraw_tool_add_signature{
	background: url('icons/add-signature.png?v=4') no-repeat;
}

.quickdraw_tool_add_sticker{
	background: url('icons/add-sticker.png?v=4') no-repeat;
}

.quickdraw_tool_add_emojii{
	background: url('icons/add-emoji.png?v=4') no-repeat;
}

.quickdraw_tool_draw{
	background: url('icons/draw.png?v=4') no-repeat;
}

.quickdraw_tool_filters{
	background: url('icons/filters.png?v=4') no-repeat;
}

.quickdraw_tool_fun_fx{
	background: url('icons/fun-fx.png?v=4') no-repeat;
}

.quickdraw_tool_finished{
	background: url('icons/finished2.png?v=4') no-repeat;
}

.quickdraw_tool_draw_change_color{
	background: url('icons/change-color.png?v=4') no-repeat;
}

.quickdraw_tool_draw_eraser{
	background: url('icons/draw/eraser.png?v=4') no-repeat;
}

.quickdraw_tool_draw_brush{
	background: url('icons/draw/brush.png?v=4') no-repeat;
}

.quickdraw_tool_draw_pencil{
	background: url('icons/draw/pencil.png?v=4') no-repeat;
}

.quickdraw_tool_draw_pen{
	background: url('icons/draw/pen.png?v=4') no-repeat;
}

.quickdraw_tool_draw_marker{
	background: url('icons/draw/marker.png?v=4') no-repeat;
}

.quickdraw_tool_draw_crayon{
}

.quickdraw_tool_draw_sticker{
}

.quickdraw_tool_move{
	background: url('icons/move.png?v=4') no-repeat;
}

.quickdraw_tool_text_change_color{
	background: url('icons/change-color.png?v=4') no-repeat;
}

.quickdraw_tool_delete_object{
	background: url('icons/trash.png?v=4') no-repeat;
}

.quickdraw_tool_rotate_left{
	background: url('icons/rotate_left.png?v=4') no-repeat;
}

.quickdraw_tool_rotate_right{
	background: url('icons/rotate_right.png?v=4') no-repeat;
}

.quickdraw_tool_increase_font, .quickdraw_tool_increase_size, .quickdraw_tool_increase_width{
	background: url('icons/increase.png?v=4') no-repeat;
}

.quickdraw_tool_decrease_font, .quickdraw_tool_decrease_size, .quickdraw_tool_decrease_width{
	background: url('icons/decrease.png?v=4') no-repeat;
}

.quickdraw_tool_background{
	background: url('icons/background.png?v=4') no-repeat;
}

.quickdraw_tool_undo{
	background: url('icons/draw/eraser.png?v=4') no-repeat;
}

.quickdraw_tool_save{
	background: url('icons/save.png?v=4') no-repeat;
}

.quickdraw_tool_help{
	background: url('icons/help.png?v=5') no-repeat;
}

.quickdraw_tool_cancel{
	background: url('icons/cancel.png?v=4') no-repeat;
}

.quickdraw_sticker{
	width: 48px;
	height: 48px;
	padding: 5px;
}

.quickdraw_sticker_selected{
	background-color: rgb(158, 189, 227);
}

.quickdraw_tool_change_color{
	width:36px; 
	height:36px; 
	box-sizing: border-box; 
}

.quickdraw_color_selected{
	border: 1px solid white;
    box-shadow: inset 0px 0px 5px 0px black;
}

.quickdraw_thin{
	line-height: 20px!important;
	padding-top:4px!important;
	padding-bottom:5px!important;
}

.quickdraw_thin .quickdraw_tool_icon{
	float: left;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	background-size: 20px!important;
	border: none;
}

@-webkit-keyframes wiggle {
	0% {
		-webkit-transform:rotate(4deg);
	}
	50% {
		-webkit-transform:rotate(-4deg);
	}
	100% {
		-webkit-transform:rotate(4deg);
	}
}

@-webkit-keyframes bounce {
	0% {
		-webkit-transform:translateY(0px);
	}
	50% {
		-webkit-transform:translateY(5px);
	}
	100% {
		-webkit-transform:translateY(0px);
	}
}
	
.card_image:hover{
	-webkit-animation: wiggle 0.8s infinite;
}

.quickdraw_tool:hover .quickdraw_tool_icon{
	-webkit-animation: bounce 0.8s infinite;	
}

.quickdraw_tool_selected .quickdraw_tool_icon{
	/*-webkit-animation: none!important;*/
}

.quickdraw_tool_change_color{
	-webkit-animation: none!important;
}
	
.quickdraw_disabled{
	background-color: #cfcfcf!important;
    opacity: 0.3!important;
}

.quickdraw_disabled:hover .quickdraw_tool_icon{
	-webkit-animation: none!important;
}

.quickdraw_tools .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 4px;   
    box-shadow: 0px 0px 1px 0px black;
    background: #dedede;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.quickdraw_tools .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #3a84bd;
    cursor: pointer;
}

.quickdraw_tools .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #3a84bd;
    cursor: pointer;
}