.fakeimg {
    height: 200px;
    background: #aaa;
}
    
.popup{
    background-color:#000000a8;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center
}

.popup2{
    background-color:#000000a6;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center
}
.popup-content{
    display:none;
    max-width:20000px;
    width:100%;
    background:#eee;
    overflow-y:auto;
    overflow:auto;
    position:relative;
    padding:35px;
    margin:auto;
    box-sizing:border-box;
    transition:0.3s ease; 
    z-index: 1500;
}
.popup-content .close{
    position:absolute;
    right:15px;
    top:5px;
    cursor:pointer
}.showPopup .popup{
    display:flex
}.showPopup .popup-content{
    display:block;animation:
    popup 0.7s forwards
}
body.removePopup .popup-content{animation:popupclose 0.7s forwards!important}@keyframes popup{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1);opacity:1}}@keyframes popupclose{0%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:.5}} 


.demo {
    border:1px solid #C0C0C0;
    border-collapse:collapse;
    padding:1px;
    width: 100%;
}
.demo th {
    border:3px solid #C0C0C0;
    padding:1px;
    background:#EEE;
    color: #000;
}
.demo td {
    border:3px solid #C0C0C0;
    padding:1px;
}
.popup{background-color:#000000a6;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:none;align-items:center;justify-content:center}.popup-content{display:none;max-width:100%;width:100%;background:#EEEEEE;overflow-y:auto;overflow:auto;position:relative;padding:35px;margin:0 15px;box-sizing:border-box;transition:0.3s ease; z-index: 1500;}.popup-content .close{position:absolute;right:5px;top:5px;cursor:pointer}.showPopup .popup{display:flex}.showPopup .popup-content{display:block;animation:popup 0.7s forwards}body.removePopup .popup-content{animation:popupclose 0.7s forwards!important}@keyframes popup{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1);opacity:1}}@keyframes popupclose{0%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:.5}}

#qr-canvas {
margin: auto;
width: calc(100% - 20px);
max-width: 400px;
}

#btn-scan-qr {
cursor: pointer;
}

#btn-scan-qr img {
height: 10em;
padding: 15px;
margin: 15px;
background: white;
}

#qr-result {
font-size: 1.2em;
margin: 20px auto;
max-width: 700px;
background-color: black;
}

.vertical {
border-left: 5px solid black;
height: 40px;
display: inline !important;
}
.rojo{
background-color: red !important;
color: #eee;
}



.fijo{
      width: 98%;
      max-height: 500px;
      right: 0;
      left: 0;
      bottom: 0px; 
}

.dim {
      width: 100%;
      height: 140px;
      position: fixed;
      background: #eee;
      text-align: center;
      right: 0;
      left: 0;
      top: 2px;
      color: #23262F !important;
      padding-left: 5px;
      padding-right: 5px;         
      white-space: nowrap;  
      
    }

    .romper{
        word-wrap: break-word;
        white-space: nowrap;
    }
    .dom{
        border-radius: 7px;
        font-size: 12px;
        display: inline;
        /*border: 1px solid #000000;*/
        text-overflow: ellipsis;
        word-wrap: break-word;
        max-width: 300px;
        min-height: 100px;
        font-weight: bold;
        background-color: #EEE;
        color: #000;
        box-shadow: 0 9px 18px -5px #6567dbd6;
        transition: all .3s ease-in-out;        
      }
      .dom:hover { 
          transform: translateY(4px);
          box-shadow: none;
  
      }
.centrado1 {
    display: flex;
    align-items: center;
    justify-content: center;
}
.centrado2{
    display: grid;
    place-items: center;
}
.favoritos{
    background-color: #4A75FC;
}
.tam{
    font-size: 50px;
}

.table-responsive{
    border-radius: 10px;
    box-shadow: 5px 5px 15px gray;
    transition: all .3s ease-in-out;
}
table{
    text-align: center !important;
    width: 100% !important;
}
      .dem{
        border-radius: 7px;
        font-size: 12px;
        text-overflow: ellipsis;
        word-wrap: break-word;
        height: 100px;
        background-color: #eeeeee;
        font-weight: bold;
        color: #000;
        box-shadow: 0 9px 18px -5px #6567dbd6;
        transition: all .3s ease-in-out;        
      }
      .dem:hover { 
          transform: translateY(4px);
          box-shadow: none;
  
      }

    .col{
margin: 3px;
border-radius: 10px;
text-align: center;
}

.gradiente{
background: rgb(6,123,166) !important;
background: linear-gradient(90deg, rgba(6,123,166,1) 0%, rgba(157,1,80,1) 100%) !important;
}

.sombra{
border-radius: 10px;;
box-shadow: 5px 5px 15px #16636d;
transition: all .3s ease-in-out;
}

.sombre{
    border-radius: 10px;;
box-shadow: 5px 5px 15px #16636d;
}

.sombri{
box-shadow: 5px 5px 15px #000000;
}
.sombra:hover{
    transform: translateY(4px);
    box-shadow: none;
}



.camb:hover{
color: rgb(3,33,76) !important;
color: linear-gradient(90deg, rgba(3,33,76,1) 0%, rgba(18,51,97,1) 100%) !important;
}
    .animar{
animation:size 3s;
animation-iteration-count:infinite;
}
    @keyframes size {
    0% {
        color: yellow;
    }

    25% {
      color: blue;
    }

    50% {
      color: pink;
    }

    75% {
      color: black;
    }

    100% {
      color: white;
    }
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
-webkit-appearance: none; 
margin: 0; 
}
#audio{
display: none
}
.col{
margin: 3px;
border-radius: 10px;
text-align: center;
}
 input:hover{
    background-color: #AAFEFE;
    color: #000000;
  }