@charset "UTF-8";
#adminHomeContainer {
  width: 100%;
}
#adminHomeContainer #reloj {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 8rem;
  padding: 45px;
  margin-bottom: 25px;
  border-radius: 10px;
  font-weight: 400;
  font-style: normal;
}
#adminHomeContainer .adminHomeButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
#adminHomeContainer .adminHomeButtons .buttonHomeAdmin {
  width: 100%;
  max-width: 300px;
  height: 90px;
  margin-top: 0px;
  margin-right: 25px;
  opacity: 0;
  padding: 10px 0px;
  font-size: 40px;
  border-radius: 10px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: all 300ms;
}
#adminHomeContainer .adminHomeButtons .buttonHomeAdmin:hover {
  background-color: #FFCA02;
}
#adminHomeContainer .adminHomeButtons button:last-child {
  margin-right: 0px;
}

#pacientesContainer,
#deudoresContainer {
  width: 100%;
}
#pacientesContainer .tableContainer,
#deudoresContainer .tableContainer {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
  /* Evitar que la fila se rompa en scroll */
}
#pacientesContainer .tableContainer table,
#deudoresContainer .tableContainer table {
  width: 100%;
  background-color: rgb(217, 217, 217);
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
}
#pacientesContainer .tableContainer thead,
#deudoresContainer .tableContainer thead {
  display: block;
  /* Mantener cabecera fija */
}
#pacientesContainer .tableContainer tbody,
#deudoresContainer .tableContainer tbody {
  display: block;
  height: 300px;
  /* Alto fijo del tbody */
  overflow-y: auto;
  /* Scroll vertical */
}
#pacientesContainer .tableContainer th,
#pacientesContainer .tableContainer td,
#deudoresContainer .tableContainer th,
#deudoresContainer .tableContainer td {
  padding: 10px 15px;
  text-align: center;
  width: 20%;
  /* Ajustar según la cantidad de columnas */
  box-sizing: border-box;
}
#pacientesContainer .tableContainer th,
#deudoresContainer .tableContainer th {
  opacity: 0.8;
  background-color: #FFDD5E;
  color: #202020;
  text-transform: uppercase;
}
#pacientesContainer .tableContainer tr:nth-child(even),
#deudoresContainer .tableContainer tr:nth-child(even) {
  background-color: #f2f2f2;
}
#pacientesContainer .tableContainer tr:hover,
#deudoresContainer .tableContainer tr:hover {
  background-color: #FFF58D;
}
#pacientesContainer .tableContainer tbody tr,
#deudoresContainer .tableContainer tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
#pacientesContainer .tableContainer thead tr,
#deudoresContainer .tableContainer thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
#pacientesContainer .tableContainer .noDeudor,
#deudoresContainer .tableContainer .noDeudor {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}
#pacientesContainer .tableContainer tfoot tr td,
#deudoresContainer .tableContainer tfoot tr td {
  text-align: left;
}
#pacientesContainer .tableContainer tfoot tr:hover,
#deudoresContainer .tableContainer tfoot tr:hover {
  background-color: transparent;
}
#pacientesContainer #infoPacientesBox,
#pacientesContainer #searchPacientesBox,
#pacientesContainer #searchDeudoresBox,
#deudoresContainer #infoPacientesBox,
#deudoresContainer #searchPacientesBox,
#deudoresContainer #searchDeudoresBox {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  min-height: 30px;
  padding: 10px;
  margin-top: 20px;
  background-color: rgb(217, 217, 217);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
}
#pacientesContainer #infoPacientesBox input,
#pacientesContainer #infoPacientesBox select,
#pacientesContainer #searchPacientesBox input,
#pacientesContainer #searchPacientesBox select,
#pacientesContainer #searchDeudoresBox input,
#pacientesContainer #searchDeudoresBox select,
#deudoresContainer #infoPacientesBox input,
#deudoresContainer #infoPacientesBox select,
#deudoresContainer #searchPacientesBox input,
#deudoresContainer #searchPacientesBox select,
#deudoresContainer #searchDeudoresBox input,
#deudoresContainer #searchDeudoresBox select {
  border-radius: 5px;
  border: none;
  width: 220px;
  min-height: 30px;
  margin-right: 10px;
  border: 1px solid #333;
  background-color: rgb(217, 217, 217);
  padding: 0px 6px;
}
#pacientesContainer #infoPacientesBox select,
#pacientesContainer #searchPacientesBox select,
#pacientesContainer #searchDeudoresBox select,
#deudoresContainer #infoPacientesBox select,
#deudoresContainer #searchPacientesBox select,
#deudoresContainer #searchDeudoresBox select {
  width: 234px;
}
#pacientesContainer .buttonBox,
#deudoresContainer .buttonBox {
  border-radius: 5px;
  border: none;
  width: 220px;
  min-height: 30px;
  margin-right: 10px;
  padding: 0px 6px;
}
#pacientesContainer .buttonBox button,
#deudoresContainer .buttonBox button {
  text-align: center;
  padding: 7px;
  cursor: pointer;
  background-color: #FFCA02;
  opacity: 0.5;
  transition: all 300ms;
}
#pacientesContainer .buttonBox #limpiarPacienteButton,
#pacientesContainer .buttonBox #limpiarDeudorButton,
#pacientesContainer .buttonBox #limpiarInfoPacienteButton,
#deudoresContainer .buttonBox #limpiarPacienteButton,
#deudoresContainer .buttonBox #limpiarDeudorButton,
#deudoresContainer .buttonBox #limpiarInfoPacienteButton {
  border-radius: 10px 0px 0px 10px;
  border: none;
  border-right: 2px solid rgb(217, 217, 217);
  width: calc(50% - 2px);
}
#pacientesContainer .buttonBox #searchPacienteButton,
#pacientesContainer .buttonBox #searchDeudorButton,
#pacientesContainer .buttonBox #updatePacienteButton,
#deudoresContainer .buttonBox #searchPacienteButton,
#deudoresContainer .buttonBox #searchDeudorButton,
#deudoresContainer .buttonBox #updatePacienteButton {
  border-radius: 0px 10px 10px 0px;
  border: none;
  border-left: 2px solid rgb(217, 217, 217);
  width: calc(50% - 2px);
}
#pacientesContainer .buttonBox button:hover,
#deudoresContainer .buttonBox button:hover {
  opacity: 1;
}

.buttonUser {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 30px;
  cursor: pointer;
  z-index: 1;
}

#homeButton {
  width: 33px;
  right: 50px;
}

#searchButton {
  right: 93px;
}

#printerButton {
  right: 132px;
}

#searchBox {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: rgba(217, 217, 217, 0.6);
  z-index: 3;
}
#searchBox #search {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: baseline;
  position: relative;
  width: 80%;
  background-color: rgb(217, 217, 217);
  border-radius: 10px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
  padding: 20px 20px 20px 20px;
}
#searchBox #search h3,
#searchBox #search input {
  width: calc(100% - 40px - 40px - 10px);
  height: 40px;
  padding: 0 10px;
  margin-right: 10px;
  text-align: center;
}
#searchBox #search h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 23px;
}
#searchBox #search input {
  border: none;
  border-radius: 10px;
  font-size: 40px;
}
#searchBox #search svg {
  width: 40px;
  cursor: pointer;
}
#searchBox #search #searchDNIshiftsClose {
  margin-bottom: 20px;
}
#searchBox #search #containerListDNI {
  width: 100%;
  max-height: 400px;
  margin-top: 20px;
  border-radius: 20px;
  overflow-y: auto;
}
#searchBox #search #containerListDNI #listDNI {
  width: 100%;
  font-size: 25px;
}
#searchBox #search #containerListDNI #listDNI #listTbDNI {
  text-align: left;
}
#searchBox #search #containerListDNI #listDNI th,
#searchBox #search #containerListDNI #listDNI td {
  padding: 10px;
  border: 1px solid #ccc;
}
#searchBox #search #containerListDNI #listDNI thead {
  background-color: #f0f0f0;
}
#searchBox #search #containerListDNI #listDNI tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
#searchBox #search #containerListDNI #listDNI tbody tr:hover {
  background-color: #FFF58D;
}

.listDNIopen {
  display: flex !important;
}

#error404 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  color: #202020;
}
#error404 #boxText404 h2 {
  font-size: 70px;
}
#error404 #boxText404 p {
  font-size: 40px;
}
#error404 #boxText404 p i {
  font-size: 60px;
}
#error404 svg {
  width: 400px;
  height: 100%;
  transform: rotateY(180deg);
}

.loaderBox {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgb(217, 217, 217);
  opacity: 0.8;
  z-index: 4;
}
.loaderBox .loader {
  width: 50px;
  height: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #FFDD5E;
  border-right-color: #FFCA02;
  animation: l2 1s infinite linear;
}
@keyframes l2 {
  to {
    transform: rotate(1turn);
  }
}

.loaderBoxShow {
  display: flex;
}

.swal2-title {
  font-weight: 200;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
}

.swal2-popup {
  background-color: rgb(217, 217, 217);
}

.swal2-deny,
.swal2-confirm {
  color: #202020;
  background-color: #FFCA02;
}

.swal2-deny {
  background-color: #FFF58D;
}

.swal2-html-container {
  font-size: 23px;
}

.confirmBox {
  text-align: left;
}

.swalDeudores {
  opacity: 0.7;
}

body,
#body {
  min-height: 100vh;
  font-family: "KoHo", sans-serif !important;
  font-style: normal;
  background: rgb(217, 217, 217);
  color: #202020;
  margin: 0;
  padding: 0;
  text-align: center;
}

header {
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
header h1 {
  margin: 0px;
  font-size: 43px;
  font-weight: 300;
  margin-left: 10px;
}
header img {
  height: 100%;
}

.container {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  min-height: calc(100vh - 101px - 96px - 40px);
  padding: 20px;
  z-index: 2;
}
.container .areaToggle {
  display: none;
  justify-content: space-between;
  align-items: center;
  width: 20%;
  padding: 10px 20px 10px 20px;
  margin-bottom: 20px;
  background: rgb(217, 217, 217);
  border-radius: 10px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
  font-size: 33px;
  cursor: pointer;
}
.container .areaToggle p {
  margin: 0px;
  width: calc(100% - 30px);
}
.container .areaToggle svg {
  width: 20px;
}
.container .card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: baseline;
  background: rgb(217, 217, 217);
  border-radius: 10px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
  padding: 80px 20px 20px 20px;
  margin-bottom: 20px;
  width: 25%;
  height: 60vh;
  overflow-y: auto;
}
.container .card .closeButton {
  display: none;
  position: absolute;
  width: 20px;
  right: 10px;
  top: 13px;
  cursor: pointer;
}
.container .card h2 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 40px);
  margin: 8px 0px 0px 0px;
  padding: 0px 20px 10px 20px;
  font-size: 30px;
  font-weight: 400;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
}
.container .card p,
.container .card i {
  text-align: left;
  width: 100%;
  margin: 0px;
}
.container .card p {
  font-size: 26px;
  opacity: 0.6;
}
.container .card i {
  margin-bottom: 10px;
  font-size: 25px;
  opacity: 0.6;
}
.container .card #obraParticularDoctor,
.container .card #diasDoctor,
.container .card #horariosDoctor,
.container .card .doctor {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 29px;
  margin-bottom: 20px;
}
.container .card #obraParticularDoctor p,
.container .card #diasDoctor p,
.container .card #horariosDoctor p,
.container .card .doctor p {
  opacity: 1;
}
.container .card #obraParticularDoctor #selectObraSocial,
.container .card #diasDoctor #selectObraSocial,
.container .card #horariosDoctor #selectObraSocial,
.container .card .doctor #selectObraSocial {
  text-align: center;
}
.container .card #obraParticularDoctor button,
.container .card #obraParticularDoctor .boxAuxHorarios,
.container .card #diasDoctor button,
.container .card #diasDoctor .boxAuxHorarios,
.container .card #horariosDoctor button,
.container .card #horariosDoctor .boxAuxHorarios,
.container .card .doctor button,
.container .card .doctor .boxAuxHorarios {
  width: 80%;
  min-height: 35px;
  background-color: #FFCA02;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px rgba(109, 109, 160, 0.8);
  font-size: 20px;
}
.container .card #obraParticularDoctor .obraSocialBox,
.container .card #diasDoctor .obraSocialBox,
.container .card #horariosDoctor .obraSocialBox,
.container .card .doctor .obraSocialBox {
  text-align: center;
}
.container .card #obraParticularDoctor button,
.container .card #diasDoctor button,
.container .card #horariosDoctor button,
.container .card .doctor button {
  cursor: pointer;
}
.container .card #obraParticularDoctor,
.container .card #diasDoctor,
.container .card #horariosDoctor {
  margin-bottom: 0px;
}
.container .card #obraParticularDoctor .boxAuxHorarios,
.container .card #diasDoctor .boxAuxHorarios,
.container .card #horariosDoctor .boxAuxHorarios {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 10px 0px;
}
.container .card #horariosDoctor .boxAuxHorarios {
  margin-bottom: 0px;
  padding: 1px 5px;
}
.container .card #buttonEntreturnoList {
  border-radius: 0px 10px 10px 0px;
}
.container .card #buttonEntreturno {
  border-radius: 10px 0px 0px 10px;
}
.container .card #buttonEntreturnoList,
.container .card #buttonEntreturno {
  height: 50px;
  width: 40%;
  border: none;
  box-shadow: 0px 4px 4px 0px rgba(109, 109, 160, 0.8);
  background-color: #FFCA02;
  font-size: 18px;
  cursor: pointer;
}
.container .card .ObraParticular {
  opacity: 1;
  font-size: 20px;
}
.container .cardTurnosList {
  width: 60%;
  justify-content: center;
  padding: 70px 0px 20px 0px;
}
.container .cardTurnosList p {
  text-align: center;
}
.container .cardTurnosList input[type=date] {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 15px;
  width: 300px;
  height: 35px;
  background-color: #FFCA02;
  border: none;
  border-radius: 20px;
  box-shadow: 0px 4px 4px 0px rgba(109, 109, 160, 0.8);
  font-size: 20px;
  text-align: center;
}
.container .cardTurnosList #horariosM,
.container .cardTurnosList #horariosT {
  display: flex;
  justify-content: center;
  align-content: baseline;
  flex-wrap: wrap;
  width: 50%;
}
.container .cardTurnosList #horariosM .titleHorario,
.container .cardTurnosList #horariosM .turnoHorario,
.container .cardTurnosList #horariosT .titleHorario,
.container .cardTurnosList #horariosT .turnoHorario {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  min-height: 40px;
  margin-bottom: 14px;
  background-color: #FFF58D;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px rgba(109, 109, 160, 0.8);
  font-size: 20px;
  text-align: center;
}
.container .cardTurnosList #horariosM .titleHorario,
.container .cardTurnosList #horariosT .titleHorario {
  background-color: #FFCA02;
}
.container .cardTurnosList #horariosM .disp,
.container .cardTurnosList #horariosT .disp {
  cursor: pointer;
}
.container .cardTurnosList #horariosM .ocup,
.container .cardTurnosList #horariosT .ocup {
  background-color: #A4A199;
}
.container .cardTurnosList #horariosM .annuledShift,
.container .cardTurnosList #horariosT .annuledShift {
  background-color: #333;
  color: #A4A199;
}
.container .cardSinTurnosList p {
  opacity: 1;
}
.container .cardSinTurnosList .inputFeak {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 15px;
  width: 300px;
  height: 35px;
  background-color: #FFCA02;
  border: none;
  border-radius: 20px;
  box-shadow: 0px 4px 4px 0px rgba(109, 109, 160, 0.8);
  font-size: 20px;
  text-align: center;
}

#boxInfoPaciente {
  display: none;
  justify-content: center;
  align-items: baseline;
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 4;
}
#boxInfoPaciente #infoPaciente {
  position: relative;
  display: flex;
  justify-content: center;
  align-content: baseline;
  flex-wrap: wrap;
  width: 70%;
  max-height: calc(100% - 80px);
  padding: 20px;
  margin-top: 20px;
  background-color: rgb(217, 217, 217);
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px rgba(28, 28, 28, 0.8);
  overflow: auto;
}
#boxInfoPaciente #infoPaciente h2 {
  width: 90%;
  margin: 0px 0px 20px 0px;
  font-size: 30px;
  border-bottom: 1px solid #202020;
  font-weight: 400;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
}
#boxInfoPaciente #infoPaciente .boxInput {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin-bottom: 10px;
  /* Para navegadores basados en WebKit (Chrome, Safari, Edge Chromium) */
  /* Para Firefox */
}
#boxInfoPaciente #infoPaciente .boxInput .selectObraSocial,
#boxInfoPaciente #infoPaciente .boxInput label,
#boxInfoPaciente #infoPaciente .boxInput input,
#boxInfoPaciente #infoPaciente .boxInput textarea {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48%;
  height: 40px;
  padding: 0px;
  background-color: #FFDD5E;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 4px 4px 0px rgba(109, 109, 160, 0.8);
  text-align: center;
  font-size: 25px;
}
#boxInfoPaciente #infoPaciente .boxInput input:focus {
  outline: none;
}
#boxInfoPaciente #infoPaciente .boxInput .selectObraSocial,
#boxInfoPaciente #infoPaciente .boxInput input,
#boxInfoPaciente #infoPaciente .boxInput textarea {
  background-color: #FFFBD3;
}
#boxInfoPaciente #infoPaciente .boxInput input[type=number]::-webkit-inner-spin-button,
#boxInfoPaciente #infoPaciente .boxInput input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#boxInfoPaciente #infoPaciente .boxInput input[type=number] {
  -moz-appearance: textfield;
}
#boxInfoPaciente #infoPaciente .boxPolP {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 90%;
  margin-bottom: 10px;
  font-size: 20px;
}
#boxInfoPaciente #infoPaciente .boxPolP a {
  margin-left: 5px;
}
#boxInfoPaciente #infoPaciente .inputIdShift {
  display: none;
}
#boxInfoPaciente #infoPaciente button {
  background-color: #FFCA02;
  width: 220px;
  height: 66px;
  padding: 5px;
  border: none;
  border-radius: 10px;
  font-size: 23px;
  cursor: pointer;
}
#boxInfoPaciente #infoPaciente #buttonBoxInfoPaciente {
  gap: 10px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#boxInfoPaciente #infoPaciente .closeButtonInfo {
  position: absolute;
  width: 20px;
  right: 10px;
  top: 13px;
  cursor: pointer;
}
#boxInfoPaciente #infoPaciente #buttonCancelShift {
  display: none;
}

.openCard {
  display: flex !important;
}

.loginBox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: baseline;
  width: 300px;
  height: 120px;
  background: rgb(217, 217, 217);
  border-radius: 10px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
  padding: 20px 20px 20px 20px;
}
.loginBox span {
  width: 100%;
  margin-top: 10px;
}
.loginBox span input {
  height: 20px;
  border: none;
  border-radius: 10px;
  margin-left: 10px;
  padding: 0px 10px;
}
.loginBox span input:focus {
  outline: none;
}
.loginBox span button {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background-color: #FFCA02;
  cursor: pointer;
}

#containerPoliticas {
  text-align: left !important;
  font-size: 25px;
}
#containerPoliticas h2 {
  text-align: center;
}

#sobreShiftsListBox {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  height: 60vh;
  width: 80%;
  max-width: 400px;
  padding: 60px 20px 20px 20px;
  background-color: rgb(217, 217, 217);
  border-radius: 10px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
  font-size: 25px;
  overflow-y: auto;
  z-index: 1;
}
#sobreShiftsListBox #sobreShiftsList {
  width: 100%;
}
#sobreShiftsListBox #sobreShiftsList .sobreTurnoHorario {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 20px);
  margin-bottom: 14px;
  padding: 10px;
  background-color: #FFCA02;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px rgba(109, 109, 160, 0.8);
  font-size: 20px;
}
#sobreShiftsListBox p {
  position: absolute;
  top: 20px;
  width: calc(100% - 20px);
  margin: 0;
}
#sobreShiftsListBox #closeButtonSobreTurnos {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 20px;
}

.sobreShiftsListBoxOpen {
  display: flex !important;
}

#logoHome {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#logoHome #textBoxHome {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 300px;
  z-index: 3;
}
#logoHome #textBoxHome h1 {
  margin: 0;
  padding: 0px 20px;
  font-size: 80px;
}
#logoHome #textBoxHome h2 {
  margin: 0;
  font-size: 30px;
  opacity: 0.6 !important;
}
#logoHome #textBoxHome img {
  width: 200px;
}
#logoHome #textBoxHome button {
  width: 300px;
  opacity: 0;
  padding: 10px 0px;
  margin-top: 20px;
  font: inherit;
  font-size: 24px;
  border-radius: 10px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: all 300ms;
}
#logoHome #textBoxHome button:hover {
  background-color: #FFCA02;
}
#logoHome svg {
  z-index: 2;
}
#logoHome #areasList {
  position: fixed;
  display: flex;
  justify-content: center;
  align-content: baseline;
  flex-wrap: wrap;
  width: 80%;
  max-width: 400px;
  max-height: calc(100vh - 40px);
  top: 20px;
  border-radius: 20px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
  background-color: rgba(217, 217, 217, 0.95);
  overflow: auto;
  z-index: 4;
}
#logoHome #areasList h5,
#logoHome #areasList h4 {
  width: 80%;
  font: inherit;
  margin: 0px;
}
#logoHome #areasList h4 {
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #202020;
}
#logoHome #areasList h5 {
  margin-bottom: 20px;
  font-size: 25px;
}
#logoHome #areasList .closeButton {
  position: absolute;
  width: 20px;
  right: 10px;
  top: 13px;
  cursor: pointer;
}

footer {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
footer #footerDesktop {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 90%;
  height: 40px;
  padding: 15px;
  background: rgb(217, 217, 217);
  border-radius: 10px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
  font-size: 25px;
  font-weight: 200;
}
footer #footerPhone {
  position: fixed;
  bottom: 150px;
  display: none;
  width: 80%;
  padding: 80px 20px 20px 20px;
  background-color: rgb(217, 217, 217);
  border-radius: 10px;
  box-shadow: 0px 4px 6px 0px rgba(28, 28, 28, 0.8);
  z-index: 3;
}
footer #footerPhone h2 {
  position: absolute;
  top: 0;
  width: calc(100% - 40px);
  margin: 8px 0px 0px 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid #202020;
  font-size: 33px;
  font-weight: 400;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
}
footer #footerPhone #svgClose {
  position: absolute;
  width: 20px;
  right: 10px;
  top: 13px;
  cursor: pointer;
  z-index: 3;
}
footer #footerPhone .footer-item {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
  font-size: 24px;
}
footer .openInfoFotter {
  display: block !important;
}
footer .contactToggle {
  display: none;
  justify-content: space-between;
  align-items: center;
  width: calc(80% - 32px);
  height: 40px;
  padding: 10px 20px;
  background: rgb(217, 217, 217);
  border-radius: 10px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.8);
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
  font-size: 32px;
  font-weight: 200;
}
footer .contactToggle svg {
  width: 20px;
  cursor: pointer;
}
footer .footer-item {
  display: flex;
  align-items: center;
}
footer .footer-item svg {
  width: 30px;
  margin-right: 10px;
  fill: #FFCA02;
}
footer #footerInfoPhone,
footer #footerInfoDesktop {
  display: flex;
  margin-top: 10px;
}
footer #footerInfoPhone {
  display: none;
}

.sectionHome {
  display: none;
}

.svg-background {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100vw;
  height: 70vh;
  z-index: -1;
}
.svg-background #change1_1,
.svg-background #change1_2,
.svg-background #change1_4 {
  color: #FFF58D;
}
.svg-background #change3_1,
.svg-background #change3_2 {
  color: #FFCA02;
}
.svg-background #change2_1,
.svg-background #change2_2 {
  color: #FFDD5E;
}

@media (max-width: 1280px) {
  header {
    padding: 0px;
    padding-top: 10px;
  }
  .container {
    min-height: calc(100vh - 101px - 66px - 40px);
  }
  .container .areaToggle {
    width: 25%;
  }
  .container .card {
    width: 25%;
  }
  .container .card .doctor {
    margin-bottom: 10px;
    font-size: 26px;
  }
  .container .card .doctor i {
    margin-bottom: 5px;
    font-size: 21px;
  }
  .container .cardTurnosList {
    width: 60%;
  }
}
@media (max-width: 1230px) {
  .container .card {
    width: 40%;
  }
  #pacientesContainer #infoPacientesBox input,
  #pacientesContainer #infoPacientesBox select,
  #pacientesContainer #infoPacientesBox button,
  #pacientesContainer #searchPacientesBox input,
  #pacientesContainer #searchPacientesBox select,
  #pacientesContainer #searchPacientesBox button,
  #pacientesContainer #searchDeudoresBox input,
  #pacientesContainer #searchDeudoresBox select,
  #pacientesContainer #searchDeudoresBox button,
  #deudoresContainer #infoPacientesBox input,
  #deudoresContainer #infoPacientesBox select,
  #deudoresContainer #infoPacientesBox button,
  #deudoresContainer #searchPacientesBox input,
  #deudoresContainer #searchPacientesBox select,
  #deudoresContainer #searchPacientesBox button,
  #deudoresContainer #searchDeudoresBox input,
  #deudoresContainer #searchDeudoresBox select,
  #deudoresContainer #searchDeudoresBox button {
    margin-top: 10px;
  }
}
@media (max-width: 1070px) {
  #adminHomeContainer .adminHomeButtons {
    justify-content: space-evenly;
  }
  #adminHomeContainer .adminHomeButtons .buttonHomeAdmin {
    margin-top: 20px;
    margin-right: 0px;
  }
  #pacientesContainer .tableContainer,
  #deudoresContainer .tableContainer {
    overflow-x: scroll;
  }
  #pacientesContainer .tableContainer th,
  #pacientesContainer .tableContainer td,
  #deudoresContainer .tableContainer th,
  #deudoresContainer .tableContainer td {
    width: 150px;
  }
}
@media (max-width: 940px) {
  header h1 {
    display: none;
  }
  #boxInfoPaciente #infoPaciente .boxInput {
    flex-wrap: wrap;
  }
  #boxInfoPaciente #infoPaciente .boxInput label,
  #boxInfoPaciente #infoPaciente .boxInput input,
  #boxInfoPaciente #infoPaciente .boxInput .selectObraSocial,
  #boxInfoPaciente #infoPaciente .boxInput textarea {
    width: 100%;
  }
  #boxInfoPaciente #infoPaciente .boxInput label {
    margin-bottom: 5px;
  }
  .container .areaToggle {
    display: flex;
    width: 80%;
  }
  .container .card {
    display: none;
    position: fixed;
    height: 80vh;
    width: 80%;
    margin-bottom: 20px;
    top: 20px;
    z-index: 1;
  }
  .container .card .closeButton {
    display: block;
    z-index: 2;
  }
  .container .cardTurnos {
    height: 77vh;
    z-index: 2;
  }
  .container .cardTurnosList {
    top: 0px;
    width: 90%;
    display: flex;
    position: relative;
    z-index: 1;
  }
  .container .cardTurnosList #horariosM,
  .container .cardTurnosList #horariosT {
    width: 100%;
  }
  .container .openCard {
    display: flex;
  }
  footer #footerDesktop {
    display: none;
  }
  footer #footerPhone #footerItemMailPhone {
    font-size: 20px;
  }
  footer #footerInfoPhone,
  footer .contactToggle {
    display: flex;
  }
  footer #footerInfoDesktop {
    display: none;
  }
  #pacientesContainer #infoPacientesBox input,
  #pacientesContainer #infoPacientesBox select,
  #pacientesContainer #searchPacientesBox input,
  #pacientesContainer #searchPacientesBox select,
  #pacientesContainer #searchDeudoresBox input,
  #pacientesContainer #searchDeudoresBox select,
  #deudoresContainer #infoPacientesBox input,
  #deudoresContainer #infoPacientesBox select,
  #deudoresContainer #searchPacientesBox input,
  #deudoresContainer #searchPacientesBox select,
  #deudoresContainer #searchDeudoresBox input,
  #deudoresContainer #searchDeudoresBox select {
    width: 100%;
  }
}
@media (max-width: 657px) {
  #boxInfoPaciente #infoPaciente button {
    width: 90%;
    padding: 10px 5px;
  }
  #boxInfoPaciente #infoPaciente #buttonAnnularShift {
    margin-right: 0px;
    margin-bottom: 20px;
  }
  #boxInfoPaciente #infoPaciente #buttonReSendWhatsapp {
    margin-left: 0px;
    margin-top: 20px;
  }
}/*# sourceMappingURL=style.css.map */