.boton-menu{ 
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background-color:#fed353;
    width:40px; 
    height:40px;
    margin-left:8px;
    margin-top:10px;
    border-radius:5px;    
    border-width: 2px;
    border-color: yellow;
    border-style: outset;
    outline: 2px outset khaki;
    transform: translate(0px, -10px);
    overflow:hidden;
}

.menu-sup{
    width:100vw;
    height:58px; 
    display:flex;
    justify-content: center;
    align-items: center;
    
}
    
.menu-sec{
    width:95vw;
    height:58px; 
    display:flex;
    justify-content: space-between;
    align-items: center;
}    
    
    
    </style>
    
    <style>
  
body { 
    background-color:#EDECC3;
    width: 100%;
    higth:100%;
    padding-right:1%;    
    }
 
.contenedorImagen {      
    width: 200px;
    height: 200px;
    background-color: black;
    border: solid #9C9C04;
    border-width: 0.5vw; 
    border-radius: 5vw;
    display: flex;
    overflow:hidden;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Centrado horizontalmente */
}
   
.form-control{
    float: right;
    display: flex;
 //   justify-content:space-between;
}   

textarea{
    width: 99%;
    height:100%;
}
    
.text-center{   
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Centrado horizontalmente */    
}
    
.IntroTabla {
   // background-color: blue;
    background-color: #343404;
    color:yellow;
    padding: 2vw;
    width: 80%;
    height:140%;
    border: solid #9C9C04;
    border-width: 0.5vw; 
    border-radius: 2vw;
    font-family: "century gothic", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Centrado horizontalmente */
    overflow-y: scroll;
    overflow-x: scroll; 
}

table.ListaTabla {
    display: block;
    width: 100%;
    height: relative;
    color: #666;
    border: none;
    font-family: "century gothic", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

table.longTabla {    
    width: 93vw;
    height: relative;
    color: #666;
    border: none;
    font-family: "century gothic", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

//thead, tbody { display: block; }

tbody {    
    height: relative;
    overflow-y: auto;
    overflow-x: hidden;
    
}
thead {
    height: 5%;
    overflow-y: auto;
    overflow-x: hidden;    
}

#Topicos_Datatable {
    table-layout: fixed;
    width: 100em;
}

th{    
    border-bottom: solid blue;
    border: solid #C6C4BC;
    border-radius: 1vw;
    background-color:#D8D8C8;     
}

.tda{
   //display: block;// para la tienda
   width:94vw;  
   display: flex;
  //align-items: center;
   text-align: center; 
   justify-content: center;
   margin: 0 auto; /* Centrado horizontalmente */  
}

td{ 
   // display: block; para la tienda
   // width:94vw;    
    border-right: solid #C6C4BC;
    border-left: solid #D8D8C8;     
}

.tdp{
   background-color:#ECECE4;  
}

.tdc{
    border-bottom: solid black;    
}

.btnord{
    min-width:50vw; 
    max-width:70vw;
    display: flex;
    flex-direction: row;
    justify-content:space-between;    
}

.cont{    
    width:93vw; 
    height:70vh;
    padding:1vw; 
    background-color: white; 
    overflow-y: scroll; 
    border: solid #C6C4BC;
    border-width: 0.5vw;    
}

.contdos{    
    width:91vw; 
    height:150%; 
    padding:2vw; 
    background-color: black; 
    color:yellow;
    overflow-y: scroll; 
    border: solid #C6C4BC;
    border-width: 0.5vw;    
}

.contienda{    
    width:93vw; 
    height:relative;   
    padding:1vw; 
    background-color: white; 
    overflow-y: scroll; 
    border: solid #C6C4BC;
    border-width: 0.5vw;  
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Centrado horizontalmente */  
}

.tienda{
    width:98vw;
}

.transaccion{    
    width:70vw; 
    height:relative;    
    padding:3vw; 
    background-color: white; 
    overflow-y: scroll; 
    border: PowderBlue 5px double;
    border-width: 0.5vw;  
    display:;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Centrado horizontalmente */  
}

.right{
    display: flex;
    align-items: right;
    justify-content: right;
    text-align: right;
}

.text-right{
   
    align-items: right;
    justify-content: right;
    text-align: right;
}

.is-size-4{
    font-size:125%;
}

.supercont{   
    width:96vw;
    padding:1vw;
    height:relative; 
    background-color: yellow;       
    align-items: center;
    justify-content: center;
    text-align: center;  
    padding: 0 auto;
}

.ultracont{  
    width:98vw;   
    padding:;
    height:relative; 
    background-color: yellow;     
}

.row{    
    padding-right:2vw;
}

.cajita{
    background-color:#7C7C04;
    padding:1vw;
    border-radius: vw;
    border: solid #C6C4BC;
    border-width: 1vw;
    display: flex;
    justify-content:space-between;
    align-items: center;      
    display: flex;
    text-align: center;
    align-items: center;   
    margin: 0 auto; /* Centrado horizontalmente */   
}

.cajitaalt{
    background-color:#EDECC3;
    padding:1vw;
    border-radius: vw;
    border: solid #C6C4BC;
    border-width: 1vw;
    display: flex;
    justify-content:space-between;    
}

.cajitabeich{
    background-color:#EDECC3;
    padding:1vw;
    border-radius: vw;
    border: solid #C6C4BC;
    border-width: 1vw;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Centrado horizontalmente */     
    color: black;    
}

.cajitadarck{
    background-color:black;
    padding:1vw;
    border-radius: vw;
    border: solid #C6C4BC;
    border-width: 1vw;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Centrado horizontalmente */     
    color: yellow;    
}

.btn-info{
    color:white;
    text-decoration:none;
    border-bottom: solid yellow;
    border: solid #C6C4BC;
    border-radius: 1vw;
    background-color: orange;
    padding: 1vw;
}

.mb-2{
    color:white;
    height:5%;
    text-decoration:none;
    border-bottom: solid yellow;
    border: solid #C6C4BC;
    border-radius: 1vw;
    background-color: green;
    padding: 1vw;
}

.btn-danger{
    color:white;
    text-decoration:none;
    border-bottom: solid yellow;
    border: solid #C6C4BC;
    border-radius: 1vw;
    background-color: red;
    padding: 1vw;
    font-size: 104%;
}

.btn-warning{
    color:white;
    text-decoration:none;
    border-bottom: solid yellow;
    border: solid #C6C4BC;
    border-radius: 1vw;
    background-color: #00A9ff;
    padding: 1vw;
}

.btn-primary{
    color:white;
    text-decoration:none;
    border-bottom: solid yellow;
    border: solid #C6C4BC;
    border-radius: 1vw;
    background-color: #0fe00f;
    padding: 1vw;
}

.btn-success{
    color:black;
    text-decoration:none;
    font-size: x-large;
    border-bottom: solid yellow;
    border: solid #C6C4BC;
    border-radius: 1vw;
    background-color: orange;
    padding: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Centrado horizontalmente */  
}

.caneca{
    background-color: red;
    background-image: url("./img/eliminar.jpg");
    background-size: contain; 
    height:45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
   
.nav-link{
    color: yellow;
    font-size: 1.2rem;
    }
    
.navbar-brand {   
    background-color:black;
    color: yellow;
    }

.collapse {
    width:96vw; 
    background-color:black;
    color: yellow;
    margin-top:-2vw;
    padding:1vw;
    }
  
.banner {       
        background-color:black;
        width: 96vw;
        padding: 1vw;
        display: flex;
        justify-content:space-between;
        color:yellow;
    }

.toggler {    
    left: 50px;
    height:50px;
    width: 50px;
    margin: auto;
    color: black;
    background-color: yellow;
    background-image: url("./img/menu.png");
    background-size: contain;   
    }

h3 {
    color: ;
    }
    
toto{
    background-color: white;
    }
           
a{
    text-decoration:none;
}   
       
.cajabotonesinf{
    height:10vw;
    width: 100%;
}

.col-3{
    
    height: relative;
    background-color:#EDECC3;
    display: inline-block;   
    
}

.col-4{
    min-height: 40vw; 
    height: relative;
    background-color:#EDECC3;
    display: inline-block;       
}

.my-2{
    background-color:black;
    border: solid #C6C4BC;
    width: 48%;
    padding:1vw;
    color: yellow;
}

.my-{
    background-color:black;
    border: solid #C6C4BC;
    width: 48%;
    padding:1vw;
    color: yellow;
}

.my-3{
    background-color:white;
    width: 24.93%;
}

.my-4{
    background-color:white;
    width: 34%;
    min-height: 40%; 
}

.col-12{    
    min-height: 22vw;            
}

.card{
    height: 40vw;    
    padding: 0.5vw;
    display: block;
}

.card2{
    height: 50vw;    
    padding: 0.5vw;
    display: block;
}

 canvas{
     height: absolute;
     width: absolute;
     color: yellow;
 }
 
 canvas2{
     border: solid red;
     height: relative;
     width: relative;
     color: yellow;
 }

.img-fluid{
    height: relative;
    width: 94%;
    margin: 4%;
    background-color:white;
}

.unic{
    display: absolute ; 
    padding: 3vw;
    margin: 0 auto; /* Centrado horizontalmente */      
    height: relative;
    width: 90vw;
    border-width: 1vw;
    border: solid red;
    overflow:hidden;
    background-color: #343404;
}

.unicos{
    display: flex; 
    margin: 0 auto; /* Centrado horizontalmente */  
    height: relative;
    width: 200%;
    
}

.inf{
    display: flex; 
    justify-content: center;
}

.sup{
    display: flex; 
    justify-content: center;
}

.card-subtitle{
    color:black;
    height:20px;
    text-decoration:none;
    border: solid yellow;
    border-radius: 1vw;
    background-color: #C6C4BC;
    padding: 1vw;
}

.btn-info1{
    transform: translate(3vw);
    right: 0vw;
    width: 16vw;
    height: 6vw;
    color:white;
    padding: 3px 10px;
    border: PowderBlue 5px double;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0;
    text-align:center; 
    text-decoration:none;         
    background-color: orange;
}

.btn-info2{
    transform: translate(-3vw);
    left: 0vw;
    width: 16vw;
    height: 6vw;
    color:white;
    padding: 3px 10px;
    border: PowderBlue 5px double;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0;
    text-align:center; 
    text-decoration:none;         
    background-color: orange;
}

.btn-info3{
    transform: translate(3vw);
    right: 0vw;
    width: 20vw;
    height: 8.2vw;
    color:white;
    padding: 3px 10px;
    border: PowderBlue 5px double;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0;
    text-align:center; 
    text-decoration:none;         
    background-color: orange;
}

.btn-info4{
    transform: translate(6vw);
    right: 0vw;
    width: 10vw;
    height: 5vw;
    color:white;
    padding: 3px 10px;
    border: PowderBlue 5px double;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0;
    text-align:center; 
    text-decoration:none;         
    background-color: red;
}

.btn-printt{
    color:white;
    max-height: 6vw;
    text-decoration:none;
    border: PowderBlue 5px double;
    border-radius: 20px;
    background-color: #0fe00f;
    padding: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration:none;  
}

.altras{
    display: flex;
  justify-content: space-between;
}

.savecot{    
    right: 0vw;
    width: 16vw;
    height: 6vw;
    color:white;
    padding: 3px 10px;
    border: PowderBlue 5px double;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align:center; 
    text-decoration:none;         
    background-color: orange;
}

.pag{    
    right: 0vw;
    width: 16vw;
    height: 6vw;
    color:white;
    padding: 3px 10px;
    border: PowderBlue 5px double;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align:center; 
    text-decoration:none;         
    background-color: orange;
}

.cajatrans{
    padding: 2vw;
    border: PowderBlue 5px double;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;    
}

.cajapag{
    margin-top: -1.2em;
    padding: 2vw;
    border: PowderBlue 5px double;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;  
    display: flex;
    align-items: center;
    justify-content: center;    
    text-align:center;   
}

.paypal{
    width: 30vw;
    height: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align:center; 
}
.btn-paypal{
    width: 30vw;
    height: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align:center; 
    
}

.nequi1{
    width: 20vw;
    height: 7vw;
    
    background-size: contain; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align:center; 
}
.nequi2{
    width: 40vw;
    height: 40vw;
    
    background-size: contain; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align:center; 
}
.nequi3{
    width: 30vw;
    height: relative;
    text-align:center; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align:center; 
}

.mercadopago{
    width: 30vw;
    height: 15vw;
    
    background-size: contain; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align:center; 
}
.btn-mercadopago{
    width: 30vw;
    height: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align:center; 
    background-color:#ffd700;
    padding:2vw;
    border-radius:3vw;
    font-size:3vw;
}

.mercadolibre{
    width: 30vw;
    height: 15vw;    
    background-size: contain; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align:center; 
}
.btn-mercadolibre{
    width: 30vw;
    height: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align:center; 
    background-color:#ffd700;
    padding:2vw;
    border-radius:3vw;
    font-size:3vw;
}