@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
@media screen and (min-width:320px) and  (max-width:480px){
    
*{    
    margin: 0;
    padding: 0;
    font-family: Abel;
    --pri: #3a3a3a;
    --sec: #46a1d5;
    --ter: #ffd556;
    --conf: #53c58d;
    --elim: #ff4343;
    --modi: #ffd556;
    --fondo: #ffffff;
    background: var(--fondo); 
    }

        body::-webkit-scrollbar{
        width: 6px;
        
    }
   
    body::-webkit-scrollbar-thumb{
        background: var(--pri);
        border-radius: 0px;
    }
    body::-webkit-scrollbar-thumb-thumb:active{
     width: 20px;   
    }
    body::-webkit-scrollbar-track {
    background: var(--fondo);
    border-radius: 0px;
}
    a, button, input[type=submit]{
       transition: .3s;
        border-radius: 3px;
    }
     a:hover, button:hover, input[type=submit]:hover{
        transform: scale(1.1,1.1);
        transition: .3s;
         cursor: pointer;
    }
    input, select, textarea{
        border-radius: 3px;
    }
    .cab{
        width: 100%;
        height: 50px;
        background: var(--pri);
        text-align: center;
        position: fixed;
        top: 0;
        z-index: 1;
    }
    .cab #logo{
        background: 0;
        background-image: url(../img/logoallegro.svg);
        width: 25%;
        height: 50px;
        background-size: 100% 100%;
        margin-left: 37.5%;
    }
    .panel_izq{
        width: 100%;
        float: left;
        height: 50%;
        background: 0;
        transition: 1s;
        position: fixed;
        bottom: 0px;
        height: 65px;
        background: var(--pri);
    }
    
    .panel_der{
        width: 100%;
        float: left;
       height: 88%;
        background: 0;
    }
    .panel_izq #btns{
        display: none;
    }
    .panel_izq #btnscel{
        width: 100%;
        text-align: center;
        font-size: 15px;
        background: 0;
        float: left;
        
    }
    .panel_izq #btnscel a img{
        width: 70%;
        background: 0;
        padding: 5px;
    }
    .panel_izq #btnscel a{
        display: inline-block;
        width: 19%;
        background: var(--pri);
        color: var(--pri);
        font-size: 1px;
    }
    .panel_izq #btnscel a:hover{
        transform: scale(0,0);
    }
    .panel_izq #btnscel a:active{
        transform: scale(.8,.8);
        transition: .1s;
    }
 
    .panel_izq h1{
        display: none;
    }
    
    .panel_izq #masmenu{
        position: fixed;
        bottom: 0px;
        background: var(--pri);
        height: 220px;
        display: none;
    }
    .panel_izq #masmenu a{
        width: 20%;
        float: left;
        background: var(--pri);
        font-size: 1px;
        color: var(--pri);
    }
    .panel_izq #masmenu a img{
        width: 90%;
        background: 0;
        padding: 8px;
        box-sizing: border-box;
    }
    .panel_der #graf3, .panel_der #graf4{
        display: none;
    }
    .body{
       width: 100%; 
        overflow: hidden;
    }
    .body #datcli{
        width: 99%;
        height: auto;
        overflow: hidden;
        margin-left: .5%;
        float: left;
       
    }
    .body #datcli input, .body #datadic input, .body #datadic textarea {
        width: 90%;
        height: 30px;
        border: 1px solid grey;
        margin-bottom: 2px;
        margin-left: 5%;
        padding: 5px;
        
    }
    .body label{
        width: 90%;
        margin-left: 5%;
    }

    .body h2{
        font-size: 18px;
        color: var(--pri);
        padding-left: 5px;
    }
    
    .body #datadic{
        width: 99%;
        height: auto;
        margin-bottom: 10px;
        overflow: hidden;
        margin-left: .5%;
        float: left;
    }
    .body #datadic textarea{
        height: 50px;
        resize:none
    }
    .body #datadic input[type=submit]{
        background: var(--conf);
        color: white;
        font-size: 30px;
        height: 50px;
        border: 0;
        margin-top: 5px;
    }
    
    .body h1{
        text-align: center;
        color: var(--sec);
    }
    .body p{
        color: var(--elim);
        text-align: center;
    }
    #volver{
        width: 30px;
        display: inline-block;
        position: fixed;
        top: 0px;
        background: 0;
        margin-top: 10px;
        left: 10px;
        z-index: 1;
    }
    #volver img{
        width: 100%;
        background: 0;
    }
        #volvermenu{
        width: 30px;
        display: inline-block;
        position: fixed;
        top: 0px;
        background: 0;
        margin-top: 15px;
        left: 60px;
        border: 0;
        z-index: 1;
    }
    #volvermenu img{
        width: 100%;
        background: 0;
    }
    #cerrarsesion{
        width: 20px;
        display: inline-block;
        position: fixed;
        top: 5px;
        background: 0;
        margin-top: 10px;
        right: 10px;
        z-index: 1;
    }
    #cerrarsesion img{
        width: 100%;
        background: 0;
    }
    #foo{
        width: 100%;
        position: fixed;
        bottom: 0;
        height: 4%;
        background: var(--pri);
        display: none;
    }
    #foo img{
        width: 20px;
        background: 0;
    }
    #foo h3{
        background: 0;
        color: white;
        font-weight: 100;
        text-align:left;
        margin-top: 2px;
        margin-left: 10px;
    }
    
    #dias{
        width: 100%;
        overflow: hidden;

    }
    
    #dias input[type=date]{
        width: 89%;
        float: left;
        margin-left: 5%;
        height: 27px;
    }
    #dias input[type=radio]{
        width: 1px;
    background: white;
        color: white;
        margin: 0;
        float: left;
    }
    #dias .fecv{
      width: 18%;
        float: left;
        border: 1px solid grey;
        text-align: center;
        height: 27px;
        margin-left: 4.5%;
        margin-right: 1%;
        box-sizing: border-box;
        padding-top: 3px;
        cursor: pointer;
        font-size: 15px;
        transition: .15s;
        margin-bottom: 5px;
    }
    #dias .fecv:hover{
        transform: scale(1.1,1.1);
        transition: .15s;
    }
    #dias input[type=radio]:checked + label{
        background: var(--ter);
        border: 0;
        color: white;
        font-size: 17px;
    }     
    
     #espacio{
        height: 50px;
    }
    
    #btns1{
        width: 100%;
        height: 90px;
        background: var(--pri);
        display: none;
    }
    #btns1 img{
        width: 25px;
        background: 0;
    }
    #btns1 a{
        display: inline-block;
        text-decoration: none;
        float: left;
        width: 24%;
        margin-left: .5%;
        margin-right: .5%;
        text-align: center;
        font-size: 12px;
        background: 0;
        color: white;
        margin-bottom: 5px;
    }
    #tabdat{
        width: 98%;
        font-size: .9em;
        margin: auto;
    }
    
    #tabdat tr{
        display: flex;
        flex-direction: column;
        border: 2px solid var(--sec);
        
        margin-bottom: 10px;
    }
    
    #tabdat thead{
        display: none;
    }
    #tabdat td{
        
        
        border-bottom: 1px solid silver;
        padding: .2em;
        
    }
  
    #tabdat td b{
        width: 90px;
        float: left;
        font-size: .9em;
        height: 100%;
        display:block;
    }
    
    #tabdat #tit{
        background: var(--sec);
        color: white;
        font-size: 18px;
        text-align: right;
        border: 0;
    }
    #tabdat #tit b{
        background: var(--sec);
        font-size: 15px;
    }
    
    #tabdat a{
       
        display: inline-block;
        text-align: center;
        transition: .3s;
        border-radius: 5px;
        float: left;
        margin-bottom: 3px;
        padding: 3px;
        width: 23%;
        margin-left: 1%;
        margin-right: 1%;
        box-sizing: border-box;
    
    }
    #tabdat a img{
        width: 40px;
        background: 0;
        margin: auto;
    }
    #tabdat #elim{
        background: var(--elim);
       
        
    }
    
    #tabdat #elim img{
        margin-left: 5px;
        
    }
    #tabdat #editar{
        background: var(--ter);
        
    }
    #tabdat #cotizar{
        background: var(--conf);
        font-size: 35px;
        text-decoration:none;
        color: white;
    }

    
      #alert{ 
        font-size:18px; 
        width: 100%;
        float: left;  
    }
    #canc{
        width: 90%;
        display: inline-block;
        background: var(--elim);
        text-align: center;
        text-decoration: none;
        color: white;
        margin-left: 5%;
        margin-top: 5px;
        height: 30px;
        font-size: 1.4em;
    }
    
        #fecha{
        position: fixed;
        top: 0;
        background: 0;
        color: white;
        right: 1px;
        z-index: 2;
        font-size: 12px;

    }
    
    
        .login{
        position: absolute;
        background: var(--pri);
        height: 100%;
        width: 100%;
        top: 0;
    }
    .login #logos{
        width: 100%;
        float: left;
        background: 0;
        height: 30%;
        text-align: center;
    }
    .login #logos img{
        width: 100px;
        background: 0;
        width: 50%;
        left: 35%;
        height: 90%;
        margin-top: 3%;
    }
    .login #log{
        float: left;
        width: 100%;
        background: white;
        height: 70%;
        text-align: center;
    }
    
    .login #log input{
        width: 90%;
        border: 1px solid grey;
        padding: 8px;
        margin-bottom: 10px;
        font-size: 20px;
        
    }
    .login #log #form{
        height: 50%;
        margin-top: 10%;
        
    }
    .login #log #form h1{
        color: var(--sec);
        font-size: 40px;
        
    }
    .login #log #form p{
        color: var(--elim);
        margin-bottom: 10px;
    }
    .login #log label{
        text-align: left;
        font-size: 25px;
        color: var(--pri);
        font-weight: bolder;
    }
    .login #log input[type=submit]{
        margin-bottom: 0;
        margin-top: 20px;
        background: var(--conf);
        border: 0;
        color: white;
        font-size: 25px;
    }
    
     .body #datcli1{
        width: 100%;
        height: 600px;
        overflow: hidden;
        
    }
        .body #datadic1{
        width: 100%;
        height: 300px;
        bottom: 30px;
        text-align: center;
        border-top: 1px solid var(--pri);
        padding: 5px 0px;
        z-index: 0;
        position: absolute;
        top: 1410px;
            
    }
    .body #datadic1 textarea{
        height: 100px;
        resize:none
    }
    .body #datadic1 input[type=submit]{
        background: var(--sec);
        color: white;
        font-size: 30px;
        height: 50px;
        border: 0;
        margin-top: 10px;
        width: 90%;
        margin-left: 0;
    }
       .body #datcli1 input, .body #datadic1 input, .body #datadic1 textarea {
        width: 90%;
        height: 30px;
        border: 1px solid grey;
        margin-bottom: 5px;
        margin-left: 5%;
        padding: 5px;
        
    }
   .body #datadic1 #canc{
        width: 50%;
        display: inline-block;
        background: var(--elim);
        text-align: center;
        text-decoration: none;
        color: white;
        margin-left: 5%;
        margin-top: 5px;
        height: 30px;
        font-size: 1.4em;
    }
    #agrcoti{
        width: 100%;
        text-align: center;
        overflow-y: scroll;
        height: 600px;
        position: absolute;
        top: 730px;
        z-index: 2;
        border-top: 1px solid var(--pri);
    }
    #agrcoti #productos{
        border: 2px solid var(--ter);
        width: 99%;
        margin: auto;
        text-align: center;
        font-size: 12px;
 
    }
    #agrcoti #productos thead{
        display: none;
    }
    #agrcoti #productos tr{
       display: flex;
        flex-direction: column;
        width: 98%;
        border-bottom: 1px solid grey;
        margin-bottom: 2px;
        padding: 2px;
    }
    #agrcoti #productos b{
        float: left;
        width: 70px;
        
    }
     #agrcoti #productos #a img{
        width: 30px;
    }
    #agrcoti #productos button{
        float: right;
    }
    #agrcoti #productos td{
        text-align: left;;
    }
    #agrcoti #productos button{
        display: inline-block;
        background: 0;
        transition: .2s;
        border: 0;
    }
    #agrcoti #productos td img{
        width: 20px;
    }
    #agrcoti #tabprod{
        width: 100%;
        margin-bottom: 10px;
    }
    #agrcoti #tabprod input{
        font-size: 15px;
        padding: 2px;
        border: 1px solid grey;
        width: 100%;
        height: 30px;
        margin-bottom: 3px;
    }
    #agrcoti #tabprod  tr{
        display: flex;
        flex-direction: column;
        
    }
    #agrcoti #tabprod input[type=file]{
        width: 80%;
        float: right;
        height: 30px;
        
    }
    #agrcoti #tabprod #pfile{
        float: left;
        text-align: center;
        width: 20%;
        color: var(--sec);
        font-weight: bolder;
        height: 30px;
        font-size: 15px;
        box-sizing: border-box;
        padding-top: 5px;
    }
   
    #agrcoti #tabprod #btnagr{
        width: 100%;
        border: 0;
    }
    #agrcoti #tabprod #btnagr img{
        width: 50px;
    }
    #datadic1 #calculos{
        width: 100%;
        
    }
    #datadic1 #fp{
        width: 100%;
       height: 100px;
        border-bottom: 1px solid var(--pri);
        margin-bottom: 10px;
    }
    #datadic1 #calculos input{
        float: right;
        width: 50%;
        margin-bottom: 2px;
        height: 20px;
        padding: 2px;
        border: 0;
        border-bottom: 1px solid var(--sec);
        font-size: 16px;
    }
    #datadic1 #calculos #label{
        float: right;
        width: 30%;
        margin-bottom: 2px;
        cursor: pointer;
        transform: .5s;
        font-size: 14px;
        margin-left: 0;
        height: 25px;
        box-sizing: border-box;
        padding-top: 3px;
    }
    #datadic1 #calculos input[type=checkbox]{
        display: none;
    }
    #datadic1 #calculos input[type=checkbox]:checked + #label{
        background: var(--sec);
        color: white;
        cursor: pointer;
        transform: .5s;
        
    }
    #datadic1 #calculos #descu{
        float: right;
        width: 19%;
        margin-left: 0;
        margin-right: 1%;
        height: 25px;
        text-align: center;
        font-size: 20px;
        border: 1px solid var(--sec);
    }
    #datadic1 #calculos #tit{
        width: 45%;
        float: right;
        font-size: 15px;
        text-align: right;
      margin-left: 0;
        font-weight: bolder;
        color: var(--sec);
        margin-bottom: 5px;
    }
    #datadic1 #fp input[type=radio]{
        width: 1px;
        float: left;
        margin-left: 0;
        margin-bottom: 0;
    }
    #datadic1 #fp label{
        width: 48%;
        float: left;
        margin-left: 0;
        font-size: 18px;
        transition: .2s;
    }
    #datadic1 #fp input[type=radio]:checked + label{
        background: var(--sec);
        color: white;
        transform:scale(.9,.9);
        cursor: pointer;
        transition: .2s;
    }
    #datadic1 #fp h3{
        color: var(--sec);
    }
    #vend{
      width: 48%;
        float: left;
        display: none;
    
    }
    #vend input[type=radio]{
        width: 1px;
        float: left;
        margin-left: 0;
    }
    #vend label{
       float: left;
        font-size: 12px;
        width: 15%;
        margin-left: 0;
        margin-right: 2px;
    }
    #vend h3{
        color: var(--sec)
    }
    
    #pdf{
      width: 40%;
        top: 55px;
        left: 5px;
        display: inline-block;
        background: var(--pri);
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        box-sizing: border-box;
        z-index:0;
    }
    
    #pdf img{
        width: 100%;
        background: 0;
        float: right;
        box-sizing: border-box;
        padding: 4px;
        height: 40px;
        border-radius: 5px;
    }
        #pdf1{
      
        background: var(--pri);
    }
    
    #ped{
        display: inline-block;
        width: 90%;
        text-decoration: none;
        color: white;
        font-size: 30px;
        padding: 5px;
        margin-top: 10px;
        background: var(--conf);
        height: 50px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    #pdfoc{
        background: 0;
        text-decoration: none;
        color: white;
        
    }
       #pprov{
    width: 100%;
    float: left;
    padding: 3px;
    text-align: center;
    }
    #pprov::-webkit-scrollbar, #prodoc::-webkit-scrollbar{
        width: 6px;
        padding-top: 5px;
    }
   
    #pprov::-webkit-scrollbar-thumb, #prodoc::-webkit-scrollbar-thumb{
        background: var(--pri);
        border-radius: 0px;
    }
    #pprov::-webkit-scrollbar-thumb-thumb:active, #prodoc::-webkit-scrollbar-thumb-thumb:active{
     width: 20px;   
    }
    #pprov::-webkit-scrollbar-track, #prodoc::-webkit-scrollbar-track {
    background: var(--fondo);
    border-radius: 0px;
}
    #prodoc{
    width: 100%;
    float: left;   
    box-sizing: border-box;
    overflow-y:scroll;
    text-align: center;
    padding: 2px;
    }
    #prodoc table{
        margin: auto;
        width: 100%;
        text-align: center;
        border: 2px solid var(--sec);
        border-collapse: collapse;
        font-size: 13px;
        
    }
    #prodoc table th{
        background: var(--sec);
        color: white;
    }
    #prodoc table td{
        padding: 3px;
        border-bottom: 1px solid grey;
    }
    #prodoc table b{
        display: none;
    }
  
    #pprov table{
        width: 98%;
        border-collapse: collapse;
        text-align: center;
    }
    #pprov table th{
        display: none;
    }
    #pprov table td{
        padding: 1px;
        }
    #pprov table img{
        width: 50px;
    }
    #pprov input, #pprov select{
        border: 1px solid grey;
        width: 100%;
        padding: 3px;
        height: 30px;
    }
    #pprov #btnagrprov{
        border: 0;
       background: red;
        float: right;
    }
    #pprov #btnagrprov img{
        width: 30px;
    }
  
    

    
    #pprov #productos{
        border-collapse: collapse;
        border: 2px solid var(--ter);
        margin-top: 5px;
        font-size: 13px;
        background: 0;
        width: 98%;
    }
    #pprov #productos tr{
        display: flex;
        flex-direction: column;
        width: 98%;
        border-bottom: 1px solid grey;
        margin-bottom: 2px;
        padding: 2px;
    }
    #pprov #productos b{
        width: 90px;
        float: left;
        font-size: .9em;
        height: 100%;
        display:block;
    }
    #pprov #productos td{
        padding: 2px;
        border-bottom: 1px solid grey;
        width: 100%;
    }
    #pprov #productos button{
        width: 20px;
        border: 0;
    }
    #pprov #productos button img{
        width: 100%;
    }

    
    #pprov #productos #alert td{
        text-align: center;
        background-color: var(--elim);
        color: white;
    }
    #ocpdf{
        width: 98%;
        float: left;
        height: auto;
        margin-top: 2px;
        border: 1px dashed grey;
        margin-bottom: 5px;
        margin-left: .5%;
        overflow-y: scroll;
    }
    
    #ocpdf p{
        background: 0;
    color: var(--pri);
    }
    
    #btnoc{
     width: 100%;
        float: left;
        margin-top: 2px;  
        text-align: center;
    }
    #btnoc #aut, #btnoc #conf{
        width: 90%;
        display: inline-block;
        background: var(--conf);
        color: white;
        box-sizing: border-box;
        padding: 5px;
        font-size: 22px;
        text-decoration: none;
        padding-top: 8px;
        margin-bottom: 5px;
    }
    #btnoc #aut{
        background: var(--sec);
    }
    #btnoc #conf1{
        width: 90%;
        display: inline-block;
        background: var(--conf);
        color: white;
        box-sizing: border-box;
        padding: 5px;
        font-size: 22px;
        text-decoration: none;
        padding-top: 5px;
        margin-bottom: 10px;
    }
    
    
    #pdfocs{
        display:inline-block;
        width: 45%;
        background: var(--elim);
        height: 20px;
        text-decoration: none;
        color: white;
        font-size: 14px;
        text-align: center;
        margin-left: .5%;
        margin-right: .5%;
        padding: 5px;
        border-radius: 5px;
        margin-top: 3px;
        margin-bottom: 3px;
    }
    #pdfocs img{
        width: 20px;
        background: 0;
        float: right;
        
    }
    
    #bmail{
        width: 100%;
        text-align: center;
        height: 200px;
        background: red;
    }
    
    #ul {
        position: absolute;
        width: 48%;
        top: 200px;
         background: 0;
    }
    #ul ul{
        list-style: none;
        background: 0;
    }
    #ul ul li{
        width: 48%;
        float: left;
        background-color:dimgrey;
        font-size: 12px;
        margin-left: .5%;
        margin-right: .5%;
        color: white;
        border-radius: 5px;
        margin-bottom: 3px;
        cursor: pointer;
        transition: .2s;
    }
    #ul ul li:hover{
        transform: scale(.9,.9);
        transition: .2s;
    }
    
    #la{
        display: none;
    }
    #ulreq{
        width: 90%;
        margin: auto;
        overflow: hidden;
    }
    #ulreq li{
        list-style: none;
        font-size: 13px;
        background: var(--elim);
        width: 24%;
        color: white;
        text-align: center;
        cursor: pointer;
        transition: .3s;
        float: left;
        margin-left: .5%;
        margin-right: .5%;
    }
    #ulreq li:hover{
        background: var(--ter);
        transition: .3s;
    }
    #ulreq li b{
        background: 0;
        font-weight: bold;
    }
    #titproy #des{

    }
    #titproy #cat, #titproy #idproc{
        float: left;
        height: 30px;
        padding: 5px;
        margin-left: 5%;
        width: 90%;
        margin-bottom: 2px;
        background: silver;
    }
     #datcli1 textarea{
        width: 90%;
        height: 60px;
        border: 1px solid grey;
        margin-bottom: 5px;
        margin-left: 5%;
        padding: 5px;
        resize: none;
        overflow: hidden;
    }
    
        #titproy #des{
        width: 58%;
        float: left;
        margin-left: 2%;
    }

    #alertfv{
        width: 30px;
        margin-bottom: 2px;
    }
    .celim{
        position: fixed;
        background: white;
        height: 150px;
        width: 250px;
        box-shadow: 0px 0px 5px grey;
        right: 0px;
        top: 60px;
        padding: 20px;
        text-align: center;
        display: none;
        z-index: 100;
    }
    .celim p{
        background: 0;
        font-size: 25px;
        color: var(--pri);
        margin-bottom: 40px;
    }
    .celim a, .celim button{
        width: 40%;
        display: inline-block;
        border: 0;
        height: 40px;
        float: left;
        margin-left: 5%;
        margin-right: 5%;
        text-decoration: none;
        color: white;
        font-size: 30px;
    }
    .celim a{
        box-sizing: border-box;
        padding-top: 2px;
        background: var(--elim);
    }
    .celim button{
        background: var(--sec);
    }
        #adjuntos{
        width: 90%;
        overflow: hidden;
        height: 200px;
        overflow-y:auto;
        margin: auto;
    }
    #adjuntos::-webkit-scrollbar{
        width: 6px;
        padding-top: 5px;
    }
   
    #adjuntos::-webkit-scrollbar-thumb{
        background: var(--pri);
        border-radius: 0px;
    }
    #adjuntos::-webkit-scrollbar-thumb-thumb:active{
     width: 20px;   
    }
    #adjuntos::-webkit-scrollbar-track {
    background: var(--fondo);
    border-radius: 0px;
}
    #adjuntos img{
        width: 30px;
    }
    #adjuntos button:hover, #adjuntos a:hover{
        transform: scale(.9,.9);
        
    }
    #adjuntos #agradj{
        width: 20%;
        border: 0;
        height: 40px;
        float: left;
       background: 0;
        border: 2px dashed var(--pri);
        color: white;
        border-radius: 3px;
        display: inline-block;
        
        }
    #adjuntos #agradj img{
        width: 22px;
    }
    #adjuntos a{
        width: 100%;
        background: var(--elim);
        color: white;
        display: inline-block;
        text-decoration: none;
        font-size: 12px;
        padding: 5px 5px 2px 5px;
        border-radius: 3px;
        margin-bottom: 5px;
        box-sizing: border-box;
    }
    #adjuntos a:hover{
        transform: scale(1,1);
        background: var(--ter);
    }
    #adjuntos a img{
        width: 20px;
        background: 0;
        float: right;
        
    }
    #formadj{
        width: 90%;
        background: rgba(0,0,0,.9);
        height: 200px;
        position: absolute;
        left: 5%;
        top: 680px;
        display: none;
        
    }
    #formadj form{
        background: 0;
        height: 100%;
        text-align: center;
    }
    #formadj input{
        width: 90%;
        background: 0;
        color: white;
        border: 1px solid white;
        margin: auto;
        margin-bottom: 10px;
        padding: 5px;
        font-size: 15px;
        
    }
    #formadj p{
        background: 0;
        font-size: 25px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #formadj input[type=submit]{
        background: var(--conf);
        border: 0;
    }
    
    #opcionesoc{
        width: 30%;
        position: absolute;
        height: 87%;
        background: rgba(0,0,0,.9);
        left: 0;
        top: 60px;
        overflow-y: auto;
        display: none;
    }
    #opcionesoc::-webkit-scrollbar{
        width: 6px;
        padding-top: 5px;
    }
   
    #opcionesoc::-webkit-scrollbar-thumb{
        background: var(--pri);
        border-radius: 0px;
    }
    #opcionesoc::-webkit-scrollbar-thumb-thumb:active{
     width: 20px;   
    }
    #opcionesoc::-webkit-scrollbar-track {
    background: var(--fondo);
    border-radius: 0px;
}  
    #opcionesoc a{
        width: 90%;
        display: inline-block;
        margin-bottom: 10px;
        border-radius: 3px;
        padding: 5px;
        text-decoration: none;
        color: white;
        background: var(--sec);
    }
    #opcionesoc p{
        background: 0;
        font-size: 25px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #opcionesoc a:hover{
        transform: scale(1,1);
        background: var(--ter);
    }
    #opcionesoc hr{
        margin-bottom: 10px;
        background: white;
       border: 0;
        height: 1px;
    }
    #abonos{
        position: fixed;
        width: 100%;
        background: rgba(0,0,0,.9);
        top: 50px;
        height: 70%;
        overflow: hidden;
        overflow-y: auto;
        display: none;
    }
    #abonos::-webkit-scrollbar{
        width: 6px;
        padding-top: 5px;
    }
   
    #abonos::-webkit-scrollbar-thumb{
        background: var(--pri);
        border-radius: 0px;
    }
    #abonos::-webkit-scrollbar-thumb-thumb:active{
     width: 20px;   
    }
    #abonos::-webkit-scrollbar-track {
    background: var(--fondo);
    border-radius: 0px;
}  
    #abonos p{
        font-size: 25px;
        margin-top: 5px;
        margin-bottom: 10px;
        background: 0;
    }
    #abonos button img{
        width: 100%;
        background: 0;
    }
    #abonos button{
        width: 6%;
        border: 0;
        background: 0;
    }
    #abonos form{
        background: 0;
    }
    #abonos input, #abonos select{
        width: 48%;
        margin-left: 1%;
        margin-right: 1%;
        float: left;
        border: 1px solid white;
        padding: 5px;
        margin-bottom: 5px;
        border: 1px solid grey;
        height: 30px;
    }
    #abonos input[type=file]{
        width: 90%;
        float: left;
    }
    #abonos #formabono{
        overflow: hidden;
        margin-bottom: 10px;
    }
    #histabonos{
        background: 0;
    }
    #tbabonos{
        width: 98%;
        margin: auto;
        color: var(--pri);
        text-align: center;
        border-collapse: collapse;
    }
    #tbabonos th, #tbabonos td{
        padding: 3px;
        color: var(--pri);
        background: 0;
    }
    #tbabonos img{
        width: 20px;
        background: var(--ter);
        padding: 3px;
        border-radius: 3px;
    }
    #tbabonos img:hover{
        background: var(--elim);
    }
    #tbabonos button{
        width: 20px;
    }
    #tbabonos #td11{
        width: 8%;
    }
    #tbabonos th{
        background: var(--sec);
        color: white;
    }
    #tbabonos td{
        border-bottom: 1px solid grey;
    }
    #tbabonos a{
        background: 0;
    }
    #abono{
        width: 90%;
        border: 0;
        background: var(--sec);
        font-size: 20px;
        padding: 5px;
        box-sizing: border-box;
        margin-bottom: 10px;
        margin-left: 5%;
        color: white;
    }
    
    #adjuntos1{
        position: fixed;
        width: 100%;
        background: rgba(0,0,0,.95);
        top: 50px;
        height: 60%;
        overflow: hidden;
        overflow-y: auto;
        text-align: center;
        display: none;
    }
    #adjuntos1::-webkit-scrollbar{
        width: 6px;
        padding-top: 5px;
    }
   
    #adjuntos1::-webkit-scrollbar-thumb{
        background: var(--pri);
        border-radius: 0px;
    }
    #adjuntos1::-webkit-scrollbar-thumb-thumb:active{
     width: 20px;   
    }
    #adjuntos1::-webkit-scrollbar-track {
    background: var(--fondo);
    border-radius: 0px;
}  
    #adjuntos1 form,  #adjuntos1 div{
        background: 0;
    }
    #adjuntos1 p{
        font-size: 20px;
        background: 0;
        margin-top: 5px;
        margin-bottom: 5px;
        
    }
    #adjuntos1 #formadj1{
        width: 98%;
        margin: auto;
        overflow: hidden;
    }
    #adjuntos1 #formadj1 input::placeholder{
        color: white;
    }
    #adjuntos1 #formadj1 input{
        width: 95%;
        margin: auto;
        margin-bottom: 5px;
        padding: 5px;
        height: 30px;
        border: 1px solid white;
        background: 0;
        color: white;
    }
    #adjuntos1 #formadj1 input[type=submit]{
        background: var(--conf);
        border: 0;
        color: white;
        font-size: 15px;
    }
    #docadj1 #tbadj, #docadj2 #tbadj{
        width: 95%;
        margin: auto;
        text-align: center;
        background: 0;
    }
    #docadj1 #tbadj td, #docadj1 #tbadj tr, #docadj1 #tbadj tbody, #docadj2 #tbadj td, #docadj2 #tbadj tr, #docadj2 #tbadj tbody{
        background: 0;
        color: white;
    }
    #docadj1 #tbadj img, #docadj2 #tbadj img{
        width: 30px;
        background: 0;
    }
    #docadj1 #tbadj a, #docadj2 #tbadj a{
        text-decoration: none;
        width: 100%;
        display: inline-block;
        font-size: 18px;
        text-align: center;
        background: var(--sec);
        color: white;
        border-radius: 3px;
        box-sizing: border-box;
        padding: 3px;
    }
    #docadj2 #tbadj a{
        font-size: 15px;
        box-sizing: border-box;
        padding-top: 6px;
        background: var(--elim);
    }
    #docadj1 #tbadj a:hover, #docadj2 #tbadj a:hover{
        background: var(--ter);
        transform: scale(1,1);
    }
    
    #docadj1 #tbadj #a, #docadj2 #tbadj #a{
        width: 90%;
    }
    #docadj1 #tbadj #b, #docadj2 #tbadj #b{
        width: 10%;
    }
    #docadj1 #tbadj #a img, #docadj2 #tbadj #a img{
        float: right;
        width: 20px;
        margin-top: 2px;
    }
    #docadj1 #tbadj #b button, #docadj2 #tbadj #b button{
        border: 0;
        background: 0;
    }
    #docadj, #cerproy{
        width: 90%;
        border: 0;
        background: var(--ter);
        font-size: 20px;
        padding: 5px;
        box-sizing: border-box;
        margin-bottom: 10px;
        margin-left: 5%;
    }
    #cerproy{
        background: var(--elim);
        color: white;
    }
    #la{
        display: none;
    }
    
    #cierre{
        width: 100%;
        margin: auto;
        text-align: center;
        margin-top: 10px;
        overflow: hidden;
        margin-bottom: 40px;
        height: auto;
    }
    #cierre div{
        width: 48%;
        float: left;
        margin-left: 1%;
        margin-right: 1%;
        color: var(--pri);
        border-radius: 3px;
        margin-bottom: 10px;
        height: 90px;
        box-shadow: 0px 1px 3px grey;
        overflow: hidden;
    }
    #cierre hr{
        width: 90%;
        margin: auto;
        margin-bottom: 10px;
    }
    #cierre #clientes h2, #cierre #proyectos h2, #cierre #abonos2 h2{
        font-size: 27px;
        line-height: 2;
        background: 0;
    }
    
    #cierre p{
        font-size: 25px;
        color: var(--pri);
    }
    #cierre div p{
        font-size: 18px;
        background: var(--sec);
        color: white;
        border-radius: 3px 3px 0px 0px;
        background: 
    }
    #cierre #novedades{
       width: 98%;
        padding: 5px;
        box-sizing: border-box;
        height: 120px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    #cierre #novedades p{
        background: 0;
        color: var(--pri);
        text-align: left;
    }
    #cierre #abonos2 #p{
        background: 0;
        color: var(--pri);
        font-size: 15px;
        width: 49%;
        float: left;
        margin-left: .5%;
        margin-right: .5%;
        display: none;
    }
    #cierre #novedades textarea{
        width: 99%;
        border: 0;
        resize: none;
        overflow: hidden;
        font-size: 15px;
        height: 80px;
        border: 1px solid grey;
        border-radius: 3px;
        padding: 5px;
    }
    #cierre a{
        width: 98%;
        display: inline-block;
        background: var(--conf);
        padding: 5px;
        color: white;
        font-size: 30px;
        height: 120px;
        margin-bottom: 20px;
        box-sizing: border-box;
        text-align: center;
    }
    #cierre a img{
        background: 0;
        width:75px;
        
    }
    #cierre a:hover{
        background: var(--sec);
        transform: scale(.9,.9);
    }
    #cierre #concie{
        position: fixed;
        bottom: 0px;
        right: 0px;
        width: 100%;
        background: rgba(0,0,0,.9);
        height: 30%;
        display: none;
        margin-right: 0;
        margin-bottom: 0;
    }
    #cierre #concie p{
        background: 0;
        color: white;
        margin-top: 25px;
        margin-bottom: 20px;
        font-size: 25px;
    }
    #cierre #concie input[type=submit]{
        width: 90%;
        background: var(--conf);
        padding: 5px;
        color: white;
        font-size: 30px;
        margin-bottom: 20px;
        border: 0;
    }
    #cierre #concie a{
        background: var(--elim);
        width: 50%;
        float: none;
        height: 50px;
    }
    #cierre #visala{
        width: 98%;
        margin-left: 1%;
        height: auto;
    }
    #cierre #visala table{
        width: 100%;
        text-align: center;
        background: 0;
        border-collapse: collapse;
        
    }
    #cierre #visala table th{
        background: var(--sec);
        color: white;
        padding: 3px;
        font-weight: 100;
        display: none;
    }
    #cierre #visala table td{
        padding: 2px;
        display: flex;
        flex-direction: column;
        width: 100%;
        
    }
    #cierre #visala table tr{
        border-bottom: 1px solid var(--pri);
    }
    #cierre #visala table tr:hover{
        font-weight: bold;
        
    }
    
    .panel_der canvas{
       width: 100%;
        height: 100%;
        margin: auto;
    }
    .panel_der #graf1, .panel_der #graf2{
        width: 100%;
        text-align: center;
        height: auto;
        height: 48%;
    }
    .panel_der #graf1 p, .panel_der #graf2 p{
        font-size: 25px;
        color: var(--pri);
        margin-top: 5px;
    }
   
        #modutec .tabvishoy #th{
        background-color: var(--ter);
        color: var(--pri);
    }
    .tabvishoy #td1, .tabvishoy #tr, .tabvishoy tbody{
     border: 0;
    }
   
    #modutec hr{
        margin-bottom: 10px;
    }
    #modutec #td1{
        font-size: 25px;
        padding: 0;
    }
    #modutec .tabvishoy #crerep{
        display: inline-block;
        width: 95%;
        margin: auto;
        background: var(--elim);
        text-decoration: none;
        color: white;
        margin-left: 2.5%;
        padding: 5px;
        box-sizing: border-box;
        border-radius: 3px;
    }
    #modutec #thead{
        display: block;
        text-align: center;
    }
    #modutec .tabvishoy{
        margin-bottom: 5px;
    }
    #modutec .tabvishoy .cod, #modutec .tabvishoy .cod b{
        background: var(--pri);
        color: white;
    }
    #modutec .cod1,  #modutec .cod1 b{
        background: var(--sec);
        color: white;
    }
    .tabvishoy input, .tabvishoy textarea{
        width: 100%;
        border: 1px solid silver;
        padding: 3px;
        resize: none;
        height: auto;
        overflow: auto;
        border-radius: 3px;
    }
    .tabvishoy textarea{
        height: 100px;
    }
    .tabvishoy #btnrept{
        width: 95%;
        margin-left: 2.5%;
        padding: 5px;
        font-size: 20px;
        border: 0;
        background: var(--conf);
        color: white;
    }
    .tabvishoy #td2{
        border: 0;
    }
    #formCanvas button{
        width: 95%;
        padding: 5px;
        font-size: 25px;
        border: 0;
        background: var(--sec);
        color: white;
        margin-bottom: 10px;
        box-sizing: border-box;
        height: 45px;
    }
    .centrador a{
        display: inline-block;
        width: 80%;
        background: var(--ter);
        color: white;
        text-decoration: none;
        padding: 5px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    #guasal{
        display: inline-block;
        width: 80%;
        background: var(--elim);
        color: white;
        text-decoration: none;
        padding: 5px;
        box-sizing: border-box;
        margin-bottom: 20px;
        margin-left: 10%;
        text-align: center;
    }
     #loader{
        width: 100%;
        position: fixed;
        z-index: 9;
        background: rgba(0,0,0,.9);
        height: 100%;
        display: none;
        }
    #loader img{
        width: 35%;
        background: 0;
        margin-left: 32.5%;
        height: 22%;
        margin-top: 39%;
    }
    #tabdat1{
        width: 98%;
        font-size: .9em;
        margin: auto;
    }
    
    #tabdat1 tr{
        display: flex;
        flex-direction: column;
        border: 2px solid var(--sec);
        margin-bottom: 10px;
    }
    
    #tabdat1 thead{
        display: none;
    }
    #tabdat1 td{
        
        
        border-bottom: 1px solid silver;
        padding: .2em;
        
    }
  
    #tabdat1 td b{
        width: 90px;
        float: left;
        font-size: .9em;
        height: 100%;
        display:block;
    }
    
    #tabdat1 #tit{
        background: var(--sec);
        color: white;
        font-size: 18px;
        text-align: right;
        border: 0;
    }
    #tabdat1 #tit b{
        background: var(--sec);
        font-size: 15px;
    }
    
    #tabdat1 a{
       
        display: inline-block;
        text-align: center;
        transition: .3s;
        border-radius: 5px;
        float: left;
        margin-bottom: 3px;
        padding: 3px;
        width: 23%;
        margin-left: 1%;
        margin-right: 1%;
        box-sizing: border-box;
    
    }
    #tabdat1 a img{
        width: 40px;
        background: 0;
        margin: auto;
    }
    #tabdat1 #elim{
        background: var(--elim);
       
        
    }
    
    #tabdat1 #elim img{
        margin-left: 5px;
        
    }
    #tabdat1 #editar{
        background: var(--ter);
        
    }
    #tabdat1 #cotizar{
        background: var(--conf);
        font-size: 35px;
        text-decoration:none;
        color: white;
    }
    #modutec #ul{
        width: 100%;
        position: inherit;
        top: 60px;
        overflow: hidden;
    }
    #modutec #ul li{
        width: 98%;
        text-align: center;
        border-radius: 2px;
        height: 20px;
    }
    #prodrep{
        width: 100%;
        margin: auto;
    }
     #prodrep tr{
        display: flex;
        flex-direction: column;
        padding: 2px;
        margin-bottom: 3px;
        text-align: justify-all;
        border-top: 1px solid silver;
    }
    #resrep{
        width: 98%;
        margin: auto;
        border: 1px solid grey;
    }
    #crp h1{
       text-align: center;
        color: var(--sec);
    }
    #saverep{
        width: 95%;
        height: 50px;
        font-size: 30px;
        padding: 5px;
        background: var(--conf);
    }
    #resrep #preg{
        width: 90%;
        position: fixed;
        border: 5px solid var(--ter);
        z-index: 9999;
        top: 40%;
        left: 5%;
        border-radius: 5px;
        padding: 5;
        box-sizing: border-box;
        font-size: 20px;
        text-align: center;
        display: none;
    }
    #resrep #preg a, #resrep #preg button{
        width: 45%;
        float: left;
        background: var(--conf);
        height: 30px;
        border: 0;
        margin-left: 2.5%;
        margin-right: 2.5%;
        font-size: 20px;
        text-decoration: none;
        padding: 3;
        box-sizing: border-box;
        color: white;
        margin-top: 40px;
    }
    #resrep #preg button{
        background: var(--elim);
    }
    #rfirma{
        width: 95%;
        margin-bottom: 5px;
        height: 40px;
        padding: 5px;
        font-size: 18px;
        border: 1px solid silver;
    }
    #vaf{
        width: 90%;
        margin-bottom: 10px;
        height: 30px;
        font-size: 18px;
        background: var(--ter);
        border: 0;
        color: white;
    }
        #user{
        position: fixed;
        top: 35;
        background: 0;
        color: white;
        right: 1px;
        z-index: 2;
        font-size: 12px;
        text-decoration: underline;
    }
     #filtro{
       width: 100%;
        margin-bottom: 5px;
        margin-top: 5px;
        overflow: hidden;
    }
    #filtro input, #filtro select{
        float: left;
        height: 30px;
        width: 49%;
        border: 1px solid silver;
        margin-left: .5%;
        margin-right: .5%;
        text-align: center;
        font-size: 13px;
        margin-bottom: 2px;
    }
    #filtro p{
        border: 0;
        float: left;
        color: grey;
        margin-top: 5px;
        width: 48%;
        margin-left: 1%;
        margin-right: 1%;
    }
    #filtro button{
        background: var(--sec);
        width: 98%;
        height: 30px;
        border: 0px;
        float: left;
        padding: 5px;
        margin-left: 1%;
        
    }
    #filtro button:hover{
        transform: scale(.9,.9);
    }
    #filtro button img{
        width: 100%;
        background: 0;
        height: 100%;
    }
      #ingser{
       width: 100%;
        margin: auto;
        text-align: center;
    }
    #ingser input{
        width: 49%;
        float: left;
        margin-left: .5%;
        margin-right: .5%;
        border: 1px solid silver;
        height: 30px;
        padding: 5px;
        margin-bottom: 5px;
        border-radius: 3px;
        font-size: 13px;
    }
    #ingser button{
        width: 10%;
        border: 0;
        box-sizing: border-box;        
    }
    #ingser button img{
        width: 100%;
    }
    #ingser #formser{
        width: 100%;
        float: left;
    }
        #datusu{
    width: 95%;
    text-align: center;
    margin-left: 2.5%;
    margin-top: 30px;
}
#datusu form{
    background: 0;
}
    
    #datusu input{
        width: 90%;
        padding: 5px;
        text-align: center;
        font-size: 20px;
        margin-bottom: 5px;
        margin-top: 5px;
        border: 1px solid silver;
    }    
    #datusu input[type="submit"]{
        background: var(--conf);
        border: 0;
        color: white;
    }
    .tdtot{
        text-align: left;
        background: var(--pri);
        color: white;
    }
    .tdtot b{
        display: inline-block;
        background: 0;
        text-align: left;
        width: 30%;
    }
       .histproy{
        width: 100%;
        text-align: center;
        overflow: hidden;
    }
    .histproy div{
        width: 100%;
        float: left;
        
    }
    .histproy div h3, .histproy div h2{
        background: 0;
        background: 0;
        font-weight: 100;
        color: #282828;
    }
    .histproy div h2{
        font-size: 22px;
        color: var(--elim);
       font-weight: bolder;
    }
    .histproy #cons h3, .histproy #datclie h3, .histproy #datproy h3, .histproy #datcond h3, .histproy #datotro h3{
        width: 98%;
        border: 1px solid silver;
        border-radius: 5px;
        margin-bottom: 5px;
        float: left;
        margin-left: .5%;
        margin-right: .5%;
    }
    .histproy #cons{
        width: 95%;
        float: left;
        margin-left: 2.5%;
    }
    .histproy #datclie, .histproy #datproy{
        width: 95%;
        float: left;
        margin-left: 2.5%;
    }
    .histproy #dateco h3{
        width: 48%;
        margin: 0;
        border: 1px solid silver;
        border-radius: 5px;
        margin-bottom: 5px;
        float: left;
        margin-left: .5%;
        margin-right: .5%;
    }
    .histproy #dateco{
        width: 100%;
    }
    .histproy #datcond #h33{
       width: 98%;
        font-size: 15px;
        min-height: 60px;
    }
    .histproy #datcond h3{
    width: 48%;
        margin: 0;
        border: 1px solid silver;
        border-radius: 5px;
        margin-bottom: 5px;
        float: left;
        margin-left: .5%;
        margin-right: .5%;
    }
    .histproy #datprod table th{
        background: var(--pri);
        border: 1px solid var(--pri);
    }
    .histproy #datprod table td{
        border: 1px solid var(--pri);
    }
    .histproy #datotro h3 a{
        display: inline-block;
        color: white;
        background: var(--elim);
        padding: 2px;
        text-decoration: none;
        box-sizing: border-box;
        margin-bottom: 5px;
    }
       #datprod #rep{
       display:inline-block;
        background: var(--ter);
        padding: 3px;
    }
    #datprod #rep img{
        background: 0;
    }
    #docadj3 a{
        display: inline-block;
        width: 98%;
        float: left;
        background: var(--elim);
        color: white;
        text-decoration: none;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 10px;
        box-sizing: border-box;
       height: 40px;
        padding-top: 10px;
    }
    #docadj3 a img{
        width: 30px;
        background: 0;
        position: inherit;
        float: right;
        margin-right: 10px;
        margin-top: -5px;
    }
     #datusu label{
        display: inline-block;
        width: 90%;
        text-align: center;
       margin-left: 0;
        
    }
    #thhide{
        display: none;
    }
    #docfirm{
        width: 95%;
        padding: 5px;
        font-size: 20px;
        border: 1px solid silver;
        margin-bottom: 10px;
    }
    #log textarea{
        width: 90%;
        padding: 3px;
        height: 100px;
    }
}