/*!
 * MZUI: doc - v1.0.1 - 2018-01-09
 * Copyright (c) 2018 cnezsoft.com; Licensed MIT
 */

.heading.affix .icon-github
{
    font-size: 1rem;
}
#partial
{
    padding: 0;
}
@media (min-width: 30rem)
{
    #partial
    {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}
.avatar-xl > small
{
    font-size: .9rem;
}
.icon-5x
{
    font-size: 3.5rem;
}
.path-zui-36
{
    position: relative;

    display: inline-block;
    overflow: hidden;

    width: 3.6rem;
    height: 3.6rem;

    border-radius: 1.8rem;
    background-color: #fff;
}
.path-zui-36:before,
.path-zui-36:after
{
    position: absolute;
    left: 1.1rem;

    display: block;

    width: 1.4rem;
    height: .4rem;

    content: ' ';

    border: .2rem solid #3280fc;
}
.path-zui-36:before
{
    top: .9rem;

    border-bottom: none;
}
.path-zui-36:after
{
    top: 2.3rem;

    border-top: none;
}
.path-zui-36 .path-1,
.path-zui-36 .path-2,
.path-zui-36 .path-1:before,
.path-zui-36 .path-1:after,
.path-zui-36 .path-2:before
{
    position: absolute;

    display: block;

    width: .2rem;
    height: .2rem;

    content: ' ';

    background-color: #3280fc;
}
.path-zui-36 .path-1
{
    top: 1.9rem;
    left: 1.5rem;
}
.path-zui-36 .path-1:before,
.path-zui-36 .path-2:before
{
    top: .2rem;
    left: -.2rem;
}
.path-zui-36 .path-1:after
{
    top: -.2rem;
    left: .2rem;
}
.path-zui-36 .path-2
{
    top: 1.3rem;
    left: 2.1rem;
}
#indexPage
{
    margin-top: -2.4rem;
}
#indexPage .graph1 > .avatar + .avatar
{
    margin-left: -.5rem;
}
#indexPage .graph1 .avatar-xl > small
{
    color: #fff;
}
#indexPage .graph2
{
    width: 95%;
    max-width: 25rem;
    margin: .5rem auto;
}
#indexPage .graph2 .tile
{
    font-size: .6rem;

    padding: .5rem .1rem;
}
#indexPage .graph5 .large
{
    font-size: 2.5rem;
}
#indexPage > .content
{
    padding: 1.5rem .5rem;
}
body.has-index-content
{
    box-shadow: inset 0 2.4rem 0 0 #3280fc;
}
#leadContent
{
    padding: 1.5rem;
}
#leadContent > h1
{
    font-size: 1.5rem;
    font-weight: normal;
}
#pageLoading
{
    display: none;
}
.has-display-loading #pageLoading
{
    display: block;
}
pre em
{
    font-weight: bold;

    color: #ea644a;
}
#fabNav.waiting
{
    transform: translate(0, 100%);

    opacity: 0;
}
#fabNav.open
{
    transform: translate(0, 0) !important;
}
#fabNav.open > a
{
    box-shadow: none !important;
}
#fabNav.open > a > .icon:before
{
    content: '\d7';
}
body.has-index-content #fabNav
{
    display: none;
}
#tocModal
{
    top: auto;
}
#tocList
{
    padding: .25rem 0;
}
#tocList > .item
{
    padding-right: 1.5em;
    padding-left: 1.5em;
}
.fab > .btn + .btn
{
    margin-left: 0 !important;
}
.colorset
{
    padding-top: .5rem;
    padding-bottom: .5rem;

    border-bottom: .05rem dashed #e6e6e6;
}
.colorset:before,
.colorset:after
{
    display: table;

    content: ' ';
}
.colorset:after
{
    clear: both;
}
.color-tile
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
}
.color-tile:after,
.color-tile:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.color-tile:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.color-tile:hover:after,
.color-tile:hover:before
{
    opacity: 1;
}
.colorset .color-primary
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #0462f7;
    background-color: #3280fc;
}
.colorset .color-primary:after,
.colorset .color-primary:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-primary:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-primary:hover:after,
.colorset .color-primary:hover:before
{
    opacity: 1;
}
.colorset .color-primary:after,
.colorset .color-primary:before
{
    color: #fff;
    background-color: #3280fc;
}
.colorset .color-primary:after
{
    content: '#3280fc';
}
.colorset .color-primary:before
{
    content: 'color-primary';
}
.colorset .color-primary:hover:before
{
    content: '217,97%,59%';
}
.colorset .color-secondary
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #10479f;
    background-color: #145ccd;
}
.colorset .color-secondary:after,
.colorset .color-secondary:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-secondary:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-secondary:hover:after,
.colorset .color-secondary:hover:before
{
    opacity: 1;
}
.colorset .color-secondary:after,
.colorset .color-secondary:before
{
    color: #fff;
    background-color: #145ccd;
}
.colorset .color-secondary:after
{
    content: '#145ccd';
}
.colorset .color-secondary:before
{
    content: 'color-secondary';
}
.colorset .color-secondary:hover:before
{
    content: '217,82%,44%';
}
.colorset .color-pale
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #c4d8ed;
    background-color: #ebf2f9;
}
.colorset .color-pale:after,
.colorset .color-pale:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-pale:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-pale:hover:after,
.colorset .color-pale:hover:before
{
    opacity: 1;
}
.colorset .color-pale:after,
.colorset .color-pale:before
{
    color: #333;
    background-color: #ebf2f9;
}
.colorset .color-pale:after
{
    content: '#ebf2f9';
}
.colorset .color-pale:before
{
    content: 'color-pale';
}
.colorset .color-pale:hover:before
{
    content: '210,54%,95%';
}
.colorset .color-fore
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #1a1a1a;
    background-color: #333;
}
.colorset .color-fore:after,
.colorset .color-fore:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-fore:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-fore:hover:after,
.colorset .color-fore:hover:before
{
    opacity: 1;
}
.colorset .color-fore:after,
.colorset .color-fore:before
{
    color: #fff;
    background-color: #333;
}
.colorset .color-fore:after
{
    content: '#333';
}
.colorset .color-fore:before
{
    content: 'color-fore';
}
.colorset .color-fore:hover:before
{
    content: '0,0%,20%';
}
.colorset .color-back
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #e6e6e6;
    background-color: #fff;
}
.colorset .color-back:after,
.colorset .color-back:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-back:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-back:hover:after,
.colorset .color-back:hover:before
{
    opacity: 1;
}
.colorset .color-back:after,
.colorset .color-back:before
{
    color: #333;
    background-color: #fff;
}
.colorset .color-back:after
{
    content: '#fff';
}
.colorset .color-back:before
{
    content: 'color-back';
}
.colorset .color-back:hover:before
{
    content: '0,0%,100%';
}
.colorset .color-gray-darker
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, .865);
    background-color: rgba(0, 0, 0, .865);
}
.colorset .color-gray-darker:after,
.colorset .color-gray-darker:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-gray-darker:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-gray-darker:hover:after,
.colorset .color-gray-darker:hover:before
{
    opacity: 1;
}
.colorset .color-gray-darker:after,
.colorset .color-gray-darker:before
{
    color: #fff;
    background-color: rgba(0, 0, 0, .865);
}
.colorset .color-gray-darker:after
{
    content: 'rgba(0, 0, 0, 0.865)';
}
.colorset .color-gray-darker:before
{
    content: 'color-gray-darker';
}
.colorset .color-gray-darker:hover:before
{
    content: '0,0%,0%';
}
.colorset .color-gray-dark
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, .8);
    background-color: rgba(0, 0, 0, .8);
}
.colorset .color-gray-dark:after,
.colorset .color-gray-dark:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-gray-dark:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-gray-dark:hover:after,
.colorset .color-gray-dark:hover:before
{
    opacity: 1;
}
.colorset .color-gray-dark:after,
.colorset .color-gray-dark:before
{
    color: #fff;
    background-color: rgba(0, 0, 0, .8);
}
.colorset .color-gray-dark:after
{
    content: 'rgba(0, 0, 0, 0.8)';
}
.colorset .color-gray-dark:before
{
    content: 'color-gray-dark';
}
.colorset .color-gray-dark:hover:before
{
    content: '0,0%,0%';
}
.colorset .color-gray
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, .5);
    background-color: rgba(0, 0, 0, .5);
}
.colorset .color-gray:after,
.colorset .color-gray:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-gray:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-gray:hover:after,
.colorset .color-gray:hover:before
{
    opacity: 1;
}
.colorset .color-gray:after,
.colorset .color-gray:before
{
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
}
.colorset .color-gray:after
{
    content: 'rgba(0, 0, 0, 0.5)';
}
.colorset .color-gray:before
{
    content: 'color-gray';
}
.colorset .color-gray:hover:before
{
    content: '0,0%,0%';
}
.colorset .color-gray-light
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, .133);
    background-color: rgba(0, 0, 0, .133);
}
.colorset .color-gray-light:after,
.colorset .color-gray-light:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-gray-light:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-gray-light:hover:after,
.colorset .color-gray-light:hover:before
{
    opacity: 1;
}
.colorset .color-gray-light:after,
.colorset .color-gray-light:before
{
    color: #fff;
    background-color: rgba(0, 0, 0, .133);
}
.colorset .color-gray-light:after
{
    content: 'rgba(0, 0, 0, 0.133)';
}
.colorset .color-gray-light:before
{
    content: 'color-gray-light';
}
.colorset .color-gray-light:hover:before
{
    content: '0,0%,0%';
}
.colorset .color-gray-lighter
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, .103);
    background-color: rgba(0, 0, 0, .103);
}
.colorset .color-gray-lighter:after,
.colorset .color-gray-lighter:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-gray-lighter:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-gray-lighter:hover:after,
.colorset .color-gray-lighter:hover:before
{
    opacity: 1;
}
.colorset .color-gray-lighter:after,
.colorset .color-gray-lighter:before
{
    color: #fff;
    background-color: rgba(0, 0, 0, .103);
}
.colorset .color-gray-lighter:after
{
    content: 'rgba(0, 0, 0, 0.10300000000000001)';
}
.colorset .color-gray-lighter:before
{
    content: 'color-gray-lighter';
}
.colorset .color-gray-lighter:hover:before
{
    content: '0,0%,0%';
}
.colorset .color-gray-pale
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, .055);
    background-color: rgba(0, 0, 0, .055);
}
.colorset .color-gray-pale:after,
.colorset .color-gray-pale:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-gray-pale:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-gray-pale:hover:after,
.colorset .color-gray-pale:hover:before
{
    opacity: 1;
}
.colorset .color-gray-pale:after,
.colorset .color-gray-pale:before
{
    color: #fff;
    background-color: rgba(0, 0, 0, .055);
}
.colorset .color-gray-pale:after
{
    content: 'rgba(0, 0, 0, 0.055)';
}
.colorset .color-gray-pale:before
{
    content: 'color-gray-pale';
}
.colorset .color-gray-pale:hover:before
{
    content: '0,0%,0%';
}
.colorset .color-white
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #e6e6e6;
    background-color: #fff;
}
.colorset .color-white:after,
.colorset .color-white:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-white:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-white:hover:after,
.colorset .color-white:hover:before
{
    opacity: 1;
}
.colorset .color-white:after,
.colorset .color-white:before
{
    color: #333;
    background-color: #fff;
}
.colorset .color-white:after
{
    content: '#fff';
}
.colorset .color-white:before
{
    content: 'color-white';
}
.colorset .color-white:hover:before
{
    content: '0,0%,100%';
}
.colorset .color-black
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #000;
    background-color: #000;
}
.colorset .color-black:after,
.colorset .color-black:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-black:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-black:hover:after,
.colorset .color-black:hover:before
{
    opacity: 1;
}
.colorset .color-black:after,
.colorset .color-black:before
{
    color: #fff;
    background-color: #000;
}
.colorset .color-black:after
{
    content: '#000';
}
.colorset .color-black:before
{
    content: 'color-black';
}
.colorset .color-black:hover:before
{
    content: '0,0%,0%';
}
.colorset .color-red
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #e53d1c;
    background-color: #ea644a;
}
.colorset .color-red:after,
.colorset .color-red:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-red:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-red:hover:after,
.colorset .color-red:hover:before
{
    opacity: 1;
}
.colorset .color-red:after,
.colorset .color-red:before
{
    color: #fff;
    background-color: #ea644a;
}
.colorset .color-red:after
{
    content: '#ea644a';
}
.colorset .color-red:before
{
    content: 'color-red';
}
.colorset .color-red:hover:before
{
    content: '10,79%,60%';
}
.colorset .color-yellow
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #d5890e;
    background-color: #f1a325;
}
.colorset .color-yellow:after,
.colorset .color-yellow:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-yellow:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-yellow:hover:after,
.colorset .color-yellow:hover:before
{
    opacity: 1;
}
.colorset .color-yellow:after,
.colorset .color-yellow:before
{
    color: #333;
    background-color: #f1a325;
}
.colorset .color-yellow:after
{
    content: '#f1a325';
}
.colorset .color-yellow:before
{
    content: 'color-yellow';
}
.colorset .color-yellow:hover:before
{
    content: '37,88%,55%';
}
.colorset .color-green
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #2c8931;
    background-color: #38b03f;
}
.colorset .color-green:after,
.colorset .color-green:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-green:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-green:hover:after,
.colorset .color-green:hover:before
{
    opacity: 1;
}
.colorset .color-green:after,
.colorset .color-green:before
{
    color: #fff;
    background-color: #38b03f;
}
.colorset .color-green:after
{
    content: '#38b03f';
}
.colorset .color-green:before
{
    content: 'color-green';
}
.colorset .color-green:hover:before
{
    content: '124,52%,45%';
}
.colorset .color-blue
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #028b9d;
    background-color: #03b8cf;
}
.colorset .color-blue:after,
.colorset .color-blue:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-blue:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-blue:hover:after,
.colorset .color-blue:hover:before
{
    opacity: 1;
}
.colorset .color-blue:after,
.colorset .color-blue:before
{
    color: #fff;
    background-color: #03b8cf;
}
.colorset .color-blue:after
{
    content: '#03b8cf';
}
.colorset .color-blue:before
{
    content: 'color-blue';
}
.colorset .color-blue:hover:before
{
    content: '187,97%,41%';
}
.colorset .color-brown
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #996337;
    background-color: #bd7b46;
}
.colorset .color-brown:after,
.colorset .color-brown:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-brown:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-brown:hover:after,
.colorset .color-brown:hover:before
{
    opacity: 1;
}
.colorset .color-brown:after,
.colorset .color-brown:before
{
    color: #fff;
    background-color: #bd7b46;
}
.colorset .color-brown:after
{
    content: '#bd7b46';
}
.colorset .color-brown:before
{
    content: 'color-brown';
}
.colorset .color-brown:hover:before
{
    content: '27,47%,51%';
}
.colorset .color-purple
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #6c4aa1;
    background-color: #8666b8;
}
.colorset .color-purple:after,
.colorset .color-purple:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-purple:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-purple:hover:after,
.colorset .color-purple:hover:before
{
    opacity: 1;
}
.colorset .color-purple:after,
.colorset .color-purple:before
{
    color: #fff;
    background-color: #8666b8;
}
.colorset .color-purple:after
{
    content: '#8666b8';
}
.colorset .color-purple:before
{
    content: 'color-purple';
}
.colorset .color-purple:hover:before
{
    content: '263,37%,56%';
}
.colorset .color-light
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #e6e6e6;
    background-color: #fff;
}
.colorset .color-light:after,
.colorset .color-light:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-light:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-light:hover:after,
.colorset .color-light:hover:before
{
    opacity: 1;
}
.colorset .color-light:after,
.colorset .color-light:before
{
    color: #333;
    background-color: #fff;
}
.colorset .color-light:after
{
    content: '#fff';
}
.colorset .color-light:before
{
    content: 'color-light';
}
.colorset .color-light:hover:before
{
    content: '0,0%,100%';
}
.colorset .color-dark
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #1a1a1a;
    background-color: #333;
}
.colorset .color-dark:after,
.colorset .color-dark:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-dark:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-dark:hover:after,
.colorset .color-dark:hover:before
{
    opacity: 1;
}
.colorset .color-dark:after,
.colorset .color-dark:before
{
    color: #fff;
    background-color: #333;
}
.colorset .color-dark:after
{
    content: '#333';
}
.colorset .color-dark:before
{
    content: 'color-dark';
}
.colorset .color-dark:hover:before
{
    content: '0,0%,20%';
}
.colorset .color-success
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #2c8931;
    background-color: #38b03f;
}
.colorset .color-success:after,
.colorset .color-success:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-success:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-success:hover:after,
.colorset .color-success:hover:before
{
    opacity: 1;
}
.colorset .color-success:after,
.colorset .color-success:before
{
    color: #fff;
    background-color: #38b03f;
}
.colorset .color-success:after
{
    content: '#38b03f';
}
.colorset .color-success:before
{
    content: 'color-success';
}
.colorset .color-success:hover:before
{
    content: '124,52%,45%';
}
.colorset .color-warning
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #d5890e;
    background-color: #f1a325;
}
.colorset .color-warning:after,
.colorset .color-warning:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-warning:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-warning:hover:after,
.colorset .color-warning:hover:before
{
    opacity: 1;
}
.colorset .color-warning:after,
.colorset .color-warning:before
{
    color: #333;
    background-color: #f1a325;
}
.colorset .color-warning:after
{
    content: '#f1a325';
}
.colorset .color-warning:before
{
    content: 'color-warning';
}
.colorset .color-warning:hover:before
{
    content: '37,88%,55%';
}
.colorset .color-danger
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #e53d1c;
    background-color: #ea644a;
}
.colorset .color-danger:after,
.colorset .color-danger:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-danger:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-danger:hover:after,
.colorset .color-danger:hover:before
{
    opacity: 1;
}
.colorset .color-danger:after,
.colorset .color-danger:before
{
    color: #fff;
    background-color: #ea644a;
}
.colorset .color-danger:after
{
    content: '#ea644a';
}
.colorset .color-danger:before
{
    content: 'color-danger';
}
.colorset .color-danger:hover:before
{
    content: '10,79%,60%';
}
.colorset .color-info
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #028b9d;
    background-color: #03b8cf;
}
.colorset .color-info:after,
.colorset .color-info:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-info:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-info:hover:after,
.colorset .color-info:hover:before
{
    opacity: 1;
}
.colorset .color-info:after,
.colorset .color-info:before
{
    color: #fff;
    background-color: #03b8cf;
}
.colorset .color-info:after
{
    content: '#03b8cf';
}
.colorset .color-info:before
{
    content: 'color-info';
}
.colorset .color-info:hover:before
{
    content: '187,97%,41%';
}
.colorset .color-important
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #996337;
    background-color: #bd7b46;
}
.colorset .color-important:after,
.colorset .color-important:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-important:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-important:hover:after,
.colorset .color-important:hover:before
{
    opacity: 1;
}
.colorset .color-important:after,
.colorset .color-important:before
{
    color: #fff;
    background-color: #bd7b46;
}
.colorset .color-important:after
{
    content: '#bd7b46';
}
.colorset .color-important:before
{
    content: 'color-important';
}
.colorset .color-important:hover:before
{
    content: '27,47%,51%';
}
.colorset .color-special
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #6c4aa1;
    background-color: #8666b8;
}
.colorset .color-special:after,
.colorset .color-special:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-special:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-special:hover:after,
.colorset .color-special:hover:before
{
    opacity: 1;
}
.colorset .color-special:after,
.colorset .color-special:before
{
    color: #fff;
    background-color: #8666b8;
}
.colorset .color-special:after
{
    content: '#8666b8';
}
.colorset .color-special:before
{
    content: 'color-special';
}
.colorset .color-special:hover:before
{
    content: '263,37%,56%';
}
.colorset .color-success-pale
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #b6e8bb;
    background-color: #ddf4df;
}
.colorset .color-success-pale:after,
.colorset .color-success-pale:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-success-pale:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-success-pale:hover:after,
.colorset .color-success-pale:hover:before
{
    opacity: 1;
}
.colorset .color-success-pale:after,
.colorset .color-success-pale:before
{
    color: #333;
    background-color: #ddf4df;
}
.colorset .color-success-pale:after
{
    content: '#ddf4df';
}
.colorset .color-success-pale:before
{
    content: 'color-success-pale';
}
.colorset .color-success-pale:hover:before
{
    content: '125,51%,91%';
}
.colorset .color-warning-pale
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #ffdea2;
    background-color: #fff0d5;
}
.colorset .color-warning-pale:after,
.colorset .color-warning-pale:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-warning-pale:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-warning-pale:hover:after,
.colorset .color-warning-pale:hover:before
{
    opacity: 1;
}
.colorset .color-warning-pale:after,
.colorset .color-warning-pale:before
{
    color: #333;
    background-color: #fff0d5;
}
.colorset .color-warning-pale:after
{
    content: '#fff0d5';
}
.colorset .color-warning-pale:before
{
    content: 'color-warning-pale';
}
.colorset .color-warning-pale:hover:before
{
    content: '39,100%,92%';
}
.colorset .color-danger-pale
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #ffbaad;
    background-color: #ffe5e0;
}
.colorset .color-danger-pale:after,
.colorset .color-danger-pale:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-danger-pale:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-danger-pale:hover:after,
.colorset .color-danger-pale:hover:before
{
    opacity: 1;
}
.colorset .color-danger-pale:after,
.colorset .color-danger-pale:before
{
    color: #333;
    background-color: #ffe5e0;
}
.colorset .color-danger-pale:after
{
    content: '#ffe5e0';
}
.colorset .color-danger-pale:before
{
    content: 'color-danger-pale';
}
.colorset .color-danger-pale:hover:before
{
    content: '10,100%,94%';
}
.colorset .color-info-pale
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #b6e5e9;
    background-color: #ddf3f5;
}
.colorset .color-info-pale:after,
.colorset .color-info-pale:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-info-pale:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-info-pale:hover:after,
.colorset .color-info-pale:hover:before
{
    opacity: 1;
}
.colorset .color-info-pale:after,
.colorset .color-info-pale:before
{
    color: #333;
    background-color: #ddf3f5;
}
.colorset .color-info-pale:after
{
    content: '#ddf3f5';
}
.colorset .color-info-pale:before
{
    content: 'color-info-pale';
}
.colorset .color-info-pale:hover:before
{
    content: '185,55%,91%';
}
.colorset .color-important-pale
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #ecd0b9;
    background-color: #f7ebe1;
}
.colorset .color-important-pale:after,
.colorset .color-important-pale:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-important-pale:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-important-pale:hover:after,
.colorset .color-important-pale:hover:before
{
    opacity: 1;
}
.colorset .color-important-pale:after,
.colorset .color-important-pale:before
{
    color: #333;
    background-color: #f7ebe1;
}
.colorset .color-important-pale:after
{
    content: '#f7ebe1';
}
.colorset .color-important-pale:before
{
    content: 'color-important-pale';
}
.colorset .color-important-pale:hover:before
{
    content: '27,58%,93%';
}
.colorset .color-special-pale
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #d7bbff;
    background-color: #f5eeff;
}
.colorset .color-special-pale:after,
.colorset .color-special-pale:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-special-pale:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-special-pale:hover:after,
.colorset .color-special-pale:hover:before
{
    opacity: 1;
}
.colorset .color-special-pale:after,
.colorset .color-special-pale:before
{
    color: #333;
    background-color: #f5eeff;
}
.colorset .color-special-pale:after
{
    content: '#f5eeff';
}
.colorset .color-special-pale:before
{
    content: 'color-special-pale';
}
.colorset .color-special-pale:hover:before
{
    content: '265,100%,97%';
}
.colorset .color-1
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, .055);
    background-color: rgba(8, 8, 8, .055);
}
.colorset .color-1:after,
.colorset .color-1:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-1:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-1:hover:after,
.colorset .color-1:hover:before
{
    opacity: 1;
}
.colorset .color-1:after,
.colorset .color-1:before
{
    color: #fff;
    background-color: rgba(8, 8, 8, .055);
}
.colorset .color-1:after
{
    content: 'rgba(8, 8, 8, 0.055)';
}
.colorset .color-1:before
{
    content: 'color-1';
}
.colorset .color-1:hover:before
{
    content: '0,0%,3%';
}
.colorset .color-2
{
    position: relative;

    display: block;
    float: left;

    width: 6.95rem;
    height: 5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    color: #fff;
    border: .05rem solid rgba(0, 0, 0, .5);
    border-color: #dcdcdc;
    background-color: #f5f5f5;
}
.colorset .color-2:after,
.colorset .color-2:before
{
    font-size: .6rem;
    line-height: 1.2rem;

    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1.2rem;
    padding: 0 .25rem;

    transition: .4s cubic-bezier(.175, .885, .32, 1);
    text-align: left;

    opacity: .5;
    color: rgba(255, 255, 255, .7);
}
.colorset .color-2:after
{
    top: 0;
    bottom: auto;

    text-align: right;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    background-color: transparent;
}
.colorset .color-2:hover:after,
.colorset .color-2:hover:before
{
    opacity: 1;
}
.colorset .color-2:after,
.colorset .color-2:before
{
    color: #333;
    background-color: #f5f5f5;
}
.colorset .color-2:after
{
    content: '#f5f5f5';
}
.colorset .color-2:before
{
    content: 'color-2';
}
.colorset .color-2:hover:before
{
    content: '0,0%,96%';
}