#adaptive-loss-formula .formula { text-align: center; }

#adaptive-loss-formula .formula-list { width: fit-content; margin: 0 auto; }

#adaptive-loss-formula .formula-list a { display: inline-block; width: 250px; margin: 0 20px; padding: 8px 10px; text-align: center; background: #DDD; cursor: pointer; text-decoration: none; color: #333; border-radius: 10px; user-select: none; transition-duration: 0.3s; }

#adaptive-loss-formula .formula-list a:hover, #adaptive-demo #defense-methods .defense:hover { background: #555; color: #FFF; }


#adaptive-demo #defense-methods .options:checked ~ .defense { color: #FFF; background: #555; }

#adaptive-demo #defense-methods .defense { display: inline-block; width: 60%; margin: 2% auto 8%; padding: 8px 10px; text-align: center; background: #DDD; cursor: pointer; text-decoration: none; color: #333; border-radius: 10px; user-select: none; transition-duration: 0.3s; }

#adaptive-demo .legend { text-align: center; width: 70%; margin: 0 auto; }

#adaptive-demo .figure-option { text-align: center; width: 70%; margin: 4% auto 0; /* Customize the label (the container) */ /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }
#adaptive-demo .figure-option .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#adaptive-demo .figure-option .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
#adaptive-demo .figure-option .checkmark { position: absolute; top: 4px; left: 8px; height: 25px; width: 25px; background-color: #eee; }
#adaptive-demo .figure-option .container:hover input ~ .checkmark { background-color: #ccc; }
#adaptive-demo .figure-option .container input:checked ~ .checkmark { background-color: #9b9bff; }
#adaptive-demo .figure-option .checkmark:after { content: ""; position: absolute; display: none; }
#adaptive-demo .figure-option .container input:checked ~ .checkmark:after { display: block; }
#adaptive-demo .figure-option .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

#adaptive-demo .figure { margin: 0 auto; display: block; }

#adaptive-demo .figure #original { display: none; }

#adaptive-demo .figure img { user-drag: none; -webkit-user-drag: none; user-select: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; pointer-events: none; position: relative; left: 35px; }

#adaptive-demo .figure-caption { width: 240px; text-align: center; display: block; margin: 0 auto; padding: 10px 0 0; font-size: .8em; }

#adaptive-demo .figure-caption ul { padding-left: 0; }

#adaptive-demo .figure-caption ul li { list-style: none; }

#adaptive-demo .figure-caption .model-prediction { font-weight: bold; }

#adaptive-demo .figure-caption .correct { color: #009926; }

#adaptive-demo .figure-caption .wrong { color: #e31327; }

#adaptive-demo .attack-success-rate { display: inline-block; width: 60%; margin: 2% auto 8%; padding: 8px 10px; text-align: center; text-decoration: none; background: #DDD; color: #333; border-radius: 10px; user-select: none; }
#adaptive-demo .attack-success-rate .jailbreak-metric { font-size: 0.75em; display: block; }
#adaptive-demo .attack-success-rate .attack-success-rate-value { font-size: 1.5em; font-family: "sans-serif"; color: #820000; }

#adaptive-demo .benign-refusal-rate { display: inline-block; width: 60%; margin: 2% auto 8%; padding: 8px 10px; text-align: center; text-decoration: none; background: #DDD; color: #333; border-radius: 10px; user-select: none; }
#adaptive-demo .benign-refusal-rate .jailbreak-metric { font-size: 0.75em; display: block; }
#adaptive-demo .benign-refusal-rate .benign-refusal-rate-value { font-size: 1.5em; font-family: "sans-serif"; color: #820000; }