/*body{
	overflow: hidden;
}*/
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #333; 
}
::-webkit-scrollbar {
    width: 3px;
    height: 7px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(200,200,200,1);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color:#000;
    -webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);
}
@font-face {
	font-family: 'Arial';
    src: url("../fonts/ArialTh.ttf") format('ttf');
}
@font-face {
	font-family: 'century gothic';
    src: url("../fonts/Century Gothic.ttf") format('ttf');
}
@font-face {
	font-family: 'comic sans ms';
    src: url("../fonts/ComicSansMS3.ttf") format('ttf');
}
@font-face {
	font-family: 'courier new';
    src: url("../fonts/cour.ttf") format('ttf');
}
@font-face {
	font-family: 'Georgia';
    src: url("../fonts/GEO_NET.TTF") format('ttf');
}
@font-face {
	font-family: 'Impact';
    src: url("../fonts/impact.ttf") format('ttf');
}
@font-face {
	font-family: 'times new roman';
    src: url("../fonts/times new roman.ttf") format('ttf');
}
@font-face {
	font-family: 'trebuchet ms';
    src: url("../fonts/CrucifixSansOne-Regular.ttf") format('ttf');
}
@font-face {
	font-family: 'Verdana';
    src: url("../fonts/VerdanaPro-Light.ttf") format('ttf');;
}
@font-face {
	font-family: 'gothambold';
    src: url("../fonts/Gotham-Light.otf");
}
@font-face {
	font-family: 'cormorant_garamondmedium';
    src: url("../fonts/Cormorant-Regular.ttf");
}
@font-face {
	font-family: 'lobster';
    src: url("../fonts/Lobster-Regular.ttf");
}
@font-face {
	font-family: 'oldenglishtextmt';
    src: url("../fonts/oldenglishnuenormal.ttf");
}
@font-face {
	font-family: 'monotypecorsiva';
    src: url("../fonts/MTCORSVA.ttf");
}
@font-face {
	font-family: 'scriptoriasskregular';
    src: url("../fonts/ScriptoriaSSi.ttf");
}
@font-face {
	font-family: 'ardestine';
    src: url("../fonts/ARDESTINE.ttf");
}
@font-face {
	font-family: 'arbonnie';
    src: url("../fonts/ARBONNIE.ttf");
}
@font-face {
	font-family: 'Lato';
    src: url("../fonts/Lato-Regular.ttf");
}
@font-face {
	font-family: 'Montserrat';
    src: url("../fonts/MontserratAlternates-Regular.otf");
}
@font-face {
	font-family: 'Roboto Condensed';
    src: url("../fonts/RobotoSlab-Regular.ttf");
}
@font-face {
	font-family: 'Oswald';
    src: url("../fonts/Oswald-Regular.ttf");
}
@font-face {
	font-family: 'Raleway';
    src: url("../fonts/Raleway-Regular.ttf");
}
@font-face {
	font-family: 'Merriweather';
    src: url("../fonts/Merriweather-Regular.otf");
}
@font-face {
	font-family: 'Roboto Slab';
    src: url("../fonts/RobotoSlab-Regular.ttf");
}
@font-face {
	font-family: 'Poppins';
    src: url("../fonts/Poppins-Regular.otf");
}
@font-face {
	font-family: 'Ubuntu';
    src: url("../fonts/Ubuntu-R.ttf");
}
@font-face {
	font-family: 'Open Sans Condensed';
    src: url("../fonts/OpenSans-CondLight.ttf");
}
@font-face {
	font-family: 'Playfair Display';
    src: url("../fonts/PlayfairDisplay-Regular.otf");
}
@font-face {
	font-family: 'Mandali';
    src: url("../fonts/Mandali-Regular.ttf");
}
#bg_content{
	font-family:Mandali;
}
.fnt1, #fnt1 { font-family:Arial }
.fnt2, #fnt2 { font-family:century gothic }
.fnt3, #fnt3 { font-family:comic sans ms }
.fnt4, #fnt4 { font-family:courier new }
.fnt5, #fnt5 { font-family:Georgia }
.fnt6, #fnt6 { font-family:Impact }
.fnt7, #fnt7 { font-family:times new roman }
.fnt8, #fnt8 { font-family:trebuchet ms }
.fnt9, #fnt9 { font-family:Verdana }
.fnt10, #fnt10 { font-family:gothambold }
.fnt11, #fnt11 { font-family:cormorant_garamondmedium }
.fnt12, #fnt12 { font-family:lobster }
.fnt13, #fnt13 { font-family:oldenglishtextmt }
.fnt14, #fnt14 { font-family:monotypecorsiva }
.fnt15, #fnt15 { font-family:scriptoriasskregular }
.fnt16, #fnt16 { font-family:ardestine }
.fnt17, #fnt17 { font-family:arbonnie }
.fnt18, #fnt18 { font-family: Lato  }
.fnt19, #fnt19 { font-family: Montserrat; }
.fnt20, #fnt20 { font-family: Roboto Condensed ; }
.fnt21, #fnt21 { font-family: Oswald ; }
.fnt22, #fnt22 { font-family: Raleway ; }
.fnt23, #fnt23 { font-family: Merriweather ; }
.fnt24, #fnt24 { font-family: Roboto Slab ; }
.fnt25, #fnt25 { font-family: Poppins ;}
.fnt26, #fnt26 { font-family: Ubuntu ;}
.fnt27, #fnt27 { font-family: Open Sans Condensed ;}
.fnt28, #fnt28 { font-family: Playfair Display ;}
.fnt29, #fnt29 { font-family: Mandali ;}
.db-elmnt-wrapper{
	height: auto;
	float: left;
}
.db-badge-wrapper{
	position: absolute;
    width: -webkit-fill-available;
    width: -moz-available;
    width:100%;
    height: 100%;
    background-color: #eee;
    z-index: 1;
}
.db-badge-content{
	height: 100%;
}
.fixed-top{
	position: sticky;
	border-bottom: 1px solid #ddd;
}
.db-elmnt-list li{
	padding: 15px 0 12px 0;
	text-align: center;
	cursor: pointer;
	/*margin-bottom: 5px;*/
	color: #fff;
	transition: 0.3s all;
}
.db-elmnt-list li:hover{
	/*transform: scale(0.9);*/
	background-color: #EC4D13
}
.active-tab{
	background-color: #EC4D13!important;

}
.db-elmnt-list{
	list-style: none;
	padding: 0;
	height: 100vh;
	width: 110px;
    overflow: auto;
    background-color: #557CE1;
    float: left;
    z-index: 10;
    position: relative;
    margin: 0;
}
.db-toolbox-wrapper {
	overflow-y: auto;
	overflow-x: hidden;
    position: relative;
    float: left;
    left: 0vw;
    display: none;
    top: 0vh;
    height: 100vh;
    width: 250px;
    background-color: #fff;
    border-radius: 0 2px 2px 0;
    box-shadow: 1px 1px 7px 6px rgba(0,0,0,0.1);
    padding: 20px 0;
    z-index: 2;
    
    /*transition: 0.5s all ease-in-out;*/
}
.toolbox-closer {
    position: absolute;
    right: 25px;
    top: 0px;
}
.db-list-icon span img {
    background-color: #fff;
    padding: 5px;
    border-radius: 30px;
}
.toolbox-closer > img {
    position: fixed;
    background-color: #eee;
    cursor: pointer;
    border-radius: 20px;
    padding: 5px;
    z-index: 100000;
}

div#badge{
	box-shadow: 0px 1px 15px 2px rgba(0,0,0,0.1);
	position: relative;
    margin: auto;
    background-color: #fff;
    border: 1px solid #ddd;
    top: 50px;
	width: 50%;
    height: 35%;
    overflow:hidden;
    transition: 0.5s all;
}
.not_rounded_badge{
	border-radius: none;
}
.rounded_badge{
	border-radius: 50px;
}
.badge-text-wrapper,.badge-image-wrapper{
	position: absolute;
    height: 100%;
    width: 100%;
}
.badge_shape,.badge_fastener,.badge_bg{
	background-color: #EC4D13;
    padding: 5px 8px;
    margin: 0 5px;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}
.badge_fastener{
	background-color: #557CE1
}
.badge_bg{
	background-color: #555;
}
.db-list-text span {
    font-size: 12px;
}
.shape-toolbox-wrapper ul,.fastner-toolbox-wrapper ul,.bg-standard ul,.bg-custom ul{
	list-style: none;
	padding:10px;
}
.shape-toolbox-wrapper ul li,.fastner-toolbox-wrapper ul li,.bg-standard ul li {
    background-color: #557CE1;
    text-align: center;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.rectangle-1x3,.rectangle-15x3{
	width: 150px;
    margin: 5px auto;
    padding: 20px;
}
.rectangle-15x3{
	padding: 35px;
}
.rectangle-2x3{
	padding: 45px;
	width: 160px;
	margin: 5px auto;
}
.square-2x2{
	width: 120px;
	padding: 40px;
	margin: 5px auto
}
.fastner-toolbox-wrapper ul li,.bg-standard ul li {
	padding: 2px;
}
.bg-custom ul li{
	height: 50px;
    border-radius: 50px;
    width: 50px;
    float: left;
    margin: 3px 3px;
    cursor: pointer;
}
.bg-custom ul li span{
	opacity: 0;
}
.active_bg_color{
	border:2px solid #EC4D13;
}
.bg-standard ul li{
	margin: auto;
	width: 95%;
	float: none;
	margin-bottom: 5px;
}
.ind-fastner-content p,.ind-bg-content p{
	font-size: 12px;
	padding: 5px;
}
.standard-color-opener-wrapper button,.custom-color-opener-wrapper button{
	padding: 7px 10px;
	background-color: #EC4D13;
	color: #fff;
}
.pcr-button{
	display: none;
}
.pcr-app{
	visibility: visible;
	opacity: 1;
}
.fastner-img-wrapper > img,.bg-img-wrapper > img{
	width: 100%;
	/*height: 80px;*/
}
.fastner-toolbox-wrapper ul li{
	margin-bottom: 5px;
}
.rounded-shape{
	border-radius: 10px;
}
.color-picker-wrapper,.text-color-picker-wrapper,.text-family-body,.font-size-body{
	width: 95%;
	margin: 120px auto;
	margin-bottom: 10px;
}
.text-color-picker-wrapper,.text-family-body,.font-size-body{
	margin: 15px auto;
}
.color-picker-wrapper > input,.text-color-picker-wrapper input,.text-family-body select,.font-size-body input{
	border-radius: 5px;
	height: 30px;
	padding: 0 5px;
	font-size: 12px;
}
.badge_premium_background{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.badge_golden_standard{
	background-image: url(../img/standard/golden.png);
}
.badge_gray_standard{
	background-image: url(../img/standard/gray.png);
}
.badge_white_standard{
	background-color: #ffffff;
}
.jscolor{
	border:1px solid #ddd;
}
.jscolor:hover{
	border-color: #ddd;
}
.badge_info_teller{
	top: 30px;
    position: relative;
}
.save_next_wrapper{
	position: relative;
    top: 70px;
    text-align: center;
}
.save_next_wrapper a {
    background-color: #557CE1;
    color: #fff;
    border: 2px solid #557CE1;
    border-radius: 40px;
    font-weight: 800;
}
.save_next_wrapper a i{
	position: absolute;
    left: 100px;
    top: 22px;
    opacity: 0;
    transition: 0.5s all;
}
.save_next_wrapper a:hover i{
    left: 130px;
    opacity: 1
}
.add-image-btn,.delete-image-btn,.add-text-btn,.delete-text-btn{
	color: #fff;
	margin-top: 10px;
	cursor: pointer;
	border:none;
	text-align: center;
	font-size: 12px;
	border-radius: 64px;
    height: 100px;
    width: 100px;
    transition: 0.3s all;
    border: 5px solid transparent;
}
.add-image-btn:hover,.delete-image-btn:hover,.add-text-btn:hover,.delete-text-btn:hover{
	border: 5px solid #000;
	/*transform: scale(0.9); */
}
.add-image-btn,.add-text-btn{
	background-color:#557CE1;
}
.delete-image-btn,.delete-text-btn{
	background-color: #dc3545;
}
.img-direction-head span,.img-alignment-wrapper span,.text-direction-head span,.text-alignment-head span,.text-color-head span,.text-style-head span,.font-size-head span,.text-family-head span,.text-head span{
	border-bottom: 3px solid #555;
    color: #555;
    line-height: 1;
    margin: 0 50px;
    font-weight: 700;
}
.img-direction-body ul,.img-alignment-wrapper ul,.text-direction-body ul,.text-alignment-wrapper ul,.text-style-body ul{
	padding:0;
	list-style: none;
}
.img-direction-body ul li,.img-alignment-wrapper ul li,.text-direction-body ul li,.text-alignment-wrapper ul li,.text-style-body ul li{
	width: calc(100%/3);
	float: left;
	text-align: center;
	border-radius: 50px;
	padding: 10px 5px;
	cursor: pointer;
}
.text-style-body ul li,.text-direction-body ul li,.img-direction-body ul li{
	width: calc(100%/2);
}
.img-direction-body ul li p,.img-alignment-wrapper ul li p,.text-direction-body ul li p,.text-alignment-wrapper ul li p,.text-style-body ul li p{
	font-size: 12px;
	color: #555;
}
.img-direction-body ul li:hover p,.img-alignment-wrapper ul li:hover p,.text-direction-body ul li:hover p,.text-alignment-wrapper ul li:hover p,.text-style-body ul li:hover p{
	color: #EC4D13!important
}

.img-direction-body,.img-alignment-body,.text-direction-body,.text-alignment-body{
	height: 70px;
}
.font-size-body > div:first-child{
	/*padding: 5px 15px;*/
    margin-top: 25px;
}
.fz-list-content{
	height: 200px;
	overflow: auto;
	display: none;
}
.fz-list-content ul {
    padding: 0;
    font-size: 12px;
    list-style: none;
    background-color: #eee;
    border-radius: 5px;
}
.fz-list-content ul li {
    padding: 1px 5px;
    border-bottom: 1px solid #fff;
    cursor: pointer;
}
.fz-list-content ul li:hover{
	background-color: #ddd;
}
.errMsg{
	color: red;
	font-size: 12px;
	/*display: none;*/
}
#amount{
	position: absolute;
    margin: -25px -5px;
    font-size: 12px;
    padding: 0 0px;
    left: 12.1951%;
}
.upload_restriction{
	font-size: 12px;
    background: #557CE1;
    color: #fff;
    font-weight: 700;
}
/*image upload button*/
.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  /*display: inline-block;*/
  margin-bottom: 5px;
  margin-top: 10px;
  cursor: pointer;
}

.upload-btn-wrapper .btn {
  border: 2px solid #fff;
  color: #fff;
  background-color: #ec4d13;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.active_img_direction p{
	color: #EC4D13!important
}
.img-c{
	left:50%;
	margin-left:-50px;
	top:50%;
	margin-top:-50px;
}
/*
.img-cv{
	top:50%;
	margin-top:-50px;
}
.img-ch{
	left:50%;
	margin-left:-50px;
}*/
/*.reversed{
	background-color: #ddd;
}*/
.db-toolbox-content{
	padding-bottom: 30px;
}
.price-table-wrapper{
	width: 75%;
    margin: auto;
    position: relative;
    top: 90px;
}
.price-table-wrapper table{
	background-color: #fff;
	color: #000;
	font-size: 12px;
	font-weight: 600;
}

.table-specs-wrapper{
	background-color: #EC4D13;
}
.qty-price-wrapper p{
	font-size: 20px;
    color: #fff;
    padding: 8px 5px;
}
.price-update-wrapper p{
	color: #fff;
	font-size: 12px;
	text-align: right;
	padding: 14px 5px;
}
.short-price-wrapper{
	display: none;
}
.table-responsive table td{
	padding: 0.4rem;
}
.update_bg_text,.update_bg_color{
	width: 70%;
    border-radius: 0!important;
    border: 0;
}
.custom-color-btn {
    height: 30px;
    width: 45px;
    float: left;
    margin-right: 6px;
}
@media only screen and (max-width: 991px){
	.fastner-img-wrapper > img{
		/*height: 110px;*/
	}
	.fastner-toolbox-wrapper ul li{
		width: 60%;
        margin: 10px auto;
	}
	.db-toolbox-wrapper{
		/*position: relative;*/
		height: 200px;
		/*top: 220px;*/
		width: 100%;
	}
	.badge_info_teller{
		top: 10px;
    	position: relative;
	}
	.save_next_wrapper{
		top: 50px;
    	position: relative;
	}
	div#badge{
		top: 30px;
		width: 50%;
	    height: 30%;
	}
	.db-elmnt-wrapper {
	    position: fixed;
	    bottom: 0;
	    width: 100%;
	    height: auto;
	    overflow-y: hidden;
	    overflow-x:  auto;
	    float: none;
	    z-index: 2;
	}
	.db-elmnt-list {
	    list-style: none;
	    padding: 0;
	    height: 110px;
	    width: 100%;
	    overflow-y: hidden;
	    margin: 0;
	    background-color: #557CE1;
	}
	.db-elmnt-list li{
		display: table-cell;
		padding: 17px;
	}
	.navbar-collapse.collapse.show{
		background:transparent!important;
	}
	#navbarCollapse ul.smi-list {
	    display: block;
    	padding: 0;
	}
	#navbarCollapse ul.smi-list li {
	    float: left;
    	width: 25%;
	}
	.navbar-nav .nav-link {
	    padding-right: 0.5rem !important;
	    padding-left: 0.5rem !important;
	}
	.dbp-list{
		padding: 0
	}
	.navbar-dark .navbar-nav .nav-link{
		text-align: center;
	}
	.dropdown-menu{
		position: relative!important;
    	box-shadow: none!important;
	}
	.dropdown-item {
    	text-align: center!important;
	}
	.table-responsive{
		display: none;
	}
	.short-price-wrapper{
		display: block;
		background-color: #EC4D13;
	    padding: 5px 8px;
	    margin: 0 5px;
	    border-radius: 20px;
	    color: #fff;
	    font-weight: 700;
	    font-size: 12px;
	    text-align: center;
	}
}

@media only screen and (min-width: 577px) and (max-width: 991px){
	.bg-standard ul li {
    	margin: 5px;
	}	
	.bg-standard > ul,.fastner-toolbox-wrapper > ul{
		display: flex;
	}
	 .bg-img-wrapper > img{
	 	height: 80px;
	 }
	 .fastner-img-wrapper > img {
    	height: 110px;
    	width: 100%;
	}
	.fastner-toolbox-wrapper ul li {
    	width: 25%;
    	margin: 0 5px;
	}
}

@media only screen and (max-width: 768px){
	div#badge{
		top: 30px;
	    width: 60%;
	    height: 25%;
	}
	.badge_info_teller{
		top: 5px;
	}
	.save_next_wrapper{
		top: 50px;
	}
	.qty-price-wrapper p,.price-update-wrapper p{
		text-align: center;
	}
	
	
	
}
@media only screen and (max-width: 576px){
	div#badge{
		top: 25px;
		width: 90%;
	    height: 30%;
	}
	.fixed-top{
	    position:relative;
	}
	.badge_info_teller span{
		/*display: block;*/
		margin-bottom: 5px;
	}
	.badge_shape, .badge_fastener, .badge_bg{
		margin:0;
	}
	.badge_info_teller{
		display: none;
	}
	.price-table-wrapper {
		width: 95%;
		top: 60px;
	}
	.price-table-wrapper table{
		margin: 0
	}
	.price-table-wrapper table td{
		padding: 7px 12px;
	}

	
}
.badgeImgWrapper{
	/*transition: 0.5s all cubic-bezier(0.65, 0.05, 0.36, 1);*/
}
#badge .ui-wrapper{
	overflow: visible!important;
}
#badge .ui-resizable-se{
	right: -12px;
    bottom: -12px;
}
#badge .ui-icon-gripsmall-diagonal-se {
    background-position: -80px -224px;
}
.borderdImg{
	border: 1px dashed #EC4D13;
}
.boldText{
	font-weight: bold
}
.italicText{
	font-style: italic;
}
.badgeTextWrapper{
	position: absolute;
}
#text-input{
	height: 30px;
	border-radius: 5px;
}
/*display: flex;
  align-items: center;
  justify-content: center;*/
/*--------------------*/
/*  add more badges style  */
.btn-done,.btn-edit,.btn-delete{
	padding: .25rem .5rem;
	display: none;
}
.btn-done{
	display: block;
}
.add-more-table-wrapper table input{
	border-radius: 30px;
	padding: 5px 10px 5px;
	height: 35px;
	font-size: 12px;
}
.btn-add-row{
	padding: 10px 15px;
    margin: 5px 0;
    border-radius: 40px;
}

.btn-add-row:hover{
	background-color: #21c87a!important
}
.add-more-table-wrapper{
	margin-bottom:10%;
}
.ccontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.ccontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.ccontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.ccontainer input:checked ~ .checkmark {
  background-color: #EC4D13;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.ccontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.ccontainer .checkmark:after {
  left: 8px;
    top: 5px;
    width: 7px;
    height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.remove-bg-wrapper {
    width: 230px;
    margin: auto;
    padding: 8px 7px 1px;
   	color: #fff;
    background-color: #557CE1;
    border:2px solid #557CE1;
    margin-bottom: 5px;
    
}
#generate-th h2{
    color:white;
}