#divLoading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(254,254,255,.95);
	z-index: 999999999999;
	display: none;
}

#divLoading img {
	width: 55px;
	height: 55px;
}

.divLoading {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(254,254,255,.95);
	z-index: 999999999999;
	display: none;
}

.divLoading img {
	width: 55px;
	height: 55px;
}


.swal2-container{
	z-index: 1080;
}


[data-letters]:before {
  content:attr(data-letters);
  display:inline-block;
  font-size:1em;
  width:2.5em;
  height:2.5em;
  line-height:2.5em;
  text-align:center;
  border-radius:50%;
  background: rgba(0, 73, 154, 0.9);
  vertical-align:middle;
  margin-right:1em;
  color:white;
  }

  .product {
  position: relative;
  width: 3.375rem;
  height: 3.375rem;
  cursor: pointer;
}


.product img {
  width: 100%;
  height: 100%;
}
.product .product-initial {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #8592a3;
  font-weight: 700;
}
.product.product-online:after, .product.product-offline:after, .product.product-away:after, .product.product-busy:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  box-shadow: 0 0 0 2px #fff;
}
.product.product-online:after {
  background-color: #71dd37;
}
.product.product-offline:after {
  background-color: #8592a3;
}
.product.product-away:after {
  background-color: #ffab00;
}
.product.product-busy:after {
  background-color: #ff3e1d;
}

.custom-radio-button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}


/*===========================  Estilos botones de pagos =======================*/



.card-btn-pay label{
  border: 1px solid #d9dee3;
  transition: transform 0.1s;
}
.card-btn-pay label:hover {
cursor: pointer;
transform: scale(1.02);
transition: transform 0.1s;
border: 1px solid #0d5afc  ;
}
.card-btn-pay .form-check-input{
  opacity: 0;
}


.card-btn-pay input[type="radio"]:checked +label {

  background-color: #165efaa1;
  border-color: #286bf9;
  color: white;

}

.new-btn-light{
 color:  #3A416F !important;
 background: #e9ecef;
}
.btn {
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  
  
}
  
/*=================== Estilos de botones para ticktes =================*/


.card-tickets-success{

  box-shadow: 0 0rem 0.4rem 0px rgb(161 172 184 / 34%) !important;
  font-size: 0.75rem;
}

.btn-ticket-success{
  background-color: #8bff8d;
  background-image: linear-gradient(0deg, #8bff8d 0%, #2AF598 100%);  
}

.btn-ticket-danger{
  background-color: #FFE53B;
  background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
  
}


.card-tickets-success:hover{
  transform: scale(1.05);
  transition: transform 0.2s ease;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 0px 1px #54b120, 0px 0px 5px 0px #357f0d7a;
  border: solid #95fb5f 2px;
}

.card-tickets-danger{

  box-shadow: 0 0rem 0.4rem 0px rgb(161 172 184 / 34%) !important;
  font-size: 0.75rem;
}


.card-tickets-danger:hover{
  transform: scale(1.05);
  transition: transform 0.2s ease;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 0px 1px #ff3e1d , 0px 0px 5px 0px #ff3e1d;
  border: solid #ff3e1d  2px;
}

.card-scroll{
  height: 500px;

  overflow-y: scroll;
}

body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}


/***********************/
/* MODO OSCURO */
/***********************/
:root{
  --color-azul-oscuro: #1a2035;
  --color-azul-oscuro2: #202940;
  --color-azul-claro: #323a54;
  --color-blanco: #fff;
  --color-text-dark: #233446;
  --color-text-light: #b4bdc6;
}

body.dark-mode{
  background-color: var(--color-azul-oscuro) !important;
}

body.dark-mode .bg-menu-theme{
  background-color: var(--color-azul-claro) !important;
  z-index: 100 !important;
}

body.dark-mode .menu-text{
  color: var(--color-blanco) !important;
}

/*body.dark-mode .menu-item.active{
  background-color: var(--color-azul-oscuro2) !important;
}

body.dark-mode .menu-link{
  background-color: var(--color-azul-oscuro2) !important;
}*/

body.dark-mode .menu .app-brand.demo {
  border-bottom: 1px solid var(--color-blanco) !important;
}

body.dark-mode .menu-inner-shadow{
  display: none !important;
}

body.dark-mode a{
  color: var(--color-blanco) !important;
}

body.dark-mode p{
  color: var(--color-blanco) !important;
}

body.dark-mode h1{
  color: var(--color-blanco) !important;
}

body.dark-mode h3{
  color: var(--color-blanco) !important;
}

body.dark-mode h4{
  color: var(--color-blanco) !important;
}

body.dark-mode h5{
  color: var(--color-blanco) !important;
}

body.dark-mode h6{
  color: var(--color-blanco) !important;
}

body.dark-mode .bg-navbar-theme{
  color: var(--color-azul-oscuro2) !important;
}

body.dark-mode .layout-page{
  color: var(--color-azul-oscuro) !important;
}

body.dark-mode .text-dark{
  color: var(--color-text-dark) !important;
}

body.dark-mode .text-dark{
  color: var(--color-text-dark) !important;
}

body.dark-mode .menu-link{
  color: var(--color-text-light) !important;
}

body.dark-mode .dropdown-menu{
  background-color: var(--color-azul-oscuro2) !important;
}

body.dark-mode .card{
  background-color: var(--color-azul-oscuro2) !important;
}
body.dark-mode small{
  color: var(--color-blanco) !important;
}

body.dark-mode .modal-content{
  background-color: var(--color-azul-oscuro2) !important;
}

body.dark-mode .form-control{
  background-color: var(--color-azul-oscuro2) !important;
}

body.dark-mode .form-label{
  color: var(--color-blanco) !important;
}

body.dark-mode .btn-close{
  background-color: var(--color-azul-oscuro2) !important;
}

body.dark-mode .footer{
  background-color: var(--color-text-dark) !important;
}

body.dark-mode .paginate_button a{
  color: var(--color-text-dark) !important;
}

body.dark-mode .paginate_button.active a{
  color: var(--color-blanco) !important;
}

body.dark-mode .dataTables_length{
  color: var(--color-blanco) !important;
}

body.dark-mode .dataTables_info{
  color: var(--color-blanco) !important;
}

body.dark-mode .dataTables_filter{
  color: var(--color-blanco) !important;
}

body.dark-mode th{
  color: var(--color-blanco) !important;
}

body.dark-mode td{
  color: var(--color-blanco) !important;
}

body.dark-mode .modal-content td{
  color: var(--color-azul-oscuro2) !important;
}

body.dark-mode select{
  color: var(--color-blanco) !important;
  background-color: var(--color-azul-oscuro2) !important;
}

body.dark-mode input{
  color: var(--color-blanco) !important;
}

body.dark-mode .btnViewUsuario{
  color: var(--color-blanco) !important;
}

body.dark-mode .swal2-popup{
  background-color: var(--color-azul-oscuro2) !important;
}

body.dark-mode h5.card-title{
  color: var(--color-blanco) !important;
}

body.dark-mode span{
  color: var(--color-blanco) !important;
}

body.dark-mode .alert{
  background-color: var(--color-azul-oscuro2) !important;
}

body.dark-mode .card-services{
  background-color: var(--color-azul-oscuro2) !important;
}

body.dark-mode .blockquote-footer{
  color: var(--color-blanco) !important;
}

body.dark-mode .layout-navbar {
  background-color: var(--color-azul-oscuro2) !important;
  box-shadow: none !important;
  z-index: 100 !important;
}

body.dark-mode span.badge.bg-label-primary.me-1{
  color: var(--color-azul-oscuro2) !important;
}

body.dark-mode span.badge.bg-label-success.me-1{
  color: var(--color-azul-oscuro2) !important;
}

body.dark-mode label{
  color: var(--color-blanco) !important;
}

body.dark-mode .modal-content td p {
  color: var(--color-azul-oscuro2) !important;
}

body.dark-mode textarea{
  color: var(--color-blanco) !important;
}

body.dark-mode td a i {
  color: var(--color-azul-oscuro2) !important;
}

body.dark-mode td a.btn-info i {
  color: var(--color-blanco) !important;
}

body.dark-mode td p{
  color: var(--color-blanco) !important;
}

body.dark-mode span.input-group-text.cursor-pointer i {
  color: var(--color-azul-oscuro2) !important;
}

body.dark-mode .bg-menu-theme .menu-inner > .menu-item.active > .menu-link{
  background-color: var(--color-azul-oscuro2) !important;
}

body.dark-mode .divLoading{
  background-color: rgb(78 83 100 / 84%) !important;
  left: 0px !important;
}


.new-style-selected{
  background: #00a3ff !important;
  color: white;
  cursor: pointer;
}

thead input {
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
}