@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Manrope:wght@200;400;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap";
@import "https://fonts.googleapis.com/css?family=Roboto:400,900";
@import "https://fonts.googleapis.com/css?family=Baloo:400,900";
@import "https://fonts.googleapis.com/css?family=Fredoka+One";
@import "https://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css";

:root {
    --gutter: 16px;
    --border-color: #f1f1f1;
    --background-color: #fff;
    --palette-color: #fff;
    --text-color: #333;
    --text-color-2: #999;
    --highlight-1: #1eafed
}

@media(prefers-color-scheme:light),
(prefers-color-scheme:no-preference) {
    :root {
        --border-color: #f1f1f1;
        --background-color: #fff;
        --palette-color: #fff;
        --text-color: #333;
        --text-color-inverted: #f4f4f4;
        --text-color-2: #999;
        --highlight-1: #1eafed
    }
}

@media(prefers-color-scheme:dark) {
    :root {
        --border-color: #000;
        --background-color: #31315d;
        --palette-color: #1a1a41;
        --text-color: #f4f4f4;
        --text-color-inverted: #333;
        --text-color-2: #91919a;
        --highlight-1: #1eafed
    }
}



.funky {
    font-family: dancing script, cursive;
    font-weight: 700
}

pre,
code {
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif
}

code {
    border-radius: .3rem;
    padding: .15rem .3rem;
    line-height: 1.8rem;
    font-size: .8rem
}

code span {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: invert(1) grayscale(1) contrast(9)
}

a {
    color: var(--highlight-1);
    text-decoration: none
}



.date {
    margin: 1rem 0 0;
    font-size: .9rem
}

p {
    font-size: 1rem
}

p.large {
    font-size: 1.25rem;
    line-height: 1.75
}

.tag {
    background: var(--border-color);
    color: var(--text-color-2) !important;
    padding: .2rem .55rem;
    border-radius: .3rem
}

.tag.small {
    font-size: 1rem !important;
    line-height: 1.5;
    display: inline-block;
    text-decoration: none
}

.tag.small:hover {
    background: var(--background-color)
}

.tag.static:hover {
    background: var(--border-color)
}

h1.linear-wipe {
    font-size: 1.5rem;
    display: inline;
    text-align: center;
    background-image: linear-gradient(to right, #f782a9 0%, #b48bd9 10%, #4ed9ab 40%, #ffd26b 60%, #f782a9 90%, #f782a9 100%);
    background-size: 200% auto;
    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 10s linear infinite
}

h1.linear-wipe a {
    text-decoration: none;
    color: var(--text-color)
}

@keyframes shine {
    to {
        background-position: 200% center
    }
}

#site-navigaion {
    height: 64px;
    width: 100vw;
    border-bottom: 1px solid var(--border-color);
    background: var(--background-color);
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    transition: box-shadow 200ms ease-in-out;
    padding: 0 3rem;
    display: flex;
    justify-content: space-between
}

@media(prefers-color-scheme:dark) {
    #site-navigaion {
        background: var(--palette-color)
    }
}

@media(max-width:768px) {
    #site-navigaion {
        padding: 0 1rem;
        z-index: 10002
    }
}

#site-navigaion.highlight {
    box-shadow: 0 7px 30px rgba(0, 0, 0, .15), 0 5px 10px rgba(0, 0, 0, .12)
}

#site-navigaion button.toggle-menu {
    display: none;
    background: 0 0;
    border: 0;
    padding-inline: 0;
    cursor: pointer
}

@media(max-width:768px) {
    #site-navigaion button.toggle-menu {
        display: block
    }
}

#site-navigaion nav {
    padding: 0;
    margin: 0;
    display: block;
    height: 100%
}

@media(max-width:768px) {
    #site-navigaion nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        background: var(--background-color);
        width: 100%;
        height: calc(100vh - 64px);
        z-index: 10002
    }

    #site-navigaion nav.active {
        display: block
    }

    #site-navigaion nav.active a {
        display: block;
        text-align: center;
        height: auto;
        transition: background 100ms ease-in-out;
        border-radius: 5px;
        margin: .5rem 1rem
    }

    #site-navigaion nav.active a::after {
        display: none
    }

    #site-navigaion nav.active a:hover {
        background: var(--border-color)
    }
}

#site-navigaion nav a {
    color: var(--text-color);
    height: 100%;
    display: inline-block;
    padding: 20px .75rem;
    vertical-align: top;
    text-decoration: none
}

#site-navigaion nav a svg {
    position: relative;
    top: 2px
}

#site-navigaion nav a.tools {
    color: var(--text-color-2)
}

#site-navigaion nav a:last-child {
    padding-right: 0
}

#site-navigaion nav a::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background: var(--text-color);
    transition: width 200ms
}

#site-navigaion nav a:hover::after {
    width: 100%
}

body#palettes #site-navigaion nav a.palettes::after,
body#flat #site-navigaion nav a.flat::after,
body#gradients #site-navigaion nav a.gradients::after,
body#about #site-navigaion nav a.about::after,
body#scan #site-navigaion nav a.scan::after,
body#contact #site-navigaion nav a.contact::after {
    width: 100%
}



main {
    padding-top: 142px
}

@media(max-width:768px) {
    main {
        padding-top: 80px
    }
}

header#header {
    padding-top: 142px
}

header#header h1.linear-wipe {
    font-size: 3rem
}

header#header h3 {
    color: var(--text-color-2);
    margin: 0
}

input.search {
    padding: 1rem;
    font-size: 1.2rem;
    display: block;
    width: 50%;
    border: 0;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2);
    margin: 2rem auto 0;
    border-radius: .5rem
}

@media(max-width:768px) {
    input.search {
        width: 90%
    }
}

/*hr {
    border: 0;
    height: 1px;
    background: #bbb;
    width: 100%;
    margin-bottom: var(--gutter)
}*/

.hide {
    display: none !important
}

.totop {
    display: block;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, .5);
    padding: 1rem 1rem .25rem;
    border-radius: 5px;
    z-index: 1000;
    font-size: 2rem;
    line-height: 1;
    color: #fff;
    border: 0;
    font-weight: 400;
    cursor: pointer;
    opacity: 0;
    transition: opacity 200ms ease-in-out
}

@media(max-width:768px) {
    .totop {
        bottom: 100px;
        right: auto;
        left: 1.5rem
    }
}

.totop.active {
    opacity: 1
}

.totop:hover {
    background: #000
}

.palette {
/*    border-radius: 10px;
    background: var(--palette-color);
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2);
    padding: var(--gutter);
    text-decoration: none;*/
    margin-bottom: var(--gutter)
}

.colors {
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap
}

.colors .color {
    height: 120px;
    width: 25%;
    flex-basis: 25%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-grow: 1;
    transition: all 100ms ease-in-out;
    cursor: pointer;
    overflow: hidden
}

.colors .color:hover {
    width: 75%;
    flex-basis: 100%
}

.colors .color:hover>.hex {
    visibility: visible;
    opacity: 1
}

.colors .color .hex,
.colors .color .check {
    font-weight: 700;
    background: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: invert(1) grayscale(1) contrast(9);
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase
}

.colors .color .hex {
    visibility: hidden;
    opacity: 0
}

.colors .color .check {
    font-size: 1rem;
    font-weight: 700
}

.footer {
    display: flex;
    justify-content: space-between;
    color: #fff3f3
}

.footer .date {
    font-size: .85rem;
    margin-top: .3rem;
    color: var(--text-color);
    text-decoration: none
}

#newLikeContianer #newLikeLink {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 140px;
    height: calc(100% - 1rem);
    padding: 0 1rem;
    width: 100%;
    border-radius: 5px;
    border: 2px dashed var(--border-color);
    color: var(--color-1)
}

#newLikeContianer #newLikeLink:hover {
    text-decoration: none;
    border: 2px dashed var(--highlight-1);
    color: var(--highlight-1)
}

#newLikeContianer #newLikeLink span {
    display: block;
    text-align: center
}

.likes,
.view {
    padding: 0 5px 4px;
    border: 1px solid var(--border-color);
    background: 0 0;
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
    text-decoration: none;
    font-size: .85rem;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    height: 25px
}

.likes:hover,
.view:hover {
    background: var(--border-color)
}

.likes .heart,
.likes .eye,
.view .heart,
.view .eye {
    width: 1rem;
    height: 1rem;
    position: relative;
    top: 4px
}

.likes .eye,
.view .eye {
    fill: #a7a7a7
}

.likes .heart,
.view .heart {
    fill: #ff7474;
    width: 1rem;
    height: 1rem;
    padding: .1rem;
    top: .2rem
}

.likes.liked,
.view.liked {
    border-color: #ff8d8d;
    background: #ffdada;
    color: #333
}

.likes.liked .heart,
.view.liked .heart {
    fill: #ff8d8d
}

.likes.liked:hover,
.view.liked:hover {
    border-color: #ff8d8d;
    background: #ffdada
}

.likes.liked:hover .heart,
.view.liked:hover .heart {
    fill: #ff8d8d
}

.color-single {
    border-radius: .3rem;
    margin-bottom: calc(var(--gutter) * 3);
    position: relative
}

.color-single h3 {
    margin: 0 0 .5rem
}

.color-single .preview {
    padding: 2rem;
    width: 100%;
    display: block;
    border-radius: .3rem;
    border: 1px solid var(--border-color);
    cursor: pointer
}

.color-single .input-group {
    display: flex
}

.color-single .input-group input.input {
    display: block;
    width: calc(100% - 2rem);
    padding: .5rem;
    margin-bottom: .7rem;
    border: 1px solid var(--border-color);
    border-radius: .3rem 0 0 .3rem;
    font-size: 1rem
}

.color-single .input-group button.copy {
    padding: .5rem;
    margin-bottom: .7rem;
    border: 1px solid var(--border-color);
    border-left: 1px solid transparent;
    border-radius: 0 .3rem .3rem 0;
    font-size: 1rem;
    cursor: pointer;
    transition: all 100ms ease-in-out;
    opacity: .7
}

.color-single .input-group button.copy:hover {
    opacity: 1
}

.color-single .input-group button.copy svg {
    height: 1rem;
    width: 1rem;
    position: relative;
    top: 2px
}

.color-single .edit-indicator {
    position: absolute;
    top: 2.5rem;
    right: 1rem;
    padding: .3rem;
    stroke: #000;
    fill: #fff;
    transition: opacity 100ms ease-in-out
}

button.preview:hover+svg.edit-indicator {
    opacity: 1;
    background: red
}

a.button,
.button button.button {
    display: inline-block;
    background-color: #cf245f;
    background-image: linear-gradient(to bottom right, #FFD26B, #F782A9, #F782A9);
    border: 0;
    border-radius: 5px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.75rem;
    padding: 1rem 1.25rem;
    text-align: center;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin: 0 .5rem .5rem 0;
    text-decoration: none;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2);
    position: relative;
    top: 0;
    transition: top 150ms ease-in-out
}

a.button:hover,
.button button.button:hover {
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2);
    text-decoration: none;
    top: -5px
}

#wall-js {
    border-radius: 5px;
    background: var(--palette-color);
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2);
    padding: var(--gutter);
    text-decoration: none;
    margin-bottom: var(--gutter);
    height: calc(100% - var(--gutter))
}

#wall-js #_custom_ {
    min-height: 100%;
    position: relative;
    border-radius: 5px
}

#wall-js .wall img {
    max-width: 100%
}

#wall-js a.wall {
    width: 100%;
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    position: relative !important;
    border-radius: 5px
}

#wall-js .wall .wall__cta {
    padding: .5rem 0;
    border-radius: 3px
}

#wall-js .wall .wall__sponsor {
    font-weight: 700;
    font-size: .8rem;
    text-align: center
}

#wall-js .wall .wall__tagline {
    font-style: italic;
    font-size: .8rem;
    text-align: center
}

#wall-js .wall .wall__description {
    font-size: .8rem;
    text-align: center
}

#wall-js .wall .wall__footer {
    display: flex !important
}

#wall-js .wall .wall__cta {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%
}

#wall-js .wall .wall__image {
    text-align: center;
    width: 50%
}

.cloudservers {
    background: #19191a;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
    align-items: center;
    padding: var(--gutter);
    color: #fff
}

.cloudservers small {
    margin-bottom: 1rem
}

.cloudservers .cloudservers-footer {
    display: flex;
    justify-content: space-between
}

.cloudservers .cloudservers-footer img {
    margin: 0 auto;
    display: block;
    width: 60%;
    height: auto
}

.cloudservers .cloudservers-footer b {
    text-transform: uppercase
}

.cloudservers .cloudservers-footer .button {
    width: 30%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: .3rem .6rem;
    color: #fff;
    background-color: #2989ef;
    background-image: linear-gradient(to bottom right, #2989EF, #13CDFF);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 0
}

.cloudservers .cloudservers-footer .button:hover {
    top: 0
}

.ad {
    display: inline-block;
    visibility: visible;
    opacity: 1;
    background: var(--background-color);
    position: fixed;
    transition: all 250ms ease-in-out;
    left: var(--gutter);
    bottom: var(--gutter);
    width: 130px;
    z-index: 5;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 7px 30px rgba(0, 0, 0, .15), 0 5px 10px rgba(0, 0, 0, .12)
}

@media(max-width:768px) {
    .ad {
        width: 100%;
        height: 100px;
        left: 0;
        bottom: 0;
        box-shadow: 0;
        border-top: 1px solid var(--border-color)
    }
}

.ad .close-button {
    cursor: pointer;
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 0 3px;
    color: var(--text-color);
    font-size: 1.2rem
}

.ad .close-button:hover {
    color: var(--border-color)
}

@media(max-width:768px) {
    .ad #carbonads .carbon-wrap {
        display: flex
    }
}

.ad #carbonads .carbon-img {
    display: block
}

@media(max-width:768px) {
    .ad #carbonads .carbon-img {
        display: inline-block;
        margin-bottom: -4px
    }
}

.ad #carbonads .carbon-text {
    display: block;
    text-align: center;
    font-size: .9rem;
    color: var(--text-color);
    text-decoration: none;
    margin: 5px
}

@media(max-width:768px) {
    .ad #carbonads .carbon-text {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 170px);
        text-align: left;
        padding: 5px 0 5px 10px
    }
}

.ad #carbonads .carbon-text:hover {
    color: var(--text-color-2)
}

.ad #carbonads .carbon-poweredby {
    display: block;
    color: var(--text-color);
    text-align: center;
    font-size: .9rem;
    margin: 5px;
    text-decoration: none
}

@media(max-width:768px) {
    .ad #carbonads .carbon-poweredby {
        position: absolute;
        bottom: 5px;
        left: 140px;
        width: calc(100% - 170px);
        text-align: left
    }
}

.ad #carbonads .carbon-poweredby:hover {
    color: var(--text-color-2)
}

.ad.closed {
    visibility: hidden;
    opacity: 0;
    bottom: -250px;
    left: -130px
}

.social .icon {
    position: relative;
    background-color: var(--border-color);
    border-radius: 50%;
    margin: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 22px;
    display: inline-block;
    align-items: center;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2);
    cursor: pointer;
    transition: all .2s cubic-bezier(.68, -.55, .265, 1.55);
    color: var(--text-color);
    text-decoration: none
}

.social .tooltip {
    position: absolute;
    top: 0;
    line-height: 1.5;
    font-size: 14px;
    background-color: var(--background-color);
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
    opacity: 0;
    pointer-events: none;
    transition: all .3s cubic-bezier(.68, -.55, .265, 1.55)
}

.social .tooltip::before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    background-color: var(--background-color);
    bottom: -3px;
    left: 30%;
    transform: translate(-50%) rotate(45deg);
    transition: all .3s cubic-bezier(.68, -.55, .265, 1.55)
}

.social .icon:hover .tooltip {
    top: -45px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.social .icon:hover span,
.social .icon:hover .tooltip {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .1)
}

.social .facebook:hover,
.social .facebook:hover .tooltip,
.social .facebook:hover .tooltip::before {
    background-color: #3b5999;
    color: #fff
}

.social .twitter:hover,
.social .twitter:hover .tooltip,
.social .twitter:hover .tooltip::before {
    background-color: #46c1f6;
    color: #fff
}

.social .linkedin:hover,
.social .linkedin:hover .tooltip,
.social .linkedin:hover .tooltip::before {
    background-color: #0077b5;
    color: #fff
}

.social .pinterest:hover,
.social .pinterest:hover .tooltip,
.social .pinterest:hover .tooltip::before {
    background-color: #e60023;
    color: #fff
}

body#gradients main {
    padding-top: 80px
}

.gradient {
    border-radius: 5px;
    background: var(--palette-color);
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2);
    padding: var(--gutter);
    text-decoration: none;
    margin-bottom: var(--gutter);
    padding-top: 145px
}

.gradient .footer {
    display: flex;
    justify-content: space-between
}

.gradient .footer .code {
    color: #fff;
    position: relative
}

.gradient .footer .code svg {
    transform: scale(1);
    position: relative;
    top: 4px;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.4));
    transition: all 150ms ease
}

.gradient .footer .code:after {
    display: none;
    content: attr(data-value);
    text-shadow: 0 0 2px rgba(0, 0, 0, .4);
    width: 100px;
    font-weight: 700;
    font-size: .75rem;
    position: absolute;
    left: 2rem;
    top: 0
}

.gradient .footer .code:hover svg {
    transform: scale(1.25)
}

.gradient .footer .code:hover:after {
    display: block
}

.gradient .footer .date {
    font-size: .85rem;
    margin-top: .3rem;
    font-weight: 700;
    color: var(--text-color);
    text-shadow: 0 0 1px #000;
    color: #fff;
    text-decoration: none
}

body#flat main {
    padding-top: 0
}

.colors.colors-flat {
    height: calc(100vh - 64px);
    width: 100%;
    padding: 0 !important;
    margin-top: 64px;
    display: flex;
    flex-wrap: wrap
}

.colors.colors-flat .flat {
    height: 10%;
    width: 5%;
    transition: all 150ms ease-in-out;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center
}

.colors.colors-flat .flat:hover {
    transform: scale(1.2);
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .4);
    border-radius: 5px
}

footer {
    padding: 3rem 0;
    text-align: center
}

@media(max-width:768px) {
    footer {
        padding: 3rem 0 9rem
    }
}

footer p {
    text-align: center
}

.browser-mockup {
    border-top: 2em solid rgba(230, 230, 230, .7);
    border-left: 1px solid rgba(230, 230, 230, .7);
    border-right: 1px solid rgba(230, 230, 230, .7);
    border-bottom: 1px solid rgba(230, 230, 230, .7);
    position: relative;
    border-radius: .35rem
}

.browser-mockup:before {
    display: block;
    position: absolute;
    content: "";
    top: -1.25em;
    left: 1em;
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background-color: #f44;
    box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5
}

.browser-mockup.with-tab:after {
    display: block;
    position: absolute;
    content: "";
    top: -2em;
    left: 5.5em;
    width: 20%;
    height: 0;
    border-bottom: 2em solid #fff;
    border-left: .8em solid transparent;
    border-right: .8em solid transparent
}

.browser-mockup.with-url:after {
    display: block;
    position: absolute;
    content: "";
    top: -1.6em;
    left: 5.5em;
    width: calc(100% - 6em);
    height: 1.2em;
    border-radius: 2px;
    background-color: #fff
}

.browser-mockup>* {
    display: block
}

.iphone-x {
    position: relative;
    overflow: scroll;
    margin: 2rem 0;
    left: 1rem;
    width: calc(100% - 2rem);
    height: 750px;
    background-color: var(--background-color);
    border-radius: 40px;
    box-shadow: 0 0 0 11px #1f1f1f, 0 0 0 13px #191919, 0 0 0 20px #111;
    overflow: hidden
}

.iphone-x:before,
.iphone-x:after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.iphone-x:after {
    bottom: 7px;
    width: 140px;
    height: 4px;
    background-color: #f2f2f2;
    border-radius: 10px
}

.iphone-x:before {
    top: 0;
    width: 56%;
    height: 30px;
    background-color: #1f1f1f;
    border-radius: 0 0 40px 40px
}

.iphone-x i,
.iphone-x b,
.iphone-x s {
    position: absolute;
    display: block;
    color: transparent
}

.iphone-x i {
    top: 0;
    left: 50%;
    transform: translate(-50%, 6px);
    height: 8px;
    width: 15%;
    background-color: #101010;
    border-radius: 8px;
    box-shadow: inset 0 -3px 3px 0 rgba(255, 255, 255, .2)
}

.iphone-x b {
    left: 10%;
    top: 0;
    transform: translate(180px, 4px);
    width: 12px;
    height: 12px;
    background-color: #101010;
    border-radius: 12px;
    box-shadow: inset 0 -3px 2px 0 rgba(255, 255, 255, .2)
}

.iphone-x b:after {
    content: "";
    position: absolute;
    background-color: #2d4d76;
    width: 6px;
    height: 6px;
    top: 2px;
    left: 2px;
    top: 3px;
    left: 3px;
    display: block;
    border-radius: 4px;
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .5)
}

.iphone-x s {
    top: 50px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    width: 100%;
    font-size: 70px;
    font-weight: 100;
    padding-top: 60px
}

.ui-exmaple {
    padding: 4rem 1rem 1rem;
    font-size: .75rem
}

.ui-exmaple .header {
    background: var(--border-color);
    border-radius: .3rem;
    border-top: 3px solid #eee
}

.ui-exmaple .header .header-wrap {
    display: flex;
    flex-wrap: nowrap;
    padding: 1rem 1rem 0;
    gap: 1rem
}

.ui-exmaple .header .header-wrap .avatar {
    width: 200px;
    height: 75px;
    position: relative;
    border: 2px solid transparent
}

.ui-exmaple .header .header-wrap .tag {
    text-align: left
}

.ui-exmaple .header .header-wrap .tag h3 {
    margin: 0
}

.ui-exmaple .header .header-wrap .tag p {
    margin-top: 0
}

.ui-exmaple .header .button-grp {
    display: flex;
    flex-wrap: nowrap;
    padding: 0 1rem 1rem;
    gap: 1rem
}

.ui-exmaple .header .button-grp .btn {
    width: calc(50% - 1rem);
    margin: 0 auto;
    display: block;
    border: 0;
    padding: 1rem;
    border-radius: .3rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all .1s ease-in-out;
    position: relative;
    top: 0
}

.ui-exmaple .header .button-grp .btn:hover {
    top: -3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
    opacity: .8
}

.ui-exmaple .header .button-grp .btn span {
    background-color: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: invert(1) grayscale(1) contrast(9)
}

.ui-exmaple .info-wrap {
    display: flex;
    flex-wrap: nowrap;
    padding: 0 1rem 1rem;
    gap: 1rem
}

.ui-exmaple .info-wrap .left {
    width: 50%
}

.ui-exmaple .info-wrap .right {
    width: 50%
}

.ui-exmaple .info-wrap .subheader {
    color: #bbb;
    text-transform: uppercase;
    margin-bottom: 0;
    text-align: left
}

.ui-exmaple .info-wrap .input {
    width: 100%;
    padding: .3rem;
    border: 1px solid #aaa;
    background: #f7f7f7;
    border-radius: .3rem;
    font-weight: 400
}

.ui-exmaple .toggle-wrap .toggle-item {
    display: flex;
    flex-wrap: nowrap;
    padding: 0 1rem 1rem;
    gap: 1rem;
    justify-content: space-between
}

.ui-exmaple .toggle-wrap .toggle-item p {
    margin: 0
}

.ui-exmaple .toggle-wrap .toggle-item .checkbox .checkbox-label {
    position: relative;
    display: block;
    height: 20px;
    width: 44px;
    background: #ddd;
    border-radius: 100px;
    cursor: pointer;
    transition: all 300ms ease
}

.ui-exmaple .toggle-wrap .toggle-item .checkbox .checkbox-label:after {
    position: absolute;
    left: -2px;
    top: -3px;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #bebebe;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .05);
    content: "";
    transition: all 300ms ease
}

.ui-exmaple .toggle-wrap .toggle-item .checkbox .checkbox-label:active:after {
    transform: scale(1.15, .85)
}

.ui-exmaple .toggle-wrap .toggle-item .checkbox .checkbox-input {
    display: none
}

.ui-exmaple .toggle-wrap .toggle-item .checkbox .checkbox-input:checked~label {
    background: #add8e6
}

.ui-exmaple .toggle-wrap .toggle-item .checkbox .checkbox-input:checked~label:after {
    left: 20px;
    background: #72bcd4
}

.ui-exmaple .toggle-wrap .toggle-item .checkbox .checkbox-input:disabled~label {
    background: #fff;
    pointer-events: none
}

.ui-exmaple .toggle-wrap .toggle-item .checkbox .checkbox-input:disabled~label:after {
    background: #fff
}

.ui-exmaple .social-wrap {
    margin-top: 2rem;
    display: flex;
    flex-wrap: nowrap;
    padding: 0 1rem 1rem;
    gap: 1rem;
    justify-content: space-around
}

.ui-exmaple .social-wrap .social {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    transition: all .1s ease-in-out;
    position: relative;
    top: 0
}

.ui-exmaple .social-wrap .social:hover {
    top: -3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
    opacity: .8
}

.ui-exmaple .social-wrap .social svg {
    height: 18x;
    width: 18px;
    background: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: invert(1) grayscale(1) contrast(9)
}

.ui-exmaple hr {
    border: 0;
    height: 1px;
    margin: 1rem 1rem 0;
    background: #aaa
}

.ui-exmaple .help-wrap {
    font-size: .8rem;
    text-align: center
}

.range-slider {
    width: calc(100% - 2rem);
    margin: 0 1rem
}

.range-slider__range {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    width: calc(100% - 73px);
    height: 10px;
    border-radius: 5px;
    background: #ddd;
    outline: none;
    padding: 0;
    margin: 0
}

.range-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out
}

.range-slider__range::-webkit-slider-thumb:hover {
    background: #1abc9c
}

.range-slider__range:active::-webkit-slider-thumb {
    background: #1abc9c
}

.range-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    -moz-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out
}

.range-slider__value {
    display: inline-block;
    position: relative;
    width: 60px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    background: #2c3e50;
    padding: 5px 10px;
    margin-left: 8px
}

.range-slider__value:after {
    position: absolute;
    top: 8px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid #2c3e50;
    border-bottom: 7px solid transparent;
    content: ""
}

::-moz-range-track {
    background: #ddd;
    border: 0
}

input::-moz-focus-inner,
input::-moz-focus-outer {
    border: 0
}

#scan img {
    max-width: 100%
}

#scan canvas {
    max-width: 100%;
    border-radius: 5px;
    margin-top: 1rem
}

#scan form {
    text-align: center
}

#scan .dropzone {
    border: 2px dashed var(--border-color);
    background: var(--background-color);
    min-height: auto;
    border-radius: 5px
}

#scan .dropzone.dz-drag-hover,
#scan .dropzone.dz-started {
    border: 2px dashed var(--highlight-1)
}

#scan #previewElement img {
    margin-top: 1rem;
    border-radius: 5px
}

#scan .swatches {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    margin-top: 1rem
}

@media(max-width:768px) {
    #scan .swatches {
        flex-direction: row
    }
}

@media(max-width:486px) {
    #scan .swatches {
        flex-wrap: wrap
    }
}

#scan .swatches .swatch-textbox {
    height: 0;
    opacity: 0
}

#scan .swatches .swatch {
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    border-radius: 5px
}

#scan .swatches .swatch p {
    margin: 0;
    display: block;
    width: 100%;
    font-weight: 700;
    background: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: invert(1) grayscale(1) contrast(9);
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase
}

#palette,
#complementary {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 80%
}


#complementary div {
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode: difference;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px #333
}


#complementary div {
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center
}

#background-display {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    transition: transform .3s linear;
    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, 1em 1em;
    background-size: 2em 2em
}

#background-display .show-gradient {
    width: 100%;
    height: 100%
}

#background-display.show-social-networks {
    transform: translatey(-10vh)
}

#dont-use-ie {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    padding: .8em;
    display: flex;
    font-size: 1.1em;
    background: #fde073;
    animation: show-ie .5s forwards;
    color: #6f5802
}

#dont-use-ie .text {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

#dont-use-ie .text a {
    margin: 0 5px
}

#dont-use-ie .close {
    font-size: 1.3em;
    cursor: pointer;
    width: 1.3em;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .6;
    transition: all .3s
}

#dont-use-ie .close:hover {
    opacity: 1
}

#presets-fullview-container {
    position: fixed;
    bottom: 0;
    width: 90vw;
    left: 5vw;
    height: 60vh;
    background-color: #fff;
    padding: 40px 20px;
    z-index: 5;
    transition: all .4s ease-in-out;
    transform: translateY(110%)
}

#presets-fullview-container.show {
    transform: translateY(0)
}

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

#presets-fullview-container .presets-wrapper>div {
    height: 90px;
    border: 2px solid #fff;
    box-shadow: 0 0 1px 2px rgba(180, 180, 180, .8);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer
}

#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 .3s linear;
    transform: translateY(100%)
}

#share-container.show {
    transform: translateY(0%)
}

#share-container>div {
    cursor: pointer;
    width: 1em;
    height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px;
    opacity: .8;
    border-radius: 2px;
    transition: all .2s;
    font-family: socicon !important;
    color: #fff
}

#share-container>div i {
    font-size: .5em
}

#share-container>div:hover {
    opacity: 1
}

#info-box-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    transition: all .3s ease-in-out;
    z-index: 5;
    background: #c1b6a4
}

#info-box-wrapper .info-box {
    padding: 50px;
    position: relative;
    display: grid;
    grid-template-columns: 15% 60% 15%;
    grid-template-rows: 15% 85%;
    grid-gap: 4em;
    height: 100%
}

#info-box-wrapper .info-box .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: 700;
    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
}

#info-box-wrapper .info-box h1 {
    font-size: 1.5em;
    margin: 15px 0;
    font-family: Baloo;
    color: #48443a
}

#info-box-wrapper .info-box h2 {
    font-size: 1.2em;
    margin: 5px 0;
    font-family: Baloo;
    color: #48443a
}

#info-box-wrapper .info-box p {
    margin: 20px 0;
    font-size: .8em;
    line-height: 1.5em;
    text-align: justify;
    color: #48443a
}

#info-box-wrapper .info-box p:first-child {
    margin-top: 0
}

#info-box-wrapper .info-box .close {
    position: absolute;
    top: 3%;
    right: 2%;
    width: 1em;
    height: 1em;
    font-size: 2em;
    font-weight: 700;
    transition: all .2s;
    opacity: .8;
    color: #100f0c;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex
}

#info-box-wrapper .info-box .close:hover {
    opacity: 1
}

#info-box-wrapper .info-box .howto {
    position: relative
}

#info-box-wrapper .info-box .howto .howto-wrapper {
    -moz-column-count: 3;
    column-count: 3;
    -moz-column-gap: 2.5em;
    column-gap: 2.5em
}

#info-box-wrapper .info-box .howto .howto-wrapper::after,
#info-box-wrapper .info-box .howto .howto-wrapper::before {
    content: "";
    height: 80%;
    width: 1px;
    background-color: rgba(72, 68, 58, .1);
    position: absolute;
    right: -3.5%;
    top: 10%
}

#info-box-wrapper .info-box .howto .howto-wrapper::after {
    left: -3.5%
}

#info-box-wrapper .info-box .resources li {
    list-style-type: none;
    font-size: .9em;
    line-height: 2em
}

#info-box-wrapper .info-box .resources li a {
    transition: all .2s;
    opacity: .7;
    color: #48443a;
    text-decoration: none
}

#info-box-wrapper .info-box .resources li a:hover {
    opacity: 1
}

#info-box-wrapper .info-box .resources li a:active,
#info-box-wrapper .info-box .resources li a:visited {
    color: #48443a
}

#info-box-wrapper .info-box .resources hr {
    border: .5px solid;
    width: 50%;
    position: relative;
    color: rgba(72, 68, 58, .1)
}

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

#controls-container.show {
    transform: translateY(0)
}

#controls-container .controls-wrapper {
    padding: 0 20px;
    box-shadow: 2px 0 2px 0 rgba(0, 0, 0, .15);
    background-color: #fff;
    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%)
}

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

#controls-container .controls-wrapper .colors-slider::after {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(128, 128, 128, .3);
    content: ""
}

#controls-container .controls-wrapper .colors-slider .gradient-bar {
    width: 100%;
    border-radius: 5px;
    height: 100%;
    box-shadow: 0 0 0 2px #2b2b2b;
    border: 2px solid #fff;
    cursor: copy;
    z-index: 2
}

#controls-container .controls-wrapper .colors-slider .gradient-bar::before {
    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, .5em .5em;
    background-size: 1em 1em;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: -1
}

#controls-container .controls-wrapper .colors-slider .color-stop {
    position: absolute;
    top: 0;
    height: 100%;
    width: 10px;
    z-index: 1;
    transform: translateX(-25%);
    transition: box-shadow .2s
}

#controls-container .controls-wrapper .colors-slider .color-stop.stackTop {
    z-index: 2
}

#controls-container .controls-wrapper .colors-slider .color-stop.hide {
    display: none
}

#controls-container .controls-wrapper .colors-slider .color-stop.selected {
    z-index: 2
}

#controls-container .controls-wrapper .colors-slider .color-stop.selected .color-view {
    box-shadow: 0 0 0 2px #2b2b2b, 0 0 0 5px rgba(189, 195, 199, .71)
}

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

#controls-container .controls-wrapper .colors-slider .color-stop .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 #fff;
    box-shadow: 0 0 0 2px #2b2b2b;
    transition: box-shadow .2s;
    border-radius: 40% 60% 100% 0%/100% 60% 40% 0%;
    transform: rotate(-45deg) translateX(-50%);
    z-index: 1
}

#controls-container .controls-wrapper .colors-slider .color-stop .color-view:hover {
    box-shadow: 0 0 0 2px #2b2b2b, 0 0 0 5px rgba(180, 180, 180, .6)
}

#controls-container .controls-wrapper .colors-slider .color-stop .stop-input {
    position: absolute;
    bottom: 100%;
    left: 0%;
    transform: translate(-50%, -80%)
}

#controls-container .controls-wrapper .colors-slider .color-stop .stop-input input {
    border: 0 solid gray;
    text-align: center;
    outline: none;
    font-size: .8em;
    box-shadow: 0 0 0 0 gray;
    transition: all .2s;
    max-width: 100%;
    border-radius: 5px;
    padding: .4em;
    opacity: .5
}

#controls-container .controls-wrapper .title {
    width: 20%
}

#controls-container .controls-wrapper .title h1 {
    position: relative;
    margin: 40px 0 60px;
    color: #16527a;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1.2em
}

#controls-container .controls-wrapper .title h1::after {
    content: attr(data-title);
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.7em;
    line-height: 1em;
    transform: translate(-50%, -50%);
    opacity: .1;
    font-weight: 700;
    color: rgba(52, 152, 219, .9)
}

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

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

#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 3px 0;
    height: 50px;
    cursor: pointer;
    transition: all .3s;
    opacity: .5;
    grid-column-gap: 2px
}

#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div.noneed .delete,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div.noneed .hide {
    display: none
}

#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div.highlight,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div:hover {
    opacity: 1
}

#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div.highlight .hide,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div.highlight .delete,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div:hover .hide,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div:hover .delete {
    transform: translateX(0%)
}

#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div.highlight .hide:hover,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div.highlight .delete:hover,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div:hover .hide:hover,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div:hover .delete:hover {
    opacity: 1
}

#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div .gradient-box-container {
    grid-column: 1;
    grid-row: 1/span 2;
    border-radius: 0;
    z-index: 3;
    position: relative;
    display: block;
    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, .25em .25em;
    background-size: .5em .5em
}

#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div .gradient-box-container .gradient-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div .hide {
    transform: translateX(-110%);
    transition: all .2s;
    grid-column: 2;
    grid-row: 2;
    opacity: .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+)
}

#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div .hide.hidden {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTguMTA4Njk4OTEsMjAuODkxMzAxMSBDNC42MTcyMDgxNiwxOC44MzAxMTQ3IDMsMTYgMywxNiBDMywxNiA3LDkgMTYsOSBDMTcuMzA0NTEwNyw5IDE4LjUwMzk3NTIsOS4xNDcwNjQ2NiAxOS42MDE0Mzg4LDkuMzk4NTYxMjIgTDE2Ljg5ODY1MzEsMTIuMTAxMzQ2OSBDMTYuNjA5Nzg4NSwxMi4wMzUwMzQyIDE2LjMwODk4NTYsMTIgMTYsMTIgQzEzLjc5MDg2MDksMTIgMTIsMTMuNzkwODYwOSAxMiwxNiBDMTIsMTYuMzA4OTg1NiAxMi4wMzUwMzQyLDE2LjYwOTc4ODUgMTIuMTAxMzQ2OSwxNi44OTg2NTMxIEw4LjEwODY5ODkxLDIwLjg5MTMwMTEgTDguMTA4Njk4OTEsMjAuODkxMzAxMSBMOC4xMDg2OTg5MSwyMC44OTEzMDExIFogTTEyLjM5ODU2MSwyMi42MDE0MzkgQzEzLjQ5NjAyNDYsMjIuODUyOTM1NiAxNC42OTU0ODkyLDIzLjAwMDAwMDEgMTYsMjMgQzI1LDIyLjk5OTk5OSAyOSwxNiAyOSwxNiBDMjksMTYgMjcuMzgyNzkxOCwxMy4xNjk4ODU2IDIzLjg5MTMwMDgsMTEuMTA4Njk5MiBMMTkuODk4NjUzMSwxNS4xMDEzNDY5IEMxOS45NjQ5NjU4LDE1LjM5MDIxMTUgMjAsMTUuNjkxMDE0NCAyMCwxNiBDMjAsMTguMjA5MTM5MSAxOC4yMDkxMzkxLDIwIDE2LDIwIEMxNS42OTEwMTQ0LDIwIDE1LjM5MDIxMTUsMTkuOTY0OTY1OCAxNS4xMDEzNDY5LDE5Ljg5ODY1MzEgTDEyLjM5ODU2MSwyMi42MDE0MzkgTDEyLjM5ODU2MSwyMi42MDE0MzkgTDEyLjM5ODU2MSwyMi42MDE0MzkgWiBNMTksMTYgQzE5LjAwMDAwMDEsMTYuNzY3NzY2OSAxOC43MDcxMDY4LDE3LjUzNTUzMzkgMTguMTIxMzIwMywxOC4xMjEzMjAzIEMxNy41MzU1MzM5LDE4LjcwNzEwNjggMTYuNzY3NzY2OSwxOS4wMDAwMDAxIDE2LDE5IEwxOSwxNiBMMTksMTYgTDE5LDE2IFogTTE2LDEzIEMxNS4yMzIyMzMxLDEyLjk5OTk5OTkgMTQuNDY0NDY2MSwxMy4yOTI4OTMyIDEzLjg3ODY3OTcsMTMuODc4Njc5NyBDMTMuMjkyODkzMiwxNC40NjQ0NjYxIDEyLjk5OTk5OTksMTUuMjMyMjMzMSAxMywxNiBMMTYsMTMgTDE2LDEzIEwxNiwxMyBaIE0yNCw3IEw3LDI0IEw4LDI1IEwyNSw4IEwyNCw3IEwyNCw3IFoiLz48L2c+PC9nPjwvc3ZnPg==)
}

#controls-container .controls-wrapper .gradients-stack .gradients-stack-container>div .delete {
    transform: translateX(-110%);
    transition: all .2s;
    cursor: pointer;
    text-align: center;
    font-size: 1.2em;
    color: red;
    font-weight: 700;
    background-color: #e74c3c;
    color: #fff;
    grid-column: 2;
    grid-row: 1;
    opacity: .8
}

#controls-container .controls-wrapper .gradients-stack .add-gradient {
    opacity: 1;
    color: #196090;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #3498db;
    border-radius: 2px;
    cursor: pointer
}

#controls-container .controls-wrapper .gradients-stack .add-gradient:hover {
    background-color: #5faee3
}

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

#controls-container .controls-wrapper .colors-options-container::after,
#controls-container .controls-wrapper .colors-options-container::before {
    position: absolute;
    top: 10%;
    right: -12.5px;
    height: 80%;
    width: 1px;
    background-color: rgba(128, 128, 128, .1);
    content: ""
}

#controls-container .controls-wrapper .colors-options-container::before {
    left: -12.5px
}

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

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

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

#controls-container .controls-wrapper .color-stops-container .vc-chrome .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, .5), 0 0 1px 1px #000
}

#controls-container .controls-wrapper .color-presets-container {
    display: flex;
    flex-direction: column
}

#controls-container .controls-wrapper .color-presets-container .user-generated {
    border-bottom: 1px solid rgba(180, 180, 180, .4);
    display: grid;
    width: 100%;
    grid-template-columns: 70% 30%;
    padding: 10px
}

#controls-container .controls-wrapper .color-presets-container .user-generated .user-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, 35px);
    grid-gap: 10px;
    padding: 5px 0
}

#controls-container .controls-wrapper .color-presets-container .user-generated .user-presets::after {
    content: "";
    background-color: rgba(180, 180, 180, .4);
    position: absolute;
    right: 0;
    top: 20%;
    height: 80%;
    width: 1px
}

#controls-container .controls-wrapper .color-presets-container .user-generated .user-presets>span {
    height: 35px;
    cursor: pointer;
    border-radius: 3px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
    position: relative;
    z-index: 1;
    transition: all .2s
}

#controls-container .controls-wrapper .color-presets-container .user-generated .user-presets>span.selected {
    box-shadow: 0 0 4px 3px rgba(0, 0, 0, .7)
}

#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions {
    display: flex;
    justify-content: space-around;
    padding: 5px 0
}

#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions>div {
    filter: grayscale(1);
    opacity: .2;
    cursor: default;
    transition: all .2s;
    width: 45%;
    color: #00a5d2;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    border-radius: 2px;
    font-size: .9em;
    padding: 5px;
    background-color: #6ce0ff
}

#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions>div.save-preset {
    color: #1b7943;
    background-color: #54d98c
}

#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions.enable-save .save-preset,
#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions.enable-apply .apply-preset {
    opacity: 1;
    cursor: pointer;
    filter: grayscale(0)
}

#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions.enable-save .save-preset:hover,
#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions.enable-apply .apply-preset:hover {
    opacity: .7
}

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

#controls-container .controls-wrapper .color-presets-container .other-presets>.gradient-div {
    height: 35px;
    cursor: pointer;
    border-radius: 3px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
    position: relative;
    z-index: 1
}

#controls-container .controls-wrapper .color-presets-container .more-presets {
    opacity: 1;
    color: #6d2b00;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #d35400;
    border-radius: 2px;
    transition: all .2s;
    font-size: .7em;
    padding: 5px;
    margin: 10px;
    cursor: pointer
}

#controls-container .controls-wrapper .color-presets-container .more-presets:hover {
    background-color: #ff6a07
}

#controls-container .controls-wrapper .user-actions-container {
    display: flex;
    flex-direction: column
}

#controls-container .controls-wrapper .user-actions-container>div {
    opacity: 1;
    color: #623475;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #9b59b6;
    border-radius: 2px;
    transition: all .2s;
    font-size: .7em;
    padding: 5px;
    margin: 10px 0;
    cursor: pointer
}

#controls-container .controls-wrapper .user-actions-container>div.reset {
    color: #a82315;
    border: 1px solid #e74c3c;
    margin-top: auto
}

#controls-container .controls-wrapper .user-actions-container>div.reset:hover {
    background-color: #ed7669
}

#controls-container .controls-wrapper .user-actions-container>div:hover {
    background-color: #b07cc6;
    color: #fff
}

#controls-container .controls-wrapper .user-actions-container>div.share {
    animation: share-btn 15s forwards infinite;
    color: #fff;
    opacity: .8;
    background-color: #9b59b6
}

#controls-container .controls-wrapper .user-actions-container>div.share:hover {
    opacity: 1
}

@keyframes share-btn {
    10% {
        background-color: #3b5999;
        border-color: #3b5999
    }

    20% {
        background-color: #dd4b39;
        border-color: #dd4b39
    }

    30% {
        background-color: #ff5700;
        border-color: #ff5700
    }

    40% {
        background-color: #55acee;
        border-color: #55acee
    }

    50% {
        background-color: #0077b5;
        border-color: #0077b5
    }

    60% {
        background-color: #bd081c;
        border-color: #bd081c
    }

    70% {
        background-color: #34465d;
        border-color: #34465d
    }

    80% {
        background-color: #f57d00;
        border-color: #f57d00
    }

    90% {
        background-color: #c71610;
        border-color: #c71610
    }

    100% {
        background-color: #21759b;
        border-color: #21759b
    }
}

#controls-container .controls-wrapper .control {
    display: flex;
    font-size: .7em
}

#controls-container .controls-wrapper .control.toggle {
    color: #fff;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    height: 3em;
    width: 3em
}

#controls-container .controls-wrapper .control.toggle>div {
    display: flex;
    width: 100%;
    padding: .3em;
    background-color: #3498db;
    border-radius: 5px;
    transition: all .3s;
    opacity: 1;
    position: relative
}

#controls-container .controls-wrapper .control.toggle>div:after {
    content: attr(data-tip);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%) scale(0);
    background-color: inherit;
    border-radius: 3px;
    padding: .3em .5em;
    opacity: 0;
    transition: all .3s;
    pointer-events: none
}

#controls-container .controls-wrapper .control.toggle>div:hover {
    background-color: #258cd1
}

#controls-container .controls-wrapper .control.toggle>div:hover:after {
    transform: translate(-50%, -150%) scale(1);
    opacity: 1
}

#controls-container .controls-wrapper .control.toggle>div.off {
    opacity: .5
}

#controls-container .controls-wrapper .control.toggle>div .icon {
    flex-grow: 1;
    background-repeat: no-repeat;
    padding: 10px;
    display: block
}

#controls-container .controls-wrapper .control.range {
    padding: .9em 0;
    width: 100%;
    position: relative;
    display: flex
}

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

#controls-container .controls-wrapper .control.range .amount {
    width: 20%;
    display: inline-flex;
    font-size: .7em;
    justify-content: flex-end;
    align-items: center
}

#controls-container .controls-wrapper .control.range .range {
    width: 75%;
    display: inline-flex;
    align-items: center
}

#controls-container .controls-wrapper .control.color {
    margin-bottom: 10px;
    width: 100%;
    border: 1px solid rgba(180, 180, 180, .7);
    border-radius: 5px;
    overflow: hidden;
    padding: 3px 5px
}

#controls-container .controls-wrapper .control.color>span {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center
}

#controls-container .controls-wrapper .control.color .color-box {
    width: 20%;
    position: relative
}

#controls-container .controls-wrapper .control.color .color-box>span {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    cursor: pointer
}

#controls-container .controls-wrapper .control.color .color-box>span::after,
#controls-container .controls-wrapper .control.color .color-box>span::before {
    position: absolute;
    top: 0%;
    right: -30%;
    height: 100%;
    width: 1px;
    background-color: rgba(180, 180, 180, .7);
    content: ""
}

#controls-container .controls-wrapper .control.color .color-box>span::before {
    left: -30%
}

#controls-container .controls-wrapper .control.color .color-input {
    flex-grow: 1
}

#controls-container .controls-wrapper .control.color .color-stop {
    width: 30%
}

#controls-container .controls-wrapper .control.color .color-stop input {
    text-align: center
}

#controls-container .controls-wrapper .control.color .color-delete {
    width: 10%;
    transition: all .2s;
    font-size: 2em;
    cursor: pointer;
    opacity: .5
}

#controls-container .controls-wrapper .control.color .color-delete:hover:not(.disabled) {
    opacity: 1
}

#controls-container .controls-wrapper .control.color .color-delete.disabled {
    opacity: 0;
    cursor: default
}

#controls-container .controls-wrapper .control.color input {
    padding: 5px 10px;
    border: 0 solid gray;
    width: 100%;
    outline: 0
}

#controls-container .controls-wrapper .control.circle {
    position: relative;
    justify-content: center
}

#controls-container .controls-wrapper .control.circle svg g circle:last-child {
    cursor: pointer
}

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

#controls-container .controls-wrapper .control.circle .amount input {
    border: 0 solid;
    width: auto;
    text-align: center;
    font-size: 1.2em
}

#controls-container .controls-wrapper .control.circle .amount span:last-child {
    font-size: .7em
}

#controls-container .controls-wrapper .control.switch {
    display: flex;
    margin: 1.2em 0;
    color: rgba(180, 180, 180, .5);
    flex-direction: column
}

#controls-container .controls-wrapper .control.switch input {
    display: none
}

#controls-container .controls-wrapper .control.switch input:checked+label {
    background-color: #3498db
}

#controls-container .controls-wrapper .control.switch input:checked+label .switch {
    left: 55%
}

#controls-container .controls-wrapper .control.switch label {
    width: 30px;
    height: 15px;
    border-radius: 10px;
    background-color: gray;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    transition: all .3s;
    cursor: pointer
}

#controls-container .controls-wrapper .control.switch label span {
    background-color: #fff;
    height: 80%;
    width: 40%;
    position: absolute;
    border-radius: 50%;
    left: 5%;
    top: 8%;
    transition: all .3s
}

input[type=range] {
    border: 1px solid transparent;
    width: 100%;
    -webkit-appearance: none
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: #ddd;
    border: none;
    border-radius: 3px;
    -webkit-transition: all .2s;
    transition: all .2s
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #3498db;
    margin-top: -4px
}

input[type=range]:focus {
    outline: none
}

input[type=range]:focus::-moz-range-track {
    background: #75b9e7
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #75b9e7
}

input[type=range]:focus::-ms-fill-lower {
    background: #75b9e7
}

input[type=range]:focus::-ms-fill-upper {
    background: #75b9e7
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 3px;
    background: #ddd;
    border: none;
    border-radius: 3px;
    -moz-transition: all .2s;
    transition: all .2s;
    z-index: 2
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #3498db;
    z-index: 2
}

input[type=range]:-moz-focusring {
    outline: 1px solid #fff;
    outline-offset: -1px
}

input[type=range]::-ms-track {
    width: 100%;
    height: 3px;
    background: 0 0;
    border-color: transparent;
    border-width: 6px 0;
    color: transparent
}

input[type=range]::-ms-fill-lower {
    background: #ddd;
    border-radius: 10px
}

input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px
}

input[type=range]::-ms-thumb {
    border: none;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #3498db;
    transform: translateY(20%)
}

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

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

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

.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(.8) perspective(500px) rotateX(2deg)
    }

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

.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)
    }
}