body {
            font-family: 'Montserrat', sans-serif;
        font-family: 'Signika', sans-serif;
         
        }


        .footer {
            background-color: #011226; /* Azul marino */
            color: white;
            padding: 15px 0;
            font-size: 12px;
          }
          .footer a {
            color: white;
          }
          .footer a:hover {
            text-decoration: none;
          }
          .social-icons i {
            font-size: 24px;
            margin: 0 15px;
            color: white;
          }
          .social-icons i:hover {
            color: rgb(217, 45, 45); /* Color de enlace al pasar el ratón */
          }
          @media (max-width: 600px) {
            .footer {
              font-size: 10px;
            }}
            .mb-4, .my-4 {
                 margin-bottom: 0 !important;
            }
     /* Eliminamos la fecha que por defecto aparece en el desplegable */
        .content-select select::-ms-expand {
            display: none;
        }
        .pb-5, .py-5 {
            padding-bottom: 0.5rem !important;
          }

    /* Es para select */
    select.form-control {
        -webkit-appearance: none; /* Para navegadores basados en Webkit (Safari, Chrome) */
        -moz-appearance: none; /* Para navegadores basados en Gecko (Firefox) */
        appearance: none; /* Estándar */
        background-image: none; /* Quitar el fondo predeterminado que muestra la flecha */
    }
.content-select select{
	display: inline-block;
	width: 100%;
	cursor: pointer;
  	padding: 7px 10px;
  	height: 42px;
  	outline: 0; 
  	border: 0;
	background: #ffffff;
	
	font-size: 1em;
	color: #808080;
	border:2px solid rgba(43, 42, 42, 0.2);
    border-radius: 0px;
    position: relative;
    transition: all 0.25s ease;
}
 .content-select select {
  border-left: 4px solid #dc3545;
}
.content-select select:hover{
	background: #ffffff;
    
}
.content-select i{
	position: absolute;
  right: 6%;
  top: calc(65% - 13px);
  width: 0;
  height: 0;
  display: block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid #dc3545;
  border-top: none;
  transform: rotate(180deg);
  transition: all 0.25s ease;
}



.content-select:hover i{
	margin-top: 3px;
}
        /* Es para el responsi de la tabla */
        table thead {
            background-color: #d2d4d6;
            ;
        }

        table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
        table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
            background-color: #1561c5;
        }

        table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
        table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
            top: 9px;
            left: 4px;
            height: 20px;
            width: 20px;
            display: block;
            position: absolute;
            color: #fff;
            border: 2px solid white;
            border-radius: 14px;
            box-shadow: 0 0 3px #850000;
            box-sizing: content-box;
            text-align: center;
            text-indent: 0 !important;
            font-family: 'Courier New', Courier, monospace;
            line-height: 20px;
            content: '+';
            background-color: #011226;
        }

        table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,
        table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
            content: '-';
            line-height: 25px;
            background-color: #212121;
        }

        .dtr-title {
            color: #dc3545;
        }

        .bg-dark {
            background-color: #ff0000;
        }

        /*a {
            color: #dc3545;
        }
        /* menu primsipal*/
        .navbar-light .navbar-nav .nav-link {
            color: #011226;
            background-color: #ffffff; /* Gray color for inactive buttons */
            
           
            margin: 0; /* Remove margin */
            border-radius: 0; /* Remove border-radius */
            font-size: 13px;
        }
       
        .navbar-light .navbar-nav .nav-link:hover {
            color: #fff; /* White text for active button */
            background-color: #011226; /* Red color for active button */
            border: none; /* Remove the border */
            border-bottom: 3px solid #c00411; /* Red color for underline */
    
        } 
        .navbar-light .navbar-nav .nav-link.selected {
            color: #fff; /* White text for active button */
            background-color: #011226; /* Red color for active button */
            border: none; /* Remove the border */
            border-bottom: 3px solid #c00411; /* Red color for underline */
    
        }
        .navbar-light .navbar-nav .nav-link:active {
            color: #fff; /* White text for active button */
            background-color: #011226; /* Red color for active button */
            border: none; /* Remove the border */
            border-bottom: 3px solid #c00411; /* Red color for underline */
    
        } 
        .navbar-light .navbar-nav .nav-link.active::after {
            content: ''; /* Add an underline */
            display: block;
    
            margin-top: 0px; /* Adjust the spacing between the button and the underline */
            
        }
        /* todos los votones */
        .btn-custom.selected {
            color: #fff; /* White text for active button */
            background-color: #011226; /* Red color for active button */
            border: none; /* Remove the border */
            border-bottom: 3px solid #c00411; /* Red color for underline */
        }
        .btn-custom:hover {
            color: #fff; /* White text for active button */
            background-color: #011226; /* Red color for active button */
            border: none; /* Remove the border */
            border-bottom: 3px solid #c00411; /* Red color for underline */
    
        } 
        .btn-custom {
            color: #de0000;
            background-color: #ffffff; /* Gray color for inactive buttons */
            
           
            margin: 0; /* Remove margin */
            border-radius: 0; /* Remove border-radius */
            font-size: 13px;
        }
       
        .btn-custom.active {
            color: #fff; /* White text for active button */
            background-color: #011226; /* Red color for active button */
            border: none; /* Remove the border */
            border-bottom: 3px solid #c00411; /* Red color for underline */
    
        } 
        
    
        .btn-custom.active::after {
            content: ''; /* Add an underline */
            display: block;
    
            margin-top: 0px; /* Adjust the spacing between the button and the underline */
            
        }

        .btn-group {
            border-bottom: 1px solid #808080; /* Gray color for the line at the bottom */
            margin: 0; /* Remove margin */
            border-radius: 0; /* Remove border-radius */
        }
        



        .nav-tabs {
            border-bottom: none;
        }
        /* Cambiar el color del símbolo en función del estado */
        td .check-symbol {
            color: #dc3545; /* Cambia este valor al color deseado para el símbolo de "✔️" */
        }

        td .cross-symbol {
            color: #dc3545; /* Cambia este valor al color deseado para el símbolo de "❌" */
        }
    /* para la cuenta regresiva */
    #countdown {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #333;
        }
        
        .countdown-item {
            text-align: center;
            margin: 0 2px;
            padding: 10px;
            border-radius: 3px;
        }
        
        .countdown-label {
            font-size: 14px;
            color: #888;
            
        }
        .card-body {
            padding: 1rem;
        }

        .nav-tabs {
        display: flex;
        justify-content: space-around; /* O cualquier otra distribución que desees */
        align-items: center;
        width: 100%;
    }

     /* pagina principal*/
    .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    @media (min-width: 768px) {
        .bd-placeholder-img-lg {
            font-size: 3.5rem;
        }
    }
     /* Estilos CSS para la galería */
     
      
      .gallery-item {
        margin: 10px;
      }
      
      .gallery-item img {
        width: 150px; /* Reducir el ancho a la mitad */
        height: 120px; /* Mantener la proporción */
        filter: grayscale(0%);
      }
      
      .gallery-item img:hover {
        filter: grayscale(100%);
      }
       /* establecer un ancho fijo para los elementos de la galería */
      
      .gallery {
        display: flex;
        overflow: hidden;
        white-space: nowrap;
      }
      
      
      .jumbotron {
        padding: 2rem 1rem;
        margin-bottom: 0rem;
        background-color: #e9ecef;
        border-radius: .3rem;
    }
   
          
      .tarjeta{
    height: 250px;
    width: 98%;
    background-color: #101010;
    border-radius: 10%;
    box-shadow: 16px 14px 20px #0000008c;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tarjeta::before{
    content: "";
    position: absolute;
    height: 300px;
    width: 300px;
    background-image: conic-gradient(red 20deg, transparent 120deg);
    animation: rotar 2s linear infinite;
}

@keyframes rotar{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(-360deg);
    }
}
.h1, h1 {
    font-size: 2rem;
}

.tarjetaintna{
    border-radius: 10%;
    width: 100%;
    height: 95%;
}