#gestorCitas { max-width: 1000px; margin: 5px auto; } #gestorCitas h1, #gestorCitas h2, #gestorCitas h3 {  margin: 0; } #gestorCitas button {   border: none;   padding: 7px 20px;   border-radius: 10px;   margin: 5px 10px; } #cabeceraCitas{ background: #fff; z-index: 1000; } #FormRegistroRapido{ margin: 0; } #pasos{  display: table; width: 100%; background: #ececec; } #paso1, #paso2, #paso3, #paso4 {  margin: 20px auto;  } .paso{  width: 150px;  display: table-cell;  border-left: 1px dotted darkgrey;  border-bottom: 4px solid darkgrey; opacity: 0.5; } .pasoOn{  border-bottom: 4px solid darkgreen;  background: #C7ECC4; opacity: 1;  } .numero{  font-size: 3em; float: left;  font-weight: bold; width: 45px;height: 45p; text-align: center; } #pasos span{ margin: 5px; line-height: 1; } #buscaResultado h3{ margin-top: 10px; } .citaEditar:hover{ background: #ccc; cursor: pointer; } #horario1, #horario2{ margin-bottom: 10px; } .servicio label { display: inline-block; font-weight: normal; } #datepicker{  font-size: 13px; margin-right: 10px; } textarea{  border: 1px solid grey; }  #leyenda{  margin: 10px 0px 40px 50px; display: table; } #leyenda div{  display: table-row; margin-top: 5px; } #mananas, #tardes {   height: 100px; } #mananas .celda, #tardes .celda {   border-left: 1px dashed #ccc; } #horas{ margin: 0px auto 40px; } #horas .fa{ cursor: pointer; } .horario{  position: relative; background: rgba(133, 254, 133, 0.50); height: 50px; margin-top: 5px; margin-top: -70px; margin-bottom: 60px; } #horarioNuevo, .horarioOcupado{   position: absolute;   font-size: 0.7em;   height: 60px;   margin-top: -5px;   border-radius: 5px; } #horarioNuevo{   background: rgba(0,255,21,0.3); cursor: cell; padding-top: 30px; font-size: 1.3em; color: green; } #horarioNuevo.fijado{   background: rgba(0,255,21,0.8); } #horarioNuevo.ko{   background: rgba(255,0,0,0.3); color: red;   cursor: no-drop; } .horarioOcupado {   background: rgba(152,146,146,0.4); } .horarioOcupado .horaCita {   -o-transform: rotate(-90deg);   -moz-transform: rotate(-90deg);   -webkit-transform: rotate(-90deg);   transform: rotate(-90deg);   display: inline-block;   color: red;   margin: 9px 0px 0px -4px;   margin-right: -1px; } .horarioLibre{ position: absolute; height: 60px; margin-top: -5px; } .antLibre, .sigLibre {   padding: 5px 12px;   cursor: pointer; } .adminCita, .separa .titular, .separa .celda{ margin-bottom: 5px; padding: 5px; border-bottom: 1px dashed darkgrey; } .separa b.titular {   width: 190px;   display: table-cell;   text-align: right;   padding-right: 10px; } #solicitarHora{ font-size: 1.8em; }  select#id_usuario{ width: 70%; } select#id_referidor{ width: 70%; }  .ui-datepicker .ui-datepicker-unselectable.estoyVacas span, span.estoyV{ background: #78FFCD; } .ui-datepicker .ui-datepicker-unselectable.estoyFiesta span, span.estoyF { background: #FFC917 !important; } span.estoyF, span.estoyV{ width: 20px; height: 20px; display: block; margin-right: 5px; float: left; opacity: 0.35;} .eligecita{  display: inline-block;  padding: 3px 8px;  margin: 3px 5px;  text-align: center;  line-height: 1;  width: 60px;  vertical-align: top;  } .eligecita.libre{  border: 1px solid #2184C5;   } .eligecita.libre:hover, .eligecita.reservado{  background: #2184C5;  cursor: pointer;   } .eligecita.ocupado{  cursor: not-allowed; } .eligecita.nodisponible,.eligecita.nodisponible:hover{  background: #fc6d6d; border: 1px solid #fc6d6d; color: #fff;  cursor: not-allowed; } .eligecita .tachado{ display: block; border: 1px; } .gabinete.on{ background: #C7ECC4; }   .gabinete, .cita {  border: 1px solid #ccc; border-radius: 5px; padding: 10px; margin:40px; } #itemcontenido .gabinete{ margin: 0; border: none; } .gabinete:hover, .nuevacita:hover{  cursor: pointer; background: #ececec; } #itemcontenido .gabinete{ margin: 0; border: none; } #itemcontenido .gabinete:hover{ cursor: default; background: none; } .gabinete p{ margin-top:0; padding-top: 0; } #nuevacita {  text-align: center; margin: 20px auto;  width: inherit; display: table; } #nuevacita:hover {  background: #C7ECC4; cursor: pointer; } .cita { width: 300px; margin: 20px 5px; display: inline-block; vertical-align: top; } .borrar{  float: right; cursor: pointer; } .paginaA4{ margin-top: 10mm; height:279mm; width:210mm; } @media only screen and (max-width: 500px) { #gestorCitas{  margin: 100px 5px 5px 5px; } #cabeceraCitas{  position: fixed;  left: 0;  right: 0;  top:0;  padding-top: 10px; } .paso{ width: 25%; }   .numero {   float: inherit;   display: block;   width: initial;   text-align: left;   line-height: 1; font-size: 2em; } .gabinete, .cita{  margin: 20px; } #paso2 .celda{  display: block;  width: initial;  margin-bottom: 20px; } textarea{  width: 100%; } #paso4 .fila, #paso4 .celda, .separa b.titular {  display: block;  width: inherit;  } .separa b.titular{  text-align: left;  padding-right: 0;  border: none;  margin: 0;  padding: 0px 5px; } }