:root {
    --kwb-blue: rgb(0, 3, 226);
    --kwb-lightblue: #B1B2FF;
    --primary: var(--kwb-blue);
    --bla: #cc0025;
    --bla: hsl(349, 100%, 60%);
    --bla: hsl(349, 100%, 80%);
    --bla: hsl(23, 100%, 62%);
    --bla: #FFA570;
    --bla: #ED5500;
    --bla: #1B6638;
    --bla: hsl(144, 39%, 45%);
    --bla: hsl(144, 43%, 67%);
}

.info{
color:grey;
font-style: italic;
font-size: small;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
  color: white !important;
  background-color: var(--kwb-blue) !important;
  border-color: var(--kwb-blue) !important;
  }

.btn-outline-primary, .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:visited {
  color: var(--kwb-blue);
  border-color: var(--kwb-blue);
}
.btn-outline-primary:hover {
    color: white;
    background-color: var(--kwb-blue);
    border-color: var(--kwb-blue);
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:visited {
  color: white !important;
  background-color: #B1B2FF !important;
  border-color:#B1B2FF !important;
  }

.info{
    color:grey;
    font-style: italic;
    font-size: small;
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:visited {
  background-color: #B1B2FF !important;
  border-color: #B1B2FF !important;
  }

.btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary:visited {
  color: #B1B2FF;
  border-color: #B1B2FF;
}
.btn-outline-secondary:hover {
    color: white;
    background-color: #B1B2FF;
    border-color: #B1B2FF;
}

.btn-outline-secondary:focus, .btn-secondary:focus {
    box-shadow: 0 0 0 .2rem var(--kwb-blue) !important;
}

.selected-treatment {
  box-shadow: 0 0 0 .2rem var(--kwb-blue) !important;
}

.custom-select {
    padding: .375rem .75rem;
}
.text_link_kwb { color: var(--kwb-blue);  }

.kwb_headline {
  color: var(--kwb-blue) !important;
  font-weight: bold;

}
.form-control::placeholder {
    color: var(--kwb-blue);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
:is(h1, h2, h3, h4, h5, h6) {
  color: #0003e2 !important;
  font-weight: bold !important;
} 

.info{
  color: #0003e2;
}
.headline{
  color: #0003e2;
  font-weight: bold;
}
html, body {
  height: 100%; /* Ensure that the html and body elements take up the full height of the viewport */
  margin: 0; /* Remove default margin */
}

body {
  display: flex; /* Use flexbox to lay out children */
  flex-direction: column; /* Stack children vertically */
}

main {
  flex: 1; /* Allows the main content to grow and fill available space, pushing the footer down */
  /* Adjust padding or margins as needed */
}

footer {
  /* Your existing styles should be fine, but ensure it doesn't grow with flex settings */
  background-color: #0003e2 !important;;
}
.footer-item{
  color: white;
}
  /* Add this inside your {% block body %} to scope the style to this template, 
  or move it to your external CSS file for global scope */


.custom-media:hover {
  background-color: #EAEAFD; /* Light grey background on hover */
  cursor: pointer; /* Change cursor to indicate clickable */
}
  /* Adjust the border color on hover */
.custom-media:hover {
  border-color: #0003e2; /* Bootstrap primary color for example */
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.text-field-bg {
  background-color:  #F2F2FF;
}

.radio-div-bg {
  background-color: #F2F2FF;
}

/* Optional: Directly style the radio buttons if needed */
.radio-bg input[type="radio"] {
  background-color: #0003e2 ;
}
#div_id_source, #div_id_treatment, #div_id_exposure{
  background-color:  #F2F2FF;
  padding: 5px;
  border-color: #8081F1;
 
}
.form-check-input {
    color: #8081FF;
}

      /* Custom CSS for table cell content centering */
.table th, .table td {
        text-align: center; /* Center align table cell content */
        vertical-align: middle; /* Center vertically */
    }
    /* Custom background color for the table header */
 .custom-header {
        background-color: transparent !important; /* Green background, change as needed */
        color: black; /* White text color */
    }

.max-risk {
  background: #FFECF4;
  color: #FF0532;
}

.min-risk {
  background: #FFDDB5;
  color: #ED5500;
}

.none-risk {
  background: #E2FBAC;
  color: #088B3C;
}