
.btn{
        background-color:var(--button-bg-color,black);
        color:var(--button-txt-color,black);

        border:none;
        border-radius: 0.5rem;
        cursor:pointer;
        user-select:none;
        box-shadow: var(     --box-shadow-default);
        transition: all linear 0.051s;

        

        border:1px solid  --button-border-color;
        font-weight: bold;
        max-height: 4rem;
}

.iconBtn{
        display:flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 0.2rem;
        background-color: none;
        border:none;

}







.btn *{
        display: inline;
}
.cta{
        --button-txt-color: var(--button-cta-txt-color,white);
        --button-bg-color:var(--button-cta-bg-color,blue);

}
.primaryBtn{
        --button-txt-color: var(--button-primary-txt-color,white);
        --button-bg-color:var(--button-primary-bg-color,blue);
        --txt-hover-color : var(--button-txt-color);
 
}

.secondaryBtn{
        --button-txt-color: var(--button-secondary-txt-color,white);
        --button-bg-color:var(--button-secondary-bg-color,blue);
        
}



.tertiaryBtn{
        --button-txt-color: var(--button-territory-txt-color,white);
        --button-bg-color:var(--button-territory-bg-color,blue);
        --button-border-color:      --button-territory-border-color;
        border:none;
        font-weight: bold;
        text-decoration: underline;
        --box-shadow-default-hover:none;
        --box-shadow-default:none;
        --txt-hover-color:#111;
        font-size: 1rem;
        text-decoration-thickness: 0.2rem; 

        text-underline-offset: 5px;
}
.iconBtn{
        
}
.btn_flat{
        display:inline-block;
        border-radius: 10px;
        cursor:pointer;
        color:white;
        user-select:none;
}

.btn_fixed{
        height:var(--btn-fixed-height);
        width:var(--btn-fixed-width);
}
      
.btn_full{
        padding: 1rem 2rem;
}
    
.btn_medium{
    
        padding:1rem;
}
      
      
.btn_small{
        padding:0.4rem;
        margin:0rem 1rem;
}
      
.btn:hover{
        box-shadow: var(--box-shadow-default-hover);
        border-color: var(     --button-border-color);
        color:  var(--txt-hover-color);

}

.btn:active{
        box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.btn:disabled{
        background-color:var(    --button-disabled-bg-color);
        color:var(     --button-disabled-txt-color);
        cursor:default;
        --button-border-color:transparent;
        --box-shadow-default-hover:none;

}  
.btnGroupInline{
        display: flex;
        width:100%;
        justify-content: space-between;
        align-items: center;
        margin: 1rem;
}
      
.btnGroupCol{
        display: flex;
        flex-direction: column;
        align-items: end;
        justify-content: center;
        justify-items: center;
        align-content: center;
        gap:2rem;
}


.btn_container{
        display: flex;
        flex-wrap: wrap;
        gap:1rem;

        justify-content: space-between;
        align-items: center;
        align-content: center;
        width:auto;
        padding:0.5rem 0px 0.5rem 0.5rem;
        margin-right: 0.5rem;;
        border-radius: 1rem;
        height:auto;
}




.cornerBtnContainer{
        background-color:var(--corner-button-bg-color);
        color:var(--corner-button-txt-color);
        display: flex;
        flex-wrap: wrap;
        gap:1rem;

        justify-content: space-between;
        align-items: center;
        align-content: center;
        width:auto;
        padding:0.3rem 0px 0.3rem 0.5rem;
        margin-right: 1rem;;
        border-radius: 0.5rem;
        height:1.2rem;
}

.cornerBtnContainer .btn{
        border-radius: 0.5rem;
        margin: -5px;
}

.cornerBtnContainer .tertiaryBtn{
  padding:0.4rem;
}



.input_number_quantity input{
        border:none;
        text-align: center;
        width:100%;
}
.input_number_quantity{
        width:20%;
        border:1px solid black;
        display: flex;
        justify-content:space-evenly ;
        border-radius: 1rem;
        align-items: center;
}