@import 'colors.css';
/* Modal (background) */
.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
}

/* Modal Header */
.modal-header {
  height: 50px;
  color: #0058c9;
  font-weight: bold;
}
.modal-header .title {
  width: 90%;
  position: relative;
  float: left;
  height: 50px;
  padding-left: 5%;
  line-height: 50px;
  text-align: center;
  font-size: 22px;
  font-family: "Noto Sans";
}
.modal-header .close {
  color: var(--close);
  float: right;
  position: relative;
  right: 0px;
  font-size: 28px;
  font-weight: bold;
  width: 5%;
  text-align: center;
}
.modal-header .close:hover, .modal-header .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#title-VerifCoord {
  font-size: 19px;
}

/* Modal Content/Box */
.modal-content {
  width: 100%;
  animation-name: animatetop;
  animation-duration: 0.4s;
}
.modal-content .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--darkBackground) !important;
  color: var(--lightBackground) !important;
  border-radius: 10px;
  font-size: 2vh;
  width: 8vw;
  margin-left: 1vw;
}

/* Modal Footer */
/* .modal-footer {
   padding: 2px 16px;
   background-color: #5cb85c;
   color: white;
} */
/* The Close Button */
/* Add Animation */
@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
.listaMediana {
  display: flex;
  flex-direction: column;
  margin: auto;
  background-color: white;
  border-radius: 25px;
  padding: 1%;
}

/* Tipos de modal */
#listaArticulos .listaMediana,
#listaAccesorios .listaMediana,
#listaEspecialidades .listaMediana {
  margin-top: 6vh;
  max-width: 70vw;
  min-height: 30%;
}

.selectIMEItd {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
  height: 55px;
  width: 100%;
}

#listaClientes .listaMediana {
  margin-top: 5vh;
  max-width: 60vw;
  min-height: 35%;
}
#listaClientes .listaMediana .autoComplete_wrapper {
  margin-left: 10px;
}
#listaClientes .listaMediana .autoComplete_wrapper input {
  border: 2px solid #148dd7;
  border-radius: 5px;
}
#listaClientes .listaMediana .autoComplete_wrapper ul {
  width: 54vw;
  margin-left: 16vw;
}
#listaClientes .listaMediana #nuevoCliente {
  font-family: var(--bodyFont);
  background: var(--mainColor) !important;
  color: #ffffff !important;
  min-height: 32px;
  font-size: 2vh;
  border-radius: 10px;
  margin-left: 1vw;
  width: 8vw;
}
#listaClientes .listaMediana #clearByCedNomTel {
  font-family: var(--bodyFont);
  background: var(--mainColor) !important;
  color: #ffffff !important;
  min-height: 32px;
  border-radius: 10px;
  font-size: 2vh;
  margin-left: 1vw;
  width: 5vw;
}

#listaFacturas .listaMediana {
  margin-top: 5vh;
  max-width: 70vw;
  min-height: 35%;
}

.menuSitef .modal-content .buttonLine,
.menuInstapago .modal-content .buttonLine {
  width: 85%;
  margin: auto;
  height: 48px !important;
}
.menuSitef .modal-content .buttonLine select,
.menuInstapago .modal-content .buttonLine select {
  width: 100%;
  height: 35px;
  border: 2px solid var(--mainColor);
  border-radius: 10px;
  background-color: #148dd7;
  border: transparent;
  color: white;
  padding: 1vh;
}
.menuSitef .modal-content .buttonLine .buttonLine,
.menuInstapago .modal-content .buttonLine .buttonLine {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
}
.menuSitef .modal-content .buttonLine .buttonLine button,
.menuInstapago .modal-content .buttonLine .buttonLine button {
  width: 100px;
}
.menuSitef .modal-content #resultMenu,
.menuInstapago .modal-content #resultMenu {
  width: 90%;
  height: 67%;
  background-color: var(--lightBackground);
  margin-left: 5%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.menuSitef .modal-content #resultMenu pre,
.menuInstapago .modal-content #resultMenu pre {
  margin: 0px 0px 5px 0px;
}

.withLabel {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

#dTlistaAccesorios_filter,
#dTlistaArticulos_filter,
#dTlistaClientes_filter,
#dTlistaFacturas_filter,
#dTlistaEspecialidades_filter {
  position: relative;
  float: left;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}

#dTlistaArticulos_filter .autoComplete_wrapper {
  margin-left: 10px;
}
#dTlistaArticulos_filter .autoComplete_wrapper input {
  border: 2px solid #148dd7;
  border-radius: 5px;
}
#dTlistaArticulos_filter .autoComplete_wrapper ul {
  width: 54vw;
  margin-left: 16vw;
}
#dTlistaArticulos_filter #clearByCODArtList {
  background: #0058c9 !important;
  color: #ffffff !important;
  border-radius: 10px;
  font-size: 2vh;
  width: 5vw;
  margin-left: 1vw;
}

.dataTables_filter label {
  font-family: var(--bodyFont);
  font-weight: 500;
  font-size: 2vh;
}
.dataTables_filter label input {
  border: 2px solid var(--mainColor) !important;
  border-radius: 10px !important;
  width: 25vw;
  margin-left: 2vw !important;
}

.dataTables_wrapper .dataTables_info {
  font-family: var(--bodyFont);
  font-weight: 600;
  font-size: 2vh;
}

.dataTables_filter {
  margin-bottom: 2%;
}

.clienteNew,
.clienteUpd,
.usuariosNew,
.usuariosUpd,
.usuariosDel,
.proveedoresNew,
.proveedoresUpd,
.proveedoresDel {
  width: 40vw;
  max-height: 54vh;
  background-color: var(--formBackground);
  margin: auto;
  margin-top: 10%;
  display: flex;
  flex-direction: column;
  border-radius: 25px;
  box-shadow: 3px 3px 6px var(--boxShadow);
  padding: 2%;
}
.clienteNew .modal-content,
.clienteUpd .modal-content,
.usuariosNew .modal-content,
.usuariosUpd .modal-content,
.usuariosDel .modal-content,
.proveedoresNew .modal-content,
.proveedoresUpd .modal-content,
.proveedoresDel .modal-content {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-content: stretch;
  min-height: 20vh;
  flex-wrap: wrap;
  align-items: stretch;
}

.accionesCaja {
  margin: auto;
  margin-top: 5%;
  background-color: var(--formBackground);
  display: flex;
  flex-direction: column;
  border-radius: 25px;
  box-shadow: 3px 3px 6px var(--boxShadow);
  padding: 2%;
}
@media only screen and (max-width: 600px) {
  .accionesCaja {
    width: 80vw;
    height: 58vh;
  }
}
@media only screen and (min-width: 600px) {
  .accionesCaja {
    width: 80vw;
    height: 58vh;
  }
}
@media only screen and (min-width: 768px) {
  .accionesCaja {
    width: 80vw;
    height: 58vh;
  }
}
@media only screen and (min-width: 992px) {
  .accionesCaja {
    width: 80vw;
    height: 58vh;
  }
}
@media only screen and (min-width: 1200px) {
  .accionesCaja {
    width: 70vw;
    height: 58vh;
  }
}
@media only screen and (min-width: 1500px) {
  .accionesCaja {
    width: 50vw;
    height: 58vh;
  }
}
.accionesCaja .modal-content {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-content: stretch;
  min-height: 20vh;
  flex-wrap: wrap;
  align-items: stretch;
}
.accionesCaja .modal-content .report-group-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}
.accionesCaja .modal-content .button-reportes {
  margin-top: 4%;
  background-color: #0058c9;
  color: white;
  height: 5vh;
  border-radius: 4px;
  border: transparent;
  font-size: 15px;
  text-align: left;
  line-height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
}
@media only screen and (max-width: 600px) {
  .accionesCaja .modal-content .button-reportes {
    width: 20vw;
  }
}
@media only screen and (min-width: 600px) {
  .accionesCaja .modal-content .button-reportes {
    width: 20vw;
  }
}
@media only screen and (min-width: 768px) {
  .accionesCaja .modal-content .button-reportes {
    width: 20vw;
  }
}
@media only screen and (min-width: 992px) {
  .accionesCaja .modal-content .button-reportes {
    width: 20vw;
  }
}
@media only screen and (min-width: 1200px) {
  .accionesCaja .modal-content .button-reportes {
    width: 12vw;
  }
}
@media only screen and (min-width: 1500px) {
  .accionesCaja .modal-content .button-reportes {
    width: 12vw;
  }
}
.accionesCaja .modal-content .report-group {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border: 1px solid lightgrey;
}
.accionesCaja .modal-content .report-group h3 {
  margin-top: 0;
  font-size: 1rem;
  color: #343a40;
}
.accionesCaja .modal-content .primary-button {
  background-color: #0d47a1;
  color: white;
}
.accionesCaja .modal-content .primary-button:hover {
  background-color: #0b3c8f;
}
.accionesCaja .modal-content .secondary-buttons-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.accionesCaja .modal-content .secondary-button {
  background-color: #e9ecef;
  color: #343a40;
  padding: 10px;
  font-size: 0.8rem;
  height: 12vh;
  display: flex;
  border-radius: 10px;
  justify-content: space-around;
  gap: 5px;
  text-transform: none;
  flex-direction: column;
  align-items: center;
  border: 1px solid lightgrey;
}
.accionesCaja .modal-content .secondary-button .icon {
  font-size: 1.5rem;
  line-height: 1;
}
.accionesCaja .modal-content .secondary-button:hover {
  background-color: #d1d6db;
}
.accionesCaja .modal-content .main-action-container {
  text-align: center;
}
.accionesCaja .modal-content .main-action-button {
  margin: auto;
  padding: 15px 30px;
  background-color: #dc3545;
  color: white;
  font-size: 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-around;
}
@media only screen and (max-width: 600px) {
  .accionesCaja .modal-content .main-action-button {
    width: 14vw;
  }
}
@media only screen and (min-width: 600px) {
  .accionesCaja .modal-content .main-action-button {
    width: 14vw;
  }
}
@media only screen and (min-width: 768px) {
  .accionesCaja .modal-content .main-action-button {
    width: 14vw;
  }
}
@media only screen and (min-width: 992px) {
  .accionesCaja .modal-content .main-action-button {
    width: 14vw;
  }
}
@media only screen and (min-width: 1200px) {
  .accionesCaja .modal-content .main-action-button {
    width: 14vw;
  }
}
@media only screen and (min-width: 1500px) {
  .accionesCaja .modal-content .main-action-button {
    width: 10vw;
  }
}
.accionesCaja .modal-content .main-action-button:hover {
  background-color: #c82333;
}

.rankingVentas {
  width: 30vw;
  max-height: 70vh;
  background-color: var(--formBackground);
  margin: auto;
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  border-radius: 25px;
  box-shadow: 3px 3px 6px var(--boxShadow);
  padding: 2%;
}
.rankingVentas #rotateRanking {
  position: absolute;
  margin-top: 16px;
  float: left;
  width: 3vh;
  z-index: 100;
}
.rankingVentas .div-item {
  color: white;
  padding-left: 5px;
  margin: 1px 0px 1px 0px;
  font-style: italic;
}
.rankingVentas .modal-content {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-content: stretch;
  min-height: 20vh;
  flex-wrap: wrap;
  align-items: stretch;
}
.rankingVentas .modal-content .boxVen,
.rankingVentas .modal-content .boxSede {
  display: flex;
  margin-bottom: 2vh;
  flex-direction: row;
  width: 97%;
  justify-content: space-between;
}
.rankingVentas .modal-content #rankingVendedores {
  max-height: 25vh;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
}
.rankingVentas .modal-content #totalSede {
  width: 100%;
  max-height: 20vh;
  margin-top: 2vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.trasladoTiendasIN {
  width: 71vw;
  max-height: 90vh;
  background-color: var(--formBackground);
  margin: auto;
  margin-top: 1vh;
  display: flex;
  border-radius: 10px;
  padding: 1vh 2vw 2vh 2vw;
  overflow-y: scroll;
  flex-direction: column;
  flex-wrap: nowrap;
}
.trasladoTiendasIN .title-trasladoTiendasIN {
  font-size: 14pt;
  margin-top: 0vh;
  margin-bottom: 0vh;
  line-height: 43px;
}
.trasladoTiendasIN .modal-content {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-content: stretch;
  min-height: 20vh;
  flex-wrap: wrap;
  align-items: stretch;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80vh;
  overflow-y: scroll;
  /* Style the tab */
  /* Style the tab */
  /* Style the tab content */
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .btnActions {
  width: 14vw;
  height: 7vh;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 1vh;
  text-align: center;
  background-color: var(--darkBackground);
  border: transparent;
  color: white;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .subTitle {
  width: 70vw;
  position: relative;
  float: left;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-family: "Noto Sans";
  color: #0058c9;
  font-weight: 600;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tab {
  overflow: hidden;
  height: 6vh;
  border: 1px solid #ccc;
  background-color: #a9d9f7;
  border-left: 2px solid #0058c9;
  border-top: 2px solid #0058c9;
  border-right: 2px solid #0058c9;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 2px solid #0058c9;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tab input[type=button] {
  background-color: #a9d9f7;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 15px;
  font-weight: 600;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tab .tablinks {
  width: 24vw !important;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tab .active {
  background-color: #6a94d8 !important;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tab input[type=button]:hover {
  background-color: #6a94d8;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tab2 {
  overflow: hidden;
  height: 6vh;
  border: 1px solid #ccc;
  background-color: #a9d9f7;
  border-left: 2px solid #0058c9;
  border-top: 2px solid #0058c9;
  border-right: 2px solid #0058c9;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 2px solid #0058c9;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tab2 input[type=button] {
  background-color: #a9d9f7;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 15px;
  font-weight: 600;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tab2 .tablinks2 {
  width: 35vw !important;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tab2 .active {
  background-color: #6a94d8 !important;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tab2 input[type=button]:hover {
  background-color: #6a94d8;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .inputFilter {
  border: 2px solid #0058c9;
  border-radius: 5px;
  height: 4.5vh;
  margin-bottom: 1vh;
  padding-left: 10px;
  color: #0058c9 !important;
  font-style: italic;
  font-weight: 500;
  font-size: 2vh;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .boxInputFilter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  height: 60px;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .resetTrasladoH {
  border: 2px solid #0058c9;
  border-radius: 10px;
  height: 4.5vh;
  margin-bottom: 1vh;
  padding-left: 10px;
  color: #ffffff;
  font-style: italic;
  font-weight: 500;
  font-size: 2vh;
  background-color: #0058c9;
  width: 10vw;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tabcontent,
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tabcontent2 {
  display: block;
  overflow-y: scroll;
  background-color: white;
  border-left: 2px solid #0058c9;
  border-bottom: 2px solid #0058c9;
  border-right: 2px solid #0058c9;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow-x: hidden;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tabFooter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tableArtToTransTienda_wrapper {
  margin: 5vh 2vh;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .tableArtToTransTienda_wrapper .tableArtToTransTienda_filter {
  margin-bottom: 5px;
}
.trasladoTiendasIN .modal-content #trasladoTiendasINForm .dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: 1.6vh;
  width: 6vw;
}

.trasladosBackendM {
  width: 70vw;
  max-height: 90vh;
  background-color: var(--formBackground);
  margin: auto;
  margin-top: 1vh;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 1vh 2vw 2vh 2vw;
}
.trasladosBackendM .title-trasladosBackendM {
  font-size: 14pt;
  margin-top: 0vh;
  margin-bottom: 0vh;
  line-height: 43px;
}
.trasladosBackendM .modal-content {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-content: stretch;
  min-height: 20vh;
  flex-wrap: wrap;
  align-items: stretch;
  /* Style the tab */
  /* Style the tab */
  /* Style the tab content */
}
.trasladosBackendM .modal-content .btnActions {
  width: 14vw;
  height: 7vh;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 1vh;
  text-align: center;
  background-color: var(--darkBackground);
  border: transparent;
  color: white;
}
.trasladosBackendM .modal-content .subTitle {
  width: 30vw;
  position: relative;
  float: left;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-left: -240px;
  left: 50%;
  font-size: 18px;
  font-family: "Noto Sans";
  color: #0058c9;
  font-weight: 600;
}
.trasladosBackendM .modal-content .tab {
  overflow: hidden;
  height: 6vh;
  border: 1px solid #ccc;
  background-color: #a9d9f7;
  border-left: 2px solid #0058c9;
  border-top: 2px solid #0058c9;
  border-right: 2px solid #0058c9;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 2px solid #0058c9;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.trasladosBackendM .modal-content .tab input[type=button] {
  background-color: #a9d9f7;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 15px;
  font-weight: 600;
}
.trasladosBackendM .modal-content .tab .tablinks {
  width: 24vw !important;
}
.trasladosBackendM .modal-content .tab .active {
  background-color: #6a94d8 !important;
}
.trasladosBackendM .modal-content .tab input[type=button]:hover {
  background-color: #6a94d8;
}
.trasladosBackendM .modal-content .tab2 {
  overflow: hidden;
  height: 6vh;
  border: 1px solid #ccc;
  background-color: #a9d9f7;
  border-left: 2px solid #0058c9;
  border-top: 2px solid #0058c9;
  border-right: 2px solid #0058c9;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 2px solid #0058c9;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.trasladosBackendM .modal-content .tab2 input[type=button] {
  background-color: #a9d9f7;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 15px;
  font-weight: 600;
}
.trasladosBackendM .modal-content .tab2 .tablinks2 {
  width: 35vw !important;
}
.trasladosBackendM .modal-content .tab2 .active {
  background-color: #6a94d8 !important;
}
.trasladosBackendM .modal-content .tab2 input[type=button]:hover {
  background-color: #6a94d8;
}
.trasladosBackendM .modal-content .inputFilter {
  border: 2px solid #0058c9;
  border-radius: 5px;
  height: 4.5vh;
  margin-bottom: 1vh;
  padding-left: 10px;
  color: #0058c9 !important;
  font-style: italic;
  font-weight: 500;
  font-size: 2vh;
}
.trasladosBackendM .modal-content .boxInputFilter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  height: 60px;
}
.trasladosBackendM .modal-content .resetTrasladoH {
  border: 2px solid #0058c9;
  border-radius: 10px;
  height: 4.5vh;
  margin-bottom: 1vh;
  padding-left: 10px;
  color: #ffffff;
  font-style: italic;
  font-weight: 500;
  font-size: 2vh;
  background-color: #0058c9;
  width: 10vw;
}
.trasladosBackendM .modal-content .tabcontent,
.trasladosBackendM .modal-content .tabcontent2 {
  display: block;
  overflow-y: scroll;
  background-color: white;
  border-left: 2px solid #0058c9;
  border-bottom: 2px solid #0058c9;
  border-right: 2px solid #0058c9;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow-x: hidden;
}
.trasladosBackendM .modal-content .tabFooter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.trasladosBackendM .modal-content .tableArtToTransTienda_wrapper {
  margin: 5vh 2vh;
}
.trasladosBackendM .modal-content .tableArtToTransTienda_wrapper .tableArtToTransTienda_filter {
  margin-bottom: 5px;
}
.trasladosBackendM .modal-content .dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: 1.6vh;
  width: 6vw;
}

table.display.nowrap.dataTable.no-footer thead {
  border-bottom: 2px solid var(--mainColor);
}

.modal-content #ClientesNew select,
.modal-content #ClientesUpd select {
  width: 20%;
}

.fieldinput {
  width: 74%;
  margin-right: 10px;
}

.modal-content button {
  margin-top: 4%;
  background-color: #0058c9;
  color: white;
  height: 32px;
  border-radius: 12px;
  border: transparent;
  width: 16%;
  font-size: 2vh;
}

#managedList button {
  position: absolute;
  left: 54%;
  top: 126px;
}

#genero {
  width: 20%;
}

.fullWidthInput {
  width: 100%;
}

.inputForm {
  background-color: var(--inputform-color);
  border: 1.5px solid var(--mainColor);
  height: 30px;
  border-radius: 5px;
  font-size: 2vh;
  padding: 2px 7px 3px 7px;
  margin-bottom: 5px;
}

.modal-content .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #0058c9 !important;
  color: #ffffff !important;
  border-radius: 10px;
  font-size: 2vh;
  width: 8vw;
  margin-left: 1vw;
}

.dataTables_wrapper {
  position: relative;
  clear: both;
  margin: 0px 10px;
  z-index: 2;
}

#tarjetasInput .buttonAmount {
  background-color: transparent;
  color: var(--darkBackground);
}

.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info {
  padding-top: 1.25em !important;
}

.discountRow,
.fastConversor,
.discountGlobal {
  margin: 25vh 34vw;
  max-width: 30vw;
  min-height: 30%;
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 25px;
  padding: 1%;
}
.discountRow .modal-header,
.fastConversor .modal-header,
.discountGlobal .modal-header {
  height: 50px;
}
.discountRow .modal-content,
.fastConversor .modal-content,
.discountGlobal .modal-content {
  margin-top: 15px;
}
.discountRow .modal-content form,
.fastConversor .modal-content form,
.discountGlobal .modal-content form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
}
.discountRow .modal-content form .buttonLine,
.fastConversor .modal-content form .buttonLine,
.discountGlobal .modal-content form .buttonLine {
  width: 85%;
  height: 48px !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.discountRow .modal-content form .buttonLine .buttonLine,
.fastConversor .modal-content form .buttonLine .buttonLine,
.discountGlobal .modal-content form .buttonLine .buttonLine {
  width: 100%;
  justify-content: space-evenly !important;
}
.discountRow .modal-content form .buttonLine .buttonLine input,
.fastConversor .modal-content form .buttonLine .buttonLine input,
.discountGlobal .modal-content form .buttonLine .buttonLine input {
  width: 80%;
  height: 35px;
  border-radius: 5px;
  border: 2px solid var(--mainColor);
  color: black;
  background-color: #ffffff;
}
.discountRow .modal-content form .buttonLine .buttonLine select,
.fastConversor .modal-content form .buttonLine .buttonLine select,
.discountGlobal .modal-content form .buttonLine .buttonLine select {
  width: 98%;
  background-color: var(--darkBackground);
  color: white;
}
.discountRow .modal-content form .buttonLine .buttonLine select option,
.fastConversor .modal-content form .buttonLine .buttonLine select option,
.discountGlobal .modal-content form .buttonLine .buttonLine select option {
  background-color: white;
  color: var(--mainColor);
}
.discountRow .modal-content form .buttonLine .buttonLine .buttonLine,
.fastConversor .modal-content form .buttonLine .buttonLine .buttonLine,
.discountGlobal .modal-content form .buttonLine .buttonLine .buttonLine {
  height: 48px;
  justify-content: center;
}
.discountRow .modal-content form .buttonLine .buttonLine select,
.discountRow .modal-content form .buttonLine .buttonLine button,
.fastConversor .modal-content form .buttonLine .buttonLine select,
.fastConversor .modal-content form .buttonLine .buttonLine button,
.discountGlobal .modal-content form .buttonLine .buttonLine select,
.discountGlobal .modal-content form .buttonLine .buttonLine button {
  height: 35px;
  border-radius: 5px;
  background-color: #148dd7;
}
.discountRow .modal-content form .buttonLine .buttonLine select img,
.discountRow .modal-content form .buttonLine .buttonLine button img,
.fastConversor .modal-content form .buttonLine .buttonLine select img,
.fastConversor .modal-content form .buttonLine .buttonLine button img,
.discountGlobal .modal-content form .buttonLine .buttonLine select img,
.discountGlobal .modal-content form .buttonLine .buttonLine button img {
  width: 1.5em;
  filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(5245%) hue-rotate(208deg) brightness(114%) contrast(100%);
}

.btnAccionFinal {
  background-color: #0058c9 !important;
}
@media (min-width: 1024px) {
  .btnAccionFinal {
    width: 7vw !important;
  }
}
@media (max-width: 1024px) {
  .btnAccionFinal {
    width: 16vw !important;
  }
}
@media (max-width: 768px) {
  .btnAccionFinal {
    width: 16vw !important;
  }
}
@media (max-width: 480px) {
  .btnAccionFinal {
    width: 16vw !important;
  }
}

.btnInnerModal {
  background-color: #148dd7 !important;
  width: 7vw;
}

th.sorting {
  font-family: var(--bodyFont);
  color: #0058c9 !important;
  font-style: italic;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: transparent !important;
}

table#dTlistaEspecialidades {
  font-size: 0.75em;
}

tr.odd.handCursor {
  background-color: #148dd7;
  color: white;
}

#listaVueltosXPM .listaMediana {
  width: 65vw;
}
#listaVueltosXPM .listaMediana #dTlistaVueltosXPM_filter input {
  width: 10vw;
}
#listaVueltosXPM .listaMediana #title-listaVueltosXPM {
  width: 30vw;
  position: relative;
  float: left;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-left: -15vw;
  left: 50%;
  font-size: 22px;
  font-family: "Noto Sans";
}

#btnInsertArtIMEI,
#btnUpdateArtIMEI,
#cargarExcel {
  width: 8vw;
  height: 40px;
  font-size: 18px;
  border-radius: 5px;
  border: 1px solid;
}

.montoRecargo {
  padding: 5px 10px 5px 10px !important;
  height: 44px !important;
}

#stockTiendas {
  width: 20vw;
  height: auto !important;
  max-height: 50vh;
  background-color: var(--modalBg);
  margin: 20vh 65vw;
  border-radius: 25px;
  box-shadow: 3px 3px 6px var(--boxShadow);
  padding: 2%;
}

.warehouseIcon {
  margin-top: 0px !important;
  width: 30px !important;
  height: 30px !important;
  background-color: white !important;
  border-radius: 80px !important;
}

#precioArts,
#imeiArts,
#inventarioArts,
#trasladosBackend {
  border: 1px solid lightblue;
  border-bottom-left-radius: 10px;
  display: none;
  background-color: white;
  border-bottom-right-radius: 10px;
}
#precioArts .tabFooter,
#imeiArts .tabFooter,
#inventarioArts .tabFooter,
#trasladosBackend .tabFooter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

#entradas {
  border-radius: 20px;
  padding: 0vh 0vw 2vh 0vw;
  overflow-y: scroll;
  max-height: 27vh;
}
#entradas #searchByCodArtDesc {
  height: 4vh;
  border-radius: 5px;
  border: 1px solid #0058c9;
  padding-left: 10px;
  font-size: 11pt;
  width: 55vw;
  margin: 0vh 2.5vw;
}
#entradas .autoComplete_wrapper {
  margin-left: 10px;
}
#entradas .autoComplete_wrapper ul {
  width: 54vw;
  margin-left: 16vw;
}

.btnTraslado {
  width: 8vw;
  height: 30px;
  font-size: 11pt;
  border-radius: 5px;
  border: 2px solid #0058c9;
  background-color: #0058c9;
  color: white;
  margin-bottom: 1vh;
  margin-top: 1vh;
}

#panelAccionesCaja {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  height: 40vh;
  margin-top: 2vh;
}
#panelAccionesCaja .subtitle {
  width: 100%;
  position: relative;
  float: left;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-family: "Noto Sans";
  color: #0058c9;
  font-weight: 600;
}
#panelAccionesCaja #panelReportes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-between;
  width: 100%;
  height: 20vh;
}
#panelAccionesCaja #btnColsUp {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  height: 7vh;
  margin-bottom: 3vh;
}
#panelAccionesCaja #btnColsUp #arqueoCaja {
  display: flex;
  /* width: 10vw; */
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  border: 2px solid #0058c9;
  border-radius: 10px;
  height: 4.5vh;
  margin-bottom: 1vh;
  background-color: #0058c9;
  color: #ffffff;
  font-style: italic;
  font-weight: 500;
  font-size: 2vh;
  width: 10vw;
  text-align: center;
  line-height: 30px;
}
#panelAccionesCaja #btnColsDown {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  height: 7vh;
  margin-bottom: 3vh;
}
#panelAccionesCaja #btnColsDown #cierreCajaTurno {
  border: 2px solid red;
  border-radius: 10px;
  height: 4.5vh;
  margin-bottom: 1vh;
  background-color: red;
  color: white;
  font-style: italic;
  font-weight: 500;
  font-size: 2vh;
  width: 10vw;
  text-align: center;
  line-height: 30px;
}

.boxMainSelecter {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.boxMainSelecter .boxSelecter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  width: 10vw;
}

.radio-container {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
}

/*.radio-container:hover input ~ .radio-checkmark {
	background-color: #ccc;
}*/
.radio-container input:checked ~ .radio-checkmark {
  background-color: #2196f3;
}

.radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-container input:checked ~ .radio-checkmark:after {
  display: block;
}

.radio-container .radio-checkmark:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.inputGroup {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  width: 17vw;
}

.leftInputForm {
  border-top-left-radius: 10px;
  line-height: 30px;
  border-bottom-left-radius: 10px;
  width: 8vw;
  border: 2px solid var(--mainColor);
  height: 31px;
  font-size: 15px;
  text-align: center;
  background-color: #148dd7;
  color: white;
  border-right: 0px;
  padding-left: 5px;
}

.rigthInputForm {
  width: 8vw !important;
  border-radius: 0px !important;
  border: 2px solid var(--mainColor) !important;
  padding-left: 1vw;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

.tabMainContent {
  max-height: 30vh;
}

#referenciaUSD {
  align-items: center;
}
#referenciaUSD #montoReferenciaUSD {
  width: 10vw;
  text-align: center;
  line-height: 44px;
  color: red;
  font-weight: 600;
  background-color: lightgray;
  border-radius: 5px;
}
#referenciaUSD #tipoReferenciaUSD {
  width: 2vw;
  height: 6vh;
  margin-left: 2vw;
  filter: invert(75%) sepia(20%) saturate(787%) hue-rotate(54deg) brightness(86%) contrast(96%);
}

.tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 5px;
  cursor: text;
  min-height: 30px;
  font-size: 2vh;
  width: 100%;
  margin-bottom: 5px;
  padding: 2px 7px 3px 7px;
  border: 1.5px solid var(--mainColor);
  background-color: var(--inputform-color);
}
.tag-input input {
  flex: 1;
  border: none;
  outline: none;
  padding: 6px;
  font-size: 14px;
  min-width: 120px;
}
.tag-input .tag {
  display: flex;
  align-items: center;
  background-color: #e0f0ff;
  color: #0077cc;
  padding: 4px 8px;
  margin: 4px;
  border-radius: 16px;
  font-size: 13px;
}
.tag-input .tag div {
  background: none;
  border: none;
  color: #0077cc;
  font-weight: bold;
  margin-left: 6px;
  cursor: pointer;
}
.tag-input .tag:hover {
  background-color: #cce4ff;
}

.suggestions {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 10;
  min-width: 20%;
  max-height: 200px;
  overflow-y: auto;
}
.suggestions .suggestion-item {
  padding: 6px 10px;
  cursor: pointer;
}
.suggestions .suggestion-item:hover {
  background-color: #f0f8ff;
}/*# sourceMappingURL=modal.css.map */