* {
    margin: 0;
    padding: 0;

  }
  body {
    background: rgb(245, 245, 248);
    /*height: 100vh;*/
  /*
    background: #FF6600; naranja oscuro
    background-color:#FFC849; naranja claro
    background-color: #FF9800; naranja medio*/
  }
  /* barra de desplazamiento*/
  body::-webkit-scrollbar{
    width: 10px;
    background-color: rgba(223, 230, 236);
    
  }
  body::-webkit-scrollbar-thumb{
    background-color: #FF6600;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
  }
  
#principal {
  text-align: center;
  margin: auto;
  width: 100%;
  min-height: 100vh
}
#botonReplicar{
  margin: auto !important;
  text-align: center !important;
}
#anexoCalendario{
  margin: auto;
  padding: 1%;
}
#aumenta img{
  width: 70%;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}


/*tamaño compu*/
@media screen and (min-width: 1674px) {
  #principal {
    margin-top: 5%;
    margin-bottom: 5%;
  }
 /* .botones{
    width: 230px;
    font-size: 130%;

}*/
#calendarioyTurnos{
  display: grid;
  grid-template-columns: 55% 45%;
  margin: 3em;
}
#calendario{
  min-width: 50vw;

}
#anexoCalendario{
  min-width: 40vw;
}
}
@media screen and (min-width: 1350px) and (max-width: 1673px) {
  #principal {
    margin-top: 5%;
  }
  /*.botones{
    width: 210px;
}*/
#calendarioyTurnos{
  display: grid;
  grid-template-columns: 55% 45%;
  margin: 3em;
}
#calendario{
  min-width: 50vw;

}
#anexoCalendario{
  min-width: 40vw;
}

}

/*tamaño tablet*/
@media screen and (min-width: 820px) and (max-width: 1349px) {
  #principal {
    width:100%;
    margin-top: 5%;
  }
  /*.botones{
    width: 210px;
}*/
#calendarioyTurnos{
  display: grid;
  grid-template-rows: repeat(1fr, 2);
  margin: auto;
  text-align: center;
}
#calendario{
  min-width: 50vw;
  margin: auto;
}
#anexoCalendario{
  width: 70vw;
  margin: auto;
  padding-top: 5%;
  padding-bottom: 5%;
}


}

/*para tamaño telefono*/
@media screen and (max-width: 820px) {
  #principal {
    padding-top: 15%;
    
  }
/*

  .botones{
    width: 210px;
}
  .inputDatos{
    width: 210px;
}*/
#calendarioyTurnos{
  display: grid;
  grid-template-rows: repeat(1fr, 2);
  margin: auto;
  text-align: center;
}
#calendario{
  min-width: 95vw;
  margin: auto;
}
#anexoCalendario{
  width: 70vw;
  margin: auto;
  padding-top: 10%;
  padding-bottom: 10%;
}
} 
/*para tamaño telefono chico*/
@media screen and (max-width: 460px) {
  #principal {
    /*min-height: 210vh;*/
    width: 100%;
  }
/*  .botones{
    width: 210px;
}
  .inputDatos{
    width: 210px;
}*/
#calendarioyTurnos{
  display: grid;
  grid-template-rows: repeat(1fr, 2);
  margin: auto;
  text-align: center;
}
#calendario{
  min-width: 100vw !important;
  margin: auto;
}
#anexoCalendario{
  width: 70vw;
  margin: auto;
  padding-top: 10%;
  padding-bottom: 10%;
  font-size: 70%;
}
}

@media screen and (max-width: 290px) {
  #principal {
    width: 100%;
  }
#calendarioyTurnos{
  display: grid;
  grid-template-rows: repeat(1fr, 2);
  margin: auto;
  text-align: center;
}
#calendario{
  width: 100vw;
}
#anexoCalendario{
  min-width: 90vw;
  margin: auto;
  padding-top: 10%;
  padding-bottom:5%;
  font-size: 70%;
}

}