/* buttons */
:root {
    --transparent-icon-color-hover: var(--black-color);
    --transparent-icon-color: var(--black-color);
    --transparent-button-backcolor: #ffffff2e;
    --transparent-button-hover-backcolor: #fff;
    --buttons-border-radius: 6px;
}

.buttons {
	margin: 1em 0;
}
.btn, a.btn {
	padding: 0.6em 1em; /*7.5px 14px*/
    border-radius: var(--buttons-border-radius) ! important;
    border: 1px solid;
    box-shadow:none;
    background-image:none;    
    transition: background-color .2s ease-in;
  /*  transition: all 0.25s ease-in;*/
    /*height: 3em;*/
    /*border-radius: 1.5em!Important;*/
}

.btn.btn-download {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    padding: 5px 10px;
    max-width: fit-content;
}
.btn.btn-download:hover {
    background-color: var(--white-color);
}
.btn.btn-download svg {
    height: 24px;
    fill: var(--white-color);
}
.btn.btn-download span {
    color: var(--white-color);
}
.btn.btn-download:hover svg {
    height: 24px;
    fill: var(--main-color);
    transform: scale(1.2);
}
.btn.btn-download:hover span {
    color: var(--main-color);
}

.btn.disabled, .btn[disabled], 
.btn.disabled:hover, .btn[disabled]:hover
a.btn.disabled, a.btn[disabled], 
a.btn.disabled:hover, a.btn[disabled]:hover {
    background-color: var(--grey-color);
    color: white;
    border-color: var(--lightgrey-color);
}
.btn.active, .btn:active, 
.btn.focus, .btn:focus,
a.btn.active, a.btn:active, 
a.btn.focus, a.btn:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0;    
}

.btn-xs, a.btn-xs {
	font-size: 0.8em;
}
.btn-sm, a.btn-sm {
	font-size: 0.9em;
}
.btn-lg, a.btn-lg {
    padding: 0.5em 1em;
	font-size: 1em;
    /*font-weight: 700;*/
}

.transparent-button {
    background-color: var(--transparent-button-backcolor);
    border: 1px solid transparent;
}
.transparent-button:hover {
    background-color: var(--transparent-button-hover-backcolor);
}
.transparent-button:hover svg {
    fill: var(--transparent-icon-color-hover);
}
.transparent-button:hover span {
    color: var(--transparent-icon-color-hover);
}
.transparent-button svg {
    fill: var(--transparent-icon-color);
}
.transparent-button span {
    color: var(--transparent-icon-color);
}

/* Group */
.btn-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-top: solid 1px var(--lightgrey-color);
    padding: 0.6em 0;
}

/* Default */
.btn-default {
	color: var(--buttons-color);
	background-color: var(--buttons-backcolor);
    border: var(--buttons-border);
}
.btn-default.focus, .btn-default:focus, 
.btn-default:hover, .btn-default:active, .btn-default.active  {
    color: var(--buttons-hovercolor);
    background-color: var(--buttons-hoverbackcolor);
    border: var(--buttons-hoverborder);
}
.btn-default svg {
	fill: var(--buttons-color);
}
.btn-default:hover svg, 
.btn-default:active svg, 
.btn-default.active svg,
.btn-default:focus svg {
    fill: var(--buttons-hovercolor);
}   

/* Inverse */
.btn-inverse, a.btn-inverse, .open a.btn-inverse {   
    color: var(--buttons-hovercolor);
    fill: var(--buttons-hovercolor);
    background-color: var(--buttons-hoverbackcolor);
    border: var(--buttons-hoverborder);
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse:focus, .btn-inverse.focus
a.btn-inverse:hover, a.btn-inverse:active, a.btn-inverse.active, a.btn-inverse:focus, a.btn-inverse.focus
.open a.btn-inverse:hover, .open a.btn-inverse:active, .open a.btn-inverse.active, .open a.btn-inverse:focus, .open a.btn-inverse.focus {
	color: var(--buttons-color);
    fill: var(--buttons-color);
	background-color: var(--buttons-backcolor);
    border: var(--buttons-border);
}

/* Primary */
.btn-primary {
	color: var(--buttons-color);
	background-color: var(--buttons-backcolor);
    border: var(--buttons-border);
}

.btn-primary.focus, .btn-primary:focus, .btn-primary:hover, .btn-primary:active, .btn-primary.active  {
    color: var(--buttons-hovercolor);
    background-color: var(--buttons-hoverbackcolor);
    border: var(--buttons-hoverborder);
}

/* Secondary */
.btn-secondary {
    color: var(--buttons-hovercolor);
    background-color: var(--buttons-hoverbackcolor);
    border: var(--buttons-hoverborder);
}

.btn-secondary.focus, .btn-secondary:focus, .btn-secondary:hover, .btn-secondary:active, .btn-secondary.active  {
	color: var(--buttons-color);
	background-color: var(--buttons-backcolor);
    border: var(--buttons-border);
}

/* Success */
.btn-success {
    color: #fff;
    background-color: var(--green-color);
    border-color: var(--darkgreen-color); /*#51a351;*//* #51a351 #387038;*/
}
.btn-success:hover {
    color:  var(--green-color);
    border-color: #51a351;/* #51a351 #387038;*/
    background-color: #fff;
}
.btn-success:active, .btn-success.active,
.btn-success.focus, .btn-success:focus {
    color: #fff;
    background-color: var(--darkgreen-color); /*#449d44;*/
    border-color:var(--green-color); /* #255625;*/
}

/* Whatsapp */
.btn-whatsapp-tx {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;    
    border: none ! important;
}
.btn-whatsapp-tx svg {
    fill: #25D366;    
}
.btn-whatsapp-tx:hover svg {
    transform: scale(1.2);
}
.btn-whatsapp {
    color: #25D366;
    background-color: #fff;
    border-color: #25D366; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-whatsapp svg {
    fill: #25D366;    
    height: 100%;
}
.btn-whatsapp svg + span {
    margin-left: 10px;
}
.btn-whatsapp:hover {
    color: #fff;
    border-color: #25D366;
    background-color: #25D366;
}
.btn-whatsapp:hover svg {
    fill: #fff;
}
.btn-whatsapp:active, .btn-whatsapp.active,
.btn-whatsapp.focus, .btn-whatsapp:focus {
    color: #25D366;
    background-color: #fff;
    border-color: #25D366;
}

/* Info */
.btn-info {
	color: #ffffff;
	background-color: #df5c39;
	background-image: linear-gradient(to bottom, #e06342, #dc512c);
	background-repeat: repeat-x;
	border-color: #dc512c #dc512c #a2371a;
}
.btn-info.active.focus, 
.btn-info.active:focus, 
.btn-info.active:hover, 
.btn-info:active.focus, 
.btn-info:active:focus, 
.btn-info:active:hover {
	background: #ffffff;
	color: #3a3a3a;
}

/* Warning */
.btn-warning {
	color: #ffffff;
	background-color: #faa732;
	border-color: #f89406;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning:focus, .btn-warning.focus {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}

/* Danger */
.btn-danger {
    color: #ffffff;
	background-color: var(--red-color);
    border-radius: 5px!Important;
    border-color: var(--darkred-color);
    /*
    color: car(--black-color);
    background-color: #ffffff00;
    border: none;
    */
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.focus, .btn-danger:focus {
    color: var(--red-color);
    background-color: white;
    /*
    background-color: #ffffff00;
    */
}

/* Link */
.btn-link {
	border-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	color: var(--black-color);
	border-radius: 0!Important;
}
.btn-link:hover {
    color: var(--grey-color);
}
.btn-link:focus, .btn-link:hover {
    text-decoration: none;
}
/* Interact */
.btn-interact {
    margin: 0 0 20px 0;
}
.btn-interact button:first-of-type { 
    margin-right: 10px; 
} 

/* Show All Product */

a.btn.show_all_product_button {
    color: var(--buttons-hovercolor);
    background-color: var(--buttons-hoverbackcolor);
    border: var(--buttons-hoverborder)!Important;
    margin: 5px;
}

a.btn.show_all_product_button:hover {
    color: var(--buttons-color);
    background-color: var(--buttons-backcolor);
    border: var(--buttons-border)!Important;
}

/* Whishlist */

.btn-wishlist, #list-view {
    margin-right:10px;
}
.btn-wishlist, .btn-compare {
    background:none repeat scroll 0% 0% #FC385E;
    width: 41px;
    height: 41px;
    color:#ffffff;
    border:none;
    box-shadow:none;
}

#grid-view:focus{
    outline: 0px;
}

#list-view:focus{
    outline: 0px;
}
#list-view, #grid-view {
    background-color: var(--buttons-backcolor);
}
#list-view:hover, #grid-view:hover {
    background: var(--buttons-hoverbackcolor);
}



.btn-group .btn_inquiry {
    background-color: #5bb75b;
    color: #ffffff;
    margin-left: 0px!important;
    height: 40px;
    padding-left: 5px;
    padding-right: 5px;
    flex: 1;
}

.product-thumb .btn-group .btn_inquiry {
    border-radius: 0px!important;
}


.btn-group .btn_inquiry:focus {
    outline: 0;
}


.btn.btn_wish_thumb {
    position: absolute;
    width: 36px;
    height: 36px;
    top: 16px;
    right: 16px;
    border: none;
    cursor: pointer;
    border-radius: 50%!important;
    padding: 4px 0px 0px 0px;
    color: var(--black-color);
   /* transition: transform .2s;     */
    background-color: hsl(0deg 0% 100% / 50%);
}
.btn.btn_wish_thumb:hover {
    color: red;
    border: 1px solid red!Important;
    background-color: hsl(0deg 0% 100% / 50%);
    transform: scale(1.2);
}
.btn.btn_wish_thumb:focus {
    outline: 0;
}

#button-cart-toggle i {
    display: none;
}
/*
#button-cart-toggle {
    background-color: var(--buttons-backcolor);
    color: var(--buttons-color);
    fill: var(--buttons-color);
    border: var(--buttons-border)!Important;
    display: flex;
    align-items: center;
    font-weight: 700;
}
#button-cart-toggle:hover {
    background-color: var(--buttons-hoverbackcolor);
    color: var(--buttons-hovercolor);
    fill: var(--buttons-hovercolor);
    border: var(--buttons-hoverborder)!Important;
}
#button-cart-toggle:focus {
    outline: 0;
}
*/
/* Number spinner */

.number-spinner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;   
    flex: 0;
}
.number-spinner input {
    min-width: 60px;
}
.number-spinner .btn {
    background-color: #ffffff00;
    color: var(--black-color);
    border: none;
    
    font-size: 1.1em;
    
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    
    padding: 2px 4px;

}
.number-spinner .btn:disabled,  
.number-spinner .btn[disabled] {
    background-color: #ffffff00;
    color: var(--black-color);
    border: none;
}
    
.number-spinner input {
    border-radius: 5px;   
    text-align: center; 
    font-weight: 600;
    height: 35px;
    padding: 0 5px;
   /* transition: transform .2s; */
    border: 1px solid #999;
    
}
.number-spinner input:not([disabled]):not(.disabled):hover, 
.number-spinner input:not([disabled]):not(.disabled):focus {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;   
}
.number-spinner input[disabled], 
.number-spinner input.disabled {
    color: var(--grey-color);
}
      
.number-spinner .btn:hover {
    color: var(--main-color);
    border: none;
}
.number-spinner .btn svg {
   /* transition: transform .2s; */
    fill: var(--black-color);
    height: 20px !important;
    width: 20px !important;
    display: block;    
}
.number-spinner .btn:not([disabled]):not(.disabled):hover svg {
    transform: scale(1.3);
    fill: var(--main-color);
}

/* Shopping Cart */

.btn_shopping_cart {
    padding-right: 5px;
    padding-left: 5px;
    
    height: 40px;
        
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;

    position: relative;
    overflow: hidden;
   
   /* transition: transform .2s; */
}

.btn_shopping_cart:not([disabled]):not(.disabled) {
    background-color: var(--shopping-cart-button-backcolor);
    color: var(--shopping-cart-button-color);
    border: 1px solid var(--shopping-cart-button-bordercolor);
}
.btn_shopping_cart:not([disabled]):not(.disabled):hover {
    background-color: var(--shopping-cart-button-hover-backcolor);
    color:var(--shopping-cart-button-hover-color);
    border: 1px solid var(--shopping-cart-button-hover-bordercolor);
}

.btn_shopping_cart svg {
    fill: var(--shopping-cart-button-color);
    height: 1.2em;
 }
.btn_shopping_cart:not([disabled]):not(.disabled):hover svg,
.btn_shopping_cart:not([disabled]):not(.disabled) svg:hover {
    transform: scale(1.4);
    fill: var(--shopping-cart-button-hover-color);    
  }