/* START BUTTON NEW STAMPING IN OPERATORS INDEX STYLE */
.btn.new-stamping {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 20px;
    right: 25px;
    z-index: 2;
}
.btn.btn-circle{
    height: 64px;
    width: 64px;
    padding: 8px;
    border-radius: 50%;
    transition: 0.3s ease-in-out;
}
/* END BUTTON NEW STAMPING IN OPERATORS INDEX STYLE */

.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    border-color: transparent;
}

/* START OFFCANVAS STYLE */
.offcanvas.offcanvas-start {
    /* larghezza dell'offcanvas */
    width: 260px; 
}

.offcanvas-icon{
    width: 40px;
}

.main-content {
    margin-left: 260px;
    transition: margin-left 0.4s;
}

li:hover{
    background-color: rgba(15, 111, 254, 0.15);
    border-radius: 8px;
}

.offcanvas-after::after {
    content: "";
    position: absolute;
    top: 56px;
    bottom: 0;
    right: -2px;
    width: 2px;
    background: linear-gradient(to left, rgba(0,0,0,0.062), transparent);
}

@media (max-width: 992px) {
    .offcanvas.offcanvas-start {
        width: 35%; 
    }
    .main-content{
        margin-left: 0;
    }
}

@media (max-width: 576px) {
    .offcanvas.offcanvas-start {
        width: 70%; 
    }
}
/* END OFFCANVAS STYLE */

/* START TABLE STYLE */
tr{
    cursor: pointer;
}

.table-stampings td, .table-stampings th, .table-protocol td, .table-protocol th {
    background-color: #fafafa;
    border-left: none;
    border-right: none;
}

.table-stampings td{
    padding: 14px 6px;
}

.table-protocol td{
    padding: 19px;
}

.state-mobile{
    width: 54px;
    height: 24px;
    font-size: 13px;
}

@media (max-width: 576px) {
    .table-stampings td {
        padding: 12px 6px;
    }

    .table-protocol td{
        padding: 16px 0;
        font-size: 14px;
    }

    .protocol-date-mobile{
        font-size: 14px;
    }
    
    .date-mobile, .state-mobile{
        font-size: 11px;
    }

    .causal-mobile, .project-mobile{
        font-size: 12px;
    }
}

/* END TABLE STYLE */

/* START IMAGE MODAL OPERATOR_PROFILE + CUSTOMERS SHOW_OPERATORS STYLE */
.image-container{
    width: 220px;
    height: 220px;
}

.custom {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* END IMAGE MODAL OPERATOR_PROFILE + CUSTOMERS SHOW_OPERATORS STYLE */

/* CURSOR POINTER CUSTOMERS INDEX TABLE (td OPERATORE) */
.cursor{
    cursor: pointer;
}

/* START SweetAlert2 STYLE  */
.swal2-popup {
    max-width: 400px !important;
}

.swal2-popup .swal2-styled {
    width: 100px !important;
}

.swal2-popup .swal2-icon {
    color: #dc3545 !important;
}

.swal2-icon.swal2-question {
    border-color: #dc3545 !important; 
}
/* END SweetAlert2 STYLE  */

/* START DropZone STYLE */
.dz-remove{
    color: black;
    text-decoration: none;
    transition: 0.4s ease;
}

.dz-remove:hover {
    scale: 1.16;
}

/* Dropzone custom css for delete button */
.dz-remove{
    position: absolute;
    top: -10px;
    right: -10px;
    /* z-index to 21 because .dz-details set to 20 by dropzone default */
    z-index: 21;
}
.fa-circle-xmar{
    font-size: 24px;
    cursor: pointer;
}
/* END DropZone STYLE */

/* PROTOCOL DROPDOWN STYLE */
.dropdown-menu.new-protocol {
    min-width: 300px;
}

/* PROTOCOL ACCORDION STYLE */

.collapse-accordion{
    position: absolute; 
    min-width: 500px; 
    z-index: 2; 
    right: 0;
}

@media (max-width: 576px) {
    .collapse-accordion {
        width: 320px;
        min-width: 100%;
    }
    .card-mobile{
        border-radius: 0;
    }
}

.accordion-button:not(.collapsed), .accordion-button {
    background-color: #0d6efd;
    /* background-color: #dc3545; */
    color: white;
    box-shadow: none;
    border-radius: 8px;
}

.stamping-accordion, .protocol-accordion{
    position: relative;
    display: flex;
    justify-content: end;
    width: 100%;
}

.collapse-accordion-stampings{
    position: absolute; 
    min-width: 100%; 
    z-index: 2; 
    left: 0;
}

.accordion-button::after{
    margin-left: 10px;
}

.accordion-button.collapsed {
    color: white;
    border-radius: 8px;
}

.accordion-button-protocol, .accordion-button-stampings{
    padding: 12px 22px;
}

.accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus {
    box-shadow: none;
    border: none;
}

.accordion-item:first-of-type .accordion-button, .accordion-item:last-of-type .accordion-button.collapsed {
   border-radius: 8px;
}

/* PROTOCOL SHOW Canceled protocol STYLE */
.centered {
    position: absolute;
    top: 50%;
    left: 53%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.tr-opacity{
    opacity: 0.35;
}

.new-protocol-button{
    padding: 12px 20px;
}

/* DESKTOP LOGIN INPUT STYLE */
@media (min-width: 577px) {
    .mobile-width{
        width: 75%;
    }
}
/* MOBILE LOGIN INPUT STYLE */
@media (max-width: 576px) {
    .mobile-width{
        width: 90%;
    }
    .new-protocol-button{
        padding: 8px 12px;
    }
}

.bg-success {
    background-color: rgb(29, 169, 104)!important;
}