a{
    color:var(--appcolor);
    cursor: pointer
}


button.button,a.button  {
    position: relative;
    display: flex;          /* Imposta il layout flessibile */
    align-items: center;
    padding: 0 12px;
    min-height:48px;
    margin:10px 0;
    border-radius: 22px;
    text-decoration: none;
    cursor: pointer;
    gap:4px;
    font-size: 14px;
    box-shadow: -1px 1px 15px 1px rgba(0, 0, 0, 0.3);
    transition:         filter 0.3s ease,        box-shadow 0.3s ease;
    overflow: hidden
}


button.button.rotondo,a.button.rotondo{
    width: 50px;
    min-width: 50px;
    border-radius: 50%;
    border:none;
}

button.button.rotondo-s,a.button.rotondo-s{
    width: 30px;
    min-width: 20px;
}


button.button {
    width:100%   ;
    box-shadow: 0 0 5px #ddd;
    border:0px;
}

.button::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background:linear-gradient(to right,transparent,#FFF);
    transform: skewX(-15deg) translateX(-120%);
    transition: none;
    opacity: .5;
}

button.button:focus,button.button:active{
    outline: none;
    border: 0px solid white;
    box-shadow: -1px 1px 15px 1px rgba(0, 0, 0, 0.3);

}

button.button:hover ,a.button:hover {
    font-weight: bold;
    -webkit-box-shadow: 0 5px 20px rgba(0,0,0,.2);
    box-shadow: 0 5px 20px rgba(0,0,0,.2);
}

button.button:hover:before,a.button:hover:before {
    -webkit-transform: skewX(-15deg) translateX(120%);
    -moz-transform: skewX(-15deg) translateX(120%);
    -ms-transform: skewX(-15deg) translateX(120%);
    transform: skewX(-15deg) translateX(120%);
    -webkit-transition: 1000ms ease transform;
    -moz-transition: 1000ms ease transform;
    transition: 1000ms ease transform;
}

button.button .i,button.button .i {
    flex: 0 0 auto;
    font-size: 20px;
    pointer-events: none;
}

button.button .i.left,button.button .i.left {
    margin-right: auto;
}

button.button .i.right,button.button .i.right {
    margin-left: auto
}

button.button img, a.button img{
    height: 30px;
}

button.button.rotondo i,a.button.rotondo i{
    color: var(--appcolor);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}


button.button span,a.button span {
    color: var(--nero);     /* Colore del testo */
    line-height: 1;
    /*    font-weight: lighter;*/
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;

}

button.button.disabled,a.button.disabled {
    pointer-events: none;     /* Disattiva il clic */
    color: gray;              /* Cambia il colore */
    opacity: 0.5;             /* Rende più "spento" */
    text-decoration: none;    /* Opzionale: togli sottolineatura */
    cursor: default;          /* Cursor "normale" (non mano) */
}


button.button.center,a.button.center{
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
}

button.button.center span,a.button.center span {
    bottom: 5px;
}


button.button.bianco,a.button.bianco{
    background: var(--bianco);
    border: 1px solid var(--appcolor);
}

button.button.bianco::before,a.button.bianco::before{
    background:linear-gradient(to right,transparent,  var(--appcolor));

    opacity: .15;
}
button.button.bianco span,a.button.bianco span{
    color  :var(--nero);
}


button.button.rosso,a.button.rosso{
    background: var(--bianco);
    border: 1px solid var(--rosso);
}

button.button.rosso span,button.button.rosso i ,a.button.rosso span,a.button.rosso i{
    color  :var(--rosso);
}

button.button.grigio,a.button.grigio{
    background: var(--bianco);
    border: 1px solid #F6F0F1;
}

button.button.grigio span,button.button.grigio i ,a.button.grigio span,a.button.grigio i{
    color  :var(--nero);
}

button.button.nero,a.button.nero{
    background: var(--nero);
}

button.button.nero span,a.button.nero span{
    color  :var(--bianco);
}

button.button.giallo,a.button.giallo{
    background: var(--giallo);
    color  :var(--marrone);
}
button.button.giallo span,a.button.giallo span{
    color  :var(--marrone);
}

button.button.appcolor,a.button.appcolor{
    background: var(--appcolor);
    color  :var(--bianco);
}

a.button.appcolor span,a.button.appcolor i,
button.button.appcolor span,button.button.appcolor i{
    color  :var(--bianco);
}


button.button.rotondo.appcolor i,a.button.rotondo.appcolor i{
    color: var(--bianco);
}





.checkbox-button {
    display: none; /* Nasconde il checkbox nativo */
}

label.checkbox-button-label {
    display: block;
    width: 100%;
    height: 46px;
    /*    min-width: 180px;*/
    /*    padding: 8px;*/
    border-radius: 22px;
    position: relative;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    /*    margin: 8px 0;*/
    /*    box-shadow: -1px 1px 15px 1px rgba(0, 0, 0, 0.3);*/
    background-color: #f0f0f0;
    transition: background-color 0.2s ease;
    border: 1px solid gray;
}

label.checkbox-button-label span {
    font-size: 11px;
    color: #666;
    line-height: 0;
    position: absolute;
    font-weight: lighter;
    left: 0;
    right: 0;
    top: 53%;
}

label.checkbox-button-label:hover {
    font-weight: bold;
    background-color: #e0e0e0;
}

/* ✅ Stile "attivo" quando il checkbox è selezionato */
.checkbox-button:checked + label.checkbox-button-label {
    background-color: var(--appcoloralpha2);
    /*    box-shadow: 0 0 8px var(--appcolor);*/
}

.checkbox-button:checked + label.checkbox-button-label span {
    color: var(--appcolor);
    font-weight: bold;
}


/*
.btn{
    position: relative
}*/

/*.btn i{
    position: absolute;
    left: 15px;
    top: 6px;
    font-size:24px;
    margin-right:5px
}*/

.btn-danger{
    background: rgba(174, 42, 42, 1) !important;
    color:white !important
}


.btn-white{
    background: white !important;
    color:rgba(174, 42, 42, 1) !important;
    border-color: lightgray !important;
}


/*button.button:hover {
    -webkit-filter: brightness(1.15);
    filter: brightness(1.15);
    -webkit-box-shadow: 0 5px 20px rgba(0,0,0,.2);
    box-shadow: 0 5px 20px rgba(0,0,0,.2);
}*/
.bt_bb_button.bt_bb_style_filled a.bt_bb_link:hover:before {
    -webkit-transform: skewX(-15deg) translateX(120%);
    -moz-transform: skewX(-15deg) translateX(120%);
    -ms-transform: skewX(-15deg) translateX(120%);
    transform: skewX(-15deg) translateX(120%);
    -webkit-transition: 800ms ease transform;
    -moz-transition: 800ms ease transform;
    transition: 800ms ease transform;
}
.rtl .bt_bb_button.bt_bb_style_filled a.bt_bb_link:hover:before {
    -webkit-transform: skewX(15deg) translateX(-120%) scaleX(-1);
    -moz-transform: skewX(15deg) translateX(-120%) scaleX(-1);
    -ms-transform: skewX(15deg) translateX(-120%) scaleX(-1);
    transform: skewX(15deg) translateX(-120%) scaleX(-1);
}
.bt_bb_button.bt_bb_style_outline a.bt_bb_link {
    overflow: hidden;
    -webkit-box-shadow: 0 0 0 2px #191919 inset;
    box-shadow: 0 0 0 2px #191919 inset;
}
.bt_bb_button.bt_bb_style_outline:hover a {
    -webkit-filter: brightness(1.15);
    filter: brightness(1.15);
    -webkit-box-shadow: 0 0 0 2em black inset,0 5px 20px rgba(0,0,0,.2);
    box-shadow: 0 0 0 2em black inset,0 5px 20px rgba(0,0,0,.2);
}
.bt_bb_button.bt_bb_style_outline:hover a .bt_bb_button_text,
.bt_bb_button.bt_bb_style_outline:hover a .bt_bb_icon_holder {
    color: #fff;
}