code[class*=language-],pre[class*=language-]{color:#000;background:none;text-shadow:0 1px white;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#905}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function,.token.class-name{color:#dd4a68}.token.regex,.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{max-width:780px;margin:50px auto;font-family:Roboto;font-weight:400;font-style:normal;line-height:1;text-align:center}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}h1,h2,h3,h4,h4,h6{font-family:Roboto;font-weight:700;font-style:normal}h1{font-size:2em;margin:.67em 0;font-weight:700}h2{font-size:1.5em;margin:.83em 0;font-weight:700}h3{font-size:1.17em;margin:1em 0;font-weight:700}h4{font-size:1em;margin:1.33em 0;font-weight:700}h5{font-size:.83em;margin:1.67em 0;font-weight:700}h6{font-size:.67em;margin:2.33em 0;font-weight:700}a{font-family:Roboto;font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(/gradient-picker/fonts/Roboto-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(/gradient-picker/fonts/Roboto-Italic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(/gradient-picker/fonts/Roboto-Bold.ttf) format("truetype");font-weight:700;font-style:normal}#app{margin-right:30px;margin-left:30px}h1.site-title{margin:0 0 30px;background:-webkit-linear-gradient(127deg,#40c9ff,#e81cff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.color-preview{position:relative;display:block;width:100%;height:100%;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0}.color-preview-inner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px}.gpi-picker,.gpi-preview-area,.gpi-hex,.gpi-saved-button,.gpi-saved-gradients,.gpi-generated-code{margin-top:30px}.gpi-picker{position:relative;width:100%;height:250px;cursor:grab}.gpi-picker.grabbing{cursor:grabbing}.gpi-picker .bg1,.gpi-picker .bg2{position:absolute;top:0;left:0;width:100%;height:100%}.gpi-picker .bg1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}.gpi-picker .bg2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}.gpi-picker .pointer{position:absolute;top:calc(0% - 5px);left:calc(0% - 5px);width:10px;height:10px;border-radius:50%;box-shadow:0 0 4px #000;background:#fff;z-index:2}.gpi-preview-area{display:flex;align-items:center}.gpi-preview{position:relative;width:50px;height:50px;border-radius:2px;margin-right:15px;border:1px solid #edeff1}.gpi-preview .gpi-preview-transparent,.gpi-preview .gpi-preview-background{position:absolute;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:2px}.gpi-preview .gpi-preview-transparent{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.gpi-hue-alpha{width:calc(100% - 65px)}.gpi-hue-alpha .pointer{position:absolute;width:14px;height:14px;top:50%;left:calc(100% - 7px);transform:translateY(-50%);background:#fff;border-radius:50%;box-shadow:0 0 4px #00000026;z-index:1}.gpi-hue,.gpi-alpha{position:relative;height:10px;border-radius:7px;cursor:grab}.gpi-hue.grabbing,.gpi-alpha.grabbing{cursor:grabbing}.gpi-hue{background:linear-gradient(90deg,#f00 0%,#fdf87a 20.31%,#91ed8f 41.67%,#0500ff 60.42%,#fa00ff 81.25%,#f00 100%);margin-bottom:16px}.gpi-alpha{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.gpi-alpha .bg{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;background-image:-webkit-gradient(linear,left top,right top,from(#40c9ff),to(rgba(9,9,121,0)));background-image:linear-gradient(to left,#40c9ff 0%,rgba(9,9,121,0) 100%)}.gpi-hex{display:flex;align-items:center;justify-content:space-between}.gpi-hex .gpi-hex-title{font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;text-transform:uppercase;color:#4d596b;margin-right:15px}.gpi-hex-input{position:relative;display:flex;width:100px}.gpi-hex-input>span,.gpi-hex-input .gpi-hex-input-value{white-space:nowrap;display:block}.gpi-hex-input>span{margin-left:-1;border-radius:0 3px 3px 0;text-align:center;padding:8px 12px;font-size:14px;color:#4d596b;background:#edeff1;border:1px solid #edeff1;border-left-width:0;transition:background .3s ease,border .3s ease,color .3s ease}.gpi-hex-input .gpi-hex-input-value{position:relative;z-index:1;flex:1 1 auto;width:1%;margin-top:0;margin-bottom:0;padding:0 10px;text-align:right;border-radius:3px 0 0 3px;color:#4d596b;border:1px solid #edeff1;transition:border .3s ease}.gpi-gradient .gpi-gradient-bar{position:relative;height:10px;margin-top:132px;margin-left:7px;margin-right:7px;border-radius:3px;cursor:copy}.gpi-gradient .gpi-gradient-bar .pointer{position:absolute;bottom:calc(100% + 7px);left:calc(0% - 10px);width:20px;height:20px;background:#fff;border:1px solid #edeff1;border-radius:3px;z-index:1;cursor:grab}.gpi-gradient .gpi-gradient-bar .pointer.grabbing{cursor:grabbing}.gpi-gradient .gpi-gradient-bar .pointer.active{border-color:#39475c;z-index:2}.gpi-gradient .gpi-gradient-bar .pointer.active .pointer-arrow{border-top-color:#39475c}.gpi-gradient .gpi-gradient-bar .pointer-color{position:relative;width:100%;height:100%}.gpi-gradient .gpi-gradient-bar .remove{position:absolute;display:flex;align-items:center;gap:5px;right:-7px;bottom:calc(100% + 65px);font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;line-height:0;color:#fff;padding:5px 12px;border-radius:3px;background-color:#40c9ff;opacity:0;visibility:hidden;cursor:pointer}.gpi-gradient .gpi-gradient-bar .remove.active{opacity:1;visibility:visible}.gpi-gradient .gpi-gradient-bar .pointer-color-inner,.gpi-gradient .gpi-gradient-bar .pointer-color-transparent{position:absolute;top:50%;left:50%;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:2px}.gpi-gradient .gpi-gradient-bar .pointer-color-transparent{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:4px 4px;background-position:0 0,0 2px,2px -2px,-2px 0}.gpi-gradient .gpi-gradient-bar .pointer-arrow{left:50%;top:100%;width:0px;height:2px;transform:translate(-50%);overflow:hidden;position:absolute;z-index:1;border-right:4px solid transparent;border-top:8px solid #edeff1;border-left:4px solid transparent}.gpi-gradient .gpi-gradient-bar-background,.gpi-gradient .gpi-gradient-bar-pointer{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px}.gpi-gradient .gpi-gradient-bar-background{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.gpi-saved-button{text-align:left}.gpi-saved-button button{border:none;color:#fff;padding:10px 24px;text-transform:uppercase;border-radius:3px;background-color:#40c9ff;cursor:pointer}.gpi-saved-button button:hover{background-color:#e81cff}.gpi-saved-gradients{text-align:left;border-top:solid 1px #edeff1}.gpi-saved-gradients p,.gpi-generated-code p{font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;text-transform:uppercase;color:#4d596b;margin-top:30px}.gpi-saved-gradients p.not-found{font-size:12px;color:#ababab;text-transform:capitalize}.gpi-saved-gradients .saved-item{position:relative;width:30px;height:30px;border-radius:50%;background-color:#eaeaea;cursor:pointer}.gpi-saved-gradients .saved-item .remove{position:absolute;left:50%;bottom:calc(100% + 5px);line-height:0;padding:2px;border-radius:2px;transition:visibility .2s,opacity .2s;transform:translate(-50%);color:#000;background-color:#ccc;opacity:0;visibility:hidden}.gpi-saved-gradients .saved-item:hover .remove{opacity:1;visibility:visible}.gpi-saved-gradients .saved-items{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.gpi-generated-code{text-align:left;margin-top:30px;border-top:solid 1px #edeff1}.gpi-generated-code pre{margin-top:30px}.gpi-type{display:flex;justify-content:space-between;margin-top:30px}.gpi-type .options{display:flex;gap:30px}.gpi-type .options>div{width:50px;height:50px;display:flex;align-items:center;justify-content:center;max-width:calc(50% - 10px);border:1px solid #edeff1;border-radius:3px;cursor:pointer}.gpi-type .options>div:hover,.gpi-type .options>div.active{border-color:#000}.gpi-type .options>div>div{width:46px;height:46px;border-radius:3px;background-color:#000}.gpi-type .options>.option-linear>div{background:linear-gradient(90deg,#40c9ff 0%,#e81cff 100%)}.gpi-type .options>.option-radial>div{background:radial-gradient(circle at center,#40c9ff 0,#e81cff 100%)}.gpi-type .input{display:flex;align-items:center;gap:10px}.gpi-type .input input,.gpi-type .input select{margin-top:0;margin-bottom:0;padding:8px 10px;text-align:right;border-radius:3px 0 0 3px;color:#4d596b;border:1px solid #edeff1;transition:border .3s ease}.gpi-type .input span{font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;color:#4d596b}@media screen and (max-width: 450px){.gpi-type{flex-direction:column}.gpi-type .options{justify-content:center;margin-bottom:30px}.gpi-type .input{justify-content:center}}