.prepForm {
    width: 100%;
    height: 90%;
    padding: 0.2% 0 0;
    }
    
  
    
    .formPrep {
    padding: 4px;
    padding-top: 0px;
    padding-right: 0px;
    position: relative;
    z-index: 1;
    background: rgb(238, 243, 251);
    width: 90%;
    margin: 0 auto 5px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    }
    
    
    .formPrep button {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #5DC351;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
    }
    .formPrep button:hover,.form button:active,.form button:focus {
    background: #43A047;
    }
    .formPrep .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
    }
    .formPrep .message a {
    color: #4CAF50;
    text-decoration: none;
    }
    .formPrep .register-form {
    display: none;
    }
    
    .divBtnPrepFoot button{
        margin-inline: 1px !important;
        width: fit-content;
        background: linear-gradient(#ddd, #666);
        color: black;
        border-radius: 3%;
        border: none;
        font-size: smaller;
        height: fit-content;
        padding: 1%;
    }

    .divBtnPrepFoot button:hover{
        background-color: rgb(112, 203, 255);
    }
    
    .divBtnPrepFoot2 button{
        margin: 0px;
        background: linear-gradient(360deg, #93989d, #ffffff);
        color: black;
        border-radius: 5px;
        padding-inline: 0px;
        padding-top: 10;
        padding-bottom: 10px;
        font-size: smaller;
    }    
    .divBtnPrepFoot2 button:hover{
        background-color: rgb(112, 203, 255);
    }
    .divBtnPrepFoot2 img:hover{
        background: rgb(112, 203, 255);
    }

    #tabFoot2Btns img{
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
    #tabFoot2Btns td{
        align-items: center;
        margin: 1px;
    }

    #tabFoot2Btns button{
        margin: 0px;
        height: 4vh;
    }
    
    #tabFoot2Btns label{
        margin: 0px;
        text-align: end;
    }

    .btnSpecialFoot2{ 
        height: 6vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2%; 
    }
   

    .divBtnPrepFoot2 label{
        margin-inline: 5px;
        padding: 10px;
        padding-inline: 10px;
    }

    .divBtnPrepFoot2 td{
        padding: 1%;
    }

    #tabPrepBtns{
        margin-bottom: 1px;
        width: 100%;
    }

    #tabPrepBtns tr{
        margin: 0px;
        padding: 0px;
    }
    
    #tabPrepBtns td{
        width: fit-content;
        height: fit-content;
        margin: 5px;
        padding: 0px;
    }

    .divBtnTabPrep {
        padding: 1%;
        display: flex; /* Usar flexbox para centrar los botones */
        justify-content: center; /* Centrar horizontalmente */
    }

    .divBtnTabPrep button {
        margin-bottom: 2%;
        background: linear-gradient(#ddd, #b6b3b3);
        color: black;
        border-radius: 5px;
        border: none;
        padding: 1%;
        height: 5vh;
        width: 100%;
        font-size: smaller;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .divBtnTabPrep button:hover{
        background-color: rgb(236, 219, 122);
    }
    
    

    #btnQuestion{
        margin: 0px;
        width: fit-content;
        background-color: white;
        color: #000000;
        align-self: flex-end;
        padding: 2px;
        margin: 3px;
        border: 1px solid #a8a2a2;
        border-radius: 5px;
        font-size: medium;
    }




    #weapp-prep{
        min-height: 15vh;
        max-height: 30vh;
    }


    #weapp-prep table-responsive-sm {
        overflow-x: auto;
        max-width: 100%;
    }

    
    #weapp-prep table {
        width: 100%;
        
    }
    
    #weapp-prep table thead th {
        position: sticky;
        top: 0;
        background-color: #fff; /* Cambia el color de fondo según sea necesario */
        z-index: 1; /* Asegura que el encabezado esté por encima del contenido de tbody */
    }
    
    #weapp-prep table tbody {
        display: block;
        max-height: 100px; /* Establece una altura máxima para tbody y habilita el desplazamiento vertical si es necesario */
        overflow-y: auto;
        font-size: small;
    }
    
    #weapp-prep table tbody::-webkit-scrollbar {
        width: 8px; /* Cambia el ancho del scrollbar según sea necesario */
    }
    
    #weapp-prep table tbody::-webkit-scrollbar-thumb {
        background-color: #888; /* Cambia el color del scrollbar thumb según sea necesario */
    }

    .small-text{
        font-size: small;
    }


    #colorPickPrep{
        border: 0px;
        padding: 0px;
    }


    .etiquetaPrepPrecios label{
        width: 350px;
    }
    .etiquetaPrepPrecios b{
        width: 350px;
    }
    .etiquetaPrepPrecios input{
        width: 350px;
    }

    #tabPrepSucTodas{
        margin: 0px;
    }
    
    

    #tabPrepSucTodas tr{
        width: 100%;
        font-size: medium;
    }
    #tabPrepSucTodas td{
        font-size: small;
    }



    .table-wrapperSucTodas {
        border: 1px solid #4d4d4d;
        width: 100%;
        height: 18vh;
        overflow: auto;
        margin-top: 10px;
      }
      
      .table-wrapperSucTodas table {
        border-collapse: separate;
        border-spacing: 0px;
      }
      
      .table-wrapperSucTodas table thead {
        position: -webkit-sticky; /* Safari... */
        position: sticky;
        top: 0;
        left: 0;
      }
      
      .ttable-wrapperSucTodas table thead th{
        background-color: #ffffff;
      }
      .table-wrapperSucTodas table tbody td {
        height: fit-content;
      }

      #table-wrapperSucTodas td{
        font-size: small;
      }



      
    .divBtnPrepSugerido button{
        margin-inline: 5px;
        width: fit-content;
        background: linear-gradient(#ddd, #666);
        color: black;
        border-radius: 5px;
        border: none;
        font-size: smaller;
        height: 50px;
        padding-top: 2px;
    }

    .divBtnPrepSugerido button:hover{
        background-color: rgb(255, 50, 50);
    }
    .divBtnPrepSugerido img{
        margin-inline: 5px;
    }

    #inputPrepHeadNombre{
        box-shadow: 2px 2px 3px 0px #5a5d61; 
        border: 1px solid #5a5d61; 
        background-color: white;
    }

    
    #inputPrepHeadClave{
        box-shadow: 2px 2px 3px 0px #5a5d61; 
        border: 1px solid #5a5d61; 
        background-color: white;
    }


    
    #inputPrepHeadCosto{
        padding: 2px;
        box-shadow: 2px 2px 3px 0px #5a5d61; 
        border: 1px solid #5a5d61; 
        background-color: white;
    }
    #inputPrepHeadPrice{
        padding: 2px;
        box-shadow: 2px 2px 3px 0px #5a5d61; 
        border: 1px solid #5a5d61; 
        background-color: white;
    }
    #inputPrepHeadIva{
        padding: 2px;
        box-shadow: 2px 2px 3px 0px #5a5d61; 
        border: 1px solid #5a5d61; 
        background-color: white;
    }

    .fit-content-bootbox .modal-dialog {
        width: fit-content;
        height: fit-content;
        max-width: 95%;
    }

    .reduce-b tr td b{
        font-size: small
    }

    
    .reduce-b tr td label{
        margin: 0px;
    }


    #miListaLinea,
#miListaSubL,
#miListaDep {
    width: 190px;
    background-color: white; 
    color: black; 
}

#miListaLinea option,
#miListaSubL option,
#miListaDep option {
    background-color: white; 
    color: black; 
}

#miListaLinea:hover,
#miListaSubL:hover,
#miListaDep:hover {
    background-color: rgb(190, 255, 255); 
    color: black; 
}

#miListaLinea:focus,
#miListaSubL:focus,
#miListaDep:focus {
    background-color: rgb(190, 255, 255); 
    color: black; 
}

.reduce-space-sucprec tbody tr td{
    padding: 0px;
    padding-inline: 0.2vw;
    margin: 0px;
    height: fit-content;
}


#tabPrepSucTodas thead{
    background: white;
  }
#tabPrepSucTodas thead th{
    position: sticky;
  }

  
  #tabPrepSucTodas td{
    margin: 0%;
    padding-top: 0.6%;
    padding-bottom: 0.6%;
    font-size: small;
    height: fit-content;
  }
  #tabPrepSucTodas thead th{
    margin: 0%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    height: fit-content;
  }
  
  #tabPrepSucTodas tr{
      margin: 0%;
      font-size: small;
      height: fit-content;
    }