.gradient-custom {
        
    /* fallback for old browsers */
    background: #6a11cb;

    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));

    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
    }

 .gradient-custom2 {
   background-color:rgb(67, 105, 143) !important /* background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);*/;
/* background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);*/

    }

   .primarylight{

     background-color: rgb(67, 105, 143) !important;
     color: white !important;
/*background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);*/

   }

li a {
      color: #ffffff; /* Rojo */
      
   
   }

   /* Cambiar el color del enlace normal */
a {
   color: #031b48; /* Rojo */
   

}

/* Cambiar el color del enlace cuando el ratón pasa por encima (hover) */
a:hover {
   color: #157da3; /* Verde */
}

/* Cambiar el color del enlace cuando ha sido visitado */
a:visited {
   color: #031b48; /* Azul */
}

/* Cambiar el color del enlace cuando es activo (al hacer clic) */
a:active {
   color: #157da3; /* Naranja */
}

.color-default{
   color: #e0e2e5; /* Color de fondo */
}
.color-primary{
   color: rgba(33, 150, 243, 0.8); /* Color azul más opaco */
}
.color-secondary{
   color: rgba(158, 158, 158, 0.8); /* Color gris más opaco */
}
.color-danger{
   color: rgba(176, 0, 32, 0.8); /* Color de fondo más opaco */
}
.color-warning{
   color: rgba(251, 192, 45, 0.8); /* Color de fondo más opaco */
}
.color-info{
   color: rgba(0, 188, 212, 0.8); /* Color de fondo más opaco */
}
.color-success{
   color: rgba(76, 175, 80, 0.8); /* Color de fondo más opaco (verde) */
}


.btn-default{
   background-color: #e0e2e5; /* Color de fondo */
   color: rgb(0, 0, 0); /* Color del texto */
   border: none; /* Sin borde */
   border-radius: 4px; /* Bordes redondeados */
   padding: 8px 14px; /* Espaciado interno */
   font-size: 14px; /* Tamaño de fuente */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra más suave */
   transition: background-color 0.3s, box-shadow 0.3s; /* Transiciones suaves */
}
.btn-default:hover {
   background-color: #d2d4d8; /* Color de fondo más oscuro al pasar el mouse */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Sombra más suave al pasar el mouse */
}
/* Botón Primario */
.btn-primary {
   background-color: rgba(33, 150, 243, 0.8); /* Color azul más opaco */
   color: white; /* Color del texto */
   border: none; /* Sin borde */
   border-radius: 4px; /* Bordes redondeados */
   padding: 8px 14px; /* Espaciado interno */
   font-size: 14px; /* Tamaño de fuente */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra más suave */
   transition: background-color 0.3s, box-shadow 0.3s; /* Transiciones suaves */
}

.btn-primary:hover {
   background-color: rgba(21, 101, 192, 0.8); /* Color azul más oscuro y opaco al pasar el mouse */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Sombra más suave al pasar el mouse */
}

/* Botón Secundario */
.btn-secondary {
   background-color: rgba(158, 158, 158, 0.8); /* Color gris más opaco */
   color: white; /* Color del texto */
   border: none; /* Sin borde */
   border-radius: 4px; /* Bordes redondeados */
   padding: 8px 14px; /* Espaciado interno */
   font-size: 14px; /* Tamaño de fuente */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra más suave */
   transition: background-color 0.3s, box-shadow 0.3s; /* Transiciones suaves */
}

.btn-secondary:hover {
   background-color: rgba(97, 97, 97, 0.8); /* Color gris más oscuro y opaco al pasar el mouse */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Sombra más suave al pasar el mouse */
}


/* Botón de Peligro */
.btn-danger {
   background-color: rgba(176, 0, 32, 0.8); /* Color de fondo más opaco */
   color: white; /* Color del texto */
   border: none; /* Sin borde */
   border-radius: 4px; /* Bordes redondeados */
   padding: 8px 14px; /* Espaciado interno */
   font-size: 14px; /* Tamaño de fuente */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra más suave */
   transition: background-color 0.3s, box-shadow 0.3s; /* Transiciones suaves */
}

.btn-danger:hover {
   background-color: rgba(121, 0, 0, 0.8); /* Color de fondo más opaco al pasar el mouse */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Sombra más suave al pasar el mouse */
}

/* Botón de Advertencia */
.btn-warning {
   background-color: rgba(251, 192, 45, 0.8); /* Color de fondo más opaco */
   color: black; /* Color del texto */
   border: none; /* Sin borde */
   border-radius: 4px; /* Bordes redondeados */
   padding: 8px 14px; /* Espaciado interno */
   font-size: 14px; /* Tamaño de fuente */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra más suave */
   transition: background-color 0.3s, box-shadow 0.3s; /* Transiciones suaves */
}

.btn-warning:hover {
   background-color: rgba(249, 168, 37, 0.8); /* Color de fondo más opaco al pasar el mouse */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Sombra más suave al pasar el mouse */
}


/* Botón de Información */
.btn-info {
   background-color: rgba(0, 188, 212, 0.8); /* Color de fondo más opaco */
   color: white; /* Color del texto */
   border: none; /* Sin borde */
   border-radius: 4px; /* Bordes redondeados */
   padding: 8px 14px; /* Espaciado interno */
   font-size: 14px; /* Tamaño de fuente */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra más suave */
   transition: background-color 0.3s, box-shadow 0.3s; /* Transiciones suaves */
}

.btn-info:hover {
   background-color: rgba(0, 151, 167, 0.8); /* Color de fondo más opaco al pasar el mouse */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Sombra más suave al pasar el mouse */
}

/* Botón Success */
.btn-success {
   background-color: rgba(76, 175, 80, 0.8); /* Color de fondo más opaco (verde) */
   color: white; /* Color del texto */
   border: none; /* Sin borde */
   border-radius: 4px; /* Bordes redondeados */
   padding: 8px 14px; /* Espaciado interno */
   font-size: 14px; /* Tamaño de fuente */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra más suave */
   transition: background-color 0.3s, box-shadow 0.3s; /* Transiciones suaves */
}

.btn-success:hover {
   background-color: rgba(56, 142, 60, 0.8); /* Color de fondo más opaco al pasar el mouse */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Sombra más suave al pasar el mouse */
}