html {
    --color-mwg-grey: #929497;
    --color-mwg-yellow: #f8a626;
    --color-mwg-yellow-light: #FFF9EF;
    /* --color-mwg-blue: #007dc4; original */
    /* --color-mwg-blue: #0088cc; */
    --color-mwg-blue: #0d6efd;
    --color-logblue: #1980B1;
    --color-logblue-dark: #14719c;
    --color-custom-grigio: #888;
    --color-custom-grigio-dark: #666;
    --custom-arancio: #f57c00;
    --custom-arancio-dark: #cf6800;
    --custom-verde: #43a047;
    --custom-verde-dark: #337a36;
    --color-btn-pages: #e6e6e6;
    --color-btn-pages-hover: #ddd;
    --color-nav-tabs-link-hover-border-color: #ddd;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    --bs-body-font-size: 12px;
    --bs-border-radius: 2px;
}

/*  */
.btn {
    --bs-btn-font-size: var(--bs-body-font-size);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-mwg-grey);
    --bs-btn-border-color: var(--color-mwg-grey);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-outlined-orange {
    --bs-btn-color: var(--custom-arancio);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--custom-arancio);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--custom-arancio);
    --bs-btn-hover-border-color: var(--custom-arancio);
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-green {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--custom-verde);
    --bs-btn-border-color: var(--custom-verde);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--custom-verde-dark);
    --bs-btn-hover-border-color: var(--custom-verde-dark);
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--custom-arancio);
    --bs-btn-border-color: var(--custom-arancio);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--custom-arancio-dark);
    --bs-btn-hover-border-color: var(--custom-arancio-dark);
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.nav-tabs {
    --bs-nav-tabs-border-width: var(--bs-border-width);
    --bs-nav-tabs-border-color: var(--bs-border-color);
    --bs-nav-tabs-border-radius: var(--bs-border-radius);
    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
    --bs-nav-tabs-link-active-bg: var(--color-custom-grigio);
}

.nav-link {
    color: var(--color-custom-grigio-dark);
    background: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
    color: #fff;
    background-color: var(--color-custom-grigio);
    border-color: var(--bs-nav-tabs-link-active-border-color);
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    isolation: isolate;
    color: var(--color-custom-grigio-dark);
    background-color: var(--color-nav-tabs-link-hover-border-color);
    border-color: var(--color-nav-tabs-link-hover-border-color);
}

/* tabs */
* .nav-item {
    cursor: pointer;
    display: flex;
    flex-flow: column nowrap;
    justify-content: end;
    min-height: 42px;
}

/* custom utilities */
.custom-fs-display {
    font-size: 32px;
    font-weight: 400;
}

.custom-fs-h1 {
    font-size: 28px;
}

.custom-h2 {
    font-size: 20px;
}

.custom-h3 {
    font-size: 16px;
}   

.custom-fs-body {
    font-size: 12px;
}

.custom-dropdown-icon.dropdown-toggle {
    display: flex;
    align-items: center;
}
.custom-dropdown-icon.dropdown-toggle::after {
    border: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    width: 8px;
    height: 8px;
}

.form-select {
    font-size: 12px;
}

.form-select.arancio {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* background-color: var(--bs-body-bg); */
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}

.form-control {
    font-size: 12px;
}

.custom-bg-bluelogo {
    background: var(--color-logblue);
    border-color: var(--color-logblue);
}
.custom-color-text {
    color: var(--color-logblue);
}
.custom-bg-verde {
    color: #fff;
    background: var(--custom-verde);
}
.custom-bg-grigio {
    background: var(--color-custom-grigio);
}
.custom-text-grigio {
    color: var(--color-custom-grigio-dark);
}
.custom-border-radius {
    border-radius: 2px;
}

.custom-fw-small {
    font-size: 0.95rem;
    font-weight: lighter;
}

/*  */
main {
    flex: 1 0 auto;
}

/* on login page when NOT logged */
main[data-is-logged="0"] {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

/* "Login Page" */

.login-container .login-btn {
    background-color: var(--color-logblue);
    border-color: var(--color-logblue);
    margin-block: 1rem;
    cursor: pointer;
}

/* .login-container .login-btn:hover,
.login-container .login-btn:active {
    background-color: #025802 !important;
    border-color: #025802 !important;
} */

.login-container>input {
    margin-block-end: 1rem;
    line-height: 2;
}

.login-btn-container {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-block: 1rem;
    position: relative;
}

.loader {
    display: none;
    position: absolute;
    top: 100%;
    width: 40px;
    height: 40px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--color-mwg-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.login-msg {
    display: none;
    /* color: red; */
}

/* tab: "importa" */
/* drag and drop */
#file-drop-zone {
    width: min(80ch, 90%);
    min-height: 20vh;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.darken {
    filter: opacity(0.5) grayscale(0.5);
}

.upload-icon {
    margin: 4px;
}

#file-drop-zone input[name="uploaded_file"] {
    height: 0;
    padding: 0;
    opacity: 0;
}

#file-drop-zone label[for="uploaded_file"] {
    display: inline;
    text-decoration: underline;
    line-height: 2;
    cursor: pointer;
}

/* #file-drop-zone label[for="uploaded_file"]:hover {
    background: linear-gradient(to bottom, transparent, lightgoldenrodyellow);
}

#file-drop-zone label[for="uploaded_file"]:active {
    box-shadow: inset 0 0 4px lightgoldenrodyellow;
} */

#upload-btn, #delete-selection, #clean-results-btn {
    display: none;
}

#upload-btn, #delete-selection, #clean-results-btn, #save-settings, #close-settings {
    min-width: 140px;
}
/* lists */
#drop-zone-results {
    list-style: none;
    /* list-style: url(; */
}

#drop-zone-results li::before {
    content: "";
    background-image: url("../img/file-icon.svg");
    background-size: contain;
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
    top: 4px;
    margin-right: 8px;
  }

li:not(.nav-item) {
    padding-inline-start: 1ch;
}

li::marker {
    font-family: "Noto Color Emoji", "Noto Sans", var(--bs-font-monospace);
}

/* results from server */
#server-results {
    width: min(80ch, 90%);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    margin: 2rem auto;
    border-radius: 1rem;
}

.upload-result li[data-status="1"] {
    list-style-type: "\00274c";
}

.upload-result li[data-status="0"] {
    list-style-type: "\002705";
}

.filter>label {
    font-weight: 500;
} 
.arancio {
    background: var(--custom-arancio);
    color: #fff;
}

.download-icon {
    padding: 2px;
    margin: 2px;
}

.drp-selected {
    display: none !important;
}

/* tabella */
.table-custom {
    min-width: 1280px;
    /* table-layout: fixed; */
    width: 100%;
    border-collapse: collapse;
}

.table-custom th {
    padding: 8px;
}

#table-listino {
    width: 1440px;
    table-layout: fixed;
}

/* fatture */
#table-fatture thead th[data-colname="fornitore"] {
    width: 26%;
}
#table-fatture thead th[data-colname="fattura"] {
    width: 6%;
}  
#table-fatture thead th[data-colname="data"] {
    width: 6%;
}  
#table-fatture thead th[data-colname="descrizione"] {
    width: 30%;
}  
#table-fatture thead th[data-colname="quantita"] {
    width: 6%;
}  
#table-fatture thead th[data-colname="um"] {
    width: 3%;
}  
#table-fatture thead th[data-colname="prezzo"] {
    width: 6%;
}  
#table-fatture thead th[data-colname="sconto"] {
    width: 5%;
}  
#table-fatture thead th[data-colname="prezzo_totale"] {
    width: 8%;
}
#table-fatture thead th[data-colname="iva"] {
    width: 4%;
}

/* listino */
#table-listino thead th[data-colname="fornitore"] {
    width: 30%;
}
#table-listino thead th[data-colname="descrizione"] {
    width: 30%
}
#table-listino thead th[data-colname="um"] {
    width: 3%;
}
#table-listino thead th[data-colname="prezzo"] {
    width: 6%;
}
#table-listino thead th[data-colname="iva"] {
    width: 4%;
}

/* ordinamenti */
.order-asc::after,.order-desc::after,.order-default::after {
    display: block;
    padding: 0;
    margin: 0;
    width: 18px;
    height: 18px;
}

.order-asc::after {
    content: url('../img/arrow-up.svg')
}
.order-desc::after {
    content: url('../img/arrow-down.svg')
}
.order-default::after {
    content: url('../img/doublearrows.svg')
}

/* navigazione pagine */
.table-nav {
    display: flex;
    justify-content: center;
}

.pagenum-control, .current-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    width: 36px;
    height: 36px;
    margin-inline: 3px;
    font-size: 14px;
}

.pagenum-control {
    background-color: var(--color-btn-pages);
}

.current-page {
    width: 10ch;
    font-size: 14px;
}

.table-nav .firstPage,
.table-nav .prevPage,
.table-nav .nextPage,
.table-nav .lastPage {
    cursor: pointer;

}

/* ---- */

.right {
    text-align: right;
}

.user-menu-impostazioni svg {
    padding: 4px;
    stroke: var(--color-logblue);
    cursor: pointer;
}

.dropdown-item > svg {
    padding: 4px;
}

.user-menu-logout:active > svg {
    stroke: var(--bs-dropdown-link-active-color);
}

#btn-dropdown-menu:hover, #btn-dropdown-menu:active, #btn-dropdown-menu:focus  {
    background-color: var(--color-logblue-dark);
}

/* pagina impostazioni */
.imp-sezione {
    display: flex;
    flex-direction: column;
}

.imp-salva {
    display: flex;
    align-items: center;
}

.save-msg {
    display: none;
}