body { min-width: 100px; min-height: 60px; display: flex; justify-content: center; align-items: center; } .container { display: flex; flex-direction: column; align-items: center; margin-top: 3px; } .downloadBtn { margin: 6px 1px; padding: 3px 3px; font-size: 12px; cursor: pointer; } .error-message { color: #ff4444; font-size: 12px; text-align: center; margin-top: 8px; padding: 0 10px; max-width: 200px; word-wrap: break-word; display: none; } /* The switch - the box around the slider */ .switch { position: relative; width: 60px; height: 34px; display: flex; justify-content: center; align-items: center; margin: 6px 1px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; } .slider::before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; } input:checked+.slider { background-color: #2196F3; } input:checked+.slider:before { transform: translateX(26px); /* Move the slider to the right when checked */ } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round::before { border-radius: 50%; } .secret { margin: 5px; }