.main_content{padding-top:2rem;#Intervention_type_app{width:300px}.filters{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-left:auto;margin-right:auto;justify-content:center;margin-top:4rem;@media (max-width:900px){margin-top:1rem}#Intervention_type_app,#Outcome_acro_app{width:300px}}}h1{text-wrap:balance;margin-top:6rem;text-align:center;max-width:50ch;line-height:1;margin-left:auto;margin-right:auto;text-wrap:balance;padding:0px;margin-top:relative;margin-bottom:0px;font-size:2rem;color:#1088ad;@media (max-width:900px){max-width:15ch;margin-top:3rem;font-size:1.5rem;margin-left:auto;margin-right:auto}}.consignes_container{margin-top:0;color:#1088ad;text-align:left;display:flex;max-width:900px;margin-left:auto;margin-right:auto;@media screen and (max-width:900px){flex-direction:column;align-items:center;justify-content:center;gap:1rem}.talk-bubble{display:flex;gap:1rem;align-items:center}.fa-bell{padding:1rem;border-radius:50%;margin-left:auto;margin-right:auto;text-align:center;font-size:2rem;color:#1088ad;box-shadow:rgba(0,0,0,0.35) 0px 5px 15px;transform-origin:top center;&:hover{cursor:pointer!important;color:brown;animation:bellRing 1s ease;transform-origin:top center}}}.fa-bell:active{animation:none}@keyframes bellRing{0%{transform:rotate(0)}10%{transform:rotate(15deg)}20%{transform:rotate(-13deg)}30%{transform:rotate(11deg)}40%{transform:rotate(-9deg)}50%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}70%{transform:rotate(3deg)}80%{transform:rotate(-2deg)}90%{transform:rotate(1deg)}100%{transform:rotate(0)}}.container_helper{max-width:1000px;padding-right:1rem;padding-left:1rem;padding-bottom:1rem;margin-left:auto;margin-right:auto}#myScatterPlot{height:1000px!important;max-width:1000px!important;margin-left:auto;margin-right:auto}.filter-group-container{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin-top:2rem;margin-bottom:1rem;padding:0 1rem}.radio-card-group{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:100%}// Hide the actual radio button,it's controlled by the label .filter-radio{display:none}.radio-card{// --- The basic look of our "button" --- padding:0.75rem 1.25rem;border:2px solid #d0d0d0;border-radius:8px;// Rounded corners for a "squarish" look background-color:#f8f8f8;color:#555;font-size:0.95rem;font-weight:500;cursor:pointer;transition:all 0.2s ease-in-out;display:flex;flex-direction:column;// Stack text vertically align-items:center;justify-content:center;text-align:center;min-width:160px;// Ensure a good base width min-height:70px;// Give it some height // --- Hover State --- &:hover{border-color:#56c7ea;background-color:#f0fcff}}// --- Style for the age range sub-label --- .age-range{font-size:0.8em;font-weight:400;color:#777;margin-top:2px;transition:color 0.2s ease-in-out}// --- THIS IS THE KEY:The "Active" State --- // When the radio input is checked,style its *adjacent* label .filter-radio:checked + .radio-card{background-color:#1088ad;border-color:#1088ad;color:white;box-shadow:0 4px 15px rgba(16,136,173,0.2);transform:translateY(-2px);// Make the tooltip icon and age range text white when active for contrast .tooltip-icon,.age-range{color:white}}.tooltip-icon{position:relative;display:inline-flex;align-items:center;color:#a0a0a0;transition:color 0.3s ease;margin-top:4px;// Add some space above the icon .fa-info-circle{font-size:1rem}.tooltip-text{visibility:hidden;width:250px;background-color:#2d2d2d;color:#fff;text-align:left;border-radius:6px;padding:10px 12px;position:absolute;z-index:10;bottom:125%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.3s,visibility 0.3s;font-size:0.85rem;font-weight:400;line-height:1.4;box-shadow:0 5px 15px rgba(0,0,0,0.2);&::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border-width:6px;border-style:solid;border-color:#2d2d2d transparent transparent transparent}}&:hover .tooltip-text{visibility:visible;opacity:1}}// --- NEW:Tooltip Styles --- #chartjs-tooltip{opacity:1;position:absolute;background-color:#fff;border:3px solid #2d2d2d;border-radius:3px;box-shadow:0px 0px 20px rgba(0,0,0,0.1);transition:all 0.1s ease;pointer-events:none;font-weight:200}#chartjs-tooltip table{margin:0;font-size:0.8rem;font-weight:normal!important}#chartjs-tooltip table th{margin:0;font-size:0.8rem;font-weight:normal!important}.tooltip-label{color:#ff5722}.switch-color-blind{display:grid;align-items:center;justify-content:end;width:100%;margin-left:auto;margin-right:auto;padding-right:1rem}.switch{position:relative;display:inline-block;vertical-align:top;width:calc(56px * 2);height:calc(20px * 2);padding:calc(3px * 2);background-color:white;border-radius:calc(18px * 2);box-shadow:inset 0 -1px white,inset 0 1px 1px rgba(0,0,0,0.05);cursor:pointer;background-image:-webkit-linear-gradient(top,#eeeeee,white 25px);background-image:-moz-linear-gradient(top,#eeeeee,white 25px);background-image:-o-linear-gradient(top,#eeeeee,white 25px);background-image:linear-gradient(to bottom,#eeeeee,white 25px)}.switch-input{position:absolute;top:0;left:0;opacity:0}.switch-label{position:relative;display:block;height:inherit;font-size:calc(10px * 2);text-transform:uppercase;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px rgba(0,0,0,0.12),inset 0 0 2px rgba(0,0,0,0.15);-webkit-transition:0.15s ease-out;-moz-transition:0.15s ease-out;-o-transition:0.15s ease-out;transition:0.15s ease-out;-webkit-transition-property:opacity background;-moz-transition-property:opacity background;-o-transition-property:opacity background;transition-property:opacity background}.switch-label:before,.switch-label:after{position:absolute;top:50%;margin-top:-0.5em;line-height:1;-webkit-transition:inherit;-moz-transition:inherit;-o-transition:inherit;transition:inherit}.switch-label:before{content:attr(data-off);right:calc(11px * 2);color:#aaa;text-shadow:0 1px rgba(255,255,255,0.5)}.switch-label:after{content:attr(data-on);left:calc(11px * 2);color:white;text-shadow:0 1px rgba(0,0,0,0.2);opacity:0}.switch-input:checked ~ .switch-label{background:#47a8d8;box-shadow:inset 0 1px 2px rgba(0,0,0,0.15),inset 0 0 3px rgba(0,0,0,0.2)}.switch-input:checked ~ .switch-label:before{opacity:0}.switch-input:checked ~ .switch-label:after{opacity:1}.switch-handle{position:absolute;top:calc(4px * 2);left:calc(4px * 2);width:calc(18px * 2);height:calc(18px * 2);background:white;border-radius:calc(10px * 2);box-shadow:1px 1px 5px rgba(0,0,0,0.2);background-image:-webkit-linear-gradient(top,white 40%,#f0f0f0);background-image:-moz-linear-gradient(top,white 40%,#f0f0f0);background-image:-o-linear-gradient(top,white 40%,#f0f0f0);background-image:linear-gradient(to bottom,white 40%,#f0f0f0);-webkit-transition:left 0.15s ease-out;-moz-transition:left 0.15s ease-out;-o-transition:left 0.15s ease-out;transition:left 0.15s ease-out}.switch-handle:before{content:"";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:#f9f9f9;border-radius:6px;box-shadow:inset 0 1px rgba(0,0,0,0.02);background-image:-webkit-linear-gradient(top,#eeeeee,white);background-image:-moz-linear-gradient(top,#eeeeee,white);background-image:-o-linear-gradient(top,#eeeeee,white);background-image:linear-gradient(to bottom,#eeeeee,white)}.switch-input:checked ~ .switch-handle{left:calc(40px * 1.65);box-shadow:-1px 1px 5px rgba(0,0,0,0.2)}.switch-green>.switch-input:checked ~ .switch-label{background:#4fb845}