[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
}

.gallery{
    margin-bottom: 20px;
}

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
}
#article-container p img{
    margin: 0;
}
img.inline {
    display: -webkit-box;
    display: -moz-box;
    display: inline!important;
    vertical-align: middle;
    transform: translateY(-4px);
    -webkit-transform: translateY(-4px);
    -khtml-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    -o-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
}

.img-wrap .image-caption {
    display: -webkit-box;
    display: -moz-box;
    display: block;
    margin: 0.75rem auto;
    font-size: .8125rem;
    color: var(--color-meta);
}