/*MATERIAL SYMBOLS*/

:root {
    --sfondo: #f4f9ff;
    --primary: #5f8ad8;
    --secondary: #2f4873;
    --text: #78869a
}

@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('Font/MaterialSymbols/material-symbols-outlined.ttf')
    format('truetype');
}

@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('Font/MaterialSymbols/materials-symbols-rounded.ttf')
    format('truetype');
}

@font-face {
  font-family: 'Material Symbols Sharp';
  src: url('Font/MaterialSymbols/material-symbols-sharp.ttf') format('truetype');
}

* {user-select: none}

/* Regole comuni per tutti i tipi di Material Symbols */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Dimensione predefinita, puoi modificarla */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
}

/* Material Symbols Outlined */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
}

/* Material Symbols Rounded */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
}

/* Material Symbols Sharp */
.material-symbols-sharp {
  font-family: 'Material Symbols Sharp';
}

/* Opzioni di personalizzazione */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
  /* Puoi modificare queste proprietà per personalizzare l'aspetto */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Classi di utilità per la personalizzazione */
.icon-fill {
  font-variation-settings: 'FILL' 1;
}

.icon-weight-300 {
  font-variation-settings: 'wght' 300;
}

.icon-weight-700 {
  font-variation-settings: 'wght' 700;
}

.icon-grad-200 {
  font-variation-settings: 'GRAD' 200;
}

.icon-size-20 {
  font-variation-settings: 'opsz' 20;
  font-size: 20px;
}

.icon-size-40 {
  font-variation-settings: 'opsz' 40;
  font-size: 40px;
}

/*MATERIAL SYMBOLS END*/

span:has( .sel) {
    background-color: #ecb5b5 !important;
}

span:has( .tar) {
    background-color: #ece5b5 !important;
}



/*MODAL (SCANNER)*/
.modal-header h4.modal-title {
    font-weight: 300;
}

.modal-body label {
    font-weight: 400;
}

.modal-open {
    display: block;
    overflow: scroll;
}

.modal {
    bottom: 0;
    display: none;
    left: 0;
    margin: 0 !important;
    outline: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}

.modal,
.modal-backdrop.fade.show,
.modal-open {
    padding-right: 0 !important;
}

.modal-open {
    overflow: auto !important;
    padding: 0 !important;
}

    .modal-open .modal {
        overflow-x: hidden;
        overflow-y: auto;
        padding-right: 0 !important;
    }

.modal-dialog {
    margin: 0.5rem;
    pointer-events: none;
    position: relative;
    width: auto;
}

.modal.fade .modal-dialog {
    transform: translateY(-25%);
    transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: translate(0);
    background: white;
}

@media screen and (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none;
    }
}

.modal-dialog-centered {
    align-items: center;
    display: flex;
    min-height: calc(100% - 1rem);
}

.modal-content {
    background-clip: padding-box;
    background-color: var(--white);
    border: 1px solid #e9edf4;
    border-radius: 3px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    outline: 0;
    pointer-events: auto;
    position: relative;
    width: 100%;
}

.modal-backdrop {
    background-color: #000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1040;
}

    .modal-backdrop.fade {
        opacity: 0;
    }

    .modal-backdrop.show {
        opacity: 0.5;
    }

.modal-header {
    align-items: flex-start;
    border-bottom: 1px solid #e9edf4;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

    .modal-header .btn-close {
        margin: -1rem -1rem -1rem auto;
        padding: 1rem;
    }

.modal-title {
    line-height: 1.5;
    margin-bottom: 0;
}

.modal-body {
    flex: 1 1 auto;
    padding: 1rem;
    position: relative;
}

    .modal-body p:last-child {
        margin-bottom: 0;
    }

.modal-footer {
    align-items: center;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
}

    .modal-footer > :not(:first-child) {
        margin-left: 0.25rem;
    }

    .modal-footer > :not(:last-child) {
        margin-right: 0.25rem;
    }

.modal-scrollbar-measure {
    height: 50px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
    width: 50px;
}

@media (min-width: 576px) {
    .modal-dialog {
        margin: 1.75rem auto;
        max-width: 500px;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }

    .modal-sm {
        max-width: 300px;
    }
}

@media (min-width: 992px) {

    .modal-lg,
    .modal-xl {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width: 1140px;
    }
}

.model-wrapper-demo {
    background: #f6f6fb;
    padding: 50px 0;
}

.pos-static {
    position: static;
}

.modal.animated .modal-dialog {
    transform: translate(0);
}

.modal.effect-scale .modal-dialog {
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.3s;
}

.modal.effect-scale.show .modal-dialog {
    opacity: 1;
    transform: scale(1);
}

.modal.effect-slide-in-right .modal-dialog {
    opacity: 0;
    transform: translateX(20%);
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.modal.effect-slide-in-right.show .modal-dialog {
    opacity: 1;
    transform: translateX(0);
}

.modal.effect-slide-in-bottom .modal-dialog {
    opacity: 0;
    transform: translateY(20%);
    transition: all 0.3s;
}

.modal.effect-slide-in-bottom.show .modal-dialog {
    opacity: 1;
    transform: translateY(0);
}

.modal.effect-newspaper .modal-dialog {
    opacity: 0;
    transform: scale(0) rotate(2turn);
}

.modal.effect-newspaper .modal-dialog,
.modal.effect-newspaper.show ~ .modal-backdrop {
    transition: all 0.5s;
}

.modal.effect-newspaper.show .modal-dialog {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.modal.effect-fall {
    perspective: 1300px;
}

    .modal.effect-fall .modal-dialog {
        opacity: 0;
        transform: translateZ(600px) rotateX(20deg);
        transform-style: preserve-3d;
    }

    .modal.effect-fall.show .modal-dialog {
        opacity: 1;
        transform: translateZ(0) rotateX(0deg);
        transition: all 0.3s ease-in;
    }

.modal.effect-flip-horizontal {
    perspective: 1300px;
}

    .modal.effect-flip-horizontal .modal-dialog {
        opacity: 0;
        transform: rotateY(-70deg);
        transform-style: preserve-3d;
        transition: all 0.3s;
    }

    .modal.effect-flip-horizontal.show .modal-dialog {
        opacity: 1;
        transform: rotateY(0deg);
    }

.modal.effect-flip-vertical {
    perspective: 1300px;
}

    .modal.effect-flip-vertical .modal-dialog {
        opacity: 0;
        transform: rotateX(-70deg);
        transform-style: preserve-3d;
        transition: all 0.3s;
    }

    .modal.effect-flip-vertical.show .modal-dialog {
        opacity: 1;
        transform: rotateX(0deg);
    }

.modal.effect-super-scaled .modal-dialog {
    opacity: 0;
    transform: scale(2);
    transition: all 0.3s;
}

.modal.effect-super-scaled.show .modal-dialog {
    opacity: 1;
    transform: scale(1);
}

.modal.effect-sign {
    perspective: 1300px;
}

    .modal.effect-sign .modal-dialog {
        opacity: 0;
        transform: rotateX(-60deg);
        transform-origin: 50% 0;
        transform-style: preserve-3d;
        transition: all 0.3s;
    }

    .modal.effect-sign.show .modal-dialog {
        opacity: 1;
        transform: rotateX(0deg);
    }

.modal.effect-rotate-bottom {
    perspective: 1300px;
}

    .modal.effect-rotate-bottom .modal-dialog {
        opacity: 0;
        transform: translateY(100%) rotateX(90deg);
        transform-origin: 0 100%;
        transform-style: preserve-3d;
        transition: all 0.3s ease-out;
    }

    .modal.effect-rotate-bottom.show .modal-dialog {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }

.modal.effect-rotate-left {
    perspective: 1300px;
}

    .modal.effect-rotate-left .modal-dialog {
        opacity: 0;
        transform: translateZ(100px) translateX(-30%) rotateY(90deg);
        transform-origin: 0 100%;
        transform-style: preserve-3d;
        transition: all 0.3s;
    }

    .modal.effect-rotate-left.show .modal-dialog {
        opacity: 1;
        transform: translateZ(0) translateX(0) rotateY(0deg);
    }

.modal.effect-just-me .modal-dialog {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s;
}

.modal.effect-just-me .modal-content {
    background-color: #16192f;
    border: 1px solid #4d4e50;
    padding: 0 9px;
}

.modal.effect-just-me .btn-close {
    color: var(--white);
    text-shadow: none;
}

.modal.effect-just-me .modal-header {
    background-color: transparent;
    border-bottom-color: hsla(0, 0%, 100%, 0.1);
    padding-left: 0;
    padding-right: 0;
}

    .modal.effect-just-me .modal-header h6 {
        color: var(--white);
        font-weight: var(--font-weigth-semibold);
    }

.modal.effect-just-me .modal-body {
    color: hsla(0, 0%, 100%, 0.8);
    padding-left: 0;
    padding-right: 0;
}

    .modal.effect-just-me .modal-body h6 {
        color: var(--white);
    }

.modal.effect-just-me .modal-footer {
    background-color: transparent;
    border-top-color: hsla(0, 0%, 100%, 0.1);
    padding-left: 0;
    padding-right: 0;
}

.modal.effect-just-me.show ~ .modal-backdrop {
    opacity: 0.96;
}

.modal.effect-just-me.show .modal-dialog {
    opacity: 1;
    transform: scale(1);
}

.modal-fullscreen {
    height: 100%;
    margin: 0;
    max-width: none;
    width: 100vw;
}
/*MODAL (SCANNER) END*/


/*Sfondo*/
.bg-ecohub-100 {
    background-color: var(--sfondo);
}

/*Bottoni*/
.bg-ecohub-600 {
    background-color: var(--primary);
}

/*Bottoni*/
.border-ecohub-600 {
    border: var(--primary);
}

.focus\:border-ecohub-600:focus {
    border: var(--primary);
}

/*Colore bottoni*/
.text-ecohub-600 {
    color: #5f8ad8 !important;
}

/*Titolo*/
.text-ecohub-800 {
    color: var(--secondary);
}

/*bg Titolo*/
.bg-ecohub-800 {
    background-color: var(--secondary);
}

.hover\:bg-ecohub-800:hover {
    background-color: var(--secondary);
}

/*testi normali*/
.text-ecohub-550 {
    color: var(--text);
}

/*SCROLLBAR design   INIZIO*/
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*:hover::-webkit-scrollbar {
    display: inline
}

*::-webkit-scrollbar-track {
    background-color: none;
}

*::-webkit-scrollbar-thumb {
    background-color: #5f8ad8;
    border: 1px solid #5f8ad8;
    border-radius: 10px;
}
/*SCROLLBAR design   FINE*/





#signature-pad {
    display: flex;
    flex-direction: column;
}

.signature-pad--body {
    flex: 1;
    min-height: 200px;
}

#cnvFirma {
    width: 100%;
    height: 100%;
}

@media (max-width: 640px) {

    /* Il contenitore del modal diventa full height controllato */
    #signatureModal > div {
        height: 60vh;
        max-height: 60vh;
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }

    /* Il wrapper della firma si espande */
    #signature-pad {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 50vh;
    }

    /* body firma prende tutto lo spazio possibile */
    .signature-pad--body {
        flex: 1;
        min-height: 0;
    }

    /* canvas più adattivo */
    #cnvFirma {
        height: 100% !important;
    }

    /* footer sempre visibile */
    .signature-pad--footer {
        flex-shrink: 0;
    }
}