body {
    --VWX: calc(var(--VW) * 1px);
    --VHX: calc(var(--VH) * 1px);
    --VWidth: var(--VWX,100vw);
    --VHeight: var(--VHX,100vh);
    --CPT-BDR: 6em;
    --CPT-FF: "Manrope","Arial","Verdana","PingFang","Helvetica",system-ui,sans-serif
}

.btw {
    --font-weight: 800
}

@media only screen and (min-width: 1001px) {
    body,html {
        scroll-behavior:smooth
    }
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 320px;
    min-height: var(--VHeight)
}

body {
    --HeaderHighlight-h: 51;
    --HeaderHighlight-s: 100%;
    --HeaderHighlight-l: 50%;
    --HeaderHighlight-a: 50%;
    --HeaderHeight: 8em;
    --PagePadding: 4em
}

@media only screen and (max-width: 1000px) {
    body {
        --HeaderHeight:6em;
        --PagePadding: 3em
    }
}

@media only screen and (max-width: 640px) {
    body {
        --HeaderHeight:5em;
        --PagePadding: 2em
    }
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--HeaderBG,unset);
    color: var(--HeaderColor,#fff);
    box-shadow: var(--HeaderFloatShadow,unset);
    transition: background .2s,color .2s,box-shadow .2s
}

#header.float {
    --HeaderBG: #fff;
    --HeaderColor: rgba(0 0 0/80%);
    --HeaderHighlight-h: 0;
    --HeaderHighlight-s: 0%;
    --HeaderHighlight-l: 0%;
    --HeaderHighlight-a: 20%;
    --HeaderFloatShadow: hsl(0 0% 0%/.1) 0 0 2em
}

@media only screen and (min-width: 1001px) {
    #header>.inner {
        max-width:104em;
        margin: 0 auto;
        padding: 0 var(--PagePadding);
        height: var(--HeaderHeight);
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    #header_logo svg {
        vertical-align: top;
        width: 8.666667em;
        height: 2em
    }

    #header_logo span {
        display: none
    }

    #header_nav ul {
        display: flex
    }

    #header_nav ul li {
        position: relative
    }

    #header_nav ul li>a {
        display: block;
        font-weight: 800;
        text-transform: uppercase;
        padding: .75em 2em;
        border-radius: .25em;
        transition: background .2s;
        cursor: pointer
    }

    #header_nav ul span {
        display: block;
        font-size: 1.25em;
        height: 24px;
        line-height: 24px
    }

    #header_nav ul span:before {
        content: none!important
    }

    #header_nav ul li>a:hover {
        color: hsl(var(--HeaderHighlight-h) var(--HeaderHighlight-s) var(--HeaderHighlight-l) / 1);
        background-color: hsl(var(--HeaderHighlight-h) var(--HeaderHighlight-s) var(--HeaderHighlight-l) / .1)
    }

    #header_nav ul li>a.on {
        color: hsl(var(--HeaderHighlight-h) var(--HeaderHighlight-s) var(--HeaderHighlight-l) / 1);
        background-image: linear-gradient(90deg,hsl(var(--HeaderHighlight-h) var(--HeaderHighlight-s) var(--HeaderHighlight-l) / 0),hsl(var(--HeaderHighlight-h) var(--HeaderHighlight-s) var(--HeaderHighlight-l) / var(--HeaderHighlight-a)),hsl(var(--HeaderHighlight-h) var(--HeaderHighlight-s) var(--HeaderHighlight-l) / 0));
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: calc(100% - 2em) 2px
    }

    #header_nav .dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
        min-width: 100%;
        box-sizing: border-box;
        background: hsl(var(--HeaderHighlight-h) var(--HeaderHighlight-s) var(--HeaderHighlight-l) / 10%);
        padding: 1em 0;
        margin: -2px 0;
        border-radius: .5em;
        transition: .2s;
        visibility: hidden;
        opacity: 0;
        transform: translateY(1em)
    }

    #header_nav ul li:hover .dropdown {
        visibility: visible;
        opacity: 1;
        transform: none
    }

    #header_nav .dropdown a {
        display: block;
        padding: 1em 2em;
        text-align: center
    }

    #header_nav .dropdown a span {
        display: none
    }

    #header_nav .dropdown a svg {
        vertical-align: top;
        width: auto;
        height: 1.333334em;
        fill: currentColor
    }

    #header.float #header_nav .dropdown {
        background: #fff;
        box-shadow: var(--HeaderFloatShadow,unset)
    }

    #header .site_menu_ctrl_off,.site_menu_ctrl {
        display: none
    }
}

@media only screen and (max-width: 1000px) {
    body {
        --SiteMenuWidth:min(30em,calc(var(--VWidth) - var(--HeaderHeight)))
    }

    #header>.site_menu_ctrl {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--HeaderHeight);
        transition: .2s
    }

    #header>.site_menu_ctrl>.seagm-logo {
        width: 6em;
        height: 1.333334em;
        vertical-align: top;
        margin: 0 2em;
        opacity: .5
    }

    #header .site_menu_ctrl_on {
        display: block
    }

    #header .site_menu_ctrl_on>span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--HeaderHeight);
        height: var(--HeaderHeight)
    }

    #header .site_menu_ctrl_on>span:before {
        content: var(--i,attr(icon));
        display: block;
        font-size: 2em;
        width: 1em;
        height: 1em;
        line-height: 1;
        overflow: hidden;
        --IconFF: var(--IconFF2)
    }

    #header>.inner {
        position: fixed;
        top: 0;
        left: calc(var(--SiteMenuWidth) * -1);
        bottom: 0;
        right: unset;
        z-index: 999;
        display: flex;
        flex-direction: column;
        width: var(--SiteMenuWidth);
        height: 100%;
        box-sizing: border-box;
        transition: .2s;
        background: #fff;
        color: #000
    }

    #header_logo {
        flex: none;
        padding: 4em;
        text-align: center;
        background: linear-gradient(90deg,rgba(0 0 0/0),rgba(0 0 0/10%),rgba(0 0 0/0)) no-repeat center bottom/100% 1px
    }

    #header_logo:after {
        content: '';
        display: block;
        width: 8em;
        height: 8em;
        margin: 0 auto -4em;
        background: url(https://corp.seagm.com/skin/images/art/icon_tigoo2-c8e482db78.png) no-repeat center/cover
    }

    #header_logo svg {
        display: block;
        vertical-align: top;
        width: 100%;
        height: 2em
    }

    #header_logo span {
        display: block;
        opacity: .25;
        margin: 1em 0 2em;
        transform: scale(.8)
    }

    #header_logo i {
        font-style: normal
    }

    #header_nav {
        flex: auto;
        padding: 2em;
        overflow: hidden;
        overflow-y: auto
    }

    #header_nav ul li>a {
        display: block;
        font-family: var(--SiteFF);
        font-weight: 700;
        text-transform: uppercase;
        padding: 1em 1.5em;
        border-radius: 2em;
        transition: .2s
    }

    #header_nav ul li>a span {
        display: grid;
        grid-template-columns: 2em 1fr;
        grid-gap: 1.5em;
        align-items: center
    }

    #header_nav ul li>a span:before {
        content: attr(icon);
        display: block;
        font-size: 2em;
        --IconFF: var(--IconFF2);
        opacity: var(--IconOpacity,.5)
    }

    #header_nav ul li>a span[icon-brand=seagm]:before {
        transform: scale(1.2)
    }

    #header_nav ul li>a a.on {
        background: hsl(44 99% 53%/40%);
        color: #000;
        --IconOpacity: 1
    }

    #header_nav .dropdown {
        margin-left: 4em;
        padding: 1em 0
    }

    #header_nav .dropdown a {
        display: block;
        padding: 1em
    }

    #header_nav .dropdown a span {
        display: none
    }

    #header_nav .dropdown a svg {
        vertical-align: top;
        width: auto;
        height: 1.25em;
        fill: currentColor
    }

    #content {
        overflow: hidden;
        position: relative
    }

    #content>.site_menu_ctrl_off {
        position: fixed;
        top: 0;
        left: var(--SiteMenuWidth);
        right: 0;
        bottom: 0;
        z-index: 999;
        display: none
    }

    #content>.inner {
        transition: .2s
    }

    body {
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    body::-webkit-scrollbar {
        width: 0
    }

    body.site_menu_activated {
        overflow: hidden
    }

    body.site_menu_activated #header>.inner {
        transform: translateX(var(--SiteMenuWidth));
        box-shadow: hsl(0 0% 0%/.1) 0 0 2em
    }

    body.site_menu_activated #header .site_menu_ctrl {
        transform: translateX(var(--SiteMenuWidth))
    }

    body.site_menu_activated #header .site_menu_ctrl_on {
        --i: 'close';
        transform: rotate(270deg);
        transition: transform .5s
    }

    body.site_menu_activated #content>.site_menu_ctrl_off {
        display: block
    }

    body.site_menu_activated #content>.inner {
        transform: translateX(var(--SiteMenuWidth))
    }

    body.site_menu_activated #content>.inner>* {
        pointer-events: none
    }
}

.step {
    min-height: min(var(--VHeight),1080px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    background: #fff;
    color: #000
}

.step>.inner {
    width: 100%;
    max-width: 104em;
    padding: var(--HeaderHeight) var(--PagePadding);
    box-sizing: border-box
}

.step h1 {
    font-size: 3em;
    font-weight: 700
}

@media only screen and (max-width: 1000px) {
    .step {
        min-height:unset
    }
}

.hue-background {
    background-color: hsl(var(--h) 100% 5%);
    background-image: radial-gradient(hsl(var(--h) 100% 50%/30%),hsl(var(--h) 100% 50%/0%) 70%),radial-gradient(hsl(var(--h) 100% 50%/50%),hsl(var(--h) 100% 50%/0%) 70%),radial-gradient(hsl(calc(var(--h) + 50) 100% 50%/30%),hsl(calc(var(--h) - 40) 100% 50%/0%) 70%),linear-gradient(-60deg,hsl(calc(var(--h) + 20) 70% 20%/100%),hsl(calc(var(--h) + 20) 70% 20%/0%));
    background-size: calc(var(--VWidth,100vw) * .7) calc(var(--VWidth,100vw) * .7),calc(var(--VWidth,100vw) * 1) calc(var(--VWidth,100vw) * .8),calc(var(--VWidth,100vw) * .9) calc(var(--VWidth,100vw) * .9),contain;
    background-position: calc(var(--VWidth,100vw) * -.35) calc(var(--VWidth,100vw) * -.35),center calc(var(--VWidth,100vw) * .6 + 100%),right calc(var(--VWidth,100vw) * -.5),center;
    background-repeat: no-repeat;
    color: #fff
}

.anu>:nth-child(1) {
    --t: 1
}

.anu>:nth-child(2) {
    --t: 2
}

.anu>:nth-child(3) {
    --t: 3
}

.anu>:nth-child(4) {
    --t: 4
}

.anu>:nth-child(5) {
    --t: 5
}

.anu>:nth-child(6) {
    --t: 6
}

.anu>:nth-child(7) {
    --t: 7
}

.anu>:nth-child(8) {
    --t: 8
}

.anu>:nth-child(9) {
    --t: 9
}

.anu>:nth-child(10) {
    --t: 10
}

.anu>:nth-child(11) {
    --t: 11
}

.anu>:nth-child(12) {
    --t: 12
}

.anu>:nth-child(13) {
    --t: 13
}

.anu>:nth-child(14) {
    --t: 14
}

.anu>:nth-child(15) {
    --t: 15
}

.anu>:nth-child(16) {
    --t: 16
}

.anu>:nth-child(17) {
    --t: 17
}

.anu>:nth-child(18) {
    --t: 18
}

.anu>:nth-child(19) {
    --t: 19
}

.anu>:nth-child(20) {
    --t: 20
}

.anu>:nth-child(21) {
    --t: 21
}

.anu>:nth-child(22) {
    --t: 22
}

.anu>:nth-child(23) {
    --t: 23
}

.anu>:nth-child(24) {
    --t: 24
}

.anu>:nth-child(25) {
    --t: 25
}

.anu>:nth-child(26) {
    --t: 26
}

.anu>:nth-child(27) {
    --t: 27
}

.anu>:nth-child(28) {
    --t: 28
}

.anu>:nth-child(29) {
    --t: 29
}

.anu>:nth-child(30) {
    --t: 30
}

.anu>:nth-child(31) {
    --t: 31
}

.anu>:nth-child(32) {
    --t: 32
}

.anu>:nth-child(33) {
    --t: 33
}

.anu>:nth-child(34) {
    --t: 34
}

.anu>:nth-child(35) {
    --t: 35
}

.anu>:nth-child(36) {
    --t: 36
}

.anu>:nth-child(37) {
    --t: 37
}

.anu>:nth-child(38) {
    --t: 38
}

.anu>:nth-child(39) {
    --t: 39
}

.anu>:nth-child(40) {
    --t: 40
}

.anu>:nth-child(2n+1) {
    --c1: -3
}

.anu>:nth-child(3n+2) {
    --c1: -2
}

.anu>:nth-child(5n+3) {
    --c1: -1
}

.anu>:nth-child(7n+5) {
    --c1: 0
}

.anu>:nth-child(11n+7) {
    --c1: 1
}

.anu>:nth-child(13n+11) {
    --c1: 2
}

.anu>:nth-child(17n+13) {
    --c1: 3
}

.anu>:nth-child(2n-1) {
    --c2: -3
}

.anu>:nth-child(3n-2) {
    --c2: -2
}

.anu>:nth-child(5n-3) {
    --c2: -1
}

.anu>:nth-child(7n-5) {
    --c2: 0
}

.anu>:nth-child(11n-7) {
    --c2: 1
}

.anu>:nth-child(13n-11) {
    --c2: 2
}

.anu>:nth-child(17n-13) {
    --c2: 3
}

#about .art-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none
}

#about .art-bg>.lazy-bg {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

#about .art-bg>.lazy-bg:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,rgba(0 0 0/.5),rgba(0 0 0/.25));
    -webkit-backdrop-filter: grayscale(.5) blur(1em);
    -moz-backdrop-filter: grayscale(.5) blur(1em);
    backdrop-filter: grayscale(.25) blur(1em)
}

#about .art-bg>.lazy-bg:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    max-width: 104em;
    height: 100%;
    margin: 0 auto;
    background-image: url(https://seagm-media.seagmcdn.com/corp/art/pic_banner_tiger.png?x-oss-process=image/resize,w_800);
    background-image: -webkit-image-set(url(https://seagm-media.seagmcdn.com/corp/art/pic_banner_tiger.png?x-oss-process=image/resize,w_400/format,webp) 1x,url(https://seagm-media.seagmcdn.com/corp/art/pic_banner_tiger.png?x-oss-process=image/resize,w_800/format,webp) 2x);
    background-image: image-set(url(https://seagm-media.seagmcdn.com/corp/art/pic_banner_tiger.png?x-oss-process=image/resize,w_400/format,webp) 1x,url(https://seagm-media.seagmcdn.com/corp/art/pic_banner_tiger.png?x-oss-process=image/resize,w_800/format,webp) 2x);
    background-repeat: no-repeat;
    background-position: calc(100% - var(--PagePadding)) bottom;
    background-size: 30% auto
}

#about>.inner {
    position: relative;
    z-index: 2
}

#about .intro {
    max-width: 60em;
    margin: var(--PagePadding) 0
}

#about .intro h1 {
    text-transform: uppercase
}

#about .intro p {
    font-size: 1.333334em;
    margin: 2em 0;
    opacity: .7
}

#about .intro .btw {
    font-size: 1.333334em;
    display: block;
    max-width: 20em
}

@media only screen and (max-width: 1000px) {
    #about {
        min-height:unset
    }

    #about .intro {
        margin-right: 30%
    }

    #about .intro h1 {
        font-size: 2em
    }

    #about .intro p {
        font-size: 1em
    }

    #about .intro .btw {
        font-size: 1em;
        max-width: 15em
    }
}

@media only screen and (max-width: 800px) {
    #about .intro {
        margin-right:auto
    }

    #about .art-bg>.lazy-bg:after {
        background-size: auto calc(var(--PagePadding) + var(--HeaderHeight) + 3em)
    }
}

#mission .intro {
    max-width: 60em;
    margin: var(--PagePadding) auto;
    text-align: center
}

#mission .intro h2 {
    font-size: 3em;
    text-transform: uppercase
}

#mission .intro p {
    font-size: 1.333334em;
    margin: 2em 0;
    opacity: .7
}

#mission .features ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -2em
}

#mission .features li {
    flex: auto;
    max-width: 29em;
    margin: 2em
}

#mission .features li>div {
    min-height: 100%;
    padding: 3em;
    box-sizing: border-box;
    background: #fff;
    box-shadow: rgba(0 0 0/5%) 0 .5em 3em;
    border-radius: 2em;
    overflow: hidden;
    text-align: center
}

#mission .features li>div:before {
    content: '';
    display: block;
    font-size: 8em;
    width: 1em;
    height: 1em;
    margin: 0 auto;
    background-image: url(https://corp.seagm.com/skin/images/art/icon_mission-372a4dedcc.svg);
    background-repeat: no-repeat;
    background-position: 0 calc((var(--t) - 1) * -1em);
    background-size: 1em 5em
}

#mission .features h3 {
    font-family: inherit;
    font-weight: 800;
    font-size: 1.5em;
    text-transform: uppercase;
    margin: 1em 0
}

#mission .features p {
    font-size: 1.166667em;
    line-height: 1.75;
    margin: 0;
    opacity: .54
}

@media only screen and (max-width: 1000px) {
    #mission .intro {
        max-width:60em;
        margin: 0 auto
    }

    #mission .intro h2 {
        font-size: 2em
    }

    #mission .intro p {
        font-size: 1em
    }

    #mission .features {
        max-width: 60em;
        margin: var(--PagePadding) auto 0
    }

    #mission .features ul {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(24em,1fr));
        grid-gap: 2em;
        margin: 0
    }

    #mission .features li {
        max-width: unset;
        margin: 0
    }

    #mission .features li>div {
        padding: 0;
        background: 0 0;
        box-shadow: none;
        position: relative;
        text-align: left;
        padding-left: 7em;
        min-height: 5em
    }

    #mission .features li>div:before {
        font-size: 5em;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1
    }

    #mission .features h3 {
        font-size: 1.25em;
        margin: .5em 0
    }

    #mission .features p {
        font-size: 1em;
        line-height: 1.5
    }
}

@media only screen and (max-width: 640px) {
    #mission .features {
        max-width:40em;
        margin: 0 auto
    }
}

#advantage {
    background: #011f3e;
    color: #fff;
    position: relative;
    align-items: flex-start
}

#advantage>.art-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 50%;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: min(var(--VWidth),1400px) auto;
    opacity: .5
}

#advantage>.inner {
    z-index: 2
}

#advantage .intro {
    max-width: 60em;
    margin: var(--PagePadding) auto;
    text-align: center
}

#advantage .intro h2 {
    font-size: 3em;
    text-transform: uppercase
}

#advantage .intro p {
    font-size: 1.333334em;
    margin: 2em 0;
    opacity: .7
}

#advantage .intro2 {
    max-width: 50em;
    margin: var(--PagePadding) auto;
    padding: var(--PagePadding);
    background: rgba(255 255 255/5%);
    box-shadow: rgba(255 255 255/25%) 0 0 0 1px;
    box-sizing: border-box;
    border-radius: 2em
}

#advantage .intro2 h2 {
    font-size: 2em;
    text-transform: uppercase;
    color: gold
}

#advantage .intro2 p {
    font-size: 1.166667em;
    margin: 1em 0 0;
    opacity: .7
}

#advantage .features {
    margin: var(--PagePadding) 0
}

#advantage .features ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -2em
}

#advantage .features li {
    flex: auto;
    max-width: 20em;
    margin: 2em
}

#advantage .features li>div {
    text-align: center
}

#advantage .features h3 {
    font-family: inherit;
    font-size: 1em;
    line-height: 1;
    white-space: nowrap
}

#advantage .features h3:before {
    content: '';
    display: inline-block;
    vertical-align: top;
    font-size: 1.5em;
    width: 1em;
    height: 1em;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxNCI+PGxpbmVhckdyYWRpZW50IGlkPSJnMSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iaHNsKDUxIDEwMCUgNTAlLzEpIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJoc2woNTEgMTAwJSA1MCUvMCkiLz48L2xpbmVhckdyYWRpZW50Pjxwb2x5Z29uIGZpbGw9InVybCgjZzEpIiBwb2ludHM9IjQsMTMgMTAsMTMgMTAsNyAxNCw3IDcsMCAwLDcgNCw3ICIvPjwvc3ZnPg==) no-repeat center/contain
}

#advantage .features h3 b {
    font-size: 4em;
    font-weight: 800;
    margin: 0 .25em
}

#advantage .features h3 i {
    font-size: 2em;
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase
}

#advantage .features p {
    font-size: 1.166667em;
    text-transform: capitalize;
    opacity: .5;
    margin: 1em 0 0
}

@media only screen and (max-width: 1000px) {
    #advantage>.art-bg {
        background-size:70em auto
    }

    #advantage .intro {
        margin: 0 auto
    }

    #advantage .intro h2 {
        font-size: 2em
    }

    #advantage .intro p {
        font-size: 1em
    }

    #advantage .intro2 {
        max-width: 40em
    }

    #advantage .intro2 h2 {
        font-size: 1.25em
    }

    #advantage .intro2 p {
        font-size: 1em
    }

    #advantage .features ul {
        max-width: 60em;
        margin: 0 auto
    }

    #advantage .features h3 b {
        font-size: 2.5em
    }

    #advantage .features h3 i {
        font-size: 1.5em
    }

    #advantage .features p {
        font-size: 1em
    }
}

#powerup {
    justify-content: flex-start;
    flex-direction: column
}

#powerup .title {
    width: 100%;
    background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGZpbGw9ImhzbCg0MiAxMDAlIDk2JSkiIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIvPjwvc3ZnPg==) no-repeat center calc(100% - 1em)/calc(var(--VWidth) * 6)
}

#powerup .intro {
    max-width: 104em;
    margin: 0 auto;
    text-align: center;
    padding: var(--HeaderHeight) var(--PagePadding);
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: min(100em,calc(100% - var(--PagePadding) * 2)) auto
}

#powerup .intro h2 {
    font-size: 3em;
    text-transform: uppercase
}

#powerup .intro p {
    font-size: 1.333334em;
    margin: 2em 0;
    opacity: .7
}

#powerup .features ul {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(30em,1fr));
    grid-gap: 3em 6em
}

#powerup .features li>div {
    display: grid;
    grid-template-columns: var(--iconsize) 1fr;
    grid-gap: 0 2em;
    align-items: center;
    --iconsize: 6em
}

#powerup .features li>div:before {
    content: '';
    display: block;
    width: var(--iconsize);
    height: var(--iconsize);
    margin: 0 auto;
    background-image: url(https://corp.seagm.com/skin/images/art/icon_powerup-1bc68f2f20.svg);
    background-repeat: no-repeat;
    background-position: 0 calc((var(--t) - 1) * var(--iconsize) * -1);
    background-size: 100% 600%;
    grid-row: span 2;
    align-self: flex-start
}

#powerup .features h3 {
    font-family: inherit;
    font-weight: 800;
    font-size: 1.5em;
    text-transform: uppercase;
    margin: .333334em 0
}

#powerup .features p {
    font-size: 1.166667em;
    margin: 0;
    opacity: .54
}

@media only screen and (max-width: 1000px) {
    #powerup .intro h2 {
        font-size:2em
    }

    #powerup .intro p {
        font-size: 1em
    }

    #powerup .features {
        max-width: 60em;
        margin: 0 auto
    }

    #powerup .features ul {
        grid-template-columns: repeat(auto-fill,minmax(24em,1fr));
        grid-gap: 2em
    }

    #powerup .features li>div {
        --iconsize: 5em
    }

    #powerup .features h3 {
        font-size: 1.25em
    }

    #powerup .features p {
        font-size: 1em
    }
}

@media only screen and (max-width: 640px) {
    #powerup .features {
        max-width:40em;
        margin: 0 auto
    }
}

#products {
    background: #011f3e;
    color: #fff
}

#products .intro {
    margin: var(--PagePadding) auto;
    text-align: center
}

#products .intro h2 {
    font-size: 3em;
    text-transform: uppercase
}

#products .features {
    background-repeat: no-repeat;
    background-position: top left;
    background-size: calc(38% - 4em) auto;
    padding-left: 38%;
    display: flex;
    flex-wrap: wrap
}

#products .features .unit:first-of-type {
    flex: auto;
    width: 100%
}

#products .features .unit {
    margin: 2em 0;
    flex: 20em
}

#products .features h3 {
    font-family: inherit;
    font-weight: 800;
    font-size: 1.5em;
    text-transform: uppercase;
    margin-bottom: 1em;
    display: grid;
    grid-template-columns: 2em 1fr;
    grid-gap: 1em;
    align-items: center
}

#products .features h3:before {
    content: attr(icon);
    display: block;
    font-size: 2em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    --IconFF: var(--IconFF2);
    align-self: flex-start
}

#products .features ul {
    margin-left: 4.5em
}

#products .features li {
    margin: .5em 0;
    opacity: .7
}

@media only screen and (max-width: 1000px) {
    #products .intro h2 {
        font-size:2em
    }

    #products .features {
        background-position: top center;
        background-size: auto 18em;
        max-width: 60em;
        padding: 20em 0 0;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(20em,1fr));
        grid-gap: 2em
    }

    #products .features .unit {
        margin: 0
    }

    #products .features .unit:first-of-type {
        grid-column: span 2
    }

    #products .features ul {
        margin-left: 3.75em
    }

    #products .features li {
        margin: 0
    }

    #products .features h3 {
        font-size: 1.25em
    }
}

@media only screen and (max-width: 640px) {
    #products .features {
        max-width:40em;
        margin: 0 auto
    }

    #products .features .unit:first-of-type {
        grid-column: auto
    }
}

#partners {
    background: hsl(42 100% 96%);
    justify-content: flex-start;
    flex-direction: column
}

#partners .partners {
    width: 100%
}

#partners .partners>.inner {
    width: 100%;
    max-width: 104em;
    margin: 0 auto;
    padding: var(--HeaderHeight) var(--PagePadding) 0;
    box-sizing: border-box;
    display: flex;
    align-items: center
}

#partners .partners .intro {
    flex: 4;
    margin: 0 0 0 var(--PagePadding)
}

#partners .partners .intro h2 {
    font-size: 2.5em;
    text-transform: uppercase
}

#partners .partners .intro p {
    font-size: 1.333334em;
    margin: 2em 0;
    opacity: .7
}

#partners .partners .list {
    flex: 6;
    order: -1
}

#partners #partner_list {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-gap: 1px
}

#partners #partner_list:after {
    content: '';
    display: block;
    grid-area: 2/2/5/5;
    order: 12;
    background: #f4af0d url(https://seagm-media.seagmcdn.com/corp/art/pic_partner_bg.png) no-repeat bottom center/contain;
    box-shadow: rgb(0 0 0 / 10%) 0 0 2em inset;
    border-radius: 1em
}

#partners #partner_list .logo {
    position: relative;
    padding-top: 100%
}

#partners #partner_list .logo img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: auto;
    max-width: calc(100% - var(--pd,2em));
    max-height: calc(100% - var(--pd,2em))
}

#partners .reviews>.inner {
    width: 100%;
    max-width: 104em;
    padding: var(--HeaderHeight) var(--PagePadding);
    box-sizing: border-box
}

#partners .reviews .intro {
    margin: var(--PagePadding) auto
}

#partners .reviews .intro h2 {
    font-size: 3em;
    text-transform: uppercase
}

#partners .reviews .intro h2:after {
    content: '';
    display: block;
    font-size: .666667em;
    width: 6.5em;
    height: 1em;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MCA1MCI+PHBhdGggZmlsbD0iZ29sZCIgZD0iTTI1LjkgMzguN2wxMC45IDUuN2MxLjUuOCAzLjItLjUgMi45LTIuMWwtMi4xLTEyLjJjLS4xLS42LjEtMS4zLjYtMS44bDguOC04LjZjMS4yLTEuMi41LTMuMi0xLjEtMy40bC0xMi4yLTEuOGMtLjctLjEtMS4yLS41LTEuNS0xLjFsLTUuNC0xMWMtLjctMS41LTIuOS0xLjUtMy42IDBsLTUuNSAxMS4xYy0uMy42LS45IDEtMS41IDEuMUw0IDE2LjRjLTEuNi4yLTIuMyAyLjMtMS4xIDMuNGw4LjggOC42Yy41LjUuNyAxLjEuNiAxLjhsLTIuMSAxMi4yYy0uMyAxLjYgMS40IDIuOSAyLjkgMi4xTDI0IDM4LjhjLjctLjQgMS4zLS40IDEuOS0uMXoiLz48L3N2Zz4=) repeat-x left center/auto 100%
}

#partners .reviews ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: 2em
}

#partners .reviews ul:after,#partners .reviews ul:before {
    content: '';
    display: block;
    flex: none;
    font-size: 8em;
    width: 1em;
    height: 1em;
    opacity: 10%;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA0OCI+PHBhdGggZD0iTTYzLjMgMGMuOS0uMi43LjUuNy45djExLjZjLS4yIDAtLjUtLjEtLjcgMEM1Mi4xIDE1LjIgNDguNyAyNS45IDUxIDM0LjFoMTNWNDhIMzYuNWMtMS4yLTktLjktMTcuOSAxLjktMjYuNiAzLjItOS45IDkuMy0xNyAxOS44LTIwLjFDNTkuOC45IDYxLjYuNSA2My4zIDB6TTIyLjQgMS4zQzExLjkgNC40IDUuNyAxMS42IDIuNSAyMS40LS4yIDMwLjEtLjUgMzkgLjcgNDhoMjcuNVYzNC4xaC0xM2MtMi4zLTguMyAxLjEtMTguOSAxMi4zLTIxLjZoLjdWLjljMC0uNS4yLTEuMS0uNy0uOS0xLjcuNS0zLjUuOS01LjEgMS4zeiIvPjwvc3ZnPg==) no-repeat center/contain
}

#partners .reviews ul:before {
    margin-right: auto
}

#partners .reviews ul:after {
    margin-left: auto;
    transform: rotate(180deg);
    align-self: flex-end
}

#partners .reviews li {
    flex: 1 1 30em;
    max-width: 40em
}

#partners .reviews li>div {
    min-height: 100%;
    box-sizing: border-box;
    background: #fff;
    box-shadow: rgba(0 0 0/5%) 0 .5em 3em;
    border-radius: 2em 0 2em 0;
    overflow: hidden;
    --r: 240;
    --g: 240;
    --b: 240
}

#partners .reviews .title {
    padding: 2em 6em 2em 3em;
    border-bottom-right-radius: 2em;
    position: relative;
    background-color: var(--background-color);
    /* color: var(--color); */
    color: #000000;
}

#partners .reviews .title:after {
    content: '';
    display: block;
    width: 4em;
    height: 4em;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    margin: 2em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

#partners .reviews .title h3 {
    font-size: 1.5em;
    font-family: inherit;
    font-weight: 800
}

#partners .reviews .title .org {
    font-size: 1.166667em;
    opacity: .7
}

#partners .reviews .quote {
    padding: 2em 3em
}

#partners .reviews .quote p {
    font-size: 1.166667em;
    margin: 0;
    opacity: .7
}

#partners .reviews .r01 {
    --r: 0;
    --g: 0;
    --b: 0
}

#partners .reviews .r01 .title:after {
    background-image: url(https://corp.seagm.com/skin/images/art/logo_wulfwerk-14b23b78b0.svg)
}

#partners .reviews .r02 {
    --r: 242;
    --g: 209;
    --b: 116
}

#partners .reviews .r02 .title:after {
    background-image: url(https://corp.seagm.com/skin/images/art/logo_netdragon-dd7d8d7e2c.svg)
}

#partners .reviews .r03 {
    --r: 230;
    --g: 230;
    --b: 230
}

#partners .reviews .r03 .title:after {
    background-image: url(https://corp.seagm.com/skin/images/art/logo_netdragon-dd7d8d7e2c.svg)
}

#partners .reviews .r04 {
    --r: 143;
    --g: 65;
    --b: 152
}

#partners .reviews .r04 .title:after {
    background-image: url(https://corp.seagm.com/skin/images/art/logo_dotlines-da8d2f25a8.svg)
}

@media only screen and (max-width: 1000px) {
    #partners .partners>.inner {
        display:block
    }

    #partners .partners .intro {
        max-width: 60em;
        margin: 0 auto
    }

    #partners .partners .intro h2 {
        font-size: 2em
    }

    #partners .partners .intro p {
        font-size: 1em
    }

    #partners .partners .list {
        max-width: 60em;
        margin: 0 auto
    }

    #partners #partner_list {
        grid-template-columns: repeat(auto-fill,minmax(5em,1fr))
    }

    #partners #partner_list>li {
        animation: none;
        opacity: 1
    }

    #partners #partner_list .logo {
        --alpha: 0;
        --pd: 1em
    }

    #partners .reviews .intro {
        max-width: 60em
    }

    #partners .reviews .intro h2 {
        font-size: 2em
    }

    #partners .reviews ul {
        max-width: 60em
    }

    #partners .reviews ul {
        position: relative
    }

    #partners .reviews ul:after,#partners .reviews ul:before {
        font-size: 2em;
        position: absolute;
        z-index: 1
    }

    #partners .reviews ul:before {
        top: 0;
        left: 0
    }

    #partners .reviews ul:after {
        right: 0;
        bottom: 0
    }

    #partners .reviews li {
        max-width: 25em
    }

    #partners .reviews li>div {
        border-radius: 1em 0 1em 0
    }

    #partners .reviews .title {
        padding: 1.5em 4.5em 1.5em 2em;
        border-bottom-right-radius: 1em
    }

    #partners .reviews .title:after {
        width: 3em;
        height: 3em;
        margin: -1.5em 1.5em;
        top: 50%
    }

    #partners .reviews .title h3 {
        font-size: 1.166667em
    }

    #partners .reviews .title .org {
        font-size: 1em
    }

    #partners .reviews .quote {
        padding: 1.5em 2em
    }

    #partners .reviews .quote p {
        font-size: 1em
    }
}

@media only screen and (max-width: 640px) {
    #partners .partners .intro {
        max-width:40em
    }

    #partners .partners .list {
        max-width: 40em
    }

    #partners .reviews .intro {
        max-width: 40em
    }

    #partners .reviews ul {
        max-width: 40em
    }

    #partners .reviews ul:after,#partners .reviews ul:before {
        content: none
    }
}

#social .intro {
    max-width: 60em;
    margin: var(--PagePadding) auto;
    text-align: center
}

#social .intro h2 {
    font-size: 3em;
    text-transform: uppercase
}

#social .intro p {
    font-size: 1.333334em;
    margin: 2em 0;
    opacity: .7
}

#social .features {
    margin: var(--PagePadding) auto
}

#social .features ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 -2em
}

#social .features li {
    flex: auto;
    max-width: 30em;
    margin: 2em
}

#social .features li>div {
    text-align: center
}

#social .features li>div:before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 50%;
    background: #fff url(https://corp.seagm.com/skin/images/art/pic_social_1-daad0cf2e3.svg) no-repeat top center/100% auto;
    box-shadow: rgb(0 0 0 / 5%) 0 .5em 3em;
    border-radius: .9em;
    margin-bottom: 3em
}

#social .features li:last-child>div:before {
    background-image: url(https://corp.seagm.com/skin/images/art/pic_social_2-29fcd737fd.svg)
}

#social .features h3 {
    font-family: inherit;
    font-weight: 800;
    font-size: 1.5em;
    text-transform: uppercase;
    margin: 1em 0
}

#social .features p {
    font-size: 1.166667em;
    line-height: 1.75;
    margin: 0;
    opacity: .54
}

#social .features2 {
    margin: 0 auto
}

#social .features2 ul {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(20em,1fr));
    grid-gap: 3em 6em
}

#social .features2 li>div {
    display: grid;
    grid-template-columns: var(--iconsize) 1fr;
    grid-gap: 2em;
    align-items: center;
    --iconsize: 5em
}

#social .features2 li>div:before {
    content: '';
    display: block;
    width: var(--iconsize);
    height: var(--iconsize);
    margin: 0 auto;
    background-image: url(https://corp.seagm.com/skin/images/art/icon_social-022393e592.svg);
    background-repeat: no-repeat;
    background-position: 0 calc((var(--t) - 1) * var(--iconsize) * -1);
    background-size: 100% 500%
}

#social .features2 h3 {
    font-family: inherit;
    font-weight: 800;
    font-size: 1.5em;
    text-transform: uppercase;
    margin: .333334em 0
}

@media only screen and (max-width: 1000px) {
    #social .intro h2 {
        font-size:2em
    }

    #social .intro p {
        font-size: 1em
    }

    #social .features {
        max-width: 60em
    }

    #social .features li {
        max-width: 25em
    }

    #social .features h3 {
        font-size: 1.25em
    }

    #social .features p {
        font-size: 1em
    }

    #social .features2 {
        max-width: 60em
    }

    #social .features2 ul {
        grid-gap: 2em
    }

    #social .features2 li>div {
        --iconsize: 4em
    }

    #social .features2 h3 {
        font-size: 1.25em
    }
}

@media only screen and (max-width: 640px) {
    #social .features2 {
        max-width:30em
    }
}

#milestone {
    background: hsl(42 100% 96%)
}

#milestone .intro h2 {
    font-size: 3em;
    text-transform: uppercase
}

#timeline {
    position: relative
}

#timeline:after,#timeline:before {
    content: '';
    display: block;
    width: var(--PagePadding);
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none
}

#timeline:before {
    left: 0;
    background: linear-gradient(90deg,hsl(42 100% 96%),hsl(42 100% 96%/0))
}

#timeline:after {
    right: 0;
    background: linear-gradient(-90deg,hsl(42 100% 96%),hsl(42 100% 96%/0))
}

#timeline .swiper {
    overflow: hidden;
    padding: 0 calc(var(--PagePadding)/ 2)
}

#timeline .swiper-wrapper {
    display: flex;
    padding: var(--PagePadding) 0;
    cursor: grab
}

#timeline .swiper-slide {
    flex: none;
    width: 100%;
    max-width: max(33.333%,30em);
    padding: 0 calc(var(--PagePadding)/ 2);
    box-sizing: border-box
}

#timeline .swiper-slide>div {
    min-height: 100%;
    height: 25em;
    padding: var(--PagePadding);
    box-sizing: border-box;
    border-radius: 1em;
    overflow: hidden;
    background: var(--bgc,#fff);
    /* color: var(--color,currentColor); */
    box-shadow: rgba(0 0 0/10%) 0 0 2em;
    position: relative
}

#timeline .swiper-slide>div>div.swiper-lazy {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: var(--op,.5)
}

/* #timeline .swiper-slide[year="2007"] {
    --bgc: darkorange;
    --color: #fff;
    --op: .1
}

#timeline .swiper-slide[year="2017"] {
    --bgc: #000;
    --color: #fff;
    --op: .3
}

#timeline .swiper-slide[year="2020"] {
    --bgc: #000;
    --color: #fff;
    --op: .3
} */

#timeline h3 {
    font-family: var(--SiteFF2);
    font-weight: 800;
    font-size: 3em;
    margin-bottom: .5em;
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
    z-index: 2
}

#timeline p {
    font-size: 1.166667em;
    margin: 0;
    position: relative;
    z-index: 2;
    opacity: .8
}

#timeline .swiper-button-wrapper {
    background: red;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 20;
    height: 0;
    margin: -1.5em 2.5em 0;
    display: flex;
    justify-content: space-between
}

#timeline .swiper-button-wrapper .btw {
    flex: none;
    width: 3em;
    height: 3em;
    transition: .3s
}

#timeline .swiper-button-disabled {
    opacity: 0;
    transform: scale(.5);
    visibility: hidden;
    pointer-events: none
}

#milestone .awards ul {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(20em,1fr));
    grid-gap: 4em
}

#milestone .awards .logo {
    max-width: 12.5em;
    margin: 0 auto
}

#milestone .awards .logo img {
    vertical-align: top;
    width: 100%;
    height: auto
}

#milestone .awards .info {
    text-align: center
}

#milestone .awards h3 {
    font-size: 1.166667em;
    font-weight: 800;
    font-family: var(--SiteFF2);
    margin: 1em 0
}

#milestone .awards p {
    font-size: 1em;
    margin: 0;
    opacity: .54
}

@media only screen and (max-width: 1000px) {
    #milestone .intro {
        max-width:60em;
        margin: 0 auto
    }

    #milestone .intro h2 {
        font-size: 2em
    }

    #timeline {
        margin: 0 calc(var(--PagePadding) * -1)
    }

    #timeline .swiper-slide>div {
        height: inherit;
        min-height: 20em
    }

    #timeline .swiper-button-wrapper {
        display: none
    }

    #timeline h3 {
        font-size: 2.5em
    }

    #timeline p {
        font-size: 1em
    }

    #milestone .awards {
        max-width: 60em;
        margin: 0 auto
    }

    #milestone .awards ul {
        grid-template-columns: repeat(auto-fill,minmax(25em,1fr));
        grid-gap: 2em
    }

    #milestone .awards li>div {
        display: grid;
        grid-template-columns: 8em 1fr;
        grid-gap: 0 2em;
        align-items: center
    }

    #milestone .awards .logo {
        align-self: flex-start
    }

    #milestone .awards .info {
        text-align: left
    }

    #milestone .awards h3 {
        font-size: 1em;
        margin: .5em 0
    }

    #milestone .awards p {
        font-size: 1em
    }
}

@media only screen and (max-width: 640px) {
    #milestone .awards {
        max-width:40em;
        margin: 0 auto
    }
}

#contact {
    background: #000;
    color: #fff;
    min-height: min(var(--VHeight),30em)
}

#contact .art-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1
}

#contact .art-bg>.lazy-bg {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

#contact .art-bg>.lazy-bg:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(0deg,rgba(0 0 0/.5),rgba(0 0 0/.25)) no-repeat center/cover;
    -webkit-backdrop-filter: grayscale(.5) blur(1em);
    -moz-backdrop-filter: grayscale(.5) blur(1em);
    backdrop-filter: grayscale(.25) blur(1em)
}

#contact>.inner {
    z-index: 2
}

#contact .intro {
    max-width: 60em;
    margin: 0 auto;
    text-align: center
}

#contact .intro h2 {
    font-size: 2em;
    text-transform: uppercase
}

#contact .intro .btc {
    margin: 2em 0 0
}

#contact .intro .btw {
    font-size: 1.333334em;
    display: block;
    margin: 0 auto;
    max-width: 20em
}

@media only screen and (max-width: 1000px) {
    #contact {
        min-height:unset
    }

    #contact .intro h2 {
        font-size: 1.25em
    }

    #contact .intro .btw {
        font-size: 1em
    }
}
:root {
    --CPT-THM-R: 30;
    --CPT-THM-G: 144;
    --CPT-THM-B: 255;
    --CPT-THM-RGB: var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B);
    --CPT-THM-A10: rgba(var(--CPT-THM-RGB)/.1);
    --CPT-THM-A25: rgba(var(--CPT-THM-RGB)/.25);
    --CPT-THM-A50: rgba(var(--CPT-THM-RGB)/.5);
    --CPT-THM-A75: rgba(var(--CPT-THM-RGB)/.75);
    --CPT-THM: rgb(var(--CPT-THM-RGB));
    --CPT-FF2: "Manrope","Arial","Verdana","PingFang","Helvetica",system-ui,sans-serif;
    --CPT-FS: 1em;
    --CPT-LH: 1.5;
    --CPT-UH: 3em;
    --CPT-CLR: rgba(0 0 0/.75);
    --CPT-BDC: rgba(0 0 0/.25);
    --CPT-BDW: 1px;
    --CPT-BDR: calc(1em / 3);
    --CPT-BD: var(--CPT-BDC) var(--CPT-BDW) solid;
    --CPT-INPTPD: 1em;
    --CPT-INPTBG: #fff;
    --CPT-INPTCL: #000;
    --CPT-INPTTP: rgba(0 0 0/75%);
    --CPT-INPTPH: rgba(0 0 0/30%);
    --CPT-FBDCL: rgba(0 0 0/50%);
    --CPT-FBDBG: rgba(0 0 0/5%);
    --CPT-TST: ease .2s
}

[class*=cpt-] {
    font-size: var(--CPT-FS);
    font-family: var(--CPT-FF2);
    line-height: var(--CPT-LH);
    color: var(--CPT-CLR);
    background: var(--CPT-INPTBG);
    transition: var(--CPT-TST);
    position: relative;
    box-sizing: border-box
}

[class*=cpt-]:not(.cpt-combine):not(.cpt-checkbox):not(.cpt-radio):not(.cpt-range):not(.cpt-switcher):focus-within {
    --CPT-BD: var(--CPT-THM) var(--CPT-BDW) solid;
    --shadow-focus-color: rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B) / .5);
    --background-focus-color: rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B) / .1)
}

[class*=cpt-]>input:not([type=checkbox]):not([type=radio]):not([type=range]),[class*=cpt-]>select,[class*=cpt-]>textarea {
    font-size: var(--CPT-FS);
    font-family: var(--CPT-FF);
    font-weight: 600;
    color: var(--CPT-INPTCL);
    background: 0 0;
    height: calc(var(--CPT-UH) - (var(--CPT-BDW) * 2));
    line-height: var(--CPT-LH);
    margin: 0;
    padding: 0 var(--CPT-INPTPD);
    border: none;
    border-radius: calc(var(--CPT-BDR) - var(--CPT-BDW));
    outline: 0;
    box-sizing: border-box;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: background var(--CPT-TST)
}

[class*=cpt-]>input[type=number] {
    text-align: center;
    -moz-appearance: textfield
}

[class*=cpt-]>input[type=number]::-webkit-inner-spin-button,[class*=cpt-]>input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none
}

[class*=cpt-]>input[type=search] {
    padding-right: var(--CPT-INPTPD)!important
}

[class*=cpt-]>input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: block;
    height: var(--CPT-FS);
    width: var(--CPT-FS);
    border-radius: var(--CPT-BDR);
    background: var(--CPT-THM) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE5IDYuNDFMMTcuNTkgNSAxMiAxMC41OSA2LjQxIDUgNSA2LjQxIDEwLjU5IDEyIDUgMTcuNTkgNi40MSAxOSAxMiAxMy40MSAxNy41OSAxOSAxOSAxNy41OSAxMy40MSAxMnoiLz48L3N2Zz4=) no-repeat center/contain;
    opacity: .5;
    overflow: hidden;
    cursor: pointer
}

[class*=cpt-]>input::-webkit-input-placeholder,[class*=cpt-]>textarea::-webkit-input-placeholder {
    color: var(--CPT-INPTPH);
    font-family: var(--CPT-FF2);
    font-weight: 400
}

[class*=cpt-]>input::-moz-placeholder,[class*=cpt-]>textarea::-moz-placeholder {
    color: var(--CPT-INPTPH);
    font-family: var(--CPT-FF2);
    font-weight: 400;
    opacity: 1
}

[class*=cpt-]>input:-webkit-autofill,[class*=cpt-]>input:-webkit-autofill:focus,[class*=cpt-]>input:-webkit-autofill:hover,[class*=cpt-]>select:-webkit-autofill,[class*=cpt-]>select:-webkit-autofill:focus,[class*=cpt-]>select:-webkit-autofill:hover,[class*=cpt-]>textarea:-webkit-autofill,[class*=cpt-]>textarea:-webkit-autofill:focus,[class*=cpt-]>textarea:-webkit-autofill:hover {
    -webkit-box-shadow: inset var(--CPT-INPTBG) 0 0 0 999em
}

[class*=cpt-]>input:not([type=checkbox]):not([type=radio]):not([type=range])[disabled],[class*=cpt-]>input:not([type=checkbox]):not([type=radio]):not([type=range])[readonly],[class*=cpt-]>select[disabled] {
    background: var(--CPT-FBDBG);
    cursor: not-allowed
}

[class*=cpt-]>.dropdown,[class*=cpt-]>textarea {
    scroll-behavior: smooth;
    scrollbar-color: var(--CPT-INPTPH) transparent;
    scrollbar-width: thin
}

[class*=cpt-]>.dropdown::-webkit-scrollbar,[class*=cpt-]>textarea::-webkit-scrollbar {
    height: .5em;
    width: .5em;
    overflow: visible
}

[class*=cpt-]>.dropdown::-webkit-scrollbar-thumb,[class*=cpt-]>textarea::-webkit-scrollbar-thumb {
    background-color: var(--CPT-INPTPH);
    background-clip: padding-box;
    min-height: 2em
}

[class*=cpt-]>.dropdown::-webkit-scrollbar-corner,[class*=cpt-]>textarea::-webkit-scrollbar-corner {
    background: 0 0
}

[class*=cpt-]>.dropdown::-webkit-scrollbar-button,[class*=cpt-]>textarea::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(https://corp.seagm.com/skin/iconfont/materialicons/v125/MaterialIconsx-a9f75301f8.woff2) format('woff2'),url(https://corp.seagm.com/skin/iconfont/materialicons/v125/MaterialIcons-9cea43a0c0.woff) format('woff')
}

@font-face {
    font-family: 'Material Icons outlined';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(https://corp.seagm.com/skin/iconfont/materialiconsoutlined/v100/MaterialIconsx-4b56e16c1e.woff2) format('woff2'),url(https://corp.seagm.com/skin/iconfont/materialiconsoutlined/v100/MaterialIcons-d090a6c4fa.woff) format('woff')
}

@font-face {
    font-family: 'Material Icons round';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(https://corp.seagm.com/skin/iconfont/materialiconsround/v99/MaterialIconsx-1a862f45fe.woff2) format('woff2'),url(https://corp.seagm.com/skin/iconfont/materialiconsround/v99/MaterialIcons-8732a6ef48.woff) format('woff')
}

@font-face {
    font-family: 'Material Icons sharp';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(https://corp.seagm.com/skin/iconfont/materialiconssharp/v100/MaterialIconsx-ad72c0789c.woff2) format('woff2'),url(https://corp.seagm.com/skin/iconfont/materialiconssharp/v100/MaterialIcons-f45b60e160.woff) format('woff')
}

@font-face {
    font-family: 'Material Icons twotone';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(https://corp.seagm.com/skin/iconfont/materialiconstwotone/v103/MaterialIconsx-70f4344921.woff2) format('woff2'),url(https://corp.seagm.com/skin/iconfont/materialiconstwotone/v103/MaterialIcons-53ad427e72.woff) format('woff')
}

:root {
    --IconFF1: "Material Icons";
    --IconFF2: "Material Icons outlined";
    --IconFF3: "Material Icons round";
    --IconFF4: "Material Icons sharp";
    --IconFF5: "Material Icons twotone";
    --IconFF: var(--IconFF1)
}

[icon-after]:after,[icon-only]:before,[icon]:before {
    font-family: var(--IconFF);
    font-weight: 400;
    font-style: normal;
    speak: none;
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased
}

@font-face {
    font-family: 'Brand Icons';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(https://corp.seagm.com/skin/iconfont/brand-icons-c78250ef78.woff) format('woff')
}

[icon-brand]:before {
    content: var(--i,unset)!important;
    font-family: 'Brand Icons';
    font-weight: 400;
    font-style: normal;
    speak: none;
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased
}

[icon-brand=alipay] {
    --i: '\E900'
}

[icon-brand=android] {
    --i: '\E901'
}

[icon-brand=android2] {
    --i: '\E902'
}

[icon-brand=apple] {
    --i: '\E903'
}

[icon-brand=blackberry] {
    --i: '\E904'
}

[icon-brand=chrome] {
    --i: '\E905'
}

[icon-brand=css] {
    --i: '\E906'
}

[icon-brand=css3] {
    --i: '\E907'
}

[icon-brand=edge] {
    --i: '\E908'
}

[icon-brand=facebook] {
    --i: '\E909'
}

[icon-brand=facebook2] {
    --i: '\E90A'
}

[icon-brand=facebook3] {
    --i: '\E90B'
}

[icon-brand=firefox] {
    --i: '\E90C'
}

[icon-brand=github] {
    --i: '\E90D'
}

[icon-brand=google] {
    --i: '\E90E'
}

[icon-brand=googledrive] {
    --i: '\E90F'
}

[icon-brand=googleplay] {
    --i: '\E910'
}

[icon-brand=hangouts] {
    --i: '\E911'
}

[icon-brand=hitpoints] {
    --i: '\E912'
}

[icon-brand=html] {
    --i: '\E913'
}

[icon-brand=huawei] {
    --i: '\E914'
}

[icon-brand=ie] {
    --i: '\E915'
}

[icon-brand=instagram] {
    --i: '\E916'
}

[icon-brand=instagram2] {
    --i: '\E917'
}

[icon-brand=js] {
    --i: '\E918'
}

[icon-brand=kaleoz] {
    --i: '\E919'
}

[icon-brand=kaleoz2] {
    --i: '\E91A'
}

[icon-brand=line] {
    --i: '\E91B'
}

[icon-brand=line2] {
    --i: '\E91C'
}

[icon-brand=linkedin] {
    --i: '\E91D'
}

[icon-brand=linkedin2] {
    --i: '\E91E'
}

[icon-brand=messenger] {
    --i: '\E91F'
}

[icon-brand=mi] {
    --i: '\E920'
}

[icon-brand=mi2] {
    --i: '\E921'
}

[icon-brand=microsoft] {
    --i: '\E922'
}

[icon-brand=nodejs] {
    --i: '\E923'
}

[icon-brand=opera] {
    --i: '\E924'
}

[icon-brand=paypal] {
    --i: '\E925'
}

[icon-brand=pinterest] {
    --i: '\E926'
}

[icon-brand=playstation] {
    --i: '\E927'
}

[icon-brand=python] {
    --i: '\E928'
}

[icon-brand=qq] {
    --i: '\E929'
}

[icon-brand=safari] {
    --i: '\E92A'
}

[icon-brand=seagm] {
    --i: '\E92B'
}

[icon-brand=seagmcredits] {
    --i: '\E92C'
}

[icon-brand=seagmpay] {
    --i: '\E92D'
}

[icon-brand=seagmstar] {
    --i: '\E92E'
}

[icon-brand=skype] {
    --i: '\E92F'
}

[icon-brand=spotify] {
    --i: '\E930'
}

[icon-brand=steam] {
    --i: '\E931'
}

[icon-brand=steam2] {
    --i: '\E932'
}

[icon-brand=telegram] {
    --i: '\E933'
}

[icon-brand=telegram2] {
    --i: '\E934'
}

[icon-brand=tiktok] {
    --i: '\E935'
}

[icon-brand=tiktok2] {
    --i: '\E936'
}

[icon-brand=twitch] {
    --i: '\E937'
}

[icon-brand=twitter] {
    --i: '\E938'
}

[icon-brand=twitter2] {
    --i: '\E939'
}

[icon-brand=vk] {
    --i: '\E93A'
}

[icon-brand=wechat] {
    --i: '\E93B'
}

[icon-brand=weibo] {
    --i: '\E93C'
}

[icon-brand=whatsapp] {
    --i: '\E93D'
}

[icon-brand=windows] {
    --i: '\E93E'
}

[icon-brand=xbox] {
    --i: '\E93F'
}

[icon-brand=youtube] {
    --i: '\E940'
}

[icon-brand=youtube2] {
    --i: '\E941'
}

.black,[color=black] {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%;
    --hex: #000000
}

.silver,[color=silver] {
    --r: 192;
    --g: 192;
    --b: 192;
    --h: 0;
    --s: 0%;
    --l: 75%;
    --hex: #c0c0c0
}

.gray,[color=gray] {
    --r: 128;
    --g: 128;
    --b: 128;
    --h: 0;
    --s: 0%;
    --l: 50%;
    --hex: #808080
}

.white,[color=white] {
    --r: 255;
    --g: 255;
    --b: 255;
    --h: 0;
    --s: 0%;
    --l: 100%;
    --hex: #ffffff
}

.maroon,[color=maroon] {
    --r: 128;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 100%;
    --l: 25%;
    --hex: #800000
}

.red,[color=red] {
    --r: 255;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 100%;
    --l: 50%;
    --hex: #ff0000
}

.purple,[color=purple] {
    --r: 128;
    --g: 0;
    --b: 128;
    --h: 300;
    --s: 100%;
    --l: 25%;
    --hex: #800080
}

.fuchsia,[color=fuchsia] {
    --r: 255;
    --g: 0;
    --b: 255;
    --h: 300;
    --s: 100%;
    --l: 50%;
    --hex: #ff00ff
}

.green,[color=green] {
    --r: 0;
    --g: 128;
    --b: 0;
    --h: 120;
    --s: 100%;
    --l: 25%;
    --hex: #008000
}

.lime,[color=lime] {
    --r: 0;
    --g: 255;
    --b: 0;
    --h: 120;
    --s: 100%;
    --l: 50%;
    --hex: #00ff00
}

.olive,[color=olive] {
    --r: 128;
    --g: 128;
    --b: 0;
    --h: 60;
    --s: 100%;
    --l: 25%;
    --hex: #808000
}

.yellow,[color=yellow] {
    --r: 255;
    --g: 255;
    --b: 0;
    --h: 60;
    --s: 100%;
    --l: 50%;
    --hex: #ffff00
}

.navy,[color=navy] {
    --r: 0;
    --g: 0;
    --b: 128;
    --h: 240;
    --s: 100%;
    --l: 25%;
    --hex: #000080
}

.blue,[color=blue] {
    --r: 0;
    --g: 0;
    --b: 255;
    --h: 240;
    --s: 100%;
    --l: 50%;
    --hex: #0000ff
}

.teal,[color=teal] {
    --r: 0;
    --g: 128;
    --b: 128;
    --h: 180;
    --s: 100%;
    --l: 25%;
    --hex: #008080
}

.aqua,[color=aqua] {
    --r: 0;
    --g: 255;
    --b: 255;
    --h: 180;
    --s: 100%;
    --l: 50%;
    --hex: #00ffff
}

.orange,[color=orange] {
    --r: 255;
    --g: 165;
    --b: 0;
    --h: 39;
    --s: 100%;
    --l: 50%;
    --hex: #ffa500
}

.aliceblue,[color=aliceblue] {
    --r: 240;
    --g: 248;
    --b: 255;
    --h: 208;
    --s: 100%;
    --l: 97%;
    --hex: #f0f8ff
}

.antiquewhite,[color=antiquewhite] {
    --r: 250;
    --g: 235;
    --b: 215;
    --h: 34;
    --s: 78%;
    --l: 91%;
    --hex: #faebd7
}

.aquamarine,[color=aquamarine] {
    --r: 127;
    --g: 255;
    --b: 212;
    --h: 160;
    --s: 100%;
    --l: 75%;
    --hex: #7fffd4
}

.azure,[color=azure] {
    --r: 240;
    --g: 255;
    --b: 255;
    --h: 180;
    --s: 100%;
    --l: 97%;
    --hex: #f0ffff
}

.beige,[color=beige] {
    --r: 245;
    --g: 245;
    --b: 220;
    --h: 60;
    --s: 56%;
    --l: 91%;
    --hex: #f5f5dc
}

.bisque,[color=bisque] {
    --r: 255;
    --g: 228;
    --b: 196;
    --h: 33;
    --s: 100%;
    --l: 88%;
    --hex: #ffe4c4
}

.blanchedalmond,[color=blanchedalmond] {
    --r: 255;
    --g: 235;
    --b: 205;
    --h: 36;
    --s: 100%;
    --l: 90%;
    --hex: #ffebcd
}

.blueviolet,[color=blueviolet] {
    --r: 138;
    --g: 43;
    --b: 226;
    --h: 271;
    --s: 76%;
    --l: 53%;
    --hex: #8a2be2
}

.brown,[color=brown] {
    --r: 165;
    --g: 42;
    --b: 42;
    --h: 0;
    --s: 59%;
    --l: 41%;
    --hex: #a52a2a
}

.burlywood,[color=burlywood] {
    --r: 222;
    --g: 184;
    --b: 135;
    --h: 34;
    --s: 57%;
    --l: 70%;
    --hex: #deb887
}

.cadetblue,[color=cadetblue] {
    --r: 95;
    --g: 158;
    --b: 160;
    --h: 182;
    --s: 25%;
    --l: 50%;
    --hex: #5f9ea0
}

.chartreuse,[color=chartreuse] {
    --r: 127;
    --g: 255;
    --b: 0;
    --h: 90;
    --s: 100%;
    --l: 50%;
    --hex: #7fff00
}

.chocolate,[color=chocolate] {
    --r: 210;
    --g: 105;
    --b: 30;
    --h: 25;
    --s: 75%;
    --l: 47%;
    --hex: #d2691e
}

.coral,[color=coral] {
    --r: 255;
    --g: 127;
    --b: 80;
    --h: 16;
    --s: 100%;
    --l: 66%;
    --hex: #ff7f50
}

.cornflowerblue,[color=cornflowerblue] {
    --r: 100;
    --g: 149;
    --b: 237;
    --h: 219;
    --s: 79%;
    --l: 66%;
    --hex: #6495ed
}

.cornsilk,[color=cornsilk] {
    --r: 255;
    --g: 248;
    --b: 220;
    --h: 48;
    --s: 100%;
    --l: 93%;
    --hex: #fff8dc
}

.crimson,[color=crimson] {
    --r: 220;
    --g: 20;
    --b: 60;
    --h: 348;
    --s: 83%;
    --l: 47%;
    --hex: #dc143c
}

.cyan,[color=cyan] {
    --r: 0;
    --g: 255;
    --b: 255;
    --h: 180;
    --s: 100%;
    --l: 50%;
    --hex: #00ffff
}

.darkblue,[color=darkblue] {
    --r: 0;
    --g: 0;
    --b: 139;
    --h: 240;
    --s: 100%;
    --l: 27%;
    --hex: #00008b
}

.darkcyan,[color=darkcyan] {
    --r: 0;
    --g: 139;
    --b: 139;
    --h: 180;
    --s: 100%;
    --l: 27%;
    --hex: #008b8b
}

.darkgoldenrod,[color=darkgoldenrod] {
    --r: 184;
    --g: 134;
    --b: 11;
    --h: 43;
    --s: 89%;
    --l: 38%;
    --hex: #b8860b
}

.darkgray,[color=darkgray] {
    --r: 169;
    --g: 169;
    --b: 169;
    --h: 0;
    --s: 0%;
    --l: 66%;
    --hex: #a9a9a9
}

.darkgreen,[color=darkgreen] {
    --r: 0;
    --g: 100;
    --b: 0;
    --h: 120;
    --s: 100%;
    --l: 20%;
    --hex: #006400
}

.darkgrey,[color=darkgrey] {
    --r: 169;
    --g: 169;
    --b: 169;
    --h: 0;
    --s: 0%;
    --l: 66%;
    --hex: #a9a9a9
}

.darkkhaki,[color=darkkhaki] {
    --r: 189;
    --g: 183;
    --b: 107;
    --h: 56;
    --s: 38%;
    --l: 58%;
    --hex: #bdb76b
}

.darkmagenta,[color=darkmagenta] {
    --r: 139;
    --g: 0;
    --b: 139;
    --h: 300;
    --s: 100%;
    --l: 27%;
    --hex: #8b008b
}

.darkolivegreen,[color=darkolivegreen] {
    --r: 85;
    --g: 107;
    --b: 47;
    --h: 82;
    --s: 39%;
    --l: 30%;
    --hex: #556b2f
}

.darkorange,[color=darkorange] {
    --r: 255;
    --g: 140;
    --b: 0;
    --h: 33;
    --s: 100%;
    --l: 50%;
    --hex: #ff8c00
}

.darkorchid,[color=darkorchid] {
    --r: 153;
    --g: 50;
    --b: 204;
    --h: 280;
    --s: 61%;
    --l: 50%;
    --hex: #9932cc
}

.darkred,[color=darkred] {
    --r: 139;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 100%;
    --l: 27%;
    --hex: #8b0000
}

.darksalmon,[color=darksalmon] {
    --r: 233;
    --g: 150;
    --b: 122;
    --h: 15;
    --s: 72%;
    --l: 70%;
    --hex: #e9967a
}

.darkseagreen,[color=darkseagreen] {
    --r: 143;
    --g: 188;
    --b: 143;
    --h: 120;
    --s: 25%;
    --l: 65%;
    --hex: #8fbc8f
}

.darkslateblue,[color=darkslateblue] {
    --r: 72;
    --g: 61;
    --b: 139;
    --h: 248;
    --s: 39%;
    --l: 39%;
    --hex: #483d8b
}

.darkslategray,[color=darkslategray] {
    --r: 47;
    --g: 79;
    --b: 79;
    --h: 180;
    --s: 25%;
    --l: 25%;
    --hex: #2f4f4f
}

.darkslategrey,[color=darkslategrey] {
    --r: 47;
    --g: 79;
    --b: 79;
    --h: 180;
    --s: 25%;
    --l: 25%;
    --hex: #2f4f4f
}

.darkturquoise,[color=darkturquoise] {
    --r: 0;
    --g: 206;
    --b: 209;
    --h: 181;
    --s: 100%;
    --l: 41%;
    --hex: #00ced1
}

.darkviolet,[color=darkviolet] {
    --r: 148;
    --g: 0;
    --b: 211;
    --h: 282;
    --s: 100%;
    --l: 41%;
    --hex: #9400d3
}

.deeppink,[color=deeppink] {
    --r: 255;
    --g: 20;
    --b: 147;
    --h: 328;
    --s: 100%;
    --l: 54%;
    --hex: #ff1493
}

.deepskyblue,[color=deepskyblue] {
    --r: 0;
    --g: 191;
    --b: 255;
    --h: 195;
    --s: 100%;
    --l: 50%;
    --hex: #00bfff
}

.dimgray,[color=dimgray] {
    --r: 105;
    --g: 105;
    --b: 105;
    --h: 0;
    --s: 0%;
    --l: 41%;
    --hex: #696969
}

.dimgrey,[color=dimgrey] {
    --r: 105;
    --g: 105;
    --b: 105;
    --h: 0;
    --s: 0%;
    --l: 41%;
    --hex: #696969
}

.dodgerblue,[color=dodgerblue] {
    --r: 30;
    --g: 144;
    --b: 255;
    --h: 210;
    --s: 100%;
    --l: 56%;
    --hex: #1e90ff
}

.firebrick,[color=firebrick] {
    --r: 178;
    --g: 34;
    --b: 34;
    --h: 0;
    --s: 68%;
    --l: 42%;
    --hex: #b22222
}

.floralwhite,[color=floralwhite] {
    --r: 255;
    --g: 250;
    --b: 240;
    --h: 40;
    --s: 100%;
    --l: 97%;
    --hex: #fffaf0
}

.forestgreen,[color=forestgreen] {
    --r: 34;
    --g: 139;
    --b: 34;
    --h: 120;
    --s: 61%;
    --l: 34%;
    --hex: #228b22
}

.gainsboro,[color=gainsboro] {
    --r: 220;
    --g: 220;
    --b: 220;
    --h: 0;
    --s: 0%;
    --l: 86%;
    --hex: #dcdcdc
}

.ghostwhite,[color=ghostwhite] {
    --r: 248;
    --g: 248;
    --b: 255;
    --h: 240;
    --s: 100%;
    --l: 99%;
    --hex: #f8f8ff
}

.gold,[color=gold] {
    --r: 255;
    --g: 215;
    --b: 0;
    --h: 51;
    --s: 100%;
    --l: 50%;
    --hex: #ffd700
}

.goldenrod,[color=goldenrod] {
    --r: 218;
    --g: 165;
    --b: 32;
    --h: 43;
    --s: 74%;
    --l: 49%;
    --hex: #daa520
}

.greenyellow,[color=greenyellow] {
    --r: 173;
    --g: 255;
    --b: 47;
    --h: 84;
    --s: 100%;
    --l: 59%;
    --hex: #adff2f
}

.grey,[color=grey] {
    --r: 128;
    --g: 128;
    --b: 128;
    --h: 0;
    --s: 0%;
    --l: 50%;
    --hex: #808080
}

.honeydew,[color=honeydew] {
    --r: 240;
    --g: 255;
    --b: 240;
    --h: 120;
    --s: 100%;
    --l: 97%;
    --hex: #f0fff0
}

.hotpink,[color=hotpink] {
    --r: 255;
    --g: 105;
    --b: 180;
    --h: 330;
    --s: 100%;
    --l: 71%;
    --hex: #ff69b4
}

.indianred,[color=indianred] {
    --r: 205;
    --g: 92;
    --b: 92;
    --h: 0;
    --s: 53%;
    --l: 58%;
    --hex: #cd5c5c
}

.indigo,[color=indigo] {
    --r: 75;
    --g: 0;
    --b: 130;
    --h: 275;
    --s: 100%;
    --l: 25%;
    --hex: #4b0082
}

.ivory,[color=ivory] {
    --r: 255;
    --g: 255;
    --b: 240;
    --h: 60;
    --s: 100%;
    --l: 97%;
    --hex: #fffff0
}

.khaki,[color=khaki] {
    --r: 240;
    --g: 230;
    --b: 140;
    --h: 54;
    --s: 77%;
    --l: 75%;
    --hex: #f0e68c
}

.lavender,[color=lavender] {
    --r: 230;
    --g: 230;
    --b: 250;
    --h: 240;
    --s: 67%;
    --l: 94%;
    --hex: #e6e6fa
}

.lavenderblush,[color=lavenderblush] {
    --r: 255;
    --g: 240;
    --b: 245;
    --h: 340;
    --s: 100%;
    --l: 97%;
    --hex: #fff0f5
}

.lawngreen,[color=lawngreen] {
    --r: 124;
    --g: 252;
    --b: 0;
    --h: 90;
    --s: 100%;
    --l: 49%;
    --hex: #7cfc00
}

.lemonchiffon,[color=lemonchiffon] {
    --r: 255;
    --g: 250;
    --b: 205;
    --h: 54;
    --s: 100%;
    --l: 90%;
    --hex: #fffacd
}

.lightblue,[color=lightblue] {
    --r: 173;
    --g: 216;
    --b: 230;
    --h: 195;
    --s: 53%;
    --l: 79%;
    --hex: #add8e6
}

.lightcoral,[color=lightcoral] {
    --r: 240;
    --g: 128;
    --b: 128;
    --h: 0;
    --s: 79%;
    --l: 72%;
    --hex: #f08080
}

.lightcyan,[color=lightcyan] {
    --r: 224;
    --g: 255;
    --b: 255;
    --h: 180;
    --s: 100%;
    --l: 94%;
    --hex: #e0ffff
}

.lightgoldenrodyellow,[color=lightgoldenrodyellow] {
    --r: 250;
    --g: 250;
    --b: 210;
    --h: 60;
    --s: 80%;
    --l: 90%;
    --hex: #fafad2
}

.lightgray,[color=lightgray] {
    --r: 211;
    --g: 211;
    --b: 211;
    --h: 0;
    --s: 0%;
    --l: 83%;
    --hex: #d3d3d3
}

.lightgreen,[color=lightgreen] {
    --r: 144;
    --g: 238;
    --b: 144;
    --h: 120;
    --s: 73%;
    --l: 75%;
    --hex: #90ee90
}

.lightgrey,[color=lightgrey] {
    --r: 211;
    --g: 211;
    --b: 211;
    --h: 0;
    --s: 0%;
    --l: 83%;
    --hex: #d3d3d3
}

.lightpink,[color=lightpink] {
    --r: 255;
    --g: 182;
    --b: 193;
    --h: 351;
    --s: 100%;
    --l: 86%;
    --hex: #ffb6c1
}

.lightsalmon,[color=lightsalmon] {
    --r: 255;
    --g: 160;
    --b: 122;
    --h: 17;
    --s: 100%;
    --l: 74%;
    --hex: #ffa07a
}

.lightseagreen,[color=lightseagreen] {
    --r: 32;
    --g: 178;
    --b: 170;
    --h: 177;
    --s: 70%;
    --l: 41%;
    --hex: #20b2aa
}

.lightskyblue,[color=lightskyblue] {
    --r: 135;
    --g: 206;
    --b: 250;
    --h: 203;
    --s: 92%;
    --l: 75%;
    --hex: #87cefa
}

.lightslategray,[color=lightslategray] {
    --r: 119;
    --g: 136;
    --b: 153;
    --h: 210;
    --s: 14%;
    --l: 53%;
    --hex: #778899
}

.lightslategrey,[color=lightslategrey] {
    --r: 119;
    --g: 136;
    --b: 153;
    --h: 210;
    --s: 14%;
    --l: 53%;
    --hex: #778899
}

.lightsteelblue,[color=lightsteelblue] {
    --r: 176;
    --g: 196;
    --b: 222;
    --h: 214;
    --s: 41%;
    --l: 78%;
    --hex: #b0c4de
}

.lightyellow,[color=lightyellow] {
    --r: 255;
    --g: 255;
    --b: 224;
    --h: 60;
    --s: 100%;
    --l: 94%;
    --hex: #ffffe0
}

.limegreen,[color=limegreen] {
    --r: 50;
    --g: 205;
    --b: 50;
    --h: 120;
    --s: 61%;
    --l: 50%;
    --hex: #32cd32
}

.linen,[color=linen] {
    --r: 250;
    --g: 240;
    --b: 230;
    --h: 30;
    --s: 67%;
    --l: 94%;
    --hex: #faf0e6
}

.magenta,[color=magenta] {
    --r: 255;
    --g: 0;
    --b: 255;
    --h: 300;
    --s: 100%;
    --l: 50%;
    --hex: #ff00ff
}

.mediumaquamarine,[color=mediumaquamarine] {
    --r: 102;
    --g: 205;
    --b: 170;
    --h: 160;
    --s: 51%;
    --l: 60%;
    --hex: #66cdaa
}

.mediumblue,[color=mediumblue] {
    --r: 0;
    --g: 0;
    --b: 205;
    --h: 240;
    --s: 100%;
    --l: 40%;
    --hex: #0000cd
}

.mediumorchid,[color=mediumorchid] {
    --r: 186;
    --g: 85;
    --b: 211;
    --h: 288;
    --s: 59%;
    --l: 58%;
    --hex: #ba55d3
}

.mediumpurple,[color=mediumpurple] {
    --r: 147;
    --g: 112;
    --b: 219;
    --h: 260;
    --s: 60%;
    --l: 65%;
    --hex: #9370db
}

.mediumseagreen,[color=mediumseagreen] {
    --r: 60;
    --g: 179;
    --b: 113;
    --h: 147;
    --s: 50%;
    --l: 47%;
    --hex: #3cb371
}

.mediumslateblue,[color=mediumslateblue] {
    --r: 123;
    --g: 104;
    --b: 238;
    --h: 249;
    --s: 80%;
    --l: 67%;
    --hex: #7b68ee
}

.mediumspringgreen,[color=mediumspringgreen] {
    --r: 0;
    --g: 250;
    --b: 154;
    --h: 157;
    --s: 100%;
    --l: 49%;
    --hex: #00fa9a
}

.mediumturquoise,[color=mediumturquoise] {
    --r: 72;
    --g: 209;
    --b: 204;
    --h: 178;
    --s: 60%;
    --l: 55%;
    --hex: #48d1cc
}

.mediumvioletred,[color=mediumvioletred] {
    --r: 199;
    --g: 21;
    --b: 133;
    --h: 322;
    --s: 81%;
    --l: 43%;
    --hex: #c71585
}

.midnightblue,[color=midnightblue] {
    --r: 25;
    --g: 25;
    --b: 112;
    --h: 240;
    --s: 64%;
    --l: 27%;
    --hex: #191970
}

.mintcream,[color=mintcream] {
    --r: 245;
    --g: 255;
    --b: 250;
    --h: 150;
    --s: 100%;
    --l: 98%;
    --hex: #f5fffa
}

.mistyrose,[color=mistyrose] {
    --r: 255;
    --g: 228;
    --b: 225;
    --h: 6;
    --s: 100%;
    --l: 94%;
    --hex: #ffe4e1
}

.moccasin,[color=moccasin] {
    --r: 255;
    --g: 228;
    --b: 181;
    --h: 38;
    --s: 100%;
    --l: 85%;
    --hex: #ffe4b5
}

.navajowhite,[color=navajowhite] {
    --r: 255;
    --g: 222;
    --b: 173;
    --h: 36;
    --s: 100%;
    --l: 84%;
    --hex: #ffdead
}

.oldlace,[color=oldlace] {
    --r: 253;
    --g: 245;
    --b: 230;
    --h: 39;
    --s: 85%;
    --l: 95%;
    --hex: #fdf5e6
}

.olivedrab,[color=olivedrab] {
    --r: 107;
    --g: 142;
    --b: 35;
    --h: 80;
    --s: 60%;
    --l: 35%;
    --hex: #6b8e23
}

.orangered,[color=orangered] {
    --r: 255;
    --g: 69;
    --b: 0;
    --h: 16;
    --s: 100%;
    --l: 50%;
    --hex: #ff4500
}

.orchid,[color=orchid] {
    --r: 218;
    --g: 112;
    --b: 214;
    --h: 302;
    --s: 59%;
    --l: 65%;
    --hex: #da70d6
}

.palegoldenrod,[color=palegoldenrod] {
    --r: 238;
    --g: 232;
    --b: 170;
    --h: 55;
    --s: 67%;
    --l: 80%;
    --hex: #eee8aa
}

.palegreen,[color=palegreen] {
    --r: 152;
    --g: 251;
    --b: 152;
    --h: 120;
    --s: 93%;
    --l: 79%;
    --hex: #98fb98
}

.paleturquoise,[color=paleturquoise] {
    --r: 175;
    --g: 238;
    --b: 238;
    --h: 180;
    --s: 65%;
    --l: 81%;
    --hex: #afeeee
}

.palevioletred,[color=palevioletred] {
    --r: 219;
    --g: 112;
    --b: 147;
    --h: 340;
    --s: 60%;
    --l: 65%;
    --hex: #db7093
}

.papayawhip,[color=papayawhip] {
    --r: 255;
    --g: 239;
    --b: 213;
    --h: 37;
    --s: 100%;
    --l: 92%;
    --hex: #ffefd5
}

.peachpuff,[color=peachpuff] {
    --r: 255;
    --g: 218;
    --b: 185;
    --h: 28;
    --s: 100%;
    --l: 86%;
    --hex: #ffdab9
}

.peru,[color=peru] {
    --r: 205;
    --g: 133;
    --b: 63;
    --h: 30;
    --s: 59%;
    --l: 53%;
    --hex: #cd853f
}

.pink,[color=pink] {
    --r: 255;
    --g: 192;
    --b: 203;
    --h: 350;
    --s: 100%;
    --l: 88%;
    --hex: #ffc0cb
}

.plum,[color=plum] {
    --r: 221;
    --g: 160;
    --b: 221;
    --h: 300;
    --s: 47%;
    --l: 75%;
    --hex: #dda0dd
}

.powderblue,[color=powderblue] {
    --r: 176;
    --g: 224;
    --b: 230;
    --h: 187;
    --s: 52%;
    --l: 80%;
    --hex: #b0e0e6
}

.rosybrown,[color=rosybrown] {
    --r: 188;
    --g: 143;
    --b: 143;
    --h: 0;
    --s: 25%;
    --l: 65%;
    --hex: #bc8f8f
}

.royalblue,[color=royalblue] {
    --r: 65;
    --g: 105;
    --b: 225;
    --h: 225;
    --s: 73%;
    --l: 57%;
    --hex: #4169e1
}

.saddlebrown,[color=saddlebrown] {
    --r: 139;
    --g: 69;
    --b: 19;
    --h: 25;
    --s: 76%;
    --l: 31%;
    --hex: #8b4513
}

.salmon,[color=salmon] {
    --r: 250;
    --g: 128;
    --b: 114;
    --h: 6;
    --s: 93%;
    --l: 71%;
    --hex: #fa8072
}

.sandybrown,[color=sandybrown] {
    --r: 244;
    --g: 164;
    --b: 96;
    --h: 28;
    --s: 87%;
    --l: 67%;
    --hex: #f4a460
}

.seagreen,[color=seagreen] {
    --r: 46;
    --g: 139;
    --b: 87;
    --h: 146;
    --s: 50%;
    --l: 36%;
    --hex: #2e8b57
}

.seashell,[color=seashell] {
    --r: 255;
    --g: 245;
    --b: 238;
    --h: 25;
    --s: 100%;
    --l: 97%;
    --hex: #fff5ee
}

.sienna,[color=sienna] {
    --r: 160;
    --g: 82;
    --b: 45;
    --h: 19;
    --s: 56%;
    --l: 40%;
    --hex: #a0522d
}

.skyblue,[color=skyblue] {
    --r: 135;
    --g: 206;
    --b: 235;
    --h: 197;
    --s: 71%;
    --l: 73%;
    --hex: #87ceeb
}

.slateblue,[color=slateblue] {
    --r: 106;
    --g: 90;
    --b: 205;
    --h: 248;
    --s: 53%;
    --l: 58%;
    --hex: #6a5acd
}

.slategray,[color=slategray] {
    --r: 112;
    --g: 128;
    --b: 144;
    --h: 210;
    --s: 13%;
    --l: 50%;
    --hex: #708090
}

.slategrey,[color=slategrey] {
    --r: 112;
    --g: 128;
    --b: 144;
    --h: 210;
    --s: 13%;
    --l: 50%;
    --hex: #708090
}

.snow,[color=snow] {
    --r: 255;
    --g: 250;
    --b: 250;
    --h: 0;
    --s: 100%;
    --l: 99%;
    --hex: #fffafa
}

.springgreen,[color=springgreen] {
    --r: 0;
    --g: 255;
    --b: 127;
    --h: 150;
    --s: 100%;
    --l: 50%;
    --hex: #00ff7f
}

.steelblue,[color=steelblue] {
    --r: 70;
    --g: 130;
    --b: 180;
    --h: 207;
    --s: 44%;
    --l: 49%;
    --hex: #4682b4
}

.tan,[color=tan] {
    --r: 210;
    --g: 180;
    --b: 140;
    --h: 34;
    --s: 44%;
    --l: 69%;
    --hex: #d2b48c
}

.thistle,[color=thistle] {
    --r: 216;
    --g: 191;
    --b: 216;
    --h: 300;
    --s: 24%;
    --l: 80%;
    --hex: #d8bfd8
}

.tomato,[color=tomato] {
    --r: 255;
    --g: 99;
    --b: 71;
    --h: 9;
    --s: 100%;
    --l: 64%;
    --hex: #ff6347
}

.turquoise,[color=turquoise] {
    --r: 64;
    --g: 224;
    --b: 208;
    --h: 174;
    --s: 72%;
    --l: 56%;
    --hex: #40e0d0
}

.violet,[color=violet] {
    --r: 238;
    --g: 130;
    --b: 238;
    --h: 300;
    --s: 76%;
    --l: 72%;
    --hex: #ee82ee
}

.wheat,[color=wheat] {
    --r: 245;
    --g: 222;
    --b: 179;
    --h: 39;
    --s: 77%;
    --l: 83%;
    --hex: #f5deb3
}

.whitesmoke,[color=whitesmoke] {
    --r: 245;
    --g: 245;
    --b: 245;
    --h: 0;
    --s: 0%;
    --l: 96%;
    --hex: #f5f5f5
}

.yellowgreen,[color=yellowgreen] {
    --r: 154;
    --g: 205;
    --b: 50;
    --h: 80;
    --s: 61%;
    --l: 50%;
    --hex: #9acd32
}

.rebeccapurple,[color=rebeccapurple] {
    --r: 102;
    --g: 51;
    --b: 153;
    --h: 270;
    --s: 50%;
    --l: 40%;
    --hex: #663399
}

.kleinblue,[color=kleinblue] {
    --r: 0;
    --g: 47;
    --b: 167;
    --h: 223;
    --s: 100%;
    --l: 33%;
    --hex: #002fa7
}

.alipay,[color=alipay] {
    --r: 22;
    --g: 119;
    --b: 254;
    --h: 215;
    --s: 99%;
    --l: 54%;
    --hex: #1677fe
}

.android,[color=android] {
    --r: 61;
    --g: 220;
    --b: 132;
    --h: 147;
    --s: 69%;
    --l: 55%;
    --hex: #3ddc84
}

.apple,[color=apple] {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%;
    --hex: #000000
}

.blackberry,[color=blackberry] {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%;
    --hex: #000000
}

.chrome,[color=chrome] {
    --r: 26;
    --g: 115;
    --b: 232;
    --h: 214;
    --s: 82%;
    --l: 51%;
    --hex: #1a73e8
}

.edge,[color=edge] {
    --r: 0;
    --g: 103;
    --b: 184;
    --h: 206;
    --s: 100%;
    --l: 36%;
    --hex: #0067b8
}

.facebook,[color=facebook] {
    --r: 66;
    --g: 103;
    --b: 178;
    --h: 220;
    --s: 46%;
    --l: 48%;
    --hex: #4267B2
}

.firefox,[color=firefox] {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%;
    --hex: #000000
}

.github,[color=github] {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%;
    --hex: #000000
}

.google,[color=google] {
    --r: 66;
    --g: 133;
    --b: 244;
    --h: 217;
    --s: 89%;
    --l: 61%;
    --hex: #4285F4
}

.googleplay,[color=googleplay] {
    --r: 104;
    --g: 159;
    --b: 56;
    --h: 92;
    --s: 48%;
    --l: 42%;
    --hex: #689f38
}

.hangouts,[color=hangouts] {
    --r: 28;
    --g: 164;
    --b: 99;
    --h: 151;
    --s: 71%;
    --l: 38%;
    --hex: #1CA463
}

.hitpoints,[color=hitpoints] {
    --r: 102;
    --g: 51;
    --b: 153;
    --h: 270;
    --s: 50%;
    --l: 40%;
    --hex: #663399
}

.huawei,[color=huawei] {
    --r: 207;
    --g: 10;
    --b: 44;
    --h: 350;
    --s: 91%;
    --l: 43%;
    --hex: #cf0a2c
}

.ie,[color=ie] {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%;
    --hex: #000000
}

.instagram,[color=instagram] {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%;
    --hex: #000000
}

.kaleoz,[color=kaleoz] {
    --r: 30;
    --g: 144;
    --b: 255;
    --h: 210;
    --s: 100%;
    --l: 56%;
    --hex: #1e90ff
}

.line,[color=line] {
    --r: 18;
    --g: 185;
    --b: 0;
    --h: 114;
    --s: 100%;
    --l: 36%;
    --hex: #12B900
}

.linkedin,[color=linkedin] {
    --r: 10;
    --g: 102;
    --b: 194;
    --h: 210;
    --s: 90%;
    --l: 40%;
    --hex: #0a66c2
}

.messenger,[color=messenger] {
    --r: 0;
    --g: 132;
    --b: 255;
    --h: 209;
    --s: 100%;
    --l: 50%;
    --hex: #0084FF
}

.mi,[color=mi] {
    --r: 255;
    --g: 106;
    --b: 0;
    --h: 25;
    --s: 100%;
    --l: 50%;
    --hex: #ff6a00
}

.microsoft,[color=microsoft] {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%;
    --hex: #000000
}

.opera,[color=opera] {
    --r: 246;
    --g: 22;
    --b: 41;
    --h: 355;
    --s: 93%;
    --l: 53%;
    --hex: #f61629
}

.paypal,[color=paypal] {
    --r: 0;
    --g: 112;
    --b: 186;
    --h: 204;
    --s: 100%;
    --l: 36%;
    --hex: #0070ba
}

.pinterest,[color=pinterest] {
    --r: 230;
    --g: 0;
    --b: 35;
    --h: 351;
    --s: 100%;
    --l: 45%;
    --hex: #E60023
}

.playstation,[color=playstation] {
    --r: 0;
    --g: 114;
    --b: 206;
    --h: 207;
    --s: 100%;
    --l: 40%;
    --hex: #0072ce
}

.qq,[color=qq] {
    --r: 30;
    --g: 144;
    --b: 255;
    --h: 210;
    --s: 100%;
    --l: 56%;
    --hex: #1E90FF
}

.safari,[color=safari] {
    --r: 0;
    --g: 112;
    --b: 201;
    --h: 207;
    --s: 100%;
    --l: 39%;
    --hex: #0070c9
}

.seagm,[color=seagm] {
    --r: 249;
    --g: 176;
    --b: 28;
    --h: 40;
    --s: 95%;
    --l: 54%;
    --hex: #f9b01c
}

.seagmpay,[color=seagmpay] {
    --r: 249;
    --g: 0;
    --b: 26;
    --h: 354;
    --s: 100%;
    --l: 49%;
    --hex: #f9001a
}

.skype,[color=skype] {
    --r: 0;
    --g: 120;
    --b: 202;
    --h: 204;
    --s: 100%;
    --l: 40%;
    --hex: #0078CA
}

.spotify,[color=spotify] {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%;
    --hex: #000000
}

.steam,[color=steam] {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%;
    --hex: #000000
}

.telegram,[color=telegram] {
    --r: 0;
    --g: 136;
    --b: 204;
    --h: 200;
    --s: 100%;
    --l: 40%;
    --hex: #0088cc
}

.tiktok,[color=tiktok] {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%;
    --hex: #000000
}

.twitch,[color=twitch] {
    --r: 119;
    --g: 44;
    --b: 232;
    --h: 264;
    --s: 80%;
    --l: 54%;
    --hex: #772ce8
}

.twitter,[color=twitter] {
    --r: 29;
    --g: 161;
    --b: 242;
    --h: 203;
    --s: 89%;
    --l: 53%;
    --hex: #1DA1F2
}

.vk,[color=vk] {
    --r: 74;
    --g: 118;
    --b: 168;
    --h: 212;
    --s: 39%;
    --l: 47%;
    --hex: #4A76A8
}

.wechat,[color=wechat] {
    --r: 0;
    --g: 213;
    --b: 0;
    --h: 120;
    --s: 100%;
    --l: 42%;
    --hex: #00D500
}

.weibo,[color=weibo] {
    --r: 230;
    --g: 23;
    --b: 45;
    --h: 354;
    --s: 82%;
    --l: 50%;
    --hex: #e6172d
}

.whatsapp,[color=whatsapp] {
    --r: 30;
    --g: 190;
    --b: 165;
    --h: 171;
    --s: 73%;
    --l: 43%;
    --hex: #1EBEA5
}

.windows,[color=windows] {
    --r: 2;
    --g: 121;
    --b: 217;
    --h: 207;
    --s: 98%;
    --l: 43%;
    --hex: #0279d9
}

.xbox,[color=xbox] {
    --r: 16;
    --g: 124;
    --b: 16;
    --h: 120;
    --s: 77%;
    --l: 27%;
    --hex: #107c10
}

.youtube,[color=youtube] {
    --r: 230;
    --g: 33;
    --b: 23;
    --h: 3;
    --s: 82%;
    --l: 50%;
    --hex: #E62117
}

.btw {
    display: inline-block;
    vertical-align: middle;
    font-size: var(--CPT-FS,1em);
    font-family: var(--font-family,var(--CPT-FF));
    font-weight: var(--font-weight,600);
    color: var(--color,CurrentColor);
    background-color: var(--background-color,#fff);
    box-shadow: var(--border-color,var(--CPT-BDC)) 0 0 0 var(--CPT-BDW) inset,var(--shadow-color,transparent) 0 0 .5em;
    border-radius: var(--CPT-BDR);
    position: relative;
    text-decoration: none;
    cursor: pointer;
    transition: var(--CPT-TST);
    -webkit-tap-highlight-color: transparent
}

.btw>span[icon]:before {
    content: attr(icon);
    flex: none;
    display: block;
    font-size: var(--icon-size,calc(var(--CPT-FS) * 2))
}

.btw>span[icon-brand]:before {
    flex: none;
    display: block;
    font-size: var(--icon-size,calc(var(--CPT-FS) * 2))
}

.btw>span[icon-only] {
    display: block;
    line-height: var(--CPT-UH);
    overflow: hidden;
    width: var(--CPT-UH);
    height: var(--CPT-UH);
    padding: calc(var(--CPT-FS)/ 2)
}

.btw>span[icon-only]:before {
    content: attr(icon-only);
    flex: none;
    display: block;
    font-size: var(--icon-size,calc(var(--CPT-FS) * 2))
}

.btw>button,.btw>input {
    position: absolute;
    top: 0;
    left: 0;
    outline: 0;
    color: transparent;
    background: 0 0;
    border: none;
    width: 0;
    height: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    overflow: hidden
}

.btw:focus,.btw:focus-within,.btw:hover {
    text-decoration: none;
    outline: 0;
    --shadow-color: var(--CPT-BDC)
}

.btw:active {
    transform: scale(.95);
    opacity: .8;
    --shadow-color: transparent
}

.btw[color],[color] {
    --threshold: 0.72;
    --background-color: rgba(var(--r,255) var(--g,255) var(--b,255) / var(--background-alpha,1));
    --red: calc(var(--r) * 0.2126);
    --green: calc(var(--g) * 0.7152);
    --blue: calc(var(--b) * 0.0722);
    --sum: calc(var(--red) + var(--green) + var(--blue));
    --lightness: calc(var(--sum) / 255);
    --color: hsl(0 0% calc((var(--lightness) - var(--threshold)) * -999999%) / var(--color-alpha,1));
    --border-threshold: 0.85;
    --border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
    --border-color: rgba(calc(var(--r) - 50),calc(var(--g) - 50),calc(var(--b) - 50),var(--border-alpha))
}

.btw[color]:focus,.btw[color]:focus-within,.btw[color]:hover {
    --shadow-color: rgba(var(--r),var(--g),var(--b))
}

.btw[color]:active {
    --shadow-color: transparent
}

.btw[color=theme] {
    --r: var(--CPT-THM-R);
    --g: var(--CPT-THM-G);
    --b: var(--CPT-THM-B)
}

.btw[color=transparent] {
    --background-color: transparent;
    --border-color: transparent;
    --shadow-color: transparent!important;
    --color: CurrentColor;
    --padding-inline: calc(var(--CPT-FS) / 2)
}

.btw.btwloading,.btw.disabled {
    cursor: not-allowed;
    pointer-events: none;
    --shadow-color: transparent!important;
    opacity: .5
}

.btw.btwloading>span:before {
    content: '';
    display: block;
    font-size: var(--icon-size,calc(var(--CPT-FS) * 2));
    width: 1em;
    height: 1em;
    border-radius: 100%;
    background: currentColor;
    opacity: 0;
    animation: btwloadingdot .75s 0s ease-out infinite
}

@keyframes btwloadingdot {
    0% {
        transform: scale(.25)
    }

    30% {
        opacity: 1
    }

    100% {
        transform: scale(.75)
    }
}

.cpt-text {
    display: flex;
    align-items: center;
    border: var(--CPT-BD);
    border-radius: var(--CPT-BDR);
    box-shadow: var(--shadow-focus-color,transparent) 0 0 .5em,var(--background-focus-color,transparent) 9999em 0 0 inset
}

.cpt-text>input {
    flex: auto;
    width: 100%;
    min-width: var(--CPT-UH)
}

.cpt-text>span {
    flex: none;
    padding: 0 var(--CPT-INPTPD)
}

.cpt-text>span[icon] {
    display: flex;
    align-items: center
}

.cpt-text>span[icon]:before {
    content: attr(icon);
    font-size: 1.5em;
    display: block;
    margin-right: .333334em
}

.cpt-text>span[icon-only] {
    width: 1.5em;
    height: 1.5em;
    line-height: 99;
    overflow: hidden
}

.cpt-text>span[icon-only]:before {
    content: attr(icon-only);
    font-size: 1.5em;
    display: block
}

.cpt-search {
    display: flex;
    align-items: center;
    border: var(--CPT-BD);
    border-radius: var(--CPT-BDR);
    box-shadow: var(--shadow-focus-color,transparent) 0 0 .5em,var(--background-focus-color,transparent) 9999em 0 0 inset
}

.cpt-search>input {
    flex: auto;
    width: 100%;
    min-width: calc(var(--CPT-UH) + (var(--CPT-FS) * 2))
}

.cpt-search>.btw {
    flex: none;
    margin: calc(var(--CPT-BDW) * -1);
    transform: none
}

.cpt-search>span {
    flex: none;
    padding: 0 var(--CPT-INPTPD)
}

.cpt-search>span[icon] {
    width: 1.5em;
    height: 1.5em;
    line-height: 99;
    overflow: hidden
}

.cpt-search>span[icon]:before {
    content: attr(icon);
    font-size: 1.5em;
    display: block
}

.cpt-search>.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    margin: calc(var(--CPT-FS)/ 2) calc(var(--CPT-BDW) * -1);
    max-height: calc(var(--CPT-UH) * 5 + var(--CPT-BDW) * 2);
    width: calc(100% + calc(var(--CPT-BDW) * 2));
    overflow: hidden;
    overflow-y: auto;
    background: var(--CPT-INPTBG);
    border: var(--CPT-BD);
    border-radius: var(--CPT-BDR);
    box-shadow: rgb(0 0 0 / 10%) 0 .5em .5em;
    box-sizing: border-box
}

.cpt-search>.dropdown.show,.cpt-search>.dropdown:focus-within,.cpt-search>.dropdown:hover {
    display: block
}

.cpt-search>.dropdown>ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.cpt-search>.dropdown>ul>li>a {
    display: block;
    padding: calc(var(--CPT-FS)/ 1.333333) var(--CPT-FS);
    color: currentColor;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: 0
}

.cpt-search>.dropdown>ul>li>a:hover {
    background: var(--CPT-THM-A10)
}

.cpt-search>.dropdown>ul>li>a:focus {
    color: var(--CPT-THM);
    font-weight: 600
}

.cpt-search>.dropdown.loading>ul {
    display: none
}

.cpt-search>.dropdown.loading:before {
    content: 'Loading...';
    display: block;
    line-height: calc(var(--CPT-UH) - var(--CPT-BDW) * 2);
    margin: 0 var(--CPT-INPTPD);
    color: var(--CPT-INPTPH)
}

.cpt-search>.dropdown.loading:after {
    content: '';
    display: block;
    font-size: var(--CPT-FS);
    width: 1em;
    height: 1em;
    border-radius: 100%;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 1;
    margin: -.5em 1em;
    background: var(--CPT-THM);
    opacity: 0;
    animation: loadingdot .75s 0s ease-out infinite
}

@keyframes loadingdot {
    0% {
        transform: scale(.25)
    }

    30% {
        opacity: 1
    }

    100% {
        transform: scale(1)
    }
}

.cpt-quantity {
    display: flex;
    align-items: center;
    border: var(--CPT-BD);
    border-radius: var(--CPT-BDR);
    box-shadow: var(--shadow-focus-color,transparent) 0 0 .5em,var(--background-focus-color,transparent) 9999em 0 0 inset
}

.cpt-quantity>input[type=number] {
    flex: auto;
    width: 100%;
    min-width: calc(var(--CPT-UH) + (var(--CPT-FS) * 2));
    text-align: center
}

.cpt-quantity>span {
    flex: none;
    padding: 0 var(--CPT-INPTPD)
}

.cpt-quantity>span[icon] {
    width: 1.5em;
    height: 1.5em;
    line-height: 99;
    overflow: hidden
}

.cpt-quantity>span[icon]:before {
    content: attr(icon);
    font-size: 1.5em;
    display: block
}

.cpt-quantity>.btw {
    flex: none;
    margin: calc(var(--CPT-BDW) * -1);
    box-shadow: none!important
}

.cpt-quantity>.btw>span {
    padding: .5em 1em
}

.cpt-quantity>.btw>span[icon-only] {
    padding: .75em
}

.cpt-quantity>.btw>span[icon-only]:before {
    font-size: 1.5em
}

.cpt-quantity>.btw.minus {
    order: -1
}

.cpt-quantity>.btw.plus {
    order: 1
}

.cpt-select {
    display: flex;
    align-items: center;
    border: var(--CPT-BD);
    border-radius: var(--CPT-BDR);
    box-shadow: var(--shadow-focus-color,transparent) 0 0 .5em,var(--background-focus-color,transparent) 9999em 0 0 inset
}

.cpt-select:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 0;
    --select-arrow-size: calc(var(--CPT-FS) / 4);
    margin: calc(var(--CPT-FS)/ 4 / -2) calc(var(--CPT-INPTPD) - var(--select-arrow-size)/ 2);
    border: var(--select-arrow-size) transparent solid;
    border-top-color: var(--CPT-INPTCL);
    opacity: .5;
    pointer-events: none
}

.cpt-select>select:-moz-focusring {
    color: transparent;
    text-shadow: var(--CPT-INPTCL) 0 0 0
}

.cpt-select>select {
    flex: auto;
    width: 100%;
    min-width: calc(var(--CPT-UH) + (var(--CPT-INPTPD) * 3));
    padding-right: calc(var(--CPT-INPTPD) * 2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.cpt-select>span {
    flex: none;
    padding: 0 var(--CPT-INPTPD)
}

.cpt-select>span[icon] {
    width: 1.5em;
    height: 1.5em;
    line-height: 99;
    overflow: hidden
}

.cpt-select>span[icon]:before {
    content: attr(icon);
    font-size: 1.5em;
    display: block
}

.cpt-combine {
    display: flex;
    align-items: center;
    border: var(--CPT-BD);
    border-radius: var(--CPT-BDR);
    box-shadow: var(--shadow-focus-color,transparent) 0 0 .5em,var(--background-focus-color,transparent) 9999em 0 0 inset
}

.cpt-combine:focus-within {
    --CPT-BD: var(--CPT-THM) var(--CPT-BDW) solid;
    --shadow-focus-color: rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B) / .5)
}

.cpt-combine>[class*=cpt-] {
    flex: auto;
    border: none;
    border-radius: 0;
    background: 0 0!important;
    --shadow-focus-color: transparent!important
}

.cpt-combine>[class*=cpt-]:first-child {
    border-top-left-radius: calc(var(--CPT-BDR) - var(--CPT-BDW));
    border-bottom-left-radius: calc(var(--CPT-BDR) - var(--CPT-BDW))
}

.cpt-combine>[class*=cpt-]:last-child {
    border-top-right-radius: calc(var(--CPT-BDR) - var(--CPT-BDW));
    border-bottom-right-radius: calc(var(--CPT-BDR) - var(--CPT-BDW))
}

.cpt-combine>.btw {
    flex: none;
    margin: calc(var(--CPT-BDW) * -1) 0
}

.cpt-combine>.btw:last-child {
    margin-right: calc(var(--CPT-BDW) * -1);
    transform-origin: right
}

.cpt-combine>.btw>span[icon-only] {
    padding: .5em
}

.cpt-combine>span {
    flex: none;
    padding: 0 var(--CPT-INPTPD)
}

.cpt-combine>span[icon] {
    width: 1.5em;
    height: 1.5em;
    line-height: 99;
    overflow: hidden
}

.cpt-combine>span[icon]:before {
    content: attr(icon);
    font-size: 1.5em;
    display: block
}

.cpt-textarea {
    display: flex;
    flex-direction: column;
    border: var(--CPT-BD);
    border-radius: var(--CPT-BDR);
    overflow: hidden
}

.cpt-textarea:focus-within>span {
    box-shadow: transparent 0 0 0!important
}

.cpt-textarea>textarea {
    display: block;
    width: 100%;
    height: calc(var(--CPT-UH) * 2 - var(--CPT-BDW) * 2);
    min-height: calc(var(--CPT-UH) - var(--CPT-BDW) * 2);
    max-height: calc(var(--CPT-UH) * 6 - var(--CPT-BDW) * 2);
    padding: calc(var(--CPT-INPTPD) * .75 - var(--CPT-BDW)) var(--CPT-INPTPD);
    resize: vertical;
    transition: background var(--CPT-TST),max-height var(--CPT-TST)
}

.cpt-textarea>span {
    flex: none;
    margin: 0 var(--CPT-INPTPD);
    padding: calc(var(--CPT-INPTPD) * .75) 0;
    transition: var(--CPT-TST)
}

.cpt-textarea>span:first-child {
    box-shadow: rgba(0,0,0,.1) 0 1px 0
}

.cpt-textarea>span:last-child {
    box-shadow: rgba(0,0,0,.1) 0 -1px 0
}

.cpt-textarea .word-count:after {
    content: attr(data-word-count)
}

.cpt-textarea.flexible>textarea:not(:focus) {
    max-height: calc(var(--CPT-UH) - var(--CPT-BDW) * 2);
    resize: none;
    overflow: hidden;
    white-space: nowrap
}

.cpt-textarea.autoheight>textarea {
    height: calc(var(--h,0) * 1px);
    resize: none
}

.cpt-checkbox {
    display: inline-block;
    vertical-align: middle;
    background: 0 0;
    -webkit-tap-highlight-color: transparent
}

.cpt-checkbox>input[type=checkbox] {
    position: absolute;
    top: 100%;
    left: 100%;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none
}

.cpt-checkbox>span {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--CPT-CLR)
}

.cpt-checkbox>span>i {
    display: block;
    padding: 0 var(--CPT-INPTPD);
    font-family: var(--CPT-FF);
    font-style: normal;
    font-weight: 600
}

.cpt-checkbox>span:before {
    content: '';
    display: block;
    width: calc(1em * var(--CPT-LH));
    height: calc(1em * var(--CPT-LH));
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--CPT-INPTBG);
    background-size: var(--CPT-FS);
    border: var(--CPT-BD);
    border-radius: var(--CPT-BDR);
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    flex: none;
    align-self: flex-start;
    transition: var(--CPT-TST)
}

.cpt-checkbox>input[type=checkbox]:focus~span:before {
    border-color: var(--CPT-THM);
    box-shadow: var(--CPT-THM) 0 0 .25em
}

.cpt-checkbox>input[type=checkbox]:checked~span:before {
    border-color: var(--CPT-THM);
    background-color: var(--CPT-THM);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxOCAxOCcgd2lkdGg9JzE4JyBoZWlnaHQ9JzE4Jz48cGF0aCBmaWxsPSd3aGl0ZScgZD0nTTguMywxMi41TDguMywxMi41bC0xLjQsMS40bC0xLjQtMS40TDIuNiw5LjdsMS40LTEuNGwyLjgsMi44bDcuMS03LjFsMS40LDEuNEw4LjMsMTIuNXonLz48L3N2Zz4=)
}

.cpt-checkbox>input[type=checkbox]:disabled~span {
    cursor: not-allowed
}

.cpt-checkbox>input[type=checkbox]:checked:disabled~span:before {
    border-color: var(--CPT-BDC);
    background-color: var(--CPT-INPTPH)
}

.cpt-checkbox>input[type=checkbox]:not(:checked):disabled~span:before {
    background: var(--CPT-FBDBG)
}

.cpt-radio {
    display: inline-block;
    vertical-align: middle;
    background: 0 0;
    -webkit-tap-highlight-color: transparent
}

.cpt-radio>input[type=radio] {
    position: absolute;
    top: 100%;
    left: 100%;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none
}

.cpt-radio>span {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--CPT-CLR)
}

.cpt-radio>span>i {
    display: block;
    padding: 0 var(--CPT-INPTPD);
    font-family: var(--CPT-FF);
    font-style: normal;
    font-weight: 600
}

.cpt-radio>span:before {
    content: '';
    display: block;
    width: calc(1em * var(--CPT-LH));
    height: calc(1em * var(--CPT-LH));
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--CPT-INPTBG);
    background-size: var(--CPT-FS);
    border: var(--CPT-BD);
    border-radius: 100%;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    flex: none;
    align-self: flex-start;
    transition: var(--CPT-TST)
}

.cpt-radio>input[type=radio]:focus~span:before {
    border-color: var(--CPT-THM);
    box-shadow: var(--CPT-THM) 0 0 .25em
}

.cpt-radio>input[type=radio]:checked~span:before {
    border-color: var(--CPT-THM);
    background-color: var(--CPT-THM);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxOCAxOCcgd2lkdGg9JzE4JyBoZWlnaHQ9JzE4Jz48Y2lyY2xlIGZpbGw9J3doaXRlJyBjeD0nOScgY3k9JzknIHI9JzUnLz48L3N2Zz4=)
}

.cpt-radio>input[type=radio]:disabled~span {
    cursor: not-allowed
}

.cpt-radio>input[type=radio]:checked:disabled~span:before {
    border-color: var(--CPT-BDC);
    background-color: var(--CPT-INPTPH)
}

.cpt-radio>input[type=radio]:not(:checked):disabled~span:before {
    background: var(--CPT-FBDBG)
}

.cpt-switcher {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: 0 0
}

.cpt-switcher>span {
    flex: auto
}

.cpt-switcher>label {
    flex: none;
    align-self: flex-start;
    position: relative
}

.cpt-switcher input[type=radio] {
    position: absolute;
    top: 100%;
    left: 100%;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none
}

.cpt-switcher input[type=radio]+span {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1
}

.cpt-switcher input[type=radio]+span:before {
    content: '';
    display: block;
    width: calc(1em * var(--CPT-LH) * 2);
    height: calc(1em * var(--CPT-LH));
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxOCAxOCcgd2lkdGg9JzE4JyBoZWlnaHQ9JzE4Jz48Y2lyY2xlIGZpbGw9J3doaXRlJyBjeD0nOScgY3k9JzknIHI9JzYnLz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    border-radius: calc(1em * var(--CPT-LH));
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    flex: none;
    align-self: flex-start;
    transition: var(--CPT-TST)
}

.cpt-switcher input[type=radio]+span>i {
    font-style: normal;
    font-family: var(--CPT-FF);
    font-weight: 600;
    margin-right: 1em
}

.cpt-switcher>label:first-of-type>input[type=radio]+span:before {
    background-color: var(--CPT-INPTPH)
}

.cpt-switcher>label:last-of-type>input[type=radio]+span:before {
    background-position: right center;
    background-color: var(--CPT-THM)
}

.cpt-switcher input[type=radio]:checked~span {
    pointer-events: none
}

.cpt-switcher input[type=radio]:not(:checked)~span {
    opacity: 0;
    z-index: 2
}

.cpt-multiselect {
    display: flex;
    align-items: center;
    border: var(--CPT-BD);
    border-radius: var(--CPT-BDR);
    cursor: pointer
}

.cpt-multiselect:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 0;
    margin: -.166667em .75em;
    border: .333334em transparent solid;
    border-top-color: var(--CPT-INPTCL);
    opacity: .5;
    pointer-events: none
}

.cpt-multiselect>input {
    flex: auto;
    width: 100%;
    min-width: calc(var(--CPT-UH) + (var(--CPT-FS) * 2));
    padding-right: calc(var(--CPT-INPTPD) + var(--CPT-FS))!important
}

.cpt-multiselect>input[readonly] {
    background: 0 0!important;
    color: var(--CPT-INPTCL)!important;
    cursor: pointer!important
}

.cpt-multiselect>span {
    flex: none;
    padding: 0 var(--CPT-INPTPD)
}

.cpt-multiselect>span[icon] {
    width: 1.5em;
    height: 1.5em;
    line-height: 99;
    overflow: hidden
}

.cpt-multiselect>span[icon]:before {
    content: attr(icon);
    font-size: 1.5em;
    display: block
}

.cpt-multiselect>.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    padding: 0 var(--CPT-INPTPD);
    margin: calc(var(--CPT-LH)/ 2) calc(var(--CPT-BDW) * -1);
    max-height: calc(var(--CPT-UH) * 5 + var(--CPT-INPTPD) + var(--CPT-BDW) * 2);
    width: calc(100% + calc(var(--CPT-BDW) * 2));
    overflow: hidden;
    overflow-y: auto;
    background: var(--CPT-INPTBG);
    border: var(--CPT-BD);
    border-radius: var(--CPT-BDR);
    box-shadow: rgba(0,0,0,.1) 0 .5em .5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.cpt-multiselect:focus-within>.dropdown,.cpt-multiselect>.dropdown:hover {
    display: block
}

.cpt-multiselect>.dropdown>.cpt-checkbox {
    display: block;
    margin: var(--CPT-INPTPD) 0
}

.cpt-range {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: calc(1em * var(--CPT-LH));
    background: 0 0
}

.cpt-range[data-value]:after {
    content: attr(data-value);
    flex: auto;
    text-align: right;
    font-family: var(--CPT-FF);
    font-weight: 700;
    margin-right: var(--CPT-INPTPD)
}

.cpt-range>input[type=range] {
    flex: 100%;
    order: 99;
    display: block;
    height: var(--CPT-FS);
    margin: 0;
    padding: 0;
    border: none;
    background: 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: range;
    appearance: none
}

.cpt-range>input[type=range]::-moz-focus-outer {
    border: none
}

.cpt-range>span {
    flex: none;
    order: -99;
    white-space: nowrap;
    margin-right: 1em
}

.cpt-range>span~input[type=range] {
    flex: 0 1 50%
}

.cpt-range.vertical {
    flex-wrap: wrap;
    min-height: var(--CPT-UH)
}

.cpt-range.vertical:after {
    margin: 0 0 0 var(--CPT-INPTPD)
}

.cpt-range.vertical>input[type=range] {
    flex: auto;
    width: 100%
}

.cpt-range>input[type=range]::-webkit-slider-thumb {
    width: var(--CPT-FS);
    height: calc(1em * var(--CPT-LH));
    margin: calc(var(--CPT-FS)/ -2) 0;
    border: none;
    border-radius: calc(var(--CPT-FS)/ 3);
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: ew-resize;
    transition: var(--CPT-TST);
    background-color: var(--CPT-INPTBG);
    box-shadow: var(--CPT-BDC) 0 0 0 1px inset
}

.cpt-range>input[type=range]::-moz-range-thumb {
    width: var(--CPT-FS);
    height: calc(1em * var(--CPT-LH));
    margin: calc(var(--CPT-FS)/ -2) 0;
    border: none;
    border-radius: calc(var(--CPT-FS)/ 3);
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: ew-resize;
    transition: var(--CPT-TST);
    background-color: var(--CPT-INPTBG);
    box-shadow: var(--CPT-BDC) 0 0 0 1px inset
}

.cpt-range>input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: calc(var(--CPT-FS)/ 2);
    background: var(--CPT-THM);
    border-radius: calc(var(--CPT-FS)/ 2);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.cpt-range>input[type=range]::-moz-range-track {
    width: 100%;
    height: calc(var(--CPT-FS)/ 2);
    background: var(--CPT-THM);
    border-radius: calc(var(--CPT-FS)/ 2);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.cpt-range>input[type=range]:focus::-webkit-slider-thumb {
    background-color: var(--CPT-THM)
}

.cpt-range>input[type=range]:focus::-moz-range-thumb {
    background-color: var(--CPT-THM)
}

.cpt-range>input[type=range][disabled]::-webkit-slider-thumb {
    cursor: not-allowed
}

.cpt-range>input[type=range][disabled]::-moz-range-thumb {
    cursor: not-allowed
}

.cpt-range>input[type=range][disabled]::-webkit-slider-runnable-track {
    background: var(--CPT-INPTPH)
}

.cpt-range>input[type=range][disabled]::-moz-range-track {
    background: var(--CPT-INPTPH)
}