@charset "utf-8";
/* CSS Document */

.modal-design-image {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
	width: 100%;
	height: auto;
	-webkit-box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.3);
 	-moz-box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.3);	
}

/* The Modal (background) */
.card-design-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    padding-top: 80px; /* Location of the box */
    left: 0;
    top:60px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
	backdrop-filter: blur(5px);
    background-color: rgba(0,0,0,0.2); /* White w/ opacity */
	padding-right:26%;
	z-index:22;
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
	border:0px;
}

.card-thumbs-holder {
	position:absolute;
	bottom:0;
	right:0px;
	width:26%;
	height:100%;
	padding-top:20px;
	background-color:#fff;
	z-index:9999;	
	-webkit-box-shadow: -5px 5px 25px rgba(0, 0, 0, 0.15);
 	-moz-box-shadow: -5px 5px 25px rgba(0, 0, 0, 0.15);
	box-shadow: -5px 5px 25px rgba(0, 0, 0, 0.15);	
}

.card-thumbs-content {
	padding:15px;
	padding-bottom:0px;
	height:70%;
}

.card-thumbs-list {
	display:block;
	width:100%;
	height:100%;
	padding-top:15px;
	padding-bottom:40px;
	overflow-x:auto;
}
.card-thumbs-list::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
	-moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
	border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #F5F5F5;
}
.card-thumbs-list::-webkit-scrollbar  {
	width: 7px;
	height: 8px;
	background-color: #F5F5F5;
}
.card-thumbs-list::-webkit-scrollbar-thumb  {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.2);
	-moz-box-shadow: inset 0 0 3px rgba(0,0,0,.2);
	background-color: #CCC;
}


.card-design-thumb {
 display:inline-block;
 width:41%;
 padding:0;
 border-radius:3px;
 overflow:hidden;
 margin-left:5px;
 margin-right:15px;
 margin-bottom:15px;
border:4px solid #fff;
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);	
}

.card-design-thumb.card-active {
	border:4px solid #e4002d;
}


.design-prev-btn, .design-next-btn {
	position:absolute;
	width:35px;
	height:35px;
	text-align:center;
	font-size:28px;
	line-height:28px;
	padding-top:2px;
	top:0;
	bottom:0;
	background-color:#fff;
	border-radius:50%;
	top:40%;
	color:#e4002d;
	opacity:0.8;
	-ms-transform: translateY(-40%);
	transform: translateY(-40%);
	-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
 	-moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);	

 }
 
 .loading-thumbs-progress {
	font-size:16px;
	display:block;
	width:100%;
	text-align:center;
	margin-top:30px; 
 }
 
.design-prev-btn {
	left:20px;	
}
.design-next-btn {
	right:28%;
}

.design-prev-btn:hover, .design-next-btn:hover {
	-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
 	-moz-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);	
	color:#000;
}

.design-img-holder {
	position:absolute;
	text-align: center;
	width:100%;
	height:auto;
}

.design-textarea:disabled  {
	cursor:auto !important;	
	background-color:transparent;
}
.design-textarea  {
	position:absolute !important;
	word-wrap: break-word;
	display:block;
	border:0px !important;
	background-color:transparent;
	font-size:30px;
	color:#fff;
	line-height: 120% !important;
	text-align:center;
	overflow:hidden !important;
	z-index:999;
	transform-origin: 0 0;
    box-sizing: border-box;
	box-shadow:none !important;
}

.design-textarea span {
	/*display: table-cell;*/
	text-align: center;
	vertical-align: middle;
}

.design-textarea:hover, .design-textarea:focus  {
    box-sizing: border-box;
}


.design-buttons-holder {
	background-color:#f5f5f5;
	padding:25px 15px 25px 15px;	
	position:absolute;
	width:100%;
	bottom:60px;
	left:0;
	z-index:999;
	text-align:center;	
}

.save-design-btn {
	float:right;
}
.cancel-design-btn {
	float:left;
}



@-webkit-keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close-design-modal {
    position: absolute;
    top: 28px;
    right: 28%;
    color: #000;
    font-size: 40px;
    transition:none;
	z-index:9999;	
}

.close-design-modal:hover,
.close-design-modal:focus {
    color: #666;
    text-decoration: none;
    cursor: pointer;
}


@media (max-width: 1120px) {

	.design-prev-btn, .design-next-btn {
		top:38%;
	}
	.cancel-design-btn {
		padding-left:18px;
		padding-right:18px;
	}
	.card-design-thumb {
		width:39%;		
	}
	
}


@media (max-width: 991px) {

	.card-design-modal {
		padding-right:0;
	}
	.card-thumbs-holder {	
		left:0px;
		bottom:60px;
		width:100%;
		height:170px;
		padding:10px;
	}
	
	.card-thumbs-content {
		width:73%;
		padding-top:0px;
		height:100px;
	}
	.card-thumbs-list {
		padding-top:5px;
	    overflow-x: scroll;
        overflow-y: hidden;
        height: 100px;
	    white-space:nowrap;
	}
	
	.card-thumbs-list a {
		 float:none;
		 width:120px;
		 display:inline-block;
		 *display:inline;
		 zoom:1;
		 vertical-align:top;		 
		 margin-right:15px;
		 margin-bottom:0px;
	}	
	.design-buttons-holder {	
		top:0px;
		left:auto;
		right:0px;
		width:28%;
		height:100%;
		padding:15px;
		padding-top:30px;
	}
	.save-design-btn {
		float:none;
		display:block;
		margin-bottom:20px;
	}
	.cancel-design-btn {
		float:none;
		display:block;
		padding-left:25px;
		padding-right:25px;
	}

	.close-design-modal {
		right:30px;	
	}	
	.design-next-btn {
		right: 20px;
	}
}

@media (max-width: 767px) {

    .modal-content {
        width: 90%;
    }
	.card-design-modal {
		padding-top:70px;
	}


}

@media (max-width: 670px) {

	.design-prev-btn, .design-next-btn {
		top:35%;
	}

	.card-thumbs-holder {	
		height:240px;
	}
	.card-thumbs-content {
		width:100%;
		padding-top:0px;
		height:100px;
	}

	.design-buttons-holder {	
		top:auto;
		bottom:0;
		left:0;
		right:auto;
		width:100%;
		height:auto;
		padding:15px;
	}
	
	.save-design-btn {
		float:right;
		max-width:200px;
		margin-top:0px;
		margin-bottom:0px;
		margin-right:15px;
	}
	.cancel-design-btn {
		float:left;
		max-width:200px;
	}

}

@media (max-width: 580px) {
	.design-prev-btn, .design-next-btn {
		top:30%;
	}
	.design-prev-btn {
		left:10px;
	}
	.design-next-btn {
		right:10px;	
	}
}

@media (max-width: 520px) {
	.close-design-modal {
		right:20px;	
	}
	.design-prev-btn, .design-next-btn {
		top:32%;
	}
	.design-prev-btn {
		left:5px;
	}
	.design-next-btn {
		right:5px;	
	}
}

@media (max-width: 520px) {
	
	.design-prev-btn, .design-next-btn {
		top:28%;
	}
	
}

@media (max-width: 480px) {
	
	.design-prev-btn, .design-next-btn {
		top:26%;
	}
	
}