/*Customize around CSS Here*/
@media (max-width: 950.98px) {
    .language-switch {
        margin-left: 1.1rem !important;
    }
}

@media (max-width: 767.98px) {
    .container {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .wide-mobile-button {
        width: 100%;
    }
}

.blur-background *:not(#cookieModal):not(#cookieModal *) {
    filter: blur(5px);
}


.invisible-table {
    border-collapse: separate;
    border-spacing: 0.5rem 0;
}

.invisible-table th, .invisible-table td {
    border-top: none !important; /* Override Bootstrap default */
    border-bottom: none !important; /* Override Bootstrap default */
}

/* Remove bottom border from table rows */
.invisible-table tr {
    border-bottom: none !important; /* Override Bootstrap default */

}

/* Optional: If you also want to remove the bottom border of the table header */
.invisible-table thead th {
    border-bottom: none !important; /* Override Bootstrap default */
}

.text-winner {
    color: #28a745; /* Green color, similar to Bootstrap's success color */
    font-weight: bold;
}

.text-loser {
    color: #dc3545; /* Red color, indicating a loss */
    font-weight: bold;
}

.list-group-item-hoverable:hover {
    background-color: rgba(69, 72, 75, 0.27); /* Replace #yourColor with the color you want */
}

/*
Fix to make the buttons fully clickable on the onboarding page. We have to make the steps relative and project
the button on top of the body to make it fully clickable.
*/

.step-body {
    position: relative;
    z-index: 10; /* Ensure step-body is on top of other elements */
}

.step a.btn {
    z-index: 20; /* Ensure the button is on top */
}

/* End of Button fix */

/* Fix to remove the outline of the cookiebot border */
#CookiebotWidget :focus-visible,
#CookiebotWidget:not(.CookiebotWidget-open) .Cookiebotwidget-logo {
    outline: none !important;
}
/* end of Cookiebot fix */

.accordion-button-hidden::after {
  visibility: hidden; /* Hides the element but keeps its space */
}