Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div id="app">

  <info-box></info-box>

  <social-networks :show='showShare'></social-networks>

  <transition name="hide-background">
    <div id='background-display' v-if="showInfo == false" :class='{"show-social-networks": (showShare == true)}'>
      <no-ie></no-ie>
      <div class='show-gradient' @wheel='toggleControls("wheel", $event)' @click='toggleControls("click", $event)' :style='style'></div>

      <div id='presets-fullview-container' :class='{show: showPresets}'>
        <div class='presets-wrapper'>
          <div v-for='(preset, index) in presets' :style="preset.style" @click='applyGradient(index)'></div>
        </div>
      </div>


      <div id='controls-container' :class='{show: showControls}'>
        <div class='controls-wrapper'>
          <color-slider :colors='getColors' @add='addColorStop($event)'></color-slider>
          <!-- <div class='title'>
      <h1 data-title='Gradient Generator'>Gradient Generator</h1> 
    </div> -->
          <div class='gradients-stack'>
            <h3>Stack</h3>
            <div class='gradients-stack-container'>
              <div v-for='(gradient, index) in gradients' :class='{highlight: (currentGradient == index), noneed: (gradients.length == 1)}'>
                <div class='gradient-box-container'>
                  <div class='gradient-box' @click='setGradient(index)' :style='showGradient(index)'>
                  </div>
                </div>
                <div class='delete' @click='deleteGradient(index)'>×</div>
                <div class='hide' :class='{hidden: (gradient.status == "hide"), tall: (gradients.length == 1)}' @click='toggleGradient(index)'></div>
              </div>
            </div>
            <div class='add-gradient' @click='addGradient'>+</div>
          </div>
          <options-container :options='getData'></options-container>
          <div class='color-stops-container'>
            <h3>Colors</h3>
            <div class='color-picker'>
              <chrome-picker :value="currentColor.value" @input="updatePicker"></chrome-picker>
            </div>
          </div>
          <div class='color-presets-container'>
            <h3>Presets</h3>
            <user-presets></user-presets>

            <div class='other-presets'>
              <div class='gradient-div' v-for='(presetObj, index) in presetsFilterd' :style="presetObj.preset.style" @click='applyGradient(presetObj.index)'></div>
            </div>
            <div class="more-presets" @click='showPresets = true'>More</div>

          </div>
          <div class='user-actions-container'>
            <div class='copy-css' @click='copyCSS'>{{copyCSSText}}</div>
            <div class='info' @click='showInfo = true; showShare = false'>Info</div>
						<div class='share' @click='showShare = true'>Share</div>

            <div class='reset' @click='resetGradient'>RESET</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</div>

<template id='user-presets'>
        <div class='user-generated' v-click-outside="deselectPreset">
            <div class='user-presets'>
                <span v-for='(preset, index) in userPresets' :class='{selected: selectedPreset == index}' @click='selectedPreset = index' :style='preset.style'></span>
            </div>
            <div class='presets-actions' :class='enableClass'>
                <div class='apply-preset' @click='applyPreset'><i class="icon ion-md-checkmark-circle-outline"></i></div>
                <div class='save-preset' @click='savePreset'><i class="icon ion-md-save"></i></div>
            </div>
        </div>
    </template>

<template id='options-container'>
        <div class='colors-options-container'>
            <h3>Options</h3>
            <div class='colors-options-top'>

                <toggle-control :options='options.type' :icons='typeIcons'></toggle-control>

                <toggle-control :options='options.repeating' :boolean-icon='repeatIcon' :type="'boolean'" :tip="'Repeat'"></toggle-control>

                <toggle-control :options='options.shape' v-if="(options.type.selected == 'radial')" :icons="shapeIcons"></toggle-control>
            </div>
            <div class='colors-options-bottom'>
                <div class='linear-direction' v-if="(options.type.selected == 'linear')">
                    <circular-control :direction='options.direction'></circular-control>
                </div>

                <div class='radial-size' v-if="(options.type.selected == 'radial')">
                    <range :rangedata='options.size.ellipse.width' v-if="(options.shape.selected == 'ellipse')"></range>
                    <range :rangedata='options.size.ellipse.height' v-if="(options.shape.selected == 'ellipse')"></range>
                    <range :rangedata='options.size.circle.length' v-if="(options.shape.selected == 'circle')"></range>
                </div>
                <div class='radial-position' v-if="(options.type.selected == 'radial')">
                    <range :rangedata='options.position.horizontal'></range>
                    <range :rangedata='options.position.vertical'></range>
                </div>
            </div>
        </div>
    </template>

<template id='circular-control'>
        <div class='control circle' @wheel='handleCircleValue'>
            <circle-slider v-model="direction.amount" :min="0" :max="360" circle-color="#2980b9" progress-color="#2980b9" :side=120 knob-color="#2c3e50" :circle-width="4" :progress-width="4" :knob-radius=7></circle-slider>
            <span class='icon spread'></span>
            <span class='amount'>
                <span>
                    <input v-model='direction.amount' min="0" max="360" size="3" @keydown.up="increaseValue" @keydown.down="decreaseValue" @input="parseDigits" />
                </span>
                <span>deg</span>
            </span>
        </div>
    </template>

<template id='range'>
        <div class='control range'>
            <span class='title'>{{rangedata.name}}</span>
            <span class='range'>
                <input type="range" :min="rangedata.min" :max="rangedata.max" :step='rangedata.step' v-model='rangedata.amount' @input="$emit('update')" />
            </span>
            <span class='amount'>{{rangedata.amount}}{{rangedata.unit}}</span>
        </div>
    </template>


<template id='colors'>
        <div class='control color'>
            <span class='color-box'>
                <span :style='{"background-color": color.value }'></span>
            </span>
            <span class='color-stop'>
                <input v-model='color.stop'>
            </span>
            <span class='color-delete' @click='length > 2 ? $emit("delete") : null' :class='{disabled: length <= 2}'>×</span>
        </div>
    </template>


<template id='toggle-control'>
        <div class='toggle control'>
            <div v-for='(selection, index) in options.selections' @click='toggleSelection(index)' v-if='options.selected == selection' :class='{on: (selection == true), off: (selection == false)}' :data-tip="(type == 'boolean') ? tip : selection">
                <span class='icon' v-if='showIcon == true' :style="{'background-image': (type == 'boolean') ? 'url('+ booleanIcon +')' : 'url('+ icons[index] +')'}"></span>
                <span class='text' v-if='showText == true'></span>
            </div>
        </div>
    </template>

<template id='social-networks'>
        <div id='share-container' :class='{show: show == true}'>
            <div v-for='(network, index) in networks' :href='network.link' target='_blank' @click="openPopup(network.link)"  :style="{'background-color': [network.color]}">
            	<i class="icon" :class="[network.icon]"></i>
            </div>
        </div>
    </template>

<template id='color-slider'>
        <div class='colors-slider'>
            <div class='gradient-bar' :style='displayBarGradient' @click='$emit("add", $event)'></div>
            <color-stop v-for='(color, index) in colors' :color='color' :key='index' :index='index'></color-stop>
        </div>
    </template>


<template id='color-stop'>
        <div class='color-stop' :style='{left: color.stop + "%" }' :class='{hide: (color.status == "out"), selected: (this.$root.currentColorIndex == index)}'>
            <span class='color-view' :style='opaqueColor' @mousedown="dragStart(index)"></span>
            <span class='stop-input'>
                <input v-model='color.stop' size='3' min="0" max="100" @keydown.up="increaseValue" @keydown.down="decreaseValue" @keyup="parseDigits" @focus='$root.currentColorIndex = index'>
            </span>

        </div>
    </template>
<template id='no-ie'>
        <div id='dont-use-ie' v-if='showIENotification'>
            <span class='text'>This gradient generator works on IE/Edge but for better performance please consider using <a href="https://www.google.com/chrome/" target="_blank">Chrome</a> or <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>.</span>
            <span class='close' @click="clearNotification">×</span>
        </div>
    </template>
<template id='info-box-template'>
        <transition name="show-info">
            <div id='info-box-wrapper' v-if='showInfo' @keydown.esc="hideInfo">
                <div class='info-box'>
                    <div class='close' @click="hideInfo">×</div>
                    <div class='logo'>
                        Kalimah Gradient Generator
                    </div>
                    <div class='welcome'>
                        <h1>Welcome</h1>
                        <p>Thanks for using Kalimah Gradient Generator. There are many gradient generators available online but I tried to make this generator as comprehensive and as easy to use as possible.</p>
                        <p>You can customize all aspects of gradients including stacking multiple gradients, creating linear and radial gradients, applying repeat gradients as well as many other features.</p>
                    </div>

                    <div class='howto'>
                        <h1>How to use:</h1>
                        <div class='howto-wrapper'>
                            <p>Using the generator should be straight forward. I will, however, provide some details in this section for competence of the project.</p>
                            <h2>Stack</h2>
                            <p>You can add a new gradient layer by clicking on the add button below the gradient stack. Each layer has a show/hide and delete buttons.</p>
                            <p>Those buttons appears when you hover the layer or select it. If there is only one layer in the stack the buttons will not show as there is no point in using them.</p>
                            <h2>Color options</h2>
                            <p>In this section all main options can be configured. Gradient type (linear, radial), repeat, gradient shape (circle, ellipse) for radial gradients and also height, width and position of the gradient.</p>
                            <h2>Colors</h2>
                            <p>To change color of any of the stops select the stop first then modify the color using this section. You can either select a color from the color box or insert the hex color in the input provided. You can also modify the alpha channel of the color if you wish.</p>
                            <p>The color box is designed similar to Chrome developer tools color picker. So if you are familiar with that picker it should be similar to this one.</p>
                            <p>You can change the stop value by dragging the pin on the gradient bar or set the value directly by clicking on the value above the pin.</p>
                            <h2>Presets</h2>
                            <p>There are two main usage for this section. Either save (or apply) the presets that you generated or select on the presets available.</p>
                            <p>There are more 500 gradient preset that you can view by clicking on "more presets" button below the presets section.</p>
                            <p>Once displayed, to hide the presets section you can either scroll down with the mouse wheel or click anywhere on the gradient display.</p>
                        </div>
                    </div>

                    <div class='resources'>
                        <h1>Made with</h1>
                        <li><a target="_blank" href='https://vuejs.org/'>Vue.js</a></li>
                        <li><a target="_blank" href='https://github.com/devstark-com/vue-circle-slider'>Vue circle slider</a></li>
                        <li><a target="_blank" href='http://vue-color.surge.sh/'>Vue Color</a></li>
                        <li><a target="_blank" href='https://github.com/DamonOehlman/detect-browser'>detect-browser</a></li>
                        <hr />
                        <li><a target="_blank" href='https://webgradients.com/'>WebGradients</a></li>
                        <li><a target="_blank" href='https://uigradients.com/'>uiGradients</a></li>
                        <hr />
                        <li><a target="_blank" href='https://thenounproject.com/indygo'>Repeat icon</a></li>
                        <li><a target="_blank" href='https://www.iconfinder.com/yanlu'>Hide icon</a></li>
                      <li><a target="_blank" href='https://ionicons.com/'>Ionicons</a></li>
                      <li><a target="_blank" href='http://www.socicon.com/'>Socicon</a></li>
                      
                        <hr />

                        <li><a target="_blank" href='https://fonts.google.com'>Google Fonts</a></li>


                    </div>
                </div>

            </div>
        </transition>
    </template>
!

CSS 

              
                @import url("https://fonts.googleapis.com/css?family=Roboto:400,900");
@import url("https://fonts.googleapis.com/css?family=Baloo:400,900");
@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
@import url('https://unpkg.com/[email protected]/dist/css/ionicons.min.css');
@import url('https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?9ukd8d');

body {
    background-color: gray;
    font-size: 16px;
    margin: 0;

    * {
        box-sizing: border-box;
        font-family: "Roboto", sans-serif;


        /* iOS Safari */
        -webkit-touch-callout: none;
        /* Safari */
        -webkit-user-select: none;
        /* Konqueror HTML */
        -khtml-user-select: none;
        /* Firefox */
        -moz-user-select: none;
        /* Internet Explorer/Edge */
        -ms-user-select: none;
        /* Non-prefixed version, currently supported by Chrome and Opera */
        user-select: none;

    }
}

$color: #3498db;

@mixin checkered-background($bg-size) {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), rgb(255, 255, 255);
    background-position: 0 0, $bg-size / 2 $bg-size /2;
    background-size: $bg-size $bg-size;
}

#background-display {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
		transition: transform 0.3s linear;
		
    @include checkered-background(2em);

    .show-gradient {
        width: 100%;
        height: 100%;
    }
		
		&.show-social-networks
		{
			transform: translatey(-10vh);
		}
}

#dont-use-ie
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    padding: 0.8em;
    display: flex;
    font-size: 1.1em;
    background: #fde073;
    animation: show-ie 0.5s forwards;
    color: darken(#fde073, 50%);
    .text
    {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        a
      {
        margin: 0 5px;
      }
    }
    .close
    {
        
        font-size: 1.3em;
        cursor: pointer;
        width: 1.3em;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.6;
        transition: all 0.3s;
        
        &:hover
        {
            opacity: 1;
        }
    }
}
#presets-fullview-container {
    position: fixed;
    bottom: 0;
    width: 90vw;
    left: 5vw;
    height: 60vh;
    background-color: white;
    padding: 40px 20px;
    z-index: 5;


    transition: all 0.4s ease-in-out;
    transform: translateY(110%);

    &.show {
        transform: translateY(0);
    }

    .presets-wrapper {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, 90px);
        grid-gap: 20px;
        overflow: auto;

        > div {
            height: 90px;
            border: 2px solid white;
            box-shadow: 0 0 1px 2px rgba(180, 180, 180, 0.8);
            border-radius: 3px;
            overflow: hidden;
            cursor: pointer;
        }
    }

}
// http://www.socicon.com/chart.php
// https://www.materialui.co/socialcolors
#share-container
{
	position: fixed;
	bottom: 0;
	left: 0;
	height: 10vh;
	width: 100vw;
	background-color: #bdc3c7;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	transition:transform 0.3s linear;
	transform: translateY(100%);
	
	&.show {
        transform: translateY(0%);
    }
		
	> div
	{
		    cursor: pointer;
			width: 1em;
			height: 1em;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 15px;
			opacity: 0.8;
			border-radius: 2px;
			
			transition: all 0.2s;
			 font-family: 'Socicon' !important;
			 color: white;
			i
			{
				font-size: 0.5em;
			}
		&:hover
		{
			opacity: 1;
		}
	}

}

#info-box-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    transition: all 0.3s ease-in-out;
    z-index: 5;
    background: #c1b6a4;
    $color: #48443a;

    //transform: translatey(100%);
    .info-box {
        padding: 50px;

        position: relative;
        display: grid;
        grid-template-columns: 15% 60% 15%;
        grid-template-rows: 15% 85%;
        grid-gap: 4em;
        height: 100%;

        .logo {
            grid-column: 1 / 4;
            grid-row: 1;
            font-size: 3.5em;
            background: purple;
            background-color: #DCD9D4;
            background-image: linear-gradient(90deg, #9795f0, #fbc8d4, #13547a, #80d0c7, #88d3ce, #6e45e2);
            background-size: 600% 600%;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-family: "Fredoka One";
            animation: move-gradient 30s ease infinite reverse;
        }

        h1 {
            font-size: 1.5em;
            margin: 15px 0;
            font-family: Baloo;
            color: $color;
        }

        h2 {
            font-size: 1.2em;
            margin: 5px 0;
            font-family: Baloo;
            color: $color;
        }

        p {
            margin: 20px 0;
            font-size: 0.8em;
            line-height: 1.5em;
            text-align: justify;
            color: $color;

            &:first-child {
                margin-top: 0;
            }
        }

        .close {
            position: absolute;
            top: 3%;
            right: 2%;
            width: 1em;
            height: 1em;
            font-size: 2em;
            font-weight: bold;
            transition: all 0.2s;
            opacity: 0.8;
            color: darken($color, 20%);
            cursor: pointer;
            justify-content: center;
            align-items: center;
            display: flex;

            &:hover {
                opacity: 1;
            }
        }

        .howto {
            position: relative;

            .howto-wrapper {
                column-count: 3;
                column-gap: 2.5em;

                &::after,
                &::before {
                    content: "";
                    height: 80%;
                    width: 1px;
                    background-color: fade_out($color, 0.9);
                    position: absolute;
                    right: -3.5%;
                    top: 10%;
                }

                &::after {
                    left: -3.5%;
                }
            }


        }

        .resources {

            li {
                list-style-type: none;
                font-size: 0.9em;
                line-height: 2em;

                a {
                    transition: all 0.2s;
                    opacity: 0.7;
                    color: $color;
                    text-decoration: none;

                    &:hover {
                        opacity: 1;
                    }

                    &:active,
                    &:visited {
                        color: $color;
                    }
                }

                &::after {
                    //content: "🔗";
                }
            }

            hr {
                border: 0.5px solid;
                width: 50%;
                position: relative;
                color: fade_out($color, 0.9);
            }
        }
    }
}

#controls-container {
    position: fixed;
    bottom: 0;
    left: 0;
    min-height: 35vh;
    width: 100vw;
    transition: all 0.4s ease-in-out;
    transform: translateY(80%);


    &.show {
        transform: translateY(0);
    }

    .controls-wrapper {
        padding: 0 20px;
        box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.15);
        background-color: white;
        display: grid;
        grid-template-columns: 100px minmax(150px, 170px) minmax(200px, 250px) 240px minmax(50px, 100px);
        grid-gap: 35px;
        max-width: 1040px;
        left: 50%;
        position: relative;
        height: 100%;
        transform: translateX(-50%);

        .colors-slider {
            width: 100%;
            height: 40px;
            margin-top: 10px;
            position: relative;
            grid-column: 1 / 6;
            grid-row: 1;

            &::after {
                position: absolute;
                bottom: -20px;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: transparentize(gray, 0.7);
                content: "";
            }

            .gradient-bar {
                width: 100%;
                border-radius: 5px;
                height: 100%;
                box-shadow: 0 0 0 2px #2b2b2b;
                border: 2px solid white;
                cursor: copy;
                z-index: 2;

                &::before {
                    @include checkered-background(1em);
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: inherit;
                    z-index: -1;
                }
            }

            .color-stop {
                position: absolute;
                top: 0;
                height: 100%;
                width: 10px;
                z-index: 1;
                transform: translateX(-25%);
                transition: box-shadow 0.2s;

                &.stackTop {
                    z-index: 2;
                }

                &.hide {
                    display: none;
                }

                &.selected {
                    z-index: 2;

                    .color-view {
                        box-shadow: 0 0 0 2px #2b2b2b, 0 0 0px 5px rgba(189, 195, 199, 0.71);
                    }

                    .stop-input input {
                        box-shadow: inset 0 0 0 2px #bdc3c7;
                        opacity: 1;
                        font-size: 1em;
                        transform: translate(0, 15%);
                    }
                }

                .color-view {
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    bottom: 100%;
                    left: 0;
                    display: flex;
                    justify-content: center;
                    align-content: center;
                    border-radius: 5px;
                    cursor: move;
                    border: 2px solid white;
                    box-shadow: 0 0 0 2px #2b2b2b;
                    transition: box-shadow 0.2s;
                    border-radius: 40% 60% 100% 0% / 100% 60% 40% 0%;
                    transform: rotate(-45deg) translateX(-50%);
                    z-index: 1;

                    &:hover {
                        box-shadow: 0 0 0 2px #2b2b2b, 0 0 0px 5px rgba(180, 180, 180, 0.6);
                    }

                }

                .stop-input {
                    position: absolute;
                    bottom: 100%;
                    left: 0%;
                    transform: translate(-50%, -80%);

                    input {
                        border: 0px solid gray;
                        text-align: center;
                        outline: none;
                        font-size: 0.8em;
                        box-shadow: 0 0 0 0px gray;
                        transition: all 0.2s;
                        max-width: 100%;
                        border-radius: 5px;
                        padding: 0.4em 0.4em;
                        opacity: 0.5;

                        &:focus {}
                    }
                }

            }
        }

        .title {

            width: 20%;

            h1 {
                position: relative;
                margin: 40px 0 60px 0;
                color: darken($color, 25%);
                font-size: 2.5em;
                font-weight: bold;
                line-height: 1.2em;

                &::after {
                    content: attr(data-title);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    font-size: 1.7em;
                    line-height: 1em;
                    transform: translate(-50%, -50%);
                    opacity: 0.1;
                    font-weight: bold;
                    color: transparentize($color, 0.1);
                }
            }
        }


        h3 {
            width: 100%;
            text-align: left;
            text-transform: capitalize;
            font-size: 1em;
            color: rgba(180, 180, 180, 0.5);
            text-indent: 5%;
            margin-top: 15px;
            margin-bottom: 10px;
        }

        .gradients-stack {
            .gradients-stack-container {
                max-height: 200px;
                overflow: auto;
                margin-bottom: 10px;

                > div {

                    width: 100%;
                    display: grid;
                    grid-template-columns: 2fr 1fr;
                    grid-template-rows: 1fr 1fr;
                    margin: 3px 0;
                    height: 50px;
                    cursor: pointer;
                    transition: all 0.3s;
                    opacity: 0.5;
                    grid-column-gap: 2px;

                    &.noneed {

                        .delete,
                        .hide {
                            display: none;
                        }
                    }

                    &.highlight,
                    &:hover {
                        opacity: 1;

                        .hide,
                        .delete {
                            transform: translateX(0%);

                            &:hover {
                                opacity: 1;
                            }
                        }
                    }

                    .gradient-box-container {
                        grid-column: 1;
                        grid-row: 1 / span 2;
                        border-radius: 0px;
                        z-index: 3;
                        position: relative;
                        display: block;

                        @include checkered-background(0.5em);

                        .gradient-box {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                        }
                    }



                    .hide {
                        transform: translateX(-110%);
                        transition: all 0.2s;
                        grid-column: 2;
                        grid-row: 2;
                        opacity: 0.8;
                        cursor: pointer;
                        text-align: center;
                        background-color: #1abc9c;
                        background-position: 50% 50%;
                        background-size: 90% 90%;
                        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgPjx0aXRsZS8+PGRlc2MvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBmaWxsPSIjZmZmZmZmIj48cGF0aCBkPSJNMTcsOSBDOCw5IDQsMTYgNCwxNiBDNCwxNiA4LDIzLjAwMDAwMSAxNywyMyBDMjYsMjIuOTk5OTk5IDMwLDE2IDMwLDE2IEMzMCwxNiAyNiw5IDE3LDkgTDE3LDkgWiBNMTcsMjAgQzE5LjIwOTEzOTEsMjAgMjEsMTguMjA5MTM5MSAyMSwxNiBDMjEsMTMuNzkwODYwOSAxOS4yMDkxMzkxLDEyIDE3LDEyIEMxNC43OTA4NjA5LDEyIDEzLDEzLjc5MDg2MDkgMTMsMTYgQzEzLDE4LjIwOTEzOTEgMTQuNzkwODYwOSwyMCAxNywyMCBMMTcsMjAgWiBNMTcsMTkgQzE4LjY1Njg1NDMsMTkgMjAsMTcuNjU2ODU0MyAyMCwxNiBDMjAsMTQuMzQzMTQ1NyAxOC42NTY4NTQzLDEzIDE3LDEzIEMxNS4zNDMxNDU3LDEzIDE0LDE0LjM0MzE0NTcgMTQsMTYgQzE0LDE3LjY1Njg1NDMgMTUuMzQzMTQ1NywxOSAxNywxOSBMMTcsMTkgWiBNMTcsMTcgQzE3LjU1MjI4NDgsMTcgMTgsMTYuNTUyMjg0OCAxOCwxNiBDMTgsMTUuNDQ3NzE1MiAxNy41NTIyODQ4LDE1IDE3LDE1IEMxNi40NDc3MTUyLDE1IDE2LDE1LjQ0NzcxNTIgMTYsMTYgQzE2LDE2LjU1MjI4NDggMTYuNDQ3NzE1MiwxNyAxNywxNyBMMTcsMTcgWiIvPjwvZz48L2c+PC9zdmc+');

                        &.hidden {
                            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTguMTA4Njk4OTEsMjAuODkxMzAxMSBDNC42MTcyMDgxNiwxOC44MzAxMTQ3IDMsMTYgMywxNiBDMywxNiA3LDkgMTYsOSBDMTcuMzA0NTEwNyw5IDE4LjUwMzk3NTIsOS4xNDcwNjQ2NiAxOS42MDE0Mzg4LDkuMzk4NTYxMjIgTDE2Ljg5ODY1MzEsMTIuMTAxMzQ2OSBDMTYuNjA5Nzg4NSwxMi4wMzUwMzQyIDE2LjMwODk4NTYsMTIgMTYsMTIgQzEzLjc5MDg2MDksMTIgMTIsMTMuNzkwODYwOSAxMiwxNiBDMTIsMTYuMzA4OTg1NiAxMi4wMzUwMzQyLDE2LjYwOTc4ODUgMTIuMTAxMzQ2OSwxNi44OTg2NTMxIEw4LjEwODY5ODkxLDIwLjg5MTMwMTEgTDguMTA4Njk4OTEsMjAuODkxMzAxMSBMOC4xMDg2OTg5MSwyMC44OTEzMDExIFogTTEyLjM5ODU2MSwyMi42MDE0MzkgQzEzLjQ5NjAyNDYsMjIuODUyOTM1NiAxNC42OTU0ODkyLDIzLjAwMDAwMDEgMTYsMjMgQzI1LDIyLjk5OTk5OSAyOSwxNiAyOSwxNiBDMjksMTYgMjcuMzgyNzkxOCwxMy4xNjk4ODU2IDIzLjg5MTMwMDgsMTEuMTA4Njk5MiBMMTkuODk4NjUzMSwxNS4xMDEzNDY5IEMxOS45NjQ5NjU4LDE1LjM5MDIxMTUgMjAsMTUuNjkxMDE0NCAyMCwxNiBDMjAsMTguMjA5MTM5MSAxOC4yMDkxMzkxLDIwIDE2LDIwIEMxNS42OTEwMTQ0LDIwIDE1LjM5MDIxMTUsMTkuOTY0OTY1OCAxNS4xMDEzNDY5LDE5Ljg5ODY1MzEgTDEyLjM5ODU2MSwyMi42MDE0MzkgTDEyLjM5ODU2MSwyMi42MDE0MzkgTDEyLjM5ODU2MSwyMi42MDE0MzkgWiBNMTksMTYgQzE5LjAwMDAwMDEsMTYuNzY3NzY2OSAxOC43MDcxMDY4LDE3LjUzNTUzMzkgMTguMTIxMzIwMywxOC4xMjEzMjAzIEMxNy41MzU1MzM5LDE4LjcwNzEwNjggMTYuNzY3NzY2OSwxOS4wMDAwMDAxIDE2LDE5IEwxOSwxNiBMMTksMTYgTDE5LDE2IFogTTE2LDEzIEMxNS4yMzIyMzMxLDEyLjk5OTk5OTkgMTQuNDY0NDY2MSwxMy4yOTI4OTMyIDEzLjg3ODY3OTcsMTMuODc4Njc5NyBDMTMuMjkyODkzMiwxNC40NjQ0NjYxIDEyLjk5OTk5OTksMTUuMjMyMjMzMSAxMywxNiBMMTYsMTMgTDE2LDEzIEwxNiwxMyBaIE0yNCw3IEw3LDI0IEw4LDI1IEwyNSw4IEwyNCw3IEwyNCw3IFoiLz48L2c+PC9nPjwvc3ZnPg==');
                        }
                    }

                    .delete {
                        transform: translateX(-110%);
                        transition: all 0.2s;
                        cursor: pointer;
                        text-align: center;
                        font-size: 1.2em;
                        color: red;
                        font-weight: bold;
                        background-color: #e74c3c;
                        color: white;
                        grid-column: 2;
                        grid-row: 1;
                        opacity: 0.8;
                    }
                }
            }

            .add-gradient {
                opacity: 1;
                color: darken($color, 20%);
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid $color;
                border-radius: 2px;
                cursor: pointer;

                &:hover {
                    background-color: lighten($color, 10%);
                }
            }
        }

        .colors-options-container {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            align-content: flex-start;


            &::after,
            &::before {
                position: absolute;
                top: 10%;
                right: -12.5px;
                height: 80%;
                width: 1px;
                background-color: transparentize(gray, 0.9);
                content: "";
            }

            &::before {
                left: -12.5px;
            }

            .colors-options-top {
                width: 100%;
                width: 100%;
                display: grid;
                justify-items: center;
                grid-template-columns: 1fr 1fr 1fr;
            }

            .colors-options-bottom {
                justify-content: center;
                display: flex;
                width: 100%;
                padding: 1em 0;
                flex-direction: column;
                min-height: 150px;
            }
        }

        .color-stops-container {
            .vc-chrome {
                width: 100%;
                box-shadow: 0 0 1px 0 gray;

                .vc-chrome-saturation-wrap .vc-saturation-circle {
                    transform: translate(-50%, -50%);
                    box-shadow: 0 0 0 2px #fff, inset 0 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(0, 0, 0, 1);
                }
            }
        }

        .color-presets-container {
            display: flex;
            flex-direction: column;

            .user-generated {
                border-bottom: 1px solid rgba(180, 180, 180, 0.4);
                display: grid;
                width: 100%;
                grid-template-columns: 70% 30%;
                padding: 10px;

                .user-presets {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, 35px);
                    grid-gap: 10px;
                    padding: 5px 0px;

                    &::after {
                        content: "";
                        background-color: rgba(180, 180, 180, 0.4);
                        position: absolute;
                        right: 0;
                        top: 20%;
                        height: 80%;
                        width: 1px;
                    }

                    > span {
                        height: 35px;
                        cursor: pointer;
                        border-radius: 3px;
                        border: 2px solid white;
                        box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.3);
                        position: relative;
                        z-index: 1;
                        transition: all 0.2s;

                        &.selected {
                            box-shadow: 0 0 4px 3px rgba(0, 0, 0, 0.7);
                        }
                    }
                }

                .presets-actions {
                    display: flex;
                    justify-content: space-around;
                    padding: 5px 0px;

                    > div {
                        filter: grayscale(1);
                        opacity: 0.2;
                        cursor: default;
                        transition: all 0.2s;
                        width: 45%;

                        $color: #39D5FF;
                        color: darken($color, 20%);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid;
                        border-radius: 2px;
                        font-size: 0.9em;
                        padding: 5px;
                        background-color: lighten($color, 10%);

                        &.save-preset {
                            $color: #2ECC71;
                            color: darken($color, 20%);
                            background-color: lighten($color, 10%);


                        }

                    }

                    &.enable-save .save-preset,
                    &.enable-apply .apply-preset {
                        opacity: 1;
                        cursor: pointer;
                        filter: grayscale(0);

                        &:hover {
                            opacity: 0.7;
                        }
                    }

                }
            }

            .other-presets {
                display: grid;
                grid-template-columns: repeat(auto-fill, 35px);
                grid-gap: 10px;
                padding: 10px;
                max-height: 220px;
                overflow: auto;
                width: 100%;

                > .gradient-div {
                    height: 35px;
                    cursor: pointer;
                    border-radius: 3px;
                    border: 2px solid white;
                    box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.3);
                    position: relative;
                    z-index: 1;

                    &:hover {}

                }
            }

            .more-presets {
                $color: #d35400;
                opacity: 1;
                color: darken($color, 20%);
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid $color;
                border-radius: 2px;
                transition: all 0.2s;
                font-size: 0.7em;
                padding: 5px;
                margin: 10px;
                cursor: pointer;

                &:hover {
                    background-color: lighten($color, 10%);
                }
            }
        }

        .user-actions-container {

            display: flex;
            flex-direction: column;

            > div {
                $color: #9b59b6;
                opacity: 1;
                color: darken($color, 20%);
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid $color;
                border-radius: 2px;
                transition: all 0.2s;
                font-size: 0.7em;
                padding: 5px;
                margin: 10px 0;
                cursor: pointer;

                &.reset {
                    color: darken(#e74c3c, 20%);
                    border: 1px solid #e74c3c;
                    margin-top: auto;
										
                    &:hover {
                        background-color: lighten(#e74c3c, 10%);
                    }

                }

                &:hover {
                    background-color: lighten($color, 10%);
                    color: white;
                }
								
								&.share
								{
									animation: share-btn 15s forwards infinite;
									color: white;
									opacity: 0.8;
									background-color: #9b59b6;
									
									&:hover
									{
										opacity: 1;
									}
								}
            }
        }
				
				$colors: #3b5999 #dd4b39 #ff5700 #55acee #0077B5 #bd081c #34465d #f57d00 #c71610 #21759b;
				@keyframes share-btn {
					@for $i from 1 through 10 {
						#{$i * 10%} {
							background-color: nth($colors, $i);
							border-color: nth($colors, $i);
						} 
					}
				}


        .control {
            display: flex;
            font-size: 0.7em;

            &.toggle {
                color: white;
                cursor: pointer;
                text-align: center;
                text-transform: uppercase;
                height: 3em;
                width: 3em;

                > div {
                    display: flex;
                    width: 100%;
                    padding: 0.3em;
                    background-color: #3498db;
                    border-radius: 5px;
                    transition: all 0.3s;
                    opacity: 1;
                    position: relative;

                    &:after {
                        content: attr(data-tip);
                        position: absolute;
                        top: 0;
                        left: 50%;
                        transform: translate(-50%, 0%) scale(0);
                        background-color: inherit;
                        border-radius: 3px;
                        padding: 0.3em 0.5em;
                        opacity: 0;
                        transition: all 0.3s;
                        pointer-events: none;
                    }

                    &:hover {
                        background-color: darken(#3498db, 5%);

                        &:after {
                            transform: translate(-50%, -150%) scale(1);
                            opacity: 1;
                        }
                    }

                    &.off {
                        opacity: 0.5;
                    }

                    .icon {
                        flex-grow: 1;
                        background-repeat: no-repeat;
                        padding: 10px;
                        display: block;
                    }
                }
            }

            &.range {
                padding: 0.9em 0;
                width: 100%;
                position: relative;
                display: flex;

                .title {
                    width: 100%;
                    text-align: left;
                    text-transform: capitalize;
                    display: inline-block;
                    font-size: 1em;
                    position: absolute;
                    top: 0%;
                    color: rgba(180, 180, 180, 0.5);
                    text-indent: 10%;
                    pointer-events: none;
                    transition: all 0.2s;
                    z-index: -1;
                    line-height: 1;
                    padding: 0;
                    margin: 0;
                }

                .amount {
                    width: 20%;
                    display: inline-flex;
                    font-size: 0.7em;
                    justify-content: flex-end;
                    align-items: center;
                }

                .range {
                    width: 75%;
                    display: inline-flex;
                    align-items: center;
                }
            }

            &.color {
                $color: rgba(180, 180, 180, 0.7);

                margin-bottom: 10px;
                width: 100%;
                border: 1px solid $color;
                border-radius: 5px;
                overflow: hidden;
                padding: 3px 5px;

                > span {
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                }

                .color-box {
                    width: 20%;
                    position: relative;


                    > span {
                        position: absolute;
                        top: 10%;
                        left: 10%;
                        width: 80%;
                        height: 80%;
                        cursor: pointer;

                        &::after,
                        &::before {
                            position: absolute;
                            top: 0%;
                            right: -30%;
                            height: 100%;
                            width: 1px;
                            background-color: $color;
                            content: "";
                        }

                        &::before {
                            left: -30%;
                        }
                    }
                }

                .color-input {
                    flex-grow: 1;
                }

                .color-stop {
                    width: 30%;

                    input {
                        text-align: center;
                    }
                }

                .color-delete {
                    width: 10%;
                    transition: all 0.2s;
                    font-size: 2em;
                    cursor: pointer;
                    opacity: 0.5;

                    &:hover:not(.disabled) {
                        opacity: 1;
                    }

                    &.disabled {
                        opacity: 0;
                        cursor: default;
                    }
                }

                input {
                    padding: 5px 10px;
                    border: 0px solid gray;
                    width: 100%;
                    outline: 0;
                }

            }

            &.circle {
                position: relative;
                justify-content: center;

                svg {
                    g circle:last-child {
                        cursor: pointer;
                    }
                }

                .amount {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 1.5em;
                    text-align: center;
                    display: flex;
                    flex-direction: column;

                    input {
                        border: 0px solid;
                        width: auto;
                        text-align: center;
                        font-size: 1.2em;
                    }

                    span:last-child {
                        font-size: 0.7em;
                    }
                }
            }

            &.switch {
                display: flex;
                margin: 1.2em 0;
                color: rgba(180, 180, 180, 0.5);
                flex-direction: column;

                input {
                    display: none;

                    &:checked + label {
                        background-color: #3498db;

                        .switch {
                            left: 55%;
                        }
                    }
                }

                label {
                    width: 30px;
                    height: 15px;
                    border-radius: 10px;
                    background-color: gray;
                    display: inline-block;
                    margin-right: 10px;
                    position: relative;
                    transition: all 0.3s;
                    cursor: pointer;

                    span {
                        background-color: white;
                        height: 80%;
                        width: 40%;
                        position: absolute;
                        border-radius: 50%;
                        left: 5%;
                        top: 8%;
                        transition: all 0.3s;
                    }
                }
            }
        }
    }
}


input[type="range"] {
    $thumb: #3498db;
    $size: 10px;
    $width: 100%;
    $height: 3px;
    $track-color: #ddd;
    $track-focus: lighten($thumb, 15%);

    /* fix for FF unable to apply focus style bug  */
    border: 1px solid transparent;

    /*required for proper track sizing in FF*/
    width: 100%;

    /* Webkit */
    -webkit-appearance: none;

    &::-webkit-slider-runnable-track {
        width: $width;
        height: $height;
        background: $track-color;
        border: none;
        border-radius: 3px;
        transition: all 0.2s;
    }

    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: $size;
        width: $size;
        border-radius: 50%;
        background: $thumb;
        margin-top: -4px;
    }

    &:focus {
        outline: none;

        &::-moz-range-track {
            background: $track-focus;
        }

        &::-webkit-slider-runnable-track {
            background: $track-focus;
        }

        &::-ms-fill-lower {
            background: $track-focus;
        }

        &::-ms-fill-upper {
            background: $track-focus;
        }
    }

    /* FF */
    &::-moz-range-track {
        width: $width;
        height: $height;
        background: $track-color;
        border: none;
        border-radius: 3px;
        transition: all 0.2s;
        z-index: 2;
    }

    &::-moz-range-thumb {
        border: none;
        height: $size;
        width: $size;
        border-radius: 50%;
        background: $thumb;
        z-index: 2;
    }

    /*hide the outline behind the border*/
    &:-moz-focusring {
        outline: 1px solid white;
        outline-offset: -1px;
    }

    /* IE*/
    &::-ms-track {
        width: $width;
        height: $height;

        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
        background: transparent;

        /*leave room for the larger thumb to overflow with a transparent border */
        border-color: transparent;
        border-width: 6px 0;

        /*remove default tick marks*/
        color: transparent;
    }

    &::-ms-fill-lower {
        background: $track-color;
        border-radius: 10px;
    }

    &::-ms-fill-upper {
        background: $track-color;
        border-radius: 10px;
    }

    &::-ms-thumb {
        border: none;
        height: $size;
        width: $size;
        border-radius: 50%;
        background: $thumb;
        transform: translateY(20%);
    }
}


@keyframes move-gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}



/* 
	Hide background animation 
*/
.hide-background-enter-active {
    animation: hide-background 1.5s reverse ease-in forwards;
}

.hide-background-leave-active {
    animation: hide-background 1s ease-in forwards;
}

@keyframes hide-background {
    0% {
        transform: scale(1) perspective(500px) rotateX(0deg);
    }

    50% {
        transform: scale(0.8) perspective(500px) rotateX(2deg);
    }

    100% {
        transform: scale(0.8) perspective(500px) rotateX(2deg) translatey(-120%);
    }
}


/* 
	Show info animation 
*/
.show-info-enter-active {
    animation: show-info 1s ease-in forwards;
}

.show-info-leave-active {
    animation: show-info 1s reverse forwards;
}

@keyframes show-info {

    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    50% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


@keyframes show-ie {

    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}
!

JS 

              
                var webgradients = [
    { 
        "style": {
            "background-image": "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)"
        },
        "type": "linear",
        "direction": "45",
        "colors": [{
                "value": "#ff9a9e",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fad0c4",
                "stop": "99",
                "status": "in"
      },
            {
                "value": "#fad0c4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#a18cd1",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fbc2eb",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#fad0c4",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fad0c4",
                "stop": "1",
                "status": "in"
      },
            {
                "value": "#ffd1ff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #ffecd2 0%, #fcb69f 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#ffecd2",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fcb69f",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#ff8177",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ff867a",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ff8c7f",
                "stop": "21",
                "status": "in"
      },
            {
                "value": "#f99185",
                "stop": "52",
                "status": "in"
      },
            {
                "value": "#cf556c",
                "stop": "78",
                "status": "in"
      },
            {
                "value": "#b12a5b",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#ff9a9e",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fecfef",
                "stop": "99",
                "status": "in"
      },
            {
                "value": "#fecfef",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(120deg, #f6d365 0%, #fda085 100%)"
        },
        "type": "linear",
        "direction": "120",
        "colors": [{
                "value": "#f6d365",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fda085",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#fbc2eb",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#a6c1ee",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#fdcbf1",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fdcbf1",
                "stop": "1",
                "status": "in"
      },
            {
                "value": "#e6dee9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)"
        },
        "type": "linear",
        "direction": "120",
        "colors": [{
                "value": "#a1c4fd",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#c2e9fb",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)"
        },
        "type": "linear",
        "direction": "120",
        "colors": [{
                "value": "#d4fc79",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#96e6a1",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)"
        },
        "type": "linear",
        "direction": "120",
        "colors": [{
                "value": "#84fab0",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#8fd3f4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#cfd9df",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#e2ebf0",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(120deg, #a6c0fe 0%, #f68084 100%)"
        },
        "type": "linear",
        "direction": "120",
        "colors": [{
                "value": "#a6c0fe",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#f68084",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(120deg, #fccb90 0%, #d57eeb 100%)"
        },
        "type": "linear",
        "direction": "120",
        "colors": [{
                "value": "#fccb90",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#d57eeb",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)"
        },
        "type": "linear",
        "direction": "120",
        "colors": [{
                "value": "#e0c3fc",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#8ec5fc",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(120deg, #f093fb 0%, #f5576c 100%)"
        },
        "type": "linear",
        "direction": "120",
        "colors": [{
                "value": "#f093fb",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#f5576c",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%)"
        },
        "type": "linear",
        "direction": "120",
        "colors": [{
                "value": "#fdfbfb",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ebedee",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #4facfe 0%, #00f2fe 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#4facfe",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#00f2fe",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #43e97b 0%, #38f9d7 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#43e97b",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#38f9d7",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #fa709a 0%, #fee140 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#fa709a",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fee140",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #30cfd0 0%, #330867 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#30cfd0",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#330867",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #a8edea 0%, #fed6e3 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#a8edea",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fed6e3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #5ee7df 0%, #b490ca 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#5ee7df",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#b490ca",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #d299c2 0%, #fef9d7 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#d299c2",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fef9d7",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#f5f7fa",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#c3cfe2",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#667eea",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#764ba2",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#fdfcfb",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#e2d1c3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%)"
        },
        "type": "linear",
        "direction": "120",
        "colors": [{
                "value": "#89f7fe",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#66a6ff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #fddb92 0%, #d1fdff 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#fddb92",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#d1fdff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #9890e3 0%, #b1f4cf 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#9890e3",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#b1f4cf",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #ebc0fd 0%, #d9ded8 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#ebc0fd",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#d9ded8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #96fbc4 0%, #f9f586 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#96fbc4",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#f9f586",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(180deg, #2af598 0%, #009efd 100%)"
        },
        "type": "linear",
        "direction": "180",
        "colors": [{
                "value": "#2af598",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#009efd",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#cd9cf2",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#f6f3ff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#e4afcb",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#b8cbb8",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#b8cbb8",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#e2c58b",
                "stop": "30",
                "status": "in"
      },
            {
                "value": "#c2ce9c",
                "stop": "64",
                "status": "in"
      },
            {
                "value": "#7edbdc",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#b8cbb8",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#b8cbb8",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#b465da",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#cf6cc9",
                "stop": "33",
                "status": "in"
      },
            {
                "value": "#ee609c",
                "stop": "66",
                "status": "in"
      },
            {
                "value": "#ee609c",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #6a11cb 0%, #2575fc 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#6a11cb",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#2575fc",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #37ecba 0%, #72afd3 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#37ecba",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#72afd3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #ebbba7 0%, #cfc7f8 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#ebbba7",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#cfc7f8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #fff1eb 0%, #ace0f9 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#fff1eb",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ace0f9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#eea2a2",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#bbc1bf",
                "stop": "19",
                "status": "in"
      },
            {
                "value": "#57c6e1",
                "stop": "42",
                "status": "in"
      },
            {
                "value": "#b49fda",
                "stop": "79",
                "status": "in"
      },
            {
                "value": "#7ac5d8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #c471f5 0%, #fa71cd 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#c471f5",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fa71cd",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #48c6ef 0%, #6f86d6 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#48c6ef",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#6f86d6",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#f78ca0",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#f9748f",
                "stop": "19",
                "status": "in"
      },
            {
                "value": "#fd868c",
                "stop": "60",
                "status": "in"
      },
            {
                "value": "#fe9a8b",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #feada6 0%, #f5efef 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#feada6",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#f5efef",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#e6e9f0",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#eef1f5",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #accbee 0%, #e7f0fd 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#accbee",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#e7f0fd",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%)"
        },
        "type": "linear",
        "direction": "-20",
        "colors": [{
                "value": "#e9defa",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fbfcdb",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #c1dfc4 0%, #deecdd 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#c1dfc4",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#deecdd",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #0ba360 0%, #3cba92 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#0ba360",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#3cba92",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #00c6fb 0%, #005bea 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#00c6fb",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#005bea",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #74ebd5 0%, #9face6 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#74ebd5",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#9face6",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #6a85b6 0%, #bac8e0 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#6a85b6",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#bac8e0",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #a3bded 0%, #6991c7 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#a3bded",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#6991c7",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #9795f0 0%, #fbc8d4 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#9795f0",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fbc8d4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #a7a6cb 0%, #8989ba 52%, #8989ba 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#a7a6cb",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#8989ba",
                "stop": "52",
                "status": "in"
      },
            {
                "value": "#8989ba",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#3f51b1",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#5a55ae",
                "stop": "13",
                "status": "in"
      },
            {
                "value": "#7b5fac",
                "stop": "25",
                "status": "in"
      },
            {
                "value": "#8f6aae",
                "stop": "38",
                "status": "in"
      },
            {
                "value": "#a86aa4",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#cc6b8e",
                "stop": "62",
                "status": "in"
      },
            {
                "value": "#f18271",
                "stop": "75",
                "status": "in"
      },
            {
                "value": "#f3a469",
                "stop": "87",
                "status": "in"
      },
            {
                "value": "#f7c978",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#fcc5e4",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fda34b",
                "stop": "15",
                "status": "in"
      },
            {
                "value": "#ff7882",
                "stop": "35",
                "status": "in"
      },
            {
                "value": "#c8699e",
                "stop": "52",
                "status": "in"
      },
            {
                "value": "#7046aa",
                "stop": "71",
                "status": "in"
      },
            {
                "value": "#0c1db8",
                "stop": "87",
                "status": "in"
      },
            {
                "value": "#020f75",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #dbdcd7 0%, #dddcd7 24%, #e2c9cc 30%, #e7627d 46%, #b8235a 59%, #801357 71%, #3d1635 84%, #1c1a27 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#dbdcd7",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#dddcd7",
                "stop": "24",
                "status": "in"
      },
            {
                "value": "#e2c9cc",
                "stop": "30",
                "status": "in"
      },
            {
                "value": "#e7627d",
                "stop": "46",
                "status": "in"
      },
            {
                "value": "#b8235a",
                "stop": "59",
                "status": "in"
      },
            {
                "value": "#801357",
                "stop": "71",
                "status": "in"
      },
            {
                "value": "#3d1635",
                "stop": "84",
                "status": "in"
      },
            {
                "value": "#1c1a27",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #f43b47 0%, #453a94 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#f43b47",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#453a94",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #4fb576 0%, #44c489 30%, #28a9ae 46%, #28a2b7 59%, #4c7788 71%, #6c4f63 86%, #432c39 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#4fb576",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#44c489",
                "stop": "30",
                "status": "in"
      },
            {
                "value": "#28a9ae",
                "stop": "46",
                "status": "in"
      },
            {
                "value": "#28a2b7",
                "stop": "59",
                "status": "in"
      },
            {
                "value": "#4c7788",
                "stop": "71",
                "status": "in"
      },
            {
                "value": "#6c4f63",
                "stop": "86",
                "status": "in"
      },
            {
                "value": "#432c39",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #0250c5 0%, #d43f8d 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#0250c5",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#d43f8d",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #88d3ce 0%, #6e45e2 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#88d3ce",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#6e45e2",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #d9afd9 0%, #97d9e1 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#d9afd9",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#97d9e1",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #7028e4 0%, #e5b2ca 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#7028e4",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#e5b2ca",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(15deg, #13547a 0%, #80d0c7 100%)"
        },
        "type": "linear",
        "direction": "15",
        "colors": [{
                "value": "#13547a",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#80d0c7",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #505285 0%, #585e92 12%, #65689f 25%, #7474b0 37%, #7e7ebb 50%, #8389c7 62%, #9795d4 75%, #a2a1dc 87%, #b5aee4 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#505285",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#585e92",
                "stop": "12",
                "status": "in"
      },
            {
                "value": "#65689f",
                "stop": "25",
                "status": "in"
      },
            {
                "value": "#7474b0",
                "stop": "37",
                "status": "in"
      },
            {
                "value": "#7e7ebb",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#8389c7",
                "stop": "62",
                "status": "in"
      },
            {
                "value": "#9795d4",
                "stop": "75",
                "status": "in"
      },
            {
                "value": "#a2a1dc",
                "stop": "87",
                "status": "in"
      },
            {
                "value": "#b5aee4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #ff0844 0%, #ffb199 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#ff0844",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ffb199",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%)"
        },
        "type": "linear",
        "direction": "45",
        "colors": [{
                "value": "#93a5cf",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#e4efe9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #434343 0%, black 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#434343",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "black",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#0c3483",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#a2b6df",
                "stop": "100",
                "status": "in"
      },
            {
                "value": "#6b8cce",
                "stop": "100",
                "status": "in"
      },
            {
                "value": "#a2b6df",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%)"
        },
        "type": "linear",
        "direction": "45",
        "colors": [{
                "value": "#93a5cf",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#e4efe9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #92fe9d 0%, #00c9ff 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#92fe9d",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#00c9ff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #ff758c 0%, #ff7eb3 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#ff758c",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ff7eb3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #868f96 0%, #596164 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#868f96",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#596164",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #c79081 0%, #dfa579 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#c79081",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#dfa579",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%)"
        },
        "type": "linear",
        "direction": "45",
        "colors": [{
                "value": "#8baaaa",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ae8b9c",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #f83600 0%, #f9d423 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#f83600",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#f9d423",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)"
        },
        "type": "linear",
        "direction": "-20",
        "colors": [{
                "value": "#b721ff",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#21d4fd",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%)"
        },
        "type": "linear",
        "direction": "-20",
        "colors": [{
                "value": "#6e45e2",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#88d3ce",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-20deg, #d558c8 0%, #24d292 100%)"
        },
        "type": "linear",
        "direction": "-20",
        "colors": [{
                "value": "#d558c8",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#24d292",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(60deg, #abecd6 0%, #fbed96 100%)"
        },
        "type": "linear",
        "direction": "60",
        "colors": [{
                "value": "#abecd6",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fbed96",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#d5d4d0",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#d5d4d0",
                "stop": "1",
                "status": "in"
      },
            {
                "value": "#eeeeec",
                "stop": "31",
                "status": "in"
      },
            {
                "value": "#efeeec",
                "stop": "75",
                "status": "in"
      },
            {
                "value": "#e9e9e7",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #5f72bd 0%, #9b23ea 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#5f72bd",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#9b23ea",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #09203f 0%, #537895 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#09203f",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#537895",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%)"
        },
        "type": "linear",
        "direction": "-20",
        "colors": [{
                "value": "#ddd6f3",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#faaca8",
                "stop": "100",
                "status": "in"
      },
            {
                "value": "#faaca8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-20deg, #dcb0ed 0%, #99c99c 100%)"
        },
        "type": "linear",
        "direction": "-20",
        "colors": [{
                "value": "#dcb0ed",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#99c99c",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#f3e7e9",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#e3eeff",
                "stop": "99",
                "status": "in"
      },
            {
                "value": "#e3eeff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #c71d6f 0%, #d09693 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#c71d6f",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#d09693",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(60deg, #96deda 0%, #50c9c3 100%)"
        },
        "type": "linear",
        "direction": "60",
        "colors": [{
                "value": "#96deda",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#50c9c3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #f77062 0%, #fe5196 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#f77062",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fe5196",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#c4c5c7",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#dcdddf",
                "stop": "52",
                "status": "in"
      },
            {
                "value": "#ebebeb",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #a8caba 0%, #5d4157 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#a8caba",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#5d4157",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(60deg, #29323c 0%, #485563 100%)"
        },
        "type": "linear",
        "direction": "60",
        "colors": [{
                "value": "#29323c",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#485563",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-60deg, #16a085 0%, #f4d03f 100%)"
        },
        "type": "linear",
        "direction": "-60",
        "colors": [{
                "value": "#16a085",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#f4d03f",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-60deg, #ff5858 0%, #f09819 100%)"
        },
        "type": "linear",
        "direction": "-60",
        "colors": [{
                "value": "#ff5858",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#f09819",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-20deg, #2b5876 0%, #4e4376 100%)"
        },
        "type": "linear",
        "direction": "-20",
        "colors": [{
                "value": "#2b5876",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#4e4376",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%)"
        },
        "type": "linear",
        "direction": "-20",
        "colors": [{
                "value": "#00cdac",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#8ddad5",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #4481eb 0%, #04befe 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#4481eb",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#04befe",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#dad4ec",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#dad4ec",
                "stop": "1",
                "status": "in"
      },
            {
                "value": "#f3e7e9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(45deg, #874da2 0%, #c43a30 100%)"
        },
        "type": "linear",
        "direction": "45",
        "colors": [{
                "value": "#874da2",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#c43a30",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #4481eb 0%, #04befe 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#4481eb",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#04befe",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #e8198b 0%, #c7eafd 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#e8198b",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#c7eafd",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%)"
        },
        "type": "linear",
        "direction": "-20",
        "colors": [{
                "value": "#f794a4",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fdd6bd",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%)"
        },
        "type": "linear",
        "direction": "60",
        "colors": [{
                "value": "#64b3f4",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#c2e59c",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #3b41c5 0%, #a981bb 49%, #ffc8a9 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#3b41c5",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#a981bb",
                "stop": "49",
                "status": "in"
      },
            {
                "value": "#ffc8a9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #0fd850 0%, #f9f047 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#0fd850",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#f9f047",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, lightgrey 0%, lightgrey 1%, #e0e0e0 26%, #efefef 48%, #d9d9d9 75%, #bcbcbc 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "lightgrey",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "lightgrey",
                "stop": "1",
                "status": "in"
      },
            {
                "value": "#e0e0e0",
                "stop": "26",
                "status": "in"
      },
            {
                "value": "#efefef",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#d9d9d9",
                "stop": "75",
                "status": "in"
      },
            {
                "value": "#bcbcbc",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%)"
        },
        "type": "linear",
        "direction": "45",
        "colors": [{
                "value": "#ee9ca7",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ffdde1",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#3ab5b0",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#3d99be",
                "stop": "31",
                "status": "in"
      },
            {
                "value": "#56317a",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #209cff 0%, #68e0cf 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#209cff",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#68e0cf",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#bdc2e8",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#bdc2e8",
                "stop": "1",
                "status": "in"
      },
            {
                "value": "#e6dee9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #e6b980 0%, #eacda3 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#e6b980",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#eacda3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#1e3c72",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#1e3c72",
                "stop": "1",
                "status": "in"
      },
            {
                "value": "#2a5298",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#d5dee7",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ffafbd",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#c9ffbf",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #9be15d 0%, #00e3ae 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#9be15d",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#00e3ae",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#ed6ea0",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ec8c69",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #ffc3a0 0%, #ffafbd 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#ffc3a0",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ffafbd",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #cc208e 0%, #6713d2 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#cc208e",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#6713d2",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #b3ffab 0%, #12fff7 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#b3ffab",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#12fff7",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #65bd60 0%, #5ac1a8 25%, #3ec6ed 50%, #b7ddb7 75%, #fef381 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#65bd60",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#5ac1a8",
                "stop": "25",
                "status": "in"
      },
            {
                "value": "#3ec6ed",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#b7ddb7",
                "stop": "75",
                "status": "in"
      },
            {
                "value": "#fef381",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #243949 0%, #517fa4 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#243949",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#517fa4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%)"
        },
        "type": "linear",
        "direction": "-20",
        "colors": [{
                "value": "#fc6076",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ff9a44",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #dfe9f3 0%, white 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#dfe9f3",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "white",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #00dbde 0%, #fc00ff 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#00dbde",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#fc00ff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #50cc7f 0%, #f5d100 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#50cc7f",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#f5d100",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #0acffe 0%, #495aff 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#0acffe",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#495aff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(-20deg, #616161 0%, #9bc5c3 100%)"
        },
        "type": "linear",
        "direction": "-20",
        "colors": [{
                "value": "#616161",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#9bc5c3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)"
        },
        "type": "linear",
        "direction": "60",
        "colors": [{
                "value": "#3d3393",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#2b76b9",
                "stop": "37",
                "status": "in"
      },
            {
                "value": "#2cacd1",
                "stop": "65",
                "status": "in"
      },
            {
                "value": "#35eb93",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #df89b5 0%, #bfd9fe 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#df89b5",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#bfd9fe",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#ed6ea0",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#ec8c69",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #d7d2cc 0%, #304352 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#d7d2cc",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#304352",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #e14fad 0%, #f9d423 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#e14fad",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#f9d423",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #b224ef 0%, #7579ff 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#b224ef",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#7579ff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #c1c161 0%, #c1c161 0%, #d4d4b1 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#c1c161",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#c1c161",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#d4d4b1",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to right, #ec77ab 0%, #7873f5 100%)"
        },
        "type": "linear",
        "direction": "90",
        "colors": [{
                "value": "#ec77ab",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#7873f5",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(to top, #007adf 0%, #00ecbc 100%)"
        },
        "type": "linear",
        "direction": "0",
        "colors": [{
                "value": "#007adf",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#00ecbc",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #20E2D7 0%, #F9FEA5 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#20E2D7",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#F9FEA5",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#2CD8D5",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#C5C1FF",
                "stop": "56",
                "status": "in"
      },
            {
                "value": "#FFBAC3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#2CD8D5",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#6B8DD6",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#8E37D7",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #DFFFCD 0%, #90F9C4 48%, #39F3BB 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#DFFFCD",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#90F9C4",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#39F3BB",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#5D9FFF",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#B8DCFF",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#6BBBFF",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #A8BFFF 0%, #884D80 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#A8BFFF",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#884D80",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #5271C4 0%, #B19FFF 48%, #ECA1FE 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#5271C4",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#B19FFF",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#ECA1FE",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#FFE29F",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#FFA99F",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#FF719A",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#22E1FF",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#1D8FE1",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#625EB1",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #B6CEE8 0%, #F578DC 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#B6CEE8",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#F578DC",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #FFFEFF 0%, #D7FFFE 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#FFFEFF",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#D7FFFE",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #E3FDF5 0%, #FFE6FA 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#E3FDF5",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#FFE6FA",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #7DE2FC 0%, #B9B6E5 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#7DE2FC",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#B9B6E5",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #CBBACC 0%, #2580B3 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#CBBACC",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#2580B3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #B7F8DB 0%, #50A7C2 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#B7F8DB",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#50A7C2",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #7085B6 0%, #87A7D9 50%, #DEF3F8 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#7085B6",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#87A7D9",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#DEF3F8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #77FFD2 0%, #6297DB 48%, #1EECFF 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#77FFD2",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#6297DB",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#1EECFF",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#AC32E4",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#7918F2",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#4801FF",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#D4FFEC",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#57F2CC",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#4596FB",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #9EFBD3 0%, #57E9F2 48%, #45D4FB 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#9EFBD3",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#57E9F2",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#45D4FB",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#473B7B",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#3584A7",
                "stop": "51",
                "status": "in"
      },
            {
                "value": "#30D2BE",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #65379B 0%, #886AEA 53%, #6457C6 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#65379B",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#886AEA",
                "stop": "53",
                "status": "in"
      },
            {
                "value": "#6457C6",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #A445B2 0%, #D41872 52%, #FF0066 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#A445B2",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#D41872",
                "stop": "52",
                "status": "in"
      },
            {
                "value": "#FF0066",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #7742B2 0%, #F180FF 52%, #FD8BD9 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#7742B2",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#F180FF",
                "stop": "52",
                "status": "in"
      },
            {
                "value": "#FD8BD9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#FF3CAC",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#562B7C",
                "stop": "52",
                "status": "in"
      },
            {
                "value": "#2B86C5",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #FF057C 0%, #8D0B93 50%, #321575 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#FF057C",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#8D0B93",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#321575",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#FF057C",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#7C64D5",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#4CC3FF",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#69EACB",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#EACCF8",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#6654F1",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#231557",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#44107A",
                "stop": "29",
                "status": "in"
      },
            {
                "value": "#FF1361",
                "stop": "67",
                "status": "in"
      },
            {
                "value": "#FFF800",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "style": {
            "background-image": "linear-gradient(135deg, #3D4E81 0%, #5753C9 48%, #6E7FF3 100%)"
        },
        "type": "linear",
        "direction": "135",
        "colors": [{
                "value": "#3D4E81",
                "stop": "0",
                "status": "in"
      },
            {
                "value": "#5753C9",
                "stop": "48",
                "status": "in"
      },
            {
                "value": "#6E7FF3",
                "stop": "100",
                "status": "in"
      }
    ]
  }
];
var uigradients = [
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#00416A 0%,#E4E5E6 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#00416A",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#E4E5E6",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#FFE000 0%,#799F0C 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#FFE000",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#799F0C",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#F7F8F8 0%,#ACBB78 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#F7F8F8",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ACBB78",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#00416A 0%,#799F0C 50%,#FFE000 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#00416A",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#799F0C",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#FFE000",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#334d50 0%,#cbcaa5 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#334d50",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#cbcaa5",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#0052D4 0%,#4364F7 50%,#6FB1FC 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#0052D4",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#4364F7",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#6FB1FC",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#5433FF 0%,#20BDFF 50%,#A5FECB 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#5433FF",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#20BDFF",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#A5FECB",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#799F0C 0%,#ACBB78 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#799F0C",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ACBB78",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#ffe259 0%,#ffa751 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#ffe259",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ffa751",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#00416A 0%,#E4E5E6 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#00416A",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#E4E5E6",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#FFE000 0%,#799F0C 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#FFE000",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#799F0C",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#acb6e5 0%,#86fde8 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#acb6e5",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#86fde8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#536976 0%,#292E49 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#536976",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#292E49",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#BBD2C5 0%,#536976 50%,#292E49 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#BBD2C5",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#536976",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#292E49",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#B79891 0%,#94716B 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#B79891",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#94716B",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#9796f0 0%,#fbc7d4 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#9796f0",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#fbc7d4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#BBD2C5 0%,#536976 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#BBD2C5",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#536976",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#076585 0%,#fff 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#076585",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#fff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#00467F 0%,#A5CC82 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#00467F",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#A5CC82",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#1488CC 0%,#2B32B2 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#1488CC",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2B32B2",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#ec008c 0%,#fc6767 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#ec008c",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#fc6767",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#cc2b5e 0%,#753a88 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#cc2b5e",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#753a88",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#2193b0 0%,#6dd5ed 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#2193b0",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#6dd5ed",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#e65c00 0%,#F9D423 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#e65c00",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F9D423",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#2b5876 0%,#4e4376 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#2b5876",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#4e4376",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#314755 0%,#26a0da 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#314755",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#26a0da",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#77A1D3 0%,#79CBCA 50%,#E684AE 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#77A1D3",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#79CBCA",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#E684AE",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#ff6e7f 0%,#bfe9ff 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#ff6e7f",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#bfe9ff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#e52d27 0%,#b31217 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#e52d27",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#b31217",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#603813 0%,#b29f94 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#603813",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#b29f94",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#16A085 0%,#F4D03F 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#16A085",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F4D03F",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#D31027 0%,#EA384D 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#D31027",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#EA384D",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#EDE574 0%,#E1F5C4 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#EDE574",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#E1F5C4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#02AAB0 0%,#00CDAC 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#02AAB0",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#00CDAC",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#DA22FF 0%,#9733EE 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#DA22FF",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#9733EE",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#348F50 0%,#56B4D3 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#348F50",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#56B4D3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#3CA55C 0%,#B5AC49 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#3CA55C",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#B5AC49",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#CC95C0 0%,#DBD4B4 50%,#7AA1D2 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#CC95C0",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#DBD4B4",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#7AA1D2",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#003973 0%,#E5E5BE 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#003973",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#E5E5BE",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#E55D87 0%,#5FC3E4 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#E55D87",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#5FC3E4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#403B4A 0%,#E7E9BB 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#403B4A",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#E7E9BB",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#F09819 0%,#EDDE5D 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#F09819",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#EDDE5D",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#FF512F 0%,#DD2476 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#FF512F",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#DD2476",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#AA076B 0%,#61045F 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#AA076B",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#61045F",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#1A2980 0%,#26D0CE 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#1A2980",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#26D0CE",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#FF512F 0%,#F09819 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#FF512F",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F09819",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#1D2B64 0%,#F8CDDA 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#1D2B64",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F8CDDA",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#1FA2FF 0%,#12D8FA 50%,#A6FFCB 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#1FA2FF",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#12D8FA",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#A6FFCB",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#4CB8C4 0%,#3CD3AD 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#4CB8C4",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#3CD3AD",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#DD5E89 0%,#F7BB97 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#DD5E89",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F7BB97",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#EB3349 0%,#F45C43 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#EB3349",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F45C43",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#1D976C 0%,#93F9B9 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#1D976C",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#93F9B9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#FF8008 0%,#FFC837 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#FF8008",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFC837",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#16222A 0%,#3A6073 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#16222A",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#3A6073",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#1F1C2C 0%,#928DAB 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#1F1C2C",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#928DAB",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#614385 0%,#516395 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#614385",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#516395",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#4776E6 0%,#8E54E9 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#4776E6",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#8E54E9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#085078 0%,#85D8CE 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#085078",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#85D8CE",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#2BC0E4 0%,#EAECC6 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#2BC0E4",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#EAECC6",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#134E5E 0%,#71B280 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#134E5E",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#71B280",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#5C258D 0%,#4389A2 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#5C258D",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#4389A2",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#757F9A 0%,#D7DDE8 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#757F9A",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#D7DDE8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#232526 0%,#414345 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#232526",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#414345",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#1CD8D2 0%,#93EDC7 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#1CD8D2",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#93EDC7",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#3D7EAA 0%,#FFE47A 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#3D7EAA",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFE47A",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#283048 0%,#859398 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#283048",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#859398",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#24C6DC 0%,#514A9D 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#24C6DC",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#514A9D",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#DC2424 0%,#4A569D 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#DC2424",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#4A569D",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#ED4264 0%,#FFEDBC 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#ED4264",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFEDBC",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#DAE2F8 0%,#D6A4A4 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#DAE2F8",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#D6A4A4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#ECE9E6 0%,#FFFFFF 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#ECE9E6",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFFFFF",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#7474BF 0%,#348AC7 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#7474BF",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#348AC7",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#EC6F66 0%,#F3A183 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#EC6F66",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F3A183",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#5f2c82 0%,#49a09d 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#5f2c82",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#49a09d",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#C04848 0%,#480048 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#C04848",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#480048",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#e43a15 0%,#e65245 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#e43a15",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#e65245",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#414d0b 0%,#727a17 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#414d0b",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#727a17",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#FC354C 0%,#0ABFBC 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#FC354C",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#0ABFBC",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#4b6cb7 0%,#182848 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#4b6cb7",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#182848",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#f857a6 0%,#ff5858 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#f857a6",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ff5858",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#a73737 0%,#7a2828 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#a73737",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#7a2828",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#d53369 0%,#cbad6d 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#d53369",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#cbad6d",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#e9d362 0%,#333333 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#e9d362",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#333333",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#DE6262 0%,#FFB88C 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#DE6262",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFB88C",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#666600 0%,#999966 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#666600",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#999966",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#FFEEEE 0%,#DDEFBB 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#FFEEEE",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#DDEFBB",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#EFEFBB 0%,#D4D3DD 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#EFEFBB",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#D4D3DD",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#c21500 0%,#ffc500 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#c21500",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ffc500",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#215f00 0%,#e4e4d9 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#215f00",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#e4e4d9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#50C9C3 0%,#96DEDA 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#50C9C3",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#96DEDA",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#616161 0%,#9bc5c3 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#616161",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#9bc5c3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#ddd6f3 0%,#faaca8 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#ddd6f3",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#faaca8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#5D4157 0%,#A8CABA 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#5D4157",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#A8CABA",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#E6DADA 0%,#274046 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#E6DADA",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#274046",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#f2709c 0%,#ff9472 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#f2709c",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ff9472",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#DAD299 0%,#B0DAB9 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#DAD299",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#B0DAB9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#D3959B 0%,#BFE6BA 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#D3959B",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#BFE6BA",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#00d2ff 0%,#3a7bd5 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#00d2ff",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#3a7bd5",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#870000 0%,#190A05 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#870000",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#190A05",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#B993D6 0%,#8CA6DB 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#B993D6",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#8CA6DB",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#649173 0%,#DBD5A4 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#649173",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#DBD5A4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#C9FFBF 0%,#FFAFBD 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#C9FFBF",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFAFBD",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#606c88 0%,#3f4c6b 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#606c88",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#3f4c6b",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#FBD3E9 0%,#BB377D 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#FBD3E9",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#BB377D",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#ADD100 0%,#7B920A 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#ADD100",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#7B920A",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#FF4E50 0%,#F9D423 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#FF4E50",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F9D423",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#F0C27B 0%,#4B1248 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#F0C27B",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#4B1248",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#000000 0%,#e74c3c 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#000000",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#e74c3c",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#AAFFA9 0%,#11FFBD 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#AAFFA9",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#11FFBD",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#B3FFAB 0%,#12FFF7 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#B3FFAB",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#12FFF7",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#780206 0%,#061161 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#780206",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#061161",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#9D50BB 0%,#6E48AA 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#9D50BB",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#6E48AA",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#556270 0%,#FF6B6B 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#556270",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FF6B6B",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#70e1f5 0%,#ffd194 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#70e1f5",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ffd194",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#00c6ff 0%,#0072ff 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#00c6ff",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#0072ff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#fe8c00 0%,#f83600 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#fe8c00",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#f83600",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#52c234 0%,#061700 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#52c234",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#061700",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#485563 0%,#29323c 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#485563",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#29323c",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#83a4d4 0%,#b6fbff 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#83a4d4",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#b6fbff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#FDFC47 0%,#24FE41 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#FDFC47",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#24FE41",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#abbaab 0%,#ffffff 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#abbaab",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ffffff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#73C8A9 0%,#373B44 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#73C8A9",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#373B44",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#D38312 0%,#A83279 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#D38312",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#A83279",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#1e130c 0%,#9a8478 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#1e130c",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#9a8478",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#948E99 0%,#2E1437 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#948E99",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2E1437",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#360033 0%,#0b8793 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#360033",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#0b8793",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#FFA17F 0%,#00223E 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#FFA17F",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#00223E",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#43cea2 0%,#185a9d 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#43cea2",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#185a9d",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#ffb347 0%,#ffcc33 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#ffb347",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ffcc33",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#6441A5 0%,#2a0845 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#6441A5",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2a0845",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#FEAC5E 0%,#C779D0 50%,#4BC0C8 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#FEAC5E",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#C779D0",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#4BC0C8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#833ab4 0%,#fd1d1d 50%,#fcb045 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#833ab4",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#fd1d1d",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#fcb045",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#ff0084 0%,#33001b 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#ff0084",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#33001b",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#00bf8f 0%,#001510 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#00bf8f",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#001510",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#136a8a 0%,#267871 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#136a8a",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#267871",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#8e9eab 0%,#eef2f3 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#8e9eab",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#eef2f3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#7b4397 0%,#dc2430 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#7b4397",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#dc2430",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#D1913C 0%,#FFD194 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#D1913C",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFD194",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#F1F2B5 0%,#135058 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#F1F2B5",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#135058",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#6A9113 0%,#141517 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#6A9113",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#141517",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#004FF9 0%,#FFF94C 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#004FF9",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFF94C",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#525252 0%,#3d72b4 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#525252",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#3d72b4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#BA8B02 0%,#181818 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#BA8B02",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#181818",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#ee9ca7 0%,#ffdde1 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#ee9ca7",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ffdde1",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#304352 0%,#d7d2cc 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#304352",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#d7d2cc",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#CCCCB2 0%,#757519 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#CCCCB2",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#757519",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#2c3e50 0%,#3498db 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#2c3e50",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#3498db",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#fc00ff 0%,#00dbde 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#fc00ff",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#00dbde",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#e53935 0%,#e35d5b 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#e53935",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#e35d5b",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#005C97 0%,#363795 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#005C97",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#363795",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#f46b45 0%,#eea849 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#f46b45",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#eea849",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#00C9FF 0%,#92FE9D 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#00C9FF",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#92FE9D",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#673AB7 0%,#512DA8 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#673AB7",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#512DA8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#76b852 0%,#8DC26F 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#76b852",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#8DC26F",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#8E0E00 0%,#1F1C18 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#8E0E00",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#1F1C18",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#FFB75E 0%,#ED8F03 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#FFB75E",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ED8F03",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#c2e59c 0%,#64b3f4 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#c2e59c",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#64b3f4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#403A3E 0%,#BE5869 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#403A3E",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#BE5869",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#C02425 0%,#F0CB35 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#C02425",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F0CB35",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#B24592 0%,#F15F79 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#B24592",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F15F79",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#457fca 0%,#5691c8 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#457fca",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#5691c8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#6a3093 0%,#a044ff 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#6a3093",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#a044ff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#eacda3 0%,#d6ae7b 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#eacda3",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#d6ae7b",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#fd746c 0%,#ff9068 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#fd746c",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ff9068",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#114357 0%,#F29492 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#114357",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F29492",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#1e3c72 0%,#2a5298 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#1e3c72",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2a5298",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#2F7336 0%,#AA3A38 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#2F7336",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#AA3A38",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#5614B0 0%,#DBD65C 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#5614B0",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#DBD65C",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#4DA0B0 0%,#D39D38 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#4DA0B0",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#D39D38",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#5A3F37 0%,#2C7744 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#5A3F37",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2C7744",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#2980b9 0%,#2c3e50 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#2980b9",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2c3e50",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#0099F7 0%,#F11712 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#0099F7",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F11712",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#834d9b 0%,#d04ed6 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#834d9b",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#d04ed6",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#4B79A1 0%,#283E51 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#4B79A1",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#283E51",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#000000 0%,#434343 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#000000",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#434343",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#4CA1AF 0%,#C4E0E5 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#4CA1AF",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#C4E0E5",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#E0EAFC 0%,#CFDEF3 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#E0EAFC",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#CFDEF3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#BA5370 0%,#F4E2D8 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#BA5370",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F4E2D8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#ff4b1f 0%,#1fddff 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#ff4b1f",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#1fddff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#f7ff00 0%,#db36a4 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#f7ff00",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#db36a4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#a80077 0%,#66ff00 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#a80077",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#66ff00",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#1D4350 0%,#A43931 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#1D4350",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#A43931",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#EECDA3 0%,#EF629F 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#EECDA3",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#EF629F",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#16BFFD 0%,#CB3066 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#16BFFD",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#CB3066",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#ff4b1f 0%,#ff9068 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#ff4b1f",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ff9068",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#FF5F6D 0%,#FFC371 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#FF5F6D",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFC371",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#2196f3 0%,#f44336 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#2196f3",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#f44336",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#00d2ff 0%,#928DAB 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#00d2ff",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#928DAB",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#3a7bd5 0%,#3a6073 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#3a7bd5",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#3a6073",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#0B486B 0%,#F56217 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#0B486B",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F56217",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#e96443 0%,#904e95 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#e96443",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#904e95",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#2C3E50 0%,#4CA1AF 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#2C3E50",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#4CA1AF",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#2C3E50 0%,#FD746C 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#2C3E50",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FD746C",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#F00000 0%,#DC281E 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#F00000",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#DC281E",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#141E30 0%,#243B55 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#141E30",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#243B55",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#42275a 0%,#734b6d 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#42275a",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#734b6d",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#000428 0%,#004e92 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#000428",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#004e92",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#56ab2f 0%,#a8e063 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#56ab2f",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#a8e063",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#cb2d3e 0%,#ef473a 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#cb2d3e",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ef473a",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#f79d00 0%,#64f38c 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#f79d00",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#64f38c",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#f85032 0%,#e73827 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#f85032",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#e73827",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#fceabb 0%,#f8b500 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#fceabb",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#f8b500",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#808080 0%,#3fada8 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#808080",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#3fada8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#ffd89b 0%,#19547b 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#ffd89b",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#19547b",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#bdc3c7 0%,#2c3e50 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#bdc3c7",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2c3e50",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#BE93C5 0%,#7BC6CC 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#BE93C5",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#7BC6CC",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#A1FFCE 0%,#FAFFD1 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#A1FFCE",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FAFFD1",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#4ECDC4 0%,#556270 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#4ECDC4",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#556270",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#3a6186 0%,#89253e 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#3a6186",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#89253e",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#ef32d9 0%,#89fffd 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#ef32d9",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#89fffd",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#de6161 0%,#2657eb 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#de6161",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2657eb",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#ff00cc 0%,#333399 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#ff00cc",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#333399",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#fffc00 0%,#ffffff 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#fffc00",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ffffff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#ff7e5f 0%,#feb47b 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#ff7e5f",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#feb47b",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#00c3ff 0%,#ffff1c 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#00c3ff",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ffff1c",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#f4c4f3 0%,#fc67fa 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#f4c4f3",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#fc67fa",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#41295a 0%,#2F0743 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#41295a",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2F0743",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#A770EF 0%,#CF8BF3 50%,#FDB99B 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#A770EF",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#CF8BF3",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#FDB99B",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#ee0979 0%,#ff6a00 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#ee0979",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ff6a00",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#F3904F 0%,#3B4371 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#F3904F",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#3B4371",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#67B26F 0%,#4ca2cd 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#67B26F",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#4ca2cd",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#3494E6 0%,#EC6EAD 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#3494E6",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#EC6EAD",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#DBE6F6 0%,#C5796D 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#DBE6F6",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#C5796D",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#9CECFB 0%,#65C7F7 50%,#0052D4 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#9CECFB",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#65C7F7",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#0052D4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#c0c0aa 0%,#1cefff 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#c0c0aa",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#1cefff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#DCE35B 0%,#45B649 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#DCE35B",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#45B649",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#E8CBC0 0%,#636FA4 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#E8CBC0",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#636FA4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#F0F2F0 0%,#000C40 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#F0F2F0",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#000C40",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#FFAFBD 0%,#ffc3a0 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#FFAFBD",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ffc3a0",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#43C6AC 0%,#F8FFAE 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#43C6AC",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F8FFAE",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#093028 0%,#237A57 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#093028",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#237A57",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#43C6AC 0%,#191654 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#43C6AC",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#191654",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#4568DC 0%,#B06AB3 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#4568DC",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#B06AB3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#0575E6 0%,#021B79 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#0575E6",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#021B79",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#200122 0%,#6f0000 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#200122",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#6f0000",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#44A08D 0%,#093637 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#44A08D",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#093637",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#6190E8 0%,#A7BFE8 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#6190E8",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#A7BFE8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#34e89e 0%,#0f3443 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#34e89e",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#0f3443",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#F7971E 0%,#FFD200 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#F7971E",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFD200",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#C33764 0%,#1D2671 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#C33764",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#1D2671",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#20002c 0%,#cbb4d4 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#20002c",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#cbb4d4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#D66D75 0%,#E29587 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#D66D75",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#E29587",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#30E8BF 0%,#FF8235 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#30E8BF",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FF8235",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#B2FEFA 0%,#0ED2F7 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#B2FEFA",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#0ED2F7",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#4AC29A 0%,#BDFFF3 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#4AC29A",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#BDFFF3",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#E44D26 0%,#F16529 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#E44D26",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F16529",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#EB5757 0%,#000000 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#EB5757",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#000000",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#F2994A 0%,#F2C94C 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#F2994A",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F2C94C",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#56CCF2 0%,#2F80ED 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#56CCF2",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2F80ED",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#007991 0%,#78ffd6 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#007991",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#78ffd6",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#000046 0%,#1CB5E0 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#000046",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#1CB5E0",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#159957 0%,#155799 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#159957",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#155799",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#c0392b 0%,#8e44ad 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#c0392b",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#8e44ad",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#EF3B36 0%,#FFFFFF 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#EF3B36",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFFFFF",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#283c86 0%,#45a247 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#283c86",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#45a247",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#3A1C71 0%,#D76D77 50%,#FFAF7B 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#3A1C71",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#D76D77",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#FFAF7B",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#CB356B 0%,#BD3F32 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#CB356B",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#BD3F32",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#36D1DC 0%,#5B86E5 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#36D1DC",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#5B86E5",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#000000 0%,#0f9b0f 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#000000",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#0f9b0f",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#1c92d2 0%,#f2fcfe 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#1c92d2",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#f2fcfe",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#642B73 0%,#C6426E 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#642B73",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#C6426E",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#06beb6 0%,#48b1bf 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#06beb6",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#48b1bf",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#0cebeb 0%,#20e3b2 50%,#29ffc6 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#0cebeb",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#20e3b2",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#29ffc6",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#d9a7c7 0%,#fffcdc 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#d9a7c7",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#fffcdc",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#396afc 0%,#2948ff 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#396afc",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2948ff",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#C9D6FF 0%,#E2E2E2 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#C9D6FF",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#E2E2E2",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#7F00FF 0%,#E100FF 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#7F00FF",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#E100FF",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#ff9966 0%,#ff5e62 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#ff9966",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ff5e62",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#22c1c3 0%,#fdbb2d 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#22c1c3",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#fdbb2d",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#1a2a6c 0%,#b21f1f 50%,#fdbb2d 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#1a2a6c",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#b21f1f",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#fdbb2d",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#e1eec3 0%,#f05053 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#e1eec3",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#f05053",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#ADA996 0%,#F2F2F2 100%,#DBDBDB 100%,#EAEAEA 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#ADA996",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F2F2F2",
                "stop": "100",
                "status": "in"
      },
            {
                "value": "#DBDBDB",
                "stop": "100",
                "status": "in"
      },
            {
                "value": "#EAEAEA",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#667db6 0%,#0082c8 100%,#0082c8 100%,#667db6 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#667db6",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#0082c8",
                "stop": "100",
                "status": "in"
      },
            {
                "value": "#0082c8",
                "stop": "100",
                "status": "in"
      },
            {
                "value": "#667db6",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#03001e 0%,#7303c0 100%,#ec38bc 100%,#fdeff9 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#03001e",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#7303c0",
                "stop": "100",
                "status": "in"
      },
            {
                "value": "#ec38bc",
                "stop": "100",
                "status": "in"
      },
            {
                "value": "#fdeff9",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#6D6027 0%,#D3CBB8 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#6D6027",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#D3CBB8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#74ebd5 0%,#ACB6E5 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#74ebd5",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ACB6E5",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#fc4a1a 0%,#f7b733 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#fc4a1a",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#f7b733",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#00F260 0%,#0575E6 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#00F260",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#0575E6",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#800080 0%,#ffc0cb 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#800080",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ffc0cb",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#CAC531 0%,#F3F9A7 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#CAC531",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F3F9A7",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#3C3B3F 0%,#605C3C 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#3C3B3F",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#605C3C",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#D3CCE3 0%,#E9E4F0 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#D3CCE3",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#E9E4F0",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#00b09b 0%,#96c93d 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#00b09b",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#96c93d",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#0f0c29 0%,#302b63 50%,#24243e 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#0f0c29",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#302b63",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#24243e",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#fffbd5 0%,#b20a2c 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#fffbd5",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#b20a2c",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#23074d 0%,#cc5333 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#23074d",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#cc5333",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#c94b4b 0%,#4b134f 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#c94b4b",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#4b134f",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#FC466B 0%,#3F5EFB 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#FC466B",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#3F5EFB",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#FC5C7D 0%,#6A82FB 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#FC5C7D",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#6A82FB",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#108dc7 0%,#ef8e38 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#108dc7",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ef8e38",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#11998e 0%,#38ef7d 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#11998e",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#38ef7d",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#3E5151 0%,#DECBA4 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#3E5151",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#DECBA4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#40E0D0 0%,#FF8C00 50%,#FF0080 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#40E0D0",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FF8C00",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#FF0080",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#bc4e9c 0%,#f80759 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#bc4e9c",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#f80759",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#355C7D 0%,#6C5B7B 50%,#C06C84 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#355C7D",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#6C5B7B",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#C06C84",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#4e54c8 0%,#8f94fb 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#4e54c8",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#8f94fb",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#333333 0%,#dd1818 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#333333",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#dd1818",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#a8c0ff 0%,#3f2b96 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#a8c0ff",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#3f2b96",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#ad5389 0%,#3c1053 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#ad5389",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#3c1053",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#636363 0%,#a2ab58 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#636363",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#a2ab58",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#DA4453 0%,#89216B 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#DA4453",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#89216B",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#005AA7 0%,#FFFDE4 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#005AA7",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFFDE4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#59C173 0%,#a17fe0 50%,#5D26C1 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#59C173",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#a17fe0",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#5D26C1",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#FFEFBA 0%,#FFFFFF 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#FFEFBA",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFFFFF",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#00B4DB 0%,#0083B0 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#00B4DB",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#0083B0",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#FDC830 0%,#F37335 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#FDC830",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#F37335",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#ED213A 0%,#93291E 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#ED213A",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#93291E",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#1E9600 0%,#FFF200 50%,#FF0000 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#1E9600",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FFF200",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#FF0000",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#a8ff78 0%,#78ffd6 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#a8ff78",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#78ffd6",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#8A2387 0%,#E94057 50%,#F27121 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#8A2387",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#E94057",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#F27121",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#FF416C 0%,#FF4B2B 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#FF416C",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FF4B2B",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#654ea3 0%,#eaafc8 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#654ea3",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#eaafc8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#009FFF 0%,#ec2F4B 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#009FFF",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ec2F4B",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#544a7d 0%,#ffd452 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#544a7d",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ffd452",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#8360c3 0%,#2ebf91 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#8360c3",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2ebf91",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#dd3e54 0%,#6be585 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#dd3e54",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#6be585",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#659999 0%,#f4791f 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#659999",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#f4791f",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#f12711 0%,#f5af19 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#f12711",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#f5af19",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#c31432 0%,#240b36 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#c31432",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#240b36",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#7F7FD5 0%,#86A8E7 50%,#91EAE4 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#7F7FD5",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#86A8E7",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#91EAE4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#f953c6 0%,#b91d73 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#f953c6",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#b91d73",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#1f4037 0%,#99f2c8 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#1f4037",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#99f2c8",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#8E2DE2 0%,#4A00E0 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#8E2DE2",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#4A00E0",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#aa4b6b 0%,#6b6b83 50%,#3b8d99 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#aa4b6b",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#6b6b83",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#3b8d99",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(90deg,#FF0099 0%,#493240 100%)"
        },
        "direction": 90,
        "colors": [
            {
                "value": "#FF0099",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#493240",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#2980B9 0%,#6DD5FA 50%,#FFFFFF 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#2980B9",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#6DD5FA",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#FFFFFF",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#373B44 0%,#4286f4 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#373B44",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#4286f4",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#b92b27 0%,#1565C0 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#b92b27",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#1565C0",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#12c2e9",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#c471ed",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#f64f59",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#0F2027 0%,#203A43 50%,#2C5364 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#0F2027",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#203A43",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#2C5364",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(0deg,#C6FFDD 0%,#FBD786 50%,#f7797d 100%)"
        },
        "direction": 0,
        "colors": [
            {
                "value": "#C6FFDD",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#FBD786",
                "stop": "50",
                "status": "in"
      },
            {
                "value": "#f7797d",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#2193b0 0%,#6dd5ed 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#2193b0",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#6dd5ed",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(180deg,#ee9ca7 0%,#ffdde1 100%)"
        },
        "direction": 180,
        "colors": [
            {
                "value": "#ee9ca7",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#ffdde1",
                "stop": "100",
                "status": "in"
      }
    ]
  },
    {
        "type": "linear",
        "style": {
            "background-image": "linear-gradient(270deg,#bdc3c7 0%,#2c3e50 100%)"
        },
        "direction": 270,
        "colors": [
            {
                "value": "#bdc3c7",
                "stop": 0,
                "status": "in"
      },
            {
                "value": "#2c3e50",
                "stop": "100",
                "status": "in"
      }
    ]
  }
];
var presets = webgradients.concat(uigradients);



/* The circular slider has animation that is slow and cant be disabled through the provided options. This method will override the animating method and display the results instantly (withouth animations)
Solution reference: https://stackoverflow.com/questions/43116647/overriding-a-component-method/43121345 (For APPS)
https://jsfiddle.net/wffranco/1zec7xL3/ (For browsers)
Source reference: https://github.com/devstark-com/vue-circle-slider/blob/master/src/components/CircleSlider.vue#L285
*/
const Base = Vue.options.components["circle-slider"];
const circularControl = Base.extend({
  methods: {
    animateSlider(startAngle, endAngle) {
      this.updateAngle(endAngle);
    }
  }
});

var inputHabdle = {
  methods: {
    getEventData: function(event) {

      var min = parseInt(event.currentTarget.min);
      var max = parseInt(event.currentTarget.max);
      var currentValue = parseInt(event.currentTarget.value);

      return {
        min: min,
        max: max,
        value: currentValue
      };
    },
    increaseValue: function(event) {
      var data = this.getEventData(event);
      var currentValue = data.value;

      if (currentValue < data.max)
        this.setValue(currentValue + 1);
      else if (currentValue == data.max)
        this.setValue(data.min);
    },

    decreaseValue: function(event) {
      var data = this.getEventData(event);
      var currentValue = data.value;

      if (currentValue > data.min)
        this.setValue(currentValue - 1);
      else if (currentValue == data.min)
        this.setValue(data.max);
    },
    parseDigits: function(event) {
      // Make sure number does not exceed max or go below min
      var data = this.getEventData(event);

      // First remove all non-digits chars
      data.value = parseInt(data.value.toString());
      //.replace(/\D/g,'')


      // Check number bounderis
      if (data.value > data.max)
        data.value = data.max;

      if (data.value < data.min)
        data.value = data.min;


      this.setValue(data.value);
    }
  }
}
//extending circle slider
var slider = {
  extends: VueCircleSlider.CircleSlider,
  methods: {
    animateSlider(startAngle, endAngle) {
      this.updateAngle(endAngle);
    }
  }
};

Vue.component('circular-control', {
  mixins: [inputHabdle],
  template: "#circular-control",
  props: ['direction'],
  components: {
    "circle-slider": slider
  },

  methods: {
    setValue: function(value) {
      this.direction.amount = value;
    },
    handleCircleValue: function(e) {
      var max = 360;
      var current = this.direction.amount;

      // Scrolling up
      if (e.deltaY < 0) {
        if (current < max)
          this.direction.amount = current + 1;
        else
          this.direction.amount = 0;
      }
      // Scrolling down
      if (e.deltaY > 0) {
        if (current > 0)
          this.direction.amount = current - 1;
        else
          this.direction.amount = 360;
      }
    }
  }
});

Vue.component('social-networks', {
  template: "#social-networks",
	props: ["show"],
  data() {
    return {
      popupa: null
    }
  },
  methods: {
    openPopup: function(link) {
      this.popup.window = window.open(
        link,
        'sharer',
        'status=no,height=' + this.popup.height +
        ',width=' + this.popup.width +
        ',resizable=no,left=' + this.popup.left +
        ',top=' + this.popup.top +
        ',screenX=' + this.popup.left +
        ',screenY=' + this.popup.top + ',toolbar=no,menubar=no,scrollbars=no,location=no,directories=no'
      );
    }
  },
  computed: {
    popup: function() {
      var popup = {};
      popup.height = 500;
      popup.width = 500;

      popup.top = window.outerHeight / 2 + window.screenY - (popup.height / 2)
      popup.left = window.outerWidth / 2 + window.screenX - (popup.width / 2)
 
      popup.window = null;
      return popup;
    },
    networks: function() {
      var url = 'https://codepen.io/khr2003/full/RENwGK';
      var title = 'Kalimah Gradient Generator';
      var desc = 'A user friendly, ease to use and comprehensive gradient generator.';
			var text = desc;
			var email_text = 'Hi, \r\n Check this awesome gradient maker ' +url;
			var provider ='';
			
			// Twitter and tumblr
			var hash_tags = 'gradient_generator';
			var user_id = '';
			
      var networkArray = [{

          link: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
          icon: "socicon-facebook",
          type: "popup",
					color: "#3b5999"
        },
        {
          link: `https://plus.google.com/share?url=${url}`,
          icon: "socicon-googleplus",
          type: "popup",
					color: "#dd4b39"
        },
        {
          link: `https://reddit.com/submit?url=${url}&title=${title}`,
          icon: "socicon-reddit",
          type: "popup",
					color: "#ff5700"
        },
        {
          link: `https://twitter.com/intent/tweet?url=${url}&text=${title}&hashtags=${hash_tags}
`,
          icon: "socicon-twitter",
          type: "popup",
					color: "#55acee"
        },
        {
          link: `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}&summary=${text}&source=${provider}`,
          icon: "socicon-linkedin",
          type: "popup",
					color: "#0077B5"
        },
        {
          link: `http://pinterest.com/pin/create/link/?url=${url}`,
          icon: "socicon-pinterest",
          type: "popup",
					color: "#bd081c"
        },
        {
          link: `https://www.tumblr.com/widgets/share/tool?canonicalUrl=${url}&title=${title}&caption=${text}&tags=${hash_tags}`,
          icon: "socicon-tumblr",
          type: "popup",
					color: "#34465d"
        },
        {
          link: `https://www.blogger.com/blog-this.g?u=${url}&n=${title}&t=${text}`,
          icon: "socicon-blogger",
          type: "popup",
					color: "#f57d00"
        },
        {
          link: `https://mail.google.com/mail/?view=cm&to=&su=${title}&body=${email_text}`,
          icon: "socicon-mail",
          type: "popup",
					color: "#c71610"
        },
        {
          link: `mailto:?subject=${title}&body=${text}`,
          icon: "socicon-mailru",
          type: "popup",
					color: "#21759b"
        }
      ];

      return networkArray;
    }
  }
});

Vue.component('range', {
  template: "#range",
  props: ['rangedata'],

  methods: {
    handleScroll: function(e) {
      var max = this.rangedata.max;
      var current = parseFloat(this.rangedata.amount);
      var step = parseFloat(this.rangedata.step);
      // Scrolling up
      if (e.deltaY < 0) {
        if (current < max)
          this.rangedata.amount = current + step;

        this.$emit('update');
      }
      // Scrolling down
      if (e.deltaY > 0) {
        if (current > 0)
          this.rangedata.amount = current - step;
        this.$emit('update');
      }
    }
  }
});

Vue.component('no-ie', {
  template: "#no-ie",
  data() {
    return {
      showIENotification: false
    }
  },
  methods: {
    // https://unpkg.com/detect-browser
    detectBrowser: function(e) {
      var browsers = this.getBrowserRules();
      var userAgentString = navigator.userAgent;

      if (!userAgentString) {
        return null;
      }

      var detected = browsers.map(function(browser) {
        var match = browser.rule.exec(userAgentString);
        var version = match && match[1].split(/[._]/).slice(0, 3);

        if (version && version.length < 3) {
          version = version.concat(version.length == 1 ? [0, 0] : [0]);
        }

        return match && {
          name: browser.name,
          version: version.join('.')
        };
      }).filter(Boolean)[0] || null;


      if (/alexa|bot|crawl(er|ing)|facebookexternalhit|feedburner|google web preview|nagios|postrank|pingdom|slurp|spider|yahoo!|yandex/i.test(userAgentString)) {
        detected = detected || {};
        detected.bot = true;
      }

      return detected;
    },
    getBrowserRules: function() {
      return this.buildRules([
        ['aol', /AOLShield\/([0-9\._]+)/],
        ['edge', /Edge\/([0-9\._]+)/],
        ['yandexbrowser', /YaBrowser\/([0-9\._]+)/],
        ['vivaldi', /Vivaldi\/([0-9\.]+)/],
        ['kakaotalk', /KAKAOTALK\s([0-9\.]+)/],
        ['samsung', /SamsungBrowser\/([0-9\.]+)/],
        ['chrome', /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9\.]+)(:?\s|$)/],
        ['phantomjs', /PhantomJS\/([0-9\.]+)(:?\s|$)/],
        ['crios', /CriOS\/([0-9\.]+)(:?\s|$)/],
        ['firefox', /Firefox\/([0-9\.]+)(?:\s|$)/],
        ['fxios', /FxiOS\/([0-9\.]+)/],
        ['opera', /Opera\/([0-9\.]+)(?:\s|$)/],
        ['opera', /OPR\/([0-9\.]+)(:?\s|$)$/],
        ['ie', /Trident\/7\.0.*rv\:([0-9\.]+).*\).*Gecko$/],
        ['ie', /MSIE\s([0-9\.]+);.*Trident\/[4-7].0/],
        ['ie', /MSIE\s(7\.0)/],
        ['bb10', /BB10;\sTouch.*Version\/([0-9\.]+)/],
        ['android', /Android\s([0-9\.]+)/],
        ['ios', /Version\/([0-9\._]+).*Mobile.*Safari.*/],
        ['safari', /Version\/([0-9\._]+).*Safari/],
        ['facebook', /FBAV\/([0-9\.]+)/],
        ['instagram', /Instagram\s([0-9\.]+)/],
        ['ios-webview', /AppleWebKit\/([0-9\.]+).*Mobile/]
      ]);
    },
    buildRules: function(ruleTuples) {
      return ruleTuples.map(function(tuple) {
        return {
          name: tuple[0],
          rule: tuple[1]
        };
      });
    },
    clearNotification: function() {

      /* Clear IE notification for one week*/
      this.showIENotification = false;

      var week = 60 * 60 * 24 * 7 * 1000;
      var time_now = (new Date()).getTime() + week;
      localStorage.setItem('ie-notification', time_now);
    }

  },
  mounted() {

    /*
    On mount check if we need to show IE notifcation. IF so, show it, otherwise wait intul one week has passed
    */
    var last_cleared = parseInt(localStorage.getItem('ie-notification')) || 0;
    var time_now = (new Date()).getTime();
    var week = 1000 * 60 * 60 * 24;

    // .getTime() returns milliseconds so 1000 * 60 * 60 * 24 = 24 days
    if ((time_now - last_cleared) > week) {

      var detect = this.detectBrowser();
      if (detect.name == "ie" || detect.name == "edge")
        this.showIENotification = true;

      localStorage.setItem('ie-notification', 0);
    }
  }
});

Vue.component('info-box', {
  template: "#info-box-template",
  computed: {
    showInfo: function() {
      return this.$parent.showInfo;
    }
  },
  methods: {
    hideInfo: function() {
      this.$parent.showInfo = false;
    }
  }
});

Vue.component('user-presets', {
  template: "#user-presets",
  data() {
    return {
      userPresets: [],
      selectedPreset: -1
    }
  },
  computed: {
    enableClass: function() {
      var apply = true;
      var selected = this.userPresets[this.selectedPreset];
      if (typeof selected == "undefined")
        apply = false;
      else
        apply = (selected.style == "") ? false : true;


      return {
        'enable-save': this.selectedPreset != -1,
        'enable-apply': apply
      }
    }
  },
  methods: {

    savePreset: function() {
      if (typeof this.userPresets[this.selectedPreset] == "undefined")
        return;

      var parent = this.$parent;
      var gradients = this.$parent.gradients;
      var style = this.$parent.style;

      var gradientString = this.$parent.cloneObj(gradients);
      var styleString = this.$parent.cloneObj(style);
      var save = {
        gradient: gradientString,
        style: styleString
      };

      this.userPresets[this.selectedPreset].style = styleString;
      localStorage.setItem("gradient-preset-" + this.selectedPreset, JSON.stringify(save));

    },
    applyPreset: function() {
      var selected = this.userPresets[this.selectedPreset];

      // Check if the preset has any data saved
      if (typeof selected == "undefined" || !this.userPresets[this.selectedPreset].hasOwnProperty("style") || this.userPresets[this.selectedPreset].style == "")
        return;

      // Apply the preset
      var gradientStack = localStorage.getItem("gradient-preset-" + this.selectedPreset);
      var parse = JSON.parse(gradientStack);
      this.$parent.gradients = parse.gradient;

      // Set gradient so colors can be displayed
      this.$parent.setGradient(0);
    },
    deselectPreset: function() {
      this.selectedPreset = -1;
    }
  },
  mounted() {
    for (i = 0; i <= 2; i++) {
      var gradientLocal = localStorage.getItem("gradient-preset-" + i);

      if (gradientLocal == null) {
        gradientLocal = {
          'style': "",
          preset: {}
        };
        localStorage.setItem("gradient-preset-" + i, JSON.stringify(gradientLocal));

      } else {
        gradientLocal = JSON.parse(gradientLocal);
      }

      this.userPresets.push(gradientLocal);
    }
  },
  directives: {
    //https://jsfiddle.net/Linusborg/Lx49LaL8/
    'click-outside': {
      bind: function(el, binding, vNode) {
        // Provided expression must evaluate to a function.
        if (typeof binding.value !== 'function') {
          const compName = vNode.context.name
          let warn = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`
          if (compName) {
            warn += `Found in component '${compName}'`
          }

          console.warn(warn);
        }
        // Define Handler and cache it on the element
        const bubble = binding.modifiers.bubble
        const handler = (e) => {
          if (bubble || (!el.contains(e.target) && el !== e.target)) {
            binding.value(e)
          }
        }
        el.__vueClickOutside__ = handler

        // add Event Listeners
        document.addEventListener('click', handler)
      },

      unbind: function(el, binding) {
        // Remove Event Listeners
        document.removeEventListener('click', el.__vueClickOutside__)
        el.__vueClickOutside__ = null

      }
    }
  }
});

Vue.component('options-container', {
  template: "#options-container",
  props: ['options'],
  data() {
    return {
      typeIcons: ["data:image/svg+xml;base64," + btoa('<svg  xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><rect x="20" y="15" width="60" height="70" fill="transparent" stroke-width="8" stroke="#fff"/><line x1="20" y1="50" x2="80" y2="50" stroke="#fff" stroke-width="8"/></svg>'), "data:image/svg+xml;base64," + btoa('<svg  xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="#fff" stroke-width="8" fill="transparent"/> <circle cx="50" cy="50" r="25" stroke="#fff" stroke-width="6.5" fill="transparent" /></svg>')],
      repeatIcon: "data:image/svg+xml;base64," + btoa('<svg  fill="#fff" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><path d="M79.5,17.1c-2.2,0-4,1.8-4,4v8.5C69.2,22.3,59.9,17.9,50,17.9c-18.5,0-33.5,15-33.5,33.5s15,33.5,33.5,33.5  c12,0,23.2-6.5,29.1-17c1.1-1.9,0.4-4.4-1.5-5.5c-1.9-1.1-4.4-0.4-5.5,1.5c-4.5,8-13,12.9-22.2,12.9c-14.1,0-25.5-11.4-25.5-25.5  S35.9,25.9,50,25.9c7.6,0,14.7,3.4,19.5,9.1h-7.9c-2.2,0-4,1.8-4,4s1.8,4,4,4h17.9c2.2,0,4-1.8,4-4V21.1  C83.5,18.9,81.7,17.1,79.5,17.1z"></path></svg>'),
      shapeIcons: ["data:image/svg+xml;base64," + btoa('<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke-width="0" fill="#fff" /></svg>'), "data:image/svg+xml;base64," + btoa('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><ellipse cx="50" cy="50" rx="40" ry="25" fill="#fff" /></svg>')]
    }
  }
});

Vue.component('colors', {
  template: "#colors",
  props: ['color', 'length']
});

Vue.component('color-stop', {
  mixins: [inputHabdle],
  template: "#color-stop",
  props: ['color', 'index'],
  methods: {
    setValue: function(value) {
      this.color.stop = value;
    },

    dragStart(index) {
      this.dragging = true;
      this.index = index;
      this.color.status = "dragged";

      // Set current color so user is able to change color through picker
      this.$root.setColor(index);
    },
    dragStop() {
      this.dragging = false;
      var status = this.color.status;
      // If element has been dragged out then delete it (we have already checked we have more than two colors in doDrag function)
      if (status == "out")
        this.$parent.colors.splice(this.index, 1);
      else
        this.color.status = "in";
    },
    doDrag(event) {
      if (this.dragging) {
        var element = this.$parent.$el;
        this.containerRect = element.getBoundingClientRect();

        // Get container coords
        var left = this.containerRect.left;
        var top = this.containerRect.top;

        // get container height and weight
        var height = this.containerRect.height;
        var width = this.containerRect.width;

        // Get mouse position
        var x = event.clientX;
        var y = event.clientY;

        // Get how much the point should be moved 
        var moveX = x - left;
        var moveYTop = y - (top - height);
        var moveYBottom = y - (top + (height * 2));

        // Get move in percentage
        var percentage = moveX * 100 / width;

        if (percentage < 0)
          percentage = 0;

        if (percentage > 100)
          percentage = 100;

        percentage = Math.round(percentage);

        this.color.stop = percentage;
        // If stop was dragged outside (i.e mouse moved outside bar) then hide the stop. Also, it will be filtered out of the colors array
        // This will happen only if we have more then two elements
        if ((moveYTop <= 0 || moveYBottom >= 0) && this.$parent.colorsLength > 2)
          this.color.status = "out";
        else
          this.color.status = "dragged";

      }
    },
    handleResize: function() {
      var element = this.$parent.$el;
      this.containerRect = element.getBoundingClientRect();
    }
  },
  computed: {
    opaqueColor: function() {
      var color = this.color.value;
      if (color.toLowerCase().indexOf("rgba") != -1) {
        color = color.split(",");
        color[4] = 1;
      }
      return {
        "background-color": color
      };
    }
  },
  mounted() {
    var element = this.$parent.$el;
    this.containerRect = element.getBoundingClientRect();
  },
  created: function() {
    window.addEventListener('resize', this.handleResize);
    window.addEventListener('mouseup', this.dragStop);
    window.addEventListener('mousemove', this.doDrag);
  }
});

Vue.component('color-slider', {
  template: "#color-slider",
  props: ['colors'],
  data() {
    return {
      dragging: false
    }
  },
  computed: {
    colorsLength: function() {
      return this.colors.length;
    },
    displayBarGradient: function() {
      /* This function is used to provide the display bar the colors for the current selected gradient, This will always be linear so we need to perfom separate action to getStyle*/
      var colorsArray = [];
      var style = '';
      colorsArray.push("90deg");

      var colors = JSON.parse(JSON.stringify(this.colors));
      colors.sort((a, b) => a.stop - b.stop);

      colors.forEach(color => {
        if (color.status == "out")
          return;

        colorsArray.push(color.value + " " + color.stop + "%");
        style = "linear-gradient(" + colorsArray.join(", ") + ")";
      });
      return {
        "background-image": style
      };
    }
  }
});

Vue.component('toggle-control', {
  template: "#toggle-control",
  props: {
    options: Object,
    icons: Array,
    booleanIcon: String,
    tip: {
      type: String,
      default: ''
    },
    'show-text': {
      type: Boolean,
      default: false
    },
    'show-icon': {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: "array"
    }
  },

  methods: {
    toggleSelection: function(index) {
      var selections = this.options.selections;
      var selectionsLength = selections.length - 1;
      var nextIndex = (index + 1 > selectionsLength) ? 0 : index + 1;
      this.options.selected = selections[nextIndex];
    }
  }
});

var chrome = VueColor.Chrome;

new Vue({
  el: "#app",
  components: {
    'chrome-picker': chrome
  },
  data() {
    return {
      showControls: true,
      showPresets: false,
      showInfo: false,
      randomColors: ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#34495e", "#2c3e50", "#ea4c88", "#ca2c68", "#9b59b6", "#8e44ad", "#f1c40f", "#f39c12", "#e74c3c", "#c0392b", "#ecf0f1", "#bdc3c7", "#7f8c8d"],

      options: {
        type: {
          selections: ["linear", "radial"],
          selected: "linear"
        },
        repeating: {
          selections: [false, true],
          selected: false
        },
        direction: {
          amount: 45
        },
        shape: {
          selections: ["circle", "ellipse"],
          selected: "ellipse"
        },
        size: {
          "ellipse": {
            height: {
              name: "Height",
              amount: 100,
              unit: "%",
              min: 0,
              max: 100
            },
            width: {
              name: "width",
              amount: 100,
              unit: "%",
              min: 0,
              max: 100
            }
          },
          "circle": {
            length: {
              name: "Length",
              amount: 500,
              unit: "px",
              min: 0,
              max: 1000
            }
          }
        },
        position: {
          vertical: {
            name: "y-offset",
            amount: 50,
            unit: "%",
            min: 0,
            max: 100
          },
          horizontal: {
            name: "x-offset",
            amount: 50,
            unit: "%",
            min: 0,
            max: 100
          }
        },
        colors: [{
            value: "#2c3e50",
            stop: 25,
            status: "in"
          },
          {
            value: "#2980b9",
            stop: 75,
            status: "in"
          }
        ],
        style: {
          "background-image": ""
        },
        status: "show"
      },
      presets: presets,
      gradients: [],
      currentGradient: 0,
      circle: {
        spread: 5
      },
      currentColor: "",
      currentColorIndex: 0,
      copyCSSResults: "",
      showShare: false
    }
  },
  computed: {
    getData: function() {
      return this.gradients[this.currentGradient];
    },
    getColors: function() {
      return this.gradients[this.currentGradient].colors;
    },
    presetsFilterd: function() {
      // Get 15 random elements
      var arr = [];
      var presets = this.cloneObj(this.presets);
      while (arr.length <= 14) {
        var r = Math.floor(Math.random() * this.presets.length) + 1;
        if (arr.indexOf(r) === -1)
          arr.push({
            index: r,
            preset: presets[r]
          });
      }
      return arr;
    },
    style: function() {
      var final = [];

      // First generator gradients
      this.generateGradients();

      this.gradients.forEach((gradient, index) => {
        if (gradient.status == "hide")
          return;

        final.push(gradient.style['background-image']);
      });

      // reset copied text
      this.copyCSSResults = "";

      // Join everything together and assign
      return {
        "background-image": final.join(", ")
      };
    },
    copyCSSText: function() {
      return (this.copyCSSResults != "") ? this.copyCSSResults : "Copy CSS";
    }
  },
  methods: {
    resetControls: function(e) {
      Object.assign(this.$data, this.$options.data.apply(this));
    },
    toggleControls: function(type, e) {
      var presets = this.showPresets;
      var controls = this.showControls;
			
      // Scrolling down
      if (e.deltaY > 0 || type == "click") {
        if (presets) {
          // First hide presets if shown
          this.showPresets = false;
          return;
        }
				
				// Second hide share panel if shown
				 if (this.showShare) {
          this.showShare = false;
          return;
        }
				
        this.showControls = false;
      }

      // Scrolling up (only handle controls as it might cause unexpected beahviour for user when showing presets as well)

      this.showControls = (e.deltaY < 0) ? true : false;

    },
    cloneObj: function(obj) {
      return JSON.parse(JSON.stringify(obj));
    },
    sortColors: function(a, b) {
      // Only sort colors if they are not equal. This will prevent unexpected behaviour. For example, if use moves color stop over another one they might swap which is not what is expected
      if (a.stop != b.stop)
        return a.stop - b.stop;
    },
    addColorStop: function(e) {

      // First get percentage based on click x position
      var containerRect = e.target.getBoundingClientRect();
      var width = containerRect.width;
      var moveX = e.clientX - containerRect.left;

      // convert to percentage
      var percentage = moveX * 100 / width;

      if (percentage < 0)
        percentage = 0;

      if (percentage > 100)
        percentage = 100;

      percentage = Math.round(percentage);

      // Choose a randome color for the colors array and push it
      var color = this.randomColors[Math.floor(Math.random() * this.randomColors.length)];

      var colorObj = {
        value: color,
        stop: percentage,
        status: "in"
      };

      var colors = this.gradients[this.currentGradient].colors;
      colors.push(colorObj);

      // Once the new stop is added to the array set it so user can change its color
      this.setColor(colors.length - 1);
    },
    generateGradients: function() {
      this.gradients.forEach((gradient, index) => {
        var gradientArray = [];
        var colorsArray = [];
        css = '';
        // Clone colors array and sort 
        var colors = JSON.parse(JSON.stringify(gradient.colors));
        colors.sort(this.sortColors);

        colors.forEach(color => {
          // If color is out of view (i.e user dragged outside bar but has not deleted it yet dont show it)
          if (color.status == "out")
            return;

          colorsArray.push(color.value + " " + color.stop + "%");
        });

        if (gradient.repeating.selected == true)
          css = "repeating-";

        // Process each type by combining its related values and set the stack box to represent its colors

        if (gradient.type.selected == 'linear') {
          gradientArray.push(gradient.direction.amount + "deg");

          gradientArray.push(colorsArray);
          css += "linear-gradient(" + gradientArray.join(", ") + ")";

          this.gradients[index].style["background-image"] = css;
        }

        if (gradient.type.selected == 'radial') {
          var position = gradient.position;
          var sizeCSS = '';
          var size = '';
          if (gradient.shape.selected == 'ellipse') {
            size = gradient.size.ellipse;
            sizeCSS = size.width.amount + "% " + size.height.amount + "%";
          } else {
            size = gradient.size.circle;
            sizeCSS = size.length.amount + "px";
          }

          var positionCSS = position.horizontal.amount + "% " + position.vertical.amount + "%";

          gradientArray.push(colorsArray);

          css += "radial-gradient(" + gradient.shape.selected + " " + sizeCSS + " at " + positionCSS + ", " + gradientArray.join(", ") + ")";

          this.gradients[index].style["background-image"] = css;
        }
      });
    },
    addGradient: function() {
      var newGradient = this.cloneObj(this.options);

      this.gradients.push(newGradient);
      this.setGradient(this.gradients.length - 1);
    },
    resetGradient: function() {
      var newGradient = this.cloneObj(this.options);
      Object.assign(this.$data.gradients[this.currentGradient], newGradient);

    },
    deleteColorStop: function(index) {
      this.gradients[this.currentGradient].colors.splice(index, 1);
    },
    setGradient: function(gradientIndex) {
      this.currentGradient = gradientIndex;
      this.setColor(0);
    },
    showGradient: function(gradientIndex) {
      /*
      Display gradient based on the provided index in the stack area.
       For radial graident that use circle shape we need to put elements in persepctive
      Circle width and height might be 1000px so it will be out of view
      */
      var gradient = this.gradients[gradientIndex];
      var type = gradient.type.selected;
      var shape = gradient.shape.selected;
      var bg = gradient.style["background-image"];

      if (type == 'radial' && shape == 'circle') {
        var size = gradient.size.circle.length.amount;

        // Create new size. 50 is the width of div
        var newSize = (size * 50) / 1000;
        var bg = bg.replace(size + "px", newSize + "px");
      }

      return {
        "background-image": bg
      };
    },
    toggleGradient: function(gradientIndex) {
      // Show or hide gradient from the main stack
      var currentStatus = this.gradients[gradientIndex].status;
      this.gradients[gradientIndex].status = (currentStatus == 'show') ? 'hide' : "show";
    },
    deleteGradient: function(gradientIndex) {
      var length = this.gradients.length;
      // Delete only if we have more than one gradient
      if (length < 2)
        return;

      // First delete element
      this.gradients.splice(gradientIndex, 1);

      // We call length again here because it has changed after splice
      length = this.gradients.length;

      // set other elements
      this.setGradient(length - 1);

      // Make sure element is visible if it is last one.
      if (length == 1)
        this.gradients[this.currentGradient].status = 'show';
    },
    setColor: function(colorIndex) {
      this.currentColorIndex = colorIndex;
      this.currentColor = this.gradients[this.currentGradient].colors[colorIndex];
    },
    updatePicker: function(color) {
      if (color.rgba.a == 1) {
        this.currentColor.value = color.hex;
      } else {
        this.currentColor.value = "rgba(" + color.rgba.r + ", " + color.rgba.g + ", " + color.rgba.b + ", " + color.rgba.a + ")";
      }
    },
    applyGradient: function(index) {
      // Apply gradient from presets colors to displayed gradient
      var displayedGradient = this.gradients[this.currentGradient];
      var preset = this.cloneObj(this.presets[index]);
      var type = preset.type;
      if (type == "linear")
        displayedGradient.direction.amount = preset.direction;


      if (type == "radial") {
        displayedGradient.position.vertical.amount = preset.vertical;
        displayedGradient.position.horizontal.amount = preset.horizontal;
        displayedGradient.shape.selected = preset.shape;
      }

      displayedGradient.type.selected = type;
      displayedGradient.colors = preset.colors;

      this.setColor(0);
    },
    copyCSS: function() {

      // https://stackoverflow.com/a/33928558
      var text = "background: " + this.style["background-image"] + ";";
      var _this = this;

      if (navigator.clipboard != undefined) {
        navigator.clipboard.writeText(text).then(function() {
          _this.copyCSSResults = "Copied !!!";
        }, function(err) {
          _this.copyCSSResults = "Failed :(";
        });
      } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
          _this.copyCSSResults = "Copied !!!";
          return document.execCommand("copy"); // Security exception may be thrown by some browsers.
        } catch (ex) {
          _this.copyCSSResults = "Failed :(";
          return false;
        } finally {
          document.body.removeChild(textarea);
        }
      }
    }
  },
  created() {
    this.addGradient();
    this.setColor(0);
    /* this.$root.$on('sortColor', (index) => {
       this.sortColor(index)
     })*/


  }
});
!
999px

Console