:root {
    --blue:         #007bff; /* primary */
    --indigo:       #6610f2;
    --purple:       #6f42c1;
    --pink:         #e83e8c;
    --red:          #dc3545; /* danger */
    --orange:       #fd7e14;
    --yellow:       #f39c12 ; /* warning */
    --green:        #28a745; /* success */
    --teal:         #20c997;
    --cyan:         #17a2b8; /* info */
  
    --white:        #fff;
    --gray-100:     #f8f9fa; /* light */
    --gray-200:     #e9ecef;
    --gray-300:     #dee2e6;
    --gray-400:     #ced4da;
    --gray-500:     #adb5bd;
    --gray-600:     #868e96; /* secondary */
    --gray-700:     #495057;
    --gray-800:     #343a40; /* dark */
    --gray-900:     #212529;
    --black:        #000;
    
}

.login-page, .register-page{
    justify-content:flex-start;
    padding-top: 25vh;
}

.login-footer{
    position: absolute;
    bottom:1vh;
}

#toast-container{
    margin-top: 20px;
}

.navbar-nav .nav-item .lang-selector {
    padding: 5px 0;
    display: inline-block;
}

.selected{
    background-color: rgba(0, 100, 255, 0.8) !important;
}

.cursor{
    cursor: pointer;
}

.zoom-in{
    cursor: zoom-in;
}

.input-warning{
    background-color: rgba(255, 252, 60, 0.3) !important;
}


.input-success{
    background-color: rgba(8, 131, 47, 0.3) !important;
}

.form-group {
    margin-bottom: 0.5rem !important;
}


.toolbar_menu-list{
    position: relative;
    margin:0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.toolbar_menu-item{
    text-decoration: none;
    position: relative;
    width:100%;
}

.toolbar_menu-item a{
    text-align: left;
    color: var(--gray-200);
    display: block; 
    padding: 10px;
}

.toolbar_menu-item a:hover{
    background-color: var(--gray-400);
    color: var(--black);
    text-decoration: none;
}

.product input[type="number"]::-webkit-outer-spin-button,
.product input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product input[type="number"] {
    -moz-appearance: textfield;
}

.small-box .icon>i.fa, .small-box .icon>i.fab, .small-box .icon>i.fad, .small-box .icon>i.fal, .small-box .icon>i.far, .small-box .icon>i.fas, .small-box .icon>i.ion {
    font-size: 40px;
    top: 20px;
}

.product .carousel-item {
    height: 480px; 
    overflow: hidden;
    position: relative;
}

.list-view .product .carousel-item {
    overflow: hidden;
    position: relative;
}
  
.product .carousel-item img {
    height: 100%;
    object-fit: contain; /* oppure 'cover' se vuoi riempire sempre */
    object-position: center;
}

  
.product .carousel-item img.zoomable {
    transition: transform 0.3s ease;
    transform-origin: center center;
}
  
.product .carousel-item:hover img.zoomable {
    transform: scale(1.5);
    cursor: zoom-in;
}


.spin_update{
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}

.dt-buttons  {
  margin: 0 10px;

}


@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}