/*
Theme Name: linkmonitor
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
}
.ico-share a {
	margin-right: 6px;
}
.ico-share a {
	opacity: 0.8;
}
.ico-share a:hover {
	opacity: 1;
}
.entrada {
    background-image: url(https://linkmonitor.pro/wp-content/uploads/2023/06/bg-entrada.png);
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding: 200px 0 145px !important;
    background-color: #f7f8fd;
    margin-top: -117px;
}
.secondary.is-outline span {
    color: #f0f0f1;
}
.button span {
    font-weight: 600;
}
.text-white {
    background-color: #314955;
    color: #fff;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-bottom: 0.125rem;
    padding-top: 0.125rem;
}
.text-primary {
    color: #4bb4b3;
}
.titu h2 {
    font-size: 2.5rem;
    font-weight: 500;
}
.titu h2 span {
    font-weight: 700;
}
h1 {
	  font-size: 2rem;
	  letter-spacing: -.84px
}
.titles p {
    margin-bottom: 0;
}
@media (min-width: 540px) {

}
@media (min-width: 1018px){
h1 {
    font-size: 3rem;
}
.landing h1 {
    font-size: 1.5rem;
}
.landing li {
    font-size: .9rem;
}
}
@media (min-width: 1500px) {
.entrada {
    min-height: 800px;
    padding-top: 150px !important
}
}
@media (min-width: 1949px) {
.landing .pantalla img {
    width: 700px;
}
}
.rounded .img-inner {
    box-shadow: 0 .5rem 1rem rgba(10,10,11,.15)!important;
    border-radius: 0.6rem!important;
}
/*
.color h1,.color h2,.color h3 {
    color: var(--primary-color);
}
.home0 .header-bg-color {
    background-color: transparent;
}
.home .titles h4 {
    color: var(--primary-color);
}
*/
.titles0 h1 {
    font-size: 2.2rem;
	  margin-bottom: 0;
}
.titles h2 {
	  font-size: 2.2rem;
	  margin-bottom: 0;
}
.titles .subh2 h2 {
    font-size: 1rem;
    font-weight: normal;
}
.titles p,.mabottom0 p {
    font-size: 0.9rem;
}
.list-icon ul {
    list-style: none;
    padding-left: 0;
}
.list-icon li::before {
    content: "";
    background-image: url('https://linkmonitor.pro/images/icon-ok.svg');
    background-size: contain;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.list-icon li::before {
    vertical-align: middle; 
}

.mabottom0 h1,.mabottom0 h2,.mabottom0 h3,.mabottom0 p {
	  margin-bottom: 0;
}
.tools h3 {
		  font-size: 1.2rem;
	  margin-bottom: 0;
}
.tools p {
		  font-size: 0.9rem;
	  margin-bottom: 0;
}
.dark, .dark p, .dark td {
    /*color: #d2d7d9;*/
}
.card {
  background-color: transparent;
  width: 342px;
  height: 342px;
  perspective: 1000px;
}

.card .col-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
 box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.card:hover .col-inner {
 transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.front {
	top: 25%;
	padding: 0 30px;
}
.back {
  transform: rotateY(180deg);
}
/* PLANES */
.nav-pills>li>a0 {
    border-radius: 0.3rem;
    background-color: #f2f7f9;
    margin: 0 0.5rem;
	 padding: 0.2rem 1rem;
}
/*.pricing-table0 {
    --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
    box-shadow: 0 0 #0000,0 0 #0000,var(--tw-shadow);
}
*/
.pricing-table .title0 {
    background-color: #fff;
    padding: 1rem 0;
    font-size: 2rem;
    letter-spacing: -1px;
    color: #333333;
    font-weight: 800;
}
.featured-table .title0 {
	    background-color: #4b86f8;
	    color: #fff;
}
.pricing-table.featured-table .price0 {
    color: #fff;
}
.pricing-table.featured-table a.button0 {
    background-color: #333333;
}
.pricing-table.featured-table a.button0:hover {
    background-color: #000;
}
.pricing-table .items>div0 {
    border-bottom: none;
    padding: 3px 0;
    font-size: 13px;
}
.pricing-table0 .items {
    min-height: 290px;
}
.pricing-table .price0 {
    font-weight: bold;
    font-size: 3em;
}
.plan-free {
	  border-radius: 18px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.plan-basic {
    border-radius: 18px 0 0 18px;
}
.plan-basic .items0 {
    margin-bottom: 30px;
}
.plan-pro {
	  border-radius: 18px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.contadores h4 {
	    margin-bottom: 0;
}
.porque .icon-box-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* PLANES NEW */
.tabs .pricing-table .title {
    color: #ffffff;
    opacity: .8;
    background-color: transparent;
    font-size: 1.5rem;
    margin-top: 15px;
	  text-transform: initial;
}
.tabs .pricing-table .items>div {
    border-bottom: none;
}
.tabs .pricing-table {
    border: 0;
    text-align: left;
}
.tabs .pricing-table .title {
    border-bottom: 0;
}
.tabs .pricing-table .title span {
    display: block;
    font-size: 14px;
    font-weight: normal;
    margin-top: 10px;
}
.tabs .pricing-table .price {
    color: #fff;
    font-weight: bold;
    font-size: 2.5em;
	  padding: 6px 10% 0;
}
.tabs .pricing-table .price span {
    font-size: .875rem;
    margin-left: 12px;
    color: #5d6d75;
}
.tabs .pricing-table .title, .tabs .pricing-table .items {
    padding: 10px 10%;
}
.tabs .nav-tabs+.tab-panels {
    background-color: #233842;
    border: 0;
    border-top: 1px solid #35464e;
}
.tabs .nav>li>a {
    background-color: transparent;
	  border-left: 0;
    border-right: 0;
    border-top: 0;
	  padding-left: 40px;
    padding-right: 40px;
}
.tabs .nav>li.active>a {
    background-color: rgb(35 56 66);
    border-left: 1px solid #35464e;
    border-right: 1px solid #35464e;
    border-top: 1px solid #35464e;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.tabs .is-divider.divider {
    max-width: 100%;
    padding: 0;
    height: 1px;
    margin-top: 40px;
    margin-bottom: 20px;
    background-color: hsl(199.2deg 19.08% 25.69%);
}
.sombra {
    background-image: linear-gradient(to bottom, #233842, rgb(18 24 38 / 0));
    height: 2.5rem !important;
    right: 0px;
    top: 0px;
    left: 0px;
}
.col-tabs .col-inner {
	background: radial-gradient(37.2% 102.32% at 50% 17.88%, #283f4b 0%, #233842 100%);
}
.popular {
    margin-top: -2px;
}
.popular .pricing-table-wrapper {
    position: relative;
    border-top: 2px solid #35464e;
	border-radius: 12px;
}
.popular .pricing-table-wrapper .pricing-table  {
border-radius: 12px;
        background: linear-gradient(#253c47, rgba(53, 70, 78, 0));
}
.popular .pricing-table .title {
    background-color: transparent;
}
.popular .pricing-table-wrapper::before, .popular .pricing-table-wrapper::after {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(#35464e, rgba(53, 70, 78, 0));
}

.popular .pricing-table-wrapper::before {
    left: 0;
}

.popular .pricing-table-wrapper::after {
    right: 0;
}
.tabs .bullet-item::before {
    content: url('https://linkmonitor.pro/wp-content/uploads/2023/12/marcador.svg');
    margin-right: 10px;
    vertical-align: middle;
	width: 22px;
    height: 22px;
}

.tabs .bullet-item {
    display: flex;
    align-items: center;
}
#comparison .comparison p {
    margin-bottom: 0;
}
#comparison {
    border-radius: 0.5rem;
}
#comparison .list {
    box-shadow: 0 0 #0000, 0 0 #0000, 0px 8px 48px #f0f5f6;
    border-radius: 0.5rem;
    color: #4bb4b4;
}
#comparison .title-plan p {
	color: #314955;
}
#comparison .title-plan span {
	font-size: 13px;
}
#comparison .col-inner {
    padding: 16px 0px 16px 0px !important;
}
/* FOOTER */
.linea-footer {
    background: linear-gradient(90deg,#d9d9d9 -1.53%,transparent 0,hsla(0,0%,100%,.5) 50%,transparent 100%);
    height: 1px;
    opacity: .7;
}
.logo-footer {
    opacity:0.5;
}
/* CAJAS */
.tools .icon-box-img svg {
    fill: currentColor;
    height: 32px;
    transition: all .3s;
    width: 32px;
}
.cajas {
	-webkit-transition:opacity 250ms ease-out;
	transition:opacity 250ms ease-out;
	pointer-events:none;
	
}
.cajas .caja h3 {
    font-size: 1.1em;
}
.cajas .caja p {
    font-size: 0.9em;
}
.cajas .caja{
	pointer-events:auto;
}
.cajas:hover .caja{
	opacity:0.5;
}
.cajas .caja:hover{
	opacity:1 !important;
}
.zoom{
	-webkit-transition:all 250ms ease-out;
	transition:all 250ms ease-out;
	box-shadow:0 13px 80px 0 rgba(0,0,0,0);
}
.zoom .col-inner{
	transition: all 250ms ease-out 0s;
}
.zoom:hover .col-inner{
	-webkit-transform:scale(1.05);
	-ms-transform:scale(1.05);
	transform:scale(1.05);
	box-shadow:0 13px 80px 0 rgba(0,0,0,0.10);
}
span.eliminar {
	display: inline-block;
}
/* FIN CAJAS */
.nav-dropdown li a:hover { 
	background-color:#f3f5f6 !important;
}
.gradient h3 {
    background: linear-gradient(270deg,#6e50ff,#4bb4b3);
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: repeat;
    background-size: 100%;
    color: transparent;
}
#row-contactanos .select-resize-ghost, #row-contactanos .select2-container .select2-choice, #row-contactanos .select2-container .select2-selection, #row-contactanos input[type="date"], #row-contactanos input[type="email"], #row-contactanos input[type="number"], #row-contactanos input[type="password"], #row-contactanos input[type="search"], #row-contactanos input[type="tel"], #row-contactanos input[type="text"], #row-contactanos input[type="url"], #row-contactanos select, #row-contactanos textarea {
  box-shadow: none;
  box-sizing: border-box;
  color: #314955;
  border: 1px solid #eef3f5;
  outline: none;
  transition: all 0.15s ease-out 0s;
  border-radius: .5rem;
  line-height: 1.3;
  height: 50px;
	background-color: #eef3f5;
	font-weight: 600;
}
#row-contactanos ::-webkit-input-placeholder { /* WebKit browsers */
color: #9ca3af !important;
opacity: 1;
}
#row-contactanos :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #9ca3af !important;
opacity: 1;
}
#row-contactanos ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #9ca3af !important;
opacity: 1;
}
#row-contactanos :-ms-input-placeholder { /* Internet Explorer 10+ */
color: #9ca3af !important;
opacity: 1;
}
#row-contactanos .col {
    margin: 0;
    padding: 0 15px 10px;
}
#row-contactanos .btn-large {
    font-size: 1.5em !important;
    border-radius: 8px !important;
    text-transform: initial !important;
}
#row-contactanos .obligatorio {
    color: #a1a1a1;
    font-size: 13px;
    text-align: right;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100% !important;
}
#row-contactanos .obligatorio p {
    color: #a1a1a1;
}
#row-contactanos .legal p {
    font-size: 14px;
    color: #a1a1a1;
}
.vh100 {
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme {
    background-color: #fdfdfd;
    border-top: none;
}
gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton {
    background-color: #314955;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
	  border-radius: 1.5rem !important;
	  height: 3rem;
}
gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton:hover, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton:hover {
    background-color: #314955;
}
#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p, #moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme p {
    color: #314955;
    font-weight: 100;
}
/* FOOTER */
#footer .alta {
    border-bottom: 1px solid #2e424a;
}
#footer .lang, #footer .email {
    margin-bottom: 10px;
}
#footer p {
    color:#222222;
}
#footer .secciones a {
    color:#222222;
}
#footer .secciones a:hover {
   text-decoration:underline;
}
#nav_menu-2 {
    margin-left: 0;
}
#nav_menu-2 .wpml-ls-menu-item .wpml-ls-flag {
    vertical-align: sub;
}
.social a.plain {
    display: inline-flex; 
    align-items: center; 
}
.social a.plain:not(:first-of-type) {
    margin-left: 10px;
}
.status {
    align-items: center;
}
/* linkmoniytor */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.sliders {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.sliders:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sliders {
  background-color: #2196F3;
}

input:focus + .sliders {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .sliders:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.sliders.round {
  border-radius: 34px;
}

.sliders.round:before {
  border-radius: 50%;
}
td, th {
    font-size: 0.76em !important;
    padding: 0.2em !important;
}

.color-red {
    color: red;
}

.uppercase, h6, span.widget-title, th {
    text-transform: none;
}    
       
/***********************************************/
/* Registros por pagina y paginaciones *â„
/***********************************************/
/* Estilos para el contenedor principal que incluye el selector y los botones */
.pagination-container {
    display: flex; /* Usa Flexbox */
    justify-content: flex-end; /* Alinea el contenido a la derecha */
    align-items: center; /* Alinea los elementos verticalmente */
    margin-bottom: 10px; /* Espacio debajo del contenedor */
}

/* Estilos para el selector de cantidad de elementos */
#items_per_page {
    margin-left: 10px;
    margin-right: 10px; /* Agrega margen a la derecha si es necesario */
    width: 100px;
    /* Puede que necesites ajustar el relleno y el margen para alinear verticalmente */
    padding-top: 2px; /* Ajusta segÃºn sea necesario */
    padding-bottom: 2px; /* Ajusta segÃºn sea necesario */
    margin-bottom: 0em;
}
/* Estilos para el selector de cantidad de elementos */
#items_per_page_lisc {
    margin-left: 10px;
    margin-right: 10px; /* Agrega margen a la derecha si es necesario */
    width: 100px;
    /* Puede que necesites ajustar el relleno y el margen para alinear verticalmente */
    padding-top: 2px; /* Ajusta segÃºn sea necesario */
    padding-bottom: 2px; /* Ajusta segÃºn sea necesario */
    margin-bottom: 0em;
}
/* Estilos para los botones de paginaciÃ³n */
.pagination-buttons {
    display: flex; /* Usa Flexbox para los botones */
    align-items: center; /* Alinea los botones verticalmente */
}

.pagination-buttons a {
    margin-right: 5px;
    padding: 5px 10px;
    background-color: #f5f5f5;
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.pagination-buttons a:hover {
    background-color: #e9e9e9;
}

/* Estilo para el texto de la pÃ¡gina actual */
.pagination-buttons span {
    margin-right: 5px;
    /* Otros estilos como sea necesario */
}

/************************************/
/***** Esilos Alertas ***************/
/************************************/
/* Estilos para los campos del formulario */
/* Oculta el checkbox original */
.custom-checkbox input[type="checkbox"] {
    display: none;
}

/* Estilo para el indicador del checkbox */
.custom-checkbox .checkbox-indicator {
    position: relative;
    display: inline-block;
    width: 20px; /* Ancho del cuadro del checkbox */
    height: 20px; /* Altura del cuadro del checkbox */
    background-color: #f0f0f0; /* Color de fondo del checkbox */
    border: 1px solid #d6d6d6; /* Borde del checkbox */
    margin-right: 10px; /* Espacio entre el checkbox y el texto */
    vertical-align: middle; /* Alinea el checkbox con el texto */
}

/* Estilo para cuando el checkbox estÃ¡ marcado */
.custom-checkbox input[type="checkbox"]:checked + .checkbox-indicator::after {
    content: ""; /* Contenido necesario para el pseudo-elemento */
    position: absolute;
    left: 50%; /* Centra el icono en el cuadro */
    top: 50%; /* Centra el icono en el cuadro */
    transform: translate(-50%, -50%); /* Asegura el centrado preciso */
    width: 12px; /* TamaÃ±o del icono de verificaciÃ³n */
    height: 12px; /* TamaÃ±o del icono de verificaciÃ³n */
    background-color: #007bff; /* Color del icono de verificaciÃ³n */
    border-radius: 3px; /* Bordes redondeados del icono de verificaciÃ³n */
}

/* Estilo para las flechas de ordenaciÃ³n */
.sort-arrow {
    cursor: pointer; /* Cambia el cursor a un puntero para indicar que es clicable */
    /* Otros estilos para las flechas, como margen, tamaÃ±o, etc. */
}
/* Puedes agregar estilos adicionales para cuando el ratÃ³n pasa por encima */
.sort-arrow:hover {
    /* Estilos para el efecto hover, como cambio de color, sombra, etc. */
}
/* Estilo para las flechas de ordenaciÃ³n */
.sort-arrow-lisc {
    cursor: pointer; /* Cambia el cursor a un puntero para indicar que es clicable */
    /* Otros estilos para las flechas, como margen, tamaÃ±o, etc. */
}
/* Puedes agregar estilos adicionales para cuando el ratÃ³n pasa por encima */
.sort-arrow-lisc:hover {
    /* Estilos para el efecto hover, como cambio de color, sombra, etc. */
}
/* Estilo para las flechas de ordenaciÃ³n */
.sort-arrow-la {
    cursor: pointer; /* Cambia el cursor a un puntero para indicar que es clicable */
    /* Otros estilos para las flechas, como margen, tamaÃ±o, etc. */
}
/* Puedes agregar estilos adicionales para cuando el ratÃ³n pasa por encima */
.sort-arrow-la:hover {
    /* Estilos para el efecto hover, como cambio de color, sombra, etc. */
}


/* Styles for the button */
.button-download-csv {
    display: inline-block; /* Changed from block to inline-block */
    background-color: transparent;
    border: none;
    color: #214f6f;
    cursor: pointer;
    padding: 5px 10px;
    text-decoration: none;
    font-size: 0.9em;
}

/* Rest of your styles... */


.button-download-csv i {
    margin-right: 5px;
    color: #214f6f; /* Cambiar el color del icono a negro */
}
.button-download-csv:hover i {
    color: green; /* Cambiar el color del icono a verde al pasar el ratÃ³n por encima */
}
.button-download-csv:hover {
    text-decoration: underline;
}

a[target="_blank"] .fas.fa-external-link-alt {
    font-size: 0.75em; /* Ajusta el tamaÃ±o del icono a tu preferencia */
    vertical-align: middle; /* Alinea verticalmente el icono con el texto */
    margin-left: 4px; /* Espacio entre el texto del enlace y el icono */
    color: #666;
}

.col {
    padding: 0 15px 10px !important;
}

.project-color-square {
    width: 20px;
    height: 20px;
    display: inline-block;
}

table.links-table {
  margin-top: 25px;
}

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  width: 250px;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 4px;
  position: absolute;
  z-index: 1;
  top: 75%;
  left: 100%;
  margin-left: 10px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  font-size: 0.9em;
  font-weight: 100;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip-text::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%; /* PosiciÃ³n inicial a la derecha del tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #000 transparent transparent; /* Color de la flecha */
}

.top-tooltip-container {
  position: relative;
  display: inline-block;
  margin-left: 1em !important;
}

.top-tooltip-text {
  font-size: 0.8em;    
  visibility: hidden;
  width: 220px;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 4px;
  position: absolute;
  z-index: 1;
  bottom: calc(100% + 10px); /* Coloca el tooltip arriba del elemento padre */
  left: 50%; /* Centra horizontalmente */
  transform: translateX(-50%); /* Centra horizontalmente */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.top-tooltip-container:hover .top-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.top-tooltip-text::before {
  content: '';
  position: absolute;
  bottom: -10px; /* Posiciona la flecha arriba del tooltip */
  left: 50%; /* Centra horizontalmente */
  margin-left: -5px; /* Ajusta el desplazamiento lateral */
  border-width: 5px;
  border-style: solid;
  border-color: #000 transparent transparent transparent; /* Color de la flecha */
}

#my-account-nav .woocommerce-MyAccount-navigation-link--orders {
    display: none !important;
}
#my-account-nav .woocommerce-MyAccount-navigation-link--subscriptions {
    display: none !important;    
}
#my-account-nav .woocommerce-MyAccount-navigation-link--payment-methods {
    display: none !important;    
}
#my-account-nav .woocommerce-MyAccount-navigation-link--edit-account {
    display: none !important;   
}
#my-account-nav .woocommerce-MyAccount-navigation-link--affiliate-dashboard {
    display: none !important;   
}

/************************************/
/***** Chart ***************/
/************************************/

 #report-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.grid-container {
    display: flex;
    flex-wrap: wrap;
}

.grid-item {
    flex: 1;
    min-width: 38%; /* Ancho mÃ­nimo del 20% de la pantalla */
    margin: 0;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f9f9f9; /* Fondo mÃ¡s claro para los items */
}


.grid-item .title {
    display: block;
    margin-bottom: 15px;
    /*padding: 8px;*/
    background-color: #e8e8e8; /* Fondo ligeramente mÃ¡s oscuro para el tÃ­tulo */
    border: 1px solid #d0d0d0; /* Borde sutil */
    border-radius: 4px; /* Bordes redondeados */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra suave para dar profundidad */
    font-size: 1em; /* TamaÃ±o de fuente mÃ¡s grande */
    font-weight: bold; /* Fuente en negrita */
    color: #333; /* Color de texto oscuro para contraste */
    text-align: center; /* Centrar el texto */
}

.cell-content {
    /* Estilos para el contenido de la celda */
}

.chart {
    /* Estilos para la grÃ¡fica */
}

/************************************/
/***** Tabs ***************/
/************************************/
.tabs {
    overflow: hidden;
    background-color: #f1f1f1;
    font-family: Arial;
}

.tablink {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    /*padding: 14px 16px;*/
    transition: background-color 0.3s;
    font-size: 17px;
    margin-bottom: 0em !important;    
}

.tablink:hover {
    background-color: #ddd;
}

/* Estilo para la pestaÃ±a activa */
.tablink.active {
    background-color: #ccc;
}

.tabcontent {
    display: none;
    padding: 6px 0px;
    border: 1px solid #ccc;
    border-top: none;
    animation: fadeIn 0.5s;
    -webkit-animation: fadeIn 0.5s;
    background-color: #fff;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

.page-wrapper {
    padding-top: 10px !important;
}

.custom-add-project-popup-class {
    width: 1100px !important; /* Establece el ancho deseado aquÃ­ */
}

.no-import-icon {
    cursor: pointer; /* Cambia el puntero al pasar sobre el icono */
}#progress-bar {
    width: 100%;
    background-color: #f3f3f3;
}
#progress {
    width: 0;
    height: 30px;
    background-color: #4caf50;
    text-align: center;
    line-height: 30px;
    color: white;
}

#progress-bar {
    width: 100%;
    background-color: #f3f3f3;
}
#progress {
    width: 0;
    height: 30px;
    background-color: #4caf50;
    text-align: center;
    line-height: 30px;
    color: white;
}