div.float-breaker {
  clear: both;
}

body.fn {
  background-color: WhiteSmoke;
  font-family     : Verdana, Helvetica, Sans-Serif;
  font-size       : 100%;
  overflow-y      : scroll;
}

body.fn div.header-container {
  overflow : visible;
  position : relative;
  padding  : 0;
  margin   : auto;
  max-width: 680;
}

body.fn div.header,
body.fn div.footer {
  background-color: #DEE2E6;
  box-shadow      : 4px 4px 4px #6C757D;
  margin          : auto;
  max-width       : 680;
  width           : 100%
}

body.fn div.header {
  overflow: hidden;
  padding : 10px 0px 10px 0px;
}

body.fn div.header div.sitename {
  margin-left: 10px;
  overflow   : hidden;
}

body.fn div.header h1 {
  color     : #212529;
  font-size : 1.4em;
  margin    : 0;
  text-align: left;
}

body.fn div.header h2 {
  color      : #495057;
  font-size  : 1.0em;
  font-weight: normal;
  margin     : 0;
  margin-top : 3px;
  text-align : left;
}

body.fn div.header p.navigation {
  font-size  : 1.1em;
  font-weight: bold;
  margin     : 5px 0px 0px 0px;
  max-width  : 600;
  text-align : left;
}

body.fn div.header p.navigation a {
  color          : #495057;
  margin         : 0px 5px 0px 5px;
  text-decoration: none;
}

body.fn div.header p.navigation a:first-of-type {
  margin-left: 0px;
}

body.fn div.header p.navigation a:hover {
  color: red;
}

body.fn div.header p.navigation span {
  color : #6C757D;
  margin: 0px 5px 0px 5px;
}

body.fn div.header p.navigation span.bullet {
  color: #495057;
}

body.fn div.header p.navigation span:first-of-type {
  margin-left: 0px;
}

body.fn div.header p.navigation span:last-of-type {
  display       : inline-block;
  max-width     : 200px;
  overflow      : hidden;
  text-overflow : ellipsis;
  vertical-align: bottom;
  white-space   : nowrap;
}

body.fn div.header h1 a {
  color          : inherit;
  font-weight    : bold;
  text-decoration: none;
}

body.fn div.main {
  background-color: #F8F9FA;
  background-color: white;
  margin          : 10px auto;
  padding         : 5px 10px;
  max-width       : 660;
}

body.fn div.main div.disclaimer {
  margin-top: 20px;
}

body.fn span.group-caption {
  color      : #495057;
  display    : inline-block;
  font-size  : 1.8em;
  font-weight: bold;
  margin     : 20px 0 0 10px;
}

body.fn p.group-citation {
  color     : #6C757D;
  font-size : 1.0em;
  font-style: italic;
  margin    : 5px 0 0 10px;
}

body.fn a.card {
  background-color: white;
  border          : 1px solid #6C757D;
  display         : inline-block;
  margin          : 10px 0 0 0;
  text-decoration : none;
}

body.fn a.card:hover {
  border: 1px solid red;
}

body.fn a.card div {
  background-color: #F8F9FA;
  width         : 320px;
  height        : 180px;
  margin        : 0;
  overflow      : hidden;
  text-align    : center;
  vertical-align: top;
}

body.fn a.card div h1 {
  color      : #495057;
  font-weight: bold;
  font-size  : 1.8em;
  margin     : 0.7em 0 1.0em 0;
  text-align : center;
  width      : 100%;
}

body.fn a.card div h2 {
  color      : #6C757D;
  font-weight: bold;
  font-size  : 1.3em;
  text-align : center;
  width      : 100%;
}

body.fn a.card div h3 {
  color      : #ADB5BD;
  font-size  : 1.0em;
  text-align : center;
  width      : 100%;
}

body.fn div.main h1 {
  color      : #495057;
  display    : block;
  font-size  : 1.8em;
  font-weight: bold;
  margin     : 5px 0px 15px 0px;
}

body.fn div.main h2 {
  color      : #6C757D;
  display    : block;
  font-size  : 1.2em;
  font-weight: bold;
  margin     : 10px 0px 20px 0px;
}

body.fn div.main h3 {
  color    : #495057;
  font-size: 1.4em;
  margin   : 10px 0 10px 0;
}

body.fn div.main h3.rule {
  font-size  : 1.1em;
}

body.fn div.main h3.warning {
  color: red;
}

body.fn div.main h3:first-of-type {
  margin-top: 20px;
}

body.fn div.main h4 {
  color    : #495057;
  font-size: 1.1em;
  margin   : 5px 0 5px 0;
}

body.fn div.main p {
  margin: 0 0 10px 0;
}

body.fn div.main p.rule {
  margin: 0 0 30px 0;
}

body.fn div.main p.citation {
  color     : #6C757D;
  font-size : 0.9em;
  margin-top: 10px;
}

body.fn div.main p.toc {
  margin: 0;
}

body.fn div.main p.toc span {
  display        : block;
}

body.fn div.main p.toc a {
  color          : #6C757D;
  display        : inline-block;
  font-size      : 1.0em;
  font-weight    : bold;
  margin         : 5px 0 0 0;
  text-decoration: none;
}

body.fn div.main p.toc a:hover {
  color: red;
}

body.fn div.main a.back2toc {
  background-color: inherit;
  border          : 0px;
  color           : #6C757D;
  display         : block;
  margin          : 10px 0px 10px 0px;
  text-decoration : none;
}

body.fn div.main a.back2toc:hover {
  color: red;
}

body.fn div.main p.divider {
  display: block;
  height: 15px;
}

body.fn div.main p.code {
  font-family     : Fixed;
  font-size       : 100%;
}

body.fn div.main span.pupil {
  color        : #000080;
  display      : block;
  font-weight  : bold;
  margin-top   : 5px;
  margin-bottom: 2px;
}

body.fn div.main span.keyword {
  color      : black;
  font-style : italic;
  font-weight: bold;
}

body.fn div.main span.tip {
  color      : #228B22;
  font-weight: bold;
}

body.fn div.main span.conclusion {
  color      : red;
  font-weight: bold;
}

body.fn div.main span.code-inline {
  background-color: #F8F9FA;
  color           : #212529;
  font-family     : Fixed;
}

body.fn div.main span.code {
  background-color: #F8F9FA;
  color           : #212529;
  display         : block;
  font-family     : Fixed;
  margin-left     : 20px;
  margin-right    : 40px;
  margin-top      : 0px;
  padding         : 2px;
}

body.fn div.main span.code.start {
  margin-top: 10px;
}

body.fn div.main span.code.end {
  margin-bottom: 10px;
}

body.fn div.main span.code.oneline {
  margin-top: 10px;
  margin-bottom: 10px;
}
body.fn div.main span.code.i2 {
  padding-left: 20px;
}

body.fn div.main span.code.i4 {
  padding-left: 40px;
}

body.fn div.main span.code.i6 {
  padding-left: 60px;
}

body.fn div.main span.code.i8 {
  padding-left: 80px;
}

body.fn div.main span.cite {
  background-color: #E9ECEF;
  color           : #212529;
  display         : block;
  margin-bottom   : 5px;
  margin-top      : 5px;
  padding         : 5px;
}

body.fn div.main div.content h3 {
  color    : #495057;
  font-size: 1.4em;
}

body.fn div.main div.content p.error {
  font-weight: bold;
  text-align : center;
  width      : 100%;
}

body.fn div.main div.content p.error span.err1 {
  color      : red;
  display    : block;
  font-size  : 2.0em;
  padding    : 40px 0 0 0;
}

body.fn div.main div.content p.error span.err2 {
  color      : #495057;
  display    : block;
  font-size  : 1.6em;
  padding    : 20px 0 20px 0;
}

body.fn div.main a.arrow {
  background-color: inherit;
  border          : 0px;
  color           : #6C757D;
  margin          : 0px;
  text-decoration : none;
}

body.fn div.main a.external {
  background-color: inherit;
  border          : 0px;
  color           : #0000CD;
  font-weight     : bold;
  margin          : 0px;
  text-decoration : none;
}

body.fn div.main a.inline {
  background-color: inherit;
  border          : 0px;
  color           : #6C757D;
  margin          : 0px;
  text-decoration : none;
}

body.fn div.main a.inline:hover {
  color: red;
}

body.fn div.main p.download-link {
  margin-top: 20px;
  text-align: center;
  width     : 100%;
}

body.fn div.main p.download-link a {
  background-color: #F8F9FA;
  border          : 1px solid #6C757D;
  border-radius   : 5px;
  color           : #212529;
  display         : inline-block;
  font-size       : 1.4em;
  padding         : 5px 10px;
  text-decoration : none;
}

body.fn div.main p.download-link a:hover {
  border-color: red;
}

body.fn div.footer {
  color      : #495057;
  text-align: center;
}

body.fn div.footer div {
  display      : block;
  margin-bottom: 10px;
  text-align   : center;
}

body.fn div.footer div:first-of-type {
  padding-top: 5px;
}
body.fn div.footer div:last-of-type {
  padding-bottom: 5px;
}

body.fn div.footer a {
  color          : inherit;
  text-decoration: none;
}

body.fn div.footer a:hover {
  color      : red;
  font-weight: bold;
}

div.hamburger {
  background-color: #DEE2E6;
  box-shadow      : 4px 4px 4px #6C757D;
  display         : none;
  font-size       : 1.1em;
  height          : unset;
  padding-bottom  : 10px;
  padding-left    : 15px;
  padding-right   : 15px;
  padding-top     : 10px;
  text-align      : left;
  position        : absolute;
  right           : 0px;
  top             : 60px;
}

div.hamburger a {
  display        : block;
  color          : #495057;
  font-weight    : bold;
  margin-bottom  : 30px;
  text-decoration: none;
  width          : 100%;
}

div.hamburger a:hover {
  color: red;
}

div.hamburger a:last-of-type {
  margin-bottom: 0px;
}

label.hamburger {
  display  : block;
  height   : 32px;
  position : absolute;
  top      : 50%;
  right    : 15px;
  width    : 24px;
  transform: translateY(-50%);
}

label.hamburger:hover {
  cursor: pointer;
}

label.hamburger span {
  background      : DarkSlateGray;
  border-radius   : 2px;
  display         : block;
  height          : 4px;
  margin-top      : 6px;
  width           : 24px;
  transition      : 0.1s;
  transform-origin: center;
}

input#hamburgerInput {
  display: none;
}

input#hamburgerInput:checked + label.hamburger span:nth-child(1){
   transform: translateY(+8px) rotate(-45deg);
}

input#hamburgerInput:checked + label span:nth-child(2){
   opacity:0;
}

input#hamburgerInput:checked + label span:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}

input#hamburgerInput:checked ~ div.hamburger {
  display: block;
}