:root {
    --color-primario: #38ACE3;
    --color-secundario: #E6EEF9;
}

body {
    font-family: 'Arial', sans-serif;
    background-image: url("../img/background.466a75ef2c84.svg");
    background-position: center;
    background-repeat: repeat;
    background-size: 7%;
    background-color: #fff;
    overflow-x: hidden;
    transition: all 200ms linear;
}



.vertical-align-middle {
    vertical-align: middle;
}

/* Margen usado para separar la barra de navegación con la cabecera de la página */
.main-mt {
    margin-top: 9rem;
}

/* Cambiamos los colores de boostrap*/
.bg-primary{
    background-color: var(--color-primario) !important;
}

.btn-primary{
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

.page-link{
    color: var(--color-primario) !important;
}

.active>.page-link, .page-link.active {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: var(--color-secundario) !important;
}

.btn-outline-primary{
    color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

.btn-outline-primary:hover{
    color: var(--color-secundario) !important;
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

.custom-icon{
    color: var(--color-primario) !important;
}

.form-check-input:checked {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

/* Selector entre mens y anual en la página para suscribirse a un plan */
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--color-secundario) !important;
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

/* Definimos las estilos de select2 */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    border-color: #DEE2E6 !important; /* mismo borde que bootstrap */
    border-radius: 0.375rem !important; /* mismo border-radius que bootstrap */
}

.select2-selection {
    height: 38px !important;
    padding: 8px !important;
}

.select2-selection__arrow {
    height: 36px !important;
}

/* Se definen los estilos de las tablas*/
td > .btn-primary{
    background-color: #6C757D !important;
    border-color: #6C757D !important;
}

/* Cambia el color de fondo de las filas impares */
.table tbody tr:nth-child(odd) {
    background-color: rgba(242, 242, 242, 0.6);  /* Color más claro y sutil para filas impares con un poco de transparencia */
}

/* Cambia el color de fondo de las filas pares */
.table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.6);  /* Color aún más claro y sutil para filas pares con un poco de transparencia */
}

.table tbody tr:hover {
    background-color: rgba(56, 172, 227, 0.5); /* Utiliza un tono de azul similar al color principal de tu empresa con transparencia */
}