.nf .historico .notas-fiscais {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    position: relative;
  }
  
  .nf .historico .notas-fiscais .nfList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
  
  .nf .historico .notas-fiscais .nfList .nota {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 24px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--ui-color-neutral-40);
    position: relative;
    background-color: #ffffff;
  }
  
  @media (max-width: 576px) {
    .nf .historico .notas-fiscais .nfList .nota {
      -webkit-box-align: stretch;
          -ms-flex-align: stretch;
              align-items: stretch;
      border: none;
    }
  }
  
  .nf .historico .notas-fiscais .nfList .nota .dados-nota {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 16px;
  }
  
  .nf .historico .notas-fiscais .nfList .nota .dados-nota .icon {
    width: 24px;
    height: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  
  @media (max-width: 576px) {
    .nf .historico .notas-fiscais .nfList .nota .dados-nota .icon {
      display: none;
    }
  }
  
  .nf .historico .notas-fiscais .nfList .nota .right-nota {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 16px;
  }
  
  .nf .historico .notas-fiscais .nfList .nota .right-nota .status {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    padding: 4px 16px;
    background-color: var(--ui-color-neutral-20);
    border-radius: 4px;
    font: var(--ui-text-font-p);
    font-weight: 500;
    white-space: nowrap;
  }
  
  .nf .historico .notas-fiscais .nfList .nota .right-nota .status.enviada {
    color: var(--ui-color-yellow-100);
    background-color: var(--ui-color-yellow-10);
  }
  
  .nf .historico .notas-fiscais .nfList .nota .right-nota .status.paga {
    color: var(--ui-color-green-100);
    background-color: var(--ui-color-green-10);
  }
  
  .nf .historico .notas-fiscais .nfList .nota .right-nota .status.cancelada {
    color: var(--ui-color-red-100);
    background-color: var(--ui-color-red-10);
  }
  
  .nf .historico .notas-fiscais .nfList .nota .right-nota .icone {
    margin: 0 0 0 auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .nf .historico .notas-fiscais .nfList .nota .right-nota .icone:hover {
    background-color: var(--ui-color-neutral-20);
  }
  
  .nf .historico .notas-fiscais .nfList .nota:hover {
    border-color: var(--ui-color-primary);
  }
  

  
  .nf .modal .control-file {
    width: 100%;
  }
  
  .nf .modal .control-file .area-upload {
    border: 1.6px dashed var(--ui-color-neutral-40);
    width: 100%;
    padding: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 8px;
    position: relative;
  }
  
  .nf .modal .control-file .area-upload .text {
    font: var(--ui-text-font-p);
    color: var(--ui-color-neutral-60);
  }
  
  .nf .modal .control-file .area-upload.ativo {
    border-color: var(--ui-color-primary);
    background-color: var(--ui-color-neutral-20);
  }
  
  .nf .modal .control-file .area-upload #nf_file {
    position: absolute;
    inset: 0;
    -webkit-appearance: none;
    opacity: 0;
    cursor: pointer;
  }
  
  .nf .modal .file {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: var(--ui-color-neutral-20);
  }
  
  .nf .modal .file .details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
  }
  
  .nf .modal .file .details .icon {
    width: 32px;
    height: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  
  .nf .modal .file .details .icon span {
    font-size: 32px;
  }
  
  .nf .modal .file .details .file-name .name {
    font: var(--ui-text-font-p);
    margin-bottom: -4px;
  }
  
  .nf .modal .file .details .file-name .size {
    font: var(--ui-text-font-mini);
  }
  
  .nf .modal .file .icone {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .nf .modal .file .icone span {
    font-size: 16px;
  }
  
  .nf .modal .file .icone:hover {
    background-color: #ededed;
  }
  
  .nf .modal .file-upload {
    display: none;
  }
  
  .nf .modal #btnEnviaNF::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 0%;
    background-color: #ffffff;
    opacity: .1;
    -webkit-transition: .16s;
    transition: .16s;
  }