/*inputFile.css*/
.volcano-input-file-placeholder-container i.fa-6x {
    display: none;
}
.volcano-input-file-thumbnail-container {
    padding: 0 0 60%!important;
    border-radius: 1rem;
    background: var(--color-sage-2);
    overflow: hidden;
    position: relative;
    aspect-ratio: 1.33;
}img.volcano-input-file-thumbnail {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     max-width: 100%;
     max-height: 100%;
     margin: auto;
     width: auto;
     height: auto;
 }.volcano-input-file-thumbnail-generic {
      aspect-ratio: 4/3;
      background-position: center;
      background-size: contain;
  }.volcano-input-file-name {
       font-weight: var(--font-weight-bold);
       text-align: center;
   }
.volcano-input-file-container  {
    /*display: flex;*/
    padding: 1rem;
    border: 2px dashed var(--color-gray-3);
    border-radius: 0.25rem;
    /*flex-direction: column;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    gap: 1rem;
    width: 100%;
    transition:all 0.2s linear;
}.volcano-input-file-container .volcano-input-file-empty-content {
     display: flex;

     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 1rem;
     width: 100%;
     transition:all 0.2s linear;
 }.input-file__title {
      font-weight: var(--font-weight-bold);
      margin-bottom: 0.25rem;
  }
.volcano-input-file-card .card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.input-file__helper {
    font-size: var(--text-size-XXS);
    line-height: var(--text-line-height-XXS);
    letter-spacing: var(--text-letter-spacing-XXS);
    color: var(--color-gray-5);
}.volcano-input-file-gallery {
     gap: 1.5rem;
     margin: 0;
 }.volcano-input-file-gallery> div {
      padding: 0;
  }.volcano-input-file-remove .icon__trash::before {
       width: 1rem;
       height: 1rem;
   }
.volcano-input-file-actions {
    position: relative;
    order: 5;
    bottom: 0;
}
/*drag*/

.volcano-input-file-container.volcano-input-file-dragover {
    background-color: transparent;
}.volcano-input-file-container::after,
 .volcano-input-file-container>div{ transition:opacity 0.2s linear;}
.volcano-input-file-container.volcano-input-file-dragover>div{ opacity:0}
.volcano-input-file-container::after { content:"Rilascia il file per caricare...";
    position: absolute;
    text-align: center;
    opacity: 0;
    top: 0;
    pointer-events: none;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--text-size-S);
    line-height: var(--text-line-height-S);
    letter-spacing: var(--text-letter-spacing-S);

}
.volcano-input-file-container.volcano-input-file-dragover::after {

    opacity: 1;

}
.volcano-input-file-container.volcano-input-file-dragover {

    background-color: var(--color-green-1);
    border-color: var(--color-green-4);
}

/*single item*/
/*multiple items*/
.volcano-input-file-container .card {
    border: 0;
    padding: 0;
    gap: 0.25rem;
}.volcano-input-file-remove {
     background: var(--color-white);
     border-radius: 100%;
     right: 0;
     width: 1.5rem;
     height: 1.5rem;
     display: flex;
     border: 2px solid transparent;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow-1);
 }a.volcano-input-file-show-link::before {
      content: "Visualizza";
  }a.volcano-input-file-show-link .fas,a.volcano-input-file-download-link {
       display:none
   }
@media(min-width: 576px){
    .volcano-input-file-container   {
        gap: 1.5rem;
        justify-content: space-between;
        border-radius: 1rem;
        padding: 2rem 1.5rem;
        flex-direction: row;
    }
    .volcano-input-file-container .volcano-input-file-empty-content {
        gap: 1.5rem;
        justify-content: space-between;
        flex-direction: row;
    }.volcano-input-file-placeholder-container {
         padding: 0 1rem;
     }
}



/*PROGRESS*/

.progress {
    border-radius: 1rem;
    height: 0.25rem;
    background: var(--color-sage-2);
}
.progress-bar {
    border-radius: 1rem;
    background: var(--color-green-2);
}