/* Globals for CSS Buttons */

.btn-width {max-width: 20.7rem;}
.cssButton {
  position:relative;
  font-family: 'Poppins', sans-serif;
  display:block;

  text-align:center;
  padding: 14px 5px;
  font-size:11px;
  line-height:17px;
  font-weight:700;
  text-transform:uppercase;
  box-sizing: border-box;
  white-space:nowrap;
  text-decoration:none;
  min-height:35px;
}

.cssButton button {
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  color:transparent;
  cursor:pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

.cssButton .fas,
.cssButton .far {
  padding-left:3px;
  padding-right:3px;
}
.cssButton .cssButtonText {
  display:inline-block;
  padding-left:3px;
  padding-right:3px;
  text-decoration:none;
}

/* Colors for CSS Buttons */

/* Black Buttons */
.cssButtonColor1 {
	border-radius:2px;
	border:1px solid #333;
	text-decoration:none;
	background-color:#333;
	color:#ffffff;
	display:inline-block;
}
.cssButtonColor1:hover {
  opacity:0.8;
  text-decoration:none !important;
}

/* Magenta Buttons */
.cssButtonColor2 {
border: 0;
flex: 1;

font-size: 1.4rem;
border-radius: .3rem;
background-color:  var(--tpl-main-color);;
color: #fff;
cursor: pointer;
max-width: 20.7rem;
height: 4.5rem;
}
.cssButtonColor2:hover {
  opacity:0.8;
  text-decoration:none !important;
}

/* Transparent Buttons with Border */
.cssButtonColor3 {
  background:#fff;
  border: 1px solid #222;
  color: #222;
font-size: 1.4rem;
border-radius: .3rem;
}
.cssButtonColor3:hover {
  background:#fafafa;
  color:#222;
  text-decoration:none !important;
}

/* Green Buttons */
.cssButtonColor4 {
color: #222;
border-color: #222;
background-color: transparent;
flex: 1;

font-size: 1.4rem;
border-radius: .3rem;


cursor: pointer;
max-width: 20.7rem;
height: 4.5rem;


border: 1px solid;

}
.cssButtonColor4:hover {
background-color: #222;border-radius: .3rem;
color: #fff;
  text-decoration:none !important;border: 0px solid;
}

/* Transparent Icons no Border */
.cssButtonColor5 {
  background:transparent;
  color:#555;
}
.cssButtonColor5:hover {
  color:#222;
  text-decoration:none !important;
}


/* Yellow Paypal Express Buttons */
.cssButtonColor6 {
	border-radius:2px;
	border:1px solid #d19c20;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #ffc848 15%, #fbba22 90% );
	background:-ms-linear-gradient( top, #ffc848 15%, #fbba22 90% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc848', endColorstr='#fbba22');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(15%, #ffc848), color-stop(90%, #fbba22) );
	background-color:#ffc848;
	color:#222;
	display:inline-block;
	text-shadow:1px 1px 0px #ffd97e;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffe3a1;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffe3a1;
 	box-shadow:inset 1px 1px 0px 0px #ffe3a1;
  height:45px;
}
.cssButtonColor6:hover {
	background:-moz-linear-gradient( center top, #fbba22 15%, #ffc848 90% );
	background:-ms-linear-gradient( top, #fbba22 15%, #ffc848 90% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbba22', endColorstr='#ffc848');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(15%, #fbba22), color-stop(90%, #ffc848) );
	background-color:#fbba22;
	color:#222;
  text-decoration:none !important;
}
.cssButtonColor6 .color-paypal0 {
  font-size:10px;
  line-height:16px;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;
  color:#013088;
  padding: 0 5px 0 0;
  vertical-align:middle;
}
.cssButtonColor6 .color-paypal1 {
  font-size:18px;
  line-height:16px;
  font-family: 'Poppins', sans-serif;
  font-style:italic;
  font-weight:700;
  color:#013088;
}
.cssButtonColor6 .color-paypal2 {
  font-size:18px;
  line-height:16px;
  font-family: 'Poppins', sans-serif;
  font-style:italic;
  font-weight:700;
  color:#019CDE;
}

/* Positions for CSS Buttons */

/* Box add_a_quickie & newsletter */
.cssButtonPos1 {
  position:absolute;
  right:0px;
  top:0px;
  width:50px;
}
.cssButtonPos1 .fas {
  font-size:16px;
  vertical-align:bottom;
}
.cssButtonPos1 .cssButton {
  height:32px;
}
/* Box search */
.cssButtonPos2 {
  width:80px;
  height:35px;
}

/* Box login */
.cssButtonPos3 {
  float:right;
  width:100px;
}

/* Single Button 130 */
.cssButtonPos4 {
  min-width: 130px;
}

/* Edit Buttons adress_book */
.cssButtonPos5 {
  display:block;
  margin: 0 0 5px 0;
}

/* Small Cart Buttons account, account_history, account_history_info */
.cssButtonPos6 {
  float:left;
  width:44px;
  display:block;
  margin: 0 0 5px 5px;
}
.cssButtonPos6 .fas {
  font-size:16px;
  vertical-align:bottom;
}

/* More than one Button in one line account_history_info & shopping_cart */
.cssButtonPos7 {
  float:left;
  margin: 0px 5px 5px 0px;
  min-width: 130px;
}
.cssButtonPos8 {
  float:right;
  margin: 0px 0px 5px 5px;
  min-width: 165px;
}
.cssButtonPos9 {
  float:left;
  margin: 0px 5px 5px 0px;
  min-width: 150px;
}

/* Delete Button in flyout wishlist & shopping cart */
ul.tc_list li .tc_delete {
  height: 26px;
  right: 0px;
  top: 6px;
  width: 26px;
}
ul.tc_list li .tc_delete .cssButton {
  width:100%;
  text-align:center;
  padding: 4px 0px;
  line-height:19px;
}
ul.tc_list li .tc_delete .cssButton .fas {
  font-size: 15px;
  line-height:19px;
  padding-right: 0;
}

/* Add to basket Button product_info */
.cssButtonPos10 {
  display:block;
  width:100%;
  margin: 0 0 5px 0;
}

/* Small Buttons wishlist */
.cssButtonPos11 {
  width:50px;
  display:inline-block;
  margin: 0 2px 0 2px;
}
.cssButtonPos11 .fas {
  font-size:16px;
  vertical-align:-2px;
}

/* Big Buttons checkout */
.cssButtonPos12 {
  min-width:200px;
  display:inline-block;
}
.cssButtonPos12 .cssButton {
  font-size: 16px;
  line-height: 20px;
  padding: 10px 5px;
  min-width:220px;
}

/* Small Cart Buttons delete */
.cssButtonPos13 {
  display:block;
  margin: 0 0 0px 0px;
}
.cssButtonPos13 .cssButton {
  padding: 5px 5px;
}
.cssButtonPos13 .fas {
  font-size:15px;
  vertical-align:bottom;
}

/* END CSS Buttons */

.btn-search span.cssButtonText {display: none;}
.btn-search i{
    padding: 8px 0 0 15px;
}