/*
         Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
         */
         .car_vac{
            width:100%;
            text-align:center;
            padding-top:15px;
            font-size:18px;
            color:red;
         }

         th,td {
            text-align: center;
         }

         table {
            font-size: 15px;
         }


         .tot_{

         text-align: right;
         padding-top: 20px;
         font-size:17px;

         }

        .remove{
            color: #ea4949;
        }

        .remove:hover{
            color: #ea4949; 
            text-decoration: underline;
        }

        .tex {
             color: #9c9ca9;
             font-size: 16px;
         }

         .tit{
         text-align: left;
         width: 100%;
         padding-left: 15px;
         }

        .inp{
            padding: 10px 12px;
            background-color: #eaeef3;
            color: #9c9ca9;
            border: solid 1px #f4f8fc;
            font-size: 12px;
            font-weight: 500;
            border-radius: 10px;
        }

         label{
               margin-bottom: 0px;
               font-size: 16px;
          }

         .form-control{
            height: auto;
            margin-bottom: 0px;
         }

         .form-group{
            margin-bottom: 0.5rem;
         }  

         .btn{
            border-radius: 5px;
         }  

         .teco{
            padding: 5px;
            line-height: 1.7;
            font-size: 12px;  
         }

         .teco:hover{
            background-color: #18181c;
            color: #fff;
         }

         .reg{
            padding: 10px;
            background-color: #99896e; 
            color: #ffffff;
         }

         .reg:hover{
            background-color: #99896e;
            color: #ffffff;
         }
         span{
            font-size: 12px;
         }

         @media
         only screen 
         and (max-width: 760px), (min-device-width: 768px) 
         and (max-device-width: 1024px)  {
         /* Force table to not be like tables anymore */
         table, thead, tbody, th, td, tr {
         display: block;
         }
         /* Hide table headers (but not display: none;, for accessibility) */
         thead tr {
         position: absolute;
         top: -9999px;
         left: -9999px;
         }
         tr {
         margin: 0 0 1rem 0;
         }
         tr:nth-child(odd) {
  /*       background: #92a8bf;
         color: #3f4354;*/
         background: #cedff0;
          color: #4b4f5c;
          border-bottom: 1px solid;
         }
         td {
         /* Behave  like a "row" */
         border: none;
         border-bottom: 1px solid #eee;
         position: relative;
         padding-left: 50%;
         }
         td:before {
         /* Now like a table header */
         position: absolute;
         /* Top/left values mimic padding */
         top: 0;
         left: 6px;
         width: 45%;
         padding-right: 10px;
         white-space: nowrap;
         font-weight: bold;
         }
         /*
         Label the data
         You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
         */

         td:nth-of-type(1):before { content: "No."; }
         td:nth-of-type(2):before { content: "Evento"; }
         td:nth-of-type(3):before { content: "Zona"; }
         td:nth-of-type(4):before { content: "Asiento"; }
         td:nth-of-type(5):before { content: "Cantidad"; }
         td:nth-of-type(6):before { content: "Precio"; }
         td:nth-of-type(7):before { content: "Cargo Serv."; }
         td:nth-of-type(8):before { content: "Mercado Pago"; }
         td:nth-of-type(9):before { content: "Importe"; }
         td:nth-of-type(10):before { content: "Resta"; }
         td:nth-of-type(11):before { content: "Eliminar"; }

         }