@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
canvas {
  width: 100%;
  height: 100%;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
@media only screen and (max-width: 600px) {
  .flex {
    flex-direction: column;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .flex {
    flex-direction: column;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  .flex {
    flex-direction: column;
  }
}
.flex .miniChart {
  width: 28vw;
  height: 35vh;
  box-shadow: 0.5px 0.5px 4px rgba(0, 0, 0, 0.3);
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 7px;
}
@media only screen and (max-width: 600px) {
  .flex .miniChart {
    margin-top: 30px;
    width: 350px !important;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .flex .miniChart {
    margin-top: 30px;
    width: 550px !important;
    height: 350px !important;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  .flex .miniChart {
    width: 600px;
    height: 400px;
    margin-top: 30px;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .flex .miniChart {
    width: 900px;
    height: 600px;
    margin-top: 30px;
  }
}
.flex .miniChartEspecial {
  width: 28vw;
  min-height: 35vh;
  box-shadow: 0.5px 0.5px 4px rgba(0, 0, 0, 0.3);
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 7px;
  margin-bottom: auto;
}
.flex .miniChartEspecial .centerItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media only screen and (max-width: 600px) {
  .flex .miniChartEspecial {
    width: 350px !important;
    margin-top: 30px;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .flex .miniChartEspecial {
    margin-top: 30px;
    width: 550px !important;
    height: 350px !important;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  .flex .miniChartEspecial {
    width: 600px;
    height: 400px;
    margin-top: 30px;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .flex .miniChartEspecial {
    width: 900px;
    height: 600px;
    margin-top: 30px;
  }
}
.flex .miniChartEspecial .arriba {
  width: 280px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex .miniChartEspecial .arriba .adentro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flex .max-chart {
  width: 58.4vw;
  min-height: 34.4vh;
  height: 230px;
  box-shadow: 0.5px 0.5px 4px rgba(0, 0, 0, 0.3);
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 7px;
}
@media only screen and (max-width: 600px) {
  .flex .max-chart {
    width: 350px;
    width: 350px !important;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .flex .max-chart {
    width: 550px !important;
    height: 350px !important;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  .flex .max-chart {
    width: 600px;
    height: 400px;
    justify-content: center;
    align-items: center;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .flex .max-chart {
    width: 900px;
    height: 600px;
    justify-content: center;
    align-items: center;
  }
}

.ordenar2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.ordenar2 .titleLogo {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 90%;
  height: 10%;
  padding-top: 2%;
  left: 75px;
}
@media only screen and (max-width: 500px) {
  .ordenar2 .titleLogo {
    padding-top: 0%;
    left: 15px;
    margin-top: 30px;
    height: 5%;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
  .ordenar2 .titleLogo {
    left: 50px;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  .ordenar2 .titleLogo {
    margin-top: 30px;
    left: 80px;
  }
}
@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .ordenar2 .titleLogo {
    left: 120px;
  }
}
.ordenar2 .titleLogo .title-lt {
  font-size: 2vw;
  color: #E41028;
  font-weight: bold;
  padding-top: auto;
}
@media only screen and (max-width: 600px) {
  .ordenar2 .titleLogo .title-lt {
    font-size: 6vw;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
  .ordenar2 .titleLogo .title-lt {
    font-size: 4vw;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  .ordenar2 .titleLogo .title-lt {
    font-size: 4vw;
  }
}
.ordenar2 .top-btn {
  cursor: pointer;
  margin-left: 25px;
  z-index: 40000;
}
.ordenar2 .logo {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-top: 10px;
  margin-left: 70%;
  background-color: white;
  width: 250px;
  align-items: center;
  margin-left: auto;
}
@media only screen and (max-width: 600px) {
  .ordenar2 .logo {
    width: 20px;
    margin-left: 70%;
    padding-top: 30px;
  }
  .ordenar2 .logo img {
    width: 70px;
    height: 50px;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .ordenar2 .logo {
    margin-left: 90% !important;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  .ordenar2 .logo {
    width: 20px;
    margin-left: 70%;
    padding-top: 30px;
  }
  .ordenar2 .logo img {
    width: 90px;
    height: 70px;
  }
}

.tableExpanded {
  overflow-y: auto;
}

.tableExpanded::-webkit-scrollbar {
  background-color: white;
}

.columna {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 550px;
}

.miniChartstados {
  width: 350px;
  height: 300px;
  box-shadow: 0.5px 0.5px 4px rgba(0, 0, 0, 0.3);
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 7px;
  margin-bottom: auto;
  margin-top: 20px;
}

.largeChart {
  width: 100%;
  min-height: 100px;
  box-shadow: 0.5px 0.5px 4px rgba(0, 0, 0, 0.3);
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 7px;
  margin-top: 30px;
}
@media only screen and (max-width: 600px) {
  .largeChart {
    width: 350px;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  .largeChart {
    width: 600px;
    height: 400px;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .largeChart {
    width: 900px;
    height: 600px;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .largeChart {
    width: 550px !important;
    height: 350px !important;
  }
}
.largeChart .chartexpansible {
  width: 100%;
  height: 100%;
}

.flex .modifiMini {
  min-height: 180px;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
@media only screen and (max-width: 600px) {
  .flex .modifiMini {
    height: 200px;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .flex .modifiMini {
    height: 200px;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  .flex .modifiMini {
    height: 200px;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .flex .modifiMini {
    height: 200px;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
  .flex .flex .modifiMini {
    height: 200px;
  }
  .flex .flex .miniChart {
    width: 300px;
  }
  .flex .flex .miniChartEspecial {
    width: 300px;
  }
  .flex .flex .max-chart {
    width: 610px;
  }
}
.flex .micontenedor {
  width: 90%;
}

* {
  font-family: "Roboto", sans-serif;
}

.selectSucursales {
  margin-top: 40px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  .selectSucursales {
    margin-left: 40px;
  }
}
.selectSucursales .internalSucursal {
  width: 90%;
  height: 100%;
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 640px) {
  .movilC {
    margin-top: 10px !important;
  }
}

@media only screen and (max-width: 360px) {
  .mob {
    width: 80%;
  }
}
@media only screen and (max-width: 640px) {
  .mob {
    width: 80% !important;
  }
}

.navbar-lt {
  width: 100%;
  height: 30%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.ordenar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.ordenar .titleLogo {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 90%;
  height: 10%;
  padding-top: 2%;
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .ordenar .titleLogo {
    padding-top: 0%;
    margin-top: -18px;
  }
}
.ordenar .titleLogo .title-lt {
  font-size: 2vw;
  color: #E41028;
  font-weight: bold;
  padding-top: auto;
}
.ordenar .top-btn {
  cursor: pointer;
  margin-left: 25px;
  z-index: 40000;
}
.ordenar .logo {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-top: 10px;
  margin-left: 70%;
  background-color: white;
  align-items: center;
  width: 320px;
}

.iconUser {
  position: relative;
  width: 45px;
  height: 45px;
  background-color: #E41028;
  border-radius: 50%;
  text-align: center;
  color: white;
  font-size: 20px;
}
.iconUser:hover .OptionsMenu {
  display: block;
}
.iconUser i {
  margin-top: 12px;
}
.iconUser .OptionsMenu {
  position: absolute;
  top: 45px;
  right: -15px;
  min-width: 50px;
  min-height: 60px;
  background-color: white;
  border-radius: 5px;
  text-align: center;
  box-shadow: 1.5px 1.5px 6px rgba(0, 0, 0, 0.3);
  display: none;
  color: black;
  font-size: 15px;
  padding: 10px;
  text-align: center;
}
.iconUser .OptionsMenu a {
  text-decoration: none;
  color: black;
}
.iconUser .OptionsMenu a:hover {
  color: #E41028;
}

.selectOption {
  display: flex;
  flex-direction: row;
}

.enty {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  margin-top: 15%;
  font-size: 70px;
  color: rgba(0, 0, 0, 0.4);
}

.secundario::-webkit-scrollbar {
  width: 0px;
}

.SucusalActive {
  opacity: 0;
}

.SucusalInactive {
  opacity: 1;
}

.space {
  height: 60px;
  width: 5px;
}

.contenedor {
  height: 80vh;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.contenedor .principal {
  margin-bottom: auto;
  box-shadow: 3px 3px 8px 1px rgba(0, 0, 0, 0.5);
  padding: 20px;
}
.contenedor .secundario {
  margin-bottom: auto;
  width: 90%;
  min-height: 69vh;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  padding: 20px;
  margin-top: -0.6%;
}

.titulo {
  font-weight: bold;
  font-size: 2vw;
  height: 3.5vh;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fact {
  min-height: 75vh !important;
}

.fixInMovil {
  margin-top: 15px;
}
@media only screen and (max-width: 640px) and (orientation: portrait) {
  .fixInMovil h6 {
    font-size: 7px;
  }
}

.legends {
  width: 100%;
  height: 25vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.legends .flexColum {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.legends .taps {
  margin-top: 30px;
  min-width: 50%;
  height: 30px;
  box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.4);
  margin-right: 40%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: -10%;
  z-index: 2000;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 360px) and (orientation: landscape) {
  .legends .taps {
    margin-right: 0%;
    width: 80%;
  }
}
@media only screen and (max-width: 640px) and (orientation: landscape) {
  .legends .taps {
    margin-left: 40%;
    width: 90% !important;
  }
}
@media only screen and (max-width: 731px) and (orientation: landscape) {
  .legends .taps {
    margin-left: 40%;
    width: 90% !important;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .legends .taps {
    margin-left: 40%;
    width: 90% !important;
  }
}
@media only screen and (max-width: 768px) and (orientation: portrait) {
  .legends .taps {
    margin-left: 40%;
    width: 90% !important;
  }
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .legends .taps {
    margin-left: 40%;
    width: 90% !important;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .legends .taps {
    margin-left: 40%;
    width: 90% !important;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .legends .taps {
    margin-left: 40%;
    width: 90% !important;
  }
}
.legends .taps .activo {
  color: white;
  cursor: pointer;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  text-align: center;
  width: 25%;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 500px) and (orientation: landscape) {
  .legends .taps .activo {
    font-size: 12px;
  }
}
@media only screen and (max-width: 500px) and (orientation: portrait) {
  .legends .taps .activo {
    font-size: 10px;
  }
}
.legends .taps .desactivado {
  color: black;
  cursor: pointer;
  font-weight: bold;
  width: 25%;
  text-align: center;
  font-size: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 500px) and (orientation: landscape) {
  .legends .taps .desactivado {
    font-size: 13px;
  }
}
@media only screen and (max-width: 500px) and (orientation: portrait) {
  .legends .taps .desactivado {
    font-size: 10px;
  }
}
.legends .contLeng {
  width: 90%;
  height: 100px;
  background-color: white;
  border-radius: 3px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px 0px 10px 0px;
}
.legends .contLengFactura {
  width: 90%;
  max-height: 200px;
  background-color: white;
  border-radius: 3px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px 0px 10px 0px;
  overflow-y: auto;
}
.legends .barTotal {
  font-family: "Roboto", sans-serif;
  border-radius: 5px;
  width: 20%;
  height: 95%;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border-bottom: 20px solid rgba(0, 0, 0, 0.5) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 1.5px 3px 4px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 640px) and (orientation: landscape) {
  .legends .barTotal {
    height: 100%;
  }
}
@media only screen and (max-width: 360px) and (orientation: landscape) {
  .legends .barTotal {
    height: 100%;
  }
}
@media only screen and (max-width: 731px) and (orientation: landscape) {
  .legends .barTotal {
    height: 100%;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .legends .barTotal {
    height: 100%;
  }
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .legends .barTotal {
    height: 100%;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .legends .barTotal {
    height: 100%;
  }
}
.legends .barTotal .timerCont {
  margin-top: 40px;
  width: 30%;
  height: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.legends .barTotal .timerCont .textT {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.legends .barTotal .timerCont .textT .titulo {
  font-weight: bold;
  font-size: 2vw;
  height: 3.5vh;
}
.legends .barTotal .timerCont .textT .cantidad {
  font-weight: bold;
  font-size: 2vw;
}
.legends .barTotal .timerCont .stact {
  display: flex;
  flex-direction: row;
  width: 100%;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 25%;
}
.legends .onTime {
  font-family: "Roboto", sans-serif;
  border-radius: 5px;
  width: 20%;
  height: 95%;
  background-color: rgba(98, 194, 60, 0.767) !important;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 20px solid #2e7d32 !important;
  box-shadow: 1.5px 3px 4px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 640px) and (orientation: landscape) {
  .legends .onTime {
    height: 100%;
  }
}
@media only screen and (max-width: 360px) and (orientation: landscape) {
  .legends .onTime {
    height: 100%;
  }
}
@media only screen and (max-width: 731px) and (orientation: landscape) {
  .legends .onTime {
    height: 100%;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .legends .onTime {
    height: 100%;
  }
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .legends .onTime {
    height: 100%;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .legends .onTime {
    height: 100%;
  }
}
.legends .onTime .timerCont {
  margin-top: 40px;
  width: 30%;
  height: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.legends .onTime .timerCont .textT {
  display: flex;
  flex-direction: column;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.legends .onTime .timerCont .textT .titulo {
  font-weight: bold;
  font-size: 2vw;
  height: 3.5vh;
}
.legends .onTime .timerCont .textT .cantidad {
  font-weight: bold;
  font-size: 2vw;
}
.legends .onTime .timerCont .stact {
  display: flex;
  flex-direction: row;
  width: 100%;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 25%;
}
.legends .CardFactura {
  font-family: "Roboto", sans-serif;
  border-radius: 5px;
  width: 40%;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border-right: 7px solid rgba(0, 0, 0, 0.5) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1.5px 3px 4px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 768px) and (orientation: portrait) {
  .legends .CardFactura {
    height: 100px;
    flex-direction: column;
  }
  .legends .CardFactura .timerCont {
    flex-direction: column;
  }
  .legends .CardFactura .timerCont .stact .titulo {
    display: flex;
    flex-direction: column !important;
  }
  .legends .CardFactura .timerCont .stact .titulo .textoM {
    font-size: 0.8rem;
  }
}
@media only screen and (max-width: 640px) and (orientation: landscape) {
  .legends .CardFactura {
    height: 100%;
  }
}
@media only screen and (max-width: 360px) and (orientation: landscape) {
  .legends .CardFactura {
    height: 100%;
  }
}
@media only screen and (max-width: 731px) and (orientation: landscape) {
  .legends .CardFactura {
    height: 100%;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .legends .CardFactura {
    height: 100%;
  }
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .legends .CardFactura {
    height: 100%;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .legends .CardFactura {
    height: 100%;
  }
}
.legends .CardFactura .timerCont {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.legends .CardFactura .timerCont .text {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.legends .CardFactura .timerCont .text .cantidad {
  font-weight: bold;
  font-size: 2vw;
}
.legends .CardFactura .timerCont .stact {
  display: flex;
  flex-direction: row;
  width: 100%;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 25%;
}
.legends .CardFactura .timerCont .stact .titulo {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 2vw;
  width: 100%;
  height: 100%;
}
.legends .CardFactura .timerCont .stact .titulo .textoM {
  width: 100%;
}
.legends .CardFactura .timerCont .stact .titulo .numberss {
  width: 100%;
}
.legends .atraso {
  font-family: "Roboto", sans-serif;
  border-radius: 5px;
  width: 20%;
  height: 95%;
  background-color: rgba(249, 168, 37, 0.8) !important;
  color: white;
  border-bottom: 20px solid #f9a825 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 1.5px 3px 4px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 640px) and (orientation: landscape) {
  .legends .atraso {
    height: 100%;
  }
}
@media only screen and (max-width: 360px) and (orientation: landscape) {
  .legends .atraso {
    height: 100%;
  }
}
@media only screen and (max-width: 731px) and (orientation: landscape) {
  .legends .atraso {
    height: 100%;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .legends .atraso {
    height: 100%;
  }
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .legends .atraso {
    height: 100%;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .legends .atraso {
    height: 100%;
  }
}
.legends .atraso .timerCont {
  margin-top: 40px;
  width: 30%;
  height: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.legends .atraso .timerCont .textT {
  display: flex;
  flex-direction: column;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.legends .atraso .timerCont .textT .titulo {
  font-weight: bold;
  font-size: 2vw;
  height: 3.5vh;
}
.legends .atraso .timerCont .textT .cantidad {
  font-weight: bold;
  font-size: 2vw;
}
.legends .atraso .timerCont .stact {
  display: flex;
  flex-direction: row;
  width: 100%;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 25%;
}
.legends .vencido {
  font-family: "Roboto", sans-serif;
  border-radius: 5px;
  width: 20%;
  height: 95%;
  background-color: rgba(228, 16, 41, 0.733) !important;
  color: white;
  border-bottom: 20px solid #c62828 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 1.5px 3px 4px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 640px) and (orientation: landscape) {
  .legends .vencido {
    height: 100%;
  }
}
@media only screen and (max-width: 360px) and (orientation: landscape) {
  .legends .vencido {
    height: 100%;
  }
}
@media only screen and (max-width: 731px) and (orientation: landscape) {
  .legends .vencido {
    height: 100%;
  }
}
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .legends .vencido {
    height: 100%;
  }
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .legends .vencido {
    height: 100%;
  }
}
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .legends .vencido {
    height: 100%;
  }
}
.legends .vencido .timerCont {
  margin-top: 40px;
  width: 30%;
  height: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.legends .vencido .timerCont .textT {
  display: flex;
  flex-direction: column;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.legends .vencido .timerCont .textT .titulo {
  font-weight: bold;
  font-size: 2vw;
  height: 3.5vh;
}
.legends .vencido .timerCont .textT .cantidad {
  font-weight: bold;
  font-size: 2vw;
}
.legends .vencido .timerCont .stact {
  display: flex;
  flex-direction: row;
  width: 100%;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 25%;
}

.timer {
  width: 80%;
  height: 80%;
  border-radius: 50px;
  background-color: rgba(98, 194, 60, 0.767) !important;
  color: white;
  font-weight: bold;
  box-shadow: 2px 2px 5px black;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  padding: 0px 30px 0px 30px;
}

.timer-amarillo {
  width: 80%;
  height: 80%;
  border-radius: 50px;
  background-color: #f9a825;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  padding: 0px 30px 0px 30px;
}

.timer-rojo {
  width: 80%;
  height: 80%;
  border-radius: 50px;
  background-color: rgba(228, 16, 41, 0.733) !important;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  padding: 0px 30px 0px 30px;
}

.title-p {
  font-size: 3vw;
}

.card-desing-Amarillo {
  border: 1px solid;
  border-right-color: #fcd219;
  border-right-width: 20px;
  width: 50vw;
  height: 55vh;
  background-color: #f9a825;
  border-radius: 5px;
  box-shadow: 1px 1px 10px 1px rgba(128, 128, 128, 0.151);
  font-weight: bold;
}

.tabla-verde {
  font-size: 1.3vw;
  color: rgba(98, 194, 60, 0.767) !important;
  font-weight: bold;
  text-shadow: 1.5px 1px 1px rgba(0, 0, 0, 0.1);
}

.tabla-amarillo {
  font-size: 1.3vw;
  color: #f9a825 !important;
  font-weight: bold;
  text-shadow: 1.5px 1px 1px rgba(0, 0, 0, 0.1);
}

.tabla-rojo {
  font-size: 1.3vw;
  color: rgba(228, 16, 41, 0.733) !important;
  font-weight: bold;
  text-shadow: 1.5px 1px 1px rgba(0, 0, 0, 0.2);
}

.card-desing-Rojo {
  border: 1px solid;
  border-right-color: #e94949;
  border-right-width: 20px;
  width: 50vw;
  height: 55vh;
  background-color: rgba(228, 16, 41, 0.767);
  border-radius: 5px;
  box-shadow: 1px 1px 10px 1px rgba(128, 128, 128, 0.151);
  font-weight: bold;
}

.card-desing {
  border: 1px solid;
  border-right-color: #3ea72b;
  border-right-width: 20px;
  width: 50vw;
  height: 55vh;
  background-color: rgba(98, 194, 60, 0.767);
  border-radius: 5px;
  box-shadow: 1px 1px 10px 1px rgba(128, 128, 128, 0.151);
  font-weight: bold;
}

.fecha {
  width: 100%;
  display: flex;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vw;
  padding: 0px 30px 0px 30px;
  margin-top: 5px;
}

.time {
  margin-right: auto;
}

.date {
  margin-left: auto;
}

.clientName {
  position: absolute;
  background-color: white;
  color: black;
  height: 10vh;
  width: 43vw;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  font-size: 3vw;
  box-shadow: inset -10px -10px 10px 10px rgba(0, 0, 0, 0.1);
}

.clientDocNum {
  position: absolute;
  background-color: white;
  color: black;
  height: 10vh;
  width: 33vw;
  margin-top: 6%;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  font-size: 3vw;
  box-shadow: inset -10px -10px 10px 10px rgba(0, 0, 0, 0.1);
}

.total {
  position: absolute;
  background-color: white;
  color: black;
  height: 10vh;
  margin-top: 12%;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  font-size: 3vw;
  padding: 30px;
  display: flex;
  align-items: center;
  box-shadow: inset -10px -10px 10px 10px rgba(0, 0, 0, 0.1);
}

.cronometro {
  position: relative;
  color: black;
  height: 9vh;
  margin-top: 35%;
  font-size: 3vw;
  font-weight: 600;
  align-items: center;
  margin-left: 72%;
  background-color: white;
  box-shadow: 7px 7px 8px rgba(0, 0, 0, 0.4);
  margin-right: 2%;
  border-radius: 100px;
  padding: 0px 1%;
}

.texto {
  margin-left: 20px;
  font-weight: bold;
}

.desing {
  position: absolute;
  bottom: 75px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background-color: white;
  box-shadow: inset -10px -10px 10px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.desing .internal {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: #43c543;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  box-shadow: inset -10px -10px 10px 10px rgba(0, 0, 0, 0.1);
}

.desingTable {
  font-size: 1.3vw;
  background-color: rgba(0, 0, 0, 0.6) !important;
  color: white;
}

.letra {
  font-size: 1.3vw;
}

.numbers {
  margin-left: 10%;
}

.column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.red {
  color: #E41028;
  margin-top: -10px;
}

@media only screen and (max-width: 1024px) {
  .secundario {
    width: 100%;
    overflow-x: auto;
  }

  .inPhone {
    display: none;
  }

  .desingTable {
    font-size: 3.5vw;
  }

  .letra {
    font-size: 3.5vw;
  }

  .iconUser {
    width: 25px;
    height: 25px;
    font-size: 15px;
  }
  .iconUser i {
    margin-top: 5px;
  }
  .iconUser .OptionsMenu {
    top: 30px;
    right: 0px;
  }

  .btnInMovil {
    width: 25px;
    height: 25px;
    text-align: center;
    padding: 2px;
  }

  .ordenar .titleLogo .title-lt {
    font-size: 4vw;
    margin-top: 20px;
  }
  .ordenar .top-btn {
    margin-left: 5px;
  }
  .ordenar .logo {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding-top: 10px;
    margin-left: 68%;
    background-color: white;
    width: 80px;
  }

  .numbers {
    font-size: 3.8vw;
  }
}
.tachado {
  color: blue;
}

.tachadoOther {
  color: aqua;
}/*# sourceMappingURL=site.css.map */