.zt_header{ height:50px!important; }
.zt_header_padding{ padding:0px 30px!important; }
.zt_menu{ 
    padding-top:14px!important; 
}
.zt_header_titulo{ padding-top:8px }
.btn-cuadrado{ border-radius: 4px!important; }
.zt_table{
    width: 100%;
    font-size:14px;
    overflow: visible!important;
}
.zt_table >tbody> tr:hover{
    background: #F8F8F8!important;
}
.zt_colinicial{
  width:4px!important;
  padding:0px!important;
}
.zt_table th{
    height: 30px!important;
}
.zt_celda{
    padding:2px 2px 2px 10px!important;
    font-size:12px!important;
}
.zt_table thead>td{
    border-bottom: 1px solid #CCC!important;
}
.zt_table thead>tr>th{
    padding:2px;
}
.zt_active_menu{
    background: #232227!important;
}
.zt-titulo{
    border-bottom:1px solid #DDD!important; 
    padding:20px 0px 10px 0px!important;
    position:fixed!important;
    background: #FFF!important;
    z-index: 1000!important;
    width:82%!important;
}
.col-form-label{
    padding-top:8px!important;
    font-size:14px!important;
}
.collapse{
    width: 98%!important;
}
.subactive{
    border-right:3px solid #0D6EFD;
}
.tooltop{
    font-size:16px!important;
    position: relative!important;
    margin-left:4px!important;
    margin-top:0px; color:#666!important;
    cursor: help!important;
    z-index:1!important;
}
.tooltip-inner{
    z-index:1000!important;
}
.tooltop:hover{
    color:#FF9800!important;
}

.tooltip-inner {
    background-color: #FF9800 !important;
    color: #000 !important;
    border: 1px solid #FF9800 !important; 
    font-weight: 400 !important;
    font-size:14px!important;
    line-height: 14px!important;
    text-align:left!important;
}

.tooltip-arrow::before {
    border-top-color: #FF9800 !important;
}

option[value="link"] {
    border-top:1px solid #000;
    padding-top:10px!important;
    color: #0D6EFD!important;
    font-weight: bold;
}


#imagesUpload {
  display: none; /* Ocultar el input */
}

#divPreviewContenedor{
  display:none;
}

#previewArea{
  display: flex;
  width: 283px!important;
  height: 232px!important;
  border: 1px solid #ccc!important;
  border-radius: 5px!important;
  position: relative!important;
  justify-content: center!important;
  align-items: left!important;
  padding: 4px!important;
  float:left!important;
}

.size18{
  font-size:18px!important;
  cursor:pointer;
}

.size22{
  font-size:22px!important;
  cursor:pointer;
}

#previewAreaOptions{
  width: 60px!important;
  padding:4px!important;
  height: 100px!important;
  float:left!important;
}

#previewArea >  img{
  width:100%!important;
  height:100%!important;
}

#dropArea {
  width: 283px;
  height: 232px;
  background-image: url('../../images/sinimagen.jpg'); /* Imagen de fondo */
  background-size: cover;
  border: 2px dashed #ccc;
  border-radius: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#previewContainer {
  display: flex!important;
  flex-wrap: wrap!important;
  gap: 10px!important;
  margin-top: 10px!important;
}

.preview-img {
  width: 50px!important;
  height: 50px!important;
  border: 1px solid #ddd!important;
  border-radius: 5px!important;
  padding: 2px!important;
  margin-right:-3px!important;
  cursor:pointer!important;
}

.preview-img-add {
  width: 50px!important;
  height: 50px!important;
  border: none;
  border-radius: 5px!important;
  padding: 2px!important;
  margin-right:-3px!important;
  cursor:pointer!important;
}

.colorGray{
  color:#CCC!important;
}

.colorBlueSel{
  color:#0a58ca!important;
}

.badgeEditado{
  border-radius: 4px!important;
  padding:2px!important;
  font-size:12px!important;
  background-color: #007bff!important;
  color: #fff!important;
}

#previewArea::before {
  content: "PORTADA";
  position: absolute;
  bottom: 5px;
  left: 5px;
  background:#0a58ca;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: bold;
}

.hide-before::before {
  content: none !important;
}

.optionLink {
  font-weight: bold;
  color:#0D6EFD!important;
  border-top:1px solid #CCC;
}

.optionLink:hover {
  color:#FFF!important;
}

.nav-tabs>.nav-link{
  padding:4px 20px!important;
  font-size:14px!important;
  text-align:center!important;
  border:none!important;
  background:none!important;
}

.nav-tabs > .active{
    color:#0D6EFD!important;
    border-bottom:3px solid #0D6EFD!important;
}

.tab-content{
  border:none!important;
  padding:0px!important;
}

.tblDetalles{
  font-size:14px!important;
}

.tableTr{
  height:30px!important;
}

.detail{
  color:#999!important;
  width:130px!important;
}

.detailContent{
  font-weight: bold;
}

.badgearreglado{ 
    border-radius:5px!important;
    font-size:12px!important;
    padding:2px 10px!important;
}

.custom-color-1 { background-color: #FF0000!important; }
.custom-color-2 { background-color: #FF4500!important; }
.custom-color-3 { background-color: #FF7F00!important; }
.custom-color-4 { background-color: #FFA500!important; }
.custom-color-5 { background-color: #FFFF00!important; }
.custom-color-6 { background-color: #ADFF2F!important; }
.custom-color-7 { background-color: #00FF00!important; }
.custom-color-8 { background-color: #00FF00!important; }

.custom-swal-height-loading{
  height:100px!important;
}

.personinput{
  width: 100%!important;
  padding-left: 30px!important;
}

#phone {
  width: 100%; /* Cambia esto para ajustar el ancho según tu necesidad */
}

/* Mantener la bandera en su lugar */
.iti__flag-container {
  padding-left: 0 !important;  /* Asegura que la bandera no se desplace */
}

/* Añadir padding al input para mover el texto hacia la derecha */
.iti input {
  padding-left: 50px !important; /* Alinea el texto a la izquierda con padding */
}

/* Hacer que el input ocupe todo el ancho posible */
.iti {
  width: 100% !important;
}

.btnqr{
  padding:18px!important;
  background:#00E364;
  border:none!important;
  color:#FFF!important;
  font-weight:bold!important;
}

#qrgen{
  display: none;
}

#phone{
  font-size:16px!important;
}

#qrCode .overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: white;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 10px;
}

.actived{
  background: #CCC!important;
  cursor:default!important;
}

.badgetConected{
  background: #00E364!important;
  border-radius: 7px!important;
  color:#FFF!important;
  border:none!important;
}

.serAct{
  background: #00E364;
  padding: 10px 20px 16px 20px;
  border-radius: 5px;
  color:#FFF;
}

.serIna{
  background: #f5f102;
  padding: 10px 20px 16px 20px;
  border-radius: 5px;
  color:#000;
}

#estDivServicio{
  display: none;
}

.btnsep{
  margin:0px 2px!important;
}

.linkconf{
  text-decoration: none;
  color:#000;
}

.linkconf:hover{
  text-decoration: underline;
  color:#0a58ca;
}

.modal-personalizado {
  max-width: 800px;  /* O el tamaño que necesites */
  width: 90%;        /* Ajusta al 90% del viewport */
}

.full-height {
  height: 100%;
}


.grpDivTop{
  background:#FFF!important; 
  text-align:right!important;
  padding:14px 10px;
  border-bottom:1px solid #CCC;
}

.grpDiv{
  border-bottom:1px solid #CCC;
  background: #FFF!important;
  padding:10px 10px;
  font-size:12px!important;
}

.grpDivSel{
  background: #F1F1FA!important;
}

.grpDiv:hover{
  background: #F6F6FA!important;
  cursor:pointer!important;
}

.border-right {
  border-right: 1px solid #dee2e6;
}

.throwtr{
  background:#F9F9FB!important;
  font-size:12px!important;
  color:#797D8D!important;
  font-weight: 100!important;
  font-size:12px!important;
  font-family: arial!important;
}

.nav-tabs{
  margin-top:10px!important;
}

.nav-tabs .nav-link{
  background-color: #FFF!important;
  border-left:none!important;
  border-top:none!important;
  border-right:none!important;
}

.nav-tabs .nav-link.active::after{
  content: "";
  display:block;
  position:inherit!important;
  height: 4px;
  background-color: #007bff; /* Azul Bootstrap */
  margin-bottom: -7px!important;
  padding:0px 20px!important;
  margin-left: -20px!important;
  width: calc(100% + 40px);
}

.rowtitulo{
  padding:16px 10px 10px 0px!important;
}  

.footer{
  position: fixed!important;
  bottom:2px!important;
  right:6px!important;
  background: none!important;
  font-family:arial!important;
  font-size:12px!important;
  border-top:none!important;
}
.footerlink>a{
  text-decoration: none!important;
}
.footerlink>a:hover{
  text-decoration: underline!important;
}

.footBoton{
  position:fixed!important;
  bottom:0px!important;
  width: calc(100% + 20px)!important;
  margin-left:-16px!important;
  background: #f1f1f1!important;
  padding:10px 35px!important;
}

.btn-sm{
  border-radius: 5px!important;
  padding: 8px!important;
}

#btnCancelar:hover{
  color:#000!important;
}

.btn-activo{
  font-size:12px!important;
  font-size:10px!important;
  letter-spacing:2px!important;
  font-weight:bold!important;
  width:100px!important;
  padding:4px!important;
  border-radius:5px!important;
  color:#666!important;
  background:#E3FF91!important;
}

.itemlista{
  background: #FFF!important;
  padding:10px!important;
  border-bottom:1px solid #CCC!important;
}

.itemlista:hover{
  background: #EEE!important;
  cursor:pointer!important;
}

.itseselected{
  background: #FFF5E5!important;
  border-left:8px solid #1A3399!important;
  cursor:auto!important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745!important; /* Verde Bootstrap */
    border-color: #28a745!important;
}

/* Opcional: cambiar el borde cuando no está seleccionado */
.custom-control-input ~ .custom-control-label::before {
    border: 2px solid #28a745!important;
}