.salvador:focus-visible{
  border: none;
  outline: none;
}

.salvador:focus{
  border: none;
  box-shadow: none !important;
}
.salvador:active{
  border: none;
}

.salvador{
  border: none;
  color: transparent;
}

* {
  margin: 0%;
  padding: 0%;
}

.shadow{
  box-shadow: 2px 2px 2px 2px lightgray;
}

.shadow2{
  box-shadow: 2px 2px 2px 2px lightgray;
  padding: 4%;
  margin: 2%;
}

.shadow3{
  box-shadow: 2px 2px 2px 2px lightgray;
  margin: 1%;
  padding-left: 3%;
}

.shadow4 {
  box-shadow: 2px 2px 2px 2px lightgray;
  padding: 2%;
  margin: 2%;
}

.box{
  box-shadow: 3px 2px 3px rgba(0,0,0,0.1) !important;
}

h4.inicio{
  text-decoration-style: solid;
  color: aliceblue;
  font-weight: bold;
}

.l{
  text-decoration-style: solid;
  font-size: 1.2em;
}

.ini-col{
  background-color: #3097D1;
} 

.centrar{
  margin: 1rem;
  padding: 0rem;
  /* IMPORTANTE */
  text-align: center;
  background-color: white;
}

.back{
  margin: 1rem;
  border: 1px solid #ccc;
  background-color: white;
}

.centrar2{
  margin: 3rem;
  padding: 2rem;  
}


.aa{
  float: right;
  margin-right: 1%;
}

.col-center{
  float: none;
  margin: 0 auto;
}

.borde{
  margin-right: 3%;
}

.borde2{
  margin-right: 3%;
}

.noresize {
  resize: none; 
}

.material-icons{
  font-size: 16px !important;
}


.anyClass {
  height:350px;
  overflow-y: scroll !important;
  width: 100%;
}

.anyClass2 {
  height:250px;
  overflow-y: scroll !important;
  padding-left: 8%;
}

.anyClass3 {
  width: 100%;
}

.anyClass4 {
  height:750px;
  overflow-y: scroll !important;
}

.anyClass5 {
  height:500px;
  overflow-y: scroll !important;
}

.scr{
  height:250px;
  overflow-y: scroll !important;
  padding-left: 0%;
}

.scr2{
  height:350px;
  overflow-y: scroll !important;
  padding-left: 0%;
}

.scr3{
  height:167px;
  overflow-y: scroll !important;
  padding-left: 0%;
}

.anyClass6 {
  height:440px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 2%;
  margin: 0px;
}

.anyClass8 {
  height:600px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 2%;
  margin: 0px;
}

.anyClass7 {
  height:178px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.scrollT {
  height:265px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.scro{
  height:184px;
  overflow-y: scroll !important;
  padding-left: 8%;
}

.vacio{
  text-align: center;
}

label{
  font: bold;
  color: gray;
  font-size: small;
  font-family: serif;
}

.bt {
  border: none;
  background: #c62828;
  color: #ffffff !important;
  font-weight: 25;
  padding: 7px;
  text-transform: uppercase;
  border-radius: 6px;
  display: inline-block;
}

.bt:hover {
  color: #ef9a9a !important;
  font-weight: 700 !important;
  letter-spacing: 3px;
  background: none;
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
  transition: all 0.3s ease 0s;
}


.divEle {
 box-shadow: 0px 0px 10px 0px #333;
}

.border {
  border: 2px solid lightgray;
  border-radius: 5px;
  padding: 4%;
  padding-bottom: 6%;
}

.border2 {
  border: 2px solid lightgray;
  border-radius: 5px;
  padding: 4%;
  padding-bottom: 22%;
}

.border3 {
  border: 2px solid lightgray;
  border-radius: 3px;
  padding: 1%;
  padding-bottom: 1%;
}

.h4 {
  text-transform: uppercase;
}

.botonPlan{
  height: 40px;
  width: 50%;
  background: #3c8dbc;
  color:#fff;
  box-shadow: 0 0 1px #ccc;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: linear;
  box-shadow:0px 0 0 #31708f  inset;
  font-size: large;
}
.botonPlan:hover{
  box-shadow:400px 0 0 #eceff1 inset;
  font-size: 90%;
}

.botonCarrito1{
  margin-left: 10%;
  height: 30px;
  width: 80%;
  background: #1b5e20;
  color:#fff;
  box-shadow: 0 0 1px #ccc;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: linear;
  box-shadow:0px 0 0 #31708f  inset;
  font-size: medium;
}
.botonCarrito1:hover{
  box-shadow:400px 0 0 #2e7d32 inset;
  font-size: 90%;
}

.botonCarrito2{
  margin-left: 10%;
  height: 30px;
  width: 80%;
  background: #ef5350;
  color:#fff;
  box-shadow: 0 0 1px #ccc;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: linear;
  box-shadow:0px 0 0 #31708f  inset;
  font-size: medium;
}

.botonCarrito2:hover{
  box-shadow:400px 0 0 #c62828 inset;
  font-size: 90%;
}

.thead {
  display: table; /* to take the same width as tr */
  width: calc(100% - 17px); /* -17px because of the scrollbar width */
}

.tbody {
  display: block; /* to enable vertical scrolling */
  max-height: 300px; /* e.g. */
  overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}
th{
  text-align: center;
}


.spn{
  margin-left: -78%;
  font-family: fantasy;
  font-size: larger;
}

.spn2{
  margin-left: -78%;
  font-family: fantasy;
  font-size: x-large;
}

.espacio{
  margin: 5%;
}

.btn_comprar_cancelar{
  margin-top: 15%;
}

.espacio_total{
  margin-top: 5%;
  text-align: left;
  margin-left: 2%;
  font-family: fantasy;
  padding: 2%;
}

.card_one:hover{
  box-shadow: 1px 1px 2px 2px lightgray;
  transition: 0.1s ease;
}

.card_one2:hover{
  box-shadow: 2px 2px 4px 4px lightgray;
  transition: 0.1s ease;
}


.tamano{
  font-size: 2.2em;
  padding-left: 2 %;
  margin-top: 7%;
  color: #bdbdbd;
  text-align: center;
}


.tamano2{
  font-size: 1.2em;
  padding-left: 2 %;
  color: #bdbdbd;
  text-align: center;
}

.marca{
 padding: 0;
 opacity: 0.6;
 margin-left: 0%;
 padding-top: 0%;
}

.marca_agua{
 padding: 0;
 opacity: 0.6;
 margin-left: 40%;
 padding-top: 5%;
}

.marca_agua2{
 padding: 0;
 opacity: 0.6;
 margin-left: 0%;
 padding-top: 5%;
}

.marca_agua3{
 padding: 0;
 opacity: 0.6;
 margin-left: 0%;
 padding-top: 5%;
 text-align: center;
}

.marca_agua4{
 opacity: 0.6;
 text-align: center;
}

.botones{
  margin-top: 18%;
  text-align: center;
  margin-bottom: -11%;
}

.tamImg{
  width: 80%;
}

.font{
  font-size: 63%;
}

.btn_recetAdd{
  margin: 1rem;
  padding: 1rem;
  /* IMPORTANTE */
  text-align: center;
}

.btn_acciones{
  width: 15%;
}

@media (min-width: 0px) and (max-width: 640px) {
  .btn_acciones{
    width: 100%;
  }
}

@media (min-width: 640px) and (max-width: 1080px) {
  .btn_acciones{
    width: 35%;
  }
}


.btn_recetAdd2{
  /* IMPORTANTE */
  text-align: center;
}

.form-control-borderless {
  border: none;
}

.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

@media (min-width: 360px) and (max-width: 640px) {
  #respon{
    width: 53.333%;
  }
}

@media (min-width: 360px) and (max-width: 640px) {
  #respon{
    width: 53.333%;
  }
}
.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
  .modal-dialog {
    display: block;
    text-align: center;
    vertical-align: middle;
  }
}

@media screen and (max-width: 767px) { 
  .modal-dialog {
    display: block !important;
    text-align: center;
    vertical-align: middle;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.agua{
  opacity: 0.7;
}

.rhb{
  margin-top: 3%;
}

.encima:hover{
  background-color: #3c8dbc;
  color: white;
}

.seleccionado{
  background-color: #b7b7b7;
  color: black;
  padding-bottom: 22%;
}

.seleccionado2{
  background-color: #b7b7b7;
  color: black;
  padding-bottom: 46%;
  text-align: center;
}

.seleccion{
  background-color: lightgray;
}

.btn-danger{
  background-color: #e53935 !important;
  border-color: #d73925;
}

.tam-card{
  background: #fff;
  color: #29303b;
  height: 90px;
  display: block;
  font-size: small;
  overflow: hidden;
  position: relative;
}

.tam-card2{
  background: #fff;
  color: #29303b;
  height: 130px;
  display: block;
  font-size: small;
  overflow: hidden;
  position: relative;
}


.tanCard{
  width: 115%;
}

.tanCard2{
  width: 110%;
}

@media (min-width: 360px) and (max-width: 846px) {
  .tanCard{
    width: 100%;
  }
}

.cuadro{
  padding-bottom: 1%;
}

.fecha{
  font-size: x-large;
  color: #01579b;
}

.disponible{
  font-size: small;
  padding: 1%;
  color: #e65100;
}

.hora{
  font-size: medium;
  padding: 2%;
  color: #337ab7;
  padding: 1%;
}

.esconder::-webkit-scrollbar {
  width: 12px;
}

.esconder::-webkit-scrollbar-track {
  color: transparent;
  background-color: transparent;
  border-radius: 10px;
}

.esconder::-webkit-scrollbar-thumb {
  border-radius: 10px;
  color: transparent;
  background-color: transparent;
}


@media (min-width: 360px) and (max-width: 846px) {
  #depa{
    width: 100%;
    margin: 5%;
    text-align: center;
  }
  #especialidad{
    width: 100%;
    margin: 5%;
    text-align: center;
  }
  #profesion{
    width: 100%;
    margin: 5%;
    text-align: center;
  }
  #avatar{
   margin-left: 10%;
 }

}

@media (min-width: 768px) and (max-width: 1024px) {
  #depa{
    width: 100%;
    margin: 5%;
    text-align: center;
  }
  #especialidad{
    width: 100%;
    margin: 5%;
    text-align: center;
  }
  #profesion{
    width: 100%;
    margin: 5%;
    text-align: center;
  }

  #avatar{
   margin-left: 10%;
 }

}

.estiloTarjeta{
  background-color: #cfd8dc;
  padding: 1%;
  border-radius: 25px;
  width: 40%;
}


@media (min-width: 360px) and (max-width: 846px) {
  .estiloTarjeta{
    background-color: white;
    padding: 1%;
    border-radius: 25px;
    width: 100%;
  }

  #tarjeta{
    background-color: #cfd8dc;
  }

  #propietarioTarjeta{
    text-align: center !important;
  }

  #barCode{
    padding-bottom: 2%;
    font-size: smaller;
  }

}

@media (min-width: 768px) and (max-width: 1024px) {
  .estiloTarjeta{
    background-color: white;
    padding: 1%;
    border-radius: 25px;
    width: 100%;
  }

  #tarjeta{
    background-color: #cfd8dc;
  }

  #propietarioTarjeta{
    text-align: center !important;
  }

  #barCode{
    padding-bottom: 2%;
  }

}

@media (min-width: 0px) and (max-width: 480px) {
  .estiloTarjeta{
    background-color: white;
    padding: 1%;
    border-radius: 25px;
    width: 100%;
  }

  #tarjeta{
    background-color: #cfd8dc;
  }

  #propietarioTarjeta{
    text-align: center !important;
  }

  #barCode{
    padding-bottom: 2%;
  }

}


@media (min-width: 0px) and (max-width: 980px) {
  #queryTable{
    min-height: .01%;
    overflow-x: auto;
  }

  .tata{
   position: absolute;
   left: 50%;
   top: 50%;
   width: 400px;
   height: 200px;
   margin: -100px 0 0 -200px;
 }


 @media (min-width: 360px) and (max-width: 846px) {
  .tata{
   position: absolute;
   left: 50%;
   top: 50%;
   width: 400px;
   height: 200px;
   margin: -100px 0 0 -200px;
 }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .tata{
   position: absolute;
   left: 50%;
   top: 50%;
   width: 400px;
   height: 200px;
   margin: -100px 0 0 -200px;
 }

}

.titulo{
  text-align: left !important; 
  margin-top: 0%; 
  padding: 1%;
  color: #222d32;
}

td:hover{
  cursor:move;
}

.map {
  height: 900px;
  width: 100%;
}

.la{
  font-size: 88% !important;
}


td {
 width: 100px;
 white-space: nowrap;
 overflow: hidden;         
 text-overflow: ellipsis;
}