[data-theme=dark] .checkbox,[data-theme=dark] .snote,[data-theme=dark] .tip,[data-theme=dark] audio,[data-theme=dark] details,[data-theme=dark] div.btns,[data-theme=dark] span.inline-tag {
    filter: brightness(.7)
}

[data-theme=dark] .snote,[data-theme=dark] .tip {
    color: #4c4948
}

[data-theme=dark] span.inline-tag {
    color: rgba(255,255,255,.8)
}

[data-theme=dark] .hide-toggle {
    border: 1px solid rgba(85,85,85,.2)
}

#article-container .tabs {
    background: #fff
}

[data-theme=dark] #article-container .tabs {
    background: 0 0
}

div.btns {
    margin: 0 -8px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: start;
    align-items: flex-start;
    overflow: visible
}

[data-theme=dark] div.btns a {
    background: 0 0
}

div.btns,div.btns a,div.btns p {
    font-size: .8125rem;
    color: #555
}

div.btns b {
    font-size: .875rem
}

.btns img {
    margin: 0!important
}

div.btns.wide>a {
    padding-left: 32px;
    padding-right: 32px
}

div.btns.fill>a {
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: auto
}

div.btns.around {
    -ms-flex-pack: distribute;
    justify-content: space-around
}

div.btns.center {
    -ms-flex-pack: center;
    justify-content: center
}

div.btns.grid2>a {
    width: calc(100% / 2 - 16px)
}

@media screen and (max-width: 1024px) {
    div.btns.grid2>a {
        width:calc(100% / 2 - 16px)
    }
}

@media screen and (max-width: 768px) {
    div.btns.grid2>a {
        width:calc(100% / 2 - 16px)
    }
}

@media screen and (max-width: 500px) {
    div.btns.grid2>a {
        width:calc(100% / 1 - 16px)
    }
}

div.btns.grid3>a {
    width: calc(100% / 3 - 16px)
}

@media screen and (max-width: 1024px) {
    div.btns.grid3>a {
        width:calc(100% / 3 - 16px)
    }
}

@media screen and (max-width: 768px) {
    div.btns.grid3>a {
        width:calc(100% / 3 - 16px)
    }
}

@media screen and (max-width: 500px) {
    div.btns.grid3>a {
        width:calc(100% / 1 - 16px)
    }
}

div.btns.grid4>a {
    width: calc(100% / 4 - 16px)
}

@media screen and (max-width: 1024px) {
    div.btns.grid4>a {
        width:calc(100% / 3 - 16px)
    }
}

@media screen and (max-width: 768px) {
    div.btns.grid4>a {
        width:calc(100% / 3 - 16px)
    }
}

@media screen and (max-width: 500px) {
    div.btns.grid4>a {
        width:calc(100% / 2 - 16px)
    }
}

div.btns.grid5>a {
    width: calc(100% / 5 - 16px)
}

@media screen and (max-width: 1024px) {
    div.btns.grid5>a {
        width:calc(100% / 4 - 16px)
    }
}

@media screen and (max-width: 768px) {
    div.btns.grid5>a {
        width:calc(100% / 3 - 16px)
    }
}

@media screen and (max-width: 500px) {
    div.btns.grid5>a {
        width:calc(100% / 2 - 16px)
    }
}

div.btns a {
    transition: all .28s ease;
    -moz-transition: all .28s ease;
    -webkit-transition: all .28s ease;
    -o-transition: all .28s ease;
    margin: 8px;
    margin-top: calc(1.25 * 16px + 32px);
    min-width: 120px;
    font-weight: 700;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 8px;
    text-align: center;
    background: #f6f6f6;
    border-radius: 4px
}

div.btns a>i:first-child,div.btns a>img:first-child {
    transition: all .28s ease;
    -moz-transition: all .28s ease;
    -webkit-transition: all .28s ease;
    -o-transition: all .28s ease;
    height: 64px;
    width: 64px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
    margin: 16px 8px 4px 8px;
    margin-top: calc(-1.25 * 16px - 32px);
    border: 2px solid #fff;
    background: #fff;
    line-height: 60px;
    font-size: 28px
}

div.btns a>i:first-child.auto,div.btns a>img:first-child.auto {
    width: auto
}

div.btns a>i:first-child {
    color: #fff;
    background: #2196f3
}

div.btns a b,div.btns a p {
    margin: .25em;
    font-weight: 400;
    line-height: 1.25;
    word-wrap: break-word
}

div.btns a b {
    font-weight: 700;
    line-height: 1.3
}

div.btns a img {
    margin: .4em auto
}

div.btns a:not([href]) {
    cursor: default;
    color: inherit
}

div.btns a[href]:hover {
    background: rgba(255,87,34,.15)
}

div.btns a[href]:hover,div.btns a[href]:hover b {
    color: #ff5722
}

div.btns a[href]:hover>i:first-child,div.btns a[href]:hover>img:first-child {
    transform: scale(1.1) translateY(-8px);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.1)
}

div.btns a[href]:hover>i:first-child {
    background: #ff5722
}

div.btns.circle a>i:first-child,div.btns.circle a>img:first-child {
    border-radius: 32px
}

div.btns.rounded a>i:first-child,div.btns.rounded a>img:first-child {
    border-radius: 16px
}

.checkbox {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.checkbox input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    height: 16px;
    width: 16px;
    transition: all .15s ease-out 0s;
    cursor: pointer;
    display: inline-block;
    outline: 0;
    border-radius: 2px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 8px
}

.checkbox input[type=checkbox]:after,.checkbox input[type=checkbox]:before {
    position: absolute;
    content: "";
    background: #fff
}

.checkbox input[type=checkbox]:before {
    left: 1px;
    top: 5px;
    width: 0;
    height: 2px;
    transition: all .2s ease-in;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg)
}

.checkbox input[type=checkbox]:after {
    right: 7px;
    bottom: 3px;
    width: 2px;
    height: 0;
    transition: all .2s ease-out;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transition-delay: .25s
}

.checkbox input[type=checkbox]:checked:before {
    left: 0;
    top: 7px;
    width: 6px;
    height: 2px
}

.checkbox input[type=checkbox]:checked:after {
    right: 3px;
    bottom: 1px;
    width: 2px;
    height: 10px
}

.checkbox.minus input[type=checkbox]:before {
    transform: rotate(0);
    left: 1px;
    top: 5px;
    width: 0;
    height: 2px
}

.checkbox.minus input[type=checkbox]:after {
    transform: rotate(0);
    left: 1px;
    top: 5px;
    width: 0;
    height: 2px
}

.checkbox.minus input[type=checkbox]:checked:before {
    left: 1px;
    top: 5px;
    width: 10px;
    height: 2px
}

.checkbox.minus input[type=checkbox]:checked:after {
    left: 1px;
    top: 5px;
    width: 10px;
    height: 2px
}

.checkbox.plus input[type=checkbox]:before {
    transform: rotate(0);
    left: 1px;
    top: 5px;
    width: 0;
    height: 2px
}

.checkbox.plus input[type=checkbox]:after {
    transform: rotate(0);
    left: 5px;
    top: 1px;
    width: 2px;
    height: 0
}

.checkbox.plus input[type=checkbox]:checked:before {
    left: 1px;
    top: 5px;
    width: 10px;
    height: 2px
}

.checkbox.plus input[type=checkbox]:checked:after {
    left: 5px;
    top: 1px;
    width: 2px;
    height: 10px
}

.checkbox.times input[type=checkbox]:before {
    transform: rotate(45deg);
    left: 3px;
    top: 1px;
    width: 0;
    height: 2px
}

.checkbox.times input[type=checkbox]:after {
    transform: rotate(135deg);
    right: 3px;
    top: 1px;
    width: 0;
    height: 2px
}

.checkbox.times input[type=checkbox]:checked:before {
    left: 1px;
    top: 5px;
    width: 10px;
    height: 2px
}

.checkbox.times input[type=checkbox]:checked:after {
    right: 1px;
    top: 5px;
    width: 10px;
    height: 2px
}

.checkbox input[type=radio] {
    border-radius: 50%
}

.checkbox input[type=radio]:before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 2px;
    transform: scale(0);
    transition: all .25s ease-out
}

.checkbox input[type=radio]:checked:before {
    transform: scale(1)
}

.checkbox input {
    border: 2px solid #2196f3
}

.checkbox input[type=checkbox]:checked {
    background: #2196f3
}

.checkbox input[type=radio]:checked:before {
    background: #2196f3
}

.checkbox.red input {
    border-color: #fe5f58
}

.checkbox.red input[type=checkbox]:checked {
    background: #fe5f58
}

.checkbox.red input[type=radio]:checked:before {
    background: #fe5f58
}

.checkbox.green input {
    border-color: #3dc550
}

.checkbox.green input[type=checkbox]:checked {
    background: #3dc550
}

.checkbox.green input[type=radio]:checked:before {
    background: #3dc550
}

.checkbox.yellow input {
    border-color: #ffbd2b
}

.checkbox.yellow input[type=checkbox]:checked {
    background: #ffbd2b
}

.checkbox.yellow input[type=radio]:checked:before {
    background: #ffbd2b
}

.checkbox.cyan input {
    border-color: #1bcdfc
}

.checkbox.cyan input[type=checkbox]:checked {
    background: #1bcdfc
}

.checkbox.cyan input[type=radio]:checked:before {
    background: #1bcdfc
}

.checkbox.blue input {
    border-color: #2196f3
}

.checkbox.blue input[type=checkbox]:checked {
    background: #2196f3
}

.checkbox.blue input[type=radio]:checked:before {
    background: #2196f3
}

.checkbox p {
    display: inline-block;
    margin-top: 2px!important;
    margin-bottom: 0!important
}

div.tabs details {
    margin-top: .5rem;
    margin-bottom: .5rem
}

details {
    display: block;
    padding: 16px;
    margin: .5rem 0;
    border-radius: 4px;
    font-size: .7375rem;
    transition: all .28s ease;
    -moz-transition: all .28s ease;
    -webkit-transition: all .28s ease;
    -o-transition: all .28s ease;
    border: 1px solid #f6f6f6;
    line-height: 1.3
}

details summary {
    cursor: pointer;
    padding: 16px;
    margin: -16px;
    border-radius: 4px;
    color: rgba(85,85,85,.7);
    font-size: .775rem;
    font-weight: 700;
    position: relative
}

details summary>h1,details summary>h2,details summary>h3,details summary>h4,details summary>h5,details summary>h6,details summary>p {
    display: inline;
    border-bottom: none!important
}

details summary:hover {
    color: #555
}

details summary:hover:after {
    position: absolute;
    content: "+";
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    right: 16px
}

details>summary {
    background: #f6f6f6
}

details[blue] {
    border-color: #e8f4fd
}

details[blue]>summary {
    background: #e8f4fd
}

details[cyan] {
    border-color: #e8fafe
}

details[cyan]>summary {
    background: #e8fafe
}

details[green] {
    border-color: #ebf9ed
}

details[green]>summary {
    background: #ebf9ed
}

details[yellow] {
    border-color: #fff8e9
}

details[yellow]>summary {
    background: #fff8e9
}

details[red] {
    border-color: #feefee
}

details[red]>summary {
    background: #feefee
}

details[open] {
    border-color: rgba(85,85,85,.2)
}

details[open]>summary {
    border-bottom: 1px solid rgba(85,85,85,.2);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

details[open][blue] {
    border-color: rgba(33,150,243,.3)
}

details[open][blue]>summary {
    border-bottom-color: rgba(33,150,243,.3)
}

details[open][cyan] {
    border-color: rgba(27,205,252,.3)
}

details[open][cyan]>summary {
    border-bottom-color: rgba(27,205,252,.3)
}

details[open][green] {
    border-color: rgba(61,197,80,.3)
}

details[open][green]>summary {
    border-bottom-color: rgba(61,197,80,.3)
}

details[open][yellow] {
    border-color: rgba(255,189,43,.3)
}

details[open][yellow]>summary {
    border-bottom-color: rgba(255,189,43,.3)
}

details[open][red] {
    border-color: rgba(254,95,88,.3)
}

details[open][red]>summary {
    border-bottom-color: rgba(254,95,88,.3)
}

details[open]>summary {
    color: #555;
    margin-bottom: 0
}

details[open]>summary:hover:after {
    content: "-"
}

details[open]>div.content {
    padding: 16px;
    margin: -16px;
    margin-top: 0
}

details[open]>div.content>.fancybox:first-child,details[open]>div.content>.highlight:first-child,details[open]>div.content>.snote:first-child,details[open]>div.content>.tabs:first-child,details[open]>div.content>ol:first-child,details[open]>div.content>p:first-child,details[open]>div.content>ul:first-child {
    margin-top: 0
}

details[open]>div.content>.fancybox:last-child,details[open]>div.content>.highlight:last-child,details[open]>div.content>.snote:last-child,details[open]>div.content>.tabs:last-child,details[open]>div.content>ol:last-child,details[open]>div.content>p:last-child,details[open]>div.content>ul:last-child {
    margin-bottom: 0
}

div.gallery {
    margin: .5rem 0;
    overflow: hidden
}

div.gallery>.fancybox,div.gallery>p>.fancybox {
    padding: 0;
    position: relative
}

div.gallery>.fancybox .image-caption,div.gallery>p>.fancybox .image-caption {
    opacity: 0;
    transform: translateY(100%);
    transition: all .3s ease;
    pointer-events: none;
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
    background: rgba(0,0,0,.3);
    color: #fff
}

div.gallery>.fancybox .image-caption:empty,div.gallery>p>.fancybox .image-caption:empty {
    display: none
}

div.gallery>.fancybox:hover .image-caption,div.gallery>p>.fancybox:hover .image-caption {
    opacity: 1;
    transform: translateY(0)
}

div.gallery,div.gallery>p {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding: 0!important;
    -ms-flex-align: stretch;
    align-items: stretch
}

div.gallery[col]>p {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: start;
    justify-content: flex-start
}

div.gallery[col="2"]>p>.fancybox {
    width: calc(50% - 2 * 1px)
}

div.gallery[col="3"]>p>.fancybox {
    width: calc(33.33% - 2 * 1px)
}

div.gallery[col="4"]>p>.fancybox {
    width: calc(25% - 2 * 1px)
}

div.gallery[col="5"]>p>.fancybox {
    width: calc(20% - 2 * 1px)
}

div.gallery[col="6"]>p>.fancybox {
    width: calc(16.66% - 2 * 1px)
}

div.gallery[col="7"]>p>.fancybox {
    width: calc(14.2857% - 2 * 1px)
}

div.gallery[col="8"]>p>.fancybox {
    width: calc(12.5% - 2 * 1px)
}

div.gallery>p {
    margin: 0
}

div.gallery.left,div.gallery.left>p {
    -ms-flex-pack: start;
    justify-content: flex-start
}

div.gallery.center,div.gallery.center>p {
    -ms-flex-pack: center;
    justify-content: center
}

div.gallery.right,div.gallery.right>p {
    -ms-flex-pack: end;
    justify-content: flex-end
}

div.gallery.stretch,div.gallery.stretch>p {
    -ms-flex-align: stretch;
    align-items: stretch
}

div.gallery.stretch img,div.gallery.stretch>p img {
    transform: scale(1.5)
}

.fancybox-container .fancybox-stage {
    cursor: zoom-out
}

.fancybox {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding: 0!important;
    overflow: hidden;
    border-radius: 2px
}

@media screen and (max-width: 500px) {
    .fancybox {
        border-radius:1px
    }
}

.fancybox a {
    line-height: 0;
    margin: 0;
    -ms-flex-align: stretch;
    align-items: stretch;
    cursor: zoom-in
}

.fancybox .gallery {
    overflow: hidden
}

.fancybox .image-caption {
    font-size: .7125rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    color: rgba(85,85,85,.65)
}

#article-container .fancybox img {
    margin: 0
}

.snote {
    position: relative;
    margin: 0 0 1rem;
    padding: 15px;
    border: initial;
    border-left: 5px solid #eee;
    background-color: #f9f9f9;
    border-radius: 3px
}

.snote h2,.snote h3,.snote h4,.snote h5,.snote h6 {
    margin-top: 3px;
    margin-bottom: 0;
    padding-top: 0!important;
    border-bottom: initial
}

.snote blockquote:first-child,.snote img:first-child,.snote ol:first-child,.snote p:first-child,.snote pre:first-child,.snote table:first-child,.snote ul:first-child {
    margin-top: 0!important
}

.snote blockquote:last-child,.snote img:last-child,.snote ol:last-child,.snote p:last-child,.snote pre:last-child,.snote table:last-child,.snote ul:last-child {
    margin-bottom: 0!important
}

.snote:not(.no-icon) {
    padding-left: 45px
}

.snote:not(.no-icon)::before {
    position: absolute;
    top: 13px;
    left: 15px;
    font-size: larger;
    font-weight: 600;
    font-family: "Font Awesome 5 Free"
}

.snote.default {
    background-color: #f7f7f7;
    border-left-color: #777
}

.snote.default h2,.snote.default h3,.snote.default h4,.snote.default h5,.snote.default h6 {
    color: #777
}

.snote.default:not(.no-icon)::before {
    content: "\f0a9";
    color: #777
}

.snote.primary {
    background-color: #f5f0fa;
    border-left-color: #6f42c1
}

.snote.primary h2,.snote.primary h3,.snote.primary h4,.snote.primary h5,.snote.primary h6 {
    color: #6f42c1
}

.snote.primary:not(.no-icon)::before {
    content: "\f055";
    color: #6f42c1
}

.snote.info {
    background-color: #eef7fa;
    border-left-color: #428bca
}

.snote.info h2,.snote.info h3,.snote.info h4,.snote.info h5,.snote.info h6 {
    color: #428bca
}

.snote.info:not(.no-icon)::before {
    content: "\f05a";
    color: #428bca
}

.snote.success {
    background-color: #eff8f0;
    border-left-color: #5cb85c
}

.snote.success h2,.snote.success h3,.snote.success h4,.snote.success h5,.snote.success h6 {
    color: #5cb85c
}

.snote.success:not(.no-icon)::before {
    content: "\f058";
    color: #5cb85c
}

.snote.warning {
    background-color: #fdf8ea;
    border-left-color: #f0ad4e
}

.snote.warning h2,.snote.warning h3,.snote.warning h4,.snote.warning h5,.snote.warning h6 {
    color: #f0ad4e
}

.snote.warning:not(.no-icon)::before {
    content: "\f06a";
    color: #f0ad4e
}

.snote.danger {
    background-color: #fcf1f2;
    border-left-color: #d9534f
}

.snote.danger h2,.snote.danger h3,.snote.danger h4,.snote.danger h5,.snote.danger h6 {
    color: #d9534f
}

.snote.danger:not(.no-icon)::before {
    content: "\f056";
    color: #d9534f
}

div.snote {
    position: relative;
    margin-top: .5rem;
    margin-bottom: .5rem;
    padding: .6rem 16px .5rem 16px;
    padding-left: calc(16px + 16px);
    border-radius: 4px;
    background: #f6f6f6;
    border-left: 4px solid #767676
}

div.snote h2,div.snote h3,div.snote h4,div.snote h5,div.snote h6 {
    margin-top: 3px;
    margin-bottom: 0;
    padding-top: 0!important;
    border-bottom: initial
}

div.snote blockquote,div.snote img,div.snote ol,div.snote p,div.snote ul {
    font-size: 14px;
    margin-top: .5rem;
    margin-bottom: .5rem
}

div.snote::before {
    position: absolute;
    top: calc(50% - 24px * .5);
    left: 4px;
    width: 24px;
    height: 24px;
    text-align: center;
    font-weight: 600;
    line-height: 24px;
    vertical-align: middle;
    font-family: "Font Awesome 5 Free"
}

div.snote::before {
    color: #767676;
    content: "\f054"
}

div.snote::before {
    content: "\f054"
}

div.snote.quote {
    background: #e8f4fd;
    border-color: #2196f3
}

div.snote.quote::before {
    color: #2196f3;
    content: "\f10d"
}

div.snote.info {
    background: #e8f4fd;
    border-color: #2196f3
}

div.snote.info::before {
    color: #2196f3;
    content: "\f129"
}

div.snote.done,div.snote.success {
    background: #ebf9ed;
    border-color: #3dc550
}

div.snote.done::before,div.snote.success::before {
    color: #3dc550;
    content: "\f00c"
}

div.snote.warning {
    background: #fff8e9;
    border-color: #ffbd2b
}

div.snote.warning::before {
    color: #ffbd2b;
    content: "\f12a"
}

div.snote.danger,div.snote.error {
    background: #feefee;
    border-color: #fe5f58
}

div.snote.danger::before,div.snote.error::before {
    color: #fe5f58;
    content: "\f00d"
}

div.snote.radiation::before {
    content: "\f7b9"
}

div.snote.bug::before {
    content: "\f188"
}

div.snote.idea::before {
    content: "\f0eb"
}

div.snote.link::before {
    content: "\f0c1"
}

div.snote.paperclip::before {
    content: "\f0c6"
}

div.snote.todo::before {
    content: "\f0ae"
}

div.snote.message::before {
    content: "\f4ad"
}

div.snote.guide::before {
    content: "\f277"
}

div.snote.download::before {
    content: "\f019"
}

div.snote.up::before {
    content: "\f102"
}

div.snote.undo::before {
    content: "\f2ea"
}

div.snote.play::before {
    content: "\f144"
}

div.snote.clear {
    background: 0 0;
    border-color: none
}

div.snote.light {
    background: #f6f6f6;
    border-color: #aaa
}

div.snote.light::before {
    color: #aaa
}

div.snote.gray {
    background: #f6f6f6;
    border-color: #767676
}

div.snote.gray::before {
    color: #767676
}

div.snote.red {
    background: #feefee;
    border-color: #fe5f58
}

div.snote.red::before {
    color: #fe5f58
}

div.snote.yellow {
    background: #fff8e9;
    border-color: #ffbd2b
}

div.snote.yellow::before {
    color: #ffbd2b
}

div.snote.green {
    background: #ebf9ed;
    border-color: #3dc550
}

div.snote.green::before {
    color: #3dc550
}

div.snote.cyan {
    background: #e8fafe;
    border-color: #1bcdfc
}

div.snote.cyan::before {
    color: #1bcdfc
}

div.snote.blue {
    background: #e8f4fd;
    border-color: #2196f3
}

div.snote.blue::before {
    color: #2196f3
}

.tip {
    position: relative;
    color: #fff;
    background: #20a0ff;
    background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
    background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
    background: linear-gradient(90deg,#20a0ff,#20b8ff);
    padding: 6px 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
    box-shadow: 0 3px 5px rgba(32,160,255,.5);
    margin-bottom: 20px
}

.tip p {
    margin: 5px 0!important
}

.tip.custom {
    display: block;
    width: 100%
}

.tip:before {
    background: #20a0ff;
    background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
    background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
    background: linear-gradient(0deg,#0092ff,#20b8ff);
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    position: absolute;
    width: 24px;
    height: 24px;
    line-height: 24.5px;
    left: -12px;
    top: -12px;
    -webkit-box-shadow: 0 0 0 2.5px #fff;
    box-shadow: 0 0 0 2.5px #fff;
    font-weight: 600;
    text-align: center
}

.tip.info {
    font-family: "Font Awesome 5 Free"
}

.tip.info::before {
    content: "\f129"
}

.btn,.getit a {
    position: relative
}

.well .tip:before {
    -webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
    box-shadow: 0 0 0 2.5px #f7f8f9
}

.tip ol {
    margin: 0
}

.tip.success {
    background: #61be33;
    background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
    font-family: "Font Awesome 5 Free";
    background: -webkit-linear-gradient(left,#61be33,#8fce44);
    background: linear-gradient(90deg,#61be33,#8fce44);
    text-shadow: 0 -1px #61be33;
    -webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5);
    box-shadow: 0 3px 5px rgba(104,195,59,.5)
}

.tip.success:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
    background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
    background: linear-gradient(0deg,#52bb1d,#95d34b);
    content: "\f00c";
    text-shadow: 0 -1px #61be33
}

.tip.warning {
    background: #ff953f;
    background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
    font-family: "Font Awesome 5 Free";
    background: -webkit-linear-gradient(left,#ff953f,#ffb449);
    background: linear-gradient(90deg,#ff953f,#ffb449);
    text-shadow: 0 -1px #ff953f;
    -webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
    box-shadow: 0 3px 5px rgba(255,154,73,.5)
}

.tip.warning:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
    background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
    background: linear-gradient(0deg,#ff8f35,#ffc149);
    content: "\f12a";
    text-shadow: 0 -1px #ff953f
}

.tip.error {
    background: #ff4949;
    background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
    font-family: "Font Awesome 5 Free";
    background: -webkit-linear-gradient(left,#ff4949,#ff7849);
    background: linear-gradient(90deg,#ff4949,#ff7849);
    text-shadow: 0 -1px #ff4949;
    -webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
    box-shadow: 0 3px 5px rgba(255,73,73,.5)
}

.tip.error:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
    background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
    background: linear-gradient(0deg,#ff3838,#ff7849);
    content: "\f00d";
    text-shadow: 0 -1px #ff4949
}

.tip.wtgo {
    background: -webkit-gradient(linear,left bottom,left top,from(#3d8b48),to(#477837));
    background: -webkit-linear-gradient(bottom,#3c3,#459431);
    background: linear-gradient(530deg,#78ca33,#25822c);
    text-shadow: 0 -1px #4cf706
}

.tip.wtgo::before {
    background: -webkit-gradient(linear,left bottom,left top,from(#3c0),to(#3c0));
    background: -webkit-linear-gradient(bottom,#3c3,#459431);
    background: linear-gradient(776deg,#78ca33,#25822c);
    text-shadow: 0 -1px #4cf706
}

.tip.ban {
    background: #ff4949;
    background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff3443));
    background: -webkit-linear-gradient(left,#ff4949,#ff1022);
    background: linear-gradient(90deg,#ff4949,#f03b49);
    text-shadow: 0 -1px #ff4949;
    -webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
    box-shadow: 0 3px 5px rgba(255,73,73,.5)
}

.tip.ban:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ce4617));
    background: -webkit-linear-gradient(bottom,#ff3838,#d23e49);
    background: linear-gradient(0deg,#ff3838,#ff1022);
    text-shadow: 0 -1px #ff4949
}

.tip.home {
    background: #15e5ff;
    background: -webkit-gradient(linear,left top,right top,from(#5bc6d4) to(#0ec0ef));
    background: -webkit-linear-gradient(left,#0ec0ef,#80e0f9);
    background: linear-gradient(90deg,#0ec0ef,#80e0f7);
    text-shadow: 0 -1px #0ec0ef;
    -webkit-box-shadow: 0 3px 5px #01caff;
    box-shadow: 0 3px 5px #01caff
}

.tip.home:before {
    background: -webkit-gradient(linear,left bottom,left top,form(#0ec0ee) to(#0ee0cc));
    background: -webkit-linear-gradient(bottom,#0ec0ee,#0ec2ee);
    background: linear-gradient(0deg,#0ec0ee,#0ec0ea);
    text-shadow: 0 -1px #0ec0ea
}

.tip.important {
    background: #f3a700;
    background: -webkit-gradient(linear,left top,right top,from(#ffbd2b),to(#ffbd2b));
    background: -webkit-linear-gradient(left,#ffbd2b,#ffd26f);
    background: linear-gradient(290deg,#ef6e6e,#ffb000);
    text-shadow: 0 -1px #a97a12;
    -webkit-box-shadow: 0 3px 5px #ffb000;
    box-shadow: 0 3px 5px #ffb000
}

.tip.important:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ffbd2b));
    background: -webkit-linear-gradient(bottom,#ff3838,#ffbd2b);
    background: linear-gradient(270deg,#ffbd2b,#f5626d);
    text-shadow: 0 -1px #ffbd2b
}

.tip.ref {
    background: #00a9ff;
    background: -webkit-gradient(linear,left top,right top,from(#51a7bd33),to(#c7eef9));
    background: -webkit-linear-gradient(left,#53cff1,#2e9fbd);
    background: linear-gradient(230deg,#47c0e0,#2dc342);
    text-shadow: 0 -1px #1bcdfc;
    -webkit-box-shadow: 0 3px 5px #1bcdfc;
    box-shadow: 0 3px 5px #20b1ad
}

.tip.ref:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#00c3f7),to(#88d3e6));
    background: -webkit-linear-gradient(bottom,#83e5ff,#0aa8d2);
    background: linear-gradient(270deg,#40c0e2,#3dc550);
    text-shadow: 0 -1px #17cfff
}

.tip.ffa {
    background: #1502ff;
    background: -webkit-gradient(linear,left top,right top,from(#51a7bd33),to(#8379ff));
    background: -webkit-linear-gradient(left,#5246e2,#5246e2);
    background: linear-gradient(230deg,#40c0e2,#5247e2);
    text-shadow: 0 -1px #8278fd;
    -webkit-box-shadow: 0 3px 5px #4037a7;
    box-shadow: 1 3px 5px #5e52ec
}

.tip.ffa:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#3020f3),to(#b1abf5));
    background: -webkit-linear-gradient(bottom,#5246e2,#5246e2);
    background: linear-gradient(560deg,#40c0e2,#5246e2);
    text-shadow: 0 -1px #098cf5
}

.tip.key {
    background: #25c33b;
    background: -webkit-gradient(linear,left top,right top,from(#51a7bd33),to(#8379ff));
    background: -webkit-linear-gradient(left,#648798,#90a4ae);
    background: linear-gradient(230deg,#90a4ae,#b7a7a7);
    text-shadow: 0 -1px #c1c0d4;
    -webkit-box-shadow: 0 3px 5px #d3d2de;
    box-shadow: 1 3px 5px #d5d4de
}

.tip.key:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#dddce8),to(#b1abf5));
    background: -webkit-linear-gradient(bottom,#5246e2,#5246e2);
    background: linear-gradient(560deg,#bccdd2,#cfced4);
    text-shadow: 0 -1px #a9b2b9
}

.tip.socd {
    background: #25c33b;
    background: -webkit-gradient(linear,left top,right top,from(#51a7bd33),to(#8379ff));
    background: -webkit-linear-gradient(left,#648798,#90a4ae);
    background: linear-gradient(230deg,#ffaa0d,#deb455);
    text-shadow: 0 -1px #c1c0d4;
    -webkit-box-shadow: 0 3px 5px #d3d2de;
    box-shadow: 1 3px 5px #d5d4de
}

.tip.socd:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#dddce8),to(#b1abf5));
    background: -webkit-linear-gradient(bottom,#5246e2,#5246e2);
    background: linear-gradient(560deg,#f9ae07,#ffb615);
    text-shadow: 0 -1px #ffb81b
}

.tip.qq {
    background: #25c33b;
    background: -webkit-gradient(linear,left top,right top,from(#51a7bd33),to(#8379ff));
    background: -webkit-linear-gradient(left,#648798,#90a4ae);
    background: linear-gradient(230deg,#20b8ff,#20b8ff);
    text-shadow: 0 -1px #c1c0d4;
    -webkit-box-shadow: 0 3px 5px #d3d2de;
    box-shadow: 1 3px 5px #d5d4de
}

.tip.qq:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#dddce8),to(#b1abf5));
    background: -webkit-linear-gradient(bottom,#5246e2,#5246e2);
    background: linear-gradient(560deg,#20b8ff,#20b8ff);
    text-shadow: 0 -1px #20b8ff
}