/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
  width: 100%;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Light"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf") format("truetype");
  font-weight: 100;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Semilight"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf") format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Bold"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Semibold"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf") format("truetype");
  font-weight: 700;
}
html {
  font-family: SegoeUI, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
#nav .active_dot {
  position: relative;
}
#nav .active_dot:after {
  position: absolute;
  height: 5px;
  background-color: #fff;
  border: 2px solid #444;
  content: "";
  display: block;
  width: 5px;
  border-radius: 50%;
  margin: 0 auto;
  top: -0.8em;
  left: 0;
  right: 0;
}
@media only screen and (max-width: 600px) {
  #nav .active_dot {
    position: relative;
  }
  #nav .active_dot:after {
    position: absolute;
    height: 5px;
    background-color: #fff;
    border: 2px solid #444;
    content: "";
    display: block;
    width: 5px;
    border-radius: 50%;
    margin: 0 auto;
    top: -0.8em;
    left: 0.1em;
    right: 0;
  }
}
#nav {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 600px) {
  #nav {
    justify-content: space-around;
    width: 100%;
    align-content: center;
  }
}
#nav .nav-item {
  padding: 0 1em;
}
#nav .nav-item a {
  text-decoration: none;
}
#nav .nav-item a:visited,
#nav .nav-item a:active,
#nav .nav-item a:focus,
#nav .nav-item a:link {
  color: #222;
}
#nav .nav-item .nav-icon,
#nav .nav-item .toc-button {
  text-align: center;
  vertical-align: text-top;
  width: 1.8em;
  height: 1.8em;
  padding-bottom: 0.4em;
}
#nav .nav-item .nav-icon img,
#nav .nav-item .toc-button img {
  width: 2em;
  height: 2em;
  object-fit: cover;
}
#nav .nav-item .nav-icon:hover,
#nav .nav-item .toc-button:hover {
  position: relative;
}
#nav .nav-item .nav-icon:hover:after,
#nav .nav-item .toc-button:hover:after {
  position: absolute;
  height: 5px;
  background-color: #fff;
  border: 2px solid #444;
  content: "";
  display: block;
  width: 5px;
  border-radius: 50%;
  margin: 0 auto;
  top: -0.8em;
  left: 0;
  right: 0;
}
@media only screen and (max-width: 600px) {
  #nav .nav-item .nav-icon:hover,
  #nav .nav-item .toc-button:hover {
    position: relative;
  }
  #nav .nav-item .nav-icon:hover:after,
  #nav .nav-item .toc-button:hover:after {
    position: absolute;
    height: 5px;
    background-color: #fff;
    border: 2px solid #444;
    content: "";
    display: block;
    width: 5px;
    border-radius: 50%;
    margin: 0 auto;
    top: -0.8em;
    left: 0.1em;
    right: 0;
  }
}
#nav .nav-item .nav-name:hover {
  position: relative;
}
#nav .nav-item .nav-name:hover:after {
  width: 0%;
}
#nav .nav-item .nav-name:hover:hover:after {
  position: absolute;
  height: 2px;
  background-color: #444;
  content: "";
  display: block;
  width: 30%;
  margin: 0 auto;
  bottom: -0.5em;
  left: 0;
  right: 0;
  transition: width 1s;
}
@media only screen and (max-width: 600px) {
  #nav .nav-item .nav-name:hover {
    position: relative;
  }
  #nav .nav-item .nav-name:hover:after {
    width: 0%;
  }
  #nav .nav-item .nav-name:hover:hover:after {
    position: absolute;
    height: 2px;
    background-color: #444;
    content: "";
    display: block;
    width: 0%;
    margin: 0 auto;
    bottom: 0px;
    left: 0;
    right: 0;
    transition: width 1s;
  }
}
#nav .nav-item .nav-name {
  font-size: 1.1em;
}
@media only screen and (max-width: 600px) {
  #nav .nav-item .nav-name:hover {
    position: relative;
  }
  #nav .nav-item .nav-name:hover:after {
    width: 0%;
  }
  #nav .nav-item .nav-name:hover:hover:after {
    position: absolute;
    height: 2px;
    background-color: #444;
    content: "";
    display: block;
    width: 0%;
    margin: 0 auto;
    bottom: 0px;
    left: 0;
    right: 0;
    transition: width 1s;
  }
}
#nav .toc {
  position: fixed;
  bottom: 5em;
  left: 0;
}
#nav .nav-more-menu {
  background-color: transparent;
  position: absolute;
  right: 1em;
  text-align: left;
  padding-top: 4em;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  #nav .nav-more-menu {
    top: 2em;
  }
}
@media only screen and (min-width: 801px) and (max-width: 1024px) {
  #nav .nav-more-menu {
    top: 2em;
  }
}
@media only screen and (min-width: 1024px) {
  #nav .nav-more-menu {
    top: 2em;
  }
}
@media only screen and (max-width: 600px) {
  #nav .nav-more-menu {
    bottom: 4em;
    right: 0.5em;
    padding-top: 0;
    box-shadow: -5px 5px 10px 1px #ddd;
    border-radius: 10px;
  }
}
#nav .nav-more-menu .nav-more-item {
  width: 100%;
  padding: 1em 2em;
  background-color: #fff;
}
#nav .nav-more-menu .nav-more-item .nav-name:hover {
  position: relative;
}
#nav .nav-more-menu .nav-more-item .nav-name:hover:after {
  position: absolute;
  height: 5px;
  background-color: #fff;
  border: 2px solid #444;
  content: "";
  display: block;
  width: 5px;
  border-radius: 50%;
  margin: auto 0;
  top: 0;
  bottom: 0;
  left: -1.2em;
}
.nav-more-menu {
  display: none;
}
#nav-item-more {
  position: relative;
  display: inline-block;
}
#nav-item-more:hover .nav-more-menu {
  display: block;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Light"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf") format("truetype");
  font-weight: 100;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Semilight"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf") format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Bold"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Semibold"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf") format("truetype");
  font-weight: 700;
}
#header-nav .active_page {
  position: relative;
}
#header-nav .active_page:after {
  position: absolute;
  height: 2px;
  background-color: #444;
  content: "";
  display: block;
  width: 30%;
  margin: 0 auto;
  bottom: -0.5em;
  left: 0;
  right: 0;
}
#header-nav {
  display: flex;
  margin-right: 2em;
}
@media only screen and (max-width: 600px) {
  #header-nav {
    display: none;
  }
}
@media only screen and (min-width: 801px) and (max-width: 1024px) {
  #header-nav .nav-item {
    display: none;
  }
  #header-nav #nav-item-more,
  #header-nav #nav-item-search,
  #header-nav #nav-item-archive {
    display: flex;
  }
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  #header-nav .nav-item {
    display: none;
  }
  #header-nav #nav-item-more,
  #header-nav #nav-item-search,
  #header-nav #nav-item-archive {
    display: flex;
  }
}
@media only screen and (min-width: 1024px) {
  #header-nav #nav-item-toc {
    display: none;
  }
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 7em;
  z-index: 101;
  box-shadow: 0px 1px 10px 1px #ddd;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #222;
/* header title */
}
.header a:visited,
.header a:active,
.header a:focus,
.header a:link {
  color: #222;
}
.header a {
  text-decoration: none;
}
@media only screen and (max-width: 600px) {
  .header {
    justify-content: center;
  }
}
.header .header-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 3em;
}
@media only screen and (max-width: 600px) {
  .header .header-title {
    justify-content: center;
    margin-left: 0;
  }
}
.header .header-title .header-text-no-image {
  padding-left: 3rem;
  text-align: left;
}
@media only screen and (max-width: 600px) {
  .header .header-title .header-text-no-image {
    padding-left: 0;
    text-align: center;
  }
}
.header .header-title .header-text-no-image h1 {
  display: inline;
  font-size: 6vh;
  margin: 0;
}
.header .header-title .header-text-no-image subtitle {
  display: inline;
  font-weight: 100;
  font-size: 2vh;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .header .header-title .header-text-no-image subtitle {
    font-size: 3vh;
  }
}
.header .header-title .header-text-no-image a:hover {
  text-decoration: underline;
}
.header .header-title .header-logo {
  text-align: center;
  margin-right: 1em;
  margin-top: 3em;
}
.header .header-title .header-logo img {
  background-color: #fff;
  width: 7em;
  border-radius: 50%;
  box-shadow: 1px 1px 10px 3px #e5e5e5;
}
.header .header-title .header-text {
  text-align: left;
  margin-top: 2.5em;
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai", serif;
}
@media only screen and (max-width: 600px) {
  .header .header-title .header-text {
    display: none;
  }
}
.header .header-title .header-text h1 {
  display: inline;
  font-size: 2em;
  margin: 0;
  letter-spacing: -1px;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .header .header-title .header-text h1 {
    font-size: 1.5em;
  }
}
.header .header-title .header-text subtitle {
  display: inline;
  font-weight: 100;
  font-size: 1em;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .header .header-title .header-text subtitle {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .header .header-title .header-text subtitle {
    display: none;
  }
}
.footer-nav {
  display: none;
  position: fixed;
  bottom: -5px;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 5em;
  box-shadow: 0px -5px 10px 1px #ddd;
}
@media only screen and (max-width: 600px) {
  .footer-nav {
    display: flex;
    align-content: center;
  }
}
#footer {
  width: 70vw;
  margin: 6vh auto 2vh auto;
  display: flex;
  justify-content: flex-start;
  align-content: center;
  border-top: 1px solid #ddd;
  box-shadow: 0px -5px 10px -8px #ddd;
  padding: 1em 0.75em;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  #footer {
    width: 70vw;
  }
}
@media only screen and (max-width: 600px) {
  #footer {
    width: 70vw;
    margin: 6vh auto 13vh auto;
  }
}
#footer a:link,
#footer a:visited {
  text-decoration: none;
  color: #222;
}
#footer a:hover {
  color: #d63e0a;
}
@media only screen and (max-width: 600px) {
  #footer {
    flex-flow: column-reverse wrap;
  }
  #footer .footer-social {
    margin: 3vh 0;
  }
}
#footer .footer-copyright {
  flex: 1;
  flex-grow: 2;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  font-size: 0.75em;
}
#footer .footer-copyright p {
  margin: 0.5em 0;
}
#footer .footer-copyright a {
  position: relative;
}
#footer .footer-copyright a:after {
  width: 0%;
}
#footer .footer-copyright a:hover:after {
  position: absolute;
  height: 2px;
  background-color: #444;
  content: "";
  display: block;
  width: 95%;
  margin: 0 auto;
  bottom: -2px;
  left: 0;
  right: 0;
  transition: width 1s;
}
#footer .footer-copyright a:hover {
  color: #222;
}
#footer .footer-social {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-flow: row wrap;
}
#footer .footer-social .footer-social-item {
  margin: 0.5em 1em;
  font-size: 0.75em;
}
@media only screen and (max-width: 600px) {
  #footer .footer-social {
    justify-content: center;
  }
}
.tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.tags label {
  padding: 2px;
  font-size: 0.8em;
  margin: 3px;
  border-radius: 5px;
  display: block;
}
.tags label a {
  color: #666;
}
.tag-1 {
  border: 2px solid #b6d957;
  background: #f0f7dd;
}
.tag-1:hover {
  background: #b6d957;
}
.tag-1:hover a {
  color: #fff;
}
.tag-2 {
  border: 2px solid #fac364;
  background: #fef3e0;
}
.tag-2:hover {
  background: #fac364;
}
.tag-2:hover a {
  color: #fff;
}
.tag-3 {
  border: 2px solid #8cd3ff;
  background: #e8f6ff;
}
.tag-3:hover {
  background: #8cd3ff;
}
.tag-3:hover a {
  color: #fff;
}
.tag-4 {
  border: 2px solid #d998cb;
  background: #f7eaf5;
}
.tag-4:hover {
  background: #d998cb;
}
.tag-4:hover a {
  color: #fff;
}
.tag-5 {
  border: 2px solid #f2d249;
  background: #fcf6db;
}
.tag-5:hover {
  background: #f2d249;
}
.tag-5:hover a {
  color: #fff;
}
.tag-6 {
  border: 2px solid #93b9c6;
  background: #e9f1f4;
}
.tag-6:hover {
  background: #93b9c6;
}
.tag-6:hover a {
  color: #fff;
}
.tag-7 {
  border: 2px solid #ccc5a8;
  background: #f5f3ee;
}
.tag-7:hover {
  background: #ccc5a8;
}
.tag-7:hover a {
  color: #fff;
}
.tag-8 {
  border: 2px solid #52bacc;
  background: #dcf1f5;
}
.tag-8:hover {
  background: #52bacc;
}
.tag-8:hover a {
  color: #fff;
}
.tag-9 {
  border: 2px solid #dbdb46;
  background: #f8f8da;
}
.tag-9:hover {
  background: #dbdb46;
}
.tag-9:hover a {
  color: #fff;
}
.tag-10 {
  border: 2px solid #98aafb;
  background: #eaeefe;
}
.tag-10:hover {
  background: #98aafb;
}
.tag-10:hover a {
  color: #fff;
}
.tag-11 {
  border: 2px solid;
  background: ;
}
.tag-11:hover {
  background: ;
}
.tag-11:hover a {
  color: #fff;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination a:link,
.pagination a:visited {
  text-decoration: none;
  color: #444;
}
.pagination a:hover {
  position: relative;
}
.pagination a:hover:after {
  position: absolute;
  height: 5px;
  background-color: #444;
  content: "";
  display: block;
  width: 5px;
  border-radius: 50%;
  margin: 0 auto;
  top: -0.4em;
  left: 0;
  right: 0;
}
.pagination span,
.pagination a {
  text-align: center;
  height: 1.8em;
  width: 1.8em;
  display: block;
  vertical-align: middle;
  font-size: 1.1em;
}
.pagination span {
  color: #aaa;
}
.search-container {
  margin: 0 auto;
  margin-top: 14em;
  margin-bottom: 4em;
  width: 60%;
  text-align: center;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .search-container {
    width: 90%;
  }
}
@media only screen and (max-width: 600px) {
  .search-container {
    width: 100%;
  }
}
@media only screen and (min-width: 801px) and (max-width: 1024px) {
  .search-container {
    width: 70%;
  }
}
.search-container #search-form {
  border: none;
  width: 60%;
  padding: 0.5em;
  margin: 0.5em;
  border-radius: 5px;
  font-size: 1.2em;
}
@media only screen and (max-width: 600px) {
  .search-container #search-form {
    width: 60%;
  }
}
.search-container input:focus {
  border: none;
}
.search-container .cat-list {
  margin: 0 auto;
  margin-top: 3em;
  width: 80%;
}
.search-container .cat-list li {
  display: inline-block;
  margin: 0 0.5em;
}
.search-container .cat-list li img {
  width: 3em;
  height: auto;
}
.tagcloud-container {
  margin: 0 auto;
  margin-top: 3em;
  margin-bottom: 4em;
  width: 60%;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .tagcloud-container {
    width: 90%;
  }
}
@media only screen and (max-width: 600px) {
  .tagcloud-container {
    width: 100%;
  }
}
@media only screen and (min-width: 801px) and (max-width: 1024px) {
  .tagcloud-container {
    width: 70%;
    text-align: center;
  }
}
.tagcloud-container .tag-cloud {
  margin: 0 auto;
  margin-top: 3em;
  margin-bottom: 2em;
  width: 80%;
}
.tagcloud-container .tag-cloud a:link {
  text-decoration: none;
}
.tagcloud-container .tag-cloud a:hover {
  text-decoration: underline;
}
.announcement {
  position: fixed;
  top: 6.9em;
  left: 20%;
  width: 60%;
  margin: auto 0;
  background-color: #fcf6db;
  border: 2px solid #f2d249;
  border-radius: 5px;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .announcement {
    width: 50%;
    position: fixed;
    top: 6.9em;
    left: 25%;
  }
}
.announcement div p {
  text-align: center;
  padding: 5px;
  margin: 0;
}
@media only screen and (max-width: 600px) {
  .announcement div p {
    margin-top: 1.5em;
  }
}
.announcement div p:hover span {
  color: #666;
}
.announcement div p span {
  font-size: 0.8em;
  color: #999;
}
.announcement div p a:link,
.announcement div p a:visited {
  color: #999;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Light"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf") format("truetype");
  font-weight: 100;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Semilight"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf") format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Bold"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Semibold"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf") format("truetype");
  font-weight: 700;
}
.article,
.page {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  margin-top: 10em;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .article,
  .page {
    width: 800px;
  }
}
@media only screen and (max-width: 600px) {
  .article,
  .page {
    width: 85vw;
  }
}
@media only screen and (max-width: 600px) {
  .article,
  .page {
    margin-top: 12em;
  }
}
.article .article-title,
.page .article-title {
  display: inline-block;
  margin: 0;
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai", serif;
}
.article .article-logo,
.page .article-logo {
  display: inline-block;
  height: inherit;
}
@media only screen and (max-width: 600px) {
  .article .article-logo,
  .page .article-logo {
    display: none;
  }
}
.article .article-logo img,
.page .article-logo img {
  width: auto;
  height: 3em;
  margin-right: 0.5em;
  margin-bottom: -0.8em;
}
.article .article-categories,
.page .article-categories {
  vertical-align: top;
  display: inline-block;
  margin: 0;
  padding: 0;
  margin-left: 0.1em;
  padding-right: 0.3em;
}
@media only screen and (max-width: 600px) {
  .article .article-categories,
  .page .article-categories {
    display: block;
    margin-top: 0.5em;
  }
}
.article .article-categories li,
.page .article-categories li {
  list-style-type: none;
}
.article .article-categories img,
.page .article-categories img {
  width: 1.5em;
  height: auto;
}
.article .article-meta,
.page .article-meta {
  clear: both;
  color: #666;
  margin-left: 2.7em;
  margin-top: 3em;
  font-size: 0.8em;
  width: 100%;
}
@media only screen and (max-width: 600px) {
  .article .article-meta,
  .page .article-meta {
    margin-left: 0.1em;
    margin-top: 2.5em;
  }
}
.article .article-meta ul,
.page .article-meta ul {
  display: block;
  padding: 0;
  text-align: center;
}
.article .article-meta ul li,
.page .article-meta ul li {
  display: inline-block;
  list-style-type: none;
  margin-right: 1em;
}
.article .article-meta .tags,
.page .article-meta .tags {
  clear: both;
  justify-content: center;
}
.article .article-cards,
.page .article-cards {
  margin: 0 auto;
  margin-top: 1.5em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .article .article-cards,
  .page .article-cards {
    width: 100%;
    justify-content: center;
    padding: 0;
  }
}
@media only screen and (max-width: 600px) {
  .article .article-cards,
  .page .article-cards {
    width: 100%;
    justify-content: center;
    padding: 0;
  }
}
.article .article-toc,
.page .article-toc {
  position: fixed;
  top: 10em;
  right: 4em;
  z-index: 100;
}
@media only screen and (max-width: 600px) {
  .article .article-toc,
  .page .article-toc {
    display: none;
  }
}
.article .article-toc .toc-button img,
.page .article-toc .toc-button img {
  width: 2em;
  height: auto;
  object-fit: cover;
}
.page {
  max-width: 800px;
}
.page .page-meta {
  float: right;
}
.page .page-meta p {
  margin: 0;
}
#article-toc:hover .toc {
  display: block;
}
#article-toc:hover .toc-button {
  display: none;
}
.toc {
  display: none;
  padding: 1em;
  margin-left: 0.75em;
  box-shadow: 0px 0px 10px 5px #ddd;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 0;
  max-height: 50vh;
  overflow: auto;
}
@media only screen and (max-width: 600px) {
  .toc {
    width: 80%;
  }
}
.toc ol {
  background-color: #fff;
}
.toc li {
  list-style-type: none;
  line-height: 1.5;
  background-color: #fff;
  padding: 0;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Light"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf") format("truetype");
  font-weight: 100;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Semilight"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf") format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Bold"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Semibold"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2") format("woff2"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff") format("woff"), url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf") format("truetype");
  font-weight: 700;
}
@media only screen and (max-width: 600px) {
  .page,
  .article {
    font-size: 0.9em;
  }
}
.page a,
.article a {
  text-decoration: none;
}
.page a:link,
.article a:link,
.page a:visited,
.article a:visited {
  color: #444;
}
.page .article-content,
.article .article-content {
  color: #333;
  line-height: 1.5;
  font-size: 14px;
}
@media only screen and (max-width: 600px) {
  .page .article-content,
  .article .article-content {
    text-align: justify;
  }
}
.page .article-content hr,
.article .article-content hr {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.page .article-content h1,
.article .article-content h1,
.page .article-content h2,
.article .article-content h2,
.page .article-content h3,
.article .article-content h3,
.page .article-content h4,
.article .article-content h4,
.page .article-content h5,
.article .article-content h5,
.page .article-content h6,
.article .article-content h6 {
  color: #333;
}
.page .article-content h1:target:before,
.article .article-content h1:target:before,
.page .article-content h2:target:before,
.article .article-content h2:target:before,
.page .article-content h3:target:before,
.article .article-content h3:target:before,
.page .article-content h4:target:before,
.article .article-content h4:target:before,
.page .article-content h5:target:before,
.article .article-content h5:target:before,
.page .article-content h6:target:before,
.article .article-content h6:target:before {
  content: "";
  display: block;
  height: 8em /* fixed header height*/;
  margin: -8em 0 0 /* negative fixed header height */;
}
.page .article-content h1,
.article .article-content h1 {
  position: relative;
}
.page .article-content h1:target:before,
.article .article-content h1:target:before {
  content: "";
  display: block;
  height: 5em /* fixed header height*/;
  margin: -5em 0 0 /* negative fixed header height */;
}
.page .article-content a,
.article .article-content a {
  color: #d63e0a;
}
.page .article-content a:visited,
.article .article-content a:visited {
  color: #a3573d;
}
.page .article-content img,
.article .article-content img {
  max-height: 300px;
  max-width: 95%;
  height: auto;
  box-shadow: 3px 3px 12px 3px #eee;
  border-radius: 5px;
  padding: 2.5%;
  margin: 0.5em;
  cursor: pointer;
}
.page .article-content code,
.article .article-content code {
  color: #5299e0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 0.7em;
  font-weight: 600;
  vertical-align: middle;
  border: 1px solid #999;
  background-color: #efefef;
  padding: 2px 4px;
  margin: 0 2px;
  border-radius: 0.4em;
}
.page .article-content pre,
.article .article-content pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  padding: 12px 15px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
}
.page .article-content pre code,
.article .article-content pre code {
  border: none;
  background: none;
  font-size: 0.8em;
  color: #222;
  font-weight: normal;
}
.page .article-content figure.highlight,
.article .article-content figure.highlight {
  margin: 2em 0;
  border: 1px solid #ccc;
  padding: 0.8em;
  border-radius: 8px;
  font-size: 0.8em;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.page .article-content figure.highlight table,
.article .article-content figure.highlight table,
.page .article-content figure.highlight tbody,
.article .article-content figure.highlight tbody,
.page .article-content figure.highlight tr,
.article .article-content figure.highlight tr {
  display: block;
  width: 100%;
}
.page .article-content figure.highlight td.code,
.article .article-content figure.highlight td.code {
  width: 100%;
}
.page .article-content figure.highlight td.gutter,
.article .article-content figure.highlight td.gutter {
  padding-right: 1em;
  color: #aaa;
}
.page .article-content figure.highlight figcaption,
.article .article-content figure.highlight figcaption {
  font-size: 0.9em;
  color: #aaa;
  margin-bottom: 1em;
}
.page .article-content figure.highlight figcaption a,
.article .article-content figure.highlight figcaption a {
  float: right;
}
.page .article-content figure.highlight th,
.article .article-content figure.highlight th,
.page .article-content figure.highlight td,
.article .article-content figure.highlight td {
  padding: 0px;
  text-align: left;
  border-bottom: none;
}
.page .article-content figure.highlight th .line,
.article .article-content figure.highlight th .line,
.page .article-content figure.highlight td .line,
.article .article-content figure.highlight td .line {
  display: inline-block;
  width: 100%;
}
.page .article-content figure.highlight th .marked,
.article .article-content figure.highlight th .marked,
.page .article-content figure.highlight td .marked,
.article .article-content figure.highlight td .marked {
  background-color: #f0fff4;
}
.page .article-content .gist td,
.article .article-content .gist td {
  padding: 0;
  border-bottom: none;
}
.page .article-content table,
.article .article-content table {
  max-width: 100%;
  overflow: auto;
  display: block;
}
.page .article-content table th,
.article .article-content table th,
.page .article-content table td,
.article .article-content table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e1e1e1;
}
.page .article-content table th pre,
.article .article-content table th pre,
.page .article-content table td pre,
.article .article-content table td pre {
  border: none;
  padding: 0.5em 0;
}
.page .article-content table th:first-child,
.article .article-content table th:first-child,
.page .article-content table td:first-child,
.article .article-content table td:first-child {
  padding-left: 0;
}
.page .article-content table th:last-child,
.article .article-content table th:last-child,
.page .article-content table td:last-child,
.article .article-content table td:last-child {
  padding-right: 0;
}
.page .article-content blockquote,
.article .article-content blockquote {
  position: relative;
  padding-left: 2rem;
  margin-top: 2rem;
  color: #888;
  font-size: 0.9em;
}
.page .article-content blockquote:before,
.article .article-content blockquote:before {
  display: block;
  content: "\201C";
  font-size: 5em;
  margin: 0;
  padding: 0;
  left: 0;
  top: -2rem;
  position: absolute;
}
.page .article-content blockquote footer,
.article .article-content blockquote footer {
  color: #222;
  overflow: auto;
}
.page .article-content blockquote footer:before,
.article .article-content blockquote footer:before {
  content: "\2014 \2009";
}
.page .article-content blockquote footer *,
.article .article-content blockquote footer * {
  margin-right: 0.5rem;
}
.page .article-content blockquote.pullquote,
.article .article-content blockquote.pullquote {
  display: block;
  width: 20%;
  font-size: 1.1em;
  padding: 1em 1em 0 1em;
  margin: 0;
}
.page .article-content blockquote.pullquote.left,
.article .article-content blockquote.pullquote.left {
  float: left;
}
.page .article-content blockquote.pullquote.left:before,
.article .article-content blockquote.pullquote.left:before {
  display: block;
  content: "\201C";
  font-size: 5em;
  margin: 0;
  padding: 0;
  left: 0;
  top: -1rem;
  position: absolute;
}
.page .article-content blockquote.pullquote.right,
.article .article-content blockquote.pullquote.right {
  float: right;
}
.page .article-content blockquote.pullquote.right:before,
.article .article-content blockquote.pullquote.right:before {
  display: block;
  content: "\201D";
  font-size: 5em;
  margin: 0;
  padding: 0;
  left: 75%;
  top: -1rem;
  position: absolute;
}
.page .article-content dt,
.article .article-content dt {
  display: block;
  width: 100%;
  text-decoration: underline;
  margin: 0.5em 0;
}
.page .article-content dd,
.article .article-content dd {
  color: #666;
  margin-top: 0.5em;
}
.page .article-content dd pre code,
.article .article-content dd pre code {
  border: 0;
  background: 0;
  color: #666;
}
.page .article-content dl,
.article .article-content dl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
.page .article-content dl dt,
.article .article-content dl dt {
  display: block;
  width: 20%;
  text-align: center;
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
  padding: 0.5em;
  border-radius: 5px;
}
@media only screen and (max-width: 600px) {
  .page .article-content dl dt,
  .article .article-content dl dt {
    width: 100%;
  }
}
.page .article-content dl dt:nth-of-type(1),
.article .article-content dl dt:nth-of-type(1) {
  background-color: #d998cb;
}
.page .article-content dl dt:nth-of-type(2),
.article .article-content dl dt:nth-of-type(2) {
  background-color: #b6d957;
}
.page .article-content dl dt:nth-of-type(3),
.article .article-content dl dt:nth-of-type(3) {
  background-color: #fac364;
}
.page .article-content dl dt:nth-of-type(4),
.article .article-content dl dt:nth-of-type(4) {
  background-color: #8cd3ff;
}
.page .article-content dl dt:nth-of-type(5),
.article .article-content dl dt:nth-of-type(5) {
  background-color: #f2d249;
}
.page .article-content dl dt:nth-of-type(6),
.article .article-content dl dt:nth-of-type(6) {
  background-color: #93b9c6;
}
.page .article-content dl dd,
.article .article-content dl dd {
  margin-left: 2em;
  width: 70%;
  color: #666;
}
@media only screen and (max-width: 600px) {
  .page .article-content dl dd,
  .article .article-content dl dd {
    width: 100%;
    margin-left: 0;
  }
}
.page .article-content dl dd ol,
.article .article-content dl dd ol,
.page .article-content dl dd ul,
.article .article-content dl dd ul {
  padding-left: 1em;
}
.page .article-content dl dd *,
.article .article-content dl dd * {
  margin-top: 0;
  margin-left: 0;
}
.page .article-content dl dd figure,
.article .article-content dl dd figure,
.page .article-content dl dd figure.highlight,
.article .article-content dl dd figure.highlight {
  margin: 0;
}
.page .article-content dl dd pre code,
.article .article-content dl dd pre code {
  border: 0;
  background: 0;
  color: #666;
}
.page .article-gallery,
.article .article-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0 auto;
  width: 100%;
}
.page .article-gallery .article-gallery-item,
.article .article-gallery .article-gallery-item {
  display: block;
  text-align: left;
  margin-top: 0.5em;
  margin-left: 0.5em;
}
.page .article-gallery .article-gallery-item img,
.article .article-gallery .article-gallery-item img {
  width: 200px;
  height: 160px;
  box-shadow: 3px 3px 12px 3px #eee;
  border-radius: 5px;
  padding: 0.5em;
  object-fit: cover;
  object-position: center;
}
@media only screen and (max-width: 600px) {
  .page .article-gallery .article-gallery-item img,
  .article .article-gallery .article-gallery-item img {
    max-width: 70vw;
    width: 70vw;
    height: 160px;
  }
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .page .article-gallery .article-gallery-item img,
  .article .article-gallery .article-gallery-item img {
    max-width: 70vw;
    width: 70vw;
    height: 160px;
  }
}
.page .page-meta a:link {
  color: #d63e0a;
}
.page .page-meta a:visited {
  color: #a3573d;
}
.Card-article {
  text-align: left;
  width: 44%;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0.5px 0.5px 3px -1px rgba(70,75,73,0.81);
  margin: 0.5em 0;
  height: 10em;
  overflow-y: auto;
  padding: 2%;
  position: relative;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .Card-article {
    width: 95%;
  }
}
@media only screen and (max-width: 600px) {
  .Card-article {
    width: 95%;
  }
}
.Card-article .card-title h3 {
  font-size: 1em;
  margin: 0;
}
.Card-article .card-content {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: space-between;
}
.Card-article .card-content .author-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.Card-article .card-content .author-meta .author-figure {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 1px solid #000;
}
.Card-article .card-content .author-meta .author-name {
  margin-top: 0.8em;
}
.Card-article .card-content .author-ai {
  margin: 0 0 0 1em;
  font-size: 0.9em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: auto;
  max-height: 10em;
}
.Card-article .card-content .author-ai .author-articles {
  width: 100%;
  overflow-y: auto;
}
.index-container {
  margin: 0 auto;
  margin-top: 11em;
  text-align: center;
  margin-bottom: 5em;
}
.index-cards {
  margin: 0 auto;
  margin-top: 3em;
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 2.5em;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .index-cards {
    width: 90vw;
    justify-content: center;
    padding: 0;
  }
}
@media only screen and (max-width: 600px) {
  .index-cards {
    width: 90vw;
    justify-content: center;
    padding: 0;
  }
}
body {
  background-color: #f5f5f5;
}
.Card {
  font-size: 14px;
  text-align: left;
  width: 45%;
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0.5px 0.5px 3px -0.5px rgba(170,175,173,0.61);
  margin: 0.5em 0;
  min-height: 14em;
  padding: 0 2%;
  position: relative;
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .Card {
    width: 90%;
  }
}
@media only screen and (max-width: 600px) {
  .Card {
    width: 90%;
  }
}
.Card .Card-body {
  flex: 1;
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0 0.5em 0.5em 0.5em;
  display: block;
}
.Card .Card-body a:link,
.Card .Card-body a:visited,
.Card .Card-body a:hover {
  text-decoration: none;
  color: #444;
}
.Card .Card-body .Card-title {
  display: block;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  flex-grow: 1;
}
.Card .Card-body .Card-title h2 {
  margin: 0;
  font-size: 1.4em;
  font-weight: normal;
}
.Card .Card-body .Card-excerpt {
  display: none;
  margin-top: 1.5em;
  flex-grow: 1;
  text-align: left;
  justify-content: center;
  flex: 1;
  margin-right: 1em;
}
.Card .Card-body .Card-excerpt p {
  margin: 0;
  line-height: 1.5;
}
.Card .Card-body .Card-excerpt-touch {
  margin-top: 0em;
  margin-bottom: 7em;
  flex-grow: 1;
  text-align: left;
  justify-content: center;
  flex: 1;
  margin-right: 1em;
}
.Card .Card-body .Card-excerpt-touch p {
  margin: 0;
  line-height: 1.5;
}
.Card .Card-body .Card-meta {
  position: absolute;
  bottom: 1em;
  display: block;
  font-size: 0.8em;
  color: #aaa;
}
.Card .Card-body .Card-meta .Card-tags {
  margin-right: 0.5em;
  display: block;
}
@media only screen and (max-width: 600px) {
  .Card .Card-body .Card-meta .Card-tags {
    margin-right: 1em;
  }
}
.Card .Card-body .Card-meta ul {
  padding: 0;
  display: block;
  margin-left: 0.3em;
}
.Card .Card-body .Card-meta li {
  display: inline-block;
  margin: 0 1em 0 0;
}
.Card .Card-figure {
  margin: 1.5em 1.5em 1.5em 0.5em;
}
@media only screen and (max-width: 600px) {
  .Card .Card-figure {
    margin-left: 1em;
  }
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .Card .Card-figure {
    margin-left: 1em;
  }
}
.Card .Card-figure img {
  width: 2.8em;
  height: 2.8em;
  object-fit: cover;
}
.Card-badge {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 0px solid #fff;
  width: 10px;
  height: 10px;
  background-color: #ff6b6b;
  position: absolute;
  top: -5px;
  right: -5px;
}
.Card-hover:hover .Card-title {
  display: none;
}
.Card-hover:hover .Card-excerpt {
  display: block;
}
.archive-container {
  margin: 0 auto;
  margin-top: 10em;
  margin-bottom: 5em;
  text-align: left;
  width: 60%;
}
@media only screen and (min-width: 801px) and (max-width: 1024px) {
  .archive-container {
    width: 90vw;
    padding: 0;
  }
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .archive-container {
    width: 90vw;
    justify-content: center;
    padding: 0;
  }
}
@media only screen and (max-width: 600px) {
  .archive-container {
    width: 90vw;
    justify-content: center;
    padding: 0;
  }
}
.archive-cards {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}
.archive-header .archive-logo {
  float: left;
}
.archive-header .archive-logo img {
  width: 2.5em;
  height: auto;
  margin-top: -0.5em;
  margin-right: 0.5em;
}
.archive-title {
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai", serif;
}
.Card-archive {
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  min-width: 20%;
  max-width: 27%;
  margin: 1em 1%;
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  box-shadow: 0.5px 0.5px 3px -0.5px rgba(170,175,173,0.61);
  position: relative;
}
@media only screen and (max-width: 600px) {
  .Card-archive {
    max-width: 90vw;
    width: 90vw;
  }
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
  .Card-archive {
    width: 90%;
  }
}
@media only screen and (max-width: 600px) {
  .Card-archive {
    width: 90%;
  }
}
.Card-archive .Card-meta {
  margin-top: 0.5em;
  font-size: 0.8em;
  color: #aaa;
}
.Card-archive .Card-meta a:link {
  text-decoration: none;
}
.Card-archive .Card-meta .Card-tags {
  margin-bottom: 1em;
}
.Card-archive .Card-meta ul {
  padding: 0;
  display: block;
  clear: both;
  margin-left: 0.3em;
}
.Card-archive .Card-meta li {
  display: inline-block;
  margin-left: 0.2em;
}
.Card-archive .Card-title {
  flex-grow: 1;
  padding-top: 0;
  font-weight: normal;
  margin: 0;
  font-size: 1em;
  margin-bottom: 2em;
}
.Card-archive .Card-title a:link,
.Card-archive .Card-title a:visited {
  text-decoration: none;
  color: #444;
}
.Card-archive .Card-title a:hover {
  color: #d63e0a;
}
.Card-archive .Card-badge {
  border-radius: 10px;
  border: 0px solid #fff;
  width: 100%;
  height: 3px;
  background-color: #ff6b6b;
  position: absolute;
  top: 4%;
  left: 0;
  overflow: hidden;
}
.Card-archive .Card-body {
  margin: 1em;
}
.comment,
.quote {
  color: #8e908c;
}
.variable,
.template-variable,
.tag,
.name,
.selector-id,
.selector-class,
.regexp,
.deletion {
  color: #c82829;
}
.number,
.built_in,
.builtin-name,
.literal,
.type,
.params,
.meta,
.link {
  color: #f5871f;
}
.attribute {
  color: #eab700;
}
.string,
.symbol,
.bullet,
.addition {
  color: #718c00;
}
.title,
.section {
  color: #4271ae;
}
.keyword,
.selector-tag {
  color: #8959a8;
}
.hljs {
  display: block;
  overflow-x: auto;
  background: #fff;
  color: #4d4d4c;
  padding: 0.5em;
}
.emphasis {
  font-style: italic;
}
.strong {
  font-weight: bold;
}
.header .header-logo {
  animation-name: fadeInLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 0.3s;
}
.header .header-logo img {
  transition: all 0.2s ease-in-out;
}
.header .header-logo img:hover {
  transform: translateY(-4%);
  box-shadow: 1px 2px 10px 1px #c5c5c5;
}
#footer {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 0.3s;
}
.archive-container {
  animation-name: fadeInLittleLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 0.3s;
}
.index-cards {
  animation-name: fadeInLittleLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 0.3s;
}
.Card {
  transition: all 0.3s ease-in-out;
}
.Card:hover {
  transform: translateY(-3%);
  box-shadow: 0.5px 3px 3px -0.5px rgba(170,175,173,0.61);
}
.Card:hover .Card-excerpt {
  animation-name: fadeInLittleLeft;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-delay: 0;
}
.header .header-text {
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 0.6s;
}
.index-intro {
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 0.7s;
}
#header-nav {
  animation-name: fadeInDown;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-delay: 0.9s;
}
.article-title,
.article-logo,
.article-categories {
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 1.3s;
}
.article-meta {
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 1.5s;
}
.article-toc,
.page-meta {
  animation-name: fadeInRight;
  animation-duration: 1.2s;
  animation-fill-mode: both;
  animation-delay: 1.6s;
}
.article-gallery {
  animation-name: fadeInLittleDown;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 1.8s;
}
.article-content,
.article-comment {
  animation-name: fadeInLittleLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 1.9s;
}
.Card-title {
  animation-name: fadeInLittleLeft;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-delay: 0;
}
.Card-archive {
  transition: all 0.3s ease-in-out;
}
.Card-archive:hover {
  transform: translateY(-5%);
  box-shadow: 0.5px 3px 3px -0.5px rgba(170,175,173,0.61);
}
.nav-more-menu {
  animation-name: fadeInLittleDown;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-delay: 0;
}
.toc {
  animation-name: fadeInLittleRight;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-delay: 0;
}
@-moz-keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-o-keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-moz-keyframes fadeOutDown {
  to {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
  from {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeOutDown {
  to {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
  from {
    opacity: 1;
    transform: none;
  }
}
@-o-keyframes fadeOutDown {
  to {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
  from {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeOutDown {
  to {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
  from {
    opacity: 1;
    transform: none;
  }
}
@-moz-keyframes fadeInLittleDown {
  from {
    opacity: 0;
    transform: translate3d(0, -5%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeInLittleDown {
  from {
    opacity: 0;
    transform: translate3d(0, -5%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-o-keyframes fadeInLittleDown {
  from {
    opacity: 0;
    transform: translate3d(0, -5%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInLittleDown {
  from {
    opacity: 0;
    transform: translate3d(0, -5%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-moz-keyframes fadeInLittleLeft {
  from {
    opacity: 0;
    transform: translate3d(-5%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeInLittleLeft {
  from {
    opacity: 0;
    transform: translate3d(-5%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-o-keyframes fadeInLittleLeft {
  from {
    opacity: 0;
    transform: translate3d(-5%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInLittleLeft {
  from {
    opacity: 0;
    transform: translate3d(-5%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-moz-keyframes fadeOutLittleLeft {
  to {
    opacity: 0;
    transform: translate3d(-5%, 0, 0);
  }
  from {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeOutLittleLeft {
  to {
    opacity: 0;
    transform: translate3d(-5%, 0, 0);
  }
  from {
    opacity: 1;
    transform: none;
  }
}
@-o-keyframes fadeOutLittleLeft {
  to {
    opacity: 0;
    transform: translate3d(-5%, 0, 0);
  }
  from {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeOutLittleLeft {
  to {
    opacity: 0;
    transform: translate3d(-5%, 0, 0);
  }
  from {
    opacity: 1;
    transform: none;
  }
}
@-moz-keyframes fadeOutUp {
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  from {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeOutUp {
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  from {
    opacity: 1;
    transform: none;
  }
}
@-o-keyframes fadeOutUp {
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  from {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeOutUp {
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  from {
    opacity: 1;
    transform: none;
  }
}
@-moz-keyframes fadeInLittleRight {
  from {
    opacity: 0;
    transform: translate3d(5%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeInLittleRight {
  from {
    opacity: 0;
    transform: translate3d(5%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-o-keyframes fadeInLittleRight {
  from {
    opacity: 0;
    transform: translate3d(5%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInLittleRight {
  from {
    opacity: 0;
    transform: translate3d(5%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-moz-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-o-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-moz-keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-o-keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-moz-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-o-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-moz-keyframes popUp {
  to {
    transform: translateY(-3%);
  }
  from {
    transform: none;
  }
}
@-webkit-keyframes popUp {
  to {
    transform: translateY(-3%);
  }
  from {
    transform: none;
  }
}
@-o-keyframes popUp {
  to {
    transform: translateY(-3%);
  }
  from {
    transform: none;
  }
}
@keyframes popUp {
  to {
    transform: translateY(-3%);
  }
  from {
    transform: none;
  }
}
@-moz-keyframes translateDownAnouncement {
  to {
    opacity: 1;
    width: 60%;
    left: 20%;
  }
  from {
    opacity: 1;
    transform: translateY(-6.9em);
    width: 100%;
    left: 0;
  }
}
@-webkit-keyframes translateDownAnouncement {
  to {
    opacity: 1;
    width: 60%;
    left: 20%;
  }
  from {
    opacity: 1;
    transform: translateY(-6.9em);
    width: 100%;
    left: 0;
  }
}
@-o-keyframes translateDownAnouncement {
  to {
    opacity: 1;
    width: 60%;
    left: 20%;
  }
  from {
    opacity: 1;
    transform: translateY(-6.9em);
    width: 100%;
    left: 0;
  }
}
@keyframes translateDownAnouncement {
  to {
    opacity: 1;
    width: 60%;
    left: 20%;
  }
  from {
    opacity: 1;
    transform: translateY(-6.9em);
    width: 100%;
    left: 0;
  }
}
.header.headroom {
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 0.3s;
}
.header.headroom--pinned {
  animation-name: fadeInDown;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-delay: 0.1s;
}
.header.headroom--unpinned {
  animation-name: fadeOutUp;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-delay: 0.1s;
}
.announcement.headroom {
  animation-name: fadeInDown;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-delay: 1s;
}
.announcement.headroom--pinned {
  animation-name: translateDownAnouncement;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-delay: 0.1s;
}
.announcement.headroom--unpinned {
  animation-name: translateUpAnouncement;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-delay: 0.1s;
}
.footer-nav.headroom {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 0.3s;
}
.footer-nav.headroom--pinned {
  animation-name: fadeInUp;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-delay: 0.1s;
}
.footer-nav.headroom--unpinned {
  animation-name: fadeOutDown;
  animation-duration: 0.7s;
  animation-fill-mode: both;
  animation-delay: 0.1s;
}
.noty_theme__bootstrap-v3.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;
  border-radius: 4px; }
  .noty_theme__bootstrap-v3.noty_bar .noty_body {
    padding: 15px; }
  .noty_theme__bootstrap-v3.noty_bar .noty_buttons {
    padding: 10px; }
  .noty_theme__bootstrap-v3.noty_bar .noty_close_button {
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    background: transparent; }
  .noty_theme__bootstrap-v3.noty_bar .noty_close_button:hover {
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5; }

.noty_theme__bootstrap-v3.noty_type__alert,
.noty_theme__bootstrap-v3.noty_type__notification {
  background-color: #fff;
  color: inherit; }

.noty_theme__bootstrap-v3.noty_type__warning {
  background-color: #fcf8e3;
  color: #8a6d3b;
  border-color: #faebcc; }

.noty_theme__bootstrap-v3.noty_type__error {
  background-color: #f2dede;
  color: #a94442;
  border-color: #ebccd1; }

.noty_theme__bootstrap-v3.noty_type__info,
.noty_theme__bootstrap-v3.noty_type__information {
  background-color: #d9edf7;
  color: #31708f;
  border-color: #bce8f1; }

.noty_theme__bootstrap-v3.noty_type__success {
  background-color: #dff0d8;
  color: #3c763d;
  border-color: #d6e9c6; }

.noty_theme__bootstrap-v4.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;
  border-radius: .25rem; }
  .noty_theme__bootstrap-v4.noty_bar .noty_body {
    padding: .75rem 1.25rem; }
  .noty_theme__bootstrap-v4.noty_bar .noty_buttons {
    padding: 10px; }
  .noty_theme__bootstrap-v4.noty_bar .noty_close_button {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .5;
    background: transparent; }
  .noty_theme__bootstrap-v4.noty_bar .noty_close_button:hover {
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .75; }

.noty_theme__bootstrap-v4.noty_type__alert,
.noty_theme__bootstrap-v4.noty_type__notification {
  background-color: #fff;
  color: inherit; }

.noty_theme__bootstrap-v4.noty_type__warning {
  background-color: #fcf8e3;
  color: #8a6d3b;
  border-color: #faebcc; }

.noty_theme__bootstrap-v4.noty_type__error {
  background-color: #f2dede;
  color: #a94442;
  border-color: #ebccd1; }

.noty_theme__bootstrap-v4.noty_type__info,
.noty_theme__bootstrap-v4.noty_type__information {
  background-color: #d9edf7;
  color: #31708f;
  border-color: #bce8f1; }

.noty_theme__bootstrap-v4.noty_type__success {
  background-color: #dff0d8;
  color: #3c763d;
  border-color: #d6e9c6; }

.noty_theme__light.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  border-radius: 2px;
  position: relative; }
  .noty_theme__light.noty_bar .noty_body {
    padding: 10px; }
  .noty_theme__light.noty_bar .noty_buttons {
    border-top: 1px solid #e7e7e7;
    padding: 5px 10px; }

.noty_theme__light.noty_type__alert,
.noty_theme__light.noty_type__notification {
  background-color: #fff;
  border: 1px solid #dedede;
  color: #444; }

.noty_theme__light.noty_type__warning {
  background-color: #FFEAA8;
  border: 1px solid #FFC237;
  color: #826200; }
  .noty_theme__light.noty_type__warning .noty_buttons {
    border-color: #dfaa30; }

.noty_theme__light.noty_type__error {
  background-color: #ED7000;
  border: 1px solid #e25353;
  color: #FFF; }
  .noty_theme__light.noty_type__error .noty_buttons {
    border-color: darkred; }

.noty_theme__light.noty_type__info,
.noty_theme__light.noty_type__information {
  background-color: #78C5E7;
  border: 1px solid #3badd6;
  color: #FFF; }
  .noty_theme__light.noty_type__info .noty_buttons,
  .noty_theme__light.noty_type__information .noty_buttons {
    border-color: #0B90C4; }

.noty_theme__light.noty_type__success {
  background-color: #57C880;
  border: 1px solid #7cdd77;
  color: darkgreen; }
  .noty_theme__light.noty_type__success .noty_buttons {
    border-color: #50C24E; }

.noty_theme__metroui.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.298039) 0 0 5px 0; }
  .noty_theme__metroui.noty_bar .noty_progressbar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: #000;
    opacity: 0.2;
    filter: alpha(opacity=20); }
  .noty_theme__metroui.noty_bar .noty_body {
    padding: 1.25em;
    font-size: 14px; }
  .noty_theme__metroui.noty_bar .noty_buttons {
    padding: 0 10px .5em 10px; }

.noty_theme__metroui.noty_type__alert,
.noty_theme__metroui.noty_type__notification {
  background-color: #fff;
  color: #1d1d1d; }

.noty_theme__metroui.noty_type__warning {
  background-color: #FA6800;
  color: #fff; }

.noty_theme__metroui.noty_type__error {
  background-color: #CE352C;
  color: #FFF; }

.noty_theme__metroui.noty_type__info,
.noty_theme__metroui.noty_type__information {
  background-color: #1BA1E2;
  color: #FFF; }

.noty_theme__metroui.noty_type__success {
  background-color: #60A917;
  color: #fff; }

.noty_theme__mint.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  border-radius: 2px;
  position: relative; }
  .noty_theme__mint.noty_bar .noty_body {
    padding: 10px;
    font-size: 14px; }
  .noty_theme__mint.noty_bar .noty_buttons {
    padding: 10px; }

.noty_theme__mint.noty_type__alert,
.noty_theme__mint.noty_type__notification {
  background-color: #fff;
  border-bottom: 1px solid #D1D1D1;
  color: #2F2F2F; }

.noty_theme__mint.noty_type__warning {
  background-color: #FFAE42;
  border-bottom: 1px solid #E89F3C;
  color: #fff; }

.noty_theme__mint.noty_type__error {
  background-color: #DE636F;
  border-bottom: 1px solid #CA5A65;
  color: #fff; }

.noty_theme__mint.noty_type__info,
.noty_theme__mint.noty_type__information {
  background-color: #7F7EFF;
  border-bottom: 1px solid #7473E8;
  color: #fff; }

.noty_theme__mint.noty_type__success {
  background-color: #AFC765;
  border-bottom: 1px solid #A0B55C;
  color: #fff; }

.noty_theme__nest.noty_bar {
  margin: 0 0 15px 0;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.098039) 5px 4px 10px 0; }
  .noty_theme__nest.noty_bar .noty_body {
    padding: 10px;
    font-size: 14px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }
  .noty_theme__nest.noty_bar .noty_buttons {
    padding: 10px; }

.noty_layout .noty_theme__nest.noty_bar {
  z-index: 5; }

.noty_layout .noty_theme__nest.noty_bar:nth-child(2) {
  position: absolute;
  top: 0;
  margin-top: 4px;
  margin-right: -4px;
  margin-left: 4px;
  z-index: 4;
  width: 100%; }

.noty_layout .noty_theme__nest.noty_bar:nth-child(3) {
  position: absolute;
  top: 0;
  margin-top: 8px;
  margin-right: -8px;
  margin-left: 8px;
  z-index: 3;
  width: 100%; }

.noty_layout .noty_theme__nest.noty_bar:nth-child(4) {
  position: absolute;
  top: 0;
  margin-top: 12px;
  margin-right: -12px;
  margin-left: 12px;
  z-index: 2;
  width: 100%; }

.noty_layout .noty_theme__nest.noty_bar:nth-child(5) {
  position: absolute;
  top: 0;
  margin-top: 16px;
  margin-right: -16px;
  margin-left: 16px;
  z-index: 1;
  width: 100%; }

.noty_layout .noty_theme__nest.noty_bar:nth-child(n+6) {
  position: absolute;
  top: 0;
  margin-top: 20px;
  margin-right: -20px;
  margin-left: 20px;
  z-index: -1;
  width: 100%; }

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(2),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(2) {
  margin-top: 4px;
  margin-left: -4px;
  margin-right: 4px; }

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(3),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(3) {
  margin-top: 8px;
  margin-left: -8px;
  margin-right: 8px; }

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(4),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(4) {
  margin-top: 12px;
  margin-left: -12px;
  margin-right: 12px; }

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(5),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(5) {
  margin-top: 16px;
  margin-left: -16px;
  margin-right: 16px; }

#noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(n+6),
#noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(n+6) {
  margin-top: 20px;
  margin-left: -20px;
  margin-right: 20px; }

.noty_theme__nest.noty_type__alert,
.noty_theme__nest.noty_type__notification {
  background-color: #073B4C;
  color: #fff; }
  .noty_theme__nest.noty_type__alert .noty_progressbar,
  .noty_theme__nest.noty_type__notification .noty_progressbar {
    background-color: #fff; }

.noty_theme__nest.noty_type__warning {
  background-color: #FFD166;
  color: #fff; }

.noty_theme__nest.noty_type__error {
  background-color: #EF476F;
  color: #fff; }
  .noty_theme__nest.noty_type__error .noty_progressbar {
    opacity: .4; }

.noty_theme__nest.noty_type__info,
.noty_theme__nest.noty_type__information {
  background-color: #118AB2;
  color: #fff; }
  .noty_theme__nest.noty_type__info .noty_progressbar,
  .noty_theme__nest.noty_type__information .noty_progressbar {
    opacity: .6; }

.noty_theme__nest.noty_type__success {
  background-color: #06D6A0;
  color: #fff; }

.noty_theme__relax.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  border-radius: 2px;
  position: relative; }
  .noty_theme__relax.noty_bar .noty_body {
    padding: 10px; }
  .noty_theme__relax.noty_bar .noty_buttons {
    border-top: 1px solid #e7e7e7;
    padding: 5px 10px; }

.noty_theme__relax.noty_type__alert,
.noty_theme__relax.noty_type__notification {
  background-color: #fff;
  border: 1px solid #dedede;
  color: #444; }

.noty_theme__relax.noty_type__warning {
  background-color: #FFEAA8;
  border: 1px solid #FFC237;
  color: #826200; }
  .noty_theme__relax.noty_type__warning .noty_buttons {
    border-color: #dfaa30; }

.noty_theme__relax.noty_type__error {
  background-color: #FF8181;
  border: 1px solid #e25353;
  color: #FFF; }
  .noty_theme__relax.noty_type__error .noty_buttons {
    border-color: darkred; }

.noty_theme__relax.noty_type__info,
.noty_theme__relax.noty_type__information {
  background-color: #78C5E7;
  border: 1px solid #3badd6;
  color: #FFF; }
  .noty_theme__relax.noty_type__info .noty_buttons,
  .noty_theme__relax.noty_type__information .noty_buttons {
    border-color: #0B90C4; }

.noty_theme__relax.noty_type__success {
  background-color: #BCF5BC;
  border: 1px solid #7cdd77;
  color: darkgreen; }
  .noty_theme__relax.noty_type__success .noty_buttons {
    border-color: #50C24E; }

.noty_theme__semanticui.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;
  font-size: 1em;
  border-radius: .28571429rem;
  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 transparent; }
  .noty_theme__semanticui.noty_bar .noty_body {
    padding: 1em 1.5em;
    line-height: 1.4285em; }
  .noty_theme__semanticui.noty_bar .noty_buttons {
    padding: 10px; }

.noty_theme__semanticui.noty_type__alert,
.noty_theme__semanticui.noty_type__notification {
  background-color: #f8f8f9;
  color: rgba(0, 0, 0, 0.87); }

.noty_theme__semanticui.noty_type__warning {
  background-color: #fffaf3;
  color: #573a08;
  box-shadow: 0 0 0 1px #c9ba9b inset, 0 0 0 0 transparent; }

.noty_theme__semanticui.noty_type__error {
  background-color: #fff6f6;
  color: #9f3a38;
  box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 transparent; }

.noty_theme__semanticui.noty_type__info,
.noty_theme__semanticui.noty_type__information {
  background-color: #f8ffff;
  color: #276f86;
  box-shadow: 0 0 0 1px #a9d5de inset, 0 0 0 0 transparent; }

.noty_theme__semanticui.noty_type__success {
  background-color: #fcfff5;
  color: #2c662d;
  box-shadow: 0 0 0 1px #a3c293 inset, 0 0 0 0 transparent; }

.noty_theme__sunset.noty_bar {
  margin: 4px 0;
  overflow: hidden;
  border-radius: 2px;
  position: relative; }
  .noty_theme__sunset.noty_bar .noty_body {
    padding: 10px;
    font-size: 14px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }
  .noty_theme__sunset.noty_bar .noty_buttons {
    padding: 10px; }

.noty_theme__sunset.noty_type__alert,
.noty_theme__sunset.noty_type__notification {
  background-color: #073B4C;
  color: #fff; }
  .noty_theme__sunset.noty_type__alert .noty_progressbar,
  .noty_theme__sunset.noty_type__notification .noty_progressbar {
    background-color: #fff; }

.noty_theme__sunset.noty_type__warning {
  background-color: #FFD166;
  color: #fff; }

.noty_theme__sunset.noty_type__error {
  background-color: #EF476F;
  color: #fff; }
  .noty_theme__sunset.noty_type__error .noty_progressbar {
    opacity: .4; }

.noty_theme__sunset.noty_type__info,
.noty_theme__sunset.noty_type__information {
  background-color: #118AB2;
  color: #fff; }
  .noty_theme__sunset.noty_type__info .noty_progressbar,
  .noty_theme__sunset.noty_type__information .noty_progressbar {
    opacity: .6; }

.noty_theme__sunset.noty_type__success {
  background-color: #06D6A0;
  color: #fff; }