<!DOCTYPE html>
<html>

<style>
  .bordaTabelaItensInfo {
    padding: 10px;
    border: solid #e0e4e6;
    border-radius: 4px;
    border-width: 1px;
  }

  #tabelaMateriaisInfo tbody td,
  #tabelaMateriaisInfo thead {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  #tabelaMateriaisInfo tr td,
  #tabelaMateriaisInfo th {
    padding: 4px 12px;
  }

  .error {
    color: #dc3545 !important;
  }

  #divMateriaisInfo,
  #divProdutosInfo,
  #divServicosInfo {
    padding-right: 1px;
    padding-left: 1px;
  }

  .containerItemParcialmenteAprovado {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    border-top: 1px solid #e9ecef !important;
    border-bottom: 1px solid #e9ecef !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    min-height: 100px;
    gap: 0.25rem;
  }

  .destaque-em-vermelho {
    color: var(--font-color);
    animation: destaqueEmVermelho 0.6s infinite alternate;
  }

  @keyframes destaqueEmVermelho {
    0% {
      color: var(--font-color);
    }

    50% {
      color: red;
    }

    100% {
      color: var(--font-color);
    }
  }
</style>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link
    rel="stylesheet"
    href="../plugins/fontawesome-free/css/all.min.css?versao=3.255.7.1" />

  <link rel="stylesheet" href="../dist/css/adminlte.min.css?versao=3.255.7.1" />
  <link rel="stylesheet" href="../dist/css/custom.css?versao=3.255.7.1" />
  <link rel="stylesheet" href="../dist/css/sisplan.css?versao=3.255.7.1" />
  <link
    rel="stylesheet"
    type="text/css"
    href="../plugins/datatables-keytable/css/keyTable.bootstrap4.min.css?versao=3.255.7.1" />
  <link
    rel="stylesheet"
    href="../plugins/toastr/toastr.min.css?versao=3.255.7.1" />
  <link
    rel="stylesheet"
    href="../plugins/fontawesome-free/css/all.min.css?versao=3.255.7.1" />
  <link rel="shortcut icon" href="../favicon.ico" />
  <link
    rel="stylesheet"
    type="text/css"
    href="../dist/css/driver.min.css?versao=3.255.7.1" />
  <link rel="stylesheet" href="../dist/css/jquery-ui.css?versao=3.255.7.1" />
  <link
    rel="stylesheet"
    href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css?versao=3.255.7.1" />
  <link
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700"
    rel="stylesheet" />
  <link
    rel="stylesheet"
    type="text/css"
    href="../dist/css/bootstrap-tagsinput.css?versao=3.255.7.1" />
</head>

<body>
  <div
    class="modal fade"
    data-backdrop="static"
    id="modalItensParcialmenteAprovados"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalItensParcialmenteAprovados"
    aria-hidden="true"
    style="top: 10%">
    <div class="modal-dialog modal-md">
      <div class="modal-content" style="max-height: 60vh !important">
        <div class="modal-header">
          <h4 class="modal-title">Itens Parcialmente Aprovados</h4>
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p class="text-md">O(s) seguinte(s) item(ns) precisa(m) da aprovação de outro(s) usuário(s) para ser(em) liberado(s):</p>
          <div class="flex flex-wrap flex-column" style="gap: 3px" id="containerItensParcialmenteAprovados"></div>
        </div>
        <div class="modal-footer justify-content-start">
          <button
            class="btn bg-gradient-success btn-sisp"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
            id="btnOk">
            Confirmar
          </button>
        </div>
      </div>
    </div>
  </div>
</body>
<?php
include_once('../../modais.php')
?>

</html>