/* stili per configurazione di plugin */

/* select 2*/

.select2-result-container {
    display: flex;
    align-items: center;
}
.select2-flag {
    font-size: 80%;
    color: #878a99;
}
.select2-thumb {
    max-width: 40px;
    min-width: 40px;
    max-height: 2em;
    vertical-align: middle;
    margin-right: 7px;
}
.select2-icon {
    width: 17px;
    max-height: 2em;
    vertical-align: middle;
    margin-right: 10px;
    font-size: 18px;
}

/* wrapper per dropdown parent in modals */
.select2-wrapper-relative{
    position: relative !important;
}

/* per visulizzare correttamente il pulsante di clear selection, presi da: https://apalfrey.github.io/select2-bootstrap-5-theme/ */
.select2-container .select2-selection--single .select2-selection__clear,
.select2-container .select2-selection--multiple .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 2.25rem;
    width: 0.75rem;
    height: 0.75rem;
    padding: 0.25em 0.25em;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.75rem auto no-repeat;
    transform: translateY(-50%);

    opacity: 0.7;
    margin-right: 0;
}
.select2-container .select2-selection--multiple .select2-selection__clear{
    top: 40%;           /* nelle select multiple va un po' più in alto */
}
.select2-container .select2-selection--single .select2-selection__clear:hover,
.select2-container .select2-selection--multiple .select2-selection__clear:hover {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.75rem auto no-repeat;
}
.select2-container .select2-selection--single .select2-selection__clear > span,
.select2-container .select2-selection--multiple .select2-selection__clear > span {
    display: none;
}

/* override della rispettiva regola in app.css che causava un'altezza sballata nelle select2 multiple in cui si usa un placeholder */
.select2-container .select2-selection--multiple .select2-selection__rendered {
    padding: initial;
}

/* per usare input group con dentro select2 */
.input-group .select2.select2-container {
    width: initial !important;    /* per override width 100% su app.css */

    -webkit-box-flex:1;
    flex-grow:1
}
.input-group-prepend~.select2-container.select2-selection {
    border-top-left-radius:0;
    border-bottom-left-radius:0
}
.input-group>.select2-container:not(:last-child) .select2-selection {
    border-top-right-radius:0;
    border-bottom-right-radius:0
}
/* regole necessarie quando la select2 è una multi-select */
.input-group-multiselect {
    flex-wrap: nowrap;
    align-items: flex-start;
}
.input-group-multiselect .select2-container {
    flex: 1 1 auto;
}
.input-group-multiselect .btn {
    align-self: flex-start;
}


/* end select2 */

/********* datatables *********/

table.dataTable { font-family: "Nunito", sans-serif; }

table.dataTable thead th { font-weight: bold; }

/* padding per allineare elementi 'mostra elementi' e cerca */
.dataTables_length, .dataTables_filter {
    padding: 1rem 1rem;
    padding-bottom: 0;
}

/* quando si usa il wrapper table-card è necessario per visualizzare correttamente l'area della paginazione. E' override della regola: .table-card div.dataTables_wrapper .col-md-6 in app.css */
.table-card div.dataTables_wrapper .col-md-6 { width: 50%; }

/* quando si usa il wrapper table-card è necessario rimuovere i bordi sx e dx dalla prima e ultima colonna della tabella */
.table-card table.table-bordered.dataTable th:first-child,
.table-card table.table-bordered.dataTable td:first-child {
    border-left-width: 0;
}
.table-card table.table-bordered.dataTable th:last-child,
.table-card table.table-bordered.dataTable td:last-child {
    border-right-width: 0;
}

/* pulsante salvataggio colonne */
.colvis-save-state-custom {
    border-top: 1px solid !important;
    border-color: rgb(233, 235, 236) !important;
    display: flex !important;
    font-weight: 600;
    background: none !important;
}
.colvis-save-state-custom:hover {
    background-color: rgb(243, 246, 249) !important;
}

/* plugin responsive: usando la modalita 'column' la freccia non viene disegnata automaticamente da datatable quindi lo facciamo noi */
table.dataTable.dtr-column.collapsed > tbody > tr > td:nth-child(2)::before {
    display: inline-block;
    color: rgba(0, 0, 0, 0.5);
    content: "►";
    margin-right: 0.5em;
}
table.dataTable.dtr-column.collapsed > tbody > tr.parent > td:nth-child(2)::before {
    content: "▼";
}

/* footer per totali colonne */
.dt-footer-totali th {
    border: none;
    font-weight: bold;
}

/* barretta verticale laterale alle rows per le righe che usano checkbox di selezione */
table.dataTable tr:has(input.dt-row-check:checked) {
    background-color: #e6f4ff;
    box-shadow: inset 3px 0 0 var(--vz-primary);
}

table.dataTable tr:has(input.dt-row-check:checked) > td,
table.dataTable tr:has(input.dt-row-check:checked) > th {
    border-bottom: none !important;
}


/******** end datatables *********/

/* daterangepicker */

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--vz-primary);
}
.daterangepicker .ranges li.active {
    background-color: var(--vz-primary);
}

/* end daterangepicker */

/* flatpickr */

/* wrapper per problema focus in modals: lo settiamo a block perchè di default (inline-block) causa rimpicciolimento di input  */
.flatpickr-wrapper{ display: block; }

/* dropzone */
.dropzone .dz-preview .dz-progress { margin-top: 20px !important; }