#qrcode{display:flex;align-items:center;height:100%}#qrcode img{margin:auto;display:block;border:1px solid #000}.color-input{display:flex;align-items:center}.color-input input{flex:1;border-radius:0 .5rem .5rem 0}.color-wrapper{width:36px;height:36px;border:1px solid black;background-image:url("data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7")}.color{height:100%;background-color:black}.submit{margin-bottom:0}.input .container{height:60px}.examples{white-space:nowrap;overflow:auto}.examples a{display:inline-block;position:relative;border:1px solid #000}.examples a:after{content:'';display:block;height:100%;width:100%;position:absolute;left:0;top:0}.output .container{height:300px;min-height:160px;background-color:var(--var-input-bg-color)}#output{height:60px;min-height:40px;scrollbar-width:none}.grp-wrapper{margin-top:1.5rem;margin-bottom:2rem}.grp-handler-close{line-height:8px !important}.grp-handler-cp-wrap{box-sizing:content-box}.grp-handler-drag{border:1px solid rgba(255,255,255,0.3)}.grp-handler-selected .grp-handler-drag{border:1px solid rgba(0,0,0,0.3)}@media (min-width: 1024px){.input{height:195px}.output{height:calc(100% - 195px)}.input .container,.output .container{height:initial}}@media (min-width: 1920px){.input,.output{height:initial}}