@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap"); html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .html, body { width: 100%; height: 100%; } body { background: #edf2f7; font-size: 16px; font-family: "Source Sans Pro", sans-serif; color: #4a5568; line-height: 1.45; } h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 12px; } p { margin-bottom: 16px; } hr { background: #edf2f7; height: 1px; border: 0; margin: 24px 0 16px; } .panel { width: 400px; max-width: 90%; margin: 100px auto 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); padding: 24px; border-radius: 10px; background: #ffffff; } .form-group + .form-group { margin-top: 16px; } .form-group .form-group-input-container { position: relative; } .form-group .form-control { height: 40px; width: 100%; border-radius: 5px; padding: 0 10px; border: 1px solid #a0aec0; font-size: 0.9rem; color: #4a5568; font-family: inherit; } .form-group .form-control::-webkit-input-placeholder { color: #a0aec0; } .form-group .form-control::-moz-placeholder { color: #a0aec0; } .form-group .form-control:-ms-input-placeholder { color: #a0aec0; } .form-group .form-control:-moz-placeholder { color: #a0aec0; } .form-group .form-group-label { font-weight: bold; display: block; margin-bottom: 8px; } .form-group .form-group-help { font-size: 0.875rem; margin-top: 8px; display: block; color: #718096; } .form-group details summary { width: 40px; height: 40px; position: absolute; top: 0; right: 0; display: block; outline: none; color: #718096; opacity: 0.5; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } .form-group details summary:hover { cursor: pointer; opacity: 1; } .form-group details summary svg { width: 20px; height: 20px; } .form-group details summary::-webkit-details-marker { display: none; }