:root {
    --bgBarraTituloForm:#042953;
    --coBarraTituloForm:#f2f5f8;
}

:host ::ng-deep .swal2-container {
    z-index: 300000 !important;
}

* {
    padding: 0;
    margin: 0;
}

.modal-title {
    font-size: 14px;
}

/*input[type="text"],
input[type="number"],
input[type="tel"],
input[type="date"],
select, textarea {
    border-radius: 4px !important;
    box-sizing: border-box !important;
    transition: border 0.3s ease-in-out !important;
    padding: 0 5px;
    background-color: rgba(255, 255, 221, 0.3);
}

.input-group span, label {
    background-color: rgba(236, 248, 241, 0.6);
    font-weight: 400;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus, 
select:focus, textarea:focus {
    background-color: rgba(240, 242, 245, .3) !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3) !important;
}*/

.filtro_fecha_span {
    background-color: rgb(1, 2, 23) !important;
    color: #e4f2f2 !important;
    font-weight: 600;
}
.filtro_fecha_input {
    background-color: rgb(118, 68, 4) !important;
    color: #ebd108 !important;
    font-weight: 400;
}
.filtro_establecimiento_span {
    background-color: rgb(214, 214, 169) !important;
    color: #07000e !important;
    font-weight: 600;
}
.filtro_establecimiento_select {
    background-color: rgb(187, 181, 110) !important;
    color: #1f1b01 !important;
    font-weight: 400;
}
.filtro_almacen_span {
    background-color: rgb(230, 247, 244) !important;
    color: #1d1a01 !important;
    font-weight: 600;
}
.filtro_almacen_select {
    background-color: rgb(105, 190, 211) !important;
    color: #1f1b01 !important;
    font-weight: 400;
}
.filtro_puntoventa_span {
    background-color: rgb(249, 243, 244) !important;
    color: #1d1a01 !important;
    font-weight: 600;
}
.filtro_puntoventa_select {
    background-color: rgb(164, 141, 141) !important;
    color: #fafaf7 !important;
    font-weight: 400;
}

.barraTituloForm {
    display: block;
    min-height: 35px;
    color:var(--coBarraTituloForm);
    border-radius: 5px 5px 0 0;
    font-size: 14px;
    padding: 8px 8px 0 8px;
}

.barraTituloForm i {
    color: rgb(247, 231, 19);
}

.barraTituloForm span {
    color: rgb(255, 230, 0);
    margin-left: 5px;
}

.barraTituloForm div {
    float: right;
}

.barraTituloForm div i {
    font-size: 21px;
    color: #96999c;
}

.barraTituloForm div i:hover {
    cursor: hand;
    color: #fdfdfd;
    transition: 1s;
}
.barraTituloForm div i:not(:hover) {
    transition: 1s;
}

.main {
    height: 85vh;
    background-color: rgb(134, 130, 130);
    width: 100%;
}

/*LOADIN DE GUARDADO*/
.loading-save {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-save .loading {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ddd;
  border-top-color: orange;
  background-color: #f8ed99;
  animation: loading 1s linear infinite;
}
.loading-save span {
  position:absolute;
  font-size:.8em;
  font-weight: 600;
  color:rgba(81, 6, 3, 0.7);
}
.loading-save span::after {
    content: 'Procesando';
}
@keyframes loading {
  to {
    transform: rotate(360deg);
  }
}
/*------------------------------*/

  /* CONTROL DE PAGINAS*/
.scrolling-row {
    display: flex;
    padding: 0;
    max-height: 40px;
    width: 0 auto;
}
.scrollable {
    display: flex;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
.scrollable input {
    min-width: 25px;
    font-size: 12px;
    text-align: center;
}
.scrollable input:hover {
    background-color: #042953;
    color: antiquewhite;
}

.scrolling-button-left, .scrolling-button-right {
    min-width: 25px;
    background-color:rgb(124, 124, 252);
    color: cornsilk;
}

.modal .modal-dialog .modal-content .modal-header {
    background-color: rgb(15, 12, 48);
    color: #fdfdfd;
    height: 6vh;
}

.btnPulsado {
    background-color: #042953;
    color: antiquewhite;
}
.btnNoPulsado {
    background-color: rgb(248, 248, 252);
}

.modal .modal-dialog .modal-content .modal-header button {
    font-size: 16px;
    padding: 4px;
    background-color: #99a6b3;
    font-size: 12px;
    color: #f2f5f8;
    border-radius: 100px;
}

.modal .modal-dialog .modal-content .modal-header button:hover {
    background-color:aliceblue;
    padding: 5px;
}

.modal .modal-dialog .modal-content .modal-footer button {
    height: 2rem;
    min-width: 20vh;
    padding: 2px;
    background-color: aqua;
}

.menu-flotante-venta {
    margin-top: 0.2px !important;
}
.menu-flotante-venta button {
    background: rgb(76, 112, 141);
    color: #fcfcfd;
}
.menu-flotante-venta button:hover {
    background: rgb(40, 53, 77);
    color: #ecebab;
}
.menu-flotante-venta button:disabled {
    background: rgb(241, 242, 243);
    color: #2d2d30;
}

.menu-flotante-venta ul {
    background: rgb(40, 53, 77);
}

.menu-flotante-venta ul li i{
    color: #ebe783;
    font-size: 13px;
    margin-right: 10px;
}

.menu-flotante-venta ul li a{
    color: #ececf3 !important;
    font-size: 13px;
}

.menu-flotante-venta .disabled{
    background: #273044;
    color: #010114 !important;
    font-size: 13px;
}
.menu-flotante-venta .enabled{
    background: rgb(40, 53, 77);
    color: #ececf3 !important;
}

.menu-flotante-venta ul li a:hover {
    color: #131314 !important;
    background: #cecec6 !important;
}
.menu-flotante-venta ul li:disabled {
    color: #131314 !important;
    background: #cecec6 !important;
}

.menu-flotante-venta hr{
    background-color: rgb(173, 168, 168) !important;
}

.swal2-container {
  z-index: 300000 !important;
}


/*------------------------------*/
.text-xs {
  font-size: .7rem;
}

.text-lg {
  font-size: 1.2rem;
}

.border-left-primary {
  border-left: 0.25rem solid #4e73df !important;
}

.border-bottom-primary {
  border-bottom: 0.25rem solid #4e73df !important;
}

.border-left-secondary {
  border-left: 0.25rem solid #858796 !important;
}

.border-bottom-secondary {
  border-bottom: 0.25rem solid #858796 !important;
}

.border-left-success {
  border-left: 0.25rem solid #1cc88a !important;
}

.border-bottom-success {
  border-bottom: 0.25rem solid #1cc88a !important;
}

.border-left-info {
  border-left: 0.25rem solid #36b9cc !important;
}

.border-bottom-info {
  border-bottom: 0.25rem solid #36b9cc !important;
}

.border-left-warning {
  border-left: 0.25rem solid #f6c23e !important;
}

.border-bottom-warning {
  border-bottom: 0.25rem solid #f6c23e !important;
}

.border-left-danger {
  border-left: 0.25rem solid #e74a3b !important;
}

.border-bottom-danger {
  border-bottom: 0.25rem solid #e74a3b !important;
}

.border-left-light {
  border-left: 0.25rem solid #f8f9fc !important;
}

.border-bottom-light {
  border-bottom: 0.25rem solid #f8f9fc !important;
}

.border-left-dark {
  border-left: 0.25rem solid #5a5c69 !important;
}

.border-bottom-dark {
  border-bottom: 0.25rem solid #5a5c69 !important;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.bg-gray-100 {
  background-color: #f8f9fc !important;
}

.bg-gray-200 {
  background-color: #eaecf4 !important;
}

.bg-gray-300 {
  background-color: #dddfeb !important;
}

.bg-gray-400 {
  background-color: #d1d3e2 !important;
}

.bg-gray-500 {
  background-color: #b7b9cc !important;
}

.bg-gray-600 {
  background-color: #858796 !important;
}

.bg-gray-700 {
  background-color: #6e707e !important;
}

.bg-gray-800 {
  background-color: #5a5c69 !important;
}

.bg-gray-900 {
  background-color: #3a3b45 !important;
}

.o-hidden {
  overflow: hidden !important;
}

.text-xs {
  font-size: .7rem;
}

.text-lg {
  font-size: 1.2rem;
}

.text-gray-100 {
  color: #f8f9fc !important;
}

.text-gray-200 {
  color: #eaecf4 !important;
}

.text-gray-300 {
  color: #dddfeb !important;
}

.text-gray-400 {
  color: #d1d3e2 !important;
}

.text-gray-500 {
  color: #b7b9cc !important;
}

.text-gray-600 {
  color: #858796 !important;
}

.text-gray-700 {
  color: #6e707e !important;
}

.text-gray-800 {
  color: #5a5c69 !important;
}

.text-gray-900 {
  color: #3a3b45 !important;
}

.icon-circle {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }

.chart-area {
  display: flex;
  justify-content: center;
  height: 15rem;
  width: 100rem;
}
.chartVentas {
  width: 100% !important;
}

.chartCompras  {
  width: 100% !important;
}

@media (min-width: 768px) {
  .chart-area {
    width: 100%;
  }
}