{% load static %}
<!DOCTYPE html>
<html lang="es">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
  <!-- BEGIN META -->
  <meta charset="utf-8">
  <meta name="keywords" content="venta de material, compra de material,material cusco,venta de oro, compra de oro, oro, cusco oro">
  <meta name="description" content="Sistema integral de transferencias, giros, compre y venta de material"> 

  <title>
      {% block titulo %}
      {% endblock titulo %}
  </title>
  <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet"/> 
 <!-- <link href="{% static 'bootstrap/css/docs.min.css' %}" rel="stylesheet"/>-->
  <link href="{% static 'bootstrap/css/bootstrap-datetimepicker.css' %}" rel="stylesheet"/>
  <link href="{% static 'bootstrap/css/sweet-alert.css' %}" rel="stylesheet">
  <link href="{% static 'material/css/kc.fab.css' %}" rel="stylesheet"/>
  <link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet"/> 
  <!--
  <link href="{% static 'css/nav.css' %}" rel="stylesheet"/>
  <link href="{% static 'css/card.css' %}" rel="stylesheet"/>
  -->
  <link href="{% static 'css/waitMe.css' %}" rel="stylesheet"/>
  <link href="{% static 'css/WebTour.css' %}" rel="stylesheet"/>
  
  <script src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
  <link href="{% static 'selectize/css/selectize.bootstrap3.css' %}" rel="stylesheet"/> 
  <script src="{% static 'selectize/js/standalone/selectize.min.js' %}"></script>
  <script src="{% static 'bootstrap/js/Moment.js' %}"></script>
  <!--
  <script src="{% static 'bootstrap/js/ie-emulation-modes-warning.js' %}"></script>
  -->
  <script src="{% static 'material/js/kc.fab.min.js' %}"></script> 
  <script src="{% static 'bootbox/js/bootbox.min.js' %}"></script>

  <script src="{% static 'bootstrap/js/jquery.numeric.js' %}"></script>
  <script src="{% static 'bootstrap/js/ie10-viewport-bug-workaround.js' %}"></script>

  <script src="{% static 'bootstrap/js/validator.js' %}"></script>
  <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
  <script src="{% static 'bootstrap/js/bootstrap-datetimepicker.js' %}"></script>
  <script src="{% static 'bootstrap/js/sweet-alert.js' %}"></script>
  <script src="{% static 'js/printThis.js' %}"></script>
  <script src="{% static 'js/jspdf.min.js' %}"></script>
  <script src="{% static 'js/jspdf.plugin.autotable.js' %}"></script>
  <!--
  <script src="{% static 'js/jquery.maskedinput.js' %}"></script>
  <script src="{% static 'js/reniec-sunat-js.min.js' %}"></script>
  <script src="{% static 'js/apiLoad.js' %}"></script>
  -->
  <script src="{% static 'js/waitMe.min.js' %}"></script>
  <script src="{% static 'js/bootstrap3-typeahead.min.js' %}"></script>
  <script src="{% static 'js/WebTour.min.js' %}"></script> 
  <!--
  <script src="{% static 'js/diferencias.min.js' %}"></script> 
  -->
  <script type="text/javascript">
      // para los submenus
       $(document).ready(function(){
          $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
            event.preventDefault(); 
            event.stopPropagation(); 
            $(this).parent().siblings().removeClass('open');
            $(this).parent().toggleClass('open');
          });
        });
      
  </script>
  <style type="text/css">
  body{
     background-color: #fff;
    }
    /*forms*/
    .form-control{
      height: 28px;
    }
    .form-group{
      margin-bottom: 0px;
    }
    /*table*/
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
      padding: 4px;
      line-height: 1.42857143;
      vertical-align: top;
      border-top: 1px solid #ddd;
    }
    /*nav bar*/
    .navbar-inverse .navbar-nav>li>a {
        color: #e7e7e7;
    }
    /**/
    @media (max-width: 767px){
      .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
          color: #e7e7e7;
      }
    }
    /*panel head*/
    .panel-heading {
        padding: 5px 15px;
    }
    /* badge */
    .badge {
        background-color: #b71c1c;
        border: 1px solid white;
    }
    /*panel heading*/
    .panel-default>.panel-dolar {
        color: #fff;
        background-color: #00838f;
    }
    .panel-default>.panel-material {
        color: #000;
        background-color: #ffc107;
    }
    .panel-default>.panel-transferencia {
        color: #fff;
        background-color: #3f3479;
    }
    .panel-default>.panel-inverse {
        color: #fff;
        background-color: #333;
    }
    .alert-saldos {
        /*border-color: #a5a5a5;*/
        padding: 0px;
        padding-left: 10px;
        padding-right: 30px;
        margin-bottom: 0px;
    }
    .label-saldo{
      border-radius: 15px;
      font-size:17px;
    }
    /*
    .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
        color: #fff;
        background-color: rgba(0,0,0,0.5);
    }
    .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
        color: #fff;
        background-color: red;
    }
    */
  </style>

<link href="{% static 'bootstrap/css/tema-tabla11.css' %}" rel="stylesheet">
</head>
<body class="body-white"> 
  <nav class="navbar navbar-default navbar-fixed-top z-depth-1" style="{% ifnotequal  tipoSis 'material' %} background-color:#bbdefb; {% else %} background-color:#c43e00; {% endifnotequal %}">
    <div> 
      <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/" style="padding: 5px 3px;"><img src="{% static 'img/golden-logo.png' %}" width="40px"></a>


      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
        {% ifnotequal tipoSis 'material' %}
        <ul class="nav navbar-nav"> 
        {% ifnotequal baseExt 'externa' %}
          {% ifnotequal tipoSis 'material'  %} 
             <li class="dropdown" id="navTrans">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="badge" id="not"></span><strong>Transferencia</strong><span class="caret"></span></a>
              <ul class="dropdown-menu">
                {% ifnotequal cajaTe 'si' %}
                  {% ifequal tg 'si'%}
                    <li class="dropdown dropdown-submenu" id="navST"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Solicitudes de Transferencias <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li id="navCrearTrans"><a href="/CrearTransferencia/">Crear Transferencia</a></li>
                        <li id="navCrearTransGlobal"><a href="/CrearTransferenciaGlobal/">Crear Transferencia Global</a></li>
                      </ul>
                    </li>
                  {% else %}
                    <li id="navCrearTrans"><a href="/CrearTransferencia/"> Crear Transferencia</a></li>
                  {% endifequal%}
                <li id="navTransCreadas"><a href="/Transferencias/"> Transferencias Creadas</a></li>

                {% else %}
                <li id="navTransCreadas"><a href="/Transferencias/"> Transferencias Creadas</a></li>
                  {% ifequal tg 'si'%}
                    <li id="navCrearTransGlobal"><a href="/CrearTransferenciaGlobal/">Crear Transferencia Global</a></li>
                  {% endifequal%}
                {% endifnotequal %}
                <li id="navTransPagadas"><a href="/TransPagadas/">Transferencias Pagadas</a></li>
                <li class="divider"></li>

                <li id="navTransRecibidas"><a href="/Transfe_Recibidas_alterna/"><span class="badge" id="not1"></span> Transferencias Recibidas</a></li>
                {% ifequal alterna 'si'%}
                <!--
                  <li id="navTransRecibidas-alterna"><a href="/Transfe_Recibidas_alterna/"> <span class="badge" id="not1"></span> Transferencias Recibidas</a></li>-->
                {% else %}
                <!--
                  <li id="navTransRecibidas"><a href="/TransRecibidas/"><span class="badge" id="not1"></span> Transferencias Recibidas</a></li>-->
                  <!--
                  <li id="navTransRecibidas"><a href="/Transfe_Recibidas_post_tem/"><span class="badge" id="not1"></span> Transferencias Recibidas</a></li>-->
                {% endifequal%}
                 
                {% ifequal tg 'si'%}
                  <!--
                  <li id="navTransRecibidasGlobal"><a href="/Transfe_Recibidas_global/"><span class="badge" id="not_tg"></span> Transferencias Recibidas Oficinas Globales</a></li>-->
                  <li id="navTransCreadasGlobal"><a href="/Transfe_Creadas_global/"><span class="badge" id="not_tcg"></span> Transferencias Creadas Oficinas Globales</a></li>
                {% endifequal%}
                 {% ifequal tgc 'si'%}
                  
                <li id="navTransCreadasGlobal"><a href="/Transfe_Creadas_global/"><span class="badge" id="not_tcg"></span> Transferencias Creadas Oficinas Globales</a></li>
                {% endifequal%}
              </ul>
            </li>
          {% endifnotequal%}
        {% else %}

          <li class="dropdown" id="navTrans">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="badge" id="not"></span><strong>Transferencia</strong><span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li id="navCrearTrans"><a href="/CrearTransferencia_base_externo/"> Crear Transferencia</a></li>
                <li id="navTransCreadas"><a href="/Transfe_CreadasBE_tem/"> Transferencias Creadas</a></li>
                <li id="navTransPagadas"><a href="/Transfe_PagadasBE_tem/">Transferencias Pagadas</a></li>
                <li class="divider"></li>
                <li id="navTransRecibidas"><a href="/Transfe_RecibidasBE_tem/"><span class="badge" id="not1"></span> Transferencias Recibidas</a></li>
              </ul>
          </li>

        {% endifnotequal %}
          {% ifequal st_banco 'si' %}
          <li id="navTransBanco" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
              {% if OfCentral == 'si' or procesar_agente == 'si' %}
                {% ifnotequal st_procesar None %}
                    {% ifnotequal st_procesar '0' %}
                      <span class="badge">{{ st_procesar }}</span>
                    {% endifnotequal %}
                {% endifnotequal %}
              {% else %}
                {% ifnotequal st_procesar_ca None %}
                    {% ifnotequal st_procesar_ca '0' %}
                      <span class="badge">{{ st_procesar_ca }}</span>
                    {% endifnotequal %}
                {% endifnotequal %}
              {% endif %}
            <strong>Trans. Banco</strong><span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li id="navTransBancoCrear"><a href="/CrearTransferenciaBancos/"> Crear Transferencia Banco</a></li>
              <li id="navTransBancoCreadas"><a href="/Transferencias_bancos/">Transferencia Bancos Creadas</a></li>
              {% ifequal procesar_St 'si' %}
              <li class="divider"></li>
              <li id="navTransBancoProcesar"><a href="/ProcesarTransferenciaBancos/">
                {% if OfCentral == 'si' or  procesar_agente == 'si' %}
                  {% ifnotequal st_procesar None %}
                      {% ifnotequal st_procesar '0' %}
                        <span class="badge">{{ st_procesar }}</span>
                      {% endifnotequal %}
                  {% endifnotequal %}
                {% else %}
                  {% ifnotequal st_procesar_ca None %}
                      {% ifnotequal st_procesar_ca '0' %}
                        <span class="badge">{{ st_procesar_ca }}</span>
                      {% endifnotequal %}
                  {% endifnotequal %}
                {% endif %}
                Procesar Transferencia Banco</a></li>
              {% endifequal %}
              {% if retiro_st == 'si' %}
              <li class="divider"></li>
              <li id="navRetiroTransBancoCrear"><a href="/crear_retiro_transferencia/"> Crear Retiro Banco</a></li>
              <li id="navRetiroTransBancoCreadas"><a href="/listaRetirostransferencia/">Retiros Bancos Creadas</a></li>
              {% endif %}
            </ul>
          </li>
          {% endifequal %}
          <li id="navC" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
            {% ifnotequal dinero_re None %}
                {% ifnotequal dinero_re '0' %}
                  <span class="badge">{{ dinero_re }}</span>
                {% endifnotequal %}
            {% endifnotequal %}<strong>Caja</strong><span class="caret"></span></a>
            <ul class="dropdown-menu">
              {% ifnotequal cajaTe 'si' %}
              <li id="navRegistrarIngreso"><a href="/RegistroIngreso/"> Registrar Ingreso</a></li>
              <li id="navListadoIngreso"><a href="/Ingresos_tem/"> Listado de Ingresos</a></li>
              {% ifequal egre 'si' %}
              <li id="navRegistrarEgreso"><a href="/RegistroEgreso/">Registrar Egreso</a></li>
              {% else %}
                {% ifequal egre_sub 'si' %}
                  <li id="navRegistrarEgreso"><a href="/RegistroEgreso/">Registrar Egreso</a></li>
                {% endifequal %}
              {% endifequal %}
              <li id="navListadoEgreso"><a href="/Egresos_tem/"> Listado de Egresos</a></li>
              <li class="divider"></li>
              {% endifnotequal %}
              <li id="navlistaIE"><a href="/ListadoIngresoEgreso_tem/">Movimientos Caja</a></li>
              <li class="divider"></li>
              <li class="dropdown dropdown-submenu" id="navEnvioDinero"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> Envio de Dinero<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li id="navEnvioOficina"><a href="/EnvioOficina/"> Envio a otra Oficina</a></li>
                  <li id="navEnvioCaja"><a href="/habilitarCajaOperador/"> Envio Interno</a></li>
                  <li class="divider"></li>
                  <li id="navListadoEnvios"><a href="/ListadoEnviosSaldo_tem/"> Listado de Envios</a></li>
                </ul>
              </li>
              
               <li class="dropdown dropdown-submenu" id="navRecepcionDinero"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
               {% ifnotequal dinero_re '0' %}  
                  <span class="badge">{{ dinero_re }}</span>
                {% endifnotequal %} Recepción de Dinero<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li id="navRecibirDinero"><a href="/saldoRecibido/"> Recibir Dinero</a></li>
                  <li class="divider"></li>
                  <li id="navListadoRecepcionDinero"><a href="/listasaldoRecibido_total_tem/"> Listado de Recepciones</a></li>
                </ul>
              </li>

            </ul>
          </li>

          {% ifnotequal FCierre 'si' %}
          <li class="dropdown" id="navIE">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>Administrar</strong><span class="caret"></span>
            </a>
            
            <ul class="dropdown-menu animation-slide">
            {% ifnotequal alterna 'si'%} 
              {% ifequal saldoalt 'si' %}
              <li id="navCsaldo"><a href="/consultaSaldoOficina/">Saldo de todas las Cajas</a></li>
              {% endifequal %}
              {% ifequal OfCentral 'si' %}
              <li id="navCsaldo"><a href="/consultaSaldoOficina/">Saldo de Cajas</a></li>
              <li id="navDeuda"><a href="/Deuda_Oficinas_tem/">Saldos de Oficinas</a></li>
              <li id="navPorCobrar"><a href="/ListadoHabilitaciones_tem/">Habilitaciones por Cobrar</a></li>
              <div class="dropdown-divider"></div>
              <li id="navNuevaLiqui"><a class="dropdown-item" href="/LiquidacionBase/">Nueva liquidacion</a></li>
              <li id="navListaLiqui"><a class="dropdown-item" href="/listadoLiquidaciones/">Ver Liquidaciones</a></li>
              <li class="divider"></li>

              <li id="navACtaCtes"> <a  href="/ListadoAutorizarCtaCtes/">Autorizar Peticiones Cta Cte</a></li>
              <li id="navAutorizaST"> <a  href="/Transfe_Autorizacion/">Desbloquear Transferencias</a></li>
              <li id="navAutorizaSTBancos"> <a  href="/transfe_autorizacion_banco/">Desbloquear Trnas Bancos</a></li>
              <li id="navAutorizaCtaCte"> <a  href="/cuenta_cte_main_autorizacion/">Desbloquear Cta Cte</a></li>

              <li class="divider"></li>

              <li id="navOpeSunat"> <a  href="/listado_operaciones_sunat/">Operaciones sunat</a></li>
              <li class="divider"></li>
              {% endifequal %} 
            {% endifnotequal %}
              {% ifequal ofiAso 'si' %}
                <li id="navDeudaAsoc"><a href="/Deuda_Oficinas_asociado_tem/">Saldos de Bases Asociado</a></li>
              {% endifequal %}

              <li id="navCierreCaja"><a href="/cierre_caja/">Cerrar Caja</a></li>
              <li id="navHistorialCierre"><a href="/ListaCierres_caja/">Listado de Cierres</a></li>

              {% ifequal tg 'si'%}
              <li class="divider"></li>
              <li id="navGlolCierre"><a href="/cierres_globales_tem/">Cierre Cajas Globales</a></li>
              {% endifequal %}

              {% ifequal perAutorizarRet 'si' %}
              <!--
              <li class="divider"></li>

              <li id="navAutorizar"><a href="/Autorizaciones_ret_st_personal_tem/">Autorizar P./T.</a></li>
              <li id="navAutorizarComi"><a href="/Autorizaciones_comi_st_personal_tem/">Autorizar Comision ST</a></li>
              <li id="navAutorizarInt"><a href="/Autorizaciones_ret_in_personal_tem/">Autorizar Retiros Intercambio</a></li>
              -->
              {% endifequal %} 
              {% ifequal OfCentral 'si' %}
              
              {% ifnotequal alterna 'si'%} 
              <!--
              <li id="navAExTransferencias">
                  <a  href="/Autorizaciones_extorno_st_personal_tem/"> Autorizar Extorno ST</a>
              </li>
               <li id="navADXT">
                  <a  href="/Autorizaciones_x_tardanza_personal/"> Autorizar Desbloqueo por Tardanza</a>
              </li>
              <li id="navaut_anulardolar"><a  href="/Autorizaciones_anulacion_dolar_personal_tem/"> Autorizar Anulacion de Dolares</a></li>

              <li id="navDeuda"><a href="/ListadoAutorizarCtaCtesOperador_view/">
              {% ifnotequal num_peticiones None %} 
                 {% ifnotequal num_peticiones '0' %}
                      <span class="badge" id="not"> {{ num_peticiones }} </span> 
                  {% endifnotequal %}
              {% endifnotequal %}

              Autorizar Peticiones Ctas Ctes</a></li>
              -->
              {% endifnotequal%}
              {% endifequal %}
              
              {% ifequal vso 'si' %}
              <li class="divider"></li>
              <li id="navDeuda"><a href="/Deuda_Oficinas_tem/">Saldos de Oficinas</a></li>
              {% endifequal %} 

            </ul>
          </li>
          {% endifnotequal %}

          {% ifnotequal cajaTe 'si' %}
          <li class="dropdown" id="navInter">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="badge" id="notIn"></span><strong>Intercambio</strong><span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li id="navCrearInter"><a href="/CrearIntercambio/"> Crear Intercambio</a></li>
              <li id="navInterCreadas"><a href="/Intercam_Creadas_tem/"> Intercambios Creadas</a></li>
              <li id="navInterPagadas"><a href="/Intercam_Pagadas_tem/">Intercambios Pagadas</a></li>
              <!--
              <li id="navInterPagadasAde"><a href="/Intercam_Pagadas_adelanto_tem/">Intercambios Pagadas Adelanto</a></li>
              -->
              {% ifnotequal ver_inter_re 'no' %}
              <li class="divider"></li>
              <li id="navInterRecibidas"><a href="/Intercam_Recibidas_tem/"><span class="badge" id="notInt"></span> Intercambios Recibidas</a></li>
              {% endifnotequal %}
            </ul>
          </li>

          {% endifnotequal %}

          <li class="dropdown" id="navCuentas_main">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>Cuentas</strong><span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Cuenta Corriente<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li id="navCrearCte_main"><a href="/crear_cta_ahorro_cte_main/">Crear Cuenta Corriente</a></li>
                  <li id="navListaCtes_main"><a href="/Listado_CuentasCtes_tem_main/"> Listado de Cuentas Corrientes</a></li>
                </ul>
              </li>
            </ul>
          </li>

        </ul>
        {% endifnotequal%}

        {% ifequal cajaDo 'si' %}
        <ul class="nav navbar-nav" style="background-color: #12e535;">
          <li class="dropdown" id="navDolares">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <strong>Dolares</strong><span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li id="navCompraDolar"><a href="/Comprar_dolar/"> Comprar Dolares</a></li>
                <li id="navVentaDolar"><a href="/Vender_dolar/"> Vender Dolares</a></li>
              </ul>
            </li>
        </ul> 
        <!--
        <ul class="nav navbar-nav" style="background-color: #00838f;">
             <li class="dropdown" id="navDolares">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <strong>Dolares</strong><span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li id="navCompraDolar"><a href="/Comprar_dolar/"> Comprar Dolares</a></li>
                <li id="navVentaDolar"><a href="/Vender_dolar/"> Vender Dolares</a></li>
                <li class="divider"></li>
                <li id="navMovimientosDolar"><a href="/Ingresos_Egresos_dolar/"> Movimientos Caja Dolar</a></li>
              </ul>
            </li>
            <li class="dropdown" id="navCajaDolar">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                {% ifnotequal dinero_re_do None %}
                    {% ifnotequal dinero_re_do '0' %}
                      <span class="badge">{{ dinero_re_do }}</span>
                    {% endifnotequal %}
                {% endifnotequal %}
                <strong>Caja Dolar</strong><span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li id=""><a href="/cierre_caja_dolar/">Cerrar Caja Dolar</a></li>
                <li id="cieres_dolar"><a href="/listaCierres_caja_dolar/">Listado de Cierres Dolar</a></li>
                <li class="divider"></li>
                <li class="dropdown dropdown-submenu" id="navEnvioDineroD"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> Envio de Dinero<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li id="navEnvioOficinaD"><a href="/EnviarOficinaOficina_do/"> Envio a otra Oficina</a></li>
                    <li id="navEnvioCajaD"><a href="/EnviarCajaOperador_do/"> Envio Interno</a></li>
                    <li class="divider"></li>
                    <li id="navListadoEnviosD"><a href="/ListadoEnviosSaldo_do/"> Listado de Envios</a></li>
                  </ul>
                </li>
                
                <li class="dropdown dropdown-submenu" id="navRecepcionDineroM"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                 {% ifnotequal dinero_re_do '0' %}  
                    <span class="badge">{{ dinero_re_do }}</span>
                  {% endifnotequal %} Recepción de Dinero<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li id="navRecibirDineroD"><a href="/listaSaldoRecibidos_do/"> Recibir Dinero</a></li>
                    <li class="divider"></li>
                    <li id="navListadoRecepcionDineroD"><a href="/ListadoRecepcionSaldo_do/"> Listado de Recepciones</a></li>
                  </ul>
                </li>
              </ul>
            </li>
        </ul> 
      -->
        {% endifequal%}
        <!--**************** material ***********************-->
        {% if tipoSis ==  'material' or tipoSis ==  'hibrido'  %} 
        <ul class="nav navbar-nav navbar-center" style="background-color: #ffc107;">
            <li class="dropdown" id="navCajaMaterial">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                {% ifnotequal material_re '0' %} 
                  <span class="badge">{{ material_re }}</span>
                {% endifnotequal %}
                <strong>Material</strong><span class="caret"></span></a>
              <ul class="dropdown-menu">
                {% ifequal compra_tactil 'si' %}
                <li id="navCompra"><a href="/Compra_tactil/"> Realizar Compra</a></li>
                {% else %}
                <li id="navCompra"><a href="/Compras/"> Realizar Compra</a></li>
                {% endifequal %}
                <li id="navListadoCompras"><a href="/listadoCompras/"> Listado de Compras</a></li>
                <li class="divider"></li>
                <li id="navVenta"><a href="/Ventas/"> Realizar Venta</a></li>
                <li id="navListadoVentas"><a href="/listadoVentas/"> Listado de Ventas</a></li>
                <li class="divider"></li>
                <li id="navlistaIEMaterial"><a href="/Ingresos_Egresos_material/">Movimientos Material</a></li>
                <li class="divider"></li>
                <li class="dropdown dropdown-submenu"  ><a href="#" class="dropdown-toggle" data-toggle="dropdown"> Envio de Material<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li id="navEnvioMaterialOficina"><a href="/EnvioOficinaMaterial/"> Envios Material otra Oficina</a></li>
                    <li id="navEnvioMaterialCaja"><a  href="/EnviarCajaMaterial/"> Envios Interno Material</a></li>
                    <li class="divider"></li>
                    <li id="navListaMaterialEnviado"><a href="/ListadoEnvioMaterial_tem/"> Listado de Envios Material</a></li>
                  </ul>
                </li>

                <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  {% ifnotequal material_re '0' %} 
                  <span class="badge">{{ material_re }}</span>
                  {% endifnotequal %} Recepción de Material<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li id="navRecibirMaterial"><a href="/ListadoRecepcionHabMat_tem/"> Recibir Material</a></li>
                    <li class="divider"></li>
                    <li id="navListadoRecepcionMaterial"><a href="/ListadoMaterialRecepcionado_tem/"> Listado de Recepciones Material</a></li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Cuenta Corriente Material<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li id="navCrearCteMa"><a href="/crear_cta_cte_material/">Crear Cta Cte Material</a></li>
                    <li id="navListaCtesMa"><a href="/Listado_CuentasCtesMaterial_tem/"> Listado de Ctas Ctes Material</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown" id="navCajaMaterial_dinero">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                {% ifnotequal dinero_re_m None %}
                    {% ifnotequal dinero_re_m '0' %}
                      <span class="badge">{{ dinero_re_m }}</span>
                    {% endifnotequal %}
                {% endifnotequal %}
                <strong>Caja Material</strong><span class="glyphicon glyphicon-usd" aria-hidden="true"></span><span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <!--
                <li id=""><a href="/cierre_caja_material/">Cerrar Caja Material</a></li>-->
                <li id="navcierresMaterial"><a href="/listaCierres_caja_material/">Listado de Cierres Material</a></li>
                <li class="divider"></li>
                <li id="navRegistrarIngresoM"><a href="/RegistroIngresoM/"> Registrar Ingreso</a></li>
                <li id="navListadoIngresoM"><a href="/Ingresos_m_tem/"> Listado de Ingresos</a></li>
                {% ifequal OfCentral 'si' %}
                {% ifnotequal alterna 'si'%} 
                <li id="navRegistrarEgresoM"><a href="/RegistroEgresoM/">Registrar Egreso</a></li> 
                {% endifnotequal %}
                {% endifequal %}
                <li id="navListadoEgresoM"><a href="/Egresos_m_tem/"> Listado de Egresos</a></li>
                <li class="divider"></li>
                <li id="navlistaIEM"><a href="/Ingresos_Egresos_m_tem/">Movimientos <span class="glyphicon glyphicon-usd" aria-hidden="true"></span> Caja Material</a></li>
                <li class="divider"></li>
                
                <li class="dropdown dropdown-submenu" id="navEnvioDineroM"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> Envio de Dinero<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li id="navEnvioOficinaM"><a href="/EnviarOficinaOficina_m/"> Envio a otra Oficina</a></li>
                    <li id="navEnvioCajaM"><a href="/EnviarCajaOperador_m/"> Envio Interno</a></li>
                    <li class="divider"></li>
                    <li id="navListadoEnviosM"><a href="/ListadoEnviosSaldo_m/"> Listado de Envios</a></li>
                  </ul>
                </li>
                
                <li class="dropdown dropdown-submenu" id="navRecepcionDineroM"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                 {% ifnotequal dinero_re_m '0' %}  
                    <span class="badge">{{ dinero_re_m }}</span>
                  {% endifnotequal %} Recepción de Dinero<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li id="navRecibirDineroM"><a href="/listaSaldoRecibidos_m/"> Recibir Dinero</a></li>
                    <li class="divider"></li>
                    <li id="navListadoRecepcionDineroM"><a href="/ListadoRecepcionSaldo_m/"> Listado de Recepciones</a></li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Cuenta Corriente<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li id="navCrearCte"><a href="/crear_cta_ahorro_cte/">Crear Cuenta Corriente</a></li>
                    <li id="navListaCtes"><a href="/Listado_CuentasCtes_tem/"> Listado de Cuentas Corrientes</a></li>
                  </ul>
                </li>
                <!--
                <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Cuenta Ahorro (Plazo Fijo)<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li id="navCrearAhorro"><a href="/crear_cta_plazo_fijo/">Crear Cuenta Ahorro</a></li>
                    <li id="navListaAhorro"><a href="/Cuentas_Ahorro_tem/"> Listado de Cuentas Ahorro</a></li>
                  </ul>
                </li>
                -->
              </ul>
            </li>
        </ul> 
        {% endif%}
        <!--**************** end material *********************-->
        <ul class="nav navbar-nav navbar-right"> 
          <!--material-->

          <!-- material end -->
          <li class="dropdown" id="navUser"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             {% ifnotequal urlfoto None%}
               {% ifequal urlfoto ''%}
               <span class="fa fa-user"></span>
              {% else %}
                <img class="img-circle" height="25px" width="25px" src="/media/{{ urlfoto }}" alt=""> 
              {% endifequal %}
            {% else %}
               <span class="fa fa-user"></span>
            {% endifnotequal %}

             {{ user.get_username }} <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li id="navCambiarContra"><a href="/Cambiar_Contra/">Cambiar Contraseña</a></li>
              {% ifequal OfCentral 'si' %}
              {% ifnotequal alterna 'si'%} 
              {% ifequal cajaDo 'si' %}
                <li class="divider"></li>
                <li><a href="/pasarefectivo/" style="background-color: #bddea1;"><strong style="color:blue;">Saldos</strong> Pasar Efectivo</a></li>
              {% endifequal %}
              {% endifnotequal %}
              {% endifequal %}
              <li class="divider"></li>
              <li><a href="/cerrar/">Salir</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<div class="row" style="height: 40px; margin-right: 0em;margin-left: 0em;">
 </div>
<div>
  <div id="content">
    <section>
      <br>
      <div>
         <!--
        <div class="row" style="margin-right: 0em;margin-left: 0em;">

          <div class="col-md-3 col-sm-6">
            <div class="card">
              <div class="card-body no-padding">
                <div class="alert no-margin"> 
                  <strong class="text-lg text-bold"> OFICINA : {{ SITE_URL }} </strong><br/> 
                </div>
              </div> 
            </div> 
          </div>

          {% ifequal tipoSis 'transferencia'%} 

            <div class="col-md-3 col-sm-6">
            <div class="card">
              <div class="card-body no-padding">
                <div class="alert alert-callout alert-info no-margin"> 
                  <strong class="text-lg">Saldo Soles: S/. {{ ss }} </strong><br/> 
                </div>
              </div> 
            </div> 
          </div>

          <div class="col-md-3 col-sm-6">
            <div class="card">
              <div class="card-body no-padding">
                <div class="alert alert-callout alert-success no-margin">
                  <strong class="text-lg">Saldo Dolares: $/. {{ sd }}</strong><br/>
                </div>
              </div> 
            </div> 
          </div> 

          {% else %}
          <div class="col-md-3 col-sm-6">
            <div class="card">
              <div class="card-body no-padding">
                <div class="alert alert-callout alert-info no-margin"> 
                  <strong class="text-lg">Saldo Soles: S/. {{ ss }} </strong><br/> 
                </div>
              </div> 
            </div> 
          </div>

          <div class="col-md-3 col-sm-6">
            <div class="card">
              <div class="card-body no-padding">
                <div class="alert alert-callout alert-success no-margin">
                  <strong class="text-lg">Saldo Dolares: $/. {{ sd }}</strong><br/>
                </div>
              </div> 
            </div> 
          </div> 

           <div class="col-md-3 col-sm-6">
            <div class="card">
              <div class="card-body no-padding">
                <div class="alert alert-callout alert-warning no-margin">
                  <strong class="text-lg">Saldo Material: {{ sm }} g.</strong><br/>
                </div>
              </div> 
            </div> 
          </div> 
          {% endifequal %} 

          {% ifequal baseExt 'externa' %}
          <div class="col-md-3 col-sm-6">
            <div class="card">
              <div class="card-body no-padding">
                <div class="alert alert-callout alert-info no-margin">
                  <strong class="text-lg">ST Leidos: S/. <span id="st_le">  </span> <button type="button" class="btn btn-warning btn-xs" id="actLeidos"><span class="fa fa-refresh"></span></button></strong><br/>
                </div>
              </div> 
            </div> 
          </div> 
          {% endifequal %}
           {% ifequal caja_inde 'si' %}
          <div class="col-md-3 col-sm-6">
            <div class="card">
              <div class="card-body no-padding">
                <div class="alert alert-callout alert-danger no-margin">
                  <strong class="text-lg">ST Por Pagar: S/. <span id="st_xp">  </span> <button type="button" class="btn btn-warning btn-xs" id="actxpagar"><span class="fa fa-refresh"></span></button></strong><br/>
                </div>
              </div> 
            </div> 
          </div> 
          {% endifequal %}

        </div>
        -->
        <div class="row" style="margin-right: 0em;margin-left: 0em;">
          <div class="alert alert-saldos alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close" style=" font-size:30px;"><span aria-hidden="true">&times;</span></button>
            <label class="label label-default label-saldo" style="background-color:#1565c0">{{ SITE_URL }}</label>
            {% ifequal tipoSis 'transferencia'%}
            <label class="label label-default label-saldo"style="background-color: #e4e4e4;"> <span style="color:#333">Caja</span> <span style="color:indigo;">S/ {{ss}}</span> <span style="color:green;padding-left: 10px;">$ {{sd}}</span> </label> 
            {% endifequal %}
            {% ifequal tipoSis 'hibrido'%}
            <label class="label label-default label-saldo"style="background-color: #e4e4e4;"> <span style="color:#333">Caja</span> <span style="color:indigo;">S/ {{ss}}</span> <span style="color:green;padding-left: 10px;">$ {{sd}}</span> </label> 
            {% endifequal %}

            {% ifequal cajaDo 'si' %}

            <!--<label class="label label-default label-saldo"style="background-color: #00838f;"> Caja Dolar S/ {{s_cms}} | $ {{s_cmd}} </label>-->

            {% endifequal %}
            {% ifequal tipoSis 'hibrido'%}
            <label class="label label-default label-saldo"style="background-color: #ffeb3b;float: right; color:#333;"> Caja Material S/ {{s_ms}} | $ {{s_md}} | gr {{s_mm}}</label>
            {% endifequal %}
            {% ifequal tipoSis 'material'%}
            <label class="label label-default label-saldo"style="background-color: #ffeb3b; color: #333;"> Caja Material S/ {{s_ms}} | $ {{s_md}} | gr {{s_mm}}</label>
            {% endifequal %}
            {% ifequal baseExt 'externa' %}
            <label class="label label-default label-saldo">ST Leidos: S/. <span id="st_le">  </span> <button type="button" class="btn btn-warning btn-xs" id="actLeidos"><span class="fa fa-refresh"></span></button></label>
            {% endifequal %}
            {% ifequal caja_inde 'si' %}
             <label class="label label-default label-saldo">ST Por Pagar: S/. <span id="st_xp">  </span> <button type="button" class="btn btn-warning btn-xs" id="actxpagar"><span class="fa fa-refresh"></span></button></label>
            {% endifequal %}
          </div>
        </div>
        <div class="row" style="margin-right: 0em;margin-left: 0em;">
         
          <div class="col-md-12"> 
              <div class="row">
                 <div class="col-lg-12" id="alertDiv">
                  {% ifequal cargo 'administrador'%}
                      {% ifequal estado ''%}
                        <script type="text/javascript">
                          $("#headAlert").prop('class','alert hidden'); 
                        </script>
                        {% else %}
                        {% ifequal msj ''%}
                        <script type="text/javascript"> 
                          $("#alertDiv").html(''); 
                          $("#headAlert").prop('class','alert alert-{{ estado }} hidden');
                          $("#alertacaja").text('{{ msj }}');
                        </script>
                        {% else %}
                         <script type="text/javascript">
                         $("#alertDiv").html(''); 
                          $("#headAlert").prop('class','alert alert-{{ estado }}');
                          $("#alertacaja").text('{{ msj }}');
                        </script>
                        {% endifequal %}
                        {% endifequal %}
                      {% endifequal %}
                      {% ifequal AlertCi 'cerrado' %}
                      <script type="text/javascript"> 
                        $("#headAlert").prop('class','alert hidden'); 
                        $("#alertDiv").html('<h1 class="text-xxxl">CAJA CERRADA <i class="fa fa-exclamation-circle text-danger"></i></h1>'+
                        '<h2 class="text-light">Comuníquese con el administrador del sistema o con el gerente para habilitar su caja</h2>'); 
                      </script>
                     {% else %}
                        {% ifequal FCierre 'si' %}
                          {% ifequal cerrando_auto 'si' %}
                            {% block content_ci %}
                            {% endblock content_ci%}
                          {% else %}
                            <script type="text/javascript"> 
                              $("#headAlert").prop('class','alert hidden');  
                              $("#alertDiv").html('<h1 class="text-xxxl" align="center">Usted tiene cierres pendientes</h1>'+
                              '<div class="col-sm-4 col-md-offset-4"><p></p> <a class="btn btn-primary btn-block"  href="/Cierre_tem/" role="button">CERRAR CAJA AHORA</a></div>'); 
                            </script>
                          {% endifequal %}
                        {% else %}
                          {% block content1 %}
                          {% endblock content1 %}
                        {% endifequal %}
                    {% endifequal %}
                  </div>
                
              </div>   
          </div> 
         
        </div>  
      </div>
   
    </section>
  </div>
</div>
 
 <script type="text/javascript">
    /*
    WebTour.config = {
              background: '0,0,0',
              backgroundOpacity: 0.8,
              button: 'auto',
              startInFirstStep: true,
              scrollAuto: false,
              detectResizeWindow: false,
              autoplay: false
            };


      function save(){
        var checkbox = document.getElementById('chbTutorial');
        localStorage.setItem('chbTutorial', checkbox.checked);
      }

      function load(){  
          var checkedTuto = JSON.parse(localStorage.getItem('chbTutorial'));
          if(checkedTuto==null){
            var checkbox = document.getElementById('chbTutorial');
            localStorage.setItem('chbTutorial', checkbox.checked);
            document.getElementById("chbTutorial").checked = checkbox.checked;
          }else{
            document.getElementById("chbTutorial").checked = checkedTuto;
          }
      }
      
      $("#chbTutorial").click(function(){  
          save();       
      });
    */
      $(document).ready(function(){ 
        //load(); 
        ajax_CTR();
        //setInterval(ajax_CTR, 30000); 
        function ajax_CTR(){
          $.ajax({
            url:'/CTRactivas_ajax/',
            type:'GET',
            dataType:'text',
            success: function(data){
                n= parseInt(data);
                if(n>0){
                  $("#not").text(n);
                  $("#not1").text(n);
                  {% ifequal alterna 'si'%}
                  var backgroundInterval = setInterval(function(){$("#navTransRecibidas-alterna").toggleClass("backgroundRed");},2000)
                  {% else %}
                      var backgroundInterval = setInterval(function(){$("#navTransRecibidas").toggleClass("backgroundRed");},2000)
                  {% endifequal%}
                }
                else{
                  $("#not").text('');
                  $("#not1").text('');
                };
            }
          });
        }
         {% ifequal tg 'si'%}
           ajax_CTR_glob();
          function ajax_CTR_glob(){
            $.ajax({
              url:'/CTRactivas_global_ajax/',
              type:'GET',
              dataType:'text',
              success: function(data){
                  n= parseInt(data);
                  if(n>0){
                    $("#not_tg").text(n);
                  }
                  else{
                    $("#not_tg").text('');
                  };
              }
            });
          }
        {% endifequal%}
        {% ifequal baseExt 'externa' %}
          ajax_transf_leidos();
          $("#actLeidos").click(function(){
            ajax_transf_leidos();
          });
          function ajax_transf_leidos(){
            $.ajax({
              url:'/monto_trans_leidos/',
              type:'GET',
              dataType:'text',
              success: function(data){
                  $("#st_le").text(data);
              }
            });
          }
        {% endifequal %}
        {% ifequal caja_inde 'si' %}
          ajax_transf_x_pagar();
          $("#actxpagar").click(function(){
            ajax_transf_x_pagar();
          });
          function ajax_transf_x_pagar(){
            $.ajax({
              url:'/monto_trans_x_pagar_caja_inde/',
              type:'GET',
              dataType:'text',
              success: function(data){
                  $("#st_xp").text(data);
              }
            });
          }
        {% endifequal %}
        //cerrarsesion automatico
        var idleInterval1 = setInterval(timerIncrement1, 50000); // 1 minute
            $(this).mousemove(function (e) {
                idleTime_c = 0;
            });
            $(this).keypress(function (e) {
                idleTime_c = 0;
            });
        //
        function timerIncrement1() {
            idleTime_c = idleTime_c + 1;
            if (idleTime_c > 12) {
                 window.location.href='/cerrar/';
            }
        }
        //intercambios
        ajax_num_intercambios_activos();
        function ajax_num_intercambios_activos(){
          $.ajax({
            url:'/CantiInterReciActiva_ajax/',
            type:'GET',
            dataType:'text',
            success: function(data){
                if(data=='0'){
                  $("#notIn").text('');
                  $("#notInt").text('');
                }
                else{
                  $("#notIn").text(data);
                  $("#notInt").text(data);
                }
                
            }
          });
        }
        //---------
      });
    
     

    </script>
    {% block java %}

    {% endblock java %} 

 
</body> 

  <style type="text/css">
  {% ifnotequal tipoSis 'material' %}
  @media (min-width: 768px){
    .navbar-center{
     margin-right: 0px;
     position: absolute;
     right: 100px;
    }
  }
  {% endifnotequal %}
  .color-primary{
    background-color: #eeeeee;
  }
  .t-monto{
    height:35px; 
    font-size:23px;
    font-weight: 500;
  }
  .btn-primary {
    color: #fff;
    background-color: #00695c;
    border-color: #004d40;
    border-radius: 15px !important;
  }
  .btn-primary:hover {
    color: #fff;
    background-color: #004d40;
    border-color: #004d40;
    border-radius: 15px !important;
  }
  .btn-primary:focus {
    color: #fff;
    background-color: #004d40;
    border-color: #004d40;
    border-radius: 15px !important;
  }
  .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    background-color: #004d40;
    border-color: #004d40;
    border-radius: 15px !important;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none;
    outline-offset: -2px;
}
/** panel toolbar**/
  .panel-toolbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 5px;
  }
  .item-toolbar{
    margin: 0px;
  }
  .modal-header {
    padding: 8px;
    border-bottom: 1px solid #e5e5e5;
  }
  .myt-3{
    margin-top: 3px;
  }
  .myb-3{
    margin-bottom: 3px;
  }
  .myb-4{
    margin-bottom: 4px;
  }
  .input-group-addon {
      padding: 0px 6px;
  }
  @media (min-width: 768px){
    .modal-sm {
      width: 400px;
    }
  }
  @media (min-width: 768px){
    .modal-xl {
      width: 95%;
    }
  }



  .z-depth-3 {
    -webkit-box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
    box-shadow: 0 8px 17px 2px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
  }
  .z-depth-2 {
    -webkit-box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 30%);
    box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 30%);
  }
  .z-depth-4 {
    -webkit-box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%), 0 8px 10px -7px rgb(0 0 0 / 20%);
    box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%), 0 8px 10px -7px rgb(0 0 0 / 20%);
  }
  .z-depth-5, .modal {
    -webkit-box-shadow: 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%), 0 11px 15px -7px rgb(0 0 0 / 20%);
    box-shadow: 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%), 0 11px 15px -7px rgb(0 0 0 / 20%);
  }
  .z-depth-1 {
    -webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
  }
  .px-0{
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  </style>
 
</html>


 