docs/beta/html/GreyboxGrammarFuzzer.html


<!-- A html document -->
<!-- 
with standard nbconvert css layout
with standard nbconvert input/output content
standard html tag wrapping
with mathjax loaded
with jupyter wigets
 caption and label elements according to ipub meta tags  
with fuzzingbook adaptations -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><title>Greybox Fuzzing with Grammars - The Fuzzing Book</title>
<link rel="me" href="https://mastodon.social/@TheFuzzingBook">

<style type="text/css">
    /*!
*
* Twitter Bootstrap
*
*/
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  .navbar {
    display: none;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../components/bootstrap/fonts/glyphicons-halflings-regular.eot');
  src: url('../components/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../components/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../components/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../components/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../components/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
  content: "\002a";
}
.glyphicon-plus:before {
  content: "\002b";
}
.glyphicon-euro:before,
.glyphicon-eur:before {
  content: "\20ac";
}
.glyphicon-minus:before {
  content: "\2212";
}
.glyphicon-cloud:before {
  content: "\2601";
}
.glyphicon-envelope:before {
  content: "\2709";
}
.glyphicon-pencil:before {
  content: "\270f";
}
.glyphicon-glass:before {
  content: "\e001";
}
.glyphicon-music:before {
  content: "\e002";
}
.glyphicon-search:before {
  content: "\e003";
}
.glyphicon-heart:before {
  content: "\e005";
}
.glyphicon-star:before {
  content: "\e006";
}
.glyphicon-star-empty:before {
  content: "\e007";
}
.glyphicon-user:before {
  content: "\e008";
}
.glyphicon-film:before {
  content: "\e009";
}
.glyphicon-th-large:before {
  content: "\e010";
}
.glyphicon-th:before {
  content: "\e011";
}
.glyphicon-th-list:before {
  content: "\e012";
}
.glyphicon-ok:before {
  content: "\e013";
}
.glyphicon-remove:before {
  content: "\e014";
}
.glyphicon-zoom-in:before {
  content: "\e015";
}
.glyphicon-zoom-out:before {
  content: "\e016";
}
.glyphicon-off:before {
  content: "\e017";
}
.glyphicon-signal:before {
  content: "\e018";
}
.glyphicon-cog:before {
  content: "\e019";
}
.glyphicon-trash:before {
  content: "\e020";
}
.glyphicon-home:before {
  content: "\e021";
}
.glyphicon-file:before {
  content: "\e022";
}
.glyphicon-time:before {
  content: "\e023";
}
.glyphicon-road:before {
  content: "\e024";
}
.glyphicon-download-alt:before {
  content: "\e025";
}
.glyphicon-download:before {
  content: "\e026";
}
.glyphicon-upload:before {
  content: "\e027";
}
.glyphicon-inbox:before {
  content: "\e028";
}
.glyphicon-play-circle:before {
  content: "\e029";
}
.glyphicon-repeat:before {
  content: "\e030";
}
.glyphicon-refresh:before {
  content: "\e031";
}
.glyphicon-list-alt:before {
  content: "\e032";
}
.glyphicon-lock:before {
  content: "\e033";
}
.glyphicon-flag:before {
  content: "\e034";
}
.glyphicon-headphones:before {
  content: "\e035";
}
.glyphicon-volume-off:before {
  content: "\e036";
}
.glyphicon-volume-down:before {
  content: "\e037";
}
.glyphicon-volume-up:before {
  content: "\e038";
}
.glyphicon-qrcode:before {
  content: "\e039";
}
.glyphicon-barcode:before {
  content: "\e040";
}
.glyphicon-tag:before {
  content: "\e041";
}
.glyphicon-tags:before {
  content: "\e042";
}
.glyphicon-book:before {
  content: "\e043";
}
.glyphicon-bookmark:before {
  content: "\e044";
}
.glyphicon-print:before {
  content: "\e045";
}
.glyphicon-camera:before {
  content: "\e046";
}
.glyphicon-font:before {
  content: "\e047";
}
.glyphicon-bold:before {
  content: "\e048";
}
.glyphicon-italic:before {
  content: "\e049";
}
.glyphicon-text-height:before {
  content: "\e050";
}
.glyphicon-text-width:before {
  content: "\e051";
}
.glyphicon-align-left:before {
  content: "\e052";
}
.glyphicon-align-center:before {
  content: "\e053";
}
.glyphicon-align-right:before {
  content: "\e054";
}
.glyphicon-align-justify:before {
  content: "\e055";
}
.glyphicon-list:before {
  content: "\e056";
}
.glyphicon-indent-left:before {
  content: "\e057";
}
.glyphicon-indent-right:before {
  content: "\e058";
}
.glyphicon-facetime-video:before {
  content: "\e059";
}
.glyphicon-picture:before {
  content: "\e060";
}
.glyphicon-map-marker:before {
  content: "\e062";
}
.glyphicon-adjust:before {
  content: "\e063";
}
.glyphicon-tint:before {
  content: "\e064";
}
.glyphicon-edit:before {
  content: "\e065";
}
.glyphicon-share:before {
  content: "\e066";
}
.glyphicon-check:before {
  content: "\e067";
}
.glyphicon-move:before {
  content: "\e068";
}
.glyphicon-step-backward:before {
  content: "\e069";
}
.glyphicon-fast-backward:before {
  content: "\e070";
}
.glyphicon-backward:before {
  content: "\e071";
}
.glyphicon-play:before {
  content: "\e072";
}
.glyphicon-pause:before {
  content: "\e073";
}
.glyphicon-stop:before {
  content: "\e074";
}
.glyphicon-forward:before {
  content: "\e075";
}
.glyphicon-fast-forward:before {
  content: "\e076";
}
.glyphicon-step-forward:before {
  content: "\e077";
}
.glyphicon-eject:before {
  content: "\e078";
}
.glyphicon-chevron-left:before {
  content: "\e079";
}
.glyphicon-chevron-right:before {
  content: "\e080";
}
.glyphicon-plus-sign:before {
  content: "\e081";
}
.glyphicon-minus-sign:before {
  content: "\e082";
}
.glyphicon-remove-sign:before {
  content: "\e083";
}
.glyphicon-ok-sign:before {
  content: "\e084";
}
.glyphicon-question-sign:before {
  content: "\e085";
}
.glyphicon-info-sign:before {
  content: "\e086";
}
.glyphicon-screenshot:before {
  content: "\e087";
}
.glyphicon-remove-circle:before {
  content: "\e088";
}
.glyphicon-ok-circle:before {
  content: "\e089";
}
.glyphicon-ban-circle:before {
  content: "\e090";
}
.glyphicon-arrow-left:before {
  content: "\e091";
}
.glyphicon-arrow-right:before {
  content: "\e092";
}
.glyphicon-arrow-up:before {
  content: "\e093";
}
.glyphicon-arrow-down:before {
  content: "\e094";
}
.glyphicon-share-alt:before {
  content: "\e095";
}
.glyphicon-resize-full:before {
  content: "\e096";
}
.glyphicon-resize-small:before {
  content: "\e097";
}
.glyphicon-exclamation-sign:before {
  content: "\e101";
}
.glyphicon-gift:before {
  content: "\e102";
}
.glyphicon-leaf:before {
  content: "\e103";
}
.glyphicon-fire:before {
  content: "\e104";
}
.glyphicon-eye-open:before {
  content: "\e105";
}
.glyphicon-eye-close:before {
  content: "\e106";
}
.glyphicon-warning-sign:before {
  content: "\e107";
}
.glyphicon-plane:before {
  content: "\e108";
}
.glyphicon-calendar:before {
  content: "\e109";
}
.glyphicon-random:before {
  content: "\e110";
}
.glyphicon-comment:before {
  content: "\e111";
}
.glyphicon-magnet:before {
  content: "\e112";
}
.glyphicon-chevron-up:before {
  content: "\e113";
}
.glyphicon-chevron-down:before {
  content: "\e114";
}
.glyphicon-retweet:before {
  content: "\e115";
}
.glyphicon-shopping-cart:before {
  content: "\e116";
}
.glyphicon-folder-close:before {
  content: "\e117";
}
.glyphicon-folder-open:before {
  content: "\e118";
}
.glyphicon-resize-vertical:before {
  content: "\e119";
}
.glyphicon-resize-horizontal:before {
  content: "\e120";
}
.glyphicon-hdd:before {
  content: "\e121";
}
.glyphicon-bullhorn:before {
  content: "\e122";
}
.glyphicon-bell:before {
  content: "\e123";
}
.glyphicon-certificate:before {
  content: "\e124";
}
.glyphicon-thumbs-up:before {
  content: "\e125";
}
.glyphicon-thumbs-down:before {
  content: "\e126";
}
.glyphicon-hand-right:before {
  content: "\e127";
}
.glyphicon-hand-left:before {
  content: "\e128";
}
.glyphicon-hand-up:before {
  content: "\e129";
}
.glyphicon-hand-down:before {
  content: "\e130";
}
.glyphicon-circle-arrow-right:before {
  content: "\e131";
}
.glyphicon-circle-arrow-left:before {
  content: "\e132";
}
.glyphicon-circle-arrow-up:before {
  content: "\e133";
}
.glyphicon-circle-arrow-down:before {
  content: "\e134";
}
.glyphicon-globe:before {
  content: "\e135";
}
.glyphicon-wrench:before {
  content: "\e136";
}
.glyphicon-tasks:before {
  content: "\e137";
}
.glyphicon-filter:before {
  content: "\e138";
}
.glyphicon-briefcase:before {
  content: "\e139";
}
.glyphicon-fullscreen:before {
  content: "\e140";
}
.glyphicon-dashboard:before {
  content: "\e141";
}
.glyphicon-paperclip:before {
  content: "\e142";
}
.glyphicon-heart-empty:before {
  content: "\e143";
}
.glyphicon-link:before {
  content: "\e144";
}
.glyphicon-phone:before {
  content: "\e145";
}
.glyphicon-pushpin:before {
  content: "\e146";
}
.glyphicon-usd:before {
  content: "\e148";
}
.glyphicon-gbp:before {
  content: "\e149";
}
.glyphicon-sort:before {
  content: "\e150";
}
.glyphicon-sort-by-alphabet:before {
  content: "\e151";
}
.glyphicon-sort-by-alphabet-alt:before {
  content: "\e152";
}
.glyphicon-sort-by-order:before {
  content: "\e153";
}
.glyphicon-sort-by-order-alt:before {
  content: "\e154";
}
.glyphicon-sort-by-attributes:before {
  content: "\e155";
}
.glyphicon-sort-by-attributes-alt:before {
  content: "\e156";
}
.glyphicon-unchecked:before {
  content: "\e157";
}
.glyphicon-expand:before {
  content: "\e158";
}
.glyphicon-collapse-down:before {
  content: "\e159";
}
.glyphicon-collapse-up:before {
  content: "\e160";
}
.glyphicon-log-in:before {
  content: "\e161";
}
.glyphicon-flash:before {
  content: "\e162";
}
.glyphicon-log-out:before {
  content: "\e163";
}
.glyphicon-new-window:before {
  content: "\e164";
}
.glyphicon-record:before {
  content: "\e165";
}
.glyphicon-save:before {
  content: "\e166";
}
.glyphicon-open:before {
  content: "\e167";
}
.glyphicon-saved:before {
  content: "\e168";
}
.glyphicon-import:before {
  content: "\e169";
}
.glyphicon-export:before {
  content: "\e170";
}
.glyphicon-send:before {
  content: "\e171";
}
.glyphicon-floppy-disk:before {
  content: "\e172";
}
.glyphicon-floppy-saved:before {
  content: "\e173";
}
.glyphicon-floppy-remove:before {
  content: "\e174";
}
.glyphicon-floppy-save:before {
  content: "\e175";
}
.glyphicon-floppy-open:before {
  content: "\e176";
}
.glyphicon-credit-card:before {
  content: "\e177";
}
.glyphicon-transfer:before {
  content: "\e178";
}
.glyphicon-cutlery:before {
  content: "\e179";
}
.glyphicon-header:before {
  content: "\e180";
}
.glyphicon-compressed:before {
  content: "\e181";
}
.glyphicon-earphone:before {
  content: "\e182";
}
.glyphicon-phone-alt:before {
  content: "\e183";
}
.glyphicon-tower:before {
  content: "\e184";
}
.glyphicon-stats:before {
  content: "\e185";
}
.glyphicon-sd-video:before {
  content: "\e186";
}
.glyphicon-hd-video:before {
  content: "\e187";
}
.glyphicon-subtitles:before {
  content: "\e188";
}
.glyphicon-sound-stereo:before {
  content: "\e189";
}
.glyphicon-sound-dolby:before {
  content: "\e190";
}
.glyphicon-sound-5-1:before {
  content: "\e191";
}
.glyphicon-sound-6-1:before {
  content: "\e192";
}
.glyphicon-sound-7-1:before {
  content: "\e193";
}
.glyphicon-copyright-mark:before {
  content: "\e194";
}
.glyphicon-registration-mark:before {
  content: "\e195";
}
.glyphicon-cloud-download:before {
  content: "\e197";
}
.glyphicon-cloud-upload:before {
  content: "\e198";
}
.glyphicon-tree-conifer:before {
  content: "\e199";
}
.glyphicon-tree-deciduous:before {
  content: "\e200";
}
.glyphicon-cd:before {
  content: "\e201";
}
.glyphicon-save-file:before {
  content: "\e202";
}
.glyphicon-open-file:before {
  content: "\e203";
}
.glyphicon-level-up:before {
  content: "\e204";
}
.glyphicon-copy:before {
  content: "\e205";
}
.glyphicon-paste:before {
  content: "\e206";
}
.glyphicon-alert:before {
  content: "\e209";
}
.glyphicon-equalizer:before {
  content: "\e210";
}
.glyphicon-king:before {
  content: "\e211";
}
.glyphicon-queen:before {
  content: "\e212";
}
.glyphicon-pawn:before {
  content: "\e213";
}
.glyphicon-bishop:before {
  content: "\e214";
}
.glyphicon-knight:before {
  content: "\e215";
}
.glyphicon-baby-formula:before {
  content: "\e216";
}
.glyphicon-tent:before {
  content: "\26fa";
}
.glyphicon-blackboard:before {
  content: "\e218";
}
.glyphicon-bed:before {
  content: "\e219";
}
.glyphicon-apple:before {
  content: "\f8ff";
}
.glyphicon-erase:before {
  content: "\e221";
}
.glyphicon-hourglass:before {
  content: "\231b";
}
.glyphicon-lamp:before {
  content: "\e223";
}
.glyphicon-duplicate:before {
  content: "\e224";
}
.glyphicon-piggy-bank:before {
  content: "\e225";
}
.glyphicon-scissors:before {
  content: "\e226";
}
.glyphicon-bitcoin:before {
  content: "\e227";
}
.glyphicon-btc:before {
  content: "\e227";
}
.glyphicon-xbt:before {
  content: "\e227";
}
.glyphicon-yen:before {
  content: "\00a5";
}
.glyphicon-jpy:before {
  content: "\00a5";
}
.glyphicon-ruble:before {
  content: "\20bd";
}
.glyphicon-rub:before {
  content: "\20bd";
}
.glyphicon-scale:before {
  content: "\e230";
}
.glyphicon-ice-lolly:before {
  content: "\e231";
}
.glyphicon-ice-lolly-tasted:before {
  content: "\e232";
}
.glyphicon-education:before {
  content: "\e233";
}
.glyphicon-option-horizontal:before {
  content: "\e234";
}
.glyphicon-option-vertical:before {
  content: "\e235";
}
.glyphicon-menu-hamburger:before {
  content: "\e236";
}
.glyphicon-modal-window:before {
  content: "\e237";
}
.glyphicon-oil:before {
  content: "\e238";
}
.glyphicon-grain:before {
  content: "\e239";
}
.glyphicon-sunglasses:before {
  content: "\e240";
}
.glyphicon-text-size:before {
  content: "\e241";
}
.glyphicon-text-color:before {
  content: "\e242";
}
.glyphicon-text-background:before {
  content: "\e243";
}
.glyphicon-object-align-top:before {
  content: "\e244";
}
.glyphicon-object-align-bottom:before {
  content: "\e245";
}
.glyphicon-object-align-horizontal:before {
  content: "\e246";
}
.glyphicon-object-align-left:before {
  content: "\e247";
}
.glyphicon-object-align-vertical:before {
  content: "\e248";
}
.glyphicon-object-align-right:before {
  content: "\e249";
}
.glyphicon-triangle-right:before {
  content: "\e250";
}
.glyphicon-triangle-left:before {
  content: "\e251";
}
.glyphicon-triangle-bottom:before {
  content: "\e252";
}
.glyphicon-triangle-top:before {
  content: "\e253";
}
.glyphicon-console:before {
  content: "\e254";
}
.glyphicon-superscript:before {
  content: "\e255";
}
.glyphicon-subscript:before {
  content: "\e256";
}
.glyphicon-menu-left:before {
  content: "\e257";
}
.glyphicon-menu-right:before {
  content: "\e258";
}
.glyphicon-menu-down:before {
  content: "\e259";
}
.glyphicon-menu-up:before {
  content: "\e260";
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.42857143;
  color: #000;
  background-color: #fff;
}
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
a {
  color: #337ab7;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
}
a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
figure {
  margin: 0;
}
img {
  vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-rounded {
  border-radius: 3px;
}
.img-thumbnail {
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.img-circle {
  border-radius: 50%;
}
hr {
  margin-top: 18px;
  margin-bottom: 18px;
  border: 0;
  border-top: 1px solid #eeeeee;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}
[role="button"] {
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
  font-weight: normal;
  line-height: 1;
  color: #777777;
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  margin-top: 18px;
  margin-bottom: 9px;
}
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
  font-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 9px;
  margin-bottom: 9px;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
  font-size: 75%;
}
h1,
.h1 {
  font-size: 33px;
}
h2,
.h2 {
  font-size: 27px;
}
h3,
.h3 {
  font-size: 23px;
}
h4,
.h4 {
  font-size: 17px;
}
h5,
.h5 {
  font-size: 13px;
}
h6,
.h6 {
  font-size: 12px;
}
p {
  margin: 0 0 9px;
}
.lead {
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .lead {
    font-size: 19.5px;
  }
}
small,
.small {
  font-size: 92%;
}
mark,
.mark {
  background-color: #fcf8e3;
  padding: .2em;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.text-nowrap {
  white-space: nowrap;
}
.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
.text-muted {
  color: #777777;
}
.text-primary {
  color: #337ab7;
}
a.text-primary:hover,
a.text-primary:focus {
  color: #286090;
}
.text-success {
  color: #3c763d;
}
a.text-success:hover,
a.text-success:focus {
  color: #2b542c;
}
.text-info {
  color: #31708f;
}
a.text-info:hover,
a.text-info:focus {
  color: #245269;
}
.text-warning {
  color: #8a6d3b;
}
a.text-warning:hover,
a.text-warning:focus {
  color: #66512c;
}
.text-danger {
  color: #a94442;
}
a.text-danger:hover,
a.text-danger:focus {
  color: #843534;
}
.bg-primary {
  color: #fff;
  background-color: #337ab7;
}
a.bg-primary:hover,
a.bg-primary:focus {
  background-color: #286090;
}
.bg-success {
  background-color: #dff0d8;
}
a.bg-success:hover,
a.bg-success:focus {
  background-color: #c1e2b3;
}
.bg-info {
  background-color: #d9edf7;
}
a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee;
}
.bg-warning {
  background-color: #fcf8e3;
}
a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5;
}
.bg-danger {
  background-color: #f2dede;
}
a.bg-danger:hover,
a.bg-danger:focus {
  background-color: #e4b9b9;
}
.page-header {
  padding-bottom: 8px;
  margin: 36px 0 18px;
  border-bottom: 1px solid #eeeeee;
}
ul,
ol {
  margin-top: 0;
  margin-bottom: 9px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.list-inline {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
}
.list-inline > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
dl {
  margin-top: 0;
  margin-bottom: 18px;
}
dt,
dd {
  line-height: 1.42857143;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}
@media (min-width: 541px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
}
abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #777777;
}
.initialism {
  font-size: 90%;
  text-transform: uppercase;
}
blockquote {
  padding: 9px 18px;
  margin: 0 0 18px;
  font-size: inherit;
  border-left: 5px solid #eeeeee;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
  margin-bottom: 0;
}
blockquote footer,
blockquote small,
blockquote .small {
  display: block;
  font-size: 80%;
  line-height: 1.42857143;
  color: #777777;
}
blockquote footer:before,
blockquote small:before,
blockquote .small:before {
  content: '\2014 \00A0';
}
.blockquote-reverse,
blockquote.pull-right {
  padding-right: 15px;
  padding-left: 0;
  border-right: 5px solid #eeeeee;
  border-left: 0;
  text-align: right;
}
.blockquote-reverse footer:before,
blockquote.pull-right footer:before,
.blockquote-reverse small:before,
blockquote.pull-right small:before,
.blockquote-reverse .small:before,
blockquote.pull-right .small:before {
  content: '';
}
.blockquote-reverse footer:after,
blockquote.pull-right footer:after,
.blockquote-reverse small:after,
blockquote.pull-right small:after,
.blockquote-reverse .small:after,
blockquote.pull-right .small:after {
  content: '\00A0 \2014';
}
address {
  margin-bottom: 18px;
  font-style: normal;
  line-height: 1.42857143;
}
code,
kbd,
pre,
samp {
  font-family: monospace;
}
code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 2px;
}
kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: #888;
  background-color: transparent;
  border-radius: 1px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: bold;
  box-shadow: none;
}
pre {
  display: block;
  padding: 8.5px;
  margin: 0 0 9px;
  font-size: 12px;
  line-height: 1.42857143;
  word-break: break-all;
  word-wrap: break-word;
  color: #333333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 2px;
}
pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0;
}
.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 0px;
  padding-right: 0px;
}
@media (min-width: 768px) {
  .container {
    width: 768px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 940px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 0px;
  padding-right: 0px;
}
.row {
  margin-left: 0px;
  margin-right: 0px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 0px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: auto;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}
.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0%;
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
  .col-lg-pull-12 {
    right: 100%;
  }
  .col-lg-pull-11 {
    right: 91.66666667%;
  }
  .col-lg-pull-10 {
    right: 83.33333333%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-8 {
    right: 66.66666667%;
  }
  .col-lg-pull-7 {
    right: 58.33333333%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-5 {
    right: 41.66666667%;
  }
  .col-lg-pull-4 {
    right: 33.33333333%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-2 {
    right: 16.66666667%;
  }
  .col-lg-pull-1 {
    right: 8.33333333%;
  }
  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-push-12 {
    left: 100%;
  }
  .col-lg-push-11 {
    left: 91.66666667%;
  }
  .col-lg-push-10 {
    left: 83.33333333%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-8 {
    left: 66.66666667%;
  }
  .col-lg-push-7 {
    left: 58.33333333%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-5 {
    left: 41.66666667%;
  }
  .col-lg-push-4 {
    left: 33.33333333%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-2 {
    left: 16.66666667%;
  }
  .col-lg-push-1 {
    left: 8.33333333%;
  }
  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0%;
  }
}
table {
  background-color: transparent;
}
caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777777;
  text-align: left;
}
th {
  text-align: left;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 18px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  float: none;
  display: table-column;
}
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  float: none;
  display: table-cell;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
  background-color: #e8e8e8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
  background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
  background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
  background-color: #c4e3f3;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
  background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
  background-color: #f2dede;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc;
}
.table-responsive {
  overflow-x: auto;
  min-height: 0.01%;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 13.5px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 18px;
  font-size: 19.5px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="search"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}
input[type="file"] {
  display: block;
}
input[type="range"] {
  display: block;
  width: 100%;
}
select[multiple],
select[size] {
  height: auto;
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
output {
  display: block;
  padding-top: 7px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #555555;
}
.form-control {
  display: block;
  width: 100%;
  height: 32px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.form-control::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}
.form-control::-ms-expand {
  border: 0;
  background-color: transparent;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #eeeeee;
  opacity: 1;
}
.form-control[disabled],
fieldset[disabled] .form-control {
  cursor: not-allowed;
}
textarea.form-control {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"].form-control,
  input[type="time"].form-control,
  input[type="datetime-local"].form-control,
  input[type="month"].form-control {
    line-height: 32px;
  }
  input[type="date"].input-sm,
  input[type="time"].input-sm,
  input[type="datetime-local"].input-sm,
  input[type="month"].input-sm,
  .input-group-sm input[type="date"],
  .input-group-sm input[type="time"],
  .input-group-sm input[type="datetime-local"],
  .input-group-sm input[type="month"] {
    line-height: 30px;
  }
  input[type="date"].input-lg,
  input[type="time"].input-lg,
  input[type="datetime-local"].input-lg,
  input[type="month"].input-lg,
  .input-group-lg input[type="date"],
  .input-group-lg input[type="time"],
  .input-group-lg input[type="datetime-local"],
  .input-group-lg input[type="month"] {
    line-height: 45px;
  }
}
.form-group {
  margin-bottom: 15px;
}
.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}
.radio label,
.checkbox label {
  min-height: 18px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-left: -20px;
  margin-top: 4px \9;
}
.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px;
}
.radio-inline,
.checkbox-inline {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
  cursor: not-allowed;
}
.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
  cursor: not-allowed;
}
.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
  cursor: not-allowed;
}
.form-control-static {
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
  min-height: 31px;
}
.form-control-static.input-lg,
.form-control-static.input-sm {
  padding-left: 0;
  padding-right: 0;
}
.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 1px;
}
select.input-sm {
  height: 30px;
  line-height: 30px;
}
textarea.input-sm,
select[multiple].input-sm {
  height: auto;
}
.form-group-sm .form-control {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 1px;
}
.form-group-sm select.form-control {
  height: 30px;
  line-height: 30px;
}
.form-group-sm textarea.form-control,
.form-group-sm select[multiple].form-control {
  height: auto;
}
.form-group-sm .form-control-static {
  height: 30px;
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.input-lg {
  height: 45px;
  padding: 10px 16px;
  font-size: 17px;
  line-height: 1.3333333;
  border-radius: 3px;
}
select.input-lg {
  height: 45px;
  line-height: 45px;
}
textarea.input-lg,
select[multiple].input-lg {
  height: auto;
}
.form-group-lg .form-control {
  height: 45px;
  padding: 10px 16px;
  font-size: 17px;
  line-height: 1.3333333;
  border-radius: 3px;
}
.form-group-lg select.form-control {
  height: 45px;
  line-height: 45px;
}
.form-group-lg textarea.form-control,
.form-group-lg select[multiple].form-control {
  height: auto;
}
.form-group-lg .form-control-static {
  height: 45px;
  min-height: 35px;
  padding: 11px 16px;
  font-size: 17px;
  line-height: 1.3333333;
}
.has-feedback {
  position: relative;
}
.has-feedback .form-control {
  padding-right: 40px;
}
.form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  pointer-events: none;
}
.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
  width: 45px;
  height: 45px;
  line-height: 45px;
}
.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
  color: #3c763d;
}
.has-success .form-control {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .form-control:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.has-success .input-group-addon {
  color: #3c763d;
  border-color: #3c763d;
  background-color: #dff0d8;
}
.has-success .form-control-feedback {
  color: #3c763d;
}
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
  color: #8a6d3b;
}
.has-warning .form-control {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .form-control:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-warning .input-group-addon {
  color: #8a6d3b;
  border-color: #8a6d3b;
  background-color: #fcf8e3;
}
.has-warning .form-control-feedback {
  color: #8a6d3b;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: #a94442;
}
.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  border-color: #a94442;
  background-color: #f2dede;
}
.has-error .form-control-feedback {
  color: #a94442;
}
.has-feedback label ~ .form-control-feedback {
  top: 23px;
}
.has-feedback label.sr-only ~ .form-control-feedback {
  top: 0;
}
.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #404040;
}
@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-static {
    display: inline-block;
  }
  .form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .form-inline .input-group .input-group-addon,
  .form-inline .input-group .input-group-btn,
  .form-inline .input-group .form-control {
    width: auto;
  }
  .form-inline .input-group > .form-control {
    width: 100%;
  }
  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio,
  .form-inline .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio label,
  .form-inline .checkbox label {
    padding-left: 0;
  }
  .form-inline .radio input[type="radio"],
  .form-inline .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 7px;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
  min-height: 25px;
}
.form-horizontal .form-group {
  margin-left: 0px;
  margin-right: 0px;
}
@media (min-width: 768px) {
  .form-horizontal .control-label {
    text-align: right;
    margin-bottom: 0;
    padding-top: 7px;
  }
}
.form-horizontal .has-feedback .form-control-feedback {
  right: 0px;
}
@media (min-width: 768px) {
  .form-horizontal .form-group-lg .control-label {
    padding-top: 11px;
    font-size: 17px;
  }
}
@media (min-width: 768px) {
  .form-horizontal .form-group-sm .control-label {
    padding-top: 6px;
    font-size: 12px;
  }
}
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.42857143;
  border-radius: 2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #333;
  text-decoration: none;
}
.btn:active,
.btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}
a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:focus,
.btn-default.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
  background-color: #fff;
  border-color: #ccc;
}
.btn-default .badge {
  color: #fff;
  background-color: #333;
}
.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
.btn-primary:focus,
.btn-primary.focus {
  color: #fff;
  background-color: #286090;
  border-color: #122b40;
}
.btn-primary:hover {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  color: #fff;
  background-color: #204d74;
  border-color: #122b40;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  background-color: #337ab7;
  border-color: #2e6da4;
}
.btn-primary .badge {
  color: #337ab7;
  background-color: #fff;
}
.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-success:focus,
.btn-success.focus {
  color: #fff;
  background-color: #449d44;
  border-color: #255625;
}
.btn-success:hover {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}
.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
  color: #fff;
  background-color: #398439;
  border-color: #255625;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus {
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-success .badge {
  color: #5cb85c;
  background-color: #fff;
}
.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info:focus,
.btn-info.focus {
  color: #fff;
  background-color: #31b0d5;
  border-color: #1b6d85;
}
.btn-info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
  color: #fff;
  background-color: #269abc;
  border-color: #1b6d85;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info .badge {
  color: #5bc0de;
  background-color: #fff;
}
.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn-warning:focus,
.btn-warning.focus {
  color: #fff;
  background-color: #ec971f;
  border-color: #985f0d;
}
.btn-warning:hover {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}
.btn-warning:active:hover,
.btn-warning.active:hover,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning:active:focus,
.btn-warning.active:focus,
.open > .dropdown-toggle.btn-warning:focus,
.btn-warning:active.focus,
.btn-warning.active.focus,
.open > .dropdown-toggle.btn-warning.focus {
  color: #fff;
  background-color: #d58512;
  border-color: #985f0d;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background-image: none;
}
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled.focus,
.btn-warning[disabled].focus,
fieldset[disabled] .btn-warning.focus {
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn-warning .badge {
  color: #f0ad4e;
  background-color: #fff;
}
.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
.btn-danger:focus,
.btn-danger.focus {
  color: #fff;
  background-color: #c9302c;
  border-color: #761c19;
}
.btn-danger:hover {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}
.btn-danger:active:hover,
.btn-danger.active:hover,
.open > .dropdown-toggle.btn-danger:hover,
.btn-danger:active:focus,
.btn-danger.active:focus,
.open > .dropdown-toggle.btn-danger:focus,
.btn-danger:active.focus,
.btn-danger.active.focus,
.open > .dropdown-toggle.btn-danger.focus {
  color: #fff;
  background-color: #ac2925;
  border-color: #761c19;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  background-image: none;
}
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus {
  background-color: #d9534f;
  border-color: #d43f3a;
}
.btn-danger .badge {
  color: #d9534f;
  background-color: #fff;
}
.btn-link {
  color: #337ab7;
  font-weight: normal;
  border-radius: 0;
}
.btn-link,
.btn-link:active,
.btn-link.active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
  border-color: transparent;
}
.btn-link:hover,
.btn-link:focus {
  color: #23527c;
  text-decoration: underline;
  background-color: transparent;
}
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
  color: #777777;
  text-decoration: none;
}
.btn-lg,
.btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 17px;
  line-height: 1.3333333;
  border-radius: 3px;
}
.btn-sm,
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 1px;
}
.btn-xs,
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 1px;
}
.btn-block {
  display: block;
  width: 100%;
}
.btn-block + .btn-block {
  margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}
.collapse {
  display: none;
}
.collapse.in {
  display: block;
}
tr.collapse.in {
  display: table-row;
}
tbody.collapse.in {
  display: table-row-group;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.dropup,
.dropdown {
  position: relative;
}
.dropdown-toggle:focus {
  outline: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 13px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 8px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  background-color: #337ab7;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777777;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}
.dropdown-menu-right {
  left: auto;
  right: 0;
}
.dropdown-menu-left {
  left: 0;
  right: auto;
}
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777777;
  white-space: nowrap;
}
.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 990;
}
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px dashed;
  border-bottom: 4px solid \9;
  content: "";
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 2px;
}
@media (min-width: 541px) {
  .navbar-right .dropdown-menu {
    left: auto;
    right: 0;
  }
  .navbar-right .dropdown-menu-left {
    left: 0;
    right: auto;
  }
}
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
  z-index: 2;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
  margin-left: -1px;
}
.btn-toolbar {
  margin-left: -5px;
}
.btn-toolbar .btn,
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
  float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
  margin-left: 5px;
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
}
.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn .caret {
  margin-left: 0;
}
.btn-lg .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}
.dropup .btn-lg .caret {
  border-width: 0 5px 5px;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
  float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
  float: none;
  display: table-cell;
  width: 1%;
}
.btn-group-justified > .btn-group .btn {
  width: 100%;
}
.btn-group-justified > .btn-group .dropdown-menu {
  left: auto;
}
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group[class*="col-"] {
  float: none;
  padding-left: 0;
  padding-right: 0;
}
.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}
.input-group .form-control:focus {
  z-index: 3;
}
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  height: 45px;
  padding: 10px 16px;
  font-size: 17px;
  line-height: 1.3333333;
  border-radius: 3px;
}
select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
  height: 45px;
  line-height: 45px;
}
textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn,
select[multiple].input-group-lg > .form-control,
select[multiple].input-group-lg > .input-group-addon,
select[multiple].input-group-lg > .input-group-btn > .btn {
  height: auto;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 1px;
}
select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn {
  height: 30px;
  line-height: 30px;
}
textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn,
select[multiple].input-group-sm > .form-control,
select[multiple].input-group-sm > .input-group-addon,
select[multiple].input-group-sm > .input-group-btn > .btn {
  height: auto;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}
.input-group-addon {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: normal;
  line-height: 1;
  color: #555555;
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #ccc;
  border-radius: 2px;
}
.input-group-addon.input-sm {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 1px;
}
.input-group-addon.input-lg {
  padding: 10px 16px;
  font-size: 17px;
  border-radius: 3px;
}
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
  margin-top: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group-addon:first-child {
  border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.input-group-addon:last-child {
  border-left: 0;
}
.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}
.input-group-btn > .btn {
  position: relative;
}
.input-group-btn > .btn + .btn {
  margin-left: -1px;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:focus,
.input-group-btn > .btn:active {
  z-index: 2;
}
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {
  margin-right: -1px;
}
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
  z-index: 2;
  margin-left: -1px;
}
.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}
.nav > li.disabled > a {
  color: #777777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777777;
  text-decoration: none;
  background-color: transparent;
  cursor: not-allowed;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #eeeeee;
  border-color: #337ab7;
}
.nav .nav-divider {
  height: 1px;
  margin: 8px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav > li > a > img {
  max-width: none;
}
.nav-tabs {
  border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 2px 2px 0 0;
}
.nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #ddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555555;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  cursor: default;
}
.nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}
.nav-tabs.nav-justified > li {
  float: none;
}
.nav-tabs.nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 2px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border: 1px solid #ddd;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 2px 2px 0 0;
  }
  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff;
  }
}
.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 2px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #337ab7;
}
.nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}
.nav-justified {
  width: 100%;
}
.nav-justified > li {
  float: none;
}
.nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}
.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs-justified {
  border-bottom: 0;
}
.nav-tabs-justified > li > a {
  margin-right: 0;
  border-radius: 2px;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
  border: 1px solid #ddd;
}
@media (min-width: 768px) {
  .nav-tabs-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 2px 2px 0 0;
  }
  .nav-tabs-justified > .active > a,
  .nav-tabs-justified > .active > a:hover,
  .nav-tabs-justified > .active > a:focus {
    border-bottom-color: #fff;
  }
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.navbar {
  position: relative;
  min-height: 30px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
@media (min-width: 541px) {
  .navbar {
    border-radius: 2px;
  }
}
@media (min-width: 541px) {
  .navbar-header {
    float: left;
  }
}
.navbar-collapse {
  overflow-x: visible;
  padding-right: 0px;
  padding-left: 0px;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch;
}
.navbar-collapse.in {
  overflow-y: auto;
}
@media (min-width: 541px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
  }
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: 340px;
}
@media (max-device-width: 540px) and (orientation: landscape) {
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: 200px;
  }
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
  margin-right: 0px;
  margin-left: 0px;
}
@media (min-width: 541px) {
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}
.navbar-static-top {
  z-index: 1000;
  border-width: 0 0 1px;
}
@media (min-width: 541px) {
  .navbar-static-top {
    border-radius: 0;
  }
}
.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}
@media (min-width: 541px) {
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    border-radius: 0;
  }
}
.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}
.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0;
  border-width: 1px 0 0;
}
.navbar-brand {
  float: left;
  padding: 6px 0px;
  font-size: 17px;
  line-height: 18px;
  height: 30px;
}
.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}
.navbar-brand > img {
  display: block;
}
@media (min-width: 541px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: 0px;
  }
}
.navbar-toggle {
  position: relative;
  float: right;
  margin-right: 0px;
  padding: 9px 10px;
  margin-top: -2px;
  margin-bottom: -2px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 2px;
}
.navbar-toggle:focus {
  outline: 0;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}
@media (min-width: 541px) {
  .navbar-toggle {
    display: none;
  }
}
.navbar-nav {
  margin: 3px 0px;
}
.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 18px;
}
@media (max-width: 540px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 18px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
@media (min-width: 541px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
.navbar-form {
  margin-left: 0px;
  margin-right: 0px;
  padding: 10px 0px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-top: -1px;
  margin-bottom: -1px;
}
@media (min-width: 768px) {
  .navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .navbar-form .form-control-static {
    display: inline-block;
  }
  .navbar-form .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .navbar-form .input-group .input-group-addon,
  .navbar-form .input-group .input-group-btn,
  .navbar-form .input-group .form-control {
    width: auto;
  }
  .navbar-form .input-group > .form-control {
    width: 100%;
  }
  .navbar-form .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .radio,
  .navbar-form .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .radio label,
  .navbar-form .checkbox label {
    padding-left: 0;
  }
  .navbar-form .radio input[type="radio"],
  .navbar-form .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }
  .navbar-form .has-feedback .form-control-feedback {
    top: 0;
  }
}
@media (max-width: 540px) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
  .navbar-form .form-group:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 541px) {
  .navbar-form {
    width: auto;
    border: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  margin-bottom: 0;
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.navbar-btn {
  margin-top: -1px;
  margin-bottom: -1px;
}
.navbar-btn.btn-sm {
  margin-top: 0px;
  margin-bottom: 0px;
}
.navbar-btn.btn-xs {
  margin-top: 4px;
  margin-bottom: 4px;
}
.navbar-text {
  margin-top: 6px;
  margin-bottom: 6px;
}
@media (min-width: 541px) {
  .navbar-text {
    float: left;
    margin-left: 0px;
    margin-right: 0px;
  }
}
@media (min-width: 541px) {
  .navbar-left {
    float: left !important;
    float: left;
  }
  .navbar-right {
    float: right !important;
    float: right;
    margin-right: 0px;
  }
  .navbar-right ~ .navbar-right {
    margin-right: 0;
  }
}
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.navbar-default .navbar-brand {
  color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}
.navbar-default .navbar-text {
  color: #777;
}
.navbar-default .navbar-nav > li > a {
  color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333;
  background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}
.navbar-default .navbar-toggle {
  border-color: #ddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #888;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: #e7e7e7;
  color: #555;
}
@media (max-width: 540px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}
.navbar-default .navbar-link {
  color: #777;
}
.navbar-default .navbar-link:hover {
  color: #333;
}
.navbar-default .btn-link {
  color: #777;
}
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
  color: #333;
}
.navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus {
  color: #ccc;
}
.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}
.navbar-inverse .navbar-brand {
  color: #9d9d9d;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-inverse .navbar-text {
  color: #9d9d9d;
}
.navbar-inverse .navbar-nav > li > a {
  color: #9d9d9d;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #080808;
}
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
  color: #444;
  background-color: transparent;
}
.navbar-inverse .navbar-toggle {
  border-color: #333;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #333;
}
.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #fff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #101010;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  background-color: #080808;
  color: #fff;
}
@media (max-width: 540px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #9d9d9d;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444;
    background-color: transparent;
  }
}
.navbar-inverse .navbar-link {
  color: #9d9d9d;
}
.navbar-inverse .navbar-link:hover {
  color: #fff;
}
.navbar-inverse .btn-link {
  color: #9d9d9d;
}
.navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus {
  color: #fff;
}
.navbar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link[disabled]:focus,
fieldset[disabled] .navbar-inverse .btn-link:focus {
  color: #444;
}
.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 18px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 2px;
}
.breadcrumb > li {
  display: inline-block;
}
.breadcrumb > li + li:before {
  content: "/\00a0";
  padding: 0 5px;
  color: #5e5e5e;
}
.breadcrumb > .active {
  color: #777777;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 18px 0;
  border-radius: 2px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #337ab7;
  background-color: #fff;
  border: 1px solid #ddd;
  margin-left: -1px;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #23527c;
  background-color: #eeeeee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
  cursor: default;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777777;
  background-color: #fff;
  border-color: #ddd;
  cursor: not-allowed;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 17px;
  line-height: 1.3333333;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-bottom-left-radius: 1px;
  border-top-left-radius: 1px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-bottom-right-radius: 1px;
  border-top-right-radius: 1px;
}
.pager {
  padding-left: 0;
  margin: 18px 0;
  list-style: none;
  text-align: center;
}
.pager li {
  display: inline;
}
.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
}
.pager li > a:hover,
.pager li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}
.pager .next > a,
.pager .next > span {
  float: right;
}
.pager .previous > a,
.pager .previous > span {
  float: left;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #777777;
  background-color: #fff;
  cursor: not-allowed;
}
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}
a.label:hover,
a.label:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.label:empty {
  display: none;
}
.btn .label {
  position: relative;
  top: -1px;
}
.label-default {
  background-color: #777777;
}
.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #5e5e5e;
}
.label-primary {
  background-color: #337ab7;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #286090;
}
.label-success {
  background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #449d44;
}
.label-info {
  background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #31b0d5;
}
.label-warning {
  background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #ec971f;
}
.label-danger {
  background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #c9302c;
}
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  background-color: #777777;
  border-radius: 10px;
}
.badge:empty {
  display: none;
}
.btn .badge {
  position: relative;
  top: -1px;
}
.btn-xs .badge,
.btn-group-xs > .btn .badge {
  top: 0;
  padding: 1px 5px;
}
a.badge:hover,
a.badge:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
  color: #337ab7;
  background-color: #fff;
}
.list-group-item > .badge {
  float: right;
}
.list-group-item > .badge + .badge {
  margin-right: 5px;
}
.nav-pills > li > a > .badge {
  margin-left: 3px;
}
.jumbotron {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eeeeee;
}
.jumbotron h1,
.jumbotron .h1 {
  color: inherit;
}
.jumbotron p {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 200;
}
.jumbotron > hr {
  border-top-color: #d5d5d5;
}
.container .jumbotron,
.container-fluid .jumbotron {
  border-radius: 3px;
  padding-left: 0px;
  padding-right: 0px;
}
.jumbotron .container {
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .jumbotron {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .container .jumbotron,
  .container-fluid .jumbotron {
    padding-left: 60px;
    padding-right: 60px;
  }
  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 59px;
  }
}
.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 18px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
  -webkit-transition: border 0.2s ease-in-out;
  -o-transition: border 0.2s ease-in-out;
  transition: border 0.2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
  margin-left: auto;
  margin-right: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #337ab7;
}
.thumbnail .caption {
  padding: 9px;
  color: #000;
}
.alert {
  padding: 15px;
  margin-bottom: 18px;
  border: 1px solid transparent;
  border-radius: 2px;
}
.alert h4 {
  margin-top: 0;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}
.alert-warning hr {
  border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-danger {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}
.alert-danger hr {
  border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
  color: #843534;
}
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.progress {
  overflow: hidden;
  height: 18px;
  margin-bottom: 18px;
  background-color: #f5f5f5;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  text-align: center;
  background-color: #337ab7;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;
}
.progress-striped .progress-bar,
.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}
.progress.active .progress-bar,
.progress-bar.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-success {
  background-color: #5cb85c;
}
.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-info {
  background-color: #5bc0de;
}
.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-warning {
  background-color: #f0ad4e;
}
.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-danger {
  background-color: #d9534f;
}
.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.media {
  margin-top: 15px;
}
.media:first-child {
  margin-top: 0;
}
.media,
.media-body {
  zoom: 1;
  overflow: hidden;
}
.media-body {
  width: 10000px;
}
.media-object {
  display: block;
}
.media-object.img-thumbnail {
  max-width: none;
}
.media-right,
.media > .pull-right {
  padding-left: 10px;
}
.media-left,
.media > .pull-left {
  padding-right: 10px;
}
.media-left,
.media-right,
.media-body {
  display: table-cell;
  vertical-align: top;
}
.media-middle {
  vertical-align: middle;
}
.media-bottom {
  vertical-align: bottom;
}
.media-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.media-list {
  padding-left: 0;
  list-style: none;
}
.list-group {
  margin-bottom: 20px;
  padding-left: 0;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.list-group-item:first-child {
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}
a.list-group-item,
button.list-group-item {
  color: #555;
}
a.list-group-item .list-group-item-heading,
button.list-group-item .list-group-item-heading {
  color: #333;
}
a.list-group-item:hover,
button.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:focus {
  text-decoration: none;
  color: #555;
  background-color: #f5f5f5;
}
button.list-group-item {
  width: 100%;
  text-align: left;
}
.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  background-color: #eeeeee;
  color: #777777;
  cursor: not-allowed;
}
.list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading,
.list-group-item.disabled:focus .list-group-item-heading {
  color: inherit;
}
.list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text {
  color: #777777;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  z-index: 2;
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small,
.list-group-item.active:hover .list-group-item-heading > .small,
.list-group-item.active:focus .list-group-item-heading > .small {
  color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
  color: #c7ddef;
}
.list-group-item-success {
  color: #3c763d;
  background-color: #dff0d8;
}
a.list-group-item-success,
button.list-group-item-success {
  color: #3c763d;
}
a.list-group-item-success .list-group-item-heading,
button.list-group-item-success .list-group-item-heading {
  color: inherit;
}
a.list-group-item-success:hover,
button.list-group-item-success:hover,
a.list-group-item-success:focus,
button.list-group-item-success:focus {
  color: #3c763d;
  background-color: #d0e9c6;
}
a.list-group-item-success.active,
button.list-group-item-success.active,
a.list-group-item-success.active:hover,
button.list-group-item-success.active:hover,
a.list-group-item-success.active:focus,
button.list-group-item-success.active:focus {
  color: #fff;
  background-color: #3c763d;
  border-color: #3c763d;
}
.list-group-item-info {
  color: #31708f;
  background-color: #d9edf7;
}
a.list-group-item-info,
button.list-group-item-info {
  color: #31708f;
}
a.list-group-item-info .list-group-item-heading,
button.list-group-item-info .list-group-item-heading {
  color: inherit;
}
a.list-group-item-info:hover,
button.list-group-item-info:hover,
a.list-group-item-info:focus,
button.list-group-item-info:focus {
  color: #31708f;
  background-color: #c4e3f3;
}
a.list-group-item-info.active,
button.list-group-item-info.active,
a.list-group-item-info.active:hover,
button.list-group-item-info.active:hover,
a.list-group-item-info.active:focus,
button.list-group-item-info.active:focus {
  color: #fff;
  background-color: #31708f;
  border-color: #31708f;
}
.list-group-item-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
}
a.list-group-item-warning,
button.list-group-item-warning {
  color: #8a6d3b;
}
a.list-group-item-warning .list-group-item-heading,
button.list-group-item-warning .list-group-item-heading {
  color: inherit;
}
a.list-group-item-warning:hover,
button.list-group-item-warning:hover,
a.list-group-item-warning:focus,
button.list-group-item-warning:focus {
  color: #8a6d3b;
  background-color: #faf2cc;
}
a.list-group-item-warning.active,
button.list-group-item-warning.active,
a.list-group-item-warning.active:hover,
button.list-group-item-warning.active:hover,
a.list-group-item-warning.active:focus,
button.list-group-item-warning.active:focus {
  color: #fff;
  background-color: #8a6d3b;
  border-color: #8a6d3b;
}
.list-group-item-danger {
  color: #a94442;
  background-color: #f2dede;
}
a.list-group-item-danger,
button.list-group-item-danger {
  color: #a94442;
}
a.list-group-item-danger .list-group-item-heading,
button.list-group-item-danger .list-group-item-heading {
  color: inherit;
}
a.list-group-item-danger:hover,
button.list-group-item-danger:hover,
a.list-group-item-danger:focus,
button.list-group-item-danger:focus {
  color: #a94442;
  background-color: #ebcccc;
}
a.list-group-item-danger.active,
button.list-group-item-danger.active,
a.list-group-item-danger.active:hover,
button.list-group-item-danger.active:hover,
a.list-group-item-danger.active:focus,
button.list-group-item-danger.active:focus {
  color: #fff;
  background-color: #a94442;
  border-color: #a94442;
}
.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}
.panel {
  margin-bottom: 18px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
  padding: 15px;
}
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
}
.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  color: inherit;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
  color: inherit;
}
.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 1px;
}
.panel > .list-group,
.panel > .panel-collapse > .list-group {
  margin-bottom: 0;
}
.panel > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item {
  border-width: 1px 0;
  border-radius: 0;
}
.panel > .list-group:first-child .list-group-item:first-child,
.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
  border-top: 0;
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
}
.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
  border-bottom: 0;
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 1px;
}
.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.panel-heading + .list-group .list-group-item:first-child {
  border-top-width: 0;
}
.list-group + .panel-footer {
  border-top-width: 0;
}
.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
  margin-bottom: 0;
}
.panel > .table caption,
.panel > .table-responsive > .table caption,
.panel > .panel-collapse > .table caption {
  padding-left: 15px;
  padding-right: 15px;
}
.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
}
.panel > .table:first-child > thead:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
  border-top-left-radius: 1px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
  border-top-right-radius: 1px;
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
  border-bottom-right-radius: 1px;
  border-bottom-left-radius: 1px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
  border-bottom-left-radius: 1px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
  border-bottom-right-radius: 1px;
}
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive,
.panel > .table + .panel-body,
.panel > .table-responsive + .panel-body {
  border-top: 1px solid #ddd;
}
.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
  border-top: 0;
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
  border: 0;
}
.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
  border-left: 0;
}
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
  border-right: 0;
}
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
  border-bottom: 0;
}
.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
  border-bottom: 0;
}
.panel > .table-responsive {
  border: 0;
  margin-bottom: 0;
}
.panel-group {
  margin-bottom: 18px;
}
.panel-group .panel {
  margin-bottom: 0;
  border-radius: 2px;
}
.panel-group .panel + .panel {
  margin-top: 5px;
}
.panel-group .panel-heading {
  border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
  border-top: 1px solid #ddd;
}
.panel-group .panel-footer {
  border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
  border-bottom: 1px solid #ddd;
}
.panel-default {
  border-color: #ddd;
}
.panel-default > .panel-heading {
  color: #333333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ddd;
}
.panel-default > .panel-heading .badge {
  color: #f5f5f5;
  background-color: #333333;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #ddd;
}
.panel-primary {
  border-color: #337ab7;
}
.panel-primary > .panel-heading {
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #337ab7;
}
.panel-primary > .panel-heading .badge {
  color: #337ab7;
  background-color: #fff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #337ab7;
}
.panel-success {
  border-color: #d6e9c6;
}
.panel-success > .panel-heading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #d6e9c6;
}
.panel-success > .panel-heading .badge {
  color: #dff0d8;
  background-color: #3c763d;
}
.panel-success > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #d6e9c6;
}
.panel-info {
  border-color: #bce8f1;
}
.panel-info > .panel-heading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #bce8f1;
}
.panel-info > .panel-heading .badge {
  color: #d9edf7;
  background-color: #31708f;
}
.panel-info > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #bce8f1;
}
.panel-warning {
  border-color: #faebcc;
}
.panel-warning > .panel-heading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #faebcc;
}
.panel-warning > .panel-heading .badge {
  color: #fcf8e3;
  background-color: #8a6d3b;
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #faebcc;
}
.panel-danger {
  border-color: #ebccd1;
}
.panel-danger > .panel-heading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ebccd1;
}
.panel-danger > .panel-heading .badge {
  color: #f2dede;
  background-color: #a94442;
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #ebccd1;
}
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
  padding-bottom: 75%;
}
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, 0.15);
}
.well-lg {
  padding: 24px;
  border-radius: 3px;
}
.well-sm {
  padding: 9px;
  border-radius: 1px;
}
.close {
  float: right;
  font-size: 19.5px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}
.modal-open {
  overflow: hidden;
}
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
.modal-content {
  position: relative;
  background-color: #fff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: 0;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}
.modal-backdrop.in {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
  margin-top: -2px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-body {
  position: relative;
  padding: 15px;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
  margin-left: 5px;
  margin-bottom: 0;
}
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  font-size: 12px;
  opacity: 0;
  filter: alpha(opacity=0);
}
.tooltip.in {
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.tooltip.top {
  margin-top: -3px;
  padding: 5px 0;
}
.tooltip.right {
  margin-left: 3px;
  padding: 0 5px;
}
.tooltip.bottom {
  margin-top: 3px;
  padding: 5px 0;
}
.tooltip.left {
  margin-left: -3px;
  padding: 0 5px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 2px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  right: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  padding: 1px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  font-size: 13px;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.popover.top {
  margin-top: -10px;
}
.popover.right {
  margin-left: 10px;
}
.popover.bottom {
  margin-top: 10px;
}
.popover.left {
  margin-left: -10px;
}
.popover-title {
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 2px 2px 0 0;
}
.popover-content {
  padding: 9px 14px;
}
.popover > .arrow,
.popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.popover > .arrow {
  border-width: 11px;
}
.popover > .arrow:after {
  border-width: 10px;
  content: "";
}
.popover.top > .arrow {
  left: 50%;
  margin-left: -11px;
  border-bottom-width: 0;
  border-top-color: #999999;
  border-top-color: rgba(0, 0, 0, 0.25);
  bottom: -11px;
}
.popover.top > .arrow:after {
  content: " ";
  bottom: 1px;
  margin-left: -10px;
  border-bottom-width: 0;
  border-top-color: #fff;
}
.popover.right > .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-left-width: 0;
  border-right-color: #999999;
  border-right-color: rgba(0, 0, 0, 0.25);
}
.popover.right > .arrow:after {
  content: " ";
  left: 1px;
  bottom: -10px;
  border-left-width: 0;
  border-right-color: #fff;
}
.popover.bottom > .arrow {
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #999999;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  top: -11px;
}
.popover.bottom > .arrow:after {
  content: " ";
  top: 1px;
  margin-left: -10px;
  border-top-width: 0;
  border-bottom-color: #fff;
}
.popover.left > .arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #999999;
  border-left-color: rgba(0, 0, 0, 0.25);
}
.popover.left > .arrow:after {
  content: " ";
  right: 1px;
  border-right-width: 0;
  border-left-color: #fff;
  bottom: -10px;
}
.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  -o-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    -moz-transition: -moz-transform 0.6s ease-in-out;
    -o-transition: -o-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
  }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    left: 0;
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: 0;
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 15%;
  opacity: 0.5;
  filter: alpha(opacity=50);
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0);
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
  left: auto;
  right: 0;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
  outline: 0;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  z-index: 5;
  display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
  margin-left: -10px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
  margin-right: -10px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  line-height: 1;
  font-family: serif;
}
.carousel-control .icon-prev:before {
  content: '\2039';
}
.carousel-control .icon-next:before {
  content: '\203a';
}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  border: 1px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
  margin: 0;
  width: 12px;
  height: 12px;
  background-color: #fff;
}
.carousel-caption {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
  text-shadow: none;
}
@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
    width: 30px;
    height: 30px;
    margin-top: -10px;
    font-size: 30px;
  }
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .icon-prev {
    margin-left: -10px;
  }
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-next {
    margin-right: -10px;
  }
  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }
  .carousel-indicators {
    bottom: 20px;
  }
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after,
.item_buttons:before,
.item_buttons:after {
  content: " ";
  display: table;
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-header:after,
.modal-footer:after,
.item_buttons:after {
  clear: both;
}
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
.hide {
  display: none !important;
}
.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.hidden {
  display: none !important;
}
.affix {
  position: fixed;
}
@-ms-viewport {
  width: device-width;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}
@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table !important;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table !important;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table !important;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table !important;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block !important;
  }
  table.visible-print {
    display: table !important;
  }
  tr.visible-print {
    display: table-row !important;
  }
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}
.visible-print-block {
  display: none !important;
}
@media print {
  .visible-print-block {
    display: block !important;
  }
}
.visible-print-inline {
  display: none !important;
}
@media print {
  .visible-print-inline {
    display: inline !important;
  }
}
.visible-print-inline-block {
  display: none !important;
}
@media print {
  .visible-print-inline-block {
    display: inline-block !important;
  }
}
@media print {
  .hidden-print {
    display: none !important;
  }
}
/*!
*
* Font Awesome
*
*/
/*!
 *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../components/font-awesome/fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('../components/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../components/font-awesome/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../components/font-awesome/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../components/font-awesome/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}
.fa-fw {
  width: 1.28571429em;
  text-align: center;
}
.fa-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}
.fa-li {
  position: absolute;
  left: -2.14285714em;
  width: 2.14285714em;
  top: 0.14285714em;
  text-align: center;
}
.fa-li.fa-lg {
  left: -1.85714286em;
}
.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eee;
  border-radius: .1em;
}
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.fa.pull-left {
  margin-right: .3em;
}
.fa.pull-right {
  margin-left: .3em;
}
.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.fa-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.fa-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.fa-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.fa-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}
.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-inverse {
  color: #fff;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}
.fa-music:before {
  content: "\f001";
}
.fa-search:before {
  content: "\f002";
}
.fa-envelope-o:before {
  content: "\f003";
}
.fa-heart:before {
  content: "\f004";
}
.fa-star:before {
  content: "\f005";
}
.fa-star-o:before {
  content: "\f006";
}
.fa-user:before {
  content: "\f007";
}
.fa-film:before {
  content: "\f008";
}
.fa-th-large:before {
  content: "\f009";
}
.fa-th:before {
  content: "\f00a";
}
.fa-th-list:before {
  content: "\f00b";
}
.fa-check:before {
  content: "\f00c";
}
.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}
.fa-search-plus:before {
  content: "\f00e";
}
.fa-search-minus:before {
  content: "\f010";
}
.fa-power-off:before {
  content: "\f011";
}
.fa-signal:before {
  content: "\f012";
}
.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}
.fa-trash-o:before {
  content: "\f014";
}
.fa-home:before {
  content: "\f015";
}
.fa-file-o:before {
  content: "\f016";
}
.fa-clock-o:before {
  content: "\f017";
}
.fa-road:before {
  content: "\f018";
}
.fa-download:before {
  content: "\f019";
}
.fa-arrow-circle-o-down:before {
  content: "\f01a";
}
.fa-arrow-circle-o-up:before {
  content: "\f01b";
}
.fa-inbox:before {
  content: "\f01c";
}
.fa-play-circle-o:before {
  content: "\f01d";
}
.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}
.fa-refresh:before {
  content: "\f021";
}
.fa-list-alt:before {
  content: "\f022";
}
.fa-lock:before {
  content: "\f023";
}
.fa-flag:before {
  content: "\f024";
}
.fa-headphones:before {
  content: "\f025";
}
.fa-volume-off:before {
  content: "\f026";
}
.fa-volume-down:before {
  content: "\f027";
}
.fa-volume-up:before {
  content: "\f028";
}
.fa-qrcode:before {
  content: "\f029";
}
.fa-barcode:before {
  content: "\f02a";
}
.fa-tag:before {
  content: "\f02b";
}
.fa-tags:before {
  content: "\f02c";
}
.fa-book:before {
  content: "\f02d";
}
.fa-bookmark:before {
  content: "\f02e";
}
.fa-print:before {
  content: "\f02f";
}
.fa-camera:before {
  content: "\f030";
}
.fa-font:before {
  content: "\f031";
}
.fa-bold:before {
  content: "\f032";
}
.fa-italic:before {
  content: "\f033";
}
.fa-text-height:before {
  content: "\f034";
}
.fa-text-width:before {
  content: "\f035";
}
.fa-align-left:before {
  content: "\f036";
}
.fa-align-center:before {
  content: "\f037";
}
.fa-align-right:before {
  content: "\f038";
}
.fa-align-justify:before {
  content: "\f039";
}
.fa-list:before {
  content: "\f03a";
}
.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}
.fa-indent:before {
  content: "\f03c";
}
.fa-video-camera:before {
  content: "\f03d";
}
.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}
.fa-pencil:before {
  content: "\f040";
}
.fa-map-marker:before {
  content: "\f041";
}
.fa-adjust:before {
  content: "\f042";
}
.fa-tint:before {
  content: "\f043";
}
.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}
.fa-share-square-o:before {
  content: "\f045";
}
.fa-check-square-o:before {
  content: "\f046";
}
.fa-arrows:before {
  content: "\f047";
}
.fa-step-backward:before {
  content: "\f048";
}
.fa-fast-backward:before {
  content: "\f049";
}
.fa-backward:before {
  content: "\f04a";
}
.fa-play:before {
  content: "\f04b";
}
.fa-pause:before {
  content: "\f04c";
}
.fa-stop:before {
  content: "\f04d";
}
.fa-forward:before {
  content: "\f04e";
}
.fa-fast-forward:before {
  content: "\f050";
}
.fa-step-forward:before {
  content: "\f051";
}
.fa-eject:before {
  content: "\f052";
}
.fa-chevron-left:before {
  content: "\f053";
}
.fa-chevron-right:before {
  content: "\f054";
}
.fa-plus-circle:before {
  content: "\f055";
}
.fa-minus-circle:before {
  content: "\f056";
}
.fa-times-circle:before {
  content: "\f057";
}
.fa-check-circle:before {
  content: "\f058";
}
.fa-question-circle:before {
  content: "\f059";
}
.fa-info-circle:before {
  content: "\f05a";
}
.fa-crosshairs:before {
  content: "\f05b";
}
.fa-times-circle-o:before {
  content: "\f05c";
}
.fa-check-circle-o:before {
  content: "\f05d";
}
.fa-ban:before {
  content: "\f05e";
}
.fa-arrow-left:before {
  content: "\f060";
}
.fa-arrow-right:before {
  content: "\f061";
}
.fa-arrow-up:before {
  content: "\f062";
}
.fa-arrow-down:before {
  content: "\f063";
}
.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}
.fa-expand:before {
  content: "\f065";
}
.fa-compress:before {
  content: "\f066";
}
.fa-plus:before {
  content: "\f067";
}
.fa-minus:before {
  content: "\f068";
}
.fa-asterisk:before {
  content: "\f069";
}
.fa-exclamation-circle:before {
  content: "\f06a";
}
.fa-gift:before {
  content: "\f06b";
}
.fa-leaf:before {
  content: "\f06c";
}
.fa-fire:before {
  content: "\f06d";
}
.fa-eye:before {
  content: "\f06e";
}
.fa-eye-slash:before {
  content: "\f070";
}
.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}
.fa-plane:before {
  content: "\f072";
}
.fa-calendar:before {
  content: "\f073";
}
.fa-random:before {
  content: "\f074";
}
.fa-comment:before {
  content: "\f075";
}
.fa-magnet:before {
  content: "\f076";
}
.fa-chevron-up:before {
  content: "\f077";
}
.fa-chevron-down:before {
  content: "\f078";
}
.fa-retweet:before {
  content: "\f079";
}
.fa-shopping-cart:before {
  content: "\f07a";
}
.fa-folder:before {
  content: "\f07b";
}
.fa-folder-open:before {
  content: "\f07c";
}
.fa-arrows-v:before {
  content: "\f07d";
}
.fa-arrows-h:before {
  content: "\f07e";
}
.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}
.fa-twitter-square:before {
  content: "\f081";
}
.fa-facebook-square:before {
  content: "\f082";
}
.fa-camera-retro:before {
  content: "\f083";
}
.fa-key:before {
  content: "\f084";
}
.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}
.fa-comments:before {
  content: "\f086";
}
.fa-thumbs-o-up:before {
  content: "\f087";
}
.fa-thumbs-o-down:before {
  content: "\f088";
}
.fa-star-half:before {
  content: "\f089";
}
.fa-heart-o:before {
  content: "\f08a";
}
.fa-sign-out:before {
  content: "\f08b";
}
.fa-linkedin-square:before {
  content: "\f08c";
}
.fa-thumb-tack:before {
  content: "\f08d";
}
.fa-external-link:before {
  content: "\f08e";
}
.fa-sign-in:before {
  content: "\f090";
}
.fa-trophy:before {
  content: "\f091";
}
.fa-github-square:before {
  content: "\f092";
}
.fa-upload:before {
  content: "\f093";
}
.fa-lemon-o:before {
  content: "\f094";
}
.fa-phone:before {
  content: "\f095";
}
.fa-square-o:before {
  content: "\f096";
}
.fa-bookmark-o:before {
  content: "\f097";
}
.fa-phone-square:before {
  content: "\f098";
}
.fa-twitter:before {
  content: "\f099";
}
.fa-facebook:before {
  content: "\f09a";
}
.fa-github:before {
  content: "\f09b";
}
.fa-unlock:before {
  content: "\f09c";
}
.fa-credit-card:before {
  content: "\f09d";
}
.fa-rss:before {
  content: "\f09e";
}
.fa-hdd-o:before {
  content: "\f0a0";
}
.fa-bullhorn:before {
  content: "\f0a1";
}
.fa-bell:before {
  content: "\f0f3";
}
.fa-certificate:before {
  content: "\f0a3";
}
.fa-hand-o-right:before {
  content: "\f0a4";
}
.fa-hand-o-left:before {
  content: "\f0a5";
}
.fa-hand-o-up:before {
  content: "\f0a6";
}
.fa-hand-o-down:before {
  content: "\f0a7";
}
.fa-arrow-circle-left:before {
  content: "\f0a8";
}
.fa-arrow-circle-right:before {
  content: "\f0a9";
}
.fa-arrow-circle-up:before {
  content: "\f0aa";
}
.fa-arrow-circle-down:before {
  content: "\f0ab";
}
.fa-globe:before {
  content: "\f0ac";
}
.fa-wrench:before {
  content: "\f0ad";
}
.fa-tasks:before {
  content: "\f0ae";
}
.fa-filter:before {
  content: "\f0b0";
}
.fa-briefcase:before {
  content: "\f0b1";
}
.fa-arrows-alt:before {
  content: "\f0b2";
}
.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}
.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}
.fa-cloud:before {
  content: "\f0c2";
}
.fa-flask:before {
  content: "\f0c3";
}
.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}
.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}
.fa-paperclip:before {
  content: "\f0c6";
}
.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}
.fa-square:before {
  content: "\f0c8";
}
.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}
.fa-list-ul:before {
  content: "\f0ca";
}
.fa-list-ol:before {
  content: "\f0cb";
}
.fa-strikethrough:before {
  content: "\f0cc";
}
.fa-underline:before {
  content: "\f0cd";
}
.fa-table:before {
  content: "\f0ce";
}
.fa-magic:before {
  content: "\f0d0";
}
.fa-truck:before {
  content: "\f0d1";
}
.fa-pinterest:before {
  content: "\f0d2";
}
.fa-pinterest-square:before {
  content: "\f0d3";
}
.fa-google-plus-square:before {
  content: "\f0d4";
}
.fa-google-plus:before {
  content: "\f0d5";
}
.fa-money:before {
  content: "\f0d6";
}
.fa-caret-down:before {
  content: "\f0d7";
}
.fa-caret-up:before {
  content: "\f0d8";
}
.fa-caret-left:before {
  content: "\f0d9";
}
.fa-caret-right:before {
  content: "\f0da";
}
.fa-columns:before {
  content: "\f0db";
}
.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}
.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}
.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}
.fa-envelope:before {
  content: "\f0e0";
}
.fa-linkedin:before {
  content: "\f0e1";
}
.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}
.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}
.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}
.fa-comment-o:before {
  content: "\f0e5";
}
.fa-comments-o:before {
  content: "\f0e6";
}
.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}
.fa-sitemap:before {
  content: "\f0e8";
}
.fa-umbrella:before {
  content: "\f0e9";
}
.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}
.fa-lightbulb-o:before {
  content: "\f0eb";
}
.fa-exchange:before {
  content: "\f0ec";
}
.fa-cloud-download:before {
  content: "\f0ed";
}
.fa-cloud-upload:before {
  content: "\f0ee";
}
.fa-user-md:before {
  content: "\f0f0";
}
.fa-stethoscope:before {
  content: "\f0f1";
}
.fa-suitcase:before {
  content: "\f0f2";
}
.fa-bell-o:before {
  content: "\f0a2";
}
.fa-coffee:before {
  content: "\f0f4";
}
.fa-cutlery:before {
  content: "\f0f5";
}
.fa-file-text-o:before {
  content: "\f0f6";
}
.fa-building-o:before {
  content: "\f0f7";
}
.fa-hospital-o:before {
  content: "\f0f8";
}
.fa-ambulance:before {
  content: "\f0f9";
}
.fa-medkit:before {
  content: "\f0fa";
}
.fa-fighter-jet:before {
  content: "\f0fb";
}
.fa-beer:before {
  content: "\f0fc";
}
.fa-h-square:before {
  content: "\f0fd";
}
.fa-plus-square:before {
  content: "\f0fe";
}
.fa-angle-double-left:before {
  content: "\f100";
}
.fa-angle-double-right:before {
  content: "\f101";
}
.fa-angle-double-up:before {
  content: "\f102";
}
.fa-angle-double-down:before {
  content: "\f103";
}
.fa-angle-left:before {
  content: "\f104";
}
.fa-angle-right:before {
  content: "\f105";
}
.fa-angle-up:before {
  content: "\f106";
}
.fa-angle-down:before {
  content: "\f107";
}
.fa-desktop:before {
  content: "\f108";
}
.fa-laptop:before {
  content: "\f109";
}
.fa-tablet:before {
  content: "\f10a";
}
.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}
.fa-circle-o:before {
  content: "\f10c";
}
.fa-quote-left:before {
  content: "\f10d";
}
.fa-quote-right:before {
  content: "\f10e";
}
.fa-spinner:before {
  content: "\f110";
}
.fa-circle:before {
  content: "\f111";
}
.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}
.fa-github-alt:before {
  content: "\f113";
}
.fa-folder-o:before {
  content: "\f114";
}
.fa-folder-open-o:before {
  content: "\f115";
}
.fa-smile-o:before {
  content: "\f118";
}
.fa-frown-o:before {
  content: "\f119";
}
.fa-meh-o:before {
  content: "\f11a";
}
.fa-gamepad:before {
  content: "\f11b";
}
.fa-keyboard-o:before {
  content: "\f11c";
}
.fa-flag-o:before {
  content: "\f11d";
}
.fa-flag-checkered:before {
  content: "\f11e";
}
.fa-terminal:before {
  content: "\f120";
}
.fa-code:before {
  content: "\f121";
}
.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}
.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}
.fa-location-arrow:before {
  content: "\f124";
}
.fa-crop:before {
  content: "\f125";
}
.fa-code-fork:before {
  content: "\f126";
}
.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}
.fa-question:before {
  content: "\f128";
}
.fa-info:before {
  content: "\f129";
}
.fa-exclamation:before {
  content: "\f12a";
}
.fa-superscript:before {
  content: "\f12b";
}
.fa-subscript:before {
  content: "\f12c";
}
.fa-eraser:before {
  content: "\f12d";
}
.fa-puzzle-piece:before {
  content: "\f12e";
}
.fa-microphone:before {
  content: "\f130";
}
.fa-microphone-slash:before {
  content: "\f131";
}
.fa-shield:before {
  content: "\f132";
}
.fa-calendar-o:before {
  content: "\f133";
}
.fa-fire-extinguisher:before {
  content: "\f134";
}
.fa-rocket:before {
  content: "\f135";
}
.fa-maxcdn:before {
  content: "\f136";
}
.fa-chevron-circle-left:before {
  content: "\f137";
}
.fa-chevron-circle-right:before {
  content: "\f138";
}
.fa-chevron-circle-up:before {
  content: "\f139";
}
.fa-chevron-circle-down:before {
  content: "\f13a";
}
.fa-html5:before {
  content: "\f13b";
}
.fa-css3:before {
  content: "\f13c";
}
.fa-anchor:before {
  content: "\f13d";
}
.fa-unlock-alt:before {
  content: "\f13e";
}
.fa-bullseye:before {
  content: "\f140";
}
.fa-ellipsis-h:before {
  content: "\f141";
}
.fa-ellipsis-v:before {
  content: "\f142";
}
.fa-rss-square:before {
  content: "\f143";
}
.fa-play-circle:before {
  content: "\f144";
}
.fa-ticket:before {
  content: "\f145";
}
.fa-minus-square:before {
  content: "\f146";
}
.fa-minus-square-o:before {
  content: "\f147";
}
.fa-level-up:before {
  content: "\f148";
}
.fa-level-down:before {
  content: "\f149";
}
.fa-check-square:before {
  content: "\f14a";
}
.fa-pencil-square:before {
  content: "\f14b";
}
.fa-external-link-square:before {
  content: "\f14c";
}
.fa-share-square:before {
  content: "\f14d";
}
.fa-compass:before {
  content: "\f14e";
}
.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}
.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}
.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}
.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}
.fa-gbp:before {
  content: "\f154";
}
.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}
.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}
.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}
.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}
.fa-won:before,
.fa-krw:before {
  content: "\f159";
}
.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}
.fa-file:before {
  content: "\f15b";
}
.fa-file-text:before {
  content: "\f15c";
}
.fa-sort-alpha-asc:before {
  content: "\f15d";
}
.fa-sort-alpha-desc:before {
  content: "\f15e";
}
.fa-sort-amount-asc:before {
  content: "\f160";
}
.fa-sort-amount-desc:before {
  content: "\f161";
}
.fa-sort-numeric-asc:before {
  content: "\f162";
}
.fa-sort-numeric-desc:before {
  content: "\f163";
}
.fa-thumbs-up:before {
  content: "\f164";
}
.fa-thumbs-down:before {
  content: "\f165";
}
.fa-youtube-square:before {
  content: "\f166";
}
.fa-youtube:before {
  content: "\f167";
}
.fa-xing:before {
  content: "\f168";
}
.fa-xing-square:before {
  content: "\f169";
}
.fa-youtube-play:before {
  content: "\f16a";
}
.fa-dropbox:before {
  content: "\f16b";
}
.fa-stack-overflow:before {
  content: "\f16c";
}
.fa-instagram:before {
  content: "\f16d";
}
.fa-flickr:before {
  content: "\f16e";
}
.fa-adn:before {
  content: "\f170";
}
.fa-bitbucket:before {
  content: "\f171";
}
.fa-bitbucket-square:before {
  content: "\f172";
}
.fa-tumblr:before {
  content: "\f173";
}
.fa-tumblr-square:before {
  content: "\f174";
}
.fa-long-arrow-down:before {
  content: "\f175";
}
.fa-long-arrow-up:before {
  content: "\f176";
}
.fa-long-arrow-left:before {
  content: "\f177";
}
.fa-long-arrow-right:before {
  content: "\f178";
}
.fa-apple:before {
  content: "\f179";
}
.fa-windows:before {
  content: "\f17a";
}
.fa-android:before {
  content: "\f17b";
}
.fa-linux:before {
  content: "\f17c";
}
.fa-dribbble:before {
  content: "\f17d";
}
.fa-skype:before {
  content: "\f17e";
}
.fa-foursquare:before {
  content: "\f180";
}
.fa-trello:before {
  content: "\f181";
}
.fa-female:before {
  content: "\f182";
}
.fa-male:before {
  content: "\f183";
}
.fa-gittip:before {
  content: "\f184";
}
.fa-sun-o:before {
  content: "\f185";
}
.fa-moon-o:before {
  content: "\f186";
}
.fa-archive:before {
  content: "\f187";
}
.fa-bug:before {
  content: "\f188";
}
.fa-vk:before {
  content: "\f189";
}
.fa-weibo:before {
  content: "\f18a";
}
.fa-renren:before {
  content: "\f18b";
}
.fa-pagelines:before {
  content: "\f18c";
}
.fa-stack-exchange:before {
  content: "\f18d";
}
.fa-arrow-circle-o-right:before {
  content: "\f18e";
}
.fa-arrow-circle-o-left:before {
  content: "\f190";
}
.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}
.fa-dot-circle-o:before {
  content: "\f192";
}
.fa-wheelchair:before {
  content: "\f193";
}
.fa-vimeo-square:before {
  content: "\f194";
}
.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}
.fa-plus-square-o:before {
  content: "\f196";
}
.fa-space-shuttle:before {
  content: "\f197";
}
.fa-slack:before {
  content: "\f198";
}
.fa-envelope-square:before {
  content: "\f199";
}
.fa-wordpress:before {
  content: "\f19a";
}
.fa-openid:before {
  content: "\f19b";
}
.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}
.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}
.fa-yahoo:before {
  content: "\f19e";
}
.fa-google:before {
  content: "\f1a0";
}
.fa-reddit:before {
  content: "\f1a1";
}
.fa-reddit-square:before {
  content: "\f1a2";
}
.fa-stumbleupon-circle:before {
  content: "\f1a3";
}
.fa-stumbleupon:before {
  content: "\f1a4";
}
.fa-delicious:before {
  content: "\f1a5";
}
.fa-digg:before {
  content: "\f1a6";
}
.fa-pied-piper:before {
  content: "\f1a7";
}
.fa-pied-piper-alt:before {
  content: "\f1a8";
}
.fa-drupal:before {
  content: "\f1a9";
}
.fa-joomla:before {
  content: "\f1aa";
}
.fa-language:before {
  content: "\f1ab";
}
.fa-fax:before {
  content: "\f1ac";
}
.fa-building:before {
  content: "\f1ad";
}
.fa-child:before {
  content: "\f1ae";
}
.fa-paw:before {
  content: "\f1b0";
}
.fa-spoon:before {
  content: "\f1b1";
}
.fa-cube:before {
  content: "\f1b2";
}
.fa-cubes:before {
  content: "\f1b3";
}
.fa-behance:before {
  content: "\f1b4";
}
.fa-behance-square:before {
  content: "\f1b5";
}
.fa-steam:before {
  content: "\f1b6";
}
.fa-steam-square:before {
  content: "\f1b7";
}
.fa-recycle:before {
  content: "\f1b8";
}
.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}
.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}
.fa-tree:before {
  content: "\f1bb";
}
.fa-spotify:before {
  content: "\f1bc";
}
.fa-deviantart:before {
  content: "\f1bd";
}
.fa-soundcloud:before {
  content: "\f1be";
}
.fa-database:before {
  content: "\f1c0";
}
.fa-file-pdf-o:before {
  content: "\f1c1";
}
.fa-file-word-o:before {
  content: "\f1c2";
}
.fa-file-excel-o:before {
  content: "\f1c3";
}
.fa-file-powerpoint-o:before {
  content: "\f1c4";
}
.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}
.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}
.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}
.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}
.fa-file-code-o:before {
  content: "\f1c9";
}
.fa-vine:before {
  content: "\f1ca";
}
.fa-codepen:before {
  content: "\f1cb";
}
.fa-jsfiddle:before {
  content: "\f1cc";
}
.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}
.fa-circle-o-notch:before {
  content: "\f1ce";
}
.fa-ra:before,
.fa-rebel:before {
  content: "\f1d0";
}
.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}
.fa-git-square:before {
  content: "\f1d2";
}
.fa-git:before {
  content: "\f1d3";
}
.fa-hacker-news:before {
  content: "\f1d4";
}
.fa-tencent-weibo:before {
  content: "\f1d5";
}
.fa-qq:before {
  content: "\f1d6";
}
.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}
.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}
.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}
.fa-history:before {
  content: "\f1da";
}
.fa-circle-thin:before {
  content: "\f1db";
}
.fa-header:before {
  content: "\f1dc";
}
.fa-paragraph:before {
  content: "\f1dd";
}
.fa-sliders:before {
  content: "\f1de";
}
.fa-share-alt:before {
  content: "\f1e0";
}
.fa-share-alt-square:before {
  content: "\f1e1";
}
.fa-bomb:before {
  content: "\f1e2";
}
.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}
.fa-tty:before {
  content: "\f1e4";
}
.fa-binoculars:before {
  content: "\f1e5";
}
.fa-plug:before {
  content: "\f1e6";
}
.fa-slideshare:before {
  content: "\f1e7";
}
.fa-twitch:before {
  content: "\f1e8";
}
.fa-yelp:before {
  content: "\f1e9";
}
.fa-newspaper-o:before {
  content: "\f1ea";
}
.fa-wifi:before {
  content: "\f1eb";
}
.fa-calculator:before {
  content: "\f1ec";
}
.fa-paypal:before {
  content: "\f1ed";
}
.fa-google-wallet:before {
  content: "\f1ee";
}
.fa-cc-visa:before {
  content: "\f1f0";
}
.fa-cc-mastercard:before {
  content: "\f1f1";
}
.fa-cc-discover:before {
  content: "\f1f2";
}
.fa-cc-amex:before {
  content: "\f1f3";
}
.fa-cc-paypal:before {
  content: "\f1f4";
}
.fa-cc-stripe:before {
  content: "\f1f5";
}
.fa-bell-slash:before {
  content: "\f1f6";
}
.fa-bell-slash-o:before {
  content: "\f1f7";
}
.fa-trash:before {
  content: "\f1f8";
}
.fa-copyright:before {
  content: "\f1f9";
}
.fa-at:before {
  content: "\f1fa";
}
.fa-eyedropper:before {
  content: "\f1fb";
}
.fa-paint-brush:before {
  content: "\f1fc";
}
.fa-birthday-cake:before {
  content: "\f1fd";
}
.fa-area-chart:before {
  content: "\f1fe";
}
.fa-pie-chart:before {
  content: "\f200";
}
.fa-line-chart:before {
  content: "\f201";
}
.fa-lastfm:before {
  content: "\f202";
}
.fa-lastfm-square:before {
  content: "\f203";
}
.fa-toggle-off:before {
  content: "\f204";
}
.fa-toggle-on:before {
  content: "\f205";
}
.fa-bicycle:before {
  content: "\f206";
}
.fa-bus:before {
  content: "\f207";
}
.fa-ioxhost:before {
  content: "\f208";
}
.fa-angellist:before {
  content: "\f209";
}
.fa-cc:before {
  content: "\f20a";
}
.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}
.fa-meanpath:before {
  content: "\f20c";
}
/*!
*
* IPython base
*
*/
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
code {
  color: #000;
}
pre {
  font-size: inherit;
  line-height: inherit;
}
label {
  font-weight: normal;
}
/* Make the page background atleast 100% the height of the view port */
/* Make the page itself atleast 70% the height of the view port */
.border-box-sizing {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.corner-all {
  border-radius: 2px;
}
.no-padding {
  padding: 0px;
}
/* Flexible box model classes */
/* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
/* This file is a compatability layer.  It allows the usage of flexible box 
model layouts accross multiple browsers, including older browsers.  The newest,
universal implementation of the flexible box model is used when available (see
`Modern browsers` comments below).  Browsers that are known to implement this 
new spec completely include:

    Firefox 28.0+
    Chrome 29.0+
    Internet Explorer 11+ 
    Opera 17.0+

Browsers not listed, including Safari, are supported via the styling under the
`Old browsers` comments below.
*/
.hbox {
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-align: stretch;
  display: box;
  box-orient: horizontal;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.hbox > * {
  /* Old browsers */
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  /* Modern browsers */
  flex: none;
}
.vbox {
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
  display: box;
  box-orient: vertical;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.vbox > * {
  /* Old browsers */
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  /* Modern browsers */
  flex: none;
}
.hbox.reverse,
.vbox.reverse,
.reverse {
  /* Old browsers */
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  box-direction: reverse;
  /* Modern browsers */
  flex-direction: row-reverse;
}
.hbox.box-flex0,
.vbox.box-flex0,
.box-flex0 {
  /* Old browsers */
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  /* Modern browsers */
  flex: none;
  width: auto;
}
.hbox.box-flex1,
.vbox.box-flex1,
.box-flex1 {
  /* Old browsers */
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  /* Modern browsers */
  flex: 1;
}
.hbox.box-flex,
.vbox.box-flex,
.box-flex {
  /* Old browsers */
  /* Old browsers */
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  /* Modern browsers */
  flex: 1;
}
.hbox.box-flex2,
.vbox.box-flex2,
.box-flex2 {
  /* Old browsers */
  -webkit-box-flex: 2;
  -moz-box-flex: 2;
  box-flex: 2;
  /* Modern browsers */
  flex: 2;
}
.box-group1 {
  /*  Deprecated */
  -webkit-box-flex-group: 1;
  -moz-box-flex-group: 1;
  box-flex-group: 1;
}
.box-group2 {
  /* Deprecated */
  -webkit-box-flex-group: 2;
  -moz-box-flex-group: 2;
  box-flex-group: 2;
}
.hbox.start,
.vbox.start,
.start {
  /* Old browsers */
  -webkit-box-pack: start;
  -moz-box-pack: start;
  box-pack: start;
  /* Modern browsers */
  justify-content: flex-start;
}
.hbox.end,
.vbox.end,
.end {
  /* Old browsers */
  -webkit-box-pack: end;
  -moz-box-pack: end;
  box-pack: end;
  /* Modern browsers */
  justify-content: flex-end;
}
.hbox.center,
.vbox.center,
.center {
  /* Old browsers */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  /* Modern browsers */
  justify-content: center;
}
.hbox.baseline,
.vbox.baseline,
.baseline {
  /* Old browsers */
  -webkit-box-pack: baseline;
  -moz-box-pack: baseline;
  box-pack: baseline;
  /* Modern browsers */
  justify-content: baseline;
}
.hbox.stretch,
.vbox.stretch,
.stretch {
  /* Old browsers */
  -webkit-box-pack: stretch;
  -moz-box-pack: stretch;
  box-pack: stretch;
  /* Modern browsers */
  justify-content: stretch;
}
.hbox.align-start,
.vbox.align-start,
.align-start {
  /* Old browsers */
  -webkit-box-align: start;
  -moz-box-align: start;
  box-align: start;
  /* Modern browsers */
  align-items: flex-start;
}
.hbox.align-end,
.vbox.align-end,
.align-end {
  /* Old browsers */
  -webkit-box-align: end;
  -moz-box-align: end;
  box-align: end;
  /* Modern browsers */
  align-items: flex-end;
}
.hbox.align-center,
.vbox.align-center,
.align-center {
  /* Old browsers */
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  /* Modern browsers */
  align-items: center;
}
.hbox.align-baseline,
.vbox.align-baseline,
.align-baseline {
  /* Old browsers */
  -webkit-box-align: baseline;
  -moz-box-align: baseline;
  box-align: baseline;
  /* Modern browsers */
  align-items: baseline;
}
.hbox.align-stretch,
.vbox.align-stretch,
.align-stretch {
  /* Old browsers */
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  box-align: stretch;
  /* Modern browsers */
  align-items: stretch;
}
div.error {
  margin: 2em;
  text-align: center;
}
div.error > h1 {
  font-size: 500%;
  line-height: normal;
}
div.error > p {
  font-size: 200%;
  line-height: normal;
}
div.traceback-wrapper {
  text-align: left;
  max-width: 800px;
  margin: auto;
}
/**
 * Primary styles
 *
 * Author: Jupyter Development Team
 */
body {
  background-color: #fff;
  /* This makes sure that the body covers the entire window and needs to
       be in a different element than the display: box in wrapper below */
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  overflow: visible;
}
body > #header {
  /* Initially hidden to prevent FLOUC */
  display: none;
  background-color: #fff;
  /* Display over codemirror */
  position: relative;
  z-index: 100;
}
body > #header #header-container {
  padding-bottom: 5px;
  padding-top: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
body > #header .header-bar {
  width: 100%;
  height: 1px;
  background: #e7e7e7;
  margin-bottom: -1px;
}
@media print {
  body > #header {
    display: none !important;
  }
}
#header-spacer {
  width: 100%;
  visibility: hidden;
}
@media print {
  #header-spacer {
    display: none;
  }
}
#ipython_notebook {
  padding-left: 0px;
  padding-top: 1px;
  padding-bottom: 1px;
}
@media (max-width: 991px) {
  #ipython_notebook {
    margin-left: 10px;
  }
}
[dir="rtl"] #ipython_notebook {
  float: right !important;
}
#noscript {
  width: auto;
  padding-top: 16px;
  padding-bottom: 16px;
  text-align: center;
  font-size: 22px;
  color: red;
  font-weight: bold;
}
#ipython_notebook img {
  height: 28px;
}
#site {
  width: 100%;
  display: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow: auto;
}
@media print {
  #site {
    height: auto !important;
  }
}
/* Smaller buttons */
.ui-button .ui-button-text {
  padding: 0.2em 0.8em;
  font-size: 77%;
}
input.ui-button {
  padding: 0.3em 0.9em;
}
span#login_widget {
  float: right;
}
span#login_widget > .button,
#logout {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
span#login_widget > .button:focus,
#logout:focus,
span#login_widget > .button.focus,
#logout.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
span#login_widget > .button:hover,
#logout:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
span#login_widget > .button:active,
#logout:active,
span#login_widget > .button.active,
#logout.active,
.open > .dropdown-togglespan#login_widget > .button,
.open > .dropdown-toggle#logout {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
span#login_widget > .button:active:hover,
#logout:active:hover,
span#login_widget > .button.active:hover,
#logout.active:hover,
.open > .dropdown-togglespan#login_widget > .button:hover,
.open > .dropdown-toggle#logout:hover,
span#login_widget > .button:active:focus,
#logout:active:focus,
span#login_widget > .button.active:focus,
#logout.active:focus,
.open > .dropdown-togglespan#login_widget > .button:focus,
.open > .dropdown-toggle#logout:focus,
span#login_widget > .button:active.focus,
#logout:active.focus,
span#login_widget > .button.active.focus,
#logout.active.focus,
.open > .dropdown-togglespan#login_widget > .button.focus,
.open > .dropdown-toggle#logout.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
span#login_widget > .button:active,
#logout:active,
span#login_widget > .button.active,
#logout.active,
.open > .dropdown-togglespan#login_widget > .button,
.open > .dropdown-toggle#logout {
  background-image: none;
}
span#login_widget > .button.disabled:hover,
#logout.disabled:hover,
span#login_widget > .button[disabled]:hover,
#logout[disabled]:hover,
fieldset[disabled] span#login_widget > .button:hover,
fieldset[disabled] #logout:hover,
span#login_widget > .button.disabled:focus,
#logout.disabled:focus,
span#login_widget > .button[disabled]:focus,
#logout[disabled]:focus,
fieldset[disabled] span#login_widget > .button:focus,
fieldset[disabled] #logout:focus,
span#login_widget > .button.disabled.focus,
#logout.disabled.focus,
span#login_widget > .button[disabled].focus,
#logout[disabled].focus,
fieldset[disabled] span#login_widget > .button.focus,
fieldset[disabled] #logout.focus {
  background-color: #fff;
  border-color: #ccc;
}
span#login_widget > .button .badge,
#logout .badge {
  color: #fff;
  background-color: #333;
}
.nav-header {
  text-transform: none;
}
#header > span {
  margin-top: 10px;
}
.modal_stretch .modal-dialog {
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
  display: box;
  box-orient: vertical;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 80vh;
}
.modal_stretch .modal-dialog .modal-body {
  max-height: calc(100vh - 200px);
  overflow: auto;
  flex: 1;
}
@media (min-width: 768px) {
  .modal .modal-dialog {
    width: 700px;
  }
}
@media (min-width: 768px) {
  select.form-control {
    margin-left: 12px;
    margin-right: 12px;
  }
}
/*!
*
* IPython auth
*
*/
.center-nav {
  display: inline-block;
  margin-bottom: -4px;
}
/*!
*
* IPython tree view
*
*/
/* We need an invisible input field on top of the sentense*/
/* "Drag file onto the list ..." */
.alternate_upload {
  background-color: none;
  display: inline;
}
.alternate_upload.form {
  padding: 0;
  margin: 0;
}
.alternate_upload input.fileinput {
  text-align: center;
  vertical-align: middle;
  display: inline;
  opacity: 0;
  z-index: 2;
  width: 12ex;
  margin-right: -12ex;
}
.alternate_upload .btn-upload {
  height: 22px;
}
/**
 * Primary styles
 *
 * Author: Jupyter Development Team
 */
[dir="rtl"] #tabs li {
  float: right;
}
ul#tabs {
  margin-bottom: 4px;
}
[dir="rtl"] ul#tabs {
  margin-right: 0px;
}
ul#tabs a {
  padding-top: 6px;
  padding-bottom: 4px;
}
ul.breadcrumb a:focus,
ul.breadcrumb a:hover {
  text-decoration: none;
}
ul.breadcrumb i.icon-home {
  font-size: 16px;
  margin-right: 4px;
}
ul.breadcrumb span {
  color: #5e5e5e;
}
.list_toolbar {
  padding: 4px 0 4px 0;
  vertical-align: middle;
}
.list_toolbar .tree-buttons {
  padding-top: 1px;
}
[dir="rtl"] .list_toolbar .tree-buttons {
  float: left !important;
}
[dir="rtl"] .list_toolbar .pull-right {
  padding-top: 1px;
  float: left !important;
}
[dir="rtl"] .list_toolbar .pull-left {
  float: right !important;
}
.dynamic-buttons {
  padding-top: 3px;
  display: inline-block;
}
.list_toolbar [class*="span"] {
  min-height: 24px;
}
.list_header {
  font-weight: bold;
  background-color: #EEE;
}
.list_placeholder {
  font-weight: bold;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 7px;
  padding-right: 7px;
}
.list_container {
  margin-top: 4px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 2px;
}
.list_container > div {
  border-bottom: 1px solid #ddd;
}
.list_container > div:hover .list-item {
  background-color: red;
}
.list_container > div:last-child {
  border: none;
}
.list_item:hover .list_item {
  background-color: #ddd;
}
.list_item a {
  text-decoration: none;
}
.list_item:hover {
  background-color: #fafafa;
}
.list_header > div,
.list_item > div {
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 7px;
  padding-right: 7px;
  line-height: 22px;
}
.list_header > div input,
.list_item > div input {
  margin-right: 7px;
  margin-left: 14px;
  vertical-align: baseline;
  line-height: 22px;
  position: relative;
  top: -1px;
}
.list_header > div .item_link,
.list_item > div .item_link {
  margin-left: -1px;
  vertical-align: baseline;
  line-height: 22px;
}
.new-file input[type=checkbox] {
  visibility: hidden;
}
.item_name {
  line-height: 22px;
  height: 24px;
}
.item_icon {
  font-size: 14px;
  color: #5e5e5e;
  margin-right: 7px;
  margin-left: 7px;
  line-height: 22px;
  vertical-align: baseline;
}
.item_buttons {
  line-height: 1em;
  margin-left: -5px;
}
.item_buttons .btn,
.item_buttons .btn-group,
.item_buttons .input-group {
  float: left;
}
.item_buttons > .btn,
.item_buttons > .btn-group,
.item_buttons > .input-group {
  margin-left: 5px;
}
.item_buttons .btn {
  min-width: 13ex;
}
.item_buttons .running-indicator {
  padding-top: 4px;
  color: #5cb85c;
}
.item_buttons .kernel-name {
  padding-top: 4px;
  color: #5bc0de;
  margin-right: 7px;
  float: left;
}
.toolbar_info {
  height: 24px;
  line-height: 24px;
}
.list_item input:not([type=checkbox]) {
  padding-top: 3px;
  padding-bottom: 3px;
  height: 22px;
  line-height: 14px;
  margin: 0px;
}
.highlight_text {
  color: blue;
}
#project_name {
  display: inline-block;
  padding-left: 7px;
  margin-left: -2px;
}
#project_name > .breadcrumb {
  padding: 0px;
  margin-bottom: 0px;
  background-color: transparent;
  font-weight: bold;
}
#tree-selector {
  padding-right: 0px;
}
[dir="rtl"] #tree-selector a {
  float: right;
}
#button-select-all {
  min-width: 50px;
}
#select-all {
  margin-left: 7px;
  margin-right: 2px;
}
.menu_icon {
  margin-right: 2px;
}
.tab-content .row {
  margin-left: 0px;
  margin-right: 0px;
}
.folder_icon:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f114";
}
.folder_icon:before.pull-left {
  margin-right: .3em;
}
.folder_icon:before.pull-right {
  margin-left: .3em;
}
.notebook_icon:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f02d";
  position: relative;
  top: -1px;
}
.notebook_icon:before.pull-left {
  margin-right: .3em;
}
.notebook_icon:before.pull-right {
  margin-left: .3em;
}
.running_notebook_icon:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f02d";
  position: relative;
  top: -1px;
  color: #5cb85c;
}
.running_notebook_icon:before.pull-left {
  margin-right: .3em;
}
.running_notebook_icon:before.pull-right {
  margin-left: .3em;
}
.file_icon:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f016";
  position: relative;
  top: -2px;
}
.file_icon:before.pull-left {
  margin-right: .3em;
}
.file_icon:before.pull-right {
  margin-left: .3em;
}
#notebook_toolbar .pull-right {
  padding-top: 0px;
  margin-right: -1px;
}
ul#new-menu {
  left: auto;
  right: 0;
}
[dir="rtl"] #new-menu {
  text-align: right;
}
.kernel-menu-icon {
  padding-right: 12px;
  width: 24px;
  content: "\f096";
}
.kernel-menu-icon:before {
  content: "\f096";
}
.kernel-menu-icon-current:before {
  content: "\f00c";
}
#tab_content {
  padding-top: 20px;
}
#running .panel-group .panel {
  margin-top: 3px;
  margin-bottom: 1em;
}
#running .panel-group .panel .panel-heading {
  background-color: #EEE;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 7px;
  padding-right: 7px;
  line-height: 22px;
}
#running .panel-group .panel .panel-heading a:focus,
#running .panel-group .panel .panel-heading a:hover {
  text-decoration: none;
}
#running .panel-group .panel .panel-body {
  padding: 0px;
}
#running .panel-group .panel .panel-body .list_container {
  margin-top: 0px;
  margin-bottom: 0px;
  border: 0px;
  border-radius: 0px;
}
#running .panel-group .panel .panel-body .list_container .list_item {
  border-bottom: 1px solid #ddd;
}
#running .panel-group .panel .panel-body .list_container .list_item:last-child {
  border-bottom: 0px;
}
[dir="rtl"] #running .col-sm-8 {
  float: right !important;
}
.delete-button {
  display: none;
}
.duplicate-button {
  display: none;
}
.rename-button {
  display: none;
}
.shutdown-button {
  display: none;
}
.dynamic-instructions {
  display: inline-block;
  padding-top: 4px;
}
/*!
*
* IPython text editor webapp
*
*/
.selected-keymap i.fa {
  padding: 0px 5px;
}
.selected-keymap i.fa:before {
  content: "\f00c";
}
#mode-menu {
  overflow: auto;
  max-height: 20em;
}
.edit_app #header {
  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
}
.edit_app #menubar .navbar {
  /* Use a negative 1 bottom margin, so the border overlaps the border of the
    header */
  margin-bottom: -1px;
}
.dirty-indicator {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 20px;
}
.dirty-indicator.pull-left {
  margin-right: .3em;
}
.dirty-indicator.pull-right {
  margin-left: .3em;
}
.dirty-indicator-dirty {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 20px;
}
.dirty-indicator-dirty.pull-left {
  margin-right: .3em;
}
.dirty-indicator-dirty.pull-right {
  margin-left: .3em;
}
.dirty-indicator-clean {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 20px;
}
.dirty-indicator-clean.pull-left {
  margin-right: .3em;
}
.dirty-indicator-clean.pull-right {
  margin-left: .3em;
}
.dirty-indicator-clean:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f00c";
}
.dirty-indicator-clean:before.pull-left {
  margin-right: .3em;
}
.dirty-indicator-clean:before.pull-right {
  margin-left: .3em;
}
#filename {
  font-size: 16pt;
  display: table;
  padding: 0px 5px;
}
#current-mode {
  padding-left: 5px;
  padding-right: 5px;
}
#texteditor-backdrop {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media not print {
  #texteditor-backdrop {
    background-color: #EEE;
  }
}
@media print {
  #texteditor-backdrop #texteditor-container .CodeMirror-gutter,
  #texteditor-backdrop #texteditor-container .CodeMirror-gutters {
    background-color: #fff;
  }
}
@media not print {
  #texteditor-backdrop #texteditor-container .CodeMirror-gutter,
  #texteditor-backdrop #texteditor-container .CodeMirror-gutters {
    background-color: #fff;
  }
}
@media not print {
  #texteditor-backdrop #texteditor-container {
    padding: 0px;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
    box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
  }
}
/*!
*
* IPython notebook
*
*/
/* CSS font colors for translated ANSI colors. */
.ansibold {
  font-weight: bold;
}
/* use dark versions for foreground, to improve visibility */
.ansiblack {
  color: black;
}
.ansired {
  color: darkred;
}
.ansigreen {
  color: darkgreen;
}
.ansiyellow {
  color: #c4a000;
}
.ansiblue {
  color: darkblue;
}
.ansipurple {
  color: darkviolet;
}
.ansicyan {
  color: steelblue;
}
.ansigray {
  color: gray;
}
/* and light for background, for the same reason */
.ansibgblack {
  background-color: black;
}
.ansibgred {
  background-color: red;
}
.ansibggreen {
  background-color: green;
}
.ansibgyellow {
  background-color: yellow;
}
.ansibgblue {
  background-color: blue;
}
.ansibgpurple {
  background-color: magenta;
}
.ansibgcyan {
  background-color: cyan;
}
.ansibggray {
  background-color: gray;
}
div.cell {
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
  display: box;
  box-orient: vertical;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  width: 100%;
  padding: 5px;
  /* This acts as a spacer between cells, that is outside the border */
  margin: 0px;
  outline: none;
  border-left-width: 1px;
  padding-left: 5px;
  background: linear-gradient(to right, transparent -40px, transparent 1px, transparent 1px, transparent 100%);
}
div.cell.jupyter-soft-selected {
  border-left-color: #90CAF9;
  border-left-color: #E3F2FD;
  border-left-width: 1px;
  padding-left: 5px;
  border-right-color: #E3F2FD;
  border-right-width: 1px;
  background: #E3F2FD;
}
@media print {
  div.cell.jupyter-soft-selected {
    border-color: transparent;
  }
}
div.cell.selected {
  border-color: #ababab;
  border-left-width: 0px;
  padding-left: 6px;
  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 5px, transparent 5px, transparent 100%);
}
@media print {
  div.cell.selected {
    border-color: transparent;
  }
}
div.cell.selected.jupyter-soft-selected {
  border-left-width: 0;
  padding-left: 6px;
  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 7px, #E3F2FD 7px, #E3F2FD 100%);
}
.edit_mode div.cell.selected {
  border-color: #66BB6A;
  border-left-width: 0px;
  padding-left: 6px;
  background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
}
@media print {
  .edit_mode div.cell.selected {
    border-color: transparent;
  }
}
.prompt {
  /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
  min-width: 14ex;
  /* This padding is tuned to match the padding on the CodeMirror editor. */
  padding: 0.4em;
  margin: 0px;
  font-family: monospace;
  text-align: right;
  /* This has to match that of the the CodeMirror class line-height below */
  line-height: 1.21429em;
  /* Don't highlight prompt number selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Use default cursor */
  cursor: default;
}
@media (max-width: 540px) {
  .prompt {
    text-align: left;
  }
}
div.inner_cell {
  min-width: 0;
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
  display: box;
  box-orient: vertical;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Old browsers */
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  /* Modern browsers */
  flex: 1;
}
/* input_area and input_prompt must match in top border and margin for alignment */
div.input_area {
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  background: #f7f7f7;
  line-height: 1.21429em;
}
/* This is needed so that empty prompt areas can collapse to zero height when there
   is no content in the output_subarea and the prompt. The main purpose of this is
   to make sure that empty JavaScript output_subareas have no height. */
div.prompt:empty {
  padding-top: 0;
  padding-bottom: 0;
}
div.unrecognized_cell {
  padding: 5px 5px 5px 0px;
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-align: stretch;
  display: box;
  box-orient: horizontal;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
div.unrecognized_cell .inner_cell {
  border-radius: 2px;
  padding: 5px;
  font-weight: bold;
  color: red;
  border: 1px solid #cfcfcf;
  background: #eaeaea;
}
div.unrecognized_cell .inner_cell a {
  color: inherit;
  text-decoration: none;
}
div.unrecognized_cell .inner_cell a:hover {
  color: inherit;
  text-decoration: none;
}
@media (max-width: 540px) {
  div.unrecognized_cell > div.prompt {
    display: none;
  }
}
div.code_cell {
  /* avoid page breaking on code cells when printing */
}
@media print {
  div.code_cell {
    page-break-inside: avoid;
  }
}
/* any special styling for code cells that are currently running goes here */
div.input {
  page-break-inside: avoid;
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-align: stretch;
  display: box;
  box-orient: horizontal;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
@media (max-width: 540px) {
  div.input {
    /* Old browsers */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-align: stretch;
    display: box;
    box-orient: vertical;
    box-align: stretch;
    /* Modern browsers */
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}
/* input_area and input_prompt must match in top border and margin for alignment */
div.input_prompt {
  color: #303F9F;
  border-top: 1px solid transparent;
}
div.input_area > div.highlight {
  margin: 0.4em;
  border: none;
  padding: 0px;
  background-color: transparent;
}
div.input_area > div.highlight > pre {
  margin: 0px;
  border: none;
  padding: 0px;
  background-color: transparent;
}
/* The following gets added to the <head> if it is detected that the user has a
 * monospace font with inconsistent normal/bold/italic height.  See
 * notebookmain.js.  Such fonts will have keywords vertically offset with
 * respect to the rest of the text.  The user should select a better font.
 * See: https://github.com/ipython/ipython/issues/1503
 *
 * .CodeMirror span {
 *      vertical-align: bottom;
 * }
 */
.CodeMirror {
  line-height: 1.21429em;
  /* Changed from 1em to our global default */
  font-size: 14px;
  height: auto;
  /* Changed to auto to autogrow */
  background: none;
  /* Changed from white to allow our bg to show through */
}
.CodeMirror-scroll {
  /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
  /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
  overflow-y: hidden;
  overflow-x: auto;
}
.CodeMirror-lines {
  /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
  /* we have set a different line-height and want this to scale with that. */
  padding: 0.4em;
}
.CodeMirror-linenumber {
  padding: 0 8px 0 4px;
}
.CodeMirror-gutters {
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
}
.CodeMirror pre {
  /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
  /* .CodeMirror-lines */
  padding: 0;
  border: 0;
  border-radius: 0;
}
/*

Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
Adapted from GitHub theme

*/
.highlight-base {
  color: #000;
}
.highlight-variable {
  color: #000;
}
.highlight-variable-2 {
  color: #1a1a1a;
}
.highlight-variable-3 {
  color: #333333;
}
.highlight-string {
  color: #BA2121;
}
.highlight-comment {
  color: #408080;
  font-style: italic;
}
.highlight-number {
  color: #080;
}
.highlight-atom {
  color: #88F;
}
.highlight-keyword {
  color: #008000;
  font-weight: bold;
}
.highlight-builtin {
  color: #008000;
}
.highlight-error {
  color: #f00;
}
.highlight-operator {
  color: #AA22FF;
  font-weight: bold;
}
.highlight-meta {
  color: #AA22FF;
}
/* previously not defined, copying from default codemirror */
.highlight-def {
  color: #00f;
}
.highlight-string-2 {
  color: #f50;
}
.highlight-qualifier {
  color: #555;
}
.highlight-bracket {
  color: #997;
}
.highlight-tag {
  color: #170;
}
.highlight-attribute {
  color: #00c;
}
.highlight-header {
  color: blue;
}
.highlight-quote {
  color: #090;
}
.highlight-link {
  color: #00c;
}
/* apply the same style to codemirror */
.cm-s-ipython span.cm-keyword {
  color: #008000;
  font-weight: bold;
}
.cm-s-ipython span.cm-atom {
  color: #88F;
}
.cm-s-ipython span.cm-number {
  color: #080;
}
.cm-s-ipython span.cm-def {
  color: #00f;
}
.cm-s-ipython span.cm-variable {
  color: #000;
}
.cm-s-ipython span.cm-operator {
  color: #AA22FF;
  font-weight: bold;
}
.cm-s-ipython span.cm-variable-2 {
  color: #1a1a1a;
}
.cm-s-ipython span.cm-variable-3 {
  color: #333333;
}
.cm-s-ipython span.cm-comment {
  color: #408080;
  font-style: italic;
}
.cm-s-ipython span.cm-string {
  color: #BA2121;
}
.cm-s-ipython span.cm-string-2 {
  color: #f50;
}
.cm-s-ipython span.cm-meta {
  color: #AA22FF;
}
.cm-s-ipython span.cm-qualifier {
  color: #555;
}
.cm-s-ipython span.cm-builtin {
  color: #008000;
}
.cm-s-ipython span.cm-bracket {
  color: #997;
}
.cm-s-ipython span.cm-tag {
  color: #170;
}
.cm-s-ipython span.cm-attribute {
  color: #00c;
}
.cm-s-ipython span.cm-header {
  color: blue;
}
.cm-s-ipython span.cm-quote {
  color: #090;
}
.cm-s-ipython span.cm-link {
  color: #00c;
}
.cm-s-ipython span.cm-error {
  color: #f00;
}
.cm-s-ipython span.cm-tab {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
  background-position: right;
  background-repeat: no-repeat;
}
div.output_wrapper {
  /* this position must be relative to enable descendents to be absolute within it */
  position: relative;
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
  display: box;
  box-orient: vertical;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 1;
}
/* class for the output area when it should be height-limited */
div.output_scroll {
  /* ideally, this would be max-height, but FF barfs all over that */
  height: 24em;
  /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
  width: 100%;
  overflow: auto;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
  display: block;
}
/* output div while it is collapsed */
div.output_collapsed {
  margin: 0px;
  padding: 0px;
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
  display: box;
  box-orient: vertical;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
div.out_prompt_overlay {
  height: 100%;
  padding: 0px 0.4em;
  position: absolute;
  border-radius: 2px;
}
div.out_prompt_overlay:hover {
  /* use inner shadow to get border that is computed the same on WebKit/FF */
  -webkit-box-shadow: inset 0 0 1px #000;
  box-shadow: inset 0 0 1px #000;
  background: rgba(240, 240, 240, 0.5);
}
div.output_prompt {
  color: #D84315;
}
/* This class is the outer container of all output sections. */
div.output_area {
  padding: 0px;
  page-break-inside: avoid;
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-align: stretch;
  display: box;
  box-orient: horizontal;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
div.output_area .MathJax_Display {
  text-align: left !important;
}
div.output_area .rendered_html table {
  margin-left: 0;
  margin-right: 0;
}
div.output_area .rendered_html img {
  margin-left: 0;
  margin-right: 0;
}
div.output_area img,
div.output_area svg {
  max-width: 100%;
  height: auto;
}
div.output_area img.unconfined,
div.output_area svg.unconfined {
  max-width: none;
}
/* This is needed to protect the pre formating from global settings such
   as that of bootstrap */
.output {
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
  display: box;
  box-orient: vertical;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
@media (max-width: 540px) {
  div.output_area {
    /* Old browsers */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-align: stretch;
    display: box;
    box-orient: vertical;
    box-align: stretch;
    /* Modern browsers */
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}
div.output_area pre {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  color: black;
  background-color: transparent;
  border-radius: 0;
}
/* This class is for the output subarea inside the output_area and after
   the prompt div. */
div.output_subarea {
  overflow-x: auto;
  padding: 0.4em;
  /* Old browsers */
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  /* Modern browsers */
  flex: 1;
  max-width: calc(100% - 14ex);
}
div.output_scroll div.output_subarea {
  overflow-x: visible;
}
/* The rest of the output_* classes are for special styling of the different
   output types */
/* all text output has this class: */
div.output_text {
  text-align: left;
  color: #000;
  /* This has to match that of the the CodeMirror class line-height below */
  line-height: 1.21429em;
}
/* stdout/stderr are 'text' as well as 'stream', but execute_result/error are *not* streams */
div.output_stderr {
  background: #fdd;
  /* very light red background for stderr */
}
div.output_latex {
  text-align: left;
}
/* Empty output_javascript divs should have no height */
div.output_javascript:empty {
  padding: 0;
}
.js-error {
  color: darkred;
}
/* raw_input styles */
div.raw_input_container {
  line-height: 1.21429em;
  padding-top: 5px;
}
pre.raw_input_prompt {
  /* nothing needed here. */
}
input.raw_input {
  font-family: monospace;
  font-size: inherit;
  color: inherit;
  width: auto;
  /* make sure input baseline aligns with prompt */
  vertical-align: baseline;
  /* padding + margin = 0.5em between prompt and cursor */
  padding: 0em 0.25em;
  margin: 0em 0.25em;
}
input.raw_input:focus {
  box-shadow: none;
}
p.p-space {
  margin-bottom: 10px;
}
div.output_unrecognized {
  padding: 5px;
  font-weight: bold;
  color: red;
}
div.output_unrecognized a {
  color: inherit;
  text-decoration: none;
}
div.output_unrecognized a:hover {
  color: inherit;
  text-decoration: none;
}
.rendered_html {
  color: #000;
  /* any extras will just be numbers: */
}
.rendered_html em {
  font-style: italic;
}
.rendered_html strong {
  font-weight: bold;
}
.rendered_html u {
  text-decoration: underline;
}
.rendered_html :link {
  text-decoration: underline;
}
.rendered_html :visited {
  text-decoration: underline;
}
.rendered_html h1 {
  font-size: 185.7%;
  margin: 1.08em 0 0 0;
  font-weight: bold;
  line-height: 1.0;
}
.rendered_html h2 {
  font-size: 157.1%;
  margin: 1.27em 0 0 0;
  font-weight: bold;
  line-height: 1.0;
}
.rendered_html h3 {
  font-size: 128.6%;
  margin: 1.55em 0 0 0;
  font-weight: bold;
  line-height: 1.0;
}
.rendered_html h4 {
  font-size: 100%;
  margin: 2em 0 0 0;
  font-weight: bold;
  line-height: 1.0;
}
.rendered_html h5 {
  font-size: 100%;
  margin: 2em 0 0 0;
  font-weight: bold;
  line-height: 1.0;
  font-style: italic;
}
.rendered_html h6 {
  font-size: 100%;
  margin: 2em 0 0 0;
  font-weight: bold;
  line-height: 1.0;
  font-style: italic;
}
.rendered_html h1:first-child {
  margin-top: 0.538em;
}
.rendered_html h2:first-child {
  margin-top: 0.636em;
}
.rendered_html h3:first-child {
  margin-top: 0.777em;
}
.rendered_html h4:first-child {
  margin-top: 1em;
}
.rendered_html h5:first-child {
  margin-top: 1em;
}
.rendered_html h6:first-child {
  margin-top: 1em;
}
.rendered_html ul {
  list-style: disc;
  margin: 0em 2em;
  padding-left: 0px;
}
.rendered_html ul ul {
  list-style: square;
  margin: 0em 2em;
}
.rendered_html ul ul ul {
  list-style: circle;
  margin: 0em 2em;
}
.rendered_html ol {
  list-style: decimal;
  margin: 0em 2em;
  padding-left: 0px;
}
.rendered_html ol ol {
  list-style: upper-alpha;
  margin: 0em 2em;
}
.rendered_html ol ol ol {
  list-style: lower-alpha;
  margin: 0em 2em;
}
.rendered_html ol ol ol ol {
  list-style: lower-roman;
  margin: 0em 2em;
}
.rendered_html ol ol ol ol ol {
  list-style: decimal;
  margin: 0em 2em;
}
.rendered_html * + ul {
  margin-top: 1em;
}
.rendered_html * + ol {
  margin-top: 1em;
}
.rendered_html hr {
  color: black;
  background-color: black;
}
.rendered_html pre {
  margin: 1em 2em;
}
.rendered_html pre,
.rendered_html code {
  border: 0;
  background-color: #fff;
  color: #000;
  font-size: 100%;
  padding: 0px;
}
.rendered_html blockquote {
  margin: 1em 2em;
}
.rendered_html table {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  border-collapse: collapse;
}
.rendered_html tr,
.rendered_html th,
.rendered_html td {
  border: 1px solid black;
  border-collapse: collapse;
  margin: 1em 2em;
}
.rendered_html td,
.rendered_html th {
  text-align: left;
  vertical-align: middle;
  padding: 4px;
}
.rendered_html th {
  font-weight: bold;
}
.rendered_html * + table {
  margin-top: 1em;
}
.rendered_html p {
  text-align: left;
}
.rendered_html * + p {
  margin-top: 1em;
}
.rendered_html img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.rendered_html * + img {
  margin-top: 1em;
}
.rendered_html img,
.rendered_html svg {
  max-width: 100%;
  height: auto;
}
.rendered_html img.unconfined,
.rendered_html svg.unconfined {
  max-width: none;
}
div.text_cell {
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-align: stretch;
  display: box;
  box-orient: horizontal;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
@media (max-width: 540px) {
  div.text_cell > div.prompt {
    display: none;
  }
}
div.text_cell_render {
  /*font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
  outline: none;
  resize: none;
  width: inherit;
  border-style: none;
  padding: 0.5em 0.5em 0.5em 0.4em;
  color: #000;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
a.anchor-link:link {
  text-decoration: none;
  padding: 0px 20px;
  visibility: hidden;
}
h1:hover .anchor-link,
h2:hover .anchor-link,
h3:hover .anchor-link,
h4:hover .anchor-link,
h5:hover .anchor-link,
h6:hover .anchor-link {
  visibility: visible;
}
.text_cell.rendered .input_area {
  display: none;
}
.text_cell.rendered .rendered_html {
  overflow-x: auto;
  overflow-y: hidden;
}
.text_cell.unrendered .text_cell_render {
  display: none;
}
.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.cm-header-1 {
  font-size: 185.7%;
}
.cm-header-2 {
  font-size: 157.1%;
}
.cm-header-3 {
  font-size: 128.6%;
}
.cm-header-4 {
  font-size: 110%;
}
.cm-header-5 {
  font-size: 100%;
  font-style: italic;
}
.cm-header-6 {
  font-size: 100%;
  font-style: italic;
}
/*!
*
* IPython notebook webapp
*
*/
@media (max-width: 767px) {
  .notebook_app {
    padding-left: 0px;
    padding-right: 0px;
  }
}
#ipython-main-app {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: 100%;
}
div#notebook_panel {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: 100%;
}
div#notebook {
  font-size: 14px;
  line-height: 20px;
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%;
  /* This spaces the page away from the edge of the notebook area */
  padding-top: 20px;
  margin: 0px;
  outline: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  min-height: 100%;
}
@media not print {
  #notebook-container {
    padding: 15px;
    background-color: #fff;
    min-height: 0;
    -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
    box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
  }
}
@media print {
  #notebook-container {
    width: 100%;
  }
}
div.ui-widget-content {
  border: 1px solid #ababab;
  outline: none;
}
pre.dialog {
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0.4em;
  padding-left: 2em;
}
p.dialog {
  padding: 0.2em;
}
/* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
   to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
 */
pre,
code,
kbd,
samp {
  white-space: pre-wrap;
}
#fonttest {
  font-family: monospace;
}
p {
  margin-bottom: 0;
}
.end_space {
  min-height: 100px;
  transition: height .2s ease;
}
.notebook_app > #header {
  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
}
@media not print {
  .notebook_app {
    background-color: #EEE;
  }
}
kbd {
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  margin: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 1px;
  padding-bottom: 1px;
}
/* CSS for the cell toolbar */
.celltoolbar {
  border: thin solid #CFCFCF;
  border-bottom: none;
  background: #EEE;
  border-radius: 2px 2px 0px 0px;
  width: 100%;
  height: 29px;
  padding-right: 4px;
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-align: stretch;
  display: box;
  box-orient: horizontal;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* Old browsers */
  -webkit-box-pack: end;
  -moz-box-pack: end;
  box-pack: end;
  /* Modern browsers */
  justify-content: flex-end;
  display: -webkit-flex;
}
@media print {
  .celltoolbar {
    display: none;
  }
}
.ctb_hideshow {
  display: none;
  vertical-align: bottom;
}
/* ctb_show is added to the ctb_hideshow div to show the cell toolbar.
   Cell toolbars are only shown when the ctb_global_show class is also set.
*/
.ctb_global_show .ctb_show.ctb_hideshow {
  display: block;
}
.ctb_global_show .ctb_show + .input_area,
.ctb_global_show .ctb_show + div.text_cell_input,
.ctb_global_show .ctb_show ~ div.text_cell_render {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
.ctb_global_show .ctb_show ~ div.text_cell_render {
  border: 1px solid #cfcfcf;
}
.celltoolbar {
  font-size: 87%;
  padding-top: 3px;
}
.celltoolbar select {
  display: block;
  width: 100%;
  height: 32px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 1px;
  width: inherit;
  font-size: inherit;
  height: 22px;
  padding: 0px;
  display: inline-block;
}
.celltoolbar select:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.celltoolbar select::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.celltoolbar select:-ms-input-placeholder {
  color: #999;
}
.celltoolbar select::-webkit-input-placeholder {
  color: #999;
}
.celltoolbar select::-ms-expand {
  border: 0;
  background-color: transparent;
}
.celltoolbar select[disabled],
.celltoolbar select[readonly],
fieldset[disabled] .celltoolbar select {
  background-color: #eeeeee;
  opacity: 1;
}
.celltoolbar select[disabled],
fieldset[disabled] .celltoolbar select {
  cursor: not-allowed;
}
textarea.celltoolbar select {
  height: auto;
}
select.celltoolbar select {
  height: 30px;
  line-height: 30px;
}
textarea.celltoolbar select,
select[multiple].celltoolbar select {
  height: auto;
}
.celltoolbar label {
  margin-left: 5px;
  margin-right: 5px;
}
.completions {
  position: absolute;
  z-index: 110;
  overflow: hidden;
  border: 1px solid #ababab;
  border-radius: 2px;
  -webkit-box-shadow: 0px 6px 10px -1px #adadad;
  box-shadow: 0px 6px 10px -1px #adadad;
  line-height: 1;
}
.completions select {
  background: white;
  outline: none;
  border: none;
  padding: 0px;
  margin: 0px;
  overflow: auto;
  font-family: monospace;
  font-size: 110%;
  color: #000;
  width: auto;
}
.completions select option.context {
  color: #286090;
}
#kernel_logo_widget {
  float: right !important;
  float: right;
}
#kernel_logo_widget .current_kernel_logo {
  display: none;
  margin-top: -1px;
  margin-bottom: -1px;
  width: 32px;
  height: 32px;
}
#menubar {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin-top: 1px;
}
#menubar .navbar {
  border-top: 1px;
  border-radius: 0px 0px 2px 2px;
  margin-bottom: 0px;
}
#menubar .navbar-toggle {
  float: left;
  padding-top: 7px;
  padding-bottom: 7px;
  border: none;
}
#menubar .navbar-collapse {
  clear: left;
}
.nav-wrapper {
  border-bottom: 1px solid #e7e7e7;
}
i.menu-icon {
  padding-top: 4px;
}
ul#help_menu li a {
  overflow: hidden;
  padding-right: 2.2em;
}
ul#help_menu li a i {
  margin-right: -1.2em;
}
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}
.dropdown-submenu > a:after {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  content: "\f0da";
  float: right;
  color: #333333;
  margin-top: 2px;
  margin-right: -10px;
}
.dropdown-submenu > a:after.pull-left {
  margin-right: .3em;
}
.dropdown-submenu > a:after.pull-right {
  margin-left: .3em;
}
.dropdown-submenu:hover > a:after {
  color: #262626;
}
.dropdown-submenu.pull-left {
  float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
}
#notification_area {
  float: right !important;
  float: right;
  z-index: 10;
}
.indicator_area {
  float: right !important;
  float: right;
  color: #777;
  margin-left: 5px;
  margin-right: 5px;
  width: 11px;
  z-index: 10;
  text-align: center;
  width: auto;
}
#kernel_indicator {
  float: right !important;
  float: right;
  color: #777;
  margin-left: 5px;
  margin-right: 5px;
  width: 11px;
  z-index: 10;
  text-align: center;
  width: auto;
  border-left: 1px solid;
}
#kernel_indicator .kernel_indicator_name {
  padding-left: 5px;
  padding-right: 5px;
}
#modal_indicator {
  float: right !important;
  float: right;
  color: #777;
  margin-left: 5px;
  margin-right: 5px;
  width: 11px;
  z-index: 10;
  text-align: center;
  width: auto;
}
#readonly-indicator {
  float: right !important;
  float: right;
  color: #777;
  margin-left: 5px;
  margin-right: 5px;
  width: 11px;
  z-index: 10;
  text-align: center;
  width: auto;
  margin-top: 2px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  display: none;
}
.modal_indicator:before {
  width: 1.28571429em;
  text-align: center;
}
.edit_mode .modal_indicator:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f040";
}
.edit_mode .modal_indicator:before.pull-left {
  margin-right: .3em;
}
.edit_mode .modal_indicator:before.pull-right {
  margin-left: .3em;
}
.command_mode .modal_indicator:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: ' ';
}
.command_mode .modal_indicator:before.pull-left {
  margin-right: .3em;
}
.command_mode .modal_indicator:before.pull-right {
  margin-left: .3em;
}
.kernel_idle_icon:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f10c";
}
.kernel_idle_icon:before.pull-left {
  margin-right: .3em;
}
.kernel_idle_icon:before.pull-right {
  margin-left: .3em;
}
.kernel_busy_icon:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f111";
}
.kernel_busy_icon:before.pull-left {
  margin-right: .3em;
}
.kernel_busy_icon:before.pull-right {
  margin-left: .3em;
}
.kernel_dead_icon:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f1e2";
}
.kernel_dead_icon:before.pull-left {
  margin-right: .3em;
}
.kernel_dead_icon:before.pull-right {
  margin-left: .3em;
}
.kernel_disconnected_icon:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f127";
}
.kernel_disconnected_icon:before.pull-left {
  margin-right: .3em;
}
.kernel_disconnected_icon:before.pull-right {
  margin-left: .3em;
}
.notification_widget {
  color: #777;
  z-index: 10;
  background: rgba(240, 240, 240, 0.5);
  margin-right: 4px;
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.notification_widget:focus,
.notification_widget.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.notification_widget:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.notification_widget:active,
.notification_widget.active,
.open > .dropdown-toggle.notification_widget {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.notification_widget:active:hover,
.notification_widget.active:hover,
.open > .dropdown-toggle.notification_widget:hover,
.notification_widget:active:focus,
.notification_widget.active:focus,
.open > .dropdown-toggle.notification_widget:focus,
.notification_widget:active.focus,
.notification_widget.active.focus,
.open > .dropdown-toggle.notification_widget.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.notification_widget:active,
.notification_widget.active,
.open > .dropdown-toggle.notification_widget {
  background-image: none;
}
.notification_widget.disabled:hover,
.notification_widget[disabled]:hover,
fieldset[disabled] .notification_widget:hover,
.notification_widget.disabled:focus,
.notification_widget[disabled]:focus,
fieldset[disabled] .notification_widget:focus,
.notification_widget.disabled.focus,
.notification_widget[disabled].focus,
fieldset[disabled] .notification_widget.focus {
  background-color: #fff;
  border-color: #ccc;
}
.notification_widget .badge {
  color: #fff;
  background-color: #333;
}
.notification_widget.warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}
.notification_widget.warning:focus,
.notification_widget.warning.focus {
  color: #fff;
  background-color: #ec971f;
  border-color: #985f0d;
}
.notification_widget.warning:hover {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}
.notification_widget.warning:active,
.notification_widget.warning.active,
.open > .dropdown-toggle.notification_widget.warning {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}
.notification_widget.warning:active:hover,
.notification_widget.warning.active:hover,
.open > .dropdown-toggle.notification_widget.warning:hover,
.notification_widget.warning:active:focus,
.notification_widget.warning.active:focus,
.open > .dropdown-toggle.notification_widget.warning:focus,
.notification_widget.warning:active.focus,
.notification_widget.warning.active.focus,
.open > .dropdown-toggle.notification_widget.warning.focus {
  color: #fff;
  background-color: #d58512;
  border-color: #985f0d;
}
.notification_widget.warning:active,
.notification_widget.warning.active,
.open > .dropdown-toggle.notification_widget.warning {
  background-image: none;
}
.notification_widget.warning.disabled:hover,
.notification_widget.warning[disabled]:hover,
fieldset[disabled] .notification_widget.warning:hover,
.notification_widget.warning.disabled:focus,
.notification_widget.warning[disabled]:focus,
fieldset[disabled] .notification_widget.warning:focus,
.notification_widget.warning.disabled.focus,
.notification_widget.warning[disabled].focus,
fieldset[disabled] .notification_widget.warning.focus {
  background-color: #f0ad4e;
  border-color: #eea236;
}
.notification_widget.warning .badge {
  color: #f0ad4e;
  background-color: #fff;
}
.notification_widget.success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.notification_widget.success:focus,
.notification_widget.success.focus {
  color: #fff;
  background-color: #449d44;
  border-color: #255625;
}
.notification_widget.success:hover {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}
.notification_widget.success:active,
.notification_widget.success.active,
.open > .dropdown-toggle.notification_widget.success {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}
.notification_widget.success:active:hover,
.notification_widget.success.active:hover,
.open > .dropdown-toggle.notification_widget.success:hover,
.notification_widget.success:active:focus,
.notification_widget.success.active:focus,
.open > .dropdown-toggle.notification_widget.success:focus,
.notification_widget.success:active.focus,
.notification_widget.success.active.focus,
.open > .dropdown-toggle.notification_widget.success.focus {
  color: #fff;
  background-color: #398439;
  border-color: #255625;
}
.notification_widget.success:active,
.notification_widget.success.active,
.open > .dropdown-toggle.notification_widget.success {
  background-image: none;
}
.notification_widget.success.disabled:hover,
.notification_widget.success[disabled]:hover,
fieldset[disabled] .notification_widget.success:hover,
.notification_widget.success.disabled:focus,
.notification_widget.success[disabled]:focus,
fieldset[disabled] .notification_widget.success:focus,
.notification_widget.success.disabled.focus,
.notification_widget.success[disabled].focus,
fieldset[disabled] .notification_widget.success.focus {
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.notification_widget.success .badge {
  color: #5cb85c;
  background-color: #fff;
}
.notification_widget.info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}
.notification_widget.info:focus,
.notification_widget.info.focus {
  color: #fff;
  background-color: #31b0d5;
  border-color: #1b6d85;
}
.notification_widget.info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.notification_widget.info:active,
.notification_widget.info.active,
.open > .dropdown-toggle.notification_widget.info {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.notification_widget.info:active:hover,
.notification_widget.info.active:hover,
.open > .dropdown-toggle.notification_widget.info:hover,
.notification_widget.info:active:focus,
.notification_widget.info.active:focus,
.open > .dropdown-toggle.notification_widget.info:focus,
.notification_widget.info:active.focus,
.notification_widget.info.active.focus,
.open > .dropdown-toggle.notification_widget.info.focus {
  color: #fff;
  background-color: #269abc;
  border-color: #1b6d85;
}
.notification_widget.info:active,
.notification_widget.info.active,
.open > .dropdown-toggle.notification_widget.info {
  background-image: none;
}
.notification_widget.info.disabled:hover,
.notification_widget.info[disabled]:hover,
fieldset[disabled] .notification_widget.info:hover,
.notification_widget.info.disabled:focus,
.notification_widget.info[disabled]:focus,
fieldset[disabled] .notification_widget.info:focus,
.notification_widget.info.disabled.focus,
.notification_widget.info[disabled].focus,
fieldset[disabled] .notification_widget.info.focus {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.notification_widget.info .badge {
  color: #5bc0de;
  background-color: #fff;
}
.notification_widget.danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
.notification_widget.danger:focus,
.notification_widget.danger.focus {
  color: #fff;
  background-color: #c9302c;
  border-color: #761c19;
}
.notification_widget.danger:hover {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}
.notification_widget.danger:active,
.notification_widget.danger.active,
.open > .dropdown-toggle.notification_widget.danger {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}
.notification_widget.danger:active:hover,
.notification_widget.danger.active:hover,
.open > .dropdown-toggle.notification_widget.danger:hover,
.notification_widget.danger:active:focus,
.notification_widget.danger.active:focus,
.open > .dropdown-toggle.notification_widget.danger:focus,
.notification_widget.danger:active.focus,
.notification_widget.danger.active.focus,
.open > .dropdown-toggle.notification_widget.danger.focus {
  color: #fff;
  background-color: #ac2925;
  border-color: #761c19;
}
.notification_widget.danger:active,
.notification_widget.danger.active,
.open > .dropdown-toggle.notification_widget.danger {
  background-image: none;
}
.notification_widget.danger.disabled:hover,
.notification_widget.danger[disabled]:hover,
fieldset[disabled] .notification_widget.danger:hover,
.notification_widget.danger.disabled:focus,
.notification_widget.danger[disabled]:focus,
fieldset[disabled] .notification_widget.danger:focus,
.notification_widget.danger.disabled.focus,
.notification_widget.danger[disabled].focus,
fieldset[disabled] .notification_widget.danger.focus {
  background-color: #d9534f;
  border-color: #d43f3a;
}
.notification_widget.danger .badge {
  color: #d9534f;
  background-color: #fff;
}
div#pager {
  background-color: #fff;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  display: none;
  position: fixed;
  bottom: 0px;
  width: 100%;
  max-height: 50%;
  padding-top: 8px;
  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
  /* Display over codemirror */
  z-index: 100;
  /* Hack which prevents jquery ui resizable from changing top. */
  top: auto !important;
}
div#pager pre {
  line-height: 1.21429em;
  color: #000;
  background-color: #f7f7f7;
  padding: 0.4em;
}
div#pager #pager-button-area {
  position: absolute;
  top: 8px;
  right: 20px;
}
div#pager #pager-contents {
  position: relative;
  overflow: auto;
  width: 100%;
  height: 100%;
}
div#pager #pager-contents #pager-container {
  position: relative;
  padding: 15px 0px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
div#pager .ui-resizable-handle {
  top: 0px;
  height: 8px;
  background: #f7f7f7;
  border-top: 1px solid #cfcfcf;
  border-bottom: 1px solid #cfcfcf;
  /* This injects handle bars (a short, wide = symbol) for 
        the resize handle. */
}
div#pager .ui-resizable-handle::after {
  content: '';
  top: 2px;
  left: 50%;
  height: 3px;
  width: 30px;
  margin-left: -15px;
  position: absolute;
  border-top: 1px solid #cfcfcf;
}
.quickhelp {
  /* Old browsers */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-align: stretch;
  display: box;
  box-orient: horizontal;
  box-align: stretch;
  /* Modern browsers */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  line-height: 1.8em;
}
.shortcut_key {
  display: inline-block;
  width: 21ex;
  text-align: right;
  font-family: monospace;
}
.shortcut_descr {
  display: inline-block;
  /* Old browsers */
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  /* Modern browsers */
  flex: 1;
}
span.save_widget {
  margin-top: 6px;
}
span.save_widget span.filename {
  height: 1em;
  line-height: 1em;
  padding: 3px;
  margin-left: 16px;
  border: none;
  font-size: 146.5%;
  border-radius: 2px;
}
span.save_widget span.filename:hover {
  background-color: #e6e6e6;
}
span.checkpoint_status,
span.autosave_status {
  font-size: small;
}
@media (max-width: 767px) {
  span.save_widget {
    font-size: small;
  }
  span.checkpoint_status,
  span.autosave_status {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  span.checkpoint_status {
    display: none;
  }
  span.autosave_status {
    font-size: x-small;
  }
}
.toolbar {
  padding: 0px;
  margin-left: -5px;
  margin-top: 2px;
  margin-bottom: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.toolbar select,
.toolbar label {
  width: auto;
  vertical-align: middle;
  margin-right: 2px;
  margin-bottom: 0px;
  display: inline;
  font-size: 92%;
  margin-left: 0.3em;
  margin-right: 0.3em;
  padding: 0px;
  padding-top: 3px;
}
.toolbar .btn {
  padding: 2px 8px;
}
.toolbar .btn-group {
  margin-top: 0px;
  margin-left: 5px;
}
#maintoolbar {
  margin-bottom: -3px;
  margin-top: -8px;
  border: 0px;
  min-height: 27px;
  margin-left: 0px;
  padding-top: 11px;
  padding-bottom: 3px;
}
#maintoolbar .navbar-text {
  float: none;
  vertical-align: middle;
  text-align: right;
  margin-left: 5px;
  margin-right: 0px;
  margin-top: 0px;
}
.select-xs {
  height: 24px;
}
.pulse,
.dropdown-menu > li > a.pulse,
li.pulse > a.dropdown-toggle,
li.pulse.open > a.dropdown-toggle {
  background-color: #F37626;
  color: white;
}
/**
 * Primary styles
 *
 * Author: Jupyter Development Team
 */
/** WARNING IF YOU ARE EDITTING THIS FILE, if this is a .css file, It has a lot
 * of chance of beeing generated from the ../less/[samename].less file, you can
 * try to get back the less file by reverting somme commit in history
 **/
/*
 * We'll try to get something pretty, so we
 * have some strange css to have the scroll bar on
 * the left with fix button on the top right of the tooltip
 */
@-moz-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*properties of tooltip after "expand"*/
.bigtooltip {
  overflow: auto;
  height: 200px;
  -webkit-transition-property: height;
  -webkit-transition-duration: 500ms;
  -moz-transition-property: height;
  -moz-transition-duration: 500ms;
  transition-property: height;
  transition-duration: 500ms;
}
/*properties of tooltip before "expand"*/
.smalltooltip {
  -webkit-transition-property: height;
  -webkit-transition-duration: 500ms;
  -moz-transition-property: height;
  -moz-transition-duration: 500ms;
  transition-property: height;
  transition-duration: 500ms;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 80px;
}
.tooltipbuttons {
  position: absolute;
  padding-right: 15px;
  top: 0px;
  right: 0px;
}
.tooltiptext {
  /*avoid the button to overlap on some docstring*/
  padding-right: 30px;
}
.ipython_tooltip {
  max-width: 700px;
  /*fade-in animation when inserted*/
  -webkit-animation: fadeOut 400ms;
  -moz-animation: fadeOut 400ms;
  animation: fadeOut 400ms;
  -webkit-animation: fadeIn 400ms;
  -moz-animation: fadeIn 400ms;
  animation: fadeIn 400ms;
  vertical-align: middle;
  background-color: #f7f7f7;
  overflow: visible;
  border: #ababab 1px solid;
  outline: none;
  padding: 3px;
  margin: 0px;
  padding-left: 7px;
  font-family: monospace;
  min-height: 50px;
  -moz-box-shadow: 0px 6px 10px -1px #adadad;
  -webkit-box-shadow: 0px 6px 10px -1px #adadad;
  box-shadow: 0px 6px 10px -1px #adadad;
  border-radius: 2px;
  position: absolute;
  z-index: 1000;
}
.ipython_tooltip a {
  float: right;
}
.ipython_tooltip .tooltiptext pre {
  border: 0;
  border-radius: 0;
  font-size: 100%;
  background-color: #f7f7f7;
}
.pretooltiparrow {
  left: 0px;
  margin: 0px;
  top: -16px;
  width: 40px;
  height: 16px;
  overflow: hidden;
  position: absolute;
}
.pretooltiparrow:before {
  background-color: #f7f7f7;
  border: 1px #ababab solid;
  z-index: 11;
  content: "";
  position: absolute;
  left: 15px;
  top: 10px;
  width: 25px;
  height: 25px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}
ul.typeahead-list i {
  margin-left: -10px;
  width: 18px;
}
ul.typeahead-list {
  max-height: 80vh;
  overflow: auto;
}
ul.typeahead-list > li > a {
  /** Firefox bug **/
  /* see https://github.com/jupyter/notebook/issues/559 */
  white-space: normal;
}
.cmd-palette .modal-body {
  padding: 7px;
}
.cmd-palette form {
  background: white;
}
.cmd-palette input {
  outline: none;
}
.no-shortcut {
  display: none;
}
.command-shortcut:before {
  content: "(command)";
  padding-right: 3px;
  color: #777777;
}
.edit-shortcut:before {
  content: "(edit)";
  padding-right: 3px;
  color: #777777;
}
#find-and-replace #replace-preview .match,
#find-and-replace #replace-preview .insert {
  background-color: #BBDEFB;
  border-color: #90CAF9;
  border-style: solid;
  border-width: 1px;
  border-radius: 0px;
}
#find-and-replace #replace-preview .replace .match {
  background-color: #FFCDD2;
  border-color: #EF9A9A;
  border-radius: 0px;
}
#find-and-replace #replace-preview .replace .insert {
  background-color: #C8E6C9;
  border-color: #A5D6A7;
  border-radius: 0px;
}
#find-and-replace #replace-preview {
  max-height: 60vh;
  overflow: auto;
}
#find-and-replace #replace-preview pre {
  padding: 5px 10px;
}
.terminal-app {
  background: #EEE;
}
.terminal-app #header {
  background: #fff;
  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
}
.terminal-app .terminal {
  width: 100%;
  float: left;
  font-family: monospace;
  color: white;
  background: black;
  padding: 0.4em;
  border-radius: 2px;
  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4);
  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4);
}
.terminal-app .terminal,
.terminal-app .terminal dummy-screen {
  line-height: 1em;
  font-size: 14px;
}
.terminal-app .terminal .xterm-rows {
  padding: 10px;
}
.terminal-app .terminal-cursor {
  color: black;
  background: white;
}
.terminal-app #terminado-container {
  margin-top: 20px;
}
/*# sourceMappingURL=style.min.css.map */
    </style>
<style type="text/css">
    pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight { background: #f8f8f8; }
.highlight .c { color: #3D7B7B; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #666666 } /* Operator */
.highlight .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #9C6500 } /* Comment.Preproc */
.highlight .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.highlight .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #E40000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #008400 } /* Generic.Inserted */
.highlight .go { color: #717171 } /* Generic.Output */
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #0044DD } /* Generic.Traceback */
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008000 } /* Keyword.Pseudo */
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #B00040 } /* Keyword.Type */
.highlight .m { color: #666666 } /* Literal.Number */
.highlight .s { color: #BA2121 } /* Literal.String */
.highlight .na { color: #687822 } /* Name.Attribute */
.highlight .nb { color: #008000 } /* Name.Builtin */
.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
.highlight .no { color: #880000 } /* Name.Constant */
.highlight .nd { color: #AA22FF } /* Name.Decorator */
.highlight .ni { color: #717171; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0000FF } /* Name.Function */
.highlight .nl { color: #767600 } /* Name.Label */
.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #19177C } /* Name.Variable */
.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #666666 } /* Literal.Number.Bin */
.highlight .mf { color: #666666 } /* Literal.Number.Float */
.highlight .mh { color: #666666 } /* Literal.Number.Hex */
.highlight .mi { color: #666666 } /* Literal.Number.Integer */
.highlight .mo { color: #666666 } /* Literal.Number.Oct */
.highlight .sa { color: #BA2121 } /* Literal.String.Affix */
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
.highlight .sc { color: #BA2121 } /* Literal.String.Char */
.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
.highlight .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
.highlight .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.highlight .sx { color: #008000 } /* Literal.String.Other */
.highlight .sr { color: #A45A77 } /* Literal.String.Regex */
.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
.highlight .ss { color: #19177C } /* Literal.String.Symbol */
.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0000FF } /* Name.Function.Magic */
.highlight .vc { color: #19177C } /* Name.Variable.Class */
.highlight .vg { color: #19177C } /* Name.Variable.Global */
.highlight .vi { color: #19177C } /* Name.Variable.Instance */
.highlight .vm { color: #19177C } /* Name.Variable.Magic */
.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
    </style>
<style type="text/css">

/* Temporary definitions which will become obsolete with Notebook release 5.0 */
.ansi-black-fg { color: #3E424D; }
.ansi-black-bg { background-color: #3E424D; }
.ansi-black-intense-fg { color: #282C36; }
.ansi-black-intense-bg { background-color: #282C36; }
.ansi-red-fg { color: #E75C58; }
.ansi-red-bg { background-color: #E75C58; }
.ansi-red-intense-fg { color: #B22B31; }
.ansi-red-intense-bg { background-color: #B22B31; }
.ansi-green-fg { color: #00A250; }
.ansi-green-bg { background-color: #00A250; }
.ansi-green-intense-fg { color: #007427; }
.ansi-green-intense-bg { background-color: #007427; }
.ansi-yellow-fg { color: #DDB62B; }
.ansi-yellow-bg { background-color: #DDB62B; }
.ansi-yellow-intense-fg { color: #B27D12; }
.ansi-yellow-intense-bg { background-color: #B27D12; }
.ansi-blue-fg { color: #208FFB; }
.ansi-blue-bg { background-color: #208FFB; }
.ansi-blue-intense-fg { color: #0065CA; }
.ansi-blue-intense-bg { background-color: #0065CA; }
.ansi-magenta-fg { color: #D160C4; }
.ansi-magenta-bg { background-color: #D160C4; }
.ansi-magenta-intense-fg { color: #A03196; }
.ansi-magenta-intense-bg { background-color: #A03196; }
.ansi-cyan-fg { color: #60C6C8; }
.ansi-cyan-bg { background-color: #60C6C8; }
.ansi-cyan-intense-fg { color: #258F8F; }
.ansi-cyan-intense-bg { background-color: #258F8F; }
.ansi-white-fg { color: #C5C1B4; }
.ansi-white-bg { background-color: #C5C1B4; }
.ansi-white-intense-fg { color: #A1A6B2; }
.ansi-white-intense-bg { background-color: #A1A6B2; }

.ansi-bold { font-weight: bold; }

    </style>

<style type="text/css">
/* Overrides of notebook CSS for static HTML export */
body {
  overflow: visible;
  padding: 8px;
}

div#notebook {
  overflow: visible;
  border-top: none;
}@media print {
  div.cell {
    display: block;
    page-break-inside: avoid;
  }
  div.output_wrapper {
    display: block;
    page-break-inside: avoid;
  }
  div.output {
    display: block;
    page-break-inside: avoid;
  }
}
</style>

<!-- Custom stylesheet, it must be in the same directory as the html file -->
<link rel="stylesheet" href="custom.css">

<!-- Load mathjax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML"></script>
<!-- MathJax configuration -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true,
        processEnvironments: true
    },
    // Center justify equations in code and markdown cells. Elsewhere
    // we use CSS to left justify single line equations in code cells.
    displayAlign: 'center',
    "HTML-CSS": {
        styles: {'.MathJax_Display': {"margin": 0}},
        linebreaks: { automatic: true }
    }
});
</script>
<!-- End of mathjax configuration --><script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<!--[if IE lte 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<style type="text/css">
.ipyfigure { display: -ms-flex; display: -webkit-flex; display: flex;}
.ipyfigure>div { flex:1; }
.ipytable { display: -ms-flex; display: -webkit-flex; display: flex;}
.ipytable>div { flex:1; }

</style>

<link href='https://fonts.googleapis.com/css?family=Fira+Mono:400,500,700|Patua+One|Source+Code+Pro|Open+Sans' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<meta name="theme-color" content="#bb0000" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#cc0000" media="(prefers-color-scheme: dark)">

<meta property="og:url" content="https://www.fuzzingbook.org/beta/html/GreyboxGrammarFuzzer.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Greybox Fuzzing with Grammars - The Fuzzing Book" />
<meta property="og:description" content="In this chapter, we introduce important extensions to our syntactic fuzzing techniques, all leveraging syntactic parts of existing inputs.1. We show how to leverage dictionaries of input fragments during fuzzing. The idea is to integrate such dictionaries into a mutator, which would then inject these fragments (typically keywords and other items of importance) into population.2. We show how to combine parsing and fuzzing with grammars.  This allows mutating existing inputs while preserving syntactical correctness, and to reuse fragments from existing inputs while generating new ones.  The combination of language-based parsing and generating, as demonstrated in this chapter, has been highly successful in practice: The LangFuzz fuzzer for JavaScript has found more than 2,600 bugs in JavaScript interpreters this way.3. In the previous chapters, we have used grammars in a black-box manner – that is, we have used them to generate inputs regardless of the program being tested.  In this chapter, we introduce mutational greybox fuzzing with grammars: Techniques that make use of feedback from the program under test to guide test generations towards specific goals.  As in lexical greybox fuzzing, this feedback is mostly coverage, allowing us to direct grammar-based testing towards uncovered code parts. This part is inspired by the AFLSmart fuzzer, which combines parsing and mutational fuzzing.Prerequisites We build on several concepts from the chapter on greybox fuzzing (without grammars). As the title suggests, you should know how to fuzz with grammars from the chapter on grammars." />
<meta property="og:image" content="https://www.fuzzingbook.org/beta/html/PICS/wordcloud.png" />

<meta name="twitter:dnt" content="on">

<link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-touch-icon.png">

<meta name="msapplication-TileColor" content="#B03A2E">
<meta name="msapplication-config" content="favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">

<meta name="viewport" content="width=device-width, initial-scale=1"></head>
 <body>

    <script>
    var close_menus = function() {
        /* doesn't work yet - AZ
        console.log("Closing menus")
        var cssmenu = document.getElementById("cssmenu")
        var all_items = cssmenu.getElementsByTagName("li");
        var i;
        for (i = 0; i < all_items.length; i++) {
            item = all_items[i];
            // console.log("<li>: ")
            // console.log(item.innerHTML);
            var j;
            var all_ul = item.getElementsByTagName("ul");
            for (j = 0; j < all_ul.length; j++) {
                console.log("<ul>: ")
                console.log(all_ul[j].innerHTML);
                all_ul[j].style.display = "none";
            }
            var all_ol = item.getElementsByTagName("ol");
            for (j = 0; j < all_ol.length; j++) {
                console.log("<ol>: ")
                console.log(all_ol[j].innerHTML);
                all_ol[j].style.display = "none";
            }
        }
        */
    };

    $( document ).ready( close_menus );

    // Let navbar fade away when scrolling down
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
        var currentScrollPos = window.pageYOffset;
        if (currentScrollPos > 10 && currentScrollPos > prevScrollpos) {
            // Hide navbar
            var cssmenu = document.getElementById("cssmenu")
            cssmenu.style.opacity = 0;

            // When scrolling, also close all sub-menus
            close_menus();
        }
        else {
            // Make navbar visible
            document.getElementById("cssmenu").style.opacity = 1;
        }
        prevScrollpos = currentScrollPos;
    };
    </script>
    
<nav>
<div id="cssmenu">
  <ul>
     <li class="has-sub"><a href="#"><span title="The Fuzzing Book"><i class="fa fa-fw fa-bars"></i> </span><span class="menu_1">The Fuzzing Book&nbsp;<i class="fa fa-fw fa-wrench"></i></span></a>
        <ol>
           
<li><a href="https://www.fuzzingbook.org/beta/"><span class="part_number"><i class="fa fa-fw fa-home"></i></span> About this book</a></li>
<li><a href="https://www.fuzzingbook.org/beta/html/00_Table_of_Contents.html"><i class="fa fa-fw fa-sitemap"></i></span> Sitemap</a></li>
<li class="has-sub"><a href="01_Intro.html" class="chapters"><span class="part_number">I</span> Whetting Your Appetite <i class="fa fa-fw fa-caret-right"></i></a>
<ul>
<li><a href="Tours.html">Tours through the Book</a></li>
<li><a href="Intro_Testing.html">Introduction to Software Testing</a></li>
</ul><li class="has-sub"><a href="02_Lexical_Fuzzing.html" class="chapters"><span class="part_number">II</span> Lexical Fuzzing <i class="fa fa-fw fa-caret-right"></i></a>
<ul>
<li><a href="Fuzzer.html">Fuzzing: Breaking Things with Random Inputs</a></li>
<li><a href="Coverage.html">Code Coverage</a></li>
<li><a href="MutationFuzzer.html">Mutation-Based Fuzzing</a></li>
<li><a href="GreyboxFuzzer.html">Greybox Fuzzing</a></li>
<li><a href="SearchBasedFuzzer.html">Search-Based Fuzzing</a></li>
<li><a href="MutationAnalysis.html">Mutation Analysis</a></li>
</ul><li class="has-sub"><a href="03_Syntactical_Fuzzing.html" class="chapters"><span class="part_number">III</span> Syntactic Fuzzing <i class="fa fa-fw fa-caret-right"></i></a>
<ul>
<li><a href="Grammars.html">Fuzzing with Grammars</a></li>
<li><a href="GrammarFuzzer.html">Efficient Grammar Fuzzing</a></li>
<li><a href="GrammarCoverageFuzzer.html">Grammar Coverage</a></li>
<li><a href="Parser.html">Parsing Inputs</a></li>
<li><a href="ProbabilisticGrammarFuzzer.html">Probabilistic Grammar Fuzzing</a></li>
<li><a href="GeneratorGrammarFuzzer.html">Fuzzing with Generators</a></li>
<li><a href="GreyboxGrammarFuzzer.html" class="this_page">Greybox Fuzzing with Grammars</a></li>
<li><a href="Reducer.html">Reducing Failure-Inducing Inputs</a></li>
</ul><li class="has-sub"><a href="04_Semantical_Fuzzing.html" class="chapters"><span class="part_number">IV</span> Semantic Fuzzing <i class="fa fa-fw fa-caret-right"></i></a>
<ul>
<li><a href="FuzzingWithConstraints.html">Fuzzing with Constraints</a></li>
<li><a href="GrammarMiner.html">Mining Input Grammars</a></li>
<li><a href="InformationFlow.html">Tracking Information Flow</a></li>
<li><a href="ConcolicFuzzer.html">Concolic Fuzzing</a></li>
<li><a href="SymbolicFuzzer.html">Symbolic Fuzzing</a></li>
<li><a href="DynamicInvariants.html">Mining Function Specifications</a></li>
</ul><li class="has-sub"><a href="05_Domain-Specific_Fuzzing.html" class="chapters"><span class="part_number">V</span> Domain-Specific Fuzzing <i class="fa fa-fw fa-caret-right"></i></a>
<ul>
<li><a href="ConfigurationFuzzer.html">Testing Configurations</a></li>
<li><a href="APIFuzzer.html">Fuzzing APIs</a></li>
<li><a href="Carver.html">Carving Unit Tests</a></li>
<li><a href="PythonFuzzer.html">Testing Compilers <strong class="new_chapter">&bull;</strong></a></li>
<li><a href="WebFuzzer.html">Testing Web Applications</a></li>
<li><a href="GUIFuzzer.html">Testing Graphical User Interfaces</a></li>
</ul><li class="has-sub"><a href="06_Managing_Fuzzing.html" class="chapters"><span class="part_number">VI</span> Managing Fuzzing <i class="fa fa-fw fa-caret-right"></i></a>
<ul>
<li><a href="FuzzingInTheLarge.html">Fuzzing in the Large</a></li>
<li><a href="WhenToStopFuzzing.html">When To Stop Fuzzing</a></li>
</ul><li class="has-sub"><a href="99_Appendices.html" class="chapters">Appendices <i class="fa fa-fw fa-caret-right"></i></a>
<ul>
<li><a href="AcademicPrototyping.html">Academic Prototyping</a></li>
<li><a href="PrototypingWithPython.html">Prototyping with Python</a></li>
<li><a href="ExpectError.html">Error Handling</a></li>
<li><a href="Timer.html">Timer</a></li>
<li><a href="Timeout.html">Timeout</a></li>
<li><a href="ClassDiagram.html">Class Diagrams</a></li>
<li><a href="RailroadDiagrams.html">Railroad Diagrams</a></li>
<li><a href="ControlFlow.html">Control Flow Graph</a></li>
</ul>
           <li><a href="https://www.fuzzingbook.org/beta/html/00_Index.html">Index (beta)</a></i></li>
        </ol>
     </li>
     <li class="has-sub"><a href="#"><span title="Greybox Fuzzing with Grammars"><i class="fa fa-fw fa-list-ul"></i></span> <span class="menu_2">Greybox Fuzzing with Grammars</span></a>
           <ul><li class="has-sub"><a href="#Synopsis"><i class="fa fa-fw fa-map"></i> Synopsis</a>
<ul><li class="has-sub"><a href="#Fuzzing-with-Dictionaries">Fuzzing with Dictionaries</a>
</li><li class="has-sub"><a href="#Fuzzing-with-Input-Fragments">Fuzzing with Input Fragments</a>
</li><li class="has-sub"><a href="#Fuzzing-with-Input-Regions">Fuzzing with Input Regions</a>
</ul></li><li class="has-sub"><a href="#Background"><i class="fa fa-fw fa-mortar-board"></i> Background</a>
</li><li class="has-sub"><a href="#Fuzzing-with-Dictionaries">&nbsp;&bull;&nbsp;&nbsp; Fuzzing with Dictionaries</a>
</li><li class="has-sub"><a href="#Fuzzing-with-Input-Fragments">&nbsp;&bull;&nbsp;&nbsp; Fuzzing with Input Fragments</a>
<ul><li class="has-sub"><a href="#Parsing-and-Recombining-JavaScript,-or-How-to-Make-50,000-USD-in-Four-Weeks">Parsing and Recombining JavaScript, or How to Make 50,000 USD in Four Weeks</a>
</li><li class="has-sub"><a href="#Parsing-and-Recombining-HTML">Parsing and Recombining HTML</a>
</li><li class="has-sub"><a href="#Building-the-Fragment-Pool">Building the Fragment Pool</a>
</li><li class="has-sub"><a href="#Fragment-Based-Mutation">Fragment-Based Mutation</a>
</li><li class="has-sub"><a href="#Fragment-Based-Fuzzing">Fragment-Based Fuzzing</a>
</li><li class="has-sub"><a href="#Integration-with-Greybox-Fuzzing">Integration with Greybox Fuzzing</a>
</ul></li><li class="has-sub"><a href="#Fuzzing-with-Input-Regions">&nbsp;&bull;&nbsp;&nbsp; Fuzzing with Input Regions</a>
<ul><li class="has-sub"><a href="#Determining-Symbol-Regions">Determining Symbol Regions</a>
</li><li class="has-sub"><a href="#Region-Based-Mutation">Region-Based Mutation</a>
</li><li class="has-sub"><a href="#Integration-with-Greybox-Fuzzing">Integration with Greybox Fuzzing</a>
</li><li class="has-sub"><a href="#Focusing-on-Valid-Seeds">Focusing on Valid Seeds</a>
</ul></li><li class="has-sub"><a href="#Mining-Seeds">&nbsp;&bull;&nbsp;&nbsp; Mining Seeds</a>
</li><li class="has-sub"><a href="#Lessons-Learned"><i class="fa fa-fw fa-trophy"></i> Lessons Learned</a>
</li><li class="has-sub"><a href="#Background"><i class="fa fa-fw fa-mortar-board"></i> Background</a>
</li><li class="has-sub"><a href="#Next-Steps"><i class="fa fa-fw fa-arrows"></i> Next Steps</a>
</li><li class="has-sub"><a href="#Exercises"><i class="fa fa-fw fa-edit"></i> Exercises</a>
<ul><li class="has-sub"><a href="#Exercise-1:-The-Big-Greybox-Fuzzer-Shoot-Out">Exercise 1: The Big Greybox Fuzzer Shoot-Out</a>
</ul></li></ul></li>
     </li>
     
     <li class="has-sub"><a href="#"><span title="Resources"><i class="fa fa-fw fa-cube"></i> </span><span class="menu_3">Resources</span></a>
     <ul>
     <li><a href="https://mybinder.org/v2/gh/uds-se/fuzzingbook/master?filepath=docs/beta/notebooks/GreyboxGrammarFuzzer.ipynb" target="_blank" class="edit_as_notebook"><i class="fa fa-fw fa-edit"></i> Edit as Notebook</a></li>
     <li><a href="https://www.fuzzingbook.org/beta/slides/GreyboxGrammarFuzzer.slides.html" target="_blank"><i class="fa fa-fw fa-video-camera"></i> View Slides</a></li>
     <li><a href="https://www.fuzzingbook.org/beta/code/GreyboxGrammarFuzzer.py"><i class="fa fa-fw fa-download"></i> Download Code (.py)</a></li>
     <li><a href="https://www.fuzzingbook.org/beta/notebooks/GreyboxGrammarFuzzer.ipynb"><i class="fa fa-fw fa-download"></i> Download Notebook (.ipynb)</a></li>
     <li><a href="https://www.fuzzingbook.org/beta/dist/fuzzingbook-code.zip"><i class="fa fa-fw fa-cube"></i> All Code (.zip)</a></li>
     <li><a href="https://www.fuzzingbook.org/beta/dist/fuzzingbook-notebooks.zip"><i class="fa fa-fw fa-cube"></i> All Notebooks (.zip)</a></li>
     <li><a href="https://github.com/uds-se/fuzzingbook/" target="_blank"><i class="fa fa-fw fa-github"></i> Project Page</a></li>
     <li><a href="ReleaseNotes.html" target="_blank"><i class="fa fa-fw fa-calendar"></i> Release Notes</a></li>
     </ul>
     </li>
     
     <li class="has-sub"><a href="#"><span title="Share"><i class="fa fa-fw fa-comments"></i> </span> <span class="menu_4">Share</span></a>
        <ul>
<!--
            <li><a href="https://twitter.com/intent/tweet?text=I%20just%20read%20%22Greybox%20Fuzzing%20with%20Grammars%22%20(part%20of%20@FuzzingBook)%20at%20https%3a%2f%2fwww.fuzzingbook.org%2fbeta%2fhtml%2fGreyboxGrammarFuzzer.html" target="popup" 
onclick="window.open('https://twitter.com/intent/tweet?text=I%20just%20read%20%22Greybox%20Fuzzing%20with%20Grammars%22%20(part%20of%20@FuzzingBook)%20at%20https%3a%2f%2fwww.fuzzingbook.org%2fbeta%2fhtml%2fGreyboxGrammarFuzzer.html','popup','width=600,height=600'); return false;"
><i class="fa fa-fw fa-twitter"></i> Share on X</a>
            <li><a href="https://www.facebook.com/sharer/sharer.php?u=https%3a%2f%2fwww.fuzzingbook.org%2fbeta%2fhtml%2fGreyboxGrammarFuzzer.html" target="popup" 
onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https%3a%2f%2fwww.fuzzingbook.org%2fbeta%2fhtml%2fGreyboxGrammarFuzzer.html','popup','width=600,height=600'); return false;"
><i class="fa fa-fw fa-facebook"></i> Share on Facebook</a>
-->
            <li><a href="mailto:?subject=Greybox%20Fuzzing%20with%20Grammars&body=I%20just%20read%20%22Greybox%20Fuzzing%20with%20Grammars%22%20(part%20of%20@FuzzingBook)%20at%20https%3a%2f%2fwww.fuzzingbook.org%2fbeta%2fhtml%2fGreyboxGrammarFuzzer.html"><i class="fa fa-fw fa-envelope"></i> Share by Email</a>
            <li><a href="#citation" id="cite" onclick="revealCitation()"><i class="fa fa-fw fa-mortar-board"></i> Cite</a>
        </ul>
     </li>
     <li class="has-sub"><a href="#"><span title="Help"><i class="fa fa-fw fa-question-circle"></i></span> <span class="menu_5">Help</span></a>
        <ul>
          <li><a href="https://www.fuzzingbook.org/beta/#Troubleshooting"><i class="fa fa-fw fa-wrench"></i> Troubleshooting</a></li>
          <li><a href="https://docs.python.org/3/tutorial/" target=_blank><i class="fa fa-fw fa-question-circle"></i> Python Tutorial</a>
          <li><a href="https://www.dataquest.io/blog/jupyter-notebook-tutorial/" target=_blank><i class="fa fa-fw fa-question-circle"></i> Jupyter Notebook Tutorial</a>
          <li><a href="https://github.com/uds-se/fuzzingbook/issues/" target="_blank"><i class="fa fa-fw fa-commenting"></i> Report an Issue</a></li>
        </ul>
     </li>
  </ul>
</div>
</nav>

    <article>
   <div tabindex="-1" id="notebook" class="border-box-sizing">
     <div class="container" id="notebook-container">
<p><div class="banner">Help shaping the future of The Fuzzing Book and
<a target=_new href="https://docs.google.com/forms/d/e/1FAIpQLScyO6j5EsrtS0pse7qVHeDoOj188JgC8SepWFZIO32N6gre8Q/viewform?usp=sf_link">take part in our 2024 reader survey!</a></div></p>


<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h1 id="Greybox-Fuzzing-with-Grammars">Greybox Fuzzing with Grammars<a class="anchor-link" href="#Greybox-Fuzzing-with-Grammars">&#182;</a></h1><p>In this chapter, we introduce important extensions to our syntactic fuzzing techniques, all leveraging <em>syntactic</em> parts of <em>existing inputs</em>.</p>
<ol>
<li><p>We show how to leverage <em>dictionaries</em> of input fragments during fuzzing. The idea is to integrate such dictionaries into a <em>mutator</em>, which would then inject these fragments (typically keywords and other items of importance) into population.</p>
</li>
<li><p>We show how to combine <a href="Parser.html">parsing</a> and <a href="GrammarFuzzer.html">fuzzing</a> with grammars.  This allows <em>mutating</em> existing inputs while preserving syntactical correctness, and to <em>reuse</em> fragments from existing inputs while generating new ones.  The combination of language-based parsing and generating, as demonstrated in this chapter, has been highly successful in practice: The <em>LangFuzz</em> fuzzer for JavaScript has found more than 2,600 bugs in JavaScript interpreters this way.</p>
</li>
<li><p>In the previous chapters, we have used grammars in a <em>black-box</em> manner – that is, we have used them to generate inputs regardless of the program being tested.  In this chapter, we introduce mutational <em>greybox fuzzing with grammars</em>: Techniques that make use of <em>feedback from the program under test</em> to guide test generations towards specific goals.  As in <a href="GreyboxFuzzer.html">lexical greybox fuzzing</a>, this feedback is mostly <em>coverage</em>, allowing us to direct grammar-based testing towards uncovered code parts. This part is inspired by the <em>AFLSmart</em> fuzzer, which combines parsing and mutational fuzzing.</p>
</li>
</ol>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn"><a href="https://github.com/uds-se/fuzzingbook//tree/master/notebooks/shared/bookutils" class="import" target="_blank">bookutils</a></span> <span class="kn">import</span> <span class="n">YouTubeVideo</span>
<span class="n">YouTubeVideo</span><span class="p">(</span><span class="s1">&#39;hSGzcjUj7Vs&#39;</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_html rendered_html output_subarea output_execute_result">

        <iframe
            width="640"
            height="360"
            src="https://www.youtube-nocookie.com/embed/hSGzcjUj7Vs"
            frameborder="0"
            allowfullscreen

        ></iframe>

</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p><strong>Prerequisites</strong></p>
<ul>
<li>We build on several concepts from <a href="GreyboxFuzzer.html">the chapter on greybox fuzzing (without grammars)</a>.</li>
<li>As the title suggests, you should know how to fuzz with grammars <a href="Grammars.html">from the chapter on grammars</a>.</li>
</ul>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><div class="synopsis"><h2 id="Synopsis">Synopsis<a class="anchor-link" href="#Synopsis">&#182;</a></h2><!-- Automatically generated. Do not edit. -->

<p>To <a href="Importing.html">use the code provided in this chapter</a>, write</p>
<div class="highlight"><pre><span></span><span class="o">&gt;&gt;&gt;</span> <span class="kn">from</span> <span class="nn"><a href="GreyboxGrammarFuzzer.html" class="import" target="_blank">fuzzingbook.GreyboxGrammarFuzzer</a></span> <span class="kn">import</span> <span class="o">&lt;</span><span class="n">identifier</span><span class="o">&gt;</span>
</pre></div>
<p>and then make use of the following features.</p>
<p>This chapter introduces advanced methods for language-based grey-box fuzzing inspired by the <em>LangFuzz</em> and <em>AFLSmart</em> fuzzers.</p>
<h3 id="Fuzzing-with-Dictionaries">Fuzzing with Dictionaries<a class="anchor-link" href="#Fuzzing-with-Dictionaries">&#182;</a></h3><p>Rather than mutating strings randomly, the <code>DictMutator</code> class allows inserting tokens from a dictionary, thus increasing fuzzer performance. The dictionary comes as a list of strings, out of which random elements are picked and inserted - in addition to the given mutations such as deleting or inserting individual bytes.</p>
<div class="highlight"><pre><span></span><span class="o">&gt;&gt;&gt;</span> <span class="n">dict_mutator</span> <span class="o">=</span> <span class="n">DictMutator</span><span class="p">([</span><span class="s2">&quot;&lt;a&gt;&quot;</span><span class="p">,</span> <span class="s2">&quot;&lt;/a&gt;&quot;</span><span class="p">,</span> <span class="s2">&quot;&lt;a/&gt;&quot;</span><span class="p">,</span> <span class="s2">&quot;=&#39;a&#39;&quot;</span><span class="p">])</span>
<span class="o">&gt;&gt;&gt;</span> <span class="n">seeds</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&quot;&lt;html&gt;&lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;&lt;body&gt;World&lt;br/&gt;&lt;/body&gt;&lt;/html&gt;&quot;</span><span class="p">]</span>
<span class="o">&gt;&gt;&gt;</span> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
<span class="o">&gt;&gt;&gt;</span>     <span class="nb">print</span><span class="p">(</span><span class="n">dict_mutator</span><span class="o">.</span><span class="n">mutate</span><span class="p">(</span><span class="n">seeds</span><span class="p">[</span><span class="mi">0</span><span class="p">]))</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">ttle</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&lt;</span><span class="n">a</span><span class="o">/&gt;&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">b</span><span class="p">]</span><span class="n">ody</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">itle</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">tit</span><span class="o">&lt;</span><span class="n">a</span><span class="o">/&gt;</span><span class="n">le</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/&lt;/</span><span class="n">a</span><span class="o">&gt;</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">ody</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">had</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">boy</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;</span><span class="err"></span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
</pre></div>
<p>This <code>DictMutator</code> can be used as an argument to <code>GreyboxFuzzer</code>:</p>
<div class="highlight"><pre><span></span><span class="o">&gt;&gt;&gt;</span> <span class="n">runner</span> <span class="o">=</span> <span class="n">FunctionCoverageRunner</span><span class="p">(</span><span class="n">my_parser</span><span class="p">)</span>
<span class="o">&gt;&gt;&gt;</span> <span class="n">dict_fuzzer</span> <span class="o">=</span> <span class="n">GreyboxFuzzer</span><span class="p">(</span><span class="n">seeds</span><span class="p">,</span> <span class="n">dict_mutator</span><span class="p">,</span> <span class="n">PowerSchedule</span><span class="p">())</span>
<span class="o">&gt;&gt;&gt;</span> <span class="n">dict_fuzzer_outcome</span> <span class="o">=</span> <span class="n">dict_fuzzer</span><span class="o">.</span><span class="n">runs</span><span class="p">(</span><span class="n">runner</span><span class="p">,</span> <span class="n">trials</span><span class="o">=</span><span class="mi">5</span><span class="p">)</span>
</pre></div>
<p><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="306pt" height="148pt"
 viewBox="0.00 0.00 305.62 147.75" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 143.75)">
<g id="a_graph0"><a xlink:title="DictMutator class hierarchy">
<polygon fill="white" stroke="none" points="-4,4 -4,-143.75 301.62,-143.75 301.62,4 -4,4"/>
</a>
</g>
<!-- DictMutator -->
<g id="node1" class="node">
<title>DictMutator</title>
<g id="a_node1"><a xlink:href="#" xlink:title="class DictMutator:&#10;Mutate strings using keywords from a dictionary">
<polygon fill="none" stroke="black" points="0,-0.5 0,-57 160,-57 160,-0.5 0,-0.5"/>
<text text-anchor="start" x="42.12" y="-40.7" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">DictMutator</text>
<polyline fill="none" stroke="black" points="0,-31 160,-31"/>
<g id="a_node1_0"><a xlink:href="#" xlink:title="DictMutator">
<g id="a_node1_1"><a xlink:href="#" xlink:title="__init__(self, dictionary: List[str]) &#45;&gt; None:&#10;Constructor. `dictionary` is the list of keywords to use.">
<text text-anchor="start" x="8" y="-18.5" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
<g id="a_node1_2"><a xlink:href="#" xlink:title="insert_from_dictionary(self, s: str) &#45;&gt; str:&#10;Returns s with a keyword from the dictionary inserted">
<text text-anchor="start" x="8" y="-6.25" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">insert_from_dictionary()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- Mutator -->
<g id="node2" class="node">
<title>Mutator</title>
<g id="a_node2"><a xlink:href="GreyboxFuzzer.html" xlink:title="class Mutator:&#10;Mutate strings">
<polygon fill="none" stroke="black" points="42,-94 42,-139.25 118,-139.25 118,-94 42,-94"/>
<text text-anchor="start" x="54.12" y="-122.95" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">Mutator</text>
<polyline fill="none" stroke="black" points="42,-113.25 118,-113.25"/>
<g id="a_node2_3"><a xlink:href="#" xlink:title="Mutator">
<g id="a_node2_4"><a xlink:href="GreyboxFuzzer.html" xlink:title="__init__(self) &#45;&gt; None:&#10;Constructor">
<text text-anchor="start" x="50" y="-100.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- DictMutator&#45;&gt;Mutator -->
<g id="edge1" class="edge">
<title>DictMutator&#45;&gt;Mutator</title>
<path fill="none" stroke="black" d="M80,-57.39C80,-65.39 80,-74.2 80,-82.5"/>
<polygon fill="none" stroke="black" points="76.5,-82.23 80,-92.23 83.5,-82.23 76.5,-82.23"/>
</g>
<!-- Legend -->
<g id="node3" class="node">
<title>Legend</title>
<text text-anchor="start" x="178.38" y="-44.75" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="10.00" fill="#b03a2e">Legend</text>
<text text-anchor="start" x="178.38" y="-34.75" font-family="Patua One, Helvetica, sans-serif" font-size="10.00">• </text>
<text text-anchor="start" x="184.38" y="-34.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-size="8.00">public_method()</text>
<text text-anchor="start" x="178.38" y="-24.75" font-family="Patua One, Helvetica, sans-serif" font-size="10.00">• </text>
<text text-anchor="start" x="184.38" y="-24.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="8.00">private_method()</text>
<text text-anchor="start" x="178.38" y="-14.75" font-family="Patua One, Helvetica, sans-serif" font-size="10.00">• </text>
<text text-anchor="start" x="184.38" y="-14.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="8.00">overloaded_method()</text>
<text text-anchor="start" x="178.38" y="-5.7" font-family="Helvetica,sans-Serif" font-size="9.00">Hover over names to see doc</text>
</g>
</g>
</svg>
</p>
<h3 id="Fuzzing-with-Input-Fragments">Fuzzing with Input Fragments<a class="anchor-link" href="#Fuzzing-with-Input-Fragments">&#182;</a></h3><p>The <code>LangFuzzer</code> class introduces a <em>language-aware</em> fuzzer that can recombine fragments from existing inputs – inspired by the highly effective <code>LangFuzz</code> fuzzer. At its core is a <code>FragmentMutator</code> class that that takes a <a href="Parser.html"><em>parser</em></a> as argument:</p>
<div class="highlight"><pre><span></span><span class="o">&gt;&gt;&gt;</span> <span class="n">parser</span> <span class="o">=</span> <span class="n">EarleyParser</span><span class="p">(</span><span class="n">XML_GRAMMAR</span><span class="p">,</span> <span class="n">tokens</span><span class="o">=</span><span class="n">XML_TOKENS</span><span class="p">)</span>
<span class="o">&gt;&gt;&gt;</span> <span class="n">mutator</span> <span class="o">=</span> <span class="n">FragmentMutator</span><span class="p">(</span><span class="n">parser</span><span class="p">)</span>
</pre></div>
<p>The fuzzer itself is initialized with a list of seeds, the above <code>FragmentMutator</code>, and a power schedule:</p>
<div class="highlight"><pre><span></span><span class="o">&gt;&gt;&gt;</span> <span class="n">seeds</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&quot;&lt;html&gt;&lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;&lt;body&gt;World&lt;br/&gt;&lt;/body&gt;&lt;/html&gt;&quot;</span><span class="p">]</span>
<span class="o">&gt;&gt;&gt;</span> <span class="n">schedule</span> <span class="o">=</span> <span class="n">PowerSchedule</span><span class="p">()</span>
<span class="o">&gt;&gt;&gt;</span> <span class="n">lang_fuzzer</span> <span class="o">=</span> <span class="n">LangFuzzer</span><span class="p">(</span><span class="n">seeds</span><span class="p">,</span> <span class="n">mutator</span><span class="p">,</span> <span class="n">schedule</span><span class="p">)</span>
<span class="o">&gt;&gt;&gt;</span> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
<span class="o">&gt;&gt;&gt;</span>     <span class="nb">print</span><span class="p">(</span><span class="n">lang_fuzzer</span><span class="o">.</span><span class="n">fuzz</span><span class="p">())</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">title</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;/</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;&lt;</span><span class="n">head</span><span class="o">&gt;&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="n">Hello</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;&lt;</span><span class="n">body</span><span class="o">&gt;</span><span class="n">World</span><span class="o">&lt;</span><span class="n">br</span><span class="o">/&gt;&lt;/</span><span class="n">body</span><span class="o">&gt;&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
</pre></div>
<p><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="462pt" height="365pt"
 viewBox="0.00 0.00 461.88 365.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 361)">
<g id="a_graph0"><a xlink:title="LangFuzzer class hierarchy">
<polygon fill="white" stroke="none" points="-4,4 -4,-361 457.88,-361 457.88,4 -4,4"/>
</a>
</g>
<!-- LangFuzzer -->
<g id="node1" class="node">
<title>LangFuzzer</title>
<g id="a_node1"><a xlink:href="#" xlink:title="class LangFuzzer:&#10;Blackbox fuzzer mutating input fragments. Roughly based on `LangFuzz`.">
<polygon fill="none" stroke="black" points="26.25,-51.12 26.25,-96.38 150.25,-96.38 150.25,-51.12 26.25,-51.12"/>
<text text-anchor="start" x="52.62" y="-80.08" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">LangFuzzer</text>
<polyline fill="none" stroke="black" points="26.25,-70.38 150.25,-70.38"/>
<g id="a_node1_0"><a xlink:href="#" xlink:title="LangFuzzer">
<g id="a_node1_1"><a xlink:href="#" xlink:title="create_candidate(self) &#45;&gt; GreyboxFuzzer.Seed:&#10;Returns an input generated by fuzzing a seed in the population">
<text text-anchor="start" x="34.25" y="-57.88" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="10.00">create_candidate()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- AdvancedMutationFuzzer -->
<g id="node2" class="node">
<title>AdvancedMutationFuzzer</title>
<g id="a_node2"><a xlink:href="GreyboxFuzzer.html" xlink:title="class AdvancedMutationFuzzer:&#10;Base class for mutation&#45;based fuzzing.">
<polygon fill="none" stroke="black" points="0,-184 0,-240.5 176.5,-240.5 176.5,-184 0,-184"/>
<text text-anchor="start" x="8" y="-224.2" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">AdvancedMutationFuzzer</text>
<polyline fill="none" stroke="black" points="0,-214.5 176.5,-214.5"/>
<g id="a_node2_2"><a xlink:href="#" xlink:title="AdvancedMutationFuzzer">
<g id="a_node2_3"><a xlink:href="GreyboxFuzzer.html" xlink:title="__init__(self, seeds: List[str], mutator: GreyboxFuzzer.Mutator, schedule: GreyboxFuzzer.PowerSchedule) &#45;&gt; None:&#10;Constructor.&#10;`seeds` &#45; a list of (input) strings to mutate.&#10;`mutator` &#45; the mutator to apply.&#10;`schedule` &#45; the power schedule to apply.">
<text text-anchor="start" x="58.25" y="-202" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
<g id="a_node2_4"><a xlink:href="GreyboxFuzzer.html" xlink:title="fuzz(self) &#45;&gt; str:&#10;Returns first each seed once and then generates new inputs">
<text text-anchor="start" x="58.25" y="-190.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">fuzz()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- LangFuzzer&#45;&gt;AdvancedMutationFuzzer -->
<g id="edge1" class="edge">
<title>LangFuzzer&#45;&gt;AdvancedMutationFuzzer</title>
<path fill="none" stroke="black" d="M88.25,-96.68C88.25,-117.02 88.25,-147.74 88.25,-172.25"/>
<polygon fill="none" stroke="black" points="84.75,-172.2 88.25,-182.2 91.75,-172.2 84.75,-172.2"/>
</g>
<!-- Fuzzer -->
<g id="node3" class="node">
<title>Fuzzer</title>
<g id="a_node3"><a xlink:href="Fuzzer.html" xlink:title="class Fuzzer:&#10;Base class for fuzzers.">
<polygon fill="none" stroke="black" points="50.25,-277.5 50.25,-356.5 126.25,-356.5 126.25,-277.5 50.25,-277.5"/>
<text text-anchor="start" x="67.62" y="-340.2" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">Fuzzer</text>
<polyline fill="none" stroke="black" points="50.25,-330.5 126.25,-330.5"/>
<g id="a_node3_5"><a xlink:href="#" xlink:title="Fuzzer">
<g id="a_node3_6"><a xlink:href="Fuzzer.html" xlink:title="__init__(self) &#45;&gt; None:&#10;Constructor">
<text text-anchor="start" x="58.25" y="-318" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
<g id="a_node3_7"><a xlink:href="Fuzzer.html" xlink:title="fuzz(self) &#45;&gt; str:&#10;Return fuzz input">
<text text-anchor="start" x="58.25" y="-306.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">fuzz()</text>
</a>
</g>
<g id="a_node3_8"><a xlink:href="Fuzzer.html" xlink:title="run(self, runner: Fuzzer.Runner = &lt;Fuzzer.Runner object&gt;) &#45;&gt; Tuple[subprocess.CompletedProcess, str]:&#10;Run `runner` with fuzz input">
<text text-anchor="start" x="58.25" y="-295.5" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-size="10.00">run()</text>
</a>
</g>
<g id="a_node3_9"><a xlink:href="Fuzzer.html" xlink:title="runs(self, runner: Fuzzer.Runner = &lt;Fuzzer.PrintRunner object&gt;, trials: int = 10) &#45;&gt; List[Tuple[subprocess.CompletedProcess, str]]:&#10;Run `runner` with fuzz input, `trials` times">
<text text-anchor="start" x="58.25" y="-284.25" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-size="10.00">runs()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- AdvancedMutationFuzzer&#45;&gt;Fuzzer -->
<g id="edge2" class="edge">
<title>AdvancedMutationFuzzer&#45;&gt;Fuzzer</title>
<path fill="none" stroke="black" d="M88.25,-240.79C88.25,-248.56 88.25,-257.26 88.25,-265.92"/>
<polygon fill="none" stroke="black" points="84.75,-265.67 88.25,-275.67 91.75,-265.67 84.75,-265.67"/>
</g>
<!-- FragmentMutator -->
<g id="node4" class="node">
<title>FragmentMutator</title>
<g id="a_node4"><a xlink:href="#" xlink:title="class FragmentMutator:&#10;Mutate inputs with input fragments from a pool">
<polygon fill="none" stroke="black" points="168.25,-0.5 168.25,-147 316.25,-147 316.25,-0.5 168.25,-0.5"/>
<text text-anchor="start" x="186.38" y="-130.7" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">FragmentMutator</text>
<polyline fill="none" stroke="black" points="168.25,-121 316.25,-121"/>
<g id="a_node4_10"><a xlink:href="#" xlink:title="FragmentMutator">
<g id="a_node4_11"><a xlink:href="#" xlink:title="__init__(self, parser):&#10;Initialize mutators">
<text text-anchor="start" x="176.25" y="-108.5" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
<g id="a_node4_12"><a xlink:href="#" xlink:title="add_to_fragment_pool(self, seed: SeedWithStructure) &#45;&gt; None:&#10;Adds all fragments of a seed to the fragment pool">
<text text-anchor="start" x="176.25" y="-97.25" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-size="10.00">add_to_fragment_pool()</text>
</a>
</g>
<g id="a_node4_13"><a xlink:href="#" xlink:title="add_fragment(self, fragment: DerivationTree) &#45;&gt; None:&#10;Recursively adds fragments to the fragment pool">
<text text-anchor="start" x="176.25" y="-85" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">add_fragment()</text>
</a>
</g>
<g id="a_node4_14"><a xlink:href="#" xlink:title="count_nodes(self, fragment: DerivationTree) &#45;&gt; int:&#10;Returns the number of nodes in the fragment">
<text text-anchor="start" x="176.25" y="-73.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">count_nodes()</text>
</a>
</g>
<g id="a_node4_15"><a xlink:href="#" xlink:title="delete_fragment(self, seed: SeedWithStructure) &#45;&gt; SeedWithStructure:&#10;Delete a random fragment">
<text text-anchor="start" x="176.25" y="-62.5" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">delete_fragment()</text>
</a>
</g>
<g id="a_node4_16"><a xlink:href="#" xlink:title="is_excluded(self, symbol: str) &#45;&gt; bool:&#10;Returns true if a fragment starting with a specific&#10;symbol and all its decendents can be excluded">
<text text-anchor="start" x="176.25" y="-51.25" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">is_excluded()</text>
</a>
</g>
<g id="a_node4_17"><a xlink:href="#" xlink:title="mutate(self, seed: SeedWithStructure) &#45;&gt; SeedWithStructure:&#10;Implement structure&#45;aware mutation. Memoize seeds.">
<text text-anchor="start" x="176.25" y="-41" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="10.00">mutate()</text>
</a>
</g>
<g id="a_node4_18"><a xlink:href="#" xlink:title="recursive_delete(self, fragment: DerivationTree) &#45;&gt; DerivationTree:&#10;Recursively finds the fragment to delete">
<text text-anchor="start" x="176.25" y="-28.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">recursive_delete()</text>
</a>
</g>
<g id="a_node4_19"><a xlink:href="#" xlink:title="recursive_swap(self, fragment: DerivationTree) &#45;&gt; DerivationTree:&#10;Recursively finds the fragment to swap.">
<text text-anchor="start" x="176.25" y="-17.5" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">recursive_swap()</text>
</a>
</g>
<g id="a_node4_20"><a xlink:href="#" xlink:title="swap_fragment(self, seed: SeedWithStructure) &#45;&gt; SeedWithStructure:&#10;Substitutes a random fragment with another with the same symbol">
<text text-anchor="start" x="176.25" y="-6.25" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">swap_fragment()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- Mutator -->
<g id="node5" class="node">
<title>Mutator</title>
<g id="a_node5"><a xlink:href="GreyboxFuzzer.html" xlink:title="class Mutator:&#10;Mutate strings">
<polygon fill="none" stroke="black" points="204.25,-189.62 204.25,-234.88 280.25,-234.88 280.25,-189.62 204.25,-189.62"/>
<text text-anchor="start" x="216.38" y="-218.57" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">Mutator</text>
<polyline fill="none" stroke="black" points="204.25,-208.88 280.25,-208.88"/>
<g id="a_node5_21"><a xlink:href="#" xlink:title="Mutator">
<g id="a_node5_22"><a xlink:href="GreyboxFuzzer.html" xlink:title="__init__(self) &#45;&gt; None:&#10;Constructor">
<text text-anchor="start" x="212.25" y="-196.38" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- FragmentMutator&#45;&gt;Mutator -->
<g id="edge3" class="edge">
<title>FragmentMutator&#45;&gt;Mutator</title>
<path fill="none" stroke="black" d="M242.25,-147.4C242.25,-158.02 242.25,-168.5 242.25,-177.81"/>
<polygon fill="none" stroke="black" points="238.75,-177.76 242.25,-187.76 245.75,-177.76 238.75,-177.76"/>
</g>
<!-- Legend -->
<g id="node6" class="node">
<title>Legend</title>
<text text-anchor="start" x="334.62" y="-89.75" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="10.00" fill="#b03a2e">Legend</text>
<text text-anchor="start" x="334.62" y="-79.75" font-family="Patua One, Helvetica, sans-serif" font-size="10.00">• </text>
<text text-anchor="start" x="340.62" y="-79.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-size="8.00">public_method()</text>
<text text-anchor="start" x="334.62" y="-69.75" font-family="Patua One, Helvetica, sans-serif" font-size="10.00">• </text>
<text text-anchor="start" x="340.62" y="-69.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="8.00">private_method()</text>
<text text-anchor="start" x="334.62" y="-59.75" font-family="Patua One, Helvetica, sans-serif" font-size="10.00">• </text>
<text text-anchor="start" x="340.62" y="-59.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="8.00">overloaded_method()</text>
<text text-anchor="start" x="334.62" y="-50.7" font-family="Helvetica,sans-Serif" font-size="9.00">Hover over names to see doc</text>
</g>
</g>
</svg>
</p>
<h3 id="Fuzzing-with-Input-Regions">Fuzzing with Input Regions<a class="anchor-link" href="#Fuzzing-with-Input-Regions">&#182;</a></h3><p>The <code>GreyboxGrammarFuzzer</code> class uses two mutators:</p>
<ul>
<li>a <em>tree mutator</em> (a <code>RegionMutator</code> object) that can parse existing strings to identify <em>regions</em> in that string to be swapped or deleted.</li>
<li>a <em>byte mutator</em> to apply bit- and character-level mutations.</li>
</ul>
<div class="highlight"><pre><span></span><span class="o">&gt;&gt;&gt;</span> <span class="n">tree_mutator</span> <span class="o">=</span> <span class="n">RegionMutator</span><span class="p">(</span><span class="n">parser</span><span class="p">)</span>
<span class="o">&gt;&gt;&gt;</span> <span class="n">byte_mutator</span> <span class="o">=</span> <span class="n">Mutator</span><span class="p">()</span>
</pre></div>
<p>The <em>schedule</em> for the <code>GreyboxGrammarFuzzer</code> class can be a regular <code>PowerSchedule</code> object. However, a more sophisticated schedule is provided by <code>AFLSmartSchedule</code>, which assigns more <a href="GreyboxFuzzer.html#Power-Schedules">energy</a> to seeds that have a higher degree of validity.</p>
<div class="highlight"><pre><span></span><span class="o">&gt;&gt;&gt;</span> <span class="n">schedule</span> <span class="o">=</span> <span class="n">AFLSmartSchedule</span><span class="p">(</span><span class="n">parser</span><span class="p">)</span>
</pre></div>
<p>The <code>GreyboxGrammarFuzzer</code> constructor takes a set of seeds as well as the two mutators and the schedule:</p>
<div class="highlight"><pre><span></span><span class="o">&gt;&gt;&gt;</span> <span class="n">aflsmart_fuzzer</span> <span class="o">=</span> <span class="n">GreyboxGrammarFuzzer</span><span class="p">(</span><span class="n">seeds</span><span class="p">,</span> <span class="n">byte_mutator</span><span class="p">,</span> <span class="n">tree_mutator</span><span class="p">,</span> <span class="n">schedule</span><span class="p">)</span>
</pre></div>
<p>As it relies on code coverage, it is typically combined with a <code>FunctionCoverageRunner</code>:</p>
<div class="highlight"><pre><span></span><span class="o">&gt;&gt;&gt;</span> <span class="n">runner</span> <span class="o">=</span> <span class="n">FunctionCoverageRunner</span><span class="p">(</span><span class="n">my_parser</span><span class="p">)</span>
<span class="o">&gt;&gt;&gt;</span> <span class="n">aflsmart_outcome</span> <span class="o">=</span> <span class="n">aflsmart_fuzzer</span><span class="o">.</span><span class="n">runs</span><span class="p">(</span><span class="n">runner</span><span class="p">,</span> <span class="n">trials</span><span class="o">=</span><span class="mi">5</span><span class="p">)</span>
</pre></div>
<p><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="638pt" height="481pt"
 viewBox="0.00 0.00 637.88 481.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 477)">
<g id="a_graph0"><a xlink:title="GreyboxGrammarFuzzer class hierarchy">
<polygon fill="white" stroke="none" points="-4,4 -4,-477 633.88,-477 633.88,4 -4,4"/>
</a>
</g>
<!-- GreyboxGrammarFuzzer -->
<g id="node1" class="node">
<title>GreyboxGrammarFuzzer</title>
<g id="a_node1"><a xlink:href="#" xlink:title="class GreyboxGrammarFuzzer:&#10;Greybox fuzzer using grammars.">
<polygon fill="none" stroke="black" points="4.5,-11.75 4.5,-68.25 172,-68.25 172,-11.75 4.5,-11.75"/>
<text text-anchor="start" x="12.5" y="-51.95" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">GreyboxGrammarFuzzer</text>
<polyline fill="none" stroke="black" points="4.5,-42.25 172,-42.25"/>
<g id="a_node1_0"><a xlink:href="#" xlink:title="GreyboxGrammarFuzzer">
<g id="a_node1_1"><a xlink:href="#" xlink:title="__init__(self, seeds: List[str], byte_mutator: GreyboxFuzzer.Mutator, tree_mutator: FragmentMutator, schedule: GreyboxFuzzer.PowerSchedule) &#45;&gt; None:&#10;Constructor.&#10;`seeds` &#45; set of inputs to mutate.&#10;`byte_mutator` &#45; a byte&#45;level mutator.&#10;`tree_mutator` = a tree&#45;level mutator.&#10;`schedule` &#45; a power schedule.">
<text text-anchor="start" x="34.25" y="-29.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
<g id="a_node1_2"><a xlink:href="#" xlink:title="create_candidate(self) &#45;&gt; str:&#10;Returns an input generated by structural mutation&#10;of a seed in the population">
<text text-anchor="start" x="34.25" y="-18.5" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="10.00">create_candidate()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- GreyboxFuzzer -->
<g id="node2" class="node">
<title>GreyboxFuzzer</title>
<g id="a_node2"><a xlink:href="GreyboxFuzzer.html" xlink:title="class GreyboxFuzzer:&#10;Coverage&#45;guided mutational fuzzing.">
<polygon fill="none" stroke="black" points="33.75,-167.12 33.75,-212.38 142.75,-212.38 142.75,-167.12 33.75,-167.12"/>
<text text-anchor="start" x="41.75" y="-196.07" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">GreyboxFuzzer</text>
<polyline fill="none" stroke="black" points="33.75,-186.38 142.75,-186.38"/>
<g id="a_node2_3"><a xlink:href="#" xlink:title="GreyboxFuzzer">
<g id="a_node2_4"><a xlink:href="GreyboxFuzzer.html" xlink:title="run(self, runner: MutationFuzzer.FunctionCoverageRunner) &#45;&gt; Tuple[Any, str]:&#10;Run function(inp) while tracking coverage.&#10;If we reach new coverage,&#10;add inp to population and its coverage to population_coverage">
<text text-anchor="start" x="73.25" y="-173.88" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">run()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- GreyboxGrammarFuzzer&#45;&gt;GreyboxFuzzer -->
<g id="edge1" class="edge">
<title>GreyboxGrammarFuzzer&#45;&gt;GreyboxFuzzer</title>
<path fill="none" stroke="black" d="M88.25,-68.44C88.25,-93.05 88.25,-129.21 88.25,-155.46"/>
<polygon fill="none" stroke="black" points="84.75,-155.23 88.25,-165.23 91.75,-155.23 84.75,-155.23"/>
</g>
<!-- AdvancedMutationFuzzer -->
<g id="node3" class="node">
<title>AdvancedMutationFuzzer</title>
<g id="a_node3"><a xlink:href="GreyboxFuzzer.html" xlink:title="class AdvancedMutationFuzzer:&#10;Base class for mutation&#45;based fuzzing.">
<polygon fill="none" stroke="black" points="0,-300 0,-356.5 176.5,-356.5 176.5,-300 0,-300"/>
<text text-anchor="start" x="8" y="-340.2" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">AdvancedMutationFuzzer</text>
<polyline fill="none" stroke="black" points="0,-330.5 176.5,-330.5"/>
<g id="a_node3_5"><a xlink:href="#" xlink:title="AdvancedMutationFuzzer">
<g id="a_node3_6"><a xlink:href="GreyboxFuzzer.html" xlink:title="__init__(self, seeds: List[str], mutator: GreyboxFuzzer.Mutator, schedule: GreyboxFuzzer.PowerSchedule) &#45;&gt; None:&#10;Constructor.&#10;`seeds` &#45; a list of (input) strings to mutate.&#10;`mutator` &#45; the mutator to apply.&#10;`schedule` &#45; the power schedule to apply.">
<text text-anchor="start" x="58.25" y="-318" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
<g id="a_node3_7"><a xlink:href="GreyboxFuzzer.html" xlink:title="fuzz(self) &#45;&gt; str:&#10;Returns first each seed once and then generates new inputs">
<text text-anchor="start" x="58.25" y="-306.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">fuzz()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- GreyboxFuzzer&#45;&gt;AdvancedMutationFuzzer -->
<g id="edge2" class="edge">
<title>GreyboxFuzzer&#45;&gt;AdvancedMutationFuzzer</title>
<path fill="none" stroke="black" d="M88.25,-212.68C88.25,-233.02 88.25,-263.74 88.25,-288.25"/>
<polygon fill="none" stroke="black" points="84.75,-288.2 88.25,-298.2 91.75,-288.2 84.75,-288.2"/>
</g>
<!-- Fuzzer -->
<g id="node4" class="node">
<title>Fuzzer</title>
<g id="a_node4"><a xlink:href="Fuzzer.html" xlink:title="class Fuzzer:&#10;Base class for fuzzers.">
<polygon fill="none" stroke="black" points="50.25,-393.5 50.25,-472.5 126.25,-472.5 126.25,-393.5 50.25,-393.5"/>
<text text-anchor="start" x="67.62" y="-456.2" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">Fuzzer</text>
<polyline fill="none" stroke="black" points="50.25,-446.5 126.25,-446.5"/>
<g id="a_node4_8"><a xlink:href="#" xlink:title="Fuzzer">
<g id="a_node4_9"><a xlink:href="Fuzzer.html" xlink:title="__init__(self) &#45;&gt; None:&#10;Constructor">
<text text-anchor="start" x="58.25" y="-434" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
<g id="a_node4_10"><a xlink:href="Fuzzer.html" xlink:title="fuzz(self) &#45;&gt; str:&#10;Return fuzz input">
<text text-anchor="start" x="58.25" y="-422.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">fuzz()</text>
</a>
</g>
<g id="a_node4_11"><a xlink:href="Fuzzer.html" xlink:title="run(self, runner: Fuzzer.Runner = &lt;Fuzzer.Runner object&gt;) &#45;&gt; Tuple[subprocess.CompletedProcess, str]:&#10;Run `runner` with fuzz input">
<text text-anchor="start" x="58.25" y="-411.5" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">run()</text>
</a>
</g>
<g id="a_node4_12"><a xlink:href="Fuzzer.html" xlink:title="runs(self, runner: Fuzzer.Runner = &lt;Fuzzer.PrintRunner object&gt;, trials: int = 10) &#45;&gt; List[Tuple[subprocess.CompletedProcess, str]]:&#10;Run `runner` with fuzz input, `trials` times">
<text text-anchor="start" x="58.25" y="-400.25" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-size="10.00">runs()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- AdvancedMutationFuzzer&#45;&gt;Fuzzer -->
<g id="edge3" class="edge">
<title>AdvancedMutationFuzzer&#45;&gt;Fuzzer</title>
<path fill="none" stroke="black" d="M88.25,-356.79C88.25,-364.56 88.25,-373.26 88.25,-381.92"/>
<polygon fill="none" stroke="black" points="84.75,-381.67 88.25,-391.67 91.75,-381.67 84.75,-381.67"/>
</g>
<!-- AFLSmartSchedule -->
<g id="node5" class="node">
<title>AFLSmartSchedule</title>
<g id="a_node5"><a xlink:href="#" xlink:title="class AFLSmartSchedule:&#10;Define how fuzzing time should be distributed across the population.">
<polygon fill="none" stroke="black" points="190.25,-0.5 190.25,-79.5 326.25,-79.5 326.25,-0.5 190.25,-0.5"/>
<text text-anchor="start" x="200.5" y="-63.2" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">AFLSmartSchedule</text>
<polyline fill="none" stroke="black" points="190.25,-53.5 326.25,-53.5"/>
<g id="a_node5_13"><a xlink:href="#" xlink:title="AFLSmartSchedule">
<g id="a_node5_14"><a xlink:href="#" xlink:title="__init__(self, parser: Parser.EarleyParser, exponent: float = 1.0):&#10;Constructor">
<text text-anchor="start" x="198.25" y="-41" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
<g id="a_node5_15"><a xlink:href="#" xlink:title="assignEnergy(self, population: Sequence[GreyboxFuzzer.Seed]):&#10;Assign exponential energy proportional to degree of validity">
<text text-anchor="start" x="198.25" y="-29.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="10.00">assignEnergy()</text>
</a>
</g>
<g id="a_node5_16"><a xlink:href="#" xlink:title="degree_of_validity(self, seed: GreyboxFuzzer.Seed) &#45;&gt; float:&#10;Returns the proportion of a seed that is parsable">
<text text-anchor="start" x="198.25" y="-17.5" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">degree_of_validity()</text>
</a>
</g>
<g id="a_node5_17"><a xlink:href="#" xlink:title="parsable(self, seed: GreyboxFuzzer.Seed) &#45;&gt; str:&#10;Returns the substring that is parsable">
<text text-anchor="start" x="198.25" y="-6.25" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">parsable()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- PowerSchedule -->
<g id="node6" class="node">
<title>PowerSchedule</title>
<g id="a_node6"><a xlink:href="GreyboxFuzzer.html" xlink:title="class PowerSchedule:&#10;Define how fuzzing time should be distributed across the population.">
<polygon fill="none" stroke="black" points="203.38,-167.12 203.38,-212.38 313.12,-212.38 313.12,-167.12 203.38,-167.12"/>
<text text-anchor="start" x="211.38" y="-196.07" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">PowerSchedule</text>
<polyline fill="none" stroke="black" points="203.38,-186.38 313.12,-186.38"/>
<g id="a_node6_18"><a xlink:href="#" xlink:title="PowerSchedule">
<g id="a_node6_19"><a xlink:href="GreyboxFuzzer.html" xlink:title="__init__(self) &#45;&gt; None:&#10;Constructor">
<text text-anchor="start" x="228.25" y="-173.88" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- AFLSmartSchedule&#45;&gt;PowerSchedule -->
<g id="edge4" class="edge">
<title>AFLSmartSchedule&#45;&gt;PowerSchedule</title>
<path fill="none" stroke="black" d="M258.25,-79.82C258.25,-103.3 258.25,-132.93 258.25,-155.36"/>
<polygon fill="none" stroke="black" points="254.75,-155.17 258.25,-165.17 261.75,-155.17 254.75,-155.17"/>
</g>
<!-- RegionMutator -->
<g id="node7" class="node">
<title>RegionMutator</title>
<g id="a_node7"><a xlink:href="#" xlink:title="class RegionMutator:&#10;Mutate inputs with input fragments from a pool">
<polygon fill="none" stroke="black" points="344.25,-6.12 344.25,-73.88 492.25,-73.88 492.25,-6.12 344.25,-6.12"/>
<text text-anchor="start" x="371" y="-57.58" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">RegionMutator</text>
<polyline fill="none" stroke="black" points="344.25,-47.88 492.25,-47.88"/>
<g id="a_node7_20"><a xlink:href="#" xlink:title="RegionMutator">
<g id="a_node7_21"><a xlink:href="#" xlink:title="add_to_fragment_pool(self, seed: SeedWithRegions) &#45;&gt; None:&#10;Mark fragments and regions in a seed file">
<text text-anchor="start" x="352.25" y="-35.38" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="10.00">add_to_fragment_pool()</text>
</a>
</g>
<g id="a_node7_22"><a xlink:href="#" xlink:title="delete_fragment(self, seed: SeedWithRegions) &#45;&gt; SeedWithRegions:&#10;Deletes a random region">
<text text-anchor="start" x="352.25" y="-24.12" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="10.00">delete_fragment()</text>
</a>
</g>
<g id="a_node7_23"><a xlink:href="#" xlink:title="swap_fragment(self, seed: SeedWithRegions) &#45;&gt; SeedWithRegions:&#10;Chooses a random region and swaps it with a fragment&#10;that starts with the same symbol">
<text text-anchor="start" x="352.25" y="-12.88" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="10.00">swap_fragment()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- FragmentMutator -->
<g id="node8" class="node">
<title>FragmentMutator</title>
<g id="a_node8"><a xlink:href="#" xlink:title="class FragmentMutator:&#10;Mutate inputs with input fragments from a pool">
<polygon fill="none" stroke="black" points="344.25,-116.5 344.25,-263 492.25,-263 492.25,-116.5 344.25,-116.5"/>
<text text-anchor="start" x="362.38" y="-246.7" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">FragmentMutator</text>
<polyline fill="none" stroke="black" points="344.25,-237 492.25,-237"/>
<g id="a_node8_24"><a xlink:href="#" xlink:title="FragmentMutator">
<g id="a_node8_25"><a xlink:href="#" xlink:title="__init__(self, parser):&#10;Initialize mutators">
<text text-anchor="start" x="352.25" y="-224.5" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
<g id="a_node8_26"><a xlink:href="#" xlink:title="add_to_fragment_pool(self, seed: SeedWithStructure) &#45;&gt; None:&#10;Adds all fragments of a seed to the fragment pool">
<text text-anchor="start" x="352.25" y="-213.25" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">add_to_fragment_pool()</text>
</a>
</g>
<g id="a_node8_27"><a xlink:href="#" xlink:title="add_fragment(self, fragment: DerivationTree) &#45;&gt; None:&#10;Recursively adds fragments to the fragment pool">
<text text-anchor="start" x="352.25" y="-201" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">add_fragment()</text>
</a>
</g>
<g id="a_node8_28"><a xlink:href="#" xlink:title="count_nodes(self, fragment: DerivationTree) &#45;&gt; int:&#10;Returns the number of nodes in the fragment">
<text text-anchor="start" x="352.25" y="-189.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">count_nodes()</text>
</a>
</g>
<g id="a_node8_29"><a xlink:href="#" xlink:title="delete_fragment(self, seed: SeedWithStructure) &#45;&gt; SeedWithStructure:&#10;Delete a random fragment">
<text text-anchor="start" x="352.25" y="-179.5" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="10.00">delete_fragment()</text>
</a>
</g>
<g id="a_node8_30"><a xlink:href="#" xlink:title="is_excluded(self, symbol: str) &#45;&gt; bool:&#10;Returns true if a fragment starting with a specific&#10;symbol and all its decendents can be excluded">
<text text-anchor="start" x="352.25" y="-167.25" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">is_excluded()</text>
</a>
</g>
<g id="a_node8_31"><a xlink:href="#" xlink:title="mutate(self, seed: SeedWithStructure) &#45;&gt; SeedWithStructure:&#10;Implement structure&#45;aware mutation. Memoize seeds.">
<text text-anchor="start" x="352.25" y="-157" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="10.00">mutate()</text>
</a>
</g>
<g id="a_node8_32"><a xlink:href="#" xlink:title="recursive_delete(self, fragment: DerivationTree) &#45;&gt; DerivationTree:&#10;Recursively finds the fragment to delete">
<text text-anchor="start" x="352.25" y="-144.75" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">recursive_delete()</text>
</a>
</g>
<g id="a_node8_33"><a xlink:href="#" xlink:title="recursive_swap(self, fragment: DerivationTree) &#45;&gt; DerivationTree:&#10;Recursively finds the fragment to swap.">
<text text-anchor="start" x="352.25" y="-133.5" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="10.00">recursive_swap()</text>
</a>
</g>
<g id="a_node8_34"><a xlink:href="#" xlink:title="swap_fragment(self, seed: SeedWithStructure) &#45;&gt; SeedWithStructure:&#10;Substitutes a random fragment with another with the same symbol">
<text text-anchor="start" x="352.25" y="-123.25" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="10.00">swap_fragment()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- RegionMutator&#45;&gt;FragmentMutator -->
<g id="edge5" class="edge">
<title>RegionMutator&#45;&gt;FragmentMutator</title>
<path fill="none" stroke="black" d="M418.25,-74.16C418.25,-83.44 418.25,-93.97 418.25,-104.79"/>
<polygon fill="none" stroke="black" points="414.75,-104.63 418.25,-114.63 421.75,-104.63 414.75,-104.63"/>
</g>
<!-- Mutator -->
<g id="node9" class="node">
<title>Mutator</title>
<g id="a_node9"><a xlink:href="GreyboxFuzzer.html" xlink:title="class Mutator:&#10;Mutate strings">
<polygon fill="none" stroke="black" points="380.25,-305.62 380.25,-350.88 456.25,-350.88 456.25,-305.62 380.25,-305.62"/>
<text text-anchor="start" x="392.38" y="-334.57" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="14.00" fill="#b03a2e">Mutator</text>
<polyline fill="none" stroke="black" points="380.25,-324.88 456.25,-324.88"/>
<g id="a_node9_35"><a xlink:href="#" xlink:title="Mutator">
<g id="a_node9_36"><a xlink:href="GreyboxFuzzer.html" xlink:title="__init__(self) &#45;&gt; None:&#10;Constructor">
<text text-anchor="start" x="388.25" y="-312.38" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-style="italic" font-size="10.00">__init__()</text>
</a>
</g>
</a>
</g>
</a>
</g>
</g>
<!-- FragmentMutator&#45;&gt;Mutator -->
<g id="edge6" class="edge">
<title>FragmentMutator&#45;&gt;Mutator</title>
<path fill="none" stroke="black" d="M418.25,-263.4C418.25,-274.02 418.25,-284.5 418.25,-293.81"/>
<polygon fill="none" stroke="black" points="414.75,-293.76 418.25,-303.76 421.75,-293.76 414.75,-293.76"/>
</g>
<!-- Legend -->
<g id="node10" class="node">
<title>Legend</title>
<text text-anchor="start" x="510.62" y="-56" font-family="Patua One, Helvetica, sans-serif" font-weight="bold" font-size="10.00" fill="#b03a2e">Legend</text>
<text text-anchor="start" x="510.62" y="-46" font-family="Patua One, Helvetica, sans-serif" font-size="10.00">• </text>
<text text-anchor="start" x="516.62" y="-46" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-weight="bold" font-size="8.00">public_method()</text>
<text text-anchor="start" x="510.62" y="-36" font-family="Patua One, Helvetica, sans-serif" font-size="10.00">• </text>
<text text-anchor="start" x="516.62" y="-36" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-size="8.00">private_method()</text>
<text text-anchor="start" x="510.62" y="-26" font-family="Patua One, Helvetica, sans-serif" font-size="10.00">• </text>
<text text-anchor="start" x="516.62" y="-26" font-family="'Fira Mono', 'Source Code Pro', 'Courier', monospace" font-style="italic" font-size="8.00">overloaded_method()</text>
<text text-anchor="start" x="510.62" y="-16.95" font-family="Helvetica,sans-Serif" font-size="9.00">Hover over names to see doc</text>
</g>
</g>
</svg>
</p>
</div>
</div>
</div>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h2 id="Background">Background<a class="anchor-link" href="#Background">&#182;</a></h2><p>First, we <a href="GreyboxFuzzer.html#Ingredients-for-Greybox-Fuzzing">recall</a> a few basic ingredients for mutational fuzzers.</p>
<ul>
<li><strong>Seed</strong>. A <em>seed</em> is an input that is used by the fuzzer to generate new inputs by applying a sequence of mutations.</li>
<li><strong>Mutator</strong>. A <em>mutator</em> implements a set of mutation operators that applied to an input produce a slightly modified input.</li>
<li><strong>PowerSchedule</strong>. A <em>power schedule</em> assigns <em>energy</em> to a seed. A seed with higher energy is fuzzed more often throughout the fuzzing campaign.</li>
<li><strong>AdvancedMutationFuzzer</strong>. Our <em>mutational blackbox fuzzer</em> generates inputs by mutating seeds in an initial population of inputs.</li>
<li><strong>GreyboxFuzzer</strong>. Our <em>greybox fuzzer</em> dynamically adds inputs to the population of seeds that increased coverage.</li>
<li><strong>FunctionCoverageRunner</strong>. Our <em>function coverage runner</em> collects coverage information for the execution of a given Python function.</li>
</ul>
<p>Let's try to get a feeling for these concepts.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn"><a href="https://github.com/uds-se/fuzzingbook//tree/master/notebooks/shared/bookutils" class="import" target="_blank">bookutils.setup</a></span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn"><a href="https://docs.python.org/3/library/typing.html" class="import" target="_blank">typing</a></span> <span class="kn">import</span> <span class="n">List</span><span class="p">,</span> <span class="n">Set</span><span class="p">,</span> <span class="n">Dict</span><span class="p">,</span> <span class="n">Sequence</span><span class="p">,</span> <span class="n">cast</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn"><a href="Fuzzer.html" class="import" target="_blank">Fuzzer</a></span> <span class="kn">import</span> <span class="n">Fuzzer</span>
<span class="kn">from</span> <span class="nn"><a href="GreyboxFuzzer.html" class="import" target="_blank">GreyboxFuzzer</a></span> <span class="kn">import</span> <span class="n">Mutator</span><span class="p">,</span> <span class="n">Seed</span><span class="p">,</span> <span class="n">PowerSchedule</span>
<span class="kn">from</span> <span class="nn"><a href="GreyboxFuzzer.html" class="import" target="_blank">GreyboxFuzzer</a></span> <span class="kn">import</span> <span class="n">AdvancedMutationFuzzer</span><span class="p">,</span> <span class="n">GreyboxFuzzer</span>
<span class="kn">from</span> <span class="nn"><a href="MutationFuzzer.html" class="import" target="_blank">MutationFuzzer</a></span> <span class="kn">import</span> <span class="n">FunctionCoverageRunner</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>The following command applies a mutation to the input "Hello World".</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">Mutator</span><span class="p">()</span><span class="o">.</span><span class="n">mutate</span><span class="p">(</span><span class="s2">&quot;Hello World&quot;</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;Lello World&#39;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>The default power schedule assigns energy uniformly across all seeds. Let's check whether this works.</p>
<p>We choose 10k times from a population of three seeds.  As we see in the <code>hits</code> counter, each seed is chosen about a third of the time.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">population</span> <span class="o">=</span> <span class="p">[</span><span class="n">Seed</span><span class="p">(</span><span class="s2">&quot;A&quot;</span><span class="p">),</span> <span class="n">Seed</span><span class="p">(</span><span class="s2">&quot;B&quot;</span><span class="p">),</span> <span class="n">Seed</span><span class="p">(</span><span class="s2">&quot;C&quot;</span><span class="p">)]</span>
<span class="n">schedule</span> <span class="o">=</span> <span class="n">PowerSchedule</span><span class="p">()</span>
<span class="n">hits</span> <span class="o">=</span> <span class="p">{</span>
    <span class="s2">&quot;A&quot;</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
    <span class="s2">&quot;B&quot;</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
    <span class="s2">&quot;C&quot;</span><span class="p">:</span> <span class="mi">0</span>
<span class="p">}</span>

<span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10000</span><span class="p">):</span>
    <span class="n">seed</span> <span class="o">=</span> <span class="n">schedule</span><span class="o">.</span><span class="n">choose</span><span class="p">(</span><span class="n">population</span><span class="p">)</span>
    <span class="n">hits</span><span class="p">[</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">]</span> <span class="o">+=</span> <span class="mi">1</span>

<span class="n">hits</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>{&#39;A&#39;: 3387, &#39;B&#39;: 3255, &#39;C&#39;: 3358}
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Before explaining the function coverage runner, lets import Python's HTML parser as example...</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn"><a href="https://docs.python.org/3/library/html.parser.html" class="import" target="_blank">html.parser</a></span> <span class="kn">import</span> <span class="n">HTMLParser</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>... and create a <em>wrapper function</em> that passes each input into a new parser object.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">my_parser</span><span class="p">(</span><span class="n">inp</span><span class="p">:</span> <span class="nb">str</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
    <span class="n">parser</span> <span class="o">=</span> <span class="n">HTMLParser</span><span class="p">()</span>
    <span class="n">parser</span><span class="o">.</span><span class="n">feed</span><span class="p">(</span><span class="n">inp</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>The <code>FunctionCoverageRunner</code> constructor takes a Python <code>function</code> to execute. The function <code>run()</code> takes an input, passes it on to the Python <code>function</code>, and collects the coverage information for this execution. The function <code>coverage()</code> returns a list of tuples <code>(function name, line number)</code> for each statement that has been covered in the Python <code>function</code>.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">runner</span> <span class="o">=</span> <span class="n">FunctionCoverageRunner</span><span class="p">(</span><span class="n">my_parser</span><span class="p">)</span>
<span class="n">runner</span><span class="o">.</span><span class="n">run</span><span class="p">(</span><span class="s2">&quot;Hello World&quot;</span><span class="p">)</span>
<span class="n">cov</span> <span class="o">=</span> <span class="n">runner</span><span class="o">.</span><span class="n">coverage</span><span class="p">()</span>

<span class="nb">list</span><span class="p">(</span><span class="n">cov</span><span class="p">)[:</span><span class="mi">5</span><span class="p">]</span>  <span class="c1"># Print 5 statements covered in HTMLParser</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>[(&#39;goahead&#39;, 147),
 (&#39;goahead&#39;, 162),
 (&#39;reset&#39;, 99),
 (&#39;goahead&#39;, 165),
 (&#39;my_parser&#39;, 2)]
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Our greybox fuzzer takes a seed population, mutator, and power schedule. Let's generate 5000 fuzz inputs starting with an "empty" seed corpus.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn"><a href="https://docs.python.org/3/library/time.html" class="import" target="_blank">time</a></span>
<span class="kn">import</span> <span class="nn"><a href="https://docs.python.org/3/library/random.html" class="import" target="_blank">random</a></span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">n</span> <span class="o">=</span> <span class="mi">5000</span>
<span class="n">seed_input</span> <span class="o">=</span> <span class="s2">&quot; &quot;</span>  <span class="c1"># empty seed</span>
<span class="n">runner</span> <span class="o">=</span> <span class="n">FunctionCoverageRunner</span><span class="p">(</span><span class="n">my_parser</span><span class="p">)</span>
<span class="n">fuzzer</span> <span class="o">=</span> <span class="n">GreyboxFuzzer</span><span class="p">([</span><span class="n">seed_input</span><span class="p">],</span> <span class="n">Mutator</span><span class="p">(),</span> <span class="n">PowerSchedule</span><span class="p">())</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">start</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>
<span class="n">fuzzer</span><span class="o">.</span><span class="n">runs</span><span class="p">(</span><span class="n">runner</span><span class="p">,</span> <span class="n">trials</span><span class="o">=</span><span class="n">n</span><span class="p">)</span>
<span class="n">end</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="s2">&quot;It took the fuzzer </span><span class="si">%0.2f</span><span class="s2"> seconds to generate and execute </span><span class="si">%d</span><span class="s2"> inputs.&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">end</span> <span class="o">-</span> <span class="n">start</span><span class="p">,</span> <span class="n">n</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;It took the fuzzer 0.41 seconds to generate and execute 5000 inputs.&#39;
</pre>
</div>

</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="s2">&quot;During this fuzzing campaign, we covered </span><span class="si">%d</span><span class="s2"> statements.&quot;</span> <span class="o">%</span> <span class="nb">len</span><span class="p">(</span><span class="n">runner</span><span class="o">.</span><span class="n">coverage</span><span class="p">())</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;During this fuzzing campaign, we covered 73 statements.&#39;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h2 id="Fuzzing-with-Dictionaries">Fuzzing with Dictionaries<a class="anchor-link" href="#Fuzzing-with-Dictionaries">&#182;</a></h2><p>To fuzz our HTML parser, it may be useful to inform a mutational fuzzer about important keywords in the input – that is, important HTML keywords. The general idea is to have a <em>dictionary</em> of pre-defined useful inputs that could then be inserted as such when mutating an input.</p>
<p>This concept is illustrated in the following diagram. When mutating an input, we may insert given keywords from the dictionary (in red).</p>
<p><img src="PICS/GreyboxGrammarFuzzer-Dict.gif"></p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>To implement this concept, we extend our mutator to consider keywords from a dictionary.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">DictMutator</span><span class="p">(</span><span class="n">Mutator</span><span class="p">):</span>
<span class="w">    </span><span class="sd">&quot;&quot;&quot;Mutate strings using keywords from a dictionary&quot;&quot;&quot;</span>

    <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">dictionary</span><span class="p">:</span> <span class="n">List</span><span class="p">[</span><span class="nb">str</span><span class="p">])</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Constructor. `dictionary` is the list of keywords to use.&quot;&quot;&quot;</span>
        <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="fm">__init__</span><span class="p">()</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">dictionary</span> <span class="o">=</span> <span class="n">dictionary</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">mutators</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">insert_from_dictionary</span><span class="p">)</span>

    <span class="k">def</span> <span class="nf">insert_from_dictionary</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">s</span><span class="p">:</span> <span class="nb">str</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="nb">str</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Returns s with a keyword from the dictionary inserted&quot;&quot;&quot;</span>
        <span class="n">pos</span> <span class="o">=</span> <span class="n">random</span><span class="o">.</span><span class="n">randint</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nb">len</span><span class="p">(</span><span class="n">s</span><span class="p">))</span>
        <span class="n">random_keyword</span> <span class="o">=</span> <span class="n">random</span><span class="o">.</span><span class="n">choice</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">dictionary</span><span class="p">)</span>
        <span class="k">return</span> <span class="n">s</span><span class="p">[:</span><span class="n">pos</span><span class="p">]</span> <span class="o">+</span> <span class="n">random_keyword</span> <span class="o">+</span> <span class="n">s</span><span class="p">[</span><span class="n">pos</span><span class="p">:]</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Let's try to add a few HTML tags and attributes and see whether the coverage with <code>DictMutator</code> increases.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">runner</span> <span class="o">=</span> <span class="n">FunctionCoverageRunner</span><span class="p">(</span><span class="n">my_parser</span><span class="p">)</span>
<span class="n">dict_mutator</span> <span class="o">=</span> <span class="n">DictMutator</span><span class="p">([</span><span class="s2">&quot;&lt;a&gt;&quot;</span><span class="p">,</span> <span class="s2">&quot;&lt;/a&gt;&quot;</span><span class="p">,</span> <span class="s2">&quot;&lt;a/&gt;&quot;</span><span class="p">,</span> <span class="s2">&quot;=&#39;a&#39;&quot;</span><span class="p">])</span>
<span class="n">dict_fuzzer</span> <span class="o">=</span> <span class="n">GreyboxFuzzer</span><span class="p">([</span><span class="n">seed_input</span><span class="p">],</span> <span class="n">dict_mutator</span><span class="p">,</span> <span class="n">PowerSchedule</span><span class="p">())</span>

<span class="n">start</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>
<span class="n">dict_fuzzer</span><span class="o">.</span><span class="n">runs</span><span class="p">(</span><span class="n">runner</span><span class="p">,</span> <span class="n">trials</span><span class="o">=</span><span class="n">n</span><span class="p">)</span>
<span class="n">end</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>

<span class="s2">&quot;It took the fuzzer </span><span class="si">%0.2f</span><span class="s2"> seconds to generate and execute </span><span class="si">%d</span><span class="s2"> inputs.&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">end</span> <span class="o">-</span> <span class="n">start</span><span class="p">,</span> <span class="n">n</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;It took the fuzzer 3.00 seconds to generate and execute 5000 inputs.&#39;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Clearly, it takes longer. In our experience, this means more code is covered:</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="s2">&quot;During this fuzzing campaign, we covered </span><span class="si">%d</span><span class="s2"> statements.&quot;</span> <span class="o">%</span> <span class="nb">len</span><span class="p">(</span><span class="n">runner</span><span class="o">.</span><span class="n">coverage</span><span class="p">())</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;During this fuzzing campaign, we covered 110 statements.&#39;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>How do the fuzzers compare in terms of coverage over time?</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn"><a href="Coverage.html" class="import" target="_blank">Coverage</a></span> <span class="kn">import</span> <span class="n">population_coverage</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn"><a href="https://matplotlib.org/" class="import" target="_blank">matplotlib.pyplot</a></span> <span class="k">as</span> <span class="nn">plt</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">_</span><span class="p">,</span> <span class="n">dict_cov</span> <span class="o">=</span> <span class="n">population_coverage</span><span class="p">(</span><span class="n">dict_fuzzer</span><span class="o">.</span><span class="n">inputs</span><span class="p">,</span> <span class="n">my_parser</span><span class="p">)</span>
<span class="n">_</span><span class="p">,</span> <span class="n">fuzz_cov</span> <span class="o">=</span> <span class="n">population_coverage</span><span class="p">(</span><span class="n">fuzzer</span><span class="o">.</span><span class="n">inputs</span><span class="p">,</span> <span class="n">my_parser</span><span class="p">)</span>
<span class="n">line_dict</span><span class="p">,</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">plot</span><span class="p">(</span><span class="n">dict_cov</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;With Dictionary&quot;</span><span class="p">)</span>
<span class="n">line_fuzz</span><span class="p">,</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">plot</span><span class="p">(</span><span class="n">fuzz_cov</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&quot;Without Dictionary&quot;</span><span class="p">)</span>
<span class="n">plt</span><span class="o">.</span><span class="n">legend</span><span class="p">(</span><span class="n">handles</span><span class="o">=</span><span class="p">[</span><span class="n">line_dict</span><span class="p">,</span> <span class="n">line_fuzz</span><span class="p">])</span>
<span class="n">plt</span><span class="o">.</span><span class="n">xlim</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="n">n</span><span class="p">)</span>
<span class="n">plt</span><span class="o">.</span><span class="n">title</span><span class="p">(</span><span class="s1">&#39;Coverage over time&#39;</span><span class="p">)</span>
<span class="n">plt</span><span class="o">.</span><span class="n">xlabel</span><span class="p">(</span><span class="s1">&#39;# of inputs&#39;</span><span class="p">)</span>
<span class="n">plt</span><span class="o">.</span><span class="n">ylabel</span><span class="p">(</span><span class="s1">&#39;lines covered&#39;</span><span class="p">);</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_image output_png output_subarea ">
<img src="data:image/png;base64,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
"
>

</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><!-- \todo{Andreas: Section on mining keywords using parser-directed fuzzing or AUTOGRAM?} -->

<p><strong><em>Summary.</em></strong> Informing the fuzzer about important keywords already goes a long way towards achieving lots of coverage quickly.</p>
<p><strong><em>Try it.</em></strong> Open this chapter as Jupyter notebook and add other HTML-related keywords to the dictionary in order to see whether the difference in coverage actually increases (given the same budget of 5k generated test inputs).</p>
<p><strong><em>Read up.</em></strong> Michał Zalewski, author of AFL, wrote several great blog posts on <a href="https://lcamtuf.blogspot.com/2015/01/afl-fuzz-making-up-grammar-with.html">making up grammars with a dictionary in hand</a> and <a href="https://lcamtuf.blogspot.com/2014/11/pulling-jpegs-out-of-thin-air.html">pulling JPEGs out of thin air</a>!</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h2 id="Fuzzing-with-Input-Fragments">Fuzzing with Input Fragments<a class="anchor-link" href="#Fuzzing-with-Input-Fragments">&#182;</a></h2><p>While dictionaries are helpful to inject important keywords into seed inputs, they do not allow maintaining the structural integrity of the generated inputs. Instead, we need to make the fuzzer aware of the <em>input structure</em>. We can do this using <a href="Grammars.html">grammars</a>. Our first approach</p>
<ol>
<li><a href="Parser.html">parses</a> the seed inputs, </li>
<li>disassembles them into input fragments, and </li>
<li>generates new files by reassembling these fragments according to the rules of the grammar.</li>
</ol>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>This combination of <em>parsing</em> and <em>fuzzing</em> can be very powerful. For instance, we can <em>swap</em> existing substructures in an input:</p>
<p><img src="PICS/GreyboxGrammarFuzzer-Swap.gif"></p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>We can also <em>replace</em> existing substructures by newly generated ones:</p>
<p><img src="PICS/GreyboxGrammarFuzzer-Gen.gif"></p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>All these operations take place on <a href="GrammarFuzzer.html">derivation trees</a>, which can be parsed from and produced into strings at any time.</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h3 id="Parsing-and-Recombining-JavaScript,-or-How-to-Make-50,000-USD-in-Four-Weeks">Parsing and Recombining JavaScript, or How to Make 50,000 USD in Four Weeks<a class="anchor-link" href="#Parsing-and-Recombining-JavaScript,-or-How-to-Make-50,000-USD-in-Four-Weeks">&#182;</a></h3><p>In "Fuzzing with Code Fragments" [<a href="https://www.usenix.org/system/files/conference/usenixsecurity12/sec12-final73.pdf">Holler <em>et al</em>, 2012</a>], Holler, Herzig, and Zeller apply these steps to fuzz a JavaScript interpreter.  They use a JavaScript grammar to</p>
<ol>
<li><em>parse</em> (valid) JavaScript inputs into parse trees,</li>
<li><em>disassemble</em> them into fragments (subtrees),</li>
<li><em>recombine</em> these fragments into valid JavaScript programs again, and</li>
<li><em>feed</em> these programs into a JavaScript interpreter for execution.</li>
</ol>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>As in most fuzzing scenarios, the aim is to cause the JavaScript interpreter to crash.  Here is an example of LangFuzz-generated JavaScript code (from [<a href="https://www.usenix.org/system/files/conference/usenixsecurity12/sec12-final73.pdf">Holler <em>et al</em>, 2012</a>]) that caused a crash in the Mozilla JavaScript interpreter:</p>
<div class="highlight"><pre><span></span><span class="kd">var</span><span class="w"> </span><span class="nx">haystack</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;foo&quot;</span><span class="p">;</span>
<span class="kd">var</span><span class="w"> </span><span class="nx">re_text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;^foo&quot;</span><span class="p">;</span>
<span class="nx">haystack</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="s2">&quot;x&quot;</span><span class="p">;</span>
<span class="nx">re_text</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="s2">&quot;(x)&quot;</span><span class="p">;</span>
<span class="kd">var</span><span class="w"> </span><span class="nx">re</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">RegExp</span><span class="p">(</span><span class="nx">re_text</span><span class="p">);</span>
<span class="nx">re</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">haystack</span><span class="p">);</span>
<span class="nb">RegExp</span><span class="p">.</span><span class="nx">input</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Number</span><span class="p">();</span>
<span class="nx">print</span><span class="p">(</span><span class="nb">RegExp</span><span class="p">.</span><span class="nx">$1</span><span class="p">);</span>
</pre></div>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>From a crash of the JavaScript interpreter, it is frequently possible to construct an <em>exploit</em> that will not only crash the interpreter, but instead have it execute code under the attacker's control.  Therefore, such crashes are serious flaws, which is why you get a bug bounty if you report them.</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>In the first four weeks of running his <em>LangFuzz</em> tool, Christian Holler, first author of that paper, netted <em>more than USD 50,000 in bug bounties</em>.  To date, LangFuzz has found more than 2,600 bugs in the JavaScript browsers of Mozilla Firefox, Google Chrome, and Microsoft Edge.  If you use any of these browsers (say, on your Android phone), the combination of parsing and fuzzing has contributed significantly in making your browsing session secure.</p>
<p>(Note that these are the same Holler and Zeller who are co-authors of this book.  If you ever wondered why we devote a couple of chapters on grammar-based fuzzing, that's because we have had some great experience with it.)</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h3 id="Parsing-and-Recombining-HTML">Parsing and Recombining HTML<a class="anchor-link" href="#Parsing-and-Recombining-HTML">&#182;</a></h3><p>In this book, let us stay with HTML input for a while.  To generate valid HTML inputs for our Python <code>HTMLParser</code>, we should first define a simple grammar. It allows defining HTML tags with attributes. Our context-free grammar does not require that opening and closing tags must match. However, we will see that such context-sensitive features can be maintained in the derived input fragments, and thus in the generated inputs.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn"><a href="https://docs.python.org/3/library/string.html" class="import" target="_blank">string</a></span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn"><a href="Grammars.html" class="import" target="_blank">Grammars</a></span> <span class="kn">import</span> <span class="n">is_valid_grammar</span><span class="p">,</span> <span class="n">srange</span><span class="p">,</span> <span class="n">Grammar</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">XML_TOKENS</span><span class="p">:</span> <span class="n">Set</span><span class="p">[</span><span class="nb">str</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;&lt;id&gt;&quot;</span><span class="p">,</span> <span class="s2">&quot;&lt;text&gt;&quot;</span><span class="p">}</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">XML_GRAMMAR</span><span class="p">:</span> <span class="n">Grammar</span> <span class="o">=</span> <span class="p">{</span>
    <span class="s2">&quot;&lt;start&gt;&quot;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&quot;&lt;xml-tree&gt;&quot;</span><span class="p">],</span>
    <span class="s2">&quot;&lt;xml-tree&gt;&quot;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&quot;&lt;text&gt;&quot;</span><span class="p">,</span>
                   <span class="s2">&quot;&lt;xml-open-tag&gt;&lt;xml-tree&gt;&lt;xml-close-tag&gt;&quot;</span><span class="p">,</span>
                   <span class="s2">&quot;&lt;xml-openclose-tag&gt;&quot;</span><span class="p">,</span>
                   <span class="s2">&quot;&lt;xml-tree&gt;&lt;xml-tree&gt;&quot;</span><span class="p">],</span>
    <span class="s2">&quot;&lt;xml-open-tag&gt;&quot;</span><span class="p">:</span>      <span class="p">[</span><span class="s2">&quot;&lt;&lt;id&gt;&gt;&quot;</span><span class="p">,</span> <span class="s2">&quot;&lt;&lt;id&gt; &lt;xml-attribute&gt;&gt;&quot;</span><span class="p">],</span>
    <span class="s2">&quot;&lt;xml-openclose-tag&gt;&quot;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&quot;&lt;&lt;id&gt;/&gt;&quot;</span><span class="p">,</span> <span class="s2">&quot;&lt;&lt;id&gt; &lt;xml-attribute&gt;/&gt;&quot;</span><span class="p">],</span>
    <span class="s2">&quot;&lt;xml-close-tag&gt;&quot;</span><span class="p">:</span>     <span class="p">[</span><span class="s2">&quot;&lt;/&lt;id&gt;&gt;&quot;</span><span class="p">],</span>
    <span class="s2">&quot;&lt;xml-attribute&gt;&quot;</span><span class="p">:</span>     <span class="p">[</span><span class="s2">&quot;&lt;id&gt;=&lt;id&gt;&quot;</span><span class="p">,</span> <span class="s2">&quot;&lt;xml-attribute&gt; &lt;xml-attribute&gt;&quot;</span><span class="p">],</span>
    <span class="s2">&quot;&lt;id&gt;&quot;</span><span class="p">:</span>                <span class="p">[</span><span class="s2">&quot;&lt;letter&gt;&quot;</span><span class="p">,</span> <span class="s2">&quot;&lt;id&gt;&lt;letter&gt;&quot;</span><span class="p">],</span>
    <span class="s2">&quot;&lt;text&gt;&quot;</span><span class="p">:</span>              <span class="p">[</span><span class="s2">&quot;&lt;text&gt;&lt;letter_space&gt;&quot;</span><span class="p">,</span> <span class="s2">&quot;&lt;letter_space&gt;&quot;</span><span class="p">],</span>
    <span class="s2">&quot;&lt;letter&gt;&quot;</span><span class="p">:</span>            <span class="n">srange</span><span class="p">(</span><span class="n">string</span><span class="o">.</span><span class="n">ascii_letters</span> <span class="o">+</span> <span class="n">string</span><span class="o">.</span><span class="n">digits</span> <span class="o">+</span>
                                  <span class="s2">&quot;</span><span class="se">\&quot;</span><span class="s2">&quot;</span> <span class="o">+</span> <span class="s2">&quot;&#39;&quot;</span> <span class="o">+</span> <span class="s2">&quot;.&quot;</span><span class="p">),</span>
    <span class="s2">&quot;&lt;letter_space&gt;&quot;</span><span class="p">:</span>      <span class="n">srange</span><span class="p">(</span><span class="n">string</span><span class="o">.</span><span class="n">ascii_letters</span> <span class="o">+</span> <span class="n">string</span><span class="o">.</span><span class="n">digits</span> <span class="o">+</span>
                                  <span class="s2">&quot;</span><span class="se">\&quot;</span><span class="s2">&quot;</span> <span class="o">+</span> <span class="s2">&quot;&#39;&quot;</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="s2">&quot;</span><span class="se">\t</span><span class="s2">&quot;</span><span class="p">),</span>
<span class="p">}</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">assert</span> <span class="n">is_valid_grammar</span><span class="p">(</span><span class="n">XML_GRAMMAR</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>In order to parse an input into a derivation tree, we use the <a href="Parser.html#Parsing-Context-Free-Grammars">Earley parser</a>.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn"><a href="Parser.html" class="import" target="_blank">Parser</a></span> <span class="kn">import</span> <span class="n">EarleyParser</span><span class="p">,</span> <span class="n">Parser</span>
<span class="kn">from</span> <span class="nn"><a href="GrammarFuzzer.html" class="import" target="_blank">GrammarFuzzer</a></span> <span class="kn">import</span> <span class="n">display_tree</span><span class="p">,</span> <span class="n">DerivationTree</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Let's run the parser on a simple HTML input and display all possible parse trees. A <em>parse tree</em> represents the input structure according to the given grammar.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn"><a href="https://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html" class="import" target="_blank">IPython.display</a></span> <span class="kn">import</span> <span class="n">display</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">parser</span> <span class="o">=</span> <span class="n">EarleyParser</span><span class="p">(</span><span class="n">XML_GRAMMAR</span><span class="p">,</span> <span class="n">tokens</span><span class="o">=</span><span class="n">XML_TOKENS</span><span class="p">)</span>

<span class="k">for</span> <span class="n">tree</span> <span class="ow">in</span> <span class="n">parser</span><span class="o">.</span><span class="n">parse</span><span class="p">(</span><span class="s2">&quot;&lt;html&gt;Text&lt;/html&gt;&quot;</span><span class="p">):</span>
    <span class="n">display</span><span class="p">(</span><span class="n">display_tree</span><span class="p">(</span><span class="n">tree</span><span class="p">))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="337pt" height="223pt"
 viewBox="0.00 0.00 336.50 223.25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 219.25)">
<polygon fill="white" stroke="none" points="-4,4 -4,-219.25 332.5,-219.25 332.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="167.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="167.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M167.25,-201.21C167.25,-194.99 167.25,-184.9 167.25,-176.14"/>
<polygon fill="black" stroke="black" points="170.75,-176.35 167.25,-166.35 163.75,-176.35 170.75,-176.35"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="70.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M154.96,-150.76C139.29,-142.97 111.91,-129.35 92.52,-119.7"/>
<polygon fill="black" stroke="black" points="94.3,-116.68 83.79,-115.36 91.19,-122.95 94.3,-116.68"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="167.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M167.25,-150.96C167.25,-144.74 167.25,-134.65 167.25,-125.89"/>
<polygon fill="black" stroke="black" points="170.75,-126.1 167.25,-116.1 163.75,-126.1 170.75,-126.1"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="262.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>1&#45;&gt;10</title>
<path fill="none" stroke="black" d="M179.28,-150.76C194.56,-143.01 221.2,-129.47 240.18,-119.84"/>
<polygon fill="black" stroke="black" points="241.64,-123.02 248.97,-115.37 238.47,-116.78 241.64,-123.02"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M63.75,-100.71C55.96,-93.62 42.66,-81.51 32.28,-72.06"/>
<polygon fill="black" stroke="black" points="34.67,-69.5 24.92,-65.36 29.96,-74.68 34.67,-69.5"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M69.76,-100.71C69.24,-94.49 68.41,-84.4 67.68,-75.64"/>
<polygon fill="black" stroke="black" points="71.18,-75.52 66.87,-65.85 64.21,-76.1 71.18,-75.52"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-51.2" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M75.77,-100.71C82.25,-93.76 93.21,-82 101.95,-72.64"/>
<polygon fill="black" stroke="black" points="104.39,-75.15 108.65,-65.45 99.27,-70.37 104.39,-75.15"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="66.25" y="-0.95" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M66.25,-50.46C66.25,-44.24 66.25,-34.15 66.25,-25.39"/>
<polygon fill="black" stroke="black" points="69.75,-25.6 66.25,-15.6 62.75,-25.6 69.75,-25.6"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="169.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M167.5,-100.71C167.75,-94.49 168.17,-84.4 168.53,-75.64"/>
<polygon fill="black" stroke="black" points="172.02,-75.99 168.94,-65.85 165.03,-75.7 172.02,-75.99"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="169.25" y="-0.95" font-family="Times,serif" font-size="14.00">Text</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M169.25,-50.46C169.25,-44.24 169.25,-34.15 169.25,-25.39"/>
<polygon fill="black" stroke="black" points="172.75,-25.6 169.25,-15.6 165.75,-25.6 172.75,-25.6"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="224.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 10&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>10&#45;&gt;11</title>
<path fill="none" stroke="black" d="M257.59,-100.71C252.23,-93.91 243.24,-82.49 235.95,-73.23"/>
<polygon fill="black" stroke="black" points="238.82,-71.22 229.88,-65.53 233.32,-75.55 238.82,-71.22"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="262.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 10&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>10&#45;&gt;12</title>
<path fill="none" stroke="black" d="M262.25,-100.71C262.25,-94.49 262.25,-84.4 262.25,-75.64"/>
<polygon fill="black" stroke="black" points="265.75,-75.85 262.25,-65.85 258.75,-75.85 265.75,-75.85"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="311.25" y="-51.2" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 10&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>10&#45;&gt;14</title>
<path fill="none" stroke="black" d="M268.26,-100.71C275.39,-93.69 287.5,-81.76 297.06,-72.35"/>
<polygon fill="black" stroke="black" points="299.44,-74.91 304.11,-65.4 294.53,-69.92 299.44,-74.91"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="262.25" y="-0.95" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M262.25,-50.46C262.25,-44.24 262.25,-34.15 262.25,-25.39"/>
<polygon fill="black" stroke="black" points="265.75,-25.6 262.25,-15.6 258.75,-25.6 265.75,-25.6"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="432pt" height="274pt"
 viewBox="0.00 0.00 431.50 273.50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 269.5)">
<polygon fill="white" stroke="none" points="-4,4 -4,-269.5 427.5,-269.5 427.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="201.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="201.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M201.25,-251.46C201.25,-245.24 201.25,-235.15 201.25,-226.39"/>
<polygon fill="black" stroke="black" points="204.75,-226.6 201.25,-216.6 197.75,-226.6 204.75,-226.6"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="96.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M187.95,-201.01C170.83,-193.15 140.79,-179.34 119.77,-169.68"/>
<polygon fill="black" stroke="black" points="121.36,-166.56 110.82,-165.57 118.44,-172.92 121.36,-166.56"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="201.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M201.25,-201.21C201.25,-194.99 201.25,-184.9 201.25,-176.14"/>
<polygon fill="black" stroke="black" points="204.75,-176.35 201.25,-166.35 197.75,-176.35 204.75,-176.35"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="338.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>1&#45;&gt;14</title>
<path fill="none" stroke="black" d="M218.6,-201.01C241.76,-192.86 283.05,-178.32 310.54,-168.63"/>
<polygon fill="black" stroke="black" points="311.34,-172.06 319.61,-165.44 309.02,-165.46 311.34,-172.06"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M86.24,-150.76C73.9,-143.22 52.62,-130.23 36.95,-120.66"/>
<polygon fill="black" stroke="black" points="38.82,-117.7 28.47,-115.48 35.18,-123.67 38.82,-117.7"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M92.57,-150.96C88.43,-144.3 81.55,-133.23 75.85,-124.07"/>
<polygon fill="black" stroke="black" points="79.01,-122.52 70.76,-115.88 73.07,-126.22 79.01,-122.52"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-101.45" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M98.58,-150.96C101.09,-144.59 105.19,-134.18 108.69,-125.28"/>
<polygon fill="black" stroke="black" points="111.94,-126.59 112.35,-116 105.43,-124.02 111.94,-126.59"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="66.25" y="-51.2" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M66.25,-100.71C66.25,-94.49 66.25,-84.4 66.25,-75.64"/>
<polygon fill="black" stroke="black" points="69.75,-75.85 66.25,-65.85 62.75,-75.85 69.75,-75.85"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="182.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M198.92,-150.96C196.41,-144.59 192.31,-134.18 188.81,-125.28"/>
<polygon fill="black" stroke="black" points="192.07,-124.02 185.15,-116 185.56,-126.59 192.07,-124.02"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="263.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>7&#45;&gt;11</title>
<path fill="none" stroke="black" d="M209.1,-150.76C218.56,-143.4 234.71,-130.84 246.92,-121.34"/>
<polygon fill="black" stroke="black" points="248.72,-124.37 254.46,-115.46 244.42,-118.84 248.72,-124.37"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="182.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M182.25,-100.71C182.25,-94.49 182.25,-84.4 182.25,-75.64"/>
<polygon fill="black" stroke="black" points="185.75,-75.85 182.25,-65.85 178.75,-75.85 185.75,-75.85"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="182.25" y="-0.95" font-family="Times,serif" font-size="14.00">T (84)</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M182.25,-50.46C182.25,-44.24 182.25,-34.15 182.25,-25.39"/>
<polygon fill="black" stroke="black" points="185.75,-25.6 182.25,-15.6 178.75,-25.6 185.75,-25.6"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="263.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 11&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>11&#45;&gt;12</title>
<path fill="none" stroke="black" d="M263.25,-100.71C263.25,-94.49 263.25,-84.4 263.25,-75.64"/>
<polygon fill="black" stroke="black" points="266.75,-75.85 263.25,-65.85 259.75,-75.85 266.75,-75.85"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="263.25" y="-0.95" font-family="Times,serif" font-size="14.00">ext</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M263.25,-50.46C263.25,-44.24 263.25,-34.15 263.25,-25.39"/>
<polygon fill="black" stroke="black" points="266.75,-25.6 263.25,-15.6 259.75,-25.6 266.75,-25.6"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="319.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 14&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>14&#45;&gt;15</title>
<path fill="none" stroke="black" d="M335.92,-150.96C333.41,-144.59 329.31,-134.18 325.81,-125.28"/>
<polygon fill="black" stroke="black" points="329.07,-124.02 322.15,-116 322.56,-126.59 329.07,-124.02"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="357.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 14&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>14&#45;&gt;16</title>
<path fill="none" stroke="black" d="M340.58,-150.96C343.09,-144.59 347.19,-134.18 350.69,-125.28"/>
<polygon fill="black" stroke="black" points="353.94,-126.59 354.35,-116 347.43,-124.02 353.94,-126.59"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="406.25" y="-101.45" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 14&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>14&#45;&gt;18</title>
<path fill="none" stroke="black" d="M346.86,-150.76C357.34,-143.33 375.3,-130.59 388.73,-121.06"/>
<polygon fill="black" stroke="black" points="390.56,-124.05 396.69,-115.41 386.51,-118.34 390.56,-124.05"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="357.25" y="-51.2" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M357.25,-100.71C357.25,-94.49 357.25,-84.4 357.25,-75.64"/>
<polygon fill="black" stroke="black" points="360.75,-75.85 357.25,-65.85 353.75,-75.85 360.75,-75.85"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="432pt" height="274pt"
 viewBox="0.00 0.00 431.50 273.50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 269.5)">
<polygon fill="white" stroke="none" points="-4,4 -4,-269.5 427.5,-269.5 427.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="201.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="201.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M201.25,-251.46C201.25,-245.24 201.25,-235.15 201.25,-226.39"/>
<polygon fill="black" stroke="black" points="204.75,-226.6 201.25,-216.6 197.75,-226.6 204.75,-226.6"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="96.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M187.95,-201.01C170.83,-193.15 140.79,-179.34 119.77,-169.68"/>
<polygon fill="black" stroke="black" points="121.36,-166.56 110.82,-165.57 118.44,-172.92 121.36,-166.56"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="201.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M201.25,-201.21C201.25,-194.99 201.25,-184.9 201.25,-176.14"/>
<polygon fill="black" stroke="black" points="204.75,-176.35 201.25,-166.35 197.75,-176.35 204.75,-176.35"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="338.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>1&#45;&gt;14</title>
<path fill="none" stroke="black" d="M218.6,-201.01C241.76,-192.86 283.05,-178.32 310.54,-168.63"/>
<polygon fill="black" stroke="black" points="311.34,-172.06 319.61,-165.44 309.02,-165.46 311.34,-172.06"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M86.24,-150.76C73.9,-143.22 52.62,-130.23 36.95,-120.66"/>
<polygon fill="black" stroke="black" points="38.82,-117.7 28.47,-115.48 35.18,-123.67 38.82,-117.7"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M92.57,-150.96C88.43,-144.3 81.55,-133.23 75.85,-124.07"/>
<polygon fill="black" stroke="black" points="79.01,-122.52 70.76,-115.88 73.07,-126.22 79.01,-122.52"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-101.45" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M98.58,-150.96C101.09,-144.59 105.19,-134.18 108.69,-125.28"/>
<polygon fill="black" stroke="black" points="111.94,-126.59 112.35,-116 105.43,-124.02 111.94,-126.59"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="66.25" y="-51.2" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M66.25,-100.71C66.25,-94.49 66.25,-84.4 66.25,-75.64"/>
<polygon fill="black" stroke="black" points="69.75,-75.85 66.25,-65.85 62.75,-75.85 69.75,-75.85"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="182.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M198.92,-150.96C196.41,-144.59 192.31,-134.18 188.81,-125.28"/>
<polygon fill="black" stroke="black" points="192.07,-124.02 185.15,-116 185.56,-126.59 192.07,-124.02"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="263.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>7&#45;&gt;11</title>
<path fill="none" stroke="black" d="M209.1,-150.76C218.56,-143.4 234.71,-130.84 246.92,-121.34"/>
<polygon fill="black" stroke="black" points="248.72,-124.37 254.46,-115.46 244.42,-118.84 248.72,-124.37"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="182.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M182.25,-100.71C182.25,-94.49 182.25,-84.4 182.25,-75.64"/>
<polygon fill="black" stroke="black" points="185.75,-75.85 182.25,-65.85 178.75,-75.85 185.75,-75.85"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="182.25" y="-0.95" font-family="Times,serif" font-size="14.00">Te</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M182.25,-50.46C182.25,-44.24 182.25,-34.15 182.25,-25.39"/>
<polygon fill="black" stroke="black" points="185.75,-25.6 182.25,-15.6 178.75,-25.6 185.75,-25.6"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="263.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 11&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>11&#45;&gt;12</title>
<path fill="none" stroke="black" d="M263.25,-100.71C263.25,-94.49 263.25,-84.4 263.25,-75.64"/>
<polygon fill="black" stroke="black" points="266.75,-75.85 263.25,-65.85 259.75,-75.85 266.75,-75.85"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="263.25" y="-0.95" font-family="Times,serif" font-size="14.00">xt</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M263.25,-50.46C263.25,-44.24 263.25,-34.15 263.25,-25.39"/>
<polygon fill="black" stroke="black" points="266.75,-25.6 263.25,-15.6 259.75,-25.6 266.75,-25.6"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="319.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 14&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>14&#45;&gt;15</title>
<path fill="none" stroke="black" d="M335.92,-150.96C333.41,-144.59 329.31,-134.18 325.81,-125.28"/>
<polygon fill="black" stroke="black" points="329.07,-124.02 322.15,-116 322.56,-126.59 329.07,-124.02"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="357.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 14&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>14&#45;&gt;16</title>
<path fill="none" stroke="black" d="M340.58,-150.96C343.09,-144.59 347.19,-134.18 350.69,-125.28"/>
<polygon fill="black" stroke="black" points="353.94,-126.59 354.35,-116 347.43,-124.02 353.94,-126.59"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="406.25" y="-101.45" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 14&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>14&#45;&gt;18</title>
<path fill="none" stroke="black" d="M346.86,-150.76C357.34,-143.33 375.3,-130.59 388.73,-121.06"/>
<polygon fill="black" stroke="black" points="390.56,-124.05 396.69,-115.41 386.51,-118.34 390.56,-124.05"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="357.25" y="-51.2" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M357.25,-100.71C357.25,-94.49 357.25,-84.4 357.25,-75.64"/>
<polygon fill="black" stroke="black" points="360.75,-75.85 357.25,-65.85 353.75,-75.85 360.75,-75.85"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="439pt" height="324pt"
 viewBox="0.00 0.00 438.50 323.75" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 319.75)">
<polygon fill="white" stroke="none" points="-4,4 -4,-319.75 434.5,-319.75 434.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="206.25" y="-302.45" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="206.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M206.25,-301.71C206.25,-295.49 206.25,-285.4 206.25,-276.64"/>
<polygon fill="black" stroke="black" points="209.75,-276.85 206.25,-266.85 202.75,-276.85 209.75,-276.85"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="97.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M192.45,-251.26C174.59,-243.36 143.2,-229.46 121.37,-219.8"/>
<polygon fill="black" stroke="black" points="122.89,-216.65 112.33,-215.8 120.05,-223.05 122.89,-216.65"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="206.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M206.25,-251.46C206.25,-245.24 206.25,-235.15 206.25,-226.39"/>
<polygon fill="black" stroke="black" points="209.75,-226.6 206.25,-216.6 202.75,-226.6 209.75,-226.6"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="345.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>1&#45;&gt;18</title>
<path fill="none" stroke="black" d="M223.85,-251.26C247.35,-243.11 289.24,-228.57 317.14,-218.88"/>
<polygon fill="black" stroke="black" points="318.06,-222.27 326.36,-215.68 315.76,-215.66 318.06,-222.27"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M87.12,-201.01C74.49,-193.4 52.65,-180.23 36.74,-170.63"/>
<polygon fill="black" stroke="black" points="38.97,-167.89 28.6,-165.72 35.35,-173.88 38.97,-167.89"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M93.45,-201.21C89.17,-194.55 82.06,-183.48 76.17,-174.32"/>
<polygon fill="black" stroke="black" points="79.25,-172.63 70.9,-166.11 73.36,-176.42 79.25,-172.63"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M99.46,-201.21C101.83,-194.84 105.72,-184.43 109.04,-175.53"/>
<polygon fill="black" stroke="black" points="112.28,-176.85 112.5,-166.26 105.72,-174.4 112.28,-176.85"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="63.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M65.88,-150.96C65.5,-144.74 64.87,-134.65 64.32,-125.89"/>
<polygon fill="black" stroke="black" points="67.83,-125.86 63.71,-116.1 60.84,-126.3 67.83,-125.86"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="189.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M204.17,-201.21C201.92,-194.84 198.25,-184.43 195.12,-175.53"/>
<polygon fill="black" stroke="black" points="198.48,-174.54 191.85,-166.27 191.88,-176.86 198.48,-174.54"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="270.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>7&#45;&gt;15</title>
<path fill="none" stroke="black" d="M214.36,-201.01C224.12,-193.65 240.79,-181.09 253.39,-171.59"/>
<polygon fill="black" stroke="black" points="255.32,-174.51 261.2,-165.7 251.11,-168.92 255.32,-174.51"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="125.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M181.14,-150.76C171.38,-143.4 154.71,-130.84 142.11,-121.34"/>
<polygon fill="black" stroke="black" points="144.39,-118.67 134.3,-115.45 140.18,-124.26 144.39,-118.67"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="206.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 8&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>8&#45;&gt;12</title>
<path fill="none" stroke="black" d="M191.33,-150.96C193.58,-144.59 197.25,-134.18 200.38,-125.28"/>
<polygon fill="black" stroke="black" points="203.62,-126.61 203.65,-116.02 197.02,-124.29 203.62,-126.61"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="125.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M125.25,-100.71C125.25,-94.49 125.25,-84.4 125.25,-75.64"/>
<polygon fill="black" stroke="black" points="128.75,-75.85 125.25,-65.85 121.75,-75.85 128.75,-75.85"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="125.25" y="-0.95" font-family="Times,serif" font-size="14.00">T (84)</text>
</g>
<!-- 10&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>10&#45;&gt;11</title>
<path fill="none" stroke="black" d="M125.25,-50.46C125.25,-44.24 125.25,-34.15 125.25,-25.39"/>
<polygon fill="black" stroke="black" points="128.75,-25.6 125.25,-15.6 121.75,-25.6 128.75,-25.6"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="206.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M206.25,-100.71C206.25,-94.49 206.25,-84.4 206.25,-75.64"/>
<polygon fill="black" stroke="black" points="209.75,-75.85 206.25,-65.85 202.75,-75.85 209.75,-75.85"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="206.25" y="-0.95" font-family="Times,serif" font-size="14.00">e (101)</text>
</g>
<!-- 13&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>13&#45;&gt;14</title>
<path fill="none" stroke="black" d="M206.25,-50.46C206.25,-44.24 206.25,-34.15 206.25,-25.39"/>
<polygon fill="black" stroke="black" points="209.75,-25.6 206.25,-15.6 202.75,-25.6 209.75,-25.6"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="274.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 15&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>15&#45;&gt;16</title>
<path fill="none" stroke="black" d="M270.74,-150.96C271.26,-144.74 272.09,-134.65 272.82,-125.89"/>
<polygon fill="black" stroke="black" points="276.29,-126.35 273.63,-116.1 269.32,-125.77 276.29,-126.35"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="274.25" y="-51.2" font-family="Times,serif" font-size="14.00">xt</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M274.25,-100.71C274.25,-94.49 274.25,-84.4 274.25,-75.64"/>
<polygon fill="black" stroke="black" points="277.75,-75.85 274.25,-65.85 270.75,-75.85 277.75,-75.85"/>
</g>
<!-- 19 -->
<g id="node20" class="node">
<title>19</title>
<text text-anchor="middle" x="326.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 18&#45;&gt;19 -->
<g id="edge19" class="edge">
<title>18&#45;&gt;19</title>
<path fill="none" stroke="black" d="M342.92,-201.21C340.41,-194.84 336.31,-184.43 332.81,-175.53"/>
<polygon fill="black" stroke="black" points="336.07,-174.27 329.15,-166.25 329.56,-176.84 336.07,-174.27"/>
</g>
<!-- 20 -->
<g id="node21" class="node">
<title>20</title>
<text text-anchor="middle" x="364.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 18&#45;&gt;20 -->
<g id="edge20" class="edge">
<title>18&#45;&gt;20</title>
<path fill="none" stroke="black" d="M347.58,-201.21C350.09,-194.84 354.19,-184.43 357.69,-175.53"/>
<polygon fill="black" stroke="black" points="360.94,-176.84 361.35,-166.25 354.43,-174.27 360.94,-176.84"/>
</g>
<!-- 22 -->
<g id="node23" class="node">
<title>22</title>
<text text-anchor="middle" x="413.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 18&#45;&gt;22 -->
<g id="edge22" class="edge">
<title>18&#45;&gt;22</title>
<path fill="none" stroke="black" d="M353.86,-201.01C364.34,-193.58 382.3,-180.84 395.73,-171.31"/>
<polygon fill="black" stroke="black" points="397.56,-174.3 403.69,-165.66 393.51,-168.59 397.56,-174.3"/>
</g>
<!-- 21 -->
<g id="node22" class="node">
<title>21</title>
<text text-anchor="middle" x="364.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 20&#45;&gt;21 -->
<g id="edge21" class="edge">
<title>20&#45;&gt;21</title>
<path fill="none" stroke="black" d="M364.25,-150.96C364.25,-144.74 364.25,-134.65 364.25,-125.89"/>
<polygon fill="black" stroke="black" points="367.75,-126.1 364.25,-116.1 360.75,-126.1 367.75,-126.1"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="432pt" height="274pt"
 viewBox="0.00 0.00 431.50 273.50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 269.5)">
<polygon fill="white" stroke="none" points="-4,4 -4,-269.5 427.5,-269.5 427.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="201.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="201.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M201.25,-251.46C201.25,-245.24 201.25,-235.15 201.25,-226.39"/>
<polygon fill="black" stroke="black" points="204.75,-226.6 201.25,-216.6 197.75,-226.6 204.75,-226.6"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="96.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M187.95,-201.01C170.83,-193.15 140.79,-179.34 119.77,-169.68"/>
<polygon fill="black" stroke="black" points="121.36,-166.56 110.82,-165.57 118.44,-172.92 121.36,-166.56"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="201.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M201.25,-201.21C201.25,-194.99 201.25,-184.9 201.25,-176.14"/>
<polygon fill="black" stroke="black" points="204.75,-176.35 201.25,-166.35 197.75,-176.35 204.75,-176.35"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="338.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>1&#45;&gt;14</title>
<path fill="none" stroke="black" d="M218.6,-201.01C241.76,-192.86 283.05,-178.32 310.54,-168.63"/>
<polygon fill="black" stroke="black" points="311.34,-172.06 319.61,-165.44 309.02,-165.46 311.34,-172.06"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M86.24,-150.76C73.9,-143.22 52.62,-130.23 36.95,-120.66"/>
<polygon fill="black" stroke="black" points="38.82,-117.7 28.47,-115.48 35.18,-123.67 38.82,-117.7"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M92.57,-150.96C88.43,-144.3 81.55,-133.23 75.85,-124.07"/>
<polygon fill="black" stroke="black" points="79.01,-122.52 70.76,-115.88 73.07,-126.22 79.01,-122.52"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-101.45" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M98.58,-150.96C101.09,-144.59 105.19,-134.18 108.69,-125.28"/>
<polygon fill="black" stroke="black" points="111.94,-126.59 112.35,-116 105.43,-124.02 111.94,-126.59"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="66.25" y="-51.2" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M66.25,-100.71C66.25,-94.49 66.25,-84.4 66.25,-75.64"/>
<polygon fill="black" stroke="black" points="69.75,-75.85 66.25,-65.85 62.75,-75.85 69.75,-75.85"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="182.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M198.92,-150.96C196.41,-144.59 192.31,-134.18 188.81,-125.28"/>
<polygon fill="black" stroke="black" points="192.07,-124.02 185.15,-116 185.56,-126.59 192.07,-124.02"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="263.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>7&#45;&gt;11</title>
<path fill="none" stroke="black" d="M209.1,-150.76C218.56,-143.4 234.71,-130.84 246.92,-121.34"/>
<polygon fill="black" stroke="black" points="248.72,-124.37 254.46,-115.46 244.42,-118.84 248.72,-124.37"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="182.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M182.25,-100.71C182.25,-94.49 182.25,-84.4 182.25,-75.64"/>
<polygon fill="black" stroke="black" points="185.75,-75.85 182.25,-65.85 178.75,-75.85 185.75,-75.85"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="182.25" y="-0.95" font-family="Times,serif" font-size="14.00">Tex</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M182.25,-50.46C182.25,-44.24 182.25,-34.15 182.25,-25.39"/>
<polygon fill="black" stroke="black" points="185.75,-25.6 182.25,-15.6 178.75,-25.6 185.75,-25.6"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="263.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 11&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>11&#45;&gt;12</title>
<path fill="none" stroke="black" d="M263.25,-100.71C263.25,-94.49 263.25,-84.4 263.25,-75.64"/>
<polygon fill="black" stroke="black" points="266.75,-75.85 263.25,-65.85 259.75,-75.85 266.75,-75.85"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="263.25" y="-0.95" font-family="Times,serif" font-size="14.00">t (116)</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M263.25,-50.46C263.25,-44.24 263.25,-34.15 263.25,-25.39"/>
<polygon fill="black" stroke="black" points="266.75,-25.6 263.25,-15.6 259.75,-25.6 266.75,-25.6"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="319.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 14&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>14&#45;&gt;15</title>
<path fill="none" stroke="black" d="M335.92,-150.96C333.41,-144.59 329.31,-134.18 325.81,-125.28"/>
<polygon fill="black" stroke="black" points="329.07,-124.02 322.15,-116 322.56,-126.59 329.07,-124.02"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="357.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 14&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>14&#45;&gt;16</title>
<path fill="none" stroke="black" d="M340.58,-150.96C343.09,-144.59 347.19,-134.18 350.69,-125.28"/>
<polygon fill="black" stroke="black" points="353.94,-126.59 354.35,-116 347.43,-124.02 353.94,-126.59"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="406.25" y="-101.45" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 14&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>14&#45;&gt;18</title>
<path fill="none" stroke="black" d="M346.86,-150.76C357.34,-143.33 375.3,-130.59 388.73,-121.06"/>
<polygon fill="black" stroke="black" points="390.56,-124.05 396.69,-115.41 386.51,-118.34 390.56,-124.05"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="357.25" y="-51.2" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M357.25,-100.71C357.25,-94.49 357.25,-84.4 357.25,-75.64"/>
<polygon fill="black" stroke="black" points="360.75,-75.85 357.25,-65.85 353.75,-75.85 360.75,-75.85"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="439pt" height="324pt"
 viewBox="0.00 0.00 438.50 323.75" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 319.75)">
<polygon fill="white" stroke="none" points="-4,4 -4,-319.75 434.5,-319.75 434.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="206.25" y="-302.45" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="206.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M206.25,-301.71C206.25,-295.49 206.25,-285.4 206.25,-276.64"/>
<polygon fill="black" stroke="black" points="209.75,-276.85 206.25,-266.85 202.75,-276.85 209.75,-276.85"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="97.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M192.45,-251.26C174.59,-243.36 143.2,-229.46 121.37,-219.8"/>
<polygon fill="black" stroke="black" points="122.89,-216.65 112.33,-215.8 120.05,-223.05 122.89,-216.65"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="206.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M206.25,-251.46C206.25,-245.24 206.25,-235.15 206.25,-226.39"/>
<polygon fill="black" stroke="black" points="209.75,-226.6 206.25,-216.6 202.75,-226.6 209.75,-226.6"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="345.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>1&#45;&gt;18</title>
<path fill="none" stroke="black" d="M223.85,-251.26C247.35,-243.11 289.24,-228.57 317.14,-218.88"/>
<polygon fill="black" stroke="black" points="318.06,-222.27 326.36,-215.68 315.76,-215.66 318.06,-222.27"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M87.12,-201.01C74.49,-193.4 52.65,-180.23 36.74,-170.63"/>
<polygon fill="black" stroke="black" points="38.97,-167.89 28.6,-165.72 35.35,-173.88 38.97,-167.89"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M93.45,-201.21C89.17,-194.55 82.06,-183.48 76.17,-174.32"/>
<polygon fill="black" stroke="black" points="79.25,-172.63 70.9,-166.11 73.36,-176.42 79.25,-172.63"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M99.46,-201.21C101.83,-194.84 105.72,-184.43 109.04,-175.53"/>
<polygon fill="black" stroke="black" points="112.28,-176.85 112.5,-166.26 105.72,-174.4 112.28,-176.85"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="63.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M65.88,-150.96C65.5,-144.74 64.87,-134.65 64.32,-125.89"/>
<polygon fill="black" stroke="black" points="67.83,-125.86 63.71,-116.1 60.84,-126.3 67.83,-125.86"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="189.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M204.17,-201.21C201.92,-194.84 198.25,-184.43 195.12,-175.53"/>
<polygon fill="black" stroke="black" points="198.48,-174.54 191.85,-166.27 191.88,-176.86 198.48,-174.54"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="270.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>7&#45;&gt;15</title>
<path fill="none" stroke="black" d="M214.36,-201.01C224.12,-193.65 240.79,-181.09 253.39,-171.59"/>
<polygon fill="black" stroke="black" points="255.32,-174.51 261.2,-165.7 251.11,-168.92 255.32,-174.51"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="125.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M181.14,-150.76C171.38,-143.4 154.71,-130.84 142.11,-121.34"/>
<polygon fill="black" stroke="black" points="144.39,-118.67 134.3,-115.45 140.18,-124.26 144.39,-118.67"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="206.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 8&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>8&#45;&gt;12</title>
<path fill="none" stroke="black" d="M191.33,-150.96C193.58,-144.59 197.25,-134.18 200.38,-125.28"/>
<polygon fill="black" stroke="black" points="203.62,-126.61 203.65,-116.02 197.02,-124.29 203.62,-126.61"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="125.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M125.25,-100.71C125.25,-94.49 125.25,-84.4 125.25,-75.64"/>
<polygon fill="black" stroke="black" points="128.75,-75.85 125.25,-65.85 121.75,-75.85 128.75,-75.85"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="125.25" y="-0.95" font-family="Times,serif" font-size="14.00">T (84)</text>
</g>
<!-- 10&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>10&#45;&gt;11</title>
<path fill="none" stroke="black" d="M125.25,-50.46C125.25,-44.24 125.25,-34.15 125.25,-25.39"/>
<polygon fill="black" stroke="black" points="128.75,-25.6 125.25,-15.6 121.75,-25.6 128.75,-25.6"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="206.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M206.25,-100.71C206.25,-94.49 206.25,-84.4 206.25,-75.64"/>
<polygon fill="black" stroke="black" points="209.75,-75.85 206.25,-65.85 202.75,-75.85 209.75,-75.85"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="206.25" y="-0.95" font-family="Times,serif" font-size="14.00">ex</text>
</g>
<!-- 13&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>13&#45;&gt;14</title>
<path fill="none" stroke="black" d="M206.25,-50.46C206.25,-44.24 206.25,-34.15 206.25,-25.39"/>
<polygon fill="black" stroke="black" points="209.75,-25.6 206.25,-15.6 202.75,-25.6 209.75,-25.6"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="274.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 15&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>15&#45;&gt;16</title>
<path fill="none" stroke="black" d="M270.74,-150.96C271.26,-144.74 272.09,-134.65 272.82,-125.89"/>
<polygon fill="black" stroke="black" points="276.29,-126.35 273.63,-116.1 269.32,-125.77 276.29,-126.35"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="274.25" y="-51.2" font-family="Times,serif" font-size="14.00">t (116)</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M274.25,-100.71C274.25,-94.49 274.25,-84.4 274.25,-75.64"/>
<polygon fill="black" stroke="black" points="277.75,-75.85 274.25,-65.85 270.75,-75.85 277.75,-75.85"/>
</g>
<!-- 19 -->
<g id="node20" class="node">
<title>19</title>
<text text-anchor="middle" x="326.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 18&#45;&gt;19 -->
<g id="edge19" class="edge">
<title>18&#45;&gt;19</title>
<path fill="none" stroke="black" d="M342.92,-201.21C340.41,-194.84 336.31,-184.43 332.81,-175.53"/>
<polygon fill="black" stroke="black" points="336.07,-174.27 329.15,-166.25 329.56,-176.84 336.07,-174.27"/>
</g>
<!-- 20 -->
<g id="node21" class="node">
<title>20</title>
<text text-anchor="middle" x="364.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 18&#45;&gt;20 -->
<g id="edge20" class="edge">
<title>18&#45;&gt;20</title>
<path fill="none" stroke="black" d="M347.58,-201.21C350.09,-194.84 354.19,-184.43 357.69,-175.53"/>
<polygon fill="black" stroke="black" points="360.94,-176.84 361.35,-166.25 354.43,-174.27 360.94,-176.84"/>
</g>
<!-- 22 -->
<g id="node23" class="node">
<title>22</title>
<text text-anchor="middle" x="413.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 18&#45;&gt;22 -->
<g id="edge22" class="edge">
<title>18&#45;&gt;22</title>
<path fill="none" stroke="black" d="M353.86,-201.01C364.34,-193.58 382.3,-180.84 395.73,-171.31"/>
<polygon fill="black" stroke="black" points="397.56,-174.3 403.69,-165.66 393.51,-168.59 397.56,-174.3"/>
</g>
<!-- 21 -->
<g id="node22" class="node">
<title>21</title>
<text text-anchor="middle" x="364.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 20&#45;&gt;21 -->
<g id="edge21" class="edge">
<title>20&#45;&gt;21</title>
<path fill="none" stroke="black" d="M364.25,-150.96C364.25,-144.74 364.25,-134.65 364.25,-125.89"/>
<polygon fill="black" stroke="black" points="367.75,-126.1 364.25,-116.1 360.75,-126.1 367.75,-126.1"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="439pt" height="324pt"
 viewBox="0.00 0.00 438.50 323.75" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 319.75)">
<polygon fill="white" stroke="none" points="-4,4 -4,-319.75 434.5,-319.75 434.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="206.25" y="-302.45" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="206.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M206.25,-301.71C206.25,-295.49 206.25,-285.4 206.25,-276.64"/>
<polygon fill="black" stroke="black" points="209.75,-276.85 206.25,-266.85 202.75,-276.85 209.75,-276.85"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="97.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M192.45,-251.26C174.59,-243.36 143.2,-229.46 121.37,-219.8"/>
<polygon fill="black" stroke="black" points="122.89,-216.65 112.33,-215.8 120.05,-223.05 122.89,-216.65"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="206.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M206.25,-251.46C206.25,-245.24 206.25,-235.15 206.25,-226.39"/>
<polygon fill="black" stroke="black" points="209.75,-226.6 206.25,-216.6 202.75,-226.6 209.75,-226.6"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="345.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>1&#45;&gt;18</title>
<path fill="none" stroke="black" d="M223.85,-251.26C247.35,-243.11 289.24,-228.57 317.14,-218.88"/>
<polygon fill="black" stroke="black" points="318.06,-222.27 326.36,-215.68 315.76,-215.66 318.06,-222.27"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M87.12,-201.01C74.49,-193.4 52.65,-180.23 36.74,-170.63"/>
<polygon fill="black" stroke="black" points="38.97,-167.89 28.6,-165.72 35.35,-173.88 38.97,-167.89"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M93.45,-201.21C89.17,-194.55 82.06,-183.48 76.17,-174.32"/>
<polygon fill="black" stroke="black" points="79.25,-172.63 70.9,-166.11 73.36,-176.42 79.25,-172.63"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M99.46,-201.21C101.83,-194.84 105.72,-184.43 109.04,-175.53"/>
<polygon fill="black" stroke="black" points="112.28,-176.85 112.5,-166.26 105.72,-174.4 112.28,-176.85"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="63.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M65.88,-150.96C65.5,-144.74 64.87,-134.65 64.32,-125.89"/>
<polygon fill="black" stroke="black" points="67.83,-125.86 63.71,-116.1 60.84,-126.3 67.83,-125.86"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="189.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M204.17,-201.21C201.92,-194.84 198.25,-184.43 195.12,-175.53"/>
<polygon fill="black" stroke="black" points="198.48,-174.54 191.85,-166.27 191.88,-176.86 198.48,-174.54"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="270.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>7&#45;&gt;15</title>
<path fill="none" stroke="black" d="M214.36,-201.01C224.12,-193.65 240.79,-181.09 253.39,-171.59"/>
<polygon fill="black" stroke="black" points="255.32,-174.51 261.2,-165.7 251.11,-168.92 255.32,-174.51"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="125.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M181.14,-150.76C171.38,-143.4 154.71,-130.84 142.11,-121.34"/>
<polygon fill="black" stroke="black" points="144.39,-118.67 134.3,-115.45 140.18,-124.26 144.39,-118.67"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="206.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 8&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>8&#45;&gt;12</title>
<path fill="none" stroke="black" d="M191.33,-150.96C193.58,-144.59 197.25,-134.18 200.38,-125.28"/>
<polygon fill="black" stroke="black" points="203.62,-126.61 203.65,-116.02 197.02,-124.29 203.62,-126.61"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="125.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M125.25,-100.71C125.25,-94.49 125.25,-84.4 125.25,-75.64"/>
<polygon fill="black" stroke="black" points="128.75,-75.85 125.25,-65.85 121.75,-75.85 128.75,-75.85"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="125.25" y="-0.95" font-family="Times,serif" font-size="14.00">Te</text>
</g>
<!-- 10&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>10&#45;&gt;11</title>
<path fill="none" stroke="black" d="M125.25,-50.46C125.25,-44.24 125.25,-34.15 125.25,-25.39"/>
<polygon fill="black" stroke="black" points="128.75,-25.6 125.25,-15.6 121.75,-25.6 128.75,-25.6"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="206.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M206.25,-100.71C206.25,-94.49 206.25,-84.4 206.25,-75.64"/>
<polygon fill="black" stroke="black" points="209.75,-75.85 206.25,-65.85 202.75,-75.85 209.75,-75.85"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="206.25" y="-0.95" font-family="Times,serif" font-size="14.00">x (120)</text>
</g>
<!-- 13&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>13&#45;&gt;14</title>
<path fill="none" stroke="black" d="M206.25,-50.46C206.25,-44.24 206.25,-34.15 206.25,-25.39"/>
<polygon fill="black" stroke="black" points="209.75,-25.6 206.25,-15.6 202.75,-25.6 209.75,-25.6"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="274.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 15&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>15&#45;&gt;16</title>
<path fill="none" stroke="black" d="M270.74,-150.96C271.26,-144.74 272.09,-134.65 272.82,-125.89"/>
<polygon fill="black" stroke="black" points="276.29,-126.35 273.63,-116.1 269.32,-125.77 276.29,-126.35"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="274.25" y="-51.2" font-family="Times,serif" font-size="14.00">t (116)</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M274.25,-100.71C274.25,-94.49 274.25,-84.4 274.25,-75.64"/>
<polygon fill="black" stroke="black" points="277.75,-75.85 274.25,-65.85 270.75,-75.85 277.75,-75.85"/>
</g>
<!-- 19 -->
<g id="node20" class="node">
<title>19</title>
<text text-anchor="middle" x="326.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 18&#45;&gt;19 -->
<g id="edge19" class="edge">
<title>18&#45;&gt;19</title>
<path fill="none" stroke="black" d="M342.92,-201.21C340.41,-194.84 336.31,-184.43 332.81,-175.53"/>
<polygon fill="black" stroke="black" points="336.07,-174.27 329.15,-166.25 329.56,-176.84 336.07,-174.27"/>
</g>
<!-- 20 -->
<g id="node21" class="node">
<title>20</title>
<text text-anchor="middle" x="364.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 18&#45;&gt;20 -->
<g id="edge20" class="edge">
<title>18&#45;&gt;20</title>
<path fill="none" stroke="black" d="M347.58,-201.21C350.09,-194.84 354.19,-184.43 357.69,-175.53"/>
<polygon fill="black" stroke="black" points="360.94,-176.84 361.35,-166.25 354.43,-174.27 360.94,-176.84"/>
</g>
<!-- 22 -->
<g id="node23" class="node">
<title>22</title>
<text text-anchor="middle" x="413.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 18&#45;&gt;22 -->
<g id="edge22" class="edge">
<title>18&#45;&gt;22</title>
<path fill="none" stroke="black" d="M353.86,-201.01C364.34,-193.58 382.3,-180.84 395.73,-171.31"/>
<polygon fill="black" stroke="black" points="397.56,-174.3 403.69,-165.66 393.51,-168.59 397.56,-174.3"/>
</g>
<!-- 21 -->
<g id="node22" class="node">
<title>21</title>
<text text-anchor="middle" x="364.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 20&#45;&gt;21 -->
<g id="edge21" class="edge">
<title>20&#45;&gt;21</title>
<path fill="none" stroke="black" d="M364.25,-150.96C364.25,-144.74 364.25,-134.65 364.25,-125.89"/>
<polygon fill="black" stroke="black" points="367.75,-126.1 364.25,-116.1 360.75,-126.1 367.75,-126.1"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="439pt" height="374pt"
 viewBox="0.00 0.00 438.50 374.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 370)">
<polygon fill="white" stroke="none" points="-4,4 -4,-370 434.5,-370 434.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="206.25" y="-352.7" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="206.25" y="-302.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M206.25,-351.96C206.25,-345.74 206.25,-335.65 206.25,-326.89"/>
<polygon fill="black" stroke="black" points="209.75,-327.1 206.25,-317.1 202.75,-327.1 209.75,-327.1"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="97.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M192.45,-301.51C174.59,-293.61 143.2,-279.71 121.37,-270.05"/>
<polygon fill="black" stroke="black" points="122.89,-266.9 112.33,-266.05 120.05,-273.3 122.89,-266.9"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="206.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M206.25,-301.71C206.25,-295.49 206.25,-285.4 206.25,-276.64"/>
<polygon fill="black" stroke="black" points="209.75,-276.85 206.25,-266.85 202.75,-276.85 209.75,-276.85"/>
</g>
<!-- 22 -->
<g id="node23" class="node">
<title>22</title>
<text text-anchor="middle" x="345.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;22 -->
<g id="edge22" class="edge">
<title>1&#45;&gt;22</title>
<path fill="none" stroke="black" d="M223.85,-301.51C247.35,-293.36 289.24,-278.82 317.14,-269.13"/>
<polygon fill="black" stroke="black" points="318.06,-272.52 326.36,-265.93 315.76,-265.91 318.06,-272.52"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M87.12,-251.26C74.49,-243.65 52.65,-230.48 36.74,-220.88"/>
<polygon fill="black" stroke="black" points="38.97,-218.14 28.6,-215.97 35.35,-224.13 38.97,-218.14"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M93.45,-251.46C89.17,-244.8 82.06,-233.73 76.17,-224.57"/>
<polygon fill="black" stroke="black" points="79.25,-222.88 70.9,-216.36 73.36,-226.67 79.25,-222.88"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-201.95" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M99.46,-251.46C101.83,-245.09 105.72,-234.68 109.04,-225.78"/>
<polygon fill="black" stroke="black" points="112.28,-227.1 112.5,-216.51 105.72,-224.65 112.28,-227.1"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="63.25" y="-151.7" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M65.88,-201.21C65.5,-194.99 64.87,-184.9 64.32,-176.14"/>
<polygon fill="black" stroke="black" points="67.83,-176.11 63.71,-166.35 60.84,-176.55 67.83,-176.11"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="189.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M204.17,-251.46C201.92,-245.09 198.25,-234.68 195.12,-225.78"/>
<polygon fill="black" stroke="black" points="198.48,-224.79 191.85,-216.52 191.88,-227.11 198.48,-224.79"/>
</g>
<!-- 19 -->
<g id="node20" class="node">
<title>19</title>
<text text-anchor="middle" x="270.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;19 -->
<g id="edge19" class="edge">
<title>7&#45;&gt;19</title>
<path fill="none" stroke="black" d="M214.36,-251.26C224.12,-243.9 240.79,-231.34 253.39,-221.84"/>
<polygon fill="black" stroke="black" points="255.32,-224.76 261.2,-215.95 251.11,-219.17 255.32,-224.76"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="125.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M181.14,-201.01C171.38,-193.65 154.71,-181.09 142.11,-171.59"/>
<polygon fill="black" stroke="black" points="144.39,-168.92 134.3,-165.7 140.18,-174.51 144.39,-168.92"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="206.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 8&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>8&#45;&gt;16</title>
<path fill="none" stroke="black" d="M191.33,-201.21C193.58,-194.84 197.25,-184.43 200.38,-175.53"/>
<polygon fill="black" stroke="black" points="203.62,-176.86 203.65,-166.27 197.02,-174.54 203.62,-176.86"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="51.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M115.88,-150.76C104.36,-143.25 84.55,-130.34 69.89,-120.78"/>
<polygon fill="black" stroke="black" points="71.87,-117.89 61.58,-115.36 68.05,-123.76 71.87,-117.89"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="132.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 9&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>9&#45;&gt;13</title>
<path fill="none" stroke="black" d="M126.11,-150.96C127.01,-144.74 128.47,-134.65 129.75,-125.89"/>
<polygon fill="black" stroke="black" points="133.2,-126.49 131.17,-116.09 126.27,-125.48 133.2,-126.49"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="51.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 10&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>10&#45;&gt;11</title>
<path fill="none" stroke="black" d="M51.25,-100.71C51.25,-94.49 51.25,-84.4 51.25,-75.64"/>
<polygon fill="black" stroke="black" points="54.75,-75.85 51.25,-65.85 47.75,-75.85 54.75,-75.85"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="51.25" y="-0.95" font-family="Times,serif" font-size="14.00">T (84)</text>
</g>
<!-- 11&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>11&#45;&gt;12</title>
<path fill="none" stroke="black" d="M51.25,-50.46C51.25,-44.24 51.25,-34.15 51.25,-25.39"/>
<polygon fill="black" stroke="black" points="54.75,-25.6 51.25,-15.6 47.75,-25.6 54.75,-25.6"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="132.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 13&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>13&#45;&gt;14</title>
<path fill="none" stroke="black" d="M132.25,-100.71C132.25,-94.49 132.25,-84.4 132.25,-75.64"/>
<polygon fill="black" stroke="black" points="135.75,-75.85 132.25,-65.85 128.75,-75.85 135.75,-75.85"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="132.25" y="-0.95" font-family="Times,serif" font-size="14.00">e (101)</text>
</g>
<!-- 14&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>14&#45;&gt;15</title>
<path fill="none" stroke="black" d="M132.25,-50.46C132.25,-44.24 132.25,-34.15 132.25,-25.39"/>
<polygon fill="black" stroke="black" points="135.75,-25.6 132.25,-15.6 128.75,-25.6 135.75,-25.6"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="206.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M206.25,-150.96C206.25,-144.74 206.25,-134.65 206.25,-125.89"/>
<polygon fill="black" stroke="black" points="209.75,-126.1 206.25,-116.1 202.75,-126.1 209.75,-126.1"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="206.25" y="-51.2" font-family="Times,serif" font-size="14.00">x (120)</text>
</g>
<!-- 17&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>17&#45;&gt;18</title>
<path fill="none" stroke="black" d="M206.25,-100.71C206.25,-94.49 206.25,-84.4 206.25,-75.64"/>
<polygon fill="black" stroke="black" points="209.75,-75.85 206.25,-65.85 202.75,-75.85 209.75,-75.85"/>
</g>
<!-- 20 -->
<g id="node21" class="node">
<title>20</title>
<text text-anchor="middle" x="274.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 19&#45;&gt;20 -->
<g id="edge20" class="edge">
<title>19&#45;&gt;20</title>
<path fill="none" stroke="black" d="M270.74,-201.21C271.26,-194.99 272.09,-184.9 272.82,-176.14"/>
<polygon fill="black" stroke="black" points="276.29,-176.6 273.63,-166.35 269.32,-176.02 276.29,-176.6"/>
</g>
<!-- 21 -->
<g id="node22" class="node">
<title>21</title>
<text text-anchor="middle" x="274.25" y="-101.45" font-family="Times,serif" font-size="14.00">t (116)</text>
</g>
<!-- 20&#45;&gt;21 -->
<g id="edge21" class="edge">
<title>20&#45;&gt;21</title>
<path fill="none" stroke="black" d="M274.25,-150.96C274.25,-144.74 274.25,-134.65 274.25,-125.89"/>
<polygon fill="black" stroke="black" points="277.75,-126.1 274.25,-116.1 270.75,-126.1 277.75,-126.1"/>
</g>
<!-- 23 -->
<g id="node24" class="node">
<title>23</title>
<text text-anchor="middle" x="326.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 22&#45;&gt;23 -->
<g id="edge23" class="edge">
<title>22&#45;&gt;23</title>
<path fill="none" stroke="black" d="M342.92,-251.46C340.41,-245.09 336.31,-234.68 332.81,-225.78"/>
<polygon fill="black" stroke="black" points="336.07,-224.52 329.15,-216.5 329.56,-227.09 336.07,-224.52"/>
</g>
<!-- 24 -->
<g id="node25" class="node">
<title>24</title>
<text text-anchor="middle" x="364.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 22&#45;&gt;24 -->
<g id="edge24" class="edge">
<title>22&#45;&gt;24</title>
<path fill="none" stroke="black" d="M347.58,-251.46C350.09,-245.09 354.19,-234.68 357.69,-225.78"/>
<polygon fill="black" stroke="black" points="360.94,-227.09 361.35,-216.5 354.43,-224.52 360.94,-227.09"/>
</g>
<!-- 26 -->
<g id="node27" class="node">
<title>26</title>
<text text-anchor="middle" x="413.25" y="-201.95" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 22&#45;&gt;26 -->
<g id="edge26" class="edge">
<title>22&#45;&gt;26</title>
<path fill="none" stroke="black" d="M353.86,-251.26C364.34,-243.83 382.3,-231.09 395.73,-221.56"/>
<polygon fill="black" stroke="black" points="397.56,-224.55 403.69,-215.91 393.51,-218.84 397.56,-224.55"/>
</g>
<!-- 25 -->
<g id="node26" class="node">
<title>25</title>
<text text-anchor="middle" x="364.25" y="-151.7" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 24&#45;&gt;25 -->
<g id="edge25" class="edge">
<title>24&#45;&gt;25</title>
<path fill="none" stroke="black" d="M364.25,-201.21C364.25,-194.99 364.25,-184.9 364.25,-176.14"/>
<polygon fill="black" stroke="black" points="367.75,-176.35 364.25,-166.35 360.75,-176.35 367.75,-176.35"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="445pt" height="374pt"
 viewBox="0.00 0.00 444.50 374.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 370)">
<polygon fill="white" stroke="none" points="-4,4 -4,-370 440.5,-370 440.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="211.25" y="-352.7" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="211.25" y="-302.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M211.25,-351.96C211.25,-345.74 211.25,-335.65 211.25,-326.89"/>
<polygon fill="black" stroke="black" points="214.75,-327.1 211.25,-317.1 207.75,-327.1 214.75,-327.1"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="99.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M197.07,-301.51C178.64,-293.57 146.17,-279.59 123.72,-269.92"/>
<polygon fill="black" stroke="black" points="125.28,-266.78 114.71,-266.04 122.51,-273.21 125.28,-266.78"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="211.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M211.25,-301.71C211.25,-295.49 211.25,-285.4 211.25,-276.64"/>
<polygon fill="black" stroke="black" points="214.75,-276.85 211.25,-266.85 207.75,-276.85 214.75,-276.85"/>
</g>
<!-- 22 -->
<g id="node23" class="node">
<title>22</title>
<text text-anchor="middle" x="351.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;22 -->
<g id="edge22" class="edge">
<title>1&#45;&gt;22</title>
<path fill="none" stroke="black" d="M228.98,-301.51C252.65,-293.36 294.84,-278.82 322.94,-269.13"/>
<polygon fill="black" stroke="black" points="323.92,-272.5 332.23,-265.93 321.64,-265.88 323.92,-272.5"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M88.86,-251.26C75.93,-243.65 53.54,-230.48 37.23,-220.88"/>
<polygon fill="black" stroke="black" points="39.25,-218.01 28.86,-215.95 35.7,-224.04 39.25,-218.01"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M95.2,-251.46C90.65,-244.8 83.08,-233.73 76.81,-224.57"/>
<polygon fill="black" stroke="black" points="79.72,-222.62 71.18,-216.34 73.94,-226.57 79.72,-222.62"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-201.95" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M101.21,-251.46C103.32,-245.09 106.78,-234.68 109.73,-225.78"/>
<polygon fill="black" stroke="black" points="112.97,-227.12 112.8,-216.53 106.33,-224.92 112.97,-227.12"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="59.25" y="-151.7" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M65.39,-201.21C64.49,-194.99 63.03,-184.9 61.75,-176.14"/>
<polygon fill="black" stroke="black" points="65.23,-175.73 60.33,-166.34 58.3,-176.74 65.23,-175.73"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="195.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M209.29,-251.46C207.18,-245.09 203.72,-234.68 200.77,-225.78"/>
<polygon fill="black" stroke="black" points="204.17,-224.92 197.7,-216.53 197.53,-227.12 204.17,-224.92"/>
</g>
<!-- 19 -->
<g id="node20" class="node">
<title>19</title>
<text text-anchor="middle" x="276.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;19 -->
<g id="edge19" class="edge">
<title>7&#45;&gt;19</title>
<path fill="none" stroke="black" d="M219.48,-251.26C229.4,-243.9 246.33,-231.34 259.12,-221.84"/>
<polygon fill="black" stroke="black" points="261.13,-224.71 267.07,-215.94 256.96,-219.09 261.13,-224.71"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="121.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M185.88,-201.01C174.36,-193.5 154.55,-180.59 139.89,-171.03"/>
<polygon fill="black" stroke="black" points="141.87,-168.14 131.58,-165.61 138.05,-174.01 141.87,-168.14"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="202.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 8&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>8&#45;&gt;12</title>
<path fill="none" stroke="black" d="M196.11,-201.21C197.01,-194.99 198.47,-184.9 199.75,-176.14"/>
<polygon fill="black" stroke="black" points="203.2,-176.74 201.17,-166.34 196.27,-175.73 203.2,-176.74"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="105.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M119.29,-150.96C117.18,-144.59 113.72,-134.18 110.77,-125.28"/>
<polygon fill="black" stroke="black" points="114.17,-124.42 107.7,-116.03 107.53,-126.62 114.17,-124.42"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="105.25" y="-51.2" font-family="Times,serif" font-size="14.00">T (84)</text>
</g>
<!-- 10&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>10&#45;&gt;11</title>
<path fill="none" stroke="black" d="M105.25,-100.71C105.25,-94.49 105.25,-84.4 105.25,-75.64"/>
<polygon fill="black" stroke="black" points="108.75,-75.85 105.25,-65.85 101.75,-75.85 108.75,-75.85"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="173.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M198.69,-150.96C194.74,-144.37 188.18,-133.47 182.71,-124.37"/>
<polygon fill="black" stroke="black" points="185.77,-122.66 177.61,-115.89 179.77,-126.26 185.77,-122.66"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="254.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 12&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>12&#45;&gt;16</title>
<path fill="none" stroke="black" d="M208.63,-150.96C216.27,-143.87 229.31,-131.76 239.5,-122.31"/>
<polygon fill="black" stroke="black" points="241.76,-124.99 246.71,-115.62 237,-119.86 241.76,-124.99"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="173.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 13&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>13&#45;&gt;14</title>
<path fill="none" stroke="black" d="M173.25,-100.71C173.25,-94.49 173.25,-84.4 173.25,-75.64"/>
<polygon fill="black" stroke="black" points="176.75,-75.85 173.25,-65.85 169.75,-75.85 176.75,-75.85"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="173.25" y="-0.95" font-family="Times,serif" font-size="14.00">e (101)</text>
</g>
<!-- 14&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>14&#45;&gt;15</title>
<path fill="none" stroke="black" d="M173.25,-50.46C173.25,-44.24 173.25,-34.15 173.25,-25.39"/>
<polygon fill="black" stroke="black" points="176.75,-25.6 173.25,-15.6 169.75,-25.6 176.75,-25.6"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="254.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M254.25,-100.71C254.25,-94.49 254.25,-84.4 254.25,-75.64"/>
<polygon fill="black" stroke="black" points="257.75,-75.85 254.25,-65.85 250.75,-75.85 257.75,-75.85"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="254.25" y="-0.95" font-family="Times,serif" font-size="14.00">x (120)</text>
</g>
<!-- 17&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>17&#45;&gt;18</title>
<path fill="none" stroke="black" d="M254.25,-50.46C254.25,-44.24 254.25,-34.15 254.25,-25.39"/>
<polygon fill="black" stroke="black" points="257.75,-25.6 254.25,-15.6 250.75,-25.6 257.75,-25.6"/>
</g>
<!-- 20 -->
<g id="node21" class="node">
<title>20</title>
<text text-anchor="middle" x="306.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 19&#45;&gt;20 -->
<g id="edge20" class="edge">
<title>19&#45;&gt;20</title>
<path fill="none" stroke="black" d="M279.93,-201.21C284.07,-194.55 290.95,-183.48 296.65,-174.32"/>
<polygon fill="black" stroke="black" points="299.43,-176.47 301.74,-166.13 293.49,-172.77 299.43,-176.47"/>
</g>
<!-- 21 -->
<g id="node22" class="node">
<title>21</title>
<text text-anchor="middle" x="322.25" y="-101.45" font-family="Times,serif" font-size="14.00">t (116)</text>
</g>
<!-- 20&#45;&gt;21 -->
<g id="edge21" class="edge">
<title>20&#45;&gt;21</title>
<path fill="none" stroke="black" d="M308.21,-150.96C310.32,-144.59 313.78,-134.18 316.73,-125.28"/>
<polygon fill="black" stroke="black" points="319.97,-126.62 319.8,-116.03 313.33,-124.42 319.97,-126.62"/>
</g>
<!-- 23 -->
<g id="node24" class="node">
<title>23</title>
<text text-anchor="middle" x="332.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 22&#45;&gt;23 -->
<g id="edge23" class="edge">
<title>22&#45;&gt;23</title>
<path fill="none" stroke="black" d="M348.92,-251.46C346.41,-245.09 342.31,-234.68 338.81,-225.78"/>
<polygon fill="black" stroke="black" points="342.07,-224.52 335.15,-216.5 335.56,-227.09 342.07,-224.52"/>
</g>
<!-- 24 -->
<g id="node25" class="node">
<title>24</title>
<text text-anchor="middle" x="370.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 22&#45;&gt;24 -->
<g id="edge24" class="edge">
<title>22&#45;&gt;24</title>
<path fill="none" stroke="black" d="M353.58,-251.46C356.09,-245.09 360.19,-234.68 363.69,-225.78"/>
<polygon fill="black" stroke="black" points="366.94,-227.09 367.35,-216.5 360.43,-224.52 366.94,-227.09"/>
</g>
<!-- 26 -->
<g id="node27" class="node">
<title>26</title>
<text text-anchor="middle" x="419.25" y="-201.95" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 22&#45;&gt;26 -->
<g id="edge26" class="edge">
<title>22&#45;&gt;26</title>
<path fill="none" stroke="black" d="M359.86,-251.26C370.34,-243.83 388.3,-231.09 401.73,-221.56"/>
<polygon fill="black" stroke="black" points="403.56,-224.55 409.69,-215.91 399.51,-218.84 403.56,-224.55"/>
</g>
<!-- 25 -->
<g id="node26" class="node">
<title>25</title>
<text text-anchor="middle" x="370.25" y="-151.7" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 24&#45;&gt;25 -->
<g id="edge25" class="edge">
<title>24&#45;&gt;25</title>
<path fill="none" stroke="black" d="M370.25,-201.21C370.25,-194.99 370.25,-184.9 370.25,-176.14"/>
<polygon fill="black" stroke="black" points="373.75,-176.35 370.25,-166.35 366.75,-176.35 373.75,-176.35"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="450pt" height="324pt"
 viewBox="0.00 0.00 449.50 323.75" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 319.75)">
<polygon fill="white" stroke="none" points="-4,4 -4,-319.75 445.5,-319.75 445.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="201.25" y="-302.45" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="201.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M201.25,-301.71C201.25,-295.49 201.25,-285.4 201.25,-276.64"/>
<polygon fill="black" stroke="black" points="204.75,-276.85 201.25,-266.85 197.75,-276.85 204.75,-276.85"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="96.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M187.95,-251.26C170.83,-243.4 140.79,-229.59 119.77,-219.93"/>
<polygon fill="black" stroke="black" points="121.36,-216.81 110.82,-215.82 118.44,-223.17 121.36,-216.81"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="201.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M201.25,-251.46C201.25,-245.24 201.25,-235.15 201.25,-226.39"/>
<polygon fill="black" stroke="black" points="204.75,-226.6 201.25,-216.6 197.75,-226.6 204.75,-226.6"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="356.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>1&#45;&gt;18</title>
<path fill="none" stroke="black" d="M220.88,-251.26C247.43,-243 295.05,-228.18 326.14,-218.5"/>
<polygon fill="black" stroke="black" points="326.83,-221.95 335.33,-215.64 324.75,-215.27 326.83,-221.95"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M86.24,-201.01C73.9,-193.47 52.62,-180.48 36.95,-170.91"/>
<polygon fill="black" stroke="black" points="38.82,-167.95 28.47,-165.73 35.18,-173.92 38.82,-167.95"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M92.57,-201.21C88.43,-194.55 81.55,-183.48 75.85,-174.32"/>
<polygon fill="black" stroke="black" points="79.01,-172.77 70.76,-166.13 73.07,-176.47 79.01,-172.77"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M98.58,-201.21C101.09,-194.84 105.19,-184.43 108.69,-175.53"/>
<polygon fill="black" stroke="black" points="111.94,-176.84 112.35,-166.25 105.43,-174.27 111.94,-176.84"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="66.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M66.25,-150.96C66.25,-144.74 66.25,-134.65 66.25,-125.89"/>
<polygon fill="black" stroke="black" points="69.75,-126.1 66.25,-116.1 62.75,-126.1 69.75,-126.1"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="182.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M198.92,-201.21C196.41,-194.84 192.31,-184.43 188.81,-175.53"/>
<polygon fill="black" stroke="black" points="192.07,-174.27 185.15,-166.25 185.56,-176.84 192.07,-174.27"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="263.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>7&#45;&gt;11</title>
<path fill="none" stroke="black" d="M209.1,-201.01C218.56,-193.65 234.71,-181.09 246.92,-171.59"/>
<polygon fill="black" stroke="black" points="248.72,-174.62 254.46,-165.71 244.42,-169.09 248.72,-174.62"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="173.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M181.15,-150.96C179.99,-144.74 178.1,-134.65 176.47,-125.89"/>
<polygon fill="black" stroke="black" points="179.91,-125.27 174.64,-116.08 173.03,-126.55 179.91,-125.27"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="173.25" y="-51.2" font-family="Times,serif" font-size="14.00">T (84)</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M173.25,-100.71C173.25,-94.49 173.25,-84.4 173.25,-75.64"/>
<polygon fill="black" stroke="black" points="176.75,-75.85 173.25,-65.85 169.75,-75.85 176.75,-75.85"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="241.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 11&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>11&#45;&gt;12</title>
<path fill="none" stroke="black" d="M260.55,-150.96C257.62,-144.52 252.79,-133.94 248.7,-124.97"/>
<polygon fill="black" stroke="black" points="251.93,-123.61 244.6,-115.97 245.56,-126.52 251.93,-123.61"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="322.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 11&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>11&#45;&gt;15</title>
<path fill="none" stroke="black" d="M270.48,-150.96C279.33,-143.72 294.56,-131.27 306.22,-121.73"/>
<polygon fill="black" stroke="black" points="308.26,-124.59 313.78,-115.55 303.83,-119.17 308.26,-124.59"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="241.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M241.25,-100.71C241.25,-94.49 241.25,-84.4 241.25,-75.64"/>
<polygon fill="black" stroke="black" points="244.75,-75.85 241.25,-65.85 237.75,-75.85 244.75,-75.85"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="241.25" y="-0.95" font-family="Times,serif" font-size="14.00">e (101)</text>
</g>
<!-- 13&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>13&#45;&gt;14</title>
<path fill="none" stroke="black" d="M241.25,-50.46C241.25,-44.24 241.25,-34.15 241.25,-25.39"/>
<polygon fill="black" stroke="black" points="244.75,-25.6 241.25,-15.6 237.75,-25.6 244.75,-25.6"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="322.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 15&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>15&#45;&gt;16</title>
<path fill="none" stroke="black" d="M322.25,-100.71C322.25,-94.49 322.25,-84.4 322.25,-75.64"/>
<polygon fill="black" stroke="black" points="325.75,-75.85 322.25,-65.85 318.75,-75.85 325.75,-75.85"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="322.25" y="-0.95" font-family="Times,serif" font-size="14.00">xt</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M322.25,-50.46C322.25,-44.24 322.25,-34.15 322.25,-25.39"/>
<polygon fill="black" stroke="black" points="325.75,-25.6 322.25,-15.6 318.75,-25.6 325.75,-25.6"/>
</g>
<!-- 19 -->
<g id="node20" class="node">
<title>19</title>
<text text-anchor="middle" x="337.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 18&#45;&gt;19 -->
<g id="edge19" class="edge">
<title>18&#45;&gt;19</title>
<path fill="none" stroke="black" d="M353.92,-201.21C351.41,-194.84 347.31,-184.43 343.81,-175.53"/>
<polygon fill="black" stroke="black" points="347.07,-174.27 340.15,-166.25 340.56,-176.84 347.07,-174.27"/>
</g>
<!-- 20 -->
<g id="node21" class="node">
<title>20</title>
<text text-anchor="middle" x="375.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 18&#45;&gt;20 -->
<g id="edge20" class="edge">
<title>18&#45;&gt;20</title>
<path fill="none" stroke="black" d="M358.58,-201.21C361.09,-194.84 365.19,-184.43 368.69,-175.53"/>
<polygon fill="black" stroke="black" points="371.94,-176.84 372.35,-166.25 365.43,-174.27 371.94,-176.84"/>
</g>
<!-- 22 -->
<g id="node23" class="node">
<title>22</title>
<text text-anchor="middle" x="424.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 18&#45;&gt;22 -->
<g id="edge22" class="edge">
<title>18&#45;&gt;22</title>
<path fill="none" stroke="black" d="M364.86,-201.01C375.34,-193.58 393.3,-180.84 406.73,-171.31"/>
<polygon fill="black" stroke="black" points="408.56,-174.3 414.69,-165.66 404.51,-168.59 408.56,-174.3"/>
</g>
<!-- 21 -->
<g id="node22" class="node">
<title>21</title>
<text text-anchor="middle" x="384.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 20&#45;&gt;21 -->
<g id="edge21" class="edge">
<title>20&#45;&gt;21</title>
<path fill="none" stroke="black" d="M376.35,-150.96C377.51,-144.74 379.4,-134.65 381.03,-125.89"/>
<polygon fill="black" stroke="black" points="384.47,-126.55 382.86,-116.08 377.59,-125.27 384.47,-126.55"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="450pt" height="324pt"
 viewBox="0.00 0.00 449.50 323.75" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 319.75)">
<polygon fill="white" stroke="none" points="-4,4 -4,-319.75 445.5,-319.75 445.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="201.25" y="-302.45" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="201.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M201.25,-301.71C201.25,-295.49 201.25,-285.4 201.25,-276.64"/>
<polygon fill="black" stroke="black" points="204.75,-276.85 201.25,-266.85 197.75,-276.85 204.75,-276.85"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="96.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M187.95,-251.26C170.83,-243.4 140.79,-229.59 119.77,-219.93"/>
<polygon fill="black" stroke="black" points="121.36,-216.81 110.82,-215.82 118.44,-223.17 121.36,-216.81"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="201.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M201.25,-251.46C201.25,-245.24 201.25,-235.15 201.25,-226.39"/>
<polygon fill="black" stroke="black" points="204.75,-226.6 201.25,-216.6 197.75,-226.6 204.75,-226.6"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="356.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>1&#45;&gt;18</title>
<path fill="none" stroke="black" d="M220.88,-251.26C247.43,-243 295.05,-228.18 326.14,-218.5"/>
<polygon fill="black" stroke="black" points="326.83,-221.95 335.33,-215.64 324.75,-215.27 326.83,-221.95"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M86.24,-201.01C73.9,-193.47 52.62,-180.48 36.95,-170.91"/>
<polygon fill="black" stroke="black" points="38.82,-167.95 28.47,-165.73 35.18,-173.92 38.82,-167.95"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M92.57,-201.21C88.43,-194.55 81.55,-183.48 75.85,-174.32"/>
<polygon fill="black" stroke="black" points="79.01,-172.77 70.76,-166.13 73.07,-176.47 79.01,-172.77"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M98.58,-201.21C101.09,-194.84 105.19,-184.43 108.69,-175.53"/>
<polygon fill="black" stroke="black" points="111.94,-176.84 112.35,-166.25 105.43,-174.27 111.94,-176.84"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="66.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M66.25,-150.96C66.25,-144.74 66.25,-134.65 66.25,-125.89"/>
<polygon fill="black" stroke="black" points="69.75,-126.1 66.25,-116.1 62.75,-126.1 69.75,-126.1"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="182.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M198.92,-201.21C196.41,-194.84 192.31,-184.43 188.81,-175.53"/>
<polygon fill="black" stroke="black" points="192.07,-174.27 185.15,-166.25 185.56,-176.84 192.07,-174.27"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="263.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>7&#45;&gt;11</title>
<path fill="none" stroke="black" d="M209.1,-201.01C218.56,-193.65 234.71,-181.09 246.92,-171.59"/>
<polygon fill="black" stroke="black" points="248.72,-174.62 254.46,-165.71 244.42,-169.09 248.72,-174.62"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="173.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M181.15,-150.96C179.99,-144.74 178.1,-134.65 176.47,-125.89"/>
<polygon fill="black" stroke="black" points="179.91,-125.27 174.64,-116.08 173.03,-126.55 179.91,-125.27"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="173.25" y="-51.2" font-family="Times,serif" font-size="14.00">T (84)</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M173.25,-100.71C173.25,-94.49 173.25,-84.4 173.25,-75.64"/>
<polygon fill="black" stroke="black" points="176.75,-75.85 173.25,-65.85 169.75,-75.85 176.75,-75.85"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="241.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 11&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>11&#45;&gt;12</title>
<path fill="none" stroke="black" d="M260.55,-150.96C257.62,-144.52 252.79,-133.94 248.7,-124.97"/>
<polygon fill="black" stroke="black" points="251.93,-123.61 244.6,-115.97 245.56,-126.52 251.93,-123.61"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="322.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 11&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>11&#45;&gt;15</title>
<path fill="none" stroke="black" d="M270.48,-150.96C279.33,-143.72 294.56,-131.27 306.22,-121.73"/>
<polygon fill="black" stroke="black" points="308.26,-124.59 313.78,-115.55 303.83,-119.17 308.26,-124.59"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="241.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M241.25,-100.71C241.25,-94.49 241.25,-84.4 241.25,-75.64"/>
<polygon fill="black" stroke="black" points="244.75,-75.85 241.25,-65.85 237.75,-75.85 244.75,-75.85"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="241.25" y="-0.95" font-family="Times,serif" font-size="14.00">ex</text>
</g>
<!-- 13&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>13&#45;&gt;14</title>
<path fill="none" stroke="black" d="M241.25,-50.46C241.25,-44.24 241.25,-34.15 241.25,-25.39"/>
<polygon fill="black" stroke="black" points="244.75,-25.6 241.25,-15.6 237.75,-25.6 244.75,-25.6"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="322.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 15&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>15&#45;&gt;16</title>
<path fill="none" stroke="black" d="M322.25,-100.71C322.25,-94.49 322.25,-84.4 322.25,-75.64"/>
<polygon fill="black" stroke="black" points="325.75,-75.85 322.25,-65.85 318.75,-75.85 325.75,-75.85"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="322.25" y="-0.95" font-family="Times,serif" font-size="14.00">t (116)</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M322.25,-50.46C322.25,-44.24 322.25,-34.15 322.25,-25.39"/>
<polygon fill="black" stroke="black" points="325.75,-25.6 322.25,-15.6 318.75,-25.6 325.75,-25.6"/>
</g>
<!-- 19 -->
<g id="node20" class="node">
<title>19</title>
<text text-anchor="middle" x="337.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 18&#45;&gt;19 -->
<g id="edge19" class="edge">
<title>18&#45;&gt;19</title>
<path fill="none" stroke="black" d="M353.92,-201.21C351.41,-194.84 347.31,-184.43 343.81,-175.53"/>
<polygon fill="black" stroke="black" points="347.07,-174.27 340.15,-166.25 340.56,-176.84 347.07,-174.27"/>
</g>
<!-- 20 -->
<g id="node21" class="node">
<title>20</title>
<text text-anchor="middle" x="375.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 18&#45;&gt;20 -->
<g id="edge20" class="edge">
<title>18&#45;&gt;20</title>
<path fill="none" stroke="black" d="M358.58,-201.21C361.09,-194.84 365.19,-184.43 368.69,-175.53"/>
<polygon fill="black" stroke="black" points="371.94,-176.84 372.35,-166.25 365.43,-174.27 371.94,-176.84"/>
</g>
<!-- 22 -->
<g id="node23" class="node">
<title>22</title>
<text text-anchor="middle" x="424.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 18&#45;&gt;22 -->
<g id="edge22" class="edge">
<title>18&#45;&gt;22</title>
<path fill="none" stroke="black" d="M364.86,-201.01C375.34,-193.58 393.3,-180.84 406.73,-171.31"/>
<polygon fill="black" stroke="black" points="408.56,-174.3 414.69,-165.66 404.51,-168.59 408.56,-174.3"/>
</g>
<!-- 21 -->
<g id="node22" class="node">
<title>21</title>
<text text-anchor="middle" x="384.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 20&#45;&gt;21 -->
<g id="edge21" class="edge">
<title>20&#45;&gt;21</title>
<path fill="none" stroke="black" d="M376.35,-150.96C377.51,-144.74 379.4,-134.65 381.03,-125.89"/>
<polygon fill="black" stroke="black" points="384.47,-126.55 382.86,-116.08 377.59,-125.27 384.47,-126.55"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="456pt" height="374pt"
 viewBox="0.00 0.00 455.50 374.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 370)">
<polygon fill="white" stroke="none" points="-4,4 -4,-370 451.5,-370 451.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="201.25" y="-352.7" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="201.25" y="-302.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M201.25,-351.96C201.25,-345.74 201.25,-335.65 201.25,-326.89"/>
<polygon fill="black" stroke="black" points="204.75,-327.1 201.25,-317.1 197.75,-327.1 204.75,-327.1"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="96.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M187.95,-301.51C170.83,-293.65 140.79,-279.84 119.77,-270.18"/>
<polygon fill="black" stroke="black" points="121.36,-267.06 110.82,-266.07 118.44,-273.42 121.36,-267.06"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="201.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M201.25,-301.71C201.25,-295.49 201.25,-285.4 201.25,-276.64"/>
<polygon fill="black" stroke="black" points="204.75,-276.85 201.25,-266.85 197.75,-276.85 204.75,-276.85"/>
</g>
<!-- 22 -->
<g id="node23" class="node">
<title>22</title>
<text text-anchor="middle" x="362.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;22 -->
<g id="edge22" class="edge">
<title>1&#45;&gt;22</title>
<path fill="none" stroke="black" d="M221.64,-301.51C249.34,-293.21 299.11,-278.3 331.4,-268.62"/>
<polygon fill="black" stroke="black" points="332,-272.09 340.57,-265.87 329.99,-265.39 332,-272.09"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M86.24,-251.26C73.9,-243.72 52.62,-230.73 36.95,-221.16"/>
<polygon fill="black" stroke="black" points="38.82,-218.2 28.47,-215.98 35.18,-224.17 38.82,-218.2"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M92.57,-251.46C88.43,-244.8 81.55,-233.73 75.85,-224.57"/>
<polygon fill="black" stroke="black" points="79.01,-223.02 70.76,-216.38 73.07,-226.72 79.01,-223.02"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-201.95" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M98.58,-251.46C101.09,-245.09 105.19,-234.68 108.69,-225.78"/>
<polygon fill="black" stroke="black" points="111.94,-227.09 112.35,-216.5 105.43,-224.52 111.94,-227.09"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="66.25" y="-151.7" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M66.25,-201.21C66.25,-194.99 66.25,-184.9 66.25,-176.14"/>
<polygon fill="black" stroke="black" points="69.75,-176.35 66.25,-166.35 62.75,-176.35 69.75,-176.35"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="182.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M198.92,-251.46C196.41,-245.09 192.31,-234.68 188.81,-225.78"/>
<polygon fill="black" stroke="black" points="192.07,-224.52 185.15,-216.5 185.56,-227.09 192.07,-224.52"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="263.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>7&#45;&gt;11</title>
<path fill="none" stroke="black" d="M209.1,-251.26C218.56,-243.9 234.71,-231.34 246.92,-221.84"/>
<polygon fill="black" stroke="black" points="248.72,-224.87 254.46,-215.96 244.42,-219.34 248.72,-224.87"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="167.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M180.41,-201.21C178.45,-194.91 175.27,-184.67 172.52,-175.83"/>
<polygon fill="black" stroke="black" points="175.86,-174.8 169.55,-166.29 169.18,-176.87 175.86,-174.8"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="141.25" y="-101.45" font-family="Times,serif" font-size="14.00">T (84)</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M164.06,-150.96C160.55,-144.45 154.76,-133.71 149.9,-124.67"/>
<polygon fill="black" stroke="black" points="153.01,-123.07 145.18,-115.92 146.84,-126.39 153.01,-123.07"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="250.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 11&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>11&#45;&gt;12</title>
<path fill="none" stroke="black" d="M261.66,-201.21C259.96,-194.91 257.2,-184.67 254.82,-175.83"/>
<polygon fill="black" stroke="black" points="258.23,-175.05 252.25,-166.3 251.47,-176.87 258.23,-175.05"/>
</g>
<!-- 19 -->
<g id="node20" class="node">
<title>19</title>
<text text-anchor="middle" x="331.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 11&#45;&gt;19 -->
<g id="edge19" class="edge">
<title>11&#45;&gt;19</title>
<path fill="none" stroke="black" d="M271.86,-201.01C282.34,-193.58 300.3,-180.84 313.73,-171.31"/>
<polygon fill="black" stroke="black" points="315.56,-174.3 321.69,-165.66 311.51,-168.59 315.56,-174.3"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="208.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M245.1,-150.96C239.12,-144.09 229.03,-132.5 220.92,-123.18"/>
<polygon fill="black" stroke="black" points="223.64,-120.98 214.44,-115.73 218.36,-125.57 223.64,-120.98"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="289.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 12&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>12&#45;&gt;16</title>
<path fill="none" stroke="black" d="M255.03,-150.96C260.53,-144.16 269.76,-132.74 277.24,-123.48"/>
<polygon fill="black" stroke="black" points="279.91,-125.74 283.48,-115.77 274.47,-121.34 279.91,-125.74"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="208.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 13&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>13&#45;&gt;14</title>
<path fill="none" stroke="black" d="M208.25,-100.71C208.25,-94.49 208.25,-84.4 208.25,-75.64"/>
<polygon fill="black" stroke="black" points="211.75,-75.85 208.25,-65.85 204.75,-75.85 211.75,-75.85"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="208.25" y="-0.95" font-family="Times,serif" font-size="14.00">e (101)</text>
</g>
<!-- 14&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>14&#45;&gt;15</title>
<path fill="none" stroke="black" d="M208.25,-50.46C208.25,-44.24 208.25,-34.15 208.25,-25.39"/>
<polygon fill="black" stroke="black" points="211.75,-25.6 208.25,-15.6 204.75,-25.6 211.75,-25.6"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="289.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M289.25,-100.71C289.25,-94.49 289.25,-84.4 289.25,-75.64"/>
<polygon fill="black" stroke="black" points="292.75,-75.85 289.25,-65.85 285.75,-75.85 292.75,-75.85"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="289.25" y="-0.95" font-family="Times,serif" font-size="14.00">x (120)</text>
</g>
<!-- 17&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>17&#45;&gt;18</title>
<path fill="none" stroke="black" d="M289.25,-50.46C289.25,-44.24 289.25,-34.15 289.25,-25.39"/>
<polygon fill="black" stroke="black" points="292.75,-25.6 289.25,-15.6 285.75,-25.6 292.75,-25.6"/>
</g>
<!-- 20 -->
<g id="node21" class="node">
<title>20</title>
<text text-anchor="middle" x="357.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 19&#45;&gt;20 -->
<g id="edge20" class="edge">
<title>19&#45;&gt;20</title>
<path fill="none" stroke="black" d="M334.44,-150.96C337.95,-144.45 343.74,-133.71 348.6,-124.67"/>
<polygon fill="black" stroke="black" points="351.66,-126.39 353.32,-115.92 345.49,-123.07 351.66,-126.39"/>
</g>
<!-- 21 -->
<g id="node22" class="node">
<title>21</title>
<text text-anchor="middle" x="357.25" y="-51.2" font-family="Times,serif" font-size="14.00">t (116)</text>
</g>
<!-- 20&#45;&gt;21 -->
<g id="edge21" class="edge">
<title>20&#45;&gt;21</title>
<path fill="none" stroke="black" d="M357.25,-100.71C357.25,-94.49 357.25,-84.4 357.25,-75.64"/>
<polygon fill="black" stroke="black" points="360.75,-75.85 357.25,-65.85 353.75,-75.85 360.75,-75.85"/>
</g>
<!-- 23 -->
<g id="node24" class="node">
<title>23</title>
<text text-anchor="middle" x="343.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 22&#45;&gt;23 -->
<g id="edge23" class="edge">
<title>22&#45;&gt;23</title>
<path fill="none" stroke="black" d="M359.92,-251.46C357.41,-245.09 353.31,-234.68 349.81,-225.78"/>
<polygon fill="black" stroke="black" points="353.07,-224.52 346.15,-216.5 346.56,-227.09 353.07,-224.52"/>
</g>
<!-- 24 -->
<g id="node25" class="node">
<title>24</title>
<text text-anchor="middle" x="381.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 22&#45;&gt;24 -->
<g id="edge24" class="edge">
<title>22&#45;&gt;24</title>
<path fill="none" stroke="black" d="M364.58,-251.46C367.09,-245.09 371.19,-234.68 374.69,-225.78"/>
<polygon fill="black" stroke="black" points="377.94,-227.09 378.35,-216.5 371.43,-224.52 377.94,-227.09"/>
</g>
<!-- 26 -->
<g id="node27" class="node">
<title>26</title>
<text text-anchor="middle" x="430.25" y="-201.95" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 22&#45;&gt;26 -->
<g id="edge26" class="edge">
<title>22&#45;&gt;26</title>
<path fill="none" stroke="black" d="M370.86,-251.26C381.34,-243.83 399.3,-231.09 412.73,-221.56"/>
<polygon fill="black" stroke="black" points="414.56,-224.55 420.69,-215.91 410.51,-218.84 414.56,-224.55"/>
</g>
<!-- 25 -->
<g id="node26" class="node">
<title>25</title>
<text text-anchor="middle" x="393.25" y="-151.7" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 24&#45;&gt;25 -->
<g id="edge25" class="edge">
<title>24&#45;&gt;25</title>
<path fill="none" stroke="black" d="M382.72,-201.21C384.29,-194.91 386.84,-184.67 389.03,-175.83"/>
<polygon fill="black" stroke="black" points="392.38,-176.86 391.4,-166.31 385.59,-175.17 392.38,-176.86"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="450pt" height="374pt"
 viewBox="0.00 0.00 449.50 374.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 370)">
<polygon fill="white" stroke="none" points="-4,4 -4,-370 445.5,-370 445.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="201.25" y="-352.7" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="201.25" y="-302.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M201.25,-351.96C201.25,-345.74 201.25,-335.65 201.25,-326.89"/>
<polygon fill="black" stroke="black" points="204.75,-327.1 201.25,-317.1 197.75,-327.1 204.75,-327.1"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="96.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M187.95,-301.51C170.83,-293.65 140.79,-279.84 119.77,-270.18"/>
<polygon fill="black" stroke="black" points="121.36,-267.06 110.82,-266.07 118.44,-273.42 121.36,-267.06"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="201.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M201.25,-301.71C201.25,-295.49 201.25,-285.4 201.25,-276.64"/>
<polygon fill="black" stroke="black" points="204.75,-276.85 201.25,-266.85 197.75,-276.85 204.75,-276.85"/>
</g>
<!-- 22 -->
<g id="node23" class="node">
<title>22</title>
<text text-anchor="middle" x="356.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;22 -->
<g id="edge22" class="edge">
<title>1&#45;&gt;22</title>
<path fill="none" stroke="black" d="M220.88,-301.51C247.43,-293.25 295.05,-278.43 326.14,-268.75"/>
<polygon fill="black" stroke="black" points="326.83,-272.2 335.33,-265.89 324.75,-265.52 326.83,-272.2"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M86.24,-251.26C73.9,-243.72 52.62,-230.73 36.95,-221.16"/>
<polygon fill="black" stroke="black" points="38.82,-218.2 28.47,-215.98 35.18,-224.17 38.82,-218.2"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M92.57,-251.46C88.43,-244.8 81.55,-233.73 75.85,-224.57"/>
<polygon fill="black" stroke="black" points="79.01,-223.02 70.76,-216.38 73.07,-226.72 79.01,-223.02"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-201.95" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M98.58,-251.46C101.09,-245.09 105.19,-234.68 108.69,-225.78"/>
<polygon fill="black" stroke="black" points="111.94,-227.09 112.35,-216.5 105.43,-224.52 111.94,-227.09"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="66.25" y="-151.7" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M66.25,-201.21C66.25,-194.99 66.25,-184.9 66.25,-176.14"/>
<polygon fill="black" stroke="black" points="69.75,-176.35 66.25,-166.35 62.75,-176.35 69.75,-176.35"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="182.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M198.92,-251.46C196.41,-245.09 192.31,-234.68 188.81,-225.78"/>
<polygon fill="black" stroke="black" points="192.07,-224.52 185.15,-216.5 185.56,-227.09 192.07,-224.52"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="263.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>7&#45;&gt;11</title>
<path fill="none" stroke="black" d="M209.1,-251.26C218.56,-243.9 234.71,-231.34 246.92,-221.84"/>
<polygon fill="black" stroke="black" points="248.72,-224.87 254.46,-215.96 244.42,-219.34 248.72,-224.87"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="173.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M181.15,-201.21C179.99,-194.99 178.1,-184.9 176.47,-176.14"/>
<polygon fill="black" stroke="black" points="179.91,-175.52 174.64,-166.33 173.03,-176.8 179.91,-175.52"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="173.25" y="-101.45" font-family="Times,serif" font-size="14.00">T (84)</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M173.25,-150.96C173.25,-144.74 173.25,-134.65 173.25,-125.89"/>
<polygon fill="black" stroke="black" points="176.75,-126.1 173.25,-116.1 169.75,-126.1 176.75,-126.1"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="241.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 11&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>11&#45;&gt;12</title>
<path fill="none" stroke="black" d="M260.55,-201.21C257.62,-194.77 252.79,-184.19 248.7,-175.22"/>
<polygon fill="black" stroke="black" points="251.93,-173.86 244.6,-166.22 245.56,-176.77 251.93,-173.86"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="322.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 11&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>11&#45;&gt;15</title>
<path fill="none" stroke="black" d="M270.48,-201.21C279.33,-193.97 294.56,-181.52 306.22,-171.98"/>
<polygon fill="black" stroke="black" points="308.26,-174.84 313.78,-165.8 303.83,-169.42 308.26,-174.84"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="241.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M241.25,-150.96C241.25,-144.74 241.25,-134.65 241.25,-125.89"/>
<polygon fill="black" stroke="black" points="244.75,-126.1 241.25,-116.1 237.75,-126.1 244.75,-126.1"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="241.25" y="-51.2" font-family="Times,serif" font-size="14.00">e (101)</text>
</g>
<!-- 13&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>13&#45;&gt;14</title>
<path fill="none" stroke="black" d="M241.25,-100.71C241.25,-94.49 241.25,-84.4 241.25,-75.64"/>
<polygon fill="black" stroke="black" points="244.75,-75.85 241.25,-65.85 237.75,-75.85 244.75,-75.85"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="315.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 15&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>15&#45;&gt;16</title>
<path fill="none" stroke="black" d="M321.39,-150.96C320.49,-144.74 319.03,-134.65 317.75,-125.89"/>
<polygon fill="black" stroke="black" points="321.23,-125.48 316.33,-116.09 314.3,-126.49 321.23,-125.48"/>
</g>
<!-- 19 -->
<g id="node20" class="node">
<title>19</title>
<text text-anchor="middle" x="396.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 15&#45;&gt;19 -->
<g id="edge19" class="edge">
<title>15&#45;&gt;19</title>
<path fill="none" stroke="black" d="M331.62,-150.76C343.14,-143.25 362.95,-130.34 377.61,-120.78"/>
<polygon fill="black" stroke="black" points="379.45,-123.76 385.92,-115.36 375.63,-117.89 379.45,-123.76"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="315.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M315.25,-100.71C315.25,-94.49 315.25,-84.4 315.25,-75.64"/>
<polygon fill="black" stroke="black" points="318.75,-75.85 315.25,-65.85 311.75,-75.85 318.75,-75.85"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="315.25" y="-0.95" font-family="Times,serif" font-size="14.00">x (120)</text>
</g>
<!-- 17&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>17&#45;&gt;18</title>
<path fill="none" stroke="black" d="M315.25,-50.46C315.25,-44.24 315.25,-34.15 315.25,-25.39"/>
<polygon fill="black" stroke="black" points="318.75,-25.6 315.25,-15.6 311.75,-25.6 318.75,-25.6"/>
</g>
<!-- 20 -->
<g id="node21" class="node">
<title>20</title>
<text text-anchor="middle" x="396.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 19&#45;&gt;20 -->
<g id="edge20" class="edge">
<title>19&#45;&gt;20</title>
<path fill="none" stroke="black" d="M396.25,-100.71C396.25,-94.49 396.25,-84.4 396.25,-75.64"/>
<polygon fill="black" stroke="black" points="399.75,-75.85 396.25,-65.85 392.75,-75.85 399.75,-75.85"/>
</g>
<!-- 21 -->
<g id="node22" class="node">
<title>21</title>
<text text-anchor="middle" x="396.25" y="-0.95" font-family="Times,serif" font-size="14.00">t (116)</text>
</g>
<!-- 20&#45;&gt;21 -->
<g id="edge21" class="edge">
<title>20&#45;&gt;21</title>
<path fill="none" stroke="black" d="M396.25,-50.46C396.25,-44.24 396.25,-34.15 396.25,-25.39"/>
<polygon fill="black" stroke="black" points="399.75,-25.6 396.25,-15.6 392.75,-25.6 399.75,-25.6"/>
</g>
<!-- 23 -->
<g id="node24" class="node">
<title>23</title>
<text text-anchor="middle" x="337.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 22&#45;&gt;23 -->
<g id="edge23" class="edge">
<title>22&#45;&gt;23</title>
<path fill="none" stroke="black" d="M353.92,-251.46C351.41,-245.09 347.31,-234.68 343.81,-225.78"/>
<polygon fill="black" stroke="black" points="347.07,-224.52 340.15,-216.5 340.56,-227.09 347.07,-224.52"/>
</g>
<!-- 24 -->
<g id="node25" class="node">
<title>24</title>
<text text-anchor="middle" x="375.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 22&#45;&gt;24 -->
<g id="edge24" class="edge">
<title>22&#45;&gt;24</title>
<path fill="none" stroke="black" d="M358.58,-251.46C361.09,-245.09 365.19,-234.68 368.69,-225.78"/>
<polygon fill="black" stroke="black" points="371.94,-227.09 372.35,-216.5 365.43,-224.52 371.94,-227.09"/>
</g>
<!-- 26 -->
<g id="node27" class="node">
<title>26</title>
<text text-anchor="middle" x="424.25" y="-201.95" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 22&#45;&gt;26 -->
<g id="edge26" class="edge">
<title>22&#45;&gt;26</title>
<path fill="none" stroke="black" d="M364.86,-251.26C375.34,-243.83 393.3,-231.09 406.73,-221.56"/>
<polygon fill="black" stroke="black" points="408.56,-224.55 414.69,-215.91 404.51,-218.84 408.56,-224.55"/>
</g>
<!-- 25 -->
<g id="node26" class="node">
<title>25</title>
<text text-anchor="middle" x="384.25" y="-151.7" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 24&#45;&gt;25 -->
<g id="edge25" class="edge">
<title>24&#45;&gt;25</title>
<path fill="none" stroke="black" d="M376.35,-201.21C377.51,-194.99 379.4,-184.9 381.03,-176.14"/>
<polygon fill="black" stroke="black" points="384.47,-176.8 382.86,-166.33 377.59,-175.52 384.47,-176.8"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="450pt" height="324pt"
 viewBox="0.00 0.00 449.50 323.75" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 319.75)">
<polygon fill="white" stroke="none" points="-4,4 -4,-319.75 445.5,-319.75 445.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="201.25" y="-302.45" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="201.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M201.25,-301.71C201.25,-295.49 201.25,-285.4 201.25,-276.64"/>
<polygon fill="black" stroke="black" points="204.75,-276.85 201.25,-266.85 197.75,-276.85 204.75,-276.85"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="96.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M187.95,-251.26C170.83,-243.4 140.79,-229.59 119.77,-219.93"/>
<polygon fill="black" stroke="black" points="121.36,-216.81 110.82,-215.82 118.44,-223.17 121.36,-216.81"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="201.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M201.25,-251.46C201.25,-245.24 201.25,-235.15 201.25,-226.39"/>
<polygon fill="black" stroke="black" points="204.75,-226.6 201.25,-216.6 197.75,-226.6 204.75,-226.6"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="356.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>1&#45;&gt;18</title>
<path fill="none" stroke="black" d="M220.88,-251.26C247.43,-243 295.05,-228.18 326.14,-218.5"/>
<polygon fill="black" stroke="black" points="326.83,-221.95 335.33,-215.64 324.75,-215.27 326.83,-221.95"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M86.24,-201.01C73.9,-193.47 52.62,-180.48 36.95,-170.91"/>
<polygon fill="black" stroke="black" points="38.82,-167.95 28.47,-165.73 35.18,-173.92 38.82,-167.95"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M92.57,-201.21C88.43,-194.55 81.55,-183.48 75.85,-174.32"/>
<polygon fill="black" stroke="black" points="79.01,-172.77 70.76,-166.13 73.07,-176.47 79.01,-172.77"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M98.58,-201.21C101.09,-194.84 105.19,-184.43 108.69,-175.53"/>
<polygon fill="black" stroke="black" points="111.94,-176.84 112.35,-166.25 105.43,-174.27 111.94,-176.84"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="66.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M66.25,-150.96C66.25,-144.74 66.25,-134.65 66.25,-125.89"/>
<polygon fill="black" stroke="black" points="69.75,-126.1 66.25,-116.1 62.75,-126.1 69.75,-126.1"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="182.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M198.92,-201.21C196.41,-194.84 192.31,-184.43 188.81,-175.53"/>
<polygon fill="black" stroke="black" points="192.07,-174.27 185.15,-166.25 185.56,-176.84 192.07,-174.27"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="263.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>7&#45;&gt;11</title>
<path fill="none" stroke="black" d="M209.1,-201.01C218.56,-193.65 234.71,-181.09 246.92,-171.59"/>
<polygon fill="black" stroke="black" points="248.72,-174.62 254.46,-165.71 244.42,-169.09 248.72,-174.62"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="173.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M181.15,-150.96C179.99,-144.74 178.1,-134.65 176.47,-125.89"/>
<polygon fill="black" stroke="black" points="179.91,-125.27 174.64,-116.08 173.03,-126.55 179.91,-125.27"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="173.25" y="-51.2" font-family="Times,serif" font-size="14.00">Te</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M173.25,-100.71C173.25,-94.49 173.25,-84.4 173.25,-75.64"/>
<polygon fill="black" stroke="black" points="176.75,-75.85 173.25,-65.85 169.75,-75.85 176.75,-75.85"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="241.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 11&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>11&#45;&gt;12</title>
<path fill="none" stroke="black" d="M260.55,-150.96C257.62,-144.52 252.79,-133.94 248.7,-124.97"/>
<polygon fill="black" stroke="black" points="251.93,-123.61 244.6,-115.97 245.56,-126.52 251.93,-123.61"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="322.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 11&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>11&#45;&gt;15</title>
<path fill="none" stroke="black" d="M270.48,-150.96C279.33,-143.72 294.56,-131.27 306.22,-121.73"/>
<polygon fill="black" stroke="black" points="308.26,-124.59 313.78,-115.55 303.83,-119.17 308.26,-124.59"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="241.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M241.25,-100.71C241.25,-94.49 241.25,-84.4 241.25,-75.64"/>
<polygon fill="black" stroke="black" points="244.75,-75.85 241.25,-65.85 237.75,-75.85 244.75,-75.85"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="241.25" y="-0.95" font-family="Times,serif" font-size="14.00">x (120)</text>
</g>
<!-- 13&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>13&#45;&gt;14</title>
<path fill="none" stroke="black" d="M241.25,-50.46C241.25,-44.24 241.25,-34.15 241.25,-25.39"/>
<polygon fill="black" stroke="black" points="244.75,-25.6 241.25,-15.6 237.75,-25.6 244.75,-25.6"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="322.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 15&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>15&#45;&gt;16</title>
<path fill="none" stroke="black" d="M322.25,-100.71C322.25,-94.49 322.25,-84.4 322.25,-75.64"/>
<polygon fill="black" stroke="black" points="325.75,-75.85 322.25,-65.85 318.75,-75.85 325.75,-75.85"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="322.25" y="-0.95" font-family="Times,serif" font-size="14.00">t (116)</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M322.25,-50.46C322.25,-44.24 322.25,-34.15 322.25,-25.39"/>
<polygon fill="black" stroke="black" points="325.75,-25.6 322.25,-15.6 318.75,-25.6 325.75,-25.6"/>
</g>
<!-- 19 -->
<g id="node20" class="node">
<title>19</title>
<text text-anchor="middle" x="337.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 18&#45;&gt;19 -->
<g id="edge19" class="edge">
<title>18&#45;&gt;19</title>
<path fill="none" stroke="black" d="M353.92,-201.21C351.41,-194.84 347.31,-184.43 343.81,-175.53"/>
<polygon fill="black" stroke="black" points="347.07,-174.27 340.15,-166.25 340.56,-176.84 347.07,-174.27"/>
</g>
<!-- 20 -->
<g id="node21" class="node">
<title>20</title>
<text text-anchor="middle" x="375.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 18&#45;&gt;20 -->
<g id="edge20" class="edge">
<title>18&#45;&gt;20</title>
<path fill="none" stroke="black" d="M358.58,-201.21C361.09,-194.84 365.19,-184.43 368.69,-175.53"/>
<polygon fill="black" stroke="black" points="371.94,-176.84 372.35,-166.25 365.43,-174.27 371.94,-176.84"/>
</g>
<!-- 22 -->
<g id="node23" class="node">
<title>22</title>
<text text-anchor="middle" x="424.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 18&#45;&gt;22 -->
<g id="edge22" class="edge">
<title>18&#45;&gt;22</title>
<path fill="none" stroke="black" d="M364.86,-201.01C375.34,-193.58 393.3,-180.84 406.73,-171.31"/>
<polygon fill="black" stroke="black" points="408.56,-174.3 414.69,-165.66 404.51,-168.59 408.56,-174.3"/>
</g>
<!-- 21 -->
<g id="node22" class="node">
<title>21</title>
<text text-anchor="middle" x="384.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 20&#45;&gt;21 -->
<g id="edge21" class="edge">
<title>20&#45;&gt;21</title>
<path fill="none" stroke="black" d="M376.35,-150.96C377.51,-144.74 379.4,-134.65 381.03,-125.89"/>
<polygon fill="black" stroke="black" points="384.47,-126.55 382.86,-116.08 377.59,-125.27 384.47,-126.55"/>
</g>
</g>
</svg>

</div>

</div>

<div class="output_area">

<div class="output_image output_svg output_subarea ">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 9.0.0 (20230911.1827)
 -->
<!-- Pages: 1 -->
<svg width="470pt" height="324pt"
 viewBox="0.00 0.00 469.50 323.75" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 319.75)">
<polygon fill="white" stroke="none" points="-4,4 -4,-319.75 465.5,-319.75 465.5,4 -4,4"/>
<!-- 0 -->
<g id="node1" class="node">
<title>0</title>
<text text-anchor="middle" x="211.25" y="-302.45" font-family="Times,serif" font-size="14.00">&lt;start&gt;</text>
</g>
<!-- 1 -->
<g id="node2" class="node">
<title>1</title>
<text text-anchor="middle" x="211.25" y="-252.2" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="black" d="M211.25,-301.71C211.25,-295.49 211.25,-285.4 211.25,-276.64"/>
<polygon fill="black" stroke="black" points="214.75,-276.85 211.25,-266.85 207.75,-276.85 214.75,-276.85"/>
</g>
<!-- 2 -->
<g id="node3" class="node">
<title>2</title>
<text text-anchor="middle" x="99.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;open&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="black" d="M197.07,-251.26C178.64,-243.32 146.17,-229.34 123.72,-219.67"/>
<polygon fill="black" stroke="black" points="125.28,-216.53 114.71,-215.79 122.51,-222.96 125.28,-216.53"/>
</g>
<!-- 7 -->
<g id="node8" class="node">
<title>7</title>
<text text-anchor="middle" x="211.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 1&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>1&#45;&gt;7</title>
<path fill="none" stroke="black" d="M211.25,-251.46C211.25,-245.24 211.25,-235.15 211.25,-226.39"/>
<polygon fill="black" stroke="black" points="214.75,-226.6 211.25,-216.6 207.75,-226.6 214.75,-226.6"/>
</g>
<!-- 22 -->
<g id="node23" class="node">
<title>22</title>
<text text-anchor="middle" x="376.25" y="-201.95" font-family="Times,serif" font-size="14.00">&lt;xml&#45;close&#45;tag&gt;</text>
</g>
<!-- 1&#45;&gt;22 -->
<g id="edge22" class="edge">
<title>1&#45;&gt;22</title>
<path fill="none" stroke="black" d="M232.15,-251.26C260.54,-242.96 311.54,-228.05 344.63,-218.37"/>
<polygon fill="black" stroke="black" points="345.45,-221.78 354.07,-215.61 343.49,-215.06 345.45,-221.78"/>
</g>
<!-- 3 -->
<g id="node4" class="node">
<title>3</title>
<text text-anchor="middle" x="17.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt; (60)</text>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="black" d="M88.86,-201.01C75.93,-193.4 53.54,-180.23 37.23,-170.63"/>
<polygon fill="black" stroke="black" points="39.25,-167.76 28.86,-165.7 35.7,-173.79 39.25,-167.76"/>
</g>
<!-- 4 -->
<g id="node5" class="node">
<title>4</title>
<text text-anchor="middle" x="66.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 2&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>2&#45;&gt;4</title>
<path fill="none" stroke="black" d="M95.2,-201.21C90.65,-194.55 83.08,-183.48 76.81,-174.32"/>
<polygon fill="black" stroke="black" points="79.72,-172.37 71.18,-166.09 73.94,-176.32 79.72,-172.37"/>
</g>
<!-- 6 -->
<g id="node7" class="node">
<title>6</title>
<text text-anchor="middle" x="115.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 2&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>2&#45;&gt;6</title>
<path fill="none" stroke="black" d="M101.21,-201.21C103.32,-194.84 106.78,-184.43 109.73,-175.53"/>
<polygon fill="black" stroke="black" points="112.97,-176.87 112.8,-166.28 106.33,-174.67 112.97,-176.87"/>
</g>
<!-- 5 -->
<g id="node6" class="node">
<title>5</title>
<text text-anchor="middle" x="52.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="black" d="M64.53,-150.96C62.71,-144.66 59.73,-134.42 57.17,-125.58"/>
<polygon fill="black" stroke="black" points="60.55,-124.67 54.4,-116.04 53.83,-126.62 60.55,-124.67"/>
</g>
<!-- 8 -->
<g id="node9" class="node">
<title>8</title>
<text text-anchor="middle" x="195.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>7&#45;&gt;8</title>
<path fill="none" stroke="black" d="M209.29,-201.21C207.18,-194.84 203.72,-184.43 200.77,-175.53"/>
<polygon fill="black" stroke="black" points="204.17,-174.67 197.7,-166.28 197.53,-176.87 204.17,-174.67"/>
</g>
<!-- 15 -->
<g id="node16" class="node">
<title>15</title>
<text text-anchor="middle" x="276.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 7&#45;&gt;15 -->
<g id="edge15" class="edge">
<title>7&#45;&gt;15</title>
<path fill="none" stroke="black" d="M219.48,-201.01C229.4,-193.65 246.33,-181.09 259.12,-171.59"/>
<polygon fill="black" stroke="black" points="261.13,-174.46 267.07,-165.69 256.96,-168.84 261.13,-174.46"/>
</g>
<!-- 9 -->
<g id="node10" class="node">
<title>9</title>
<text text-anchor="middle" x="114.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="black" d="M184.99,-150.76C172.21,-143.15 150.09,-129.98 133.98,-120.38"/>
<polygon fill="black" stroke="black" points="136.11,-117.57 125.73,-115.46 132.53,-123.59 136.11,-117.57"/>
</g>
<!-- 12 -->
<g id="node13" class="node">
<title>12</title>
<text text-anchor="middle" x="195.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 8&#45;&gt;12 -->
<g id="edge12" class="edge">
<title>8&#45;&gt;12</title>
<path fill="none" stroke="black" d="M195.25,-150.96C195.25,-144.74 195.25,-134.65 195.25,-125.89"/>
<polygon fill="black" stroke="black" points="198.75,-126.1 195.25,-116.1 191.75,-126.1 198.75,-126.1"/>
</g>
<!-- 10 -->
<g id="node11" class="node">
<title>10</title>
<text text-anchor="middle" x="114.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 9&#45;&gt;10 -->
<g id="edge10" class="edge">
<title>9&#45;&gt;10</title>
<path fill="none" stroke="black" d="M114.25,-100.71C114.25,-94.49 114.25,-84.4 114.25,-75.64"/>
<polygon fill="black" stroke="black" points="117.75,-75.85 114.25,-65.85 110.75,-75.85 117.75,-75.85"/>
</g>
<!-- 11 -->
<g id="node12" class="node">
<title>11</title>
<text text-anchor="middle" x="114.25" y="-0.95" font-family="Times,serif" font-size="14.00">T (84)</text>
</g>
<!-- 10&#45;&gt;11 -->
<g id="edge11" class="edge">
<title>10&#45;&gt;11</title>
<path fill="none" stroke="black" d="M114.25,-50.46C114.25,-44.24 114.25,-34.15 114.25,-25.39"/>
<polygon fill="black" stroke="black" points="117.75,-25.6 114.25,-15.6 110.75,-25.6 117.75,-25.6"/>
</g>
<!-- 13 -->
<g id="node14" class="node">
<title>13</title>
<text text-anchor="middle" x="195.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 12&#45;&gt;13 -->
<g id="edge13" class="edge">
<title>12&#45;&gt;13</title>
<path fill="none" stroke="black" d="M195.25,-100.71C195.25,-94.49 195.25,-84.4 195.25,-75.64"/>
<polygon fill="black" stroke="black" points="198.75,-75.85 195.25,-65.85 191.75,-75.85 198.75,-75.85"/>
</g>
<!-- 14 -->
<g id="node15" class="node">
<title>14</title>
<text text-anchor="middle" x="195.25" y="-0.95" font-family="Times,serif" font-size="14.00">e (101)</text>
</g>
<!-- 13&#45;&gt;14 -->
<g id="edge14" class="edge">
<title>13&#45;&gt;14</title>
<path fill="none" stroke="black" d="M195.25,-50.46C195.25,-44.24 195.25,-34.15 195.25,-25.39"/>
<polygon fill="black" stroke="black" points="198.75,-25.6 195.25,-15.6 191.75,-25.6 198.75,-25.6"/>
</g>
<!-- 16 -->
<g id="node17" class="node">
<title>16</title>
<text text-anchor="middle" x="276.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 15&#45;&gt;16 -->
<g id="edge16" class="edge">
<title>15&#45;&gt;16</title>
<path fill="none" stroke="black" d="M276.25,-150.96C276.25,-144.74 276.25,-134.65 276.25,-125.89"/>
<polygon fill="black" stroke="black" points="279.75,-126.1 276.25,-116.1 272.75,-126.1 279.75,-126.1"/>
</g>
<!-- 19 -->
<g id="node20" class="node">
<title>19</title>
<text text-anchor="middle" x="357.25" y="-101.45" font-family="Times,serif" font-size="14.00">&lt;xml&#45;tree&gt;</text>
</g>
<!-- 15&#45;&gt;19 -->
<g id="edge19" class="edge">
<title>15&#45;&gt;19</title>
<path fill="none" stroke="black" d="M286.51,-150.76C299.29,-143.15 321.41,-129.98 337.52,-120.38"/>
<polygon fill="black" stroke="black" points="338.97,-123.59 345.77,-115.46 335.39,-117.57 338.97,-123.59"/>
</g>
<!-- 17 -->
<g id="node18" class="node">
<title>17</title>
<text text-anchor="middle" x="276.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 16&#45;&gt;17 -->
<g id="edge17" class="edge">
<title>16&#45;&gt;17</title>
<path fill="none" stroke="black" d="M276.25,-100.71C276.25,-94.49 276.25,-84.4 276.25,-75.64"/>
<polygon fill="black" stroke="black" points="279.75,-75.85 276.25,-65.85 272.75,-75.85 279.75,-75.85"/>
</g>
<!-- 18 -->
<g id="node19" class="node">
<title>18</title>
<text text-anchor="middle" x="276.25" y="-0.95" font-family="Times,serif" font-size="14.00">x (120)</text>
</g>
<!-- 17&#45;&gt;18 -->
<g id="edge18" class="edge">
<title>17&#45;&gt;18</title>
<path fill="none" stroke="black" d="M276.25,-50.46C276.25,-44.24 276.25,-34.15 276.25,-25.39"/>
<polygon fill="black" stroke="black" points="279.75,-25.6 276.25,-15.6 272.75,-25.6 279.75,-25.6"/>
</g>
<!-- 20 -->
<g id="node21" class="node">
<title>20</title>
<text text-anchor="middle" x="357.25" y="-51.2" font-family="Times,serif" font-size="14.00">&lt;text&gt;</text>
</g>
<!-- 19&#45;&gt;20 -->
<g id="edge20" class="edge">
<title>19&#45;&gt;20</title>
<path fill="none" stroke="black" d="M357.25,-100.71C357.25,-94.49 357.25,-84.4 357.25,-75.64"/>
<polygon fill="black" stroke="black" points="360.75,-75.85 357.25,-65.85 353.75,-75.85 360.75,-75.85"/>
</g>
<!-- 21 -->
<g id="node22" class="node">
<title>21</title>
<text text-anchor="middle" x="357.25" y="-0.95" font-family="Times,serif" font-size="14.00">t (116)</text>
</g>
<!-- 20&#45;&gt;21 -->
<g id="edge21" class="edge">
<title>20&#45;&gt;21</title>
<path fill="none" stroke="black" d="M357.25,-50.46C357.25,-44.24 357.25,-34.15 357.25,-25.39"/>
<polygon fill="black" stroke="black" points="360.75,-25.6 357.25,-15.6 353.75,-25.6 360.75,-25.6"/>
</g>
<!-- 23 -->
<g id="node24" class="node">
<title>23</title>
<text text-anchor="middle" x="357.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;/</text>
</g>
<!-- 22&#45;&gt;23 -->
<g id="edge23" class="edge">
<title>22&#45;&gt;23</title>
<path fill="none" stroke="black" d="M373.92,-201.21C371.41,-194.84 367.31,-184.43 363.81,-175.53"/>
<polygon fill="black" stroke="black" points="367.07,-174.27 360.15,-166.25 360.56,-176.84 367.07,-174.27"/>
</g>
<!-- 24 -->
<g id="node25" class="node">
<title>24</title>
<text text-anchor="middle" x="395.25" y="-151.7" font-family="Times,serif" font-size="14.00">&lt;id&gt;</text>
</g>
<!-- 22&#45;&gt;24 -->
<g id="edge24" class="edge">
<title>22&#45;&gt;24</title>
<path fill="none" stroke="black" d="M378.58,-201.21C381.09,-194.84 385.19,-184.43 388.69,-175.53"/>
<polygon fill="black" stroke="black" points="391.94,-176.84 392.35,-166.25 385.43,-174.27 391.94,-176.84"/>
</g>
<!-- 26 -->
<g id="node27" class="node">
<title>26</title>
<text text-anchor="middle" x="444.25" y="-151.7" font-family="Times,serif" font-size="14.00">&gt; (62)</text>
</g>
<!-- 22&#45;&gt;26 -->
<g id="edge26" class="edge">
<title>22&#45;&gt;26</title>
<path fill="none" stroke="black" d="M384.86,-201.01C395.34,-193.58 413.3,-180.84 426.73,-171.31"/>
<polygon fill="black" stroke="black" points="428.56,-174.3 434.69,-165.66 424.51,-168.59 428.56,-174.3"/>
</g>
<!-- 25 -->
<g id="node26" class="node">
<title>25</title>
<text text-anchor="middle" x="419.25" y="-101.45" font-family="Times,serif" font-size="14.00">html</text>
</g>
<!-- 24&#45;&gt;25 -->
<g id="edge25" class="edge">
<title>24&#45;&gt;25</title>
<path fill="none" stroke="black" d="M398.19,-150.96C401.43,-144.45 406.77,-133.71 411.27,-124.67"/>
<polygon fill="black" stroke="black" points="414.29,-126.46 415.61,-115.94 408.02,-123.34 414.29,-126.46"/>
</g>
</g>
</svg>

</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>As we can see, the input starts with an opening tag, contains some text, and ends with a closing tag. Excellent. This is a structure that we can work with.</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h3 id="Building-the-Fragment-Pool">Building the Fragment Pool<a class="anchor-link" href="#Building-the-Fragment-Pool">&#182;</a></h3><p>We are now ready to implement our first input-structure-aware mutator. Let's initialize the mutator with the dictionary <code>fragments</code> representing the empty fragment pool. It contains a key for each symbol in the grammar (and the empty set as value).</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">FragmentMutator</span><span class="p">(</span><span class="n">Mutator</span><span class="p">):</span>
<span class="w">    </span><span class="sd">&quot;&quot;&quot;Mutate inputs with input fragments from a pool&quot;&quot;&quot;</span>

    <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">parser</span><span class="p">:</span> <span class="n">EarleyParser</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Initialize empty fragment pool and add parser&quot;&quot;&quot;</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">parser</span> <span class="o">=</span> <span class="n">parser</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">fragments</span><span class="p">:</span> <span class="n">Dict</span><span class="p">[</span><span class="nb">str</span><span class="p">,</span> <span class="n">List</span><span class="p">[</span><span class="n">DerivationTree</span><span class="p">]]</span> <span class="o">=</span> \
            <span class="p">{</span><span class="n">k</span><span class="p">:</span> <span class="p">[]</span> <span class="k">for</span> <span class="n">k</span> <span class="ow">in</span> <span class="bp">self</span><span class="o">.</span><span class="n">parser</span><span class="o">.</span><span class="n">cgrammar</span><span class="p">}</span>
        <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="fm">__init__</span><span class="p">()</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>The <code>FragmentMutator</code> adds fragments recursively. A <em>fragment</em> is a subtree in the parse tree and consists of the symbol of the current node and child nodes (i.e., descendant fragments). We can exclude fragments starting with symbols that are tokens, terminals, or not part of the grammar.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn"><a href="Parser.html" class="import" target="_blank">Parser</a></span> <span class="kn">import</span> <span class="n">terminals</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">FragmentMutator</span><span class="p">(</span><span class="n">FragmentMutator</span><span class="p">):</span>
    <span class="k">def</span> <span class="nf">add_fragment</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">fragment</span><span class="p">:</span> <span class="n">DerivationTree</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Recursively adds fragments to the fragment pool&quot;&quot;&quot;</span>
        <span class="p">(</span><span class="n">symbol</span><span class="p">,</span> <span class="n">children</span><span class="p">)</span> <span class="o">=</span> <span class="n">fragment</span>
        <span class="k">if</span> <span class="ow">not</span> <span class="bp">self</span><span class="o">.</span><span class="n">is_excluded</span><span class="p">(</span><span class="n">symbol</span><span class="p">):</span>
            <span class="bp">self</span><span class="o">.</span><span class="n">fragments</span><span class="p">[</span><span class="n">symbol</span><span class="p">]</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">fragment</span><span class="p">)</span>
            <span class="k">assert</span> <span class="n">children</span> <span class="ow">is</span> <span class="ow">not</span> <span class="kc">None</span>
            <span class="k">for</span> <span class="n">subfragment</span> <span class="ow">in</span> <span class="n">children</span><span class="p">:</span>
                <span class="bp">self</span><span class="o">.</span><span class="n">add_fragment</span><span class="p">(</span><span class="n">subfragment</span><span class="p">)</span>

    <span class="k">def</span> <span class="nf">is_excluded</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">symbol</span><span class="p">:</span> <span class="nb">str</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="nb">bool</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Returns true if a fragment starting with a specific</span>
<span class="sd">           symbol and all its decendents can be excluded&quot;&quot;&quot;</span>
        <span class="k">return</span> <span class="p">(</span><span class="n">symbol</span> <span class="ow">not</span> <span class="ow">in</span> <span class="bp">self</span><span class="o">.</span><span class="n">parser</span><span class="o">.</span><span class="n">grammar</span><span class="p">()</span> <span class="ow">or</span>
                <span class="n">symbol</span> <span class="ow">in</span> <span class="bp">self</span><span class="o">.</span><span class="n">parser</span><span class="o">.</span><span class="n">tokens</span> <span class="ow">or</span>
                <span class="n">symbol</span> <span class="ow">in</span> <span class="n">terminals</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">parser</span><span class="o">.</span><span class="n">grammar</span><span class="p">()))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Parsing can take a long time, particularly if there is too much ambiguity during the parsing. In order to maintain the efficiency of mutational fuzzing, we will limit the parsing time to 200ms.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn"><a href="Timeout.html" class="import" target="_blank">Timeout</a></span> <span class="kn">import</span> <span class="n">Timeout</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>The function <code>add_to_fragment_pool()</code> parses a seed (no longer than 200ms) and adds all its fragments to the fragment pool. If the parsing of the <code>seed</code> was successful, the attribute <code>seed.has_structure</code> is set to <code>True</code>. Otherwise, it is set to <code>False</code>.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">SeedWithStructure</span><span class="p">(</span><span class="n">Seed</span><span class="p">):</span>
<span class="w">    </span><span class="sd">&quot;&quot;&quot;Seeds augmented with structure info&quot;&quot;&quot;</span>

    <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">data</span><span class="p">:</span> <span class="nb">str</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
        <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="fm">__init__</span><span class="p">(</span><span class="n">data</span><span class="p">)</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">has_structure</span> <span class="o">=</span> <span class="kc">False</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">structure</span><span class="p">:</span> <span class="n">DerivationTree</span> <span class="o">=</span> <span class="p">(</span><span class="s2">&quot;&lt;empty&gt;&quot;</span><span class="p">,</span> <span class="p">[])</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">FragmentMutator</span><span class="p">(</span><span class="n">FragmentMutator</span><span class="p">):</span>
    <span class="k">def</span> <span class="nf">add_to_fragment_pool</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">seed</span><span class="p">:</span> <span class="n">SeedWithStructure</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Adds all fragments of a seed to the fragment pool&quot;&quot;&quot;</span>
        <span class="k">try</span><span class="p">:</span>  <span class="c1"># only allow quick parsing of 200ms max</span>
            <span class="k">with</span> <span class="n">Timeout</span><span class="p">(</span><span class="mf">0.2</span><span class="p">):</span>
                <span class="n">seed</span><span class="o">.</span><span class="n">structure</span> <span class="o">=</span> <span class="nb">next</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">parser</span><span class="o">.</span><span class="n">parse</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">))</span>
                <span class="bp">self</span><span class="o">.</span><span class="n">add_fragment</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">structure</span><span class="p">)</span>
            <span class="n">seed</span><span class="o">.</span><span class="n">has_structure</span> <span class="o">=</span> <span class="kc">True</span>
        <span class="k">except</span> <span class="p">(</span><span class="ne">SyntaxError</span><span class="p">,</span> <span class="ne">TimeoutError</span><span class="p">):</span>
            <span class="n">seed</span><span class="o">.</span><span class="n">has_structure</span> <span class="o">=</span> <span class="kc">False</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Let's see how <code>FragmentMutator</code> fills the fragment pool for a simple HTML seed input. We initialize mutator with the <code>EarleyParser</code> which itself is initialized with our <code>XML_GRAMMAR</code>.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn"><a href="GrammarFuzzer.html" class="import" target="_blank">GrammarFuzzer</a></span> <span class="kn">import</span> <span class="n">tree_to_string</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">valid_seed</span> <span class="o">=</span> <span class="n">SeedWithStructure</span><span class="p">(</span>
    <span class="s2">&quot;&lt;html&gt;&lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;&lt;body&gt;World&lt;br/&gt;&lt;/body&gt;&lt;/html&gt;&quot;</span><span class="p">)</span>
<span class="n">fragment_mutator</span> <span class="o">=</span> <span class="n">FragmentMutator</span><span class="p">(</span><span class="n">EarleyParser</span><span class="p">(</span><span class="n">XML_GRAMMAR</span><span class="p">,</span> <span class="n">tokens</span><span class="o">=</span><span class="n">XML_TOKENS</span><span class="p">))</span>
<span class="n">fragment_mutator</span><span class="o">.</span><span class="n">add_to_fragment_pool</span><span class="p">(</span><span class="n">valid_seed</span><span class="p">)</span>

<span class="k">for</span> <span class="n">key</span> <span class="ow">in</span> <span class="n">fragment_mutator</span><span class="o">.</span><span class="n">fragments</span><span class="p">:</span>
    <span class="nb">print</span><span class="p">(</span><span class="n">key</span><span class="p">)</span>
    <span class="k">for</span> <span class="n">f</span> <span class="ow">in</span> <span class="n">fragment_mutator</span><span class="o">.</span><span class="n">fragments</span><span class="p">[</span><span class="n">key</span><span class="p">]:</span>
        <span class="nb">print</span><span class="p">(</span><span class="s2">&quot;|-</span><span class="si">%s</span><span class="s2">&quot;</span> <span class="o">%</span> <span class="n">tree_to_string</span><span class="p">(</span><span class="n">f</span><span class="p">))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>&lt;start&gt;
|-&lt;html&gt;&lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;&lt;body&gt;World&lt;br/&gt;&lt;/body&gt;&lt;/html&gt;
&lt;xml-tree&gt;
|-&lt;html&gt;&lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;&lt;body&gt;World&lt;br/&gt;&lt;/body&gt;&lt;/html&gt;
|-&lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;&lt;body&gt;World&lt;br/&gt;&lt;/body&gt;
|-&lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;
|-&lt;title&gt;Hello&lt;/title&gt;
|-Hello
|-&lt;body&gt;World&lt;br/&gt;&lt;/body&gt;
|-World&lt;br/&gt;
|-World
|-&lt;br/&gt;
&lt;xml-open-tag&gt;
|-&lt;html&gt;
|-&lt;head&gt;
|-&lt;title&gt;
|-&lt;body&gt;
&lt;xml-openclose-tag&gt;
|-&lt;br/&gt;
&lt;xml-close-tag&gt;
|-&lt;/title&gt;
|-&lt;/head&gt;
|-&lt;/body&gt;
|-&lt;/html&gt;
&lt;xml-attribute&gt;
&lt;id&gt;
&lt;text&gt;
&lt;letter&gt;
&lt;letter_space&gt;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>For many symbols in the grammar, we have collected a number of fragments. There are several open and closing tags and several interesting fragments starting with the <code>xml-tree</code> symbol.</p>
<p><strong><em>Summary</em></strong>. For each interesting symbol in the grammar, the <code>FragmentMutator</code> has a set of fragments. These fragments are extracted by first parsing the inputs to be mutated.</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h3 id="Fragment-Based-Mutation">Fragment-Based Mutation<a class="anchor-link" href="#Fragment-Based-Mutation">&#182;</a></h3><p>We can use the fragments in the fragment pool to generate new inputs. Every seed that is being mutated is disassembled into fragments, and memoized – i.e., disassembled only the first time around.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">FragmentMutator</span><span class="p">(</span><span class="n">FragmentMutator</span><span class="p">):</span>
    <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">parser</span><span class="p">:</span> <span class="n">EarleyParser</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Initialize mutators&quot;&quot;&quot;</span>
        <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="fm">__init__</span><span class="p">(</span><span class="n">parser</span><span class="p">)</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">seen_seeds</span><span class="p">:</span> <span class="n">List</span><span class="p">[</span><span class="n">SeedWithStructure</span><span class="p">]</span> <span class="o">=</span> <span class="p">[]</span>

    <span class="k">def</span> <span class="nf">mutate</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">seed</span><span class="p">:</span> <span class="n">SeedWithStructure</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="n">SeedWithStructure</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Implement structure-aware mutation. Memoize seeds.&quot;&quot;&quot;</span>
        <span class="k">if</span> <span class="n">seed</span> <span class="ow">not</span> <span class="ow">in</span> <span class="bp">self</span><span class="o">.</span><span class="n">seen_seeds</span><span class="p">:</span>
            <span class="bp">self</span><span class="o">.</span><span class="n">seen_seeds</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">seed</span><span class="p">)</span>
            <span class="bp">self</span><span class="o">.</span><span class="n">add_to_fragment_pool</span><span class="p">(</span><span class="n">seed</span><span class="p">)</span>

        <span class="k">return</span> <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="n">mutate</span><span class="p">(</span><span class="n">seed</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Our first structural mutation operator is <code>swap_fragments()</code>, which choses a random fragment in the given seed and substitutes it with a random fragment from the pool. We make sure that both fragments start with the same symbol. For instance, we may swap a closing tag in the seed HTML by another closing tag from the fragment pool.</p>
<p>In order to choose a random fragment, the mutator counts all fragments (<code>n_count</code>) below the root fragment associated with the start-symbol.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">FragmentMutator</span><span class="p">(</span><span class="n">FragmentMutator</span><span class="p">):</span>
    <span class="k">def</span> <span class="nf">count_nodes</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">fragment</span><span class="p">:</span> <span class="n">DerivationTree</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="nb">int</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Returns the number of nodes in the fragment&quot;&quot;&quot;</span>
        <span class="n">symbol</span><span class="p">,</span> <span class="n">children</span> <span class="o">=</span> <span class="n">fragment</span>
        <span class="k">if</span> <span class="bp">self</span><span class="o">.</span><span class="n">is_excluded</span><span class="p">(</span><span class="n">symbol</span><span class="p">):</span>
            <span class="k">return</span> <span class="mi">0</span>

        <span class="k">assert</span> <span class="n">children</span> <span class="ow">is</span> <span class="ow">not</span> <span class="kc">None</span>
        <span class="k">return</span> <span class="mi">1</span> <span class="o">+</span> <span class="nb">sum</span><span class="p">(</span><span class="nb">map</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">count_nodes</span><span class="p">,</span> <span class="n">children</span><span class="p">))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>In order to swap the chosen fragment – identified using the "global" variable <code>self.to_swap</code> – the seed's parse tree is traversed recursively.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">FragmentMutator</span><span class="p">(</span><span class="n">FragmentMutator</span><span class="p">):</span>
    <span class="k">def</span> <span class="nf">recursive_swap</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">fragment</span><span class="p">:</span> <span class="n">DerivationTree</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="n">DerivationTree</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Recursively finds the fragment to swap.&quot;&quot;&quot;</span>
        <span class="n">symbol</span><span class="p">,</span> <span class="n">children</span> <span class="o">=</span> <span class="n">fragment</span>
        <span class="k">if</span> <span class="bp">self</span><span class="o">.</span><span class="n">is_excluded</span><span class="p">(</span><span class="n">symbol</span><span class="p">):</span>
            <span class="k">return</span> <span class="n">symbol</span><span class="p">,</span> <span class="n">children</span>

        <span class="bp">self</span><span class="o">.</span><span class="n">to_swap</span> <span class="o">-=</span> <span class="mi">1</span>
        <span class="k">if</span> <span class="bp">self</span><span class="o">.</span><span class="n">to_swap</span> <span class="o">==</span> <span class="mi">0</span><span class="p">:</span> 
            <span class="k">return</span> <span class="n">random</span><span class="o">.</span><span class="n">choice</span><span class="p">(</span><span class="nb">list</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">fragments</span><span class="p">[</span><span class="n">symbol</span><span class="p">]))</span>

        <span class="k">assert</span> <span class="n">children</span> <span class="ow">is</span> <span class="ow">not</span> <span class="kc">None</span>
        <span class="k">return</span> <span class="n">symbol</span><span class="p">,</span> <span class="nb">list</span><span class="p">(</span><span class="nb">map</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">recursive_swap</span><span class="p">,</span> <span class="n">children</span><span class="p">))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Our structural mutator chooses a random number between 2 (i.e., excluding the <code>start</code> symbol) and the total number of fragments (<code>n_count</code>) and uses the recursive swapping to generate the new fragment. The new fragment is serialized as string and returned as new seed.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">FragmentMutator</span><span class="p">(</span><span class="n">FragmentMutator</span><span class="p">):</span>
    <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">parser</span><span class="p">:</span> <span class="n">EarleyParser</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
        <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="fm">__init__</span><span class="p">(</span><span class="n">parser</span><span class="p">)</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">mutators</span> <span class="o">=</span> <span class="p">[</span><span class="bp">self</span><span class="o">.</span><span class="n">swap_fragment</span><span class="p">]</span>

    <span class="k">def</span> <span class="nf">swap_fragment</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">seed</span><span class="p">:</span> <span class="n">SeedWithStructure</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="n">SeedWithStructure</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Substitutes a random fragment with another with the same symbol&quot;&quot;&quot;</span>
        <span class="k">if</span> <span class="n">seed</span><span class="o">.</span><span class="n">has_structure</span><span class="p">:</span>
            <span class="n">n_nodes</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">count_nodes</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">structure</span><span class="p">)</span>
            <span class="bp">self</span><span class="o">.</span><span class="n">to_swap</span> <span class="o">=</span> <span class="n">random</span><span class="o">.</span><span class="n">randint</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="n">n_nodes</span><span class="p">)</span>
            <span class="n">new_structure</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">recursive_swap</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">structure</span><span class="p">)</span>

            <span class="n">new_seed</span> <span class="o">=</span> <span class="n">SeedWithStructure</span><span class="p">(</span><span class="n">tree_to_string</span><span class="p">(</span><span class="n">new_structure</span><span class="p">))</span>
            <span class="n">new_seed</span><span class="o">.</span><span class="n">has_structure</span> <span class="o">=</span> <span class="kc">True</span>
            <span class="n">new_seed</span><span class="o">.</span><span class="n">structure</span> <span class="o">=</span> <span class="n">new_structure</span>
            <span class="k">return</span> <span class="n">new_seed</span>

        <span class="k">return</span> <span class="n">seed</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">valid_seed</span> <span class="o">=</span> <span class="n">SeedWithStructure</span><span class="p">(</span>
    <span class="s2">&quot;&lt;html&gt;&lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;&lt;body&gt;World&lt;br/&gt;&lt;/body&gt;&lt;/html&gt;&quot;</span><span class="p">)</span>
<span class="n">lf_mutator</span> <span class="o">=</span> <span class="n">FragmentMutator</span><span class="p">(</span><span class="n">parser</span><span class="p">)</span>
<span class="nb">print</span><span class="p">(</span><span class="n">valid_seed</span><span class="p">)</span>
<span class="n">lf_mutator</span><span class="o">.</span><span class="n">mutate</span><span class="p">(</span><span class="n">valid_seed</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>&lt;html&gt;&lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;&lt;body&gt;World&lt;br/&gt;&lt;/body&gt;&lt;/html&gt;
</pre>
</div>

</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&lt;html&gt;&lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;&lt;body&gt;World&lt;br/&gt;&lt;/body&gt;&lt;/head&gt;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>As we can see, one fragment has been substituted by another.</p>
<p>We can use a similar recursive traversal to <em>remove</em> a random fragment.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">FragmentMutator</span><span class="p">(</span><span class="n">FragmentMutator</span><span class="p">):</span>
    <span class="k">def</span> <span class="nf">recursive_delete</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">fragment</span><span class="p">:</span> <span class="n">DerivationTree</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="n">DerivationTree</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Recursively finds the fragment to delete&quot;&quot;&quot;</span>
        <span class="n">symbol</span><span class="p">,</span> <span class="n">children</span> <span class="o">=</span> <span class="n">fragment</span>
        <span class="k">if</span> <span class="bp">self</span><span class="o">.</span><span class="n">is_excluded</span><span class="p">(</span><span class="n">symbol</span><span class="p">):</span>
            <span class="k">return</span> <span class="n">symbol</span><span class="p">,</span> <span class="n">children</span>

        <span class="bp">self</span><span class="o">.</span><span class="n">to_delete</span> <span class="o">-=</span> <span class="mi">1</span>
        <span class="k">if</span> <span class="bp">self</span><span class="o">.</span><span class="n">to_delete</span> <span class="o">==</span> <span class="mi">0</span><span class="p">:</span>
            <span class="k">return</span> <span class="n">symbol</span><span class="p">,</span> <span class="p">[]</span>

        <span class="k">assert</span> <span class="n">children</span> <span class="ow">is</span> <span class="ow">not</span> <span class="kc">None</span>
        <span class="k">return</span> <span class="n">symbol</span><span class="p">,</span> <span class="nb">list</span><span class="p">(</span><span class="nb">map</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">recursive_delete</span><span class="p">,</span> <span class="n">children</span><span class="p">))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>We should also define the corresponding structural deletion operator, as well.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">FragmentMutator</span><span class="p">(</span><span class="n">FragmentMutator</span><span class="p">):</span>
    <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">parser</span><span class="p">):</span>
        <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="fm">__init__</span><span class="p">(</span><span class="n">parser</span><span class="p">)</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">mutators</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">delete_fragment</span><span class="p">)</span>

    <span class="k">def</span> <span class="nf">delete_fragment</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">seed</span><span class="p">:</span> <span class="n">SeedWithStructure</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="n">SeedWithStructure</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Delete a random fragment&quot;&quot;&quot;</span>
        <span class="k">if</span> <span class="n">seed</span><span class="o">.</span><span class="n">has_structure</span><span class="p">:</span>
            <span class="n">n_nodes</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">count_nodes</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">structure</span><span class="p">)</span>
            <span class="bp">self</span><span class="o">.</span><span class="n">to_delete</span> <span class="o">=</span> <span class="n">random</span><span class="o">.</span><span class="n">randint</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="n">n_nodes</span><span class="p">)</span>
            <span class="n">new_structure</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">recursive_delete</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">structure</span><span class="p">)</span>

            <span class="n">new_seed</span> <span class="o">=</span> <span class="n">SeedWithStructure</span><span class="p">(</span><span class="n">tree_to_string</span><span class="p">(</span><span class="n">new_structure</span><span class="p">))</span>
            <span class="n">new_seed</span><span class="o">.</span><span class="n">has_structure</span> <span class="o">=</span> <span class="kc">True</span>
            <span class="n">new_seed</span><span class="o">.</span><span class="n">structure</span> <span class="o">=</span> <span class="n">new_structure</span>
            <span class="c1"># do not return an empty new_seed</span>
            <span class="k">if</span> <span class="ow">not</span> <span class="n">new_seed</span><span class="o">.</span><span class="n">data</span><span class="p">:</span>
                <span class="k">return</span> <span class="n">seed</span>
            <span class="k">else</span><span class="p">:</span>
                <span class="k">return</span> <span class="n">new_seed</span>

        <span class="k">return</span> <span class="n">seed</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p><strong><em>Summary</em></strong>. We now have all ingredients for structure-aware fuzzing. Our mutator disassembles all seeds into fragments, which are then added to the fragment pool. Our mutator swaps random fragments in a given seed with fragments of the same type. And our mutator deletes random fragments in a given seed. This allows maintaining a high degree of validity for the generated inputs w.r.t. the given grammar.</p>
<p><strong><em>Try it</em></strong>. Try adding other structural mutation operators. How would an <em>add-operator</em> know the position in a given seed file, where it is okay to add a fragment starting with a certain symbol?</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h3 id="Fragment-Based-Fuzzing">Fragment-Based Fuzzing<a class="anchor-link" href="#Fragment-Based-Fuzzing">&#182;</a></h3><p>We can now define an input-structure aware fuzzer as pioneered in LangFuzz. To implement LangFuzz, we modify our <a href="GreyboxFuzzer.html#Blackbox-Mutation-based-Fuzzer">blackbox mutational fuzzer</a> to stack up to four structural mutations.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">LangFuzzer</span><span class="p">(</span><span class="n">AdvancedMutationFuzzer</span><span class="p">):</span>
<span class="w">    </span><span class="sd">&quot;&quot;&quot;Blackbox fuzzer mutating input fragments. Roughly based on `LangFuzz`.&quot;&quot;&quot;</span>

    <span class="k">def</span> <span class="nf">create_candidate</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="n">Seed</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Returns an input generated by fuzzing a seed in the population&quot;&quot;&quot;</span>
        <span class="n">candidate</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">schedule</span><span class="o">.</span><span class="n">choose</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">population</span><span class="p">)</span>
        <span class="n">trials</span> <span class="o">=</span> <span class="n">random</span><span class="o">.</span><span class="n">randint</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">4</span><span class="p">)</span>
        <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="n">trials</span><span class="p">):</span>
            <span class="n">candidate</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">mutator</span><span class="o">.</span><span class="n">mutate</span><span class="p">(</span><span class="n">candidate</span><span class="p">)</span>

        <span class="k">return</span> <span class="n">candidate</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Okay, let's take our first input-structure aware fuzzer for a spin. Being careful, we set n=300 for now.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">n</span> <span class="o">=</span> <span class="mi">300</span>
<span class="n">runner</span> <span class="o">=</span> <span class="n">FunctionCoverageRunner</span><span class="p">(</span><span class="n">my_parser</span><span class="p">)</span>
<span class="n">mutator</span> <span class="o">=</span> <span class="n">FragmentMutator</span><span class="p">(</span><span class="n">EarleyParser</span><span class="p">(</span><span class="n">XML_GRAMMAR</span><span class="p">,</span> <span class="n">tokens</span><span class="o">=</span><span class="n">XML_TOKENS</span><span class="p">))</span>
<span class="n">schedule</span> <span class="o">=</span> <span class="n">PowerSchedule</span><span class="p">()</span>

<span class="n">lang_fuzzer</span> <span class="o">=</span> <span class="n">LangFuzzer</span><span class="p">([</span><span class="n">valid_seed</span><span class="o">.</span><span class="n">data</span><span class="p">],</span> <span class="n">mutator</span><span class="p">,</span> <span class="n">schedule</span><span class="p">)</span>

<span class="n">start</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>
<span class="n">lang_fuzzer</span><span class="o">.</span><span class="n">runs</span><span class="p">(</span><span class="n">runner</span><span class="p">,</span> <span class="n">trials</span><span class="o">=</span><span class="n">n</span><span class="p">)</span>
<span class="n">end</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>

<span class="s2">&quot;It took LangFuzzer </span><span class="si">%0.2f</span><span class="s2"> seconds to generate and execute </span><span class="si">%d</span><span class="s2"> inputs.&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">end</span> <span class="o">-</span> <span class="n">start</span><span class="p">,</span> <span class="n">n</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;It took LangFuzzer 16.82 seconds to generate and execute 300 inputs.&#39;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>We observe that structural mutation is <em>sooo very slow</em>. This is despite our time budget of 200ms for parsing. In contrast, our blackbox fuzzer alone can generate about 10k inputs per second!</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">runner</span> <span class="o">=</span> <span class="n">FunctionCoverageRunner</span><span class="p">(</span><span class="n">my_parser</span><span class="p">)</span>
<span class="n">mutator</span> <span class="o">=</span> <span class="n">Mutator</span><span class="p">()</span>
<span class="n">schedule</span> <span class="o">=</span> <span class="n">PowerSchedule</span><span class="p">()</span>

<span class="n">blackFuzzer</span> <span class="o">=</span> <span class="n">AdvancedMutationFuzzer</span><span class="p">([</span><span class="n">valid_seed</span><span class="o">.</span><span class="n">data</span><span class="p">],</span> <span class="n">mutator</span><span class="p">,</span> <span class="n">schedule</span><span class="p">)</span>

<span class="n">start</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>
<span class="n">blackFuzzer</span><span class="o">.</span><span class="n">runs</span><span class="p">(</span><span class="n">runner</span><span class="p">,</span> <span class="n">trials</span><span class="o">=</span><span class="n">n</span><span class="p">)</span>
<span class="n">end</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>

<span class="s2">&quot;It took a blackbox fuzzer </span><span class="si">%0.2f</span><span class="s2"> seconds to generate and execute </span><span class="si">%d</span><span class="s2"> inputs.&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">end</span> <span class="o">-</span> <span class="n">start</span><span class="p">,</span> <span class="n">n</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;It took a blackbox fuzzer 0.10 seconds to generate and execute 300 inputs.&#39;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Indeed, our blackbox fuzzer is done in the blink of an eye.</p>
<p><strong><em>Try it</em></strong>. We can deal with this overhead using <a href="https://arxiv.org/abs/1811.09447">deferred parsing</a>. Instead of wasting time in the beginning of the fuzzing campaign when a byte-level mutator would make efficient progress, deferred parsing suggests to invest time in structural mutation only later in the fuzzing campaign when it becomes viable.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">blackbox_coverage</span> <span class="o">=</span> <span class="nb">len</span><span class="p">(</span><span class="n">runner</span><span class="o">.</span><span class="n">coverage</span><span class="p">())</span>
<span class="s2">&quot;During this fuzzing campaign, the blackbox fuzzer covered </span><span class="si">%d</span><span class="s2"> statements.&quot;</span> <span class="o">%</span> <span class="n">blackbox_coverage</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;During this fuzzing campaign, the blackbox fuzzer covered 105 statements.&#39;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Let's print some stats for our fuzzing campaigns. Since we'll need to print stats more often later, we should wrap this into a function. In order to measure coverage, we import the <a href="Coverage.html#Coverage-of-Basic-Fuzzing">population_coverage</a> function. It takes a set of inputs and a Python function, executes the inputs on that function and collects coverage information. Specifically, it returns a tuple <code>(all_coverage, cumulative_coverage)</code> where <code>all_coverage</code> is the set of statements covered by all inputs, and <code>cumulative_coverage</code> is the number of statements covered as the number of executed inputs increases. We are just interested in the latter to plot coverage over time.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">from</span> <span class="nn"><a href="Coverage.html" class="import" target="_blank">Coverage</a></span> <span class="kn">import</span> <span class="n">population_coverage</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">print_stats</span><span class="p">(</span><span class="n">fuzzer</span><span class="p">,</span> <span class="n">parser</span><span class="p">:</span> <span class="n">Parser</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
    <span class="n">coverage</span><span class="p">,</span> <span class="n">_</span> <span class="o">=</span> <span class="n">population_coverage</span><span class="p">(</span><span class="n">fuzzer</span><span class="o">.</span><span class="n">inputs</span><span class="p">,</span> <span class="n">my_parser</span><span class="p">)</span>

    <span class="n">has_structure</span> <span class="o">=</span> <span class="mi">0</span>
    <span class="k">for</span> <span class="n">seed</span> <span class="ow">in</span> <span class="n">fuzzer</span><span class="o">.</span><span class="n">inputs</span><span class="p">:</span>
        <span class="c1"># reuse memoized information</span>
        <span class="k">if</span> <span class="nb">hasattr</span><span class="p">(</span><span class="n">seed</span><span class="p">,</span> <span class="s2">&quot;has_structure&quot;</span><span class="p">):</span>
            <span class="k">if</span> <span class="n">seed</span><span class="o">.</span><span class="n">has_structure</span><span class="p">:</span> 
                <span class="n">has_structure</span> <span class="o">+=</span> <span class="mi">1</span>
        <span class="k">else</span><span class="p">:</span>
            <span class="k">if</span> <span class="nb">isinstance</span><span class="p">(</span><span class="n">seed</span><span class="p">,</span> <span class="nb">str</span><span class="p">):</span>
                <span class="n">seed</span> <span class="o">=</span> <span class="n">Seed</span><span class="p">(</span><span class="n">seed</span><span class="p">)</span>
            <span class="k">try</span><span class="p">:</span>
                <span class="k">with</span> <span class="n">Timeout</span><span class="p">(</span><span class="mf">0.2</span><span class="p">):</span>
                    <span class="nb">next</span><span class="p">(</span><span class="n">parser</span><span class="o">.</span><span class="n">parse</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">))</span>
                <span class="n">has_structure</span> <span class="o">+=</span> <span class="mi">1</span>
            <span class="k">except</span> <span class="p">(</span><span class="ne">SyntaxError</span><span class="p">,</span> <span class="ne">TimeoutError</span><span class="p">):</span>
                <span class="k">pass</span>

    <span class="nb">print</span><span class="p">(</span><span class="s2">&quot;From the </span><span class="si">%d</span><span class="s2"> generated inputs, </span><span class="si">%d</span><span class="s2"> (</span><span class="si">%0.2f%%</span><span class="s2">) can be parsed.</span><span class="se">\n</span><span class="s2">&quot;</span>
          <span class="s2">&quot;In total, </span><span class="si">%d</span><span class="s2"> statements are covered.&quot;</span> <span class="o">%</span> <span class="p">(</span>
            <span class="nb">len</span><span class="p">(</span><span class="n">fuzzer</span><span class="o">.</span><span class="n">inputs</span><span class="p">),</span>
            <span class="n">has_structure</span><span class="p">,</span>
            <span class="mi">100</span> <span class="o">*</span> <span class="n">has_structure</span> <span class="o">/</span> <span class="nb">len</span><span class="p">(</span><span class="n">fuzzer</span><span class="o">.</span><span class="n">inputs</span><span class="p">),</span>
            <span class="nb">len</span><span class="p">(</span><span class="n">coverage</span><span class="p">)))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>For LangFuzzer, let's see how many of the inputs generated by LangFuzz are valid (i.e., parsable) and how many statements were covered.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">print_stats</span><span class="p">(</span><span class="n">lang_fuzzer</span><span class="p">,</span> <span class="n">EarleyParser</span><span class="p">(</span><span class="n">XML_GRAMMAR</span><span class="p">,</span> <span class="n">tokens</span><span class="o">=</span><span class="n">XML_TOKENS</span><span class="p">))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>From the 300 generated inputs, 169 (56.33%) can be parsed.
In total, 91 statements are covered.
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>What are the stats for the mutational fuzzer that uses only byte-level mutation (and no grammars)?</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">print_stats</span><span class="p">(</span><span class="n">blackFuzzer</span><span class="p">,</span> <span class="n">EarleyParser</span><span class="p">(</span><span class="n">XML_GRAMMAR</span><span class="p">,</span> <span class="n">tokens</span><span class="o">=</span><span class="n">XML_TOKENS</span><span class="p">))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>From the 300 generated inputs, 31 (10.33%) can be parsed.
In total, 149 statements are covered.
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p><strong><em>Summary</em></strong>. Our fragment-level blackbox fuzzer (LangFuzzer) generates <em>more valid inputs</em> but achieves <em>less code coverage</em> than a fuzzer with our byte-level fuzzer. So, there is some value in generating inputs that do not stick to the provided grammar.</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h3 id="Integration-with-Greybox-Fuzzing">Integration with Greybox Fuzzing<a class="anchor-link" href="#Integration-with-Greybox-Fuzzing">&#182;</a></h3><p>In the following we integrate fragment-level blackbox fuzzing (LangFuzz-style) with <a href="GreyboxFuzzer.html#Greybox-Mutation-based-Fuzzer">byte-level greybox fuzzing</a> (AFL-style). The additional coverage-feedback might allow us to increase code coverage more quickly.</p>
<p>A <a href="GreyboxFuzzer.html#Greybox-Mutation-based-Fuzzer">greybox fuzzer</a> adds to the seed population all generated inputs which increase code coverage. Inputs are generated in two stages, stacking up to four structural mutations and up to 32 byte-level mutations.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">GreyboxGrammarFuzzer</span><span class="p">(</span><span class="n">GreyboxFuzzer</span><span class="p">):</span>
<span class="w">    </span><span class="sd">&quot;&quot;&quot;Greybox fuzzer using grammars.&quot;&quot;&quot;</span>

    <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">seeds</span><span class="p">:</span> <span class="n">List</span><span class="p">[</span><span class="nb">str</span><span class="p">],</span>
                 <span class="n">byte_mutator</span><span class="p">:</span> <span class="n">Mutator</span><span class="p">,</span> <span class="n">tree_mutator</span><span class="p">:</span> <span class="n">FragmentMutator</span><span class="p">,</span>
                 <span class="n">schedule</span><span class="p">:</span> <span class="n">PowerSchedule</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Constructor.</span>
<span class="sd">        `seeds` - set of inputs to mutate.</span>
<span class="sd">        `byte_mutator` - a byte-level mutator.</span>
<span class="sd">        `tree_mutator` = a tree-level mutator.</span>
<span class="sd">        `schedule` - a power schedule.</span>
<span class="sd">        &quot;&quot;&quot;</span>
        <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="fm">__init__</span><span class="p">(</span><span class="n">seeds</span><span class="p">,</span> <span class="n">byte_mutator</span><span class="p">,</span> <span class="n">schedule</span><span class="p">)</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">tree_mutator</span> <span class="o">=</span> <span class="n">tree_mutator</span>

    <span class="k">def</span> <span class="nf">create_candidate</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="nb">str</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Returns an input generated by structural mutation </span>
<span class="sd">           of a seed in the population&quot;&quot;&quot;</span>
        <span class="n">seed</span> <span class="o">=</span> <span class="n">cast</span><span class="p">(</span><span class="n">SeedWithStructure</span><span class="p">,</span> <span class="bp">self</span><span class="o">.</span><span class="n">schedule</span><span class="o">.</span><span class="n">choose</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">population</span><span class="p">))</span>

        <span class="c1"># Structural mutation</span>
        <span class="n">trials</span> <span class="o">=</span> <span class="n">random</span><span class="o">.</span><span class="n">randint</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">4</span><span class="p">)</span>
        <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="n">trials</span><span class="p">):</span>
            <span class="n">seed</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">tree_mutator</span><span class="o">.</span><span class="n">mutate</span><span class="p">(</span><span class="n">seed</span><span class="p">)</span>

        <span class="c1"># Byte-level mutation</span>
        <span class="n">candidate</span> <span class="o">=</span> <span class="n">seed</span><span class="o">.</span><span class="n">data</span>
        <span class="k">if</span> <span class="n">trials</span> <span class="o">==</span> <span class="mi">0</span> <span class="ow">or</span> <span class="ow">not</span> <span class="n">seed</span><span class="o">.</span><span class="n">has_structure</span> <span class="ow">or</span> <span class="n">random</span><span class="o">.</span><span class="n">randint</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">)</span> <span class="o">==</span> <span class="mi">1</span><span class="p">:</span>
            <span class="n">dumb_trials</span> <span class="o">=</span> <span class="nb">min</span><span class="p">(</span><span class="nb">len</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">),</span> <span class="mi">1</span> <span class="o">&lt;&lt;</span> <span class="n">random</span><span class="o">.</span><span class="n">randint</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">))</span>
            <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="n">dumb_trials</span><span class="p">):</span>
                <span class="n">candidate</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">mutator</span><span class="o">.</span><span class="n">mutate</span><span class="p">(</span><span class="n">candidate</span><span class="p">)</span>

        <span class="k">return</span> <span class="n">candidate</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Let's run our integrated fuzzer with the <a href="GreyboxFuzzer.html#Mutator-and-Seed">standard byte-level mutator</a> and our <a href="#Fragment-based-Mutation">fragment-based structural mutator</a> that was introduced above.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">runner</span> <span class="o">=</span> <span class="n">FunctionCoverageRunner</span><span class="p">(</span><span class="n">my_parser</span><span class="p">)</span>
<span class="n">byte_mutator</span> <span class="o">=</span> <span class="n">Mutator</span><span class="p">()</span>
<span class="n">tree_mutator</span> <span class="o">=</span> <span class="n">FragmentMutator</span><span class="p">(</span><span class="n">EarleyParser</span><span class="p">(</span><span class="n">XML_GRAMMAR</span><span class="p">,</span> <span class="n">tokens</span><span class="o">=</span><span class="n">XML_TOKENS</span><span class="p">))</span>
<span class="n">schedule</span> <span class="o">=</span> <span class="n">PowerSchedule</span><span class="p">()</span>

<span class="n">gg_fuzzer</span> <span class="o">=</span> <span class="n">GreyboxGrammarFuzzer</span><span class="p">([</span><span class="n">valid_seed</span><span class="o">.</span><span class="n">data</span><span class="p">],</span> <span class="n">byte_mutator</span><span class="p">,</span> <span class="n">tree_mutator</span><span class="p">,</span> <span class="n">schedule</span><span class="p">)</span>

<span class="n">start</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>
<span class="n">gg_fuzzer</span><span class="o">.</span><span class="n">runs</span><span class="p">(</span><span class="n">runner</span><span class="p">,</span> <span class="n">trials</span><span class="o">=</span><span class="n">n</span><span class="p">)</span>
<span class="n">end</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>

<span class="s2">&quot;It took the greybox grammar fuzzer </span><span class="si">%0.2f</span><span class="s2"> seconds to generate and execute </span><span class="si">%d</span><span class="s2"> inputs.&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">end</span> <span class="o">-</span> <span class="n">start</span><span class="p">,</span> <span class="n">n</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;It took the greybox grammar fuzzer 1.56 seconds to generate and execute 300 inputs.&#39;
</pre>
</div>

</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">print_stats</span><span class="p">(</span><span class="n">gg_fuzzer</span><span class="p">,</span> <span class="n">EarleyParser</span><span class="p">(</span><span class="n">XML_GRAMMAR</span><span class="p">,</span> <span class="n">tokens</span><span class="o">=</span><span class="n">XML_TOKENS</span><span class="p">))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>From the 300 generated inputs, 2 (0.67%) can be parsed.
In total, 169 statements are covered.
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p><strong><em>Summary</em></strong>. Our structural greybox fuzzer</p>
<ul>
<li>runs faster than the fragment-based LangFuzzer,</li>
<li>achieves more coverage than both the fragment-based LangFuzzer and the vanilla blackbox mutational fuzzer, and</li>
<li>generates fewer valid inputs than even the vanilla blackbox mutational fuzzer.</li>
</ul>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h2 id="Fuzzing-with-Input-Regions">Fuzzing with Input Regions<a class="anchor-link" href="#Fuzzing-with-Input-Regions">&#182;</a></h2><p>In the previous section, we have seen that most inputs that are added as seeds are <em>invalid</em> w.r.t. our given grammar. Yet, in order to apply our fragment-based mutators, we need it to parse the seed successfully. Otherwise, the entire fragment-based approach becomes useless.  The question arises: <em>How can we derive structure from (invalid) seeds that cannot be parsed successfully?</em></p>
<p>To this end, we introduce the idea of <em>region-based mutation</em>, first explored with the <a href="https://github.com/aflsmart/aflsmart">AFLSmart</a> structural greybox fuzzer [<a href="https://arxiv.org/abs/1811.09447">Van-Thuan Pham <em>et al</em>, 2018</a>]. AFLSmart implements byte-level, fragment-based, and region-based mutation as well as validity-based power schedules. We define <em>region-based mutators</em>, where a <em>region</em> is a consecutive sequence of bytes in the input that can be associated with a symbol in the grammar.</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>The basic idea of fuzzing with input regions is shown in the following diagram. After <em>parsing</em> an input (into a derivation tree), we can identify <em>regions</em> associated with specific subtrees of the derivation tree. These regions can then be deleted or swapped.</p>
<p><img src="PICS/GreyboxGrammarFuzzer-Regions.gif"></p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Such regions can also be determined even if the input is incomplete or invalid, allowing for robust parsing.</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h3 id="Determining-Symbol-Regions">Determining Symbol Regions<a class="anchor-link" href="#Determining-Symbol-Regions">&#182;</a></h3><p>How can we obtain regions for a given input? The function <code>chart_parse()</code> of the <a href="Parser.html#The-Parsing-Algorithm">Earley parser</a> produces a <em>parse table</em> for a string. For each letter in the string, this table gives the potential symbol and a <em>region</em> of neighboring letters that might belong to the same symbol.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">invalid_seed</span> <span class="o">=</span> <span class="n">Seed</span><span class="p">(</span><span class="s2">&quot;&lt;html&gt;&lt;body&gt;&lt;i&gt;World&lt;/i&gt;&lt;br/&gt;&gt;/body&gt;&lt;/html&gt;&quot;</span><span class="p">)</span>
<span class="n">parser</span> <span class="o">=</span> <span class="n">EarleyParser</span><span class="p">(</span><span class="n">XML_GRAMMAR</span><span class="p">,</span> <span class="n">tokens</span><span class="o">=</span><span class="n">XML_TOKENS</span><span class="p">)</span>
<span class="n">table</span> <span class="o">=</span> <span class="n">parser</span><span class="o">.</span><span class="n">chart_parse</span><span class="p">(</span><span class="n">invalid_seed</span><span class="o">.</span><span class="n">data</span><span class="p">,</span> <span class="n">parser</span><span class="o">.</span><span class="n">start_symbol</span><span class="p">())</span>
<span class="k">for</span> <span class="n">column</span> <span class="ow">in</span> <span class="n">table</span><span class="p">:</span>
    <span class="nb">print</span><span class="p">(</span><span class="n">column</span><span class="p">)</span>
    <span class="nb">print</span><span class="p">(</span><span class="s2">&quot;---&quot;</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>None chart[0]

---
&lt; chart[1]

---
h chart[2]
&lt;letter&gt;:= h |(1,2)
&lt;id&gt;:= &lt;letter&gt; |(1,2)
---
t chart[3]
&lt;letter&gt;:= t |(2,3)
&lt;id&gt;:= &lt;id&gt; &lt;letter&gt; |(1,3)
---
m chart[4]
&lt;letter&gt;:= m |(3,4)
&lt;id&gt;:= &lt;id&gt; &lt;letter&gt; |(1,4)
---
l chart[5]
&lt;letter&gt;:= l |(4,5)
&lt;id&gt;:= &lt;id&gt; &lt;letter&gt; |(1,5)
---
&gt; chart[6]
&lt;xml-open-tag&gt;:= &lt; &lt;id&gt; &gt; |(0,6)
---
&lt; chart[7]

---
b chart[8]
&lt;letter&gt;:= b |(7,8)
&lt;id&gt;:= &lt;letter&gt; |(7,8)
---
o chart[9]
&lt;letter&gt;:= o |(8,9)
&lt;id&gt;:= &lt;id&gt; &lt;letter&gt; |(7,9)
---
d chart[10]
&lt;letter&gt;:= d |(9,10)
&lt;id&gt;:= &lt;id&gt; &lt;letter&gt; |(7,10)
---
y chart[11]
&lt;letter&gt;:= y |(10,11)
&lt;id&gt;:= &lt;id&gt; &lt;letter&gt; |(7,11)
---
&gt; chart[12]
&lt;xml-open-tag&gt;:= &lt; &lt;id&gt; &gt; |(6,12)
---
&lt; chart[13]

---
i chart[14]
&lt;letter&gt;:= i |(13,14)
&lt;id&gt;:= &lt;letter&gt; |(13,14)
---
&gt; chart[15]
&lt;xml-open-tag&gt;:= &lt; &lt;id&gt; &gt; |(12,15)
---
W chart[16]
&lt;letter_space&gt;:= W |(15,16)
&lt;text&gt;:= &lt;letter_space&gt; |(15,16)
&lt;xml-tree&gt;:= &lt;text&gt; |(15,16)
---
o chart[17]
&lt;letter_space&gt;:= o |(16,17)
&lt;text&gt;:= &lt;text&gt; &lt;letter_space&gt; |(15,17)
&lt;text&gt;:= &lt;letter_space&gt; |(16,17)
&lt;xml-tree&gt;:= &lt;text&gt; |(15,17)
&lt;xml-tree&gt;:= &lt;text&gt; |(16,17)
&lt;xml-tree&gt;:= &lt;xml-tree&gt; &lt;xml-tree&gt; |(15,17)
---
r chart[18]
&lt;letter_space&gt;:= r |(17,18)
&lt;text&gt;:= &lt;text&gt; &lt;letter_space&gt; |(15,18)
&lt;text&gt;:= &lt;text&gt; &lt;letter_space&gt; |(16,18)
&lt;text&gt;:= &lt;letter_space&gt; |(17,18)
&lt;xml-tree&gt;:= &lt;text&gt; |(15,18)
&lt;xml-tree&gt;:= &lt;text&gt; |(16,18)
&lt;xml-tree&gt;:= &lt;text&gt; |(17,18)
&lt;xml-tree&gt;:= &lt;xml-tree&gt; &lt;xml-tree&gt; |(15,18)
&lt;xml-tree&gt;:= &lt;xml-tree&gt; &lt;xml-tree&gt; |(16,18)
---
l chart[19]
&lt;letter_space&gt;:= l |(18,19)
&lt;text&gt;:= &lt;text&gt; &lt;letter_space&gt; |(15,19)
&lt;text&gt;:= &lt;text&gt; &lt;letter_space&gt; |(16,19)
&lt;text&gt;:= &lt;text&gt; &lt;letter_space&gt; |(17,19)
&lt;text&gt;:= &lt;letter_space&gt; |(18,19)
&lt;xml-tree&gt;:= &lt;text&gt; |(15,19)
&lt;xml-tree&gt;:= &lt;text&gt; |(16,19)
&lt;xml-tree&gt;:= &lt;text&gt; |(17,19)
&lt;xml-tree&gt;:= &lt;text&gt; |(18,19)
&lt;xml-tree&gt;:= &lt;xml-tree&gt; &lt;xml-tree&gt; |(15,19)
&lt;xml-tree&gt;:= &lt;xml-tree&gt; &lt;xml-tree&gt; |(16,19)
&lt;xml-tree&gt;:= &lt;xml-tree&gt; &lt;xml-tree&gt; |(17,19)
---
d chart[20]
&lt;letter_space&gt;:= d |(19,20)
&lt;text&gt;:= &lt;text&gt; &lt;letter_space&gt; |(15,20)
&lt;text&gt;:= &lt;text&gt; &lt;letter_space&gt; |(16,20)
&lt;text&gt;:= &lt;text&gt; &lt;letter_space&gt; |(17,20)
&lt;text&gt;:= &lt;text&gt; &lt;letter_space&gt; |(18,20)
&lt;text&gt;:= &lt;letter_space&gt; |(19,20)
&lt;xml-tree&gt;:= &lt;text&gt; |(15,20)
&lt;xml-tree&gt;:= &lt;text&gt; |(16,20)
&lt;xml-tree&gt;:= &lt;text&gt; |(17,20)
&lt;xml-tree&gt;:= &lt;text&gt; |(18,20)
&lt;xml-tree&gt;:= &lt;text&gt; |(19,20)
&lt;xml-tree&gt;:= &lt;xml-tree&gt; &lt;xml-tree&gt; |(15,20)
&lt;xml-tree&gt;:= &lt;xml-tree&gt; &lt;xml-tree&gt; |(16,20)
&lt;xml-tree&gt;:= &lt;xml-tree&gt; &lt;xml-tree&gt; |(17,20)
&lt;xml-tree&gt;:= &lt;xml-tree&gt; &lt;xml-tree&gt; |(18,20)
---
&lt; chart[21]

---
/ chart[22]

---
i chart[23]
&lt;letter&gt;:= i |(22,23)
&lt;id&gt;:= &lt;letter&gt; |(22,23)
---
&gt; chart[24]
&lt;xml-close-tag&gt;:= &lt; / &lt;id&gt; &gt; |(20,24)
&lt;xml-tree&gt;:= &lt;xml-open-tag&gt; &lt;xml-tree&gt; &lt;xml-close-tag&gt; |(12,24)
---
&lt; chart[25]

---
b chart[26]
&lt;letter&gt;:= b |(25,26)
&lt;id&gt;:= &lt;letter&gt; |(25,26)
---
r chart[27]
&lt;letter&gt;:= r |(26,27)
&lt;id&gt;:= &lt;id&gt; &lt;letter&gt; |(25,27)
---
/ chart[28]

---
&gt; chart[29]
&lt;xml-openclose-tag&gt;:= &lt; &lt;id&gt; / &gt; |(24,29)
&lt;xml-tree&gt;:= &lt;xml-openclose-tag&gt; |(24,29)
&lt;xml-tree&gt;:= &lt;xml-tree&gt; &lt;xml-tree&gt; |(12,29)
---
&gt; chart[30]

---
/ chart[31]

---
b chart[32]

---
o chart[33]

---
d chart[34]

---
y chart[35]

---
&gt; chart[36]

---
&lt; chart[37]

---
/ chart[38]

---
h chart[39]

---
t chart[40]

---
m chart[41]

---
l chart[42]

---
&gt; chart[43]

---
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>The number of columns in this table that are associated with potential symbols correspond to the number of letters that could be parsed successfully. In other words, we can use this table to compute the longest parsable substring.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">cols</span> <span class="o">=</span> <span class="p">[</span><span class="n">col</span> <span class="k">for</span> <span class="n">col</span> <span class="ow">in</span> <span class="n">table</span> <span class="k">if</span> <span class="n">col</span><span class="o">.</span><span class="n">states</span><span class="p">]</span>
<span class="n">parsable</span> <span class="o">=</span> <span class="n">invalid_seed</span><span class="o">.</span><span class="n">data</span><span class="p">[:</span><span class="nb">len</span><span class="p">(</span><span class="n">cols</span><span class="p">)</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span>

<span class="nb">print</span><span class="p">(</span><span class="s2">&quot;&#39;</span><span class="si">%s</span><span class="s2">&#39;&quot;</span> <span class="o">%</span> <span class="n">invalid_seed</span><span class="p">)</span>
<span class="n">parsable</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>&#39;&lt;html&gt;&lt;body&gt;&lt;i&gt;World&lt;/i&gt;&lt;br/&gt;&gt;/body&gt;&lt;/html&gt;&#39;
</pre>
</div>

</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;&lt;html&gt;&lt;body&gt;&lt;i&gt;World&lt;/i&gt;&lt;br/&gt;&#39;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>From this, we can compute the <em>degree of validity</em> for an input.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">validity</span> <span class="o">=</span> <span class="mi">100</span> <span class="o">*</span> <span class="nb">len</span><span class="p">(</span><span class="n">parsable</span><span class="p">)</span> <span class="o">/</span> <span class="nb">len</span><span class="p">(</span><span class="n">invalid_seed</span><span class="o">.</span><span class="n">data</span><span class="p">)</span>

<span class="s2">&quot;</span><span class="si">%0.1f%%</span><span class="s2"> of the string can be parsed successfully.&quot;</span> <span class="o">%</span> <span class="n">validity</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;67.4% of the string can be parsed successfully.&#39;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p><strong><em>Summary</em></strong>. Unlike input fragments, input regions can be derived even if the parser fails to generate the entire parse tree.</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h3 id="Region-Based-Mutation">Region-Based Mutation<a class="anchor-link" href="#Region-Based-Mutation">&#182;</a></h3><p>To fuzz invalid seeds, the region-based mutator associates symbols from the grammar with regions (i.e., indexed substrings) in the seed. The <a href="#Building-the-Fragment-Pool">overridden</a> method <code>add_to_fragment_pool()</code> first tries to mine the fragments from the seed. If this fails, the region mutator uses <a href="Parser.html#The-Parsing-Algorithm">Earley parser</a> to derive the parse table. For each column (i.e., letter), it extracts the symbols and corresponding regions. This allows the mutator to store the set of regions with each symbol.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">SeedWithRegions</span><span class="p">(</span><span class="n">SeedWithStructure</span><span class="p">):</span>
<span class="w">    </span><span class="sd">&quot;&quot;&quot;Seeds augmented with structure info&quot;&quot;&quot;</span>

    <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">data</span><span class="p">:</span> <span class="nb">str</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
        <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="fm">__init__</span><span class="p">(</span><span class="n">data</span><span class="p">)</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">has_regions</span> <span class="o">=</span> <span class="kc">False</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">regions</span><span class="p">:</span> <span class="n">Dict</span><span class="p">[</span><span class="nb">str</span><span class="p">,</span> <span class="n">Set</span><span class="p">]</span> <span class="o">=</span> <span class="p">{}</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">RegionMutator</span><span class="p">(</span><span class="n">FragmentMutator</span><span class="p">):</span>
    <span class="k">def</span> <span class="nf">add_to_fragment_pool</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">seed</span><span class="p">:</span> <span class="n">SeedWithRegions</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kc">None</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Mark fragments and regions in a seed file&quot;&quot;&quot;</span>
        <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="n">add_to_fragment_pool</span><span class="p">(</span><span class="n">seed</span><span class="p">)</span>
        <span class="k">if</span> <span class="ow">not</span> <span class="n">seed</span><span class="o">.</span><span class="n">has_structure</span><span class="p">:</span>
            <span class="k">try</span><span class="p">:</span>
                <span class="k">with</span> <span class="n">Timeout</span><span class="p">(</span><span class="mf">0.2</span><span class="p">):</span>
                    <span class="n">seed</span><span class="o">.</span><span class="n">regions</span> <span class="o">=</span> <span class="p">{</span><span class="n">k</span><span class="p">:</span> <span class="nb">set</span><span class="p">()</span> <span class="k">for</span> <span class="n">k</span> <span class="ow">in</span> <span class="bp">self</span><span class="o">.</span><span class="n">parser</span><span class="o">.</span><span class="n">cgrammar</span><span class="p">}</span>
                    <span class="k">for</span> <span class="n">column</span> <span class="ow">in</span> <span class="bp">self</span><span class="o">.</span><span class="n">parser</span><span class="o">.</span><span class="n">chart_parse</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">,</span>
                                                          <span class="bp">self</span><span class="o">.</span><span class="n">parser</span><span class="o">.</span><span class="n">start_symbol</span><span class="p">()):</span>
                        <span class="k">for</span> <span class="n">state</span> <span class="ow">in</span> <span class="n">column</span><span class="o">.</span><span class="n">states</span><span class="p">:</span>
                            <span class="k">if</span> <span class="p">(</span><span class="ow">not</span> <span class="bp">self</span><span class="o">.</span><span class="n">is_excluded</span><span class="p">(</span><span class="n">state</span><span class="o">.</span><span class="n">name</span><span class="p">)</span> <span class="ow">and</span>
                                    <span class="n">state</span><span class="o">.</span><span class="n">e_col</span><span class="o">.</span><span class="n">index</span> <span class="o">-</span> <span class="n">state</span><span class="o">.</span><span class="n">s_col</span><span class="o">.</span><span class="n">index</span> <span class="o">&gt;</span> <span class="mi">1</span> <span class="ow">and</span>
                                    <span class="n">state</span><span class="o">.</span><span class="n">finished</span><span class="p">()):</span>
                                <span class="n">seed</span><span class="o">.</span><span class="n">regions</span><span class="p">[</span><span class="n">state</span><span class="o">.</span><span class="n">name</span><span class="p">]</span><span class="o">.</span><span class="n">add</span><span class="p">((</span><span class="n">state</span><span class="o">.</span><span class="n">s_col</span><span class="o">.</span><span class="n">index</span><span class="p">,</span>
                                                              <span class="n">state</span><span class="o">.</span><span class="n">e_col</span><span class="o">.</span><span class="n">index</span><span class="p">))</span>
                <span class="n">seed</span><span class="o">.</span><span class="n">has_regions</span> <span class="o">=</span> <span class="kc">True</span>
            <span class="k">except</span> <span class="ne">TimeoutError</span><span class="p">:</span>
                <span class="n">seed</span><span class="o">.</span><span class="n">has_regions</span> <span class="o">=</span> <span class="kc">False</span>
        <span class="k">else</span><span class="p">:</span>
            <span class="n">seed</span><span class="o">.</span><span class="n">has_regions</span> <span class="o">=</span> <span class="kc">False</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>This is how these regions look like for our invalid seed. A region consists of a start and end index in the seed string.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">invalid_seed</span> <span class="o">=</span> <span class="n">SeedWithRegions</span><span class="p">(</span><span class="s2">&quot;&lt;html&gt;&lt;body&gt;&lt;i&gt;World&lt;/i&gt;&lt;br/&gt;&gt;/body&gt;&lt;/html&gt;&quot;</span><span class="p">)</span>
<span class="n">mutator</span> <span class="o">=</span> <span class="n">RegionMutator</span><span class="p">(</span><span class="n">parser</span><span class="p">)</span>
<span class="n">mutator</span><span class="o">.</span><span class="n">add_to_fragment_pool</span><span class="p">(</span><span class="n">invalid_seed</span><span class="p">)</span>
<span class="k">for</span> <span class="n">symbol</span> <span class="ow">in</span> <span class="n">invalid_seed</span><span class="o">.</span><span class="n">regions</span><span class="p">:</span>
    <span class="nb">print</span><span class="p">(</span><span class="n">symbol</span><span class="p">)</span>
    <span class="k">for</span> <span class="p">(</span><span class="n">s</span><span class="p">,</span> <span class="n">e</span><span class="p">)</span> <span class="ow">in</span> <span class="n">invalid_seed</span><span class="o">.</span><span class="n">regions</span><span class="p">[</span><span class="n">symbol</span><span class="p">]:</span>
        <span class="nb">print</span><span class="p">(</span><span class="s2">&quot;|-(</span><span class="si">%d</span><span class="s2">,</span><span class="si">%d</span><span class="s2">) : </span><span class="si">%s</span><span class="s2">&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">s</span><span class="p">,</span> <span class="n">e</span><span class="p">,</span> <span class="n">invalid_seed</span><span class="o">.</span><span class="n">data</span><span class="p">[</span><span class="n">s</span><span class="p">:</span><span class="n">e</span><span class="p">]))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>&lt;start&gt;
&lt;xml-tree&gt;
|-(16,20) : orld
|-(12,24) : &lt;i&gt;World&lt;/i&gt;
|-(17,20) : rld
|-(18,20) : ld
|-(16,19) : orl
|-(15,17) : Wo
|-(12,29) : &lt;i&gt;World&lt;/i&gt;&lt;br/&gt;
|-(17,19) : rl
|-(15,20) : World
|-(24,29) : &lt;br/&gt;
|-(15,19) : Worl
|-(16,18) : or
|-(15,18) : Wor
&lt;xml-open-tag&gt;
|-(6,12) : &lt;body&gt;
|-(12,15) : &lt;i&gt;
|-(0,6) : &lt;html&gt;
&lt;xml-openclose-tag&gt;
|-(24,29) : &lt;br/&gt;
&lt;xml-close-tag&gt;
|-(20,24) : &lt;/i&gt;
&lt;xml-attribute&gt;
&lt;id&gt;
&lt;text&gt;
&lt;letter&gt;
&lt;letter_space&gt;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Now that we know which regions in the seed belong to which symbol, we can define region-based swap and delete operators.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">RegionMutator</span><span class="p">(</span><span class="n">RegionMutator</span><span class="p">):</span>
    <span class="k">def</span> <span class="nf">swap_fragment</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">seed</span><span class="p">:</span> <span class="n">SeedWithRegions</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="n">SeedWithRegions</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Chooses a random region and swaps it with a fragment</span>
<span class="sd">           that starts with the same symbol&quot;&quot;&quot;</span>
        <span class="k">if</span> <span class="ow">not</span> <span class="n">seed</span><span class="o">.</span><span class="n">has_structure</span> <span class="ow">and</span> <span class="n">seed</span><span class="o">.</span><span class="n">has_regions</span><span class="p">:</span>
            <span class="n">regions</span> <span class="o">=</span> <span class="p">[</span><span class="n">r</span> <span class="k">for</span> <span class="n">r</span> <span class="ow">in</span> <span class="n">seed</span><span class="o">.</span><span class="n">regions</span>
                       <span class="k">if</span> <span class="p">(</span><span class="nb">len</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">regions</span><span class="p">[</span><span class="n">r</span><span class="p">])</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="ow">and</span>
                           <span class="nb">len</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">fragments</span><span class="p">[</span><span class="n">r</span><span class="p">])</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)]</span>
            <span class="k">if</span> <span class="nb">len</span><span class="p">(</span><span class="n">regions</span><span class="p">)</span> <span class="o">==</span> <span class="mi">0</span><span class="p">:</span>
                <span class="k">return</span> <span class="n">seed</span>

            <span class="n">key</span> <span class="o">=</span> <span class="n">random</span><span class="o">.</span><span class="n">choice</span><span class="p">(</span><span class="nb">list</span><span class="p">(</span><span class="n">regions</span><span class="p">))</span>
            <span class="n">s</span><span class="p">,</span> <span class="n">e</span> <span class="o">=</span> <span class="n">random</span><span class="o">.</span><span class="n">choice</span><span class="p">(</span><span class="nb">list</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">regions</span><span class="p">[</span><span class="n">key</span><span class="p">]))</span>
            <span class="n">swap_structure</span> <span class="o">=</span> <span class="n">random</span><span class="o">.</span><span class="n">choice</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">fragments</span><span class="p">[</span><span class="n">key</span><span class="p">])</span>
            <span class="n">swap_string</span> <span class="o">=</span> <span class="n">tree_to_string</span><span class="p">(</span><span class="n">swap_structure</span><span class="p">)</span>
            <span class="n">new_seed</span> <span class="o">=</span> <span class="n">SeedWithRegions</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">[:</span><span class="n">s</span><span class="p">]</span> <span class="o">+</span> <span class="n">swap_string</span> <span class="o">+</span> <span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">[</span><span class="n">e</span><span class="p">:])</span>
            <span class="n">new_seed</span><span class="o">.</span><span class="n">has_structure</span> <span class="o">=</span> <span class="kc">False</span>
            <span class="n">new_seed</span><span class="o">.</span><span class="n">has_regions</span> <span class="o">=</span> <span class="kc">False</span>
            <span class="k">return</span> <span class="n">new_seed</span>
        <span class="k">else</span><span class="p">:</span>
            <span class="k">return</span> <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="n">swap_fragment</span><span class="p">(</span><span class="n">seed</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">RegionMutator</span><span class="p">(</span><span class="n">RegionMutator</span><span class="p">):</span>
    <span class="k">def</span> <span class="nf">delete_fragment</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">seed</span><span class="p">:</span> <span class="n">SeedWithRegions</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="n">SeedWithRegions</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Deletes a random region&quot;&quot;&quot;</span>
        <span class="k">if</span> <span class="ow">not</span> <span class="n">seed</span><span class="o">.</span><span class="n">has_structure</span> <span class="ow">and</span> <span class="n">seed</span><span class="o">.</span><span class="n">has_regions</span><span class="p">:</span>
            <span class="n">regions</span> <span class="o">=</span> <span class="p">[</span><span class="n">r</span> <span class="k">for</span> <span class="n">r</span> <span class="ow">in</span> <span class="n">seed</span><span class="o">.</span><span class="n">regions</span>
                       <span class="k">if</span> <span class="nb">len</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">regions</span><span class="p">[</span><span class="n">r</span><span class="p">])</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">]</span>
            <span class="k">if</span> <span class="nb">len</span><span class="p">(</span><span class="n">regions</span><span class="p">)</span> <span class="o">==</span> <span class="mi">0</span><span class="p">:</span>
                <span class="k">return</span> <span class="n">seed</span>

            <span class="n">key</span> <span class="o">=</span> <span class="n">random</span><span class="o">.</span><span class="n">choice</span><span class="p">(</span><span class="nb">list</span><span class="p">(</span><span class="n">regions</span><span class="p">))</span>
            <span class="n">s</span><span class="p">,</span> <span class="n">e</span> <span class="o">=</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
            <span class="k">while</span> <span class="p">(</span><span class="n">e</span> <span class="o">-</span> <span class="n">s</span> <span class="o">&lt;</span> <span class="mi">2</span><span class="p">):</span>
                <span class="n">s</span><span class="p">,</span> <span class="n">e</span> <span class="o">=</span> <span class="n">random</span><span class="o">.</span><span class="n">choice</span><span class="p">(</span><span class="nb">list</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">regions</span><span class="p">[</span><span class="n">key</span><span class="p">]))</span>

            <span class="n">new_seed</span> <span class="o">=</span> <span class="n">SeedWithRegions</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">[:</span><span class="n">s</span><span class="p">]</span> <span class="o">+</span> <span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">[</span><span class="n">e</span><span class="p">:])</span>
            <span class="n">new_seed</span><span class="o">.</span><span class="n">has_structure</span> <span class="o">=</span> <span class="kc">False</span>
            <span class="n">new_seed</span><span class="o">.</span><span class="n">has_regions</span> <span class="o">=</span> <span class="kc">False</span>
            <span class="k">return</span> <span class="n">new_seed</span>
        <span class="k">else</span><span class="p">:</span>
            <span class="k">return</span> <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="n">delete_fragment</span><span class="p">(</span><span class="n">seed</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Let's try our new region-based mutator. We add a simple, valid seed to the fragment pool and attempt to mutate the invalid seed.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">simple_seed</span> <span class="o">=</span> <span class="n">SeedWithRegions</span><span class="p">(</span><span class="s2">&quot;&lt;b&gt;Text&lt;/b&gt;&quot;</span><span class="p">)</span>
<span class="n">mutator</span> <span class="o">=</span> <span class="n">RegionMutator</span><span class="p">(</span><span class="n">parser</span><span class="p">)</span>
<span class="n">mutator</span><span class="o">.</span><span class="n">add_to_fragment_pool</span><span class="p">(</span><span class="n">simple_seed</span><span class="p">)</span>

<span class="nb">print</span><span class="p">(</span><span class="n">invalid_seed</span><span class="p">)</span>
<span class="n">mutator</span><span class="o">.</span><span class="n">mutate</span><span class="p">(</span><span class="n">invalid_seed</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>&lt;html&gt;&lt;body&gt;&lt;i&gt;World&lt;/i&gt;&lt;br/&gt;&gt;/body&gt;&lt;/html&gt;
</pre>
</div>

</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&lt;html&gt;&lt;body&gt;&lt;i&gt;WTextd&lt;/i&gt;&lt;br/&gt;&gt;/body&gt;&lt;/html&gt;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p><strong><em>Summary</em></strong>. We can use the Earley parser to generate a parse table and assign regions in the input to symbols in the grammar. Our region mutators can substitute these regions with fragments from the fragment pool that start with the same symbol, or delete these regions entirely.</p>
<p><strong><em>Try it</em></strong>. Implement a region pool (similar to the fragment pool) and a <code>swap_region()</code> mutator.
You can execute your own code by opening this chapter as Jupyter notebook.</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h3 id="Integration-with-Greybox-Fuzzing">Integration with Greybox Fuzzing<a class="anchor-link" href="#Integration-with-Greybox-Fuzzing">&#182;</a></h3><p>Let's try our shiny new region mutator by integrating it with our <a href="#Integration-with-Greybox-Fuzzing">structure-aware greybox fuzzer</a>.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">runner</span> <span class="o">=</span> <span class="n">FunctionCoverageRunner</span><span class="p">(</span><span class="n">my_parser</span><span class="p">)</span>
<span class="n">byte_mutator</span> <span class="o">=</span> <span class="n">Mutator</span><span class="p">()</span>
<span class="n">tree_mutator</span> <span class="o">=</span> <span class="n">RegionMutator</span><span class="p">(</span><span class="n">EarleyParser</span><span class="p">(</span><span class="n">XML_GRAMMAR</span><span class="p">,</span> <span class="n">tokens</span><span class="o">=</span><span class="n">XML_TOKENS</span><span class="p">))</span>
<span class="n">schedule</span> <span class="o">=</span> <span class="n">PowerSchedule</span><span class="p">()</span>

<span class="n">regionFuzzer</span> <span class="o">=</span> <span class="n">GreyboxGrammarFuzzer</span><span class="p">([</span><span class="n">valid_seed</span><span class="o">.</span><span class="n">data</span><span class="p">],</span> <span class="n">byte_mutator</span><span class="p">,</span> <span class="n">tree_mutator</span><span class="p">,</span> <span class="n">schedule</span><span class="p">)</span>

<span class="n">start</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>
<span class="n">regionFuzzer</span><span class="o">.</span><span class="n">runs</span><span class="p">(</span><span class="n">runner</span><span class="p">,</span> <span class="n">trials</span> <span class="o">=</span> <span class="n">n</span><span class="p">)</span>
<span class="n">end</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>

<span class="sd">&quot;&quot;&quot;</span>
<span class="sd">It took the structural greybox fuzzer with region mutator</span>
<span class="sd">%0.2f seconds to generate and execute %d inputs.</span>
<span class="sd">&quot;&quot;&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">end</span> <span class="o">-</span> <span class="n">start</span><span class="p">,</span> <span class="n">n</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;\nIt took the structural greybox fuzzer with region mutator\n23.00 seconds to generate and execute 300 inputs.\n&#39;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>We can see that the structural greybox fuzzer with region-based mutator is slower than the <a href="#Fragment-based-Fuzzing">fragment-based mutator alone</a>. This is because region-based structural mutation is applicable for <em>all seeds</em>. In contrast, fragment-based mutators were applicable only for tiny number of parsable seeds. Otherwise, only (very efficient) byte-level mutators were applied.</p>
<p>Let's also print the average degree of validity for the seeds in the population.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">def</span> <span class="nf">print_more_stats</span><span class="p">(</span><span class="n">fuzzer</span><span class="p">:</span> <span class="n">GreyboxGrammarFuzzer</span><span class="p">,</span> <span class="n">parser</span><span class="p">:</span> <span class="n">EarleyParser</span><span class="p">):</span>
    <span class="n">print_stats</span><span class="p">(</span><span class="n">fuzzer</span><span class="p">,</span> <span class="n">parser</span><span class="p">)</span>
    <span class="n">validity</span> <span class="o">=</span> <span class="mf">0.0</span>
    <span class="n">total</span> <span class="o">=</span> <span class="mi">0</span>
    <span class="k">for</span> <span class="n">seed</span> <span class="ow">in</span> <span class="n">fuzzer</span><span class="o">.</span><span class="n">population</span><span class="p">:</span>
        <span class="k">if</span> <span class="ow">not</span> <span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">:</span> <span class="k">continue</span>
        <span class="n">table</span> <span class="o">=</span> <span class="n">parser</span><span class="o">.</span><span class="n">chart_parse</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">,</span> <span class="n">parser</span><span class="o">.</span><span class="n">start_symbol</span><span class="p">())</span>
        <span class="n">cols</span> <span class="o">=</span> <span class="p">[</span><span class="n">col</span> <span class="k">for</span> <span class="n">col</span> <span class="ow">in</span> <span class="n">table</span> <span class="k">if</span> <span class="n">col</span><span class="o">.</span><span class="n">states</span><span class="p">]</span>
        <span class="n">parsable</span> <span class="o">=</span> <span class="n">invalid_seed</span><span class="o">.</span><span class="n">data</span><span class="p">[:</span><span class="nb">len</span><span class="p">(</span><span class="n">cols</span><span class="p">)</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span>
        <span class="n">validity</span> <span class="o">+=</span> <span class="nb">len</span><span class="p">(</span><span class="n">parsable</span><span class="p">)</span> <span class="o">/</span> <span class="nb">len</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">)</span>
        <span class="n">total</span> <span class="o">+=</span> <span class="mi">1</span>

    <span class="nb">print</span><span class="p">(</span><span class="s2">&quot;On average, </span><span class="si">%0.1f%%</span><span class="s2"> of a seed in the population can be successfully parsed.&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="mi">100</span> <span class="o">*</span> <span class="n">validity</span> <span class="o">/</span> <span class="n">total</span><span class="p">))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">print_more_stats</span><span class="p">(</span><span class="n">regionFuzzer</span><span class="p">,</span> <span class="n">parser</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>From the 300 generated inputs, 2 (0.67%) can be parsed.
In total, 167 statements are covered.
On average, 10.9% of a seed in the population can be successfully parsed.
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p><strong><em>Summary</em></strong>. Compared to fragment-based mutation, a greybox fuzzer with region-based mutation achieves <em>higher coverage</em> but generates a <em>smaller number of valid inputs</em>. The higher coverage is explained by leveraging at least <em>some</em> structure for seeds that cannot be parsed successfully.</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h3 id="Focusing-on-Valid-Seeds">Focusing on Valid Seeds<a class="anchor-link" href="#Focusing-on-Valid-Seeds">&#182;</a></h3><p>In the previous section, we have a problem: The low (degree of) validity.  To address this problem, a <em>validity-based power schedule</em> assigns more <a href="GreyboxFuzzer.html#Power-Schedules">energy</a> to seeds that have a higher degree of validity.  In other words, the fuzzer <em>spends more time fuzzing seeds that are more valid</em>.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn"><a href="https://docs.python.org/3/library/math.html" class="import" target="_blank">math</a></span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="k">class</span> <span class="nc">AFLSmartSchedule</span><span class="p">(</span><span class="n">PowerSchedule</span><span class="p">):</span>
    <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">parser</span><span class="p">:</span> <span class="n">EarleyParser</span><span class="p">,</span> <span class="n">exponent</span><span class="p">:</span> <span class="nb">float</span> <span class="o">=</span> <span class="mf">1.0</span><span class="p">):</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">parser</span> <span class="o">=</span> <span class="n">parser</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">exponent</span> <span class="o">=</span> <span class="n">exponent</span>

    <span class="k">def</span> <span class="nf">parsable</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">seed</span><span class="p">:</span> <span class="n">Seed</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="nb">str</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Returns the substring that is parsable&quot;&quot;&quot;</span>
        <span class="n">table</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">parser</span><span class="o">.</span><span class="n">chart_parse</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">,</span> <span class="bp">self</span><span class="o">.</span><span class="n">parser</span><span class="o">.</span><span class="n">start_symbol</span><span class="p">())</span>
        <span class="n">cols</span> <span class="o">=</span> <span class="p">[</span><span class="n">col</span> <span class="k">for</span> <span class="n">col</span> <span class="ow">in</span> <span class="n">table</span> <span class="k">if</span> <span class="n">col</span><span class="o">.</span><span class="n">states</span><span class="p">]</span>
        <span class="k">return</span> <span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">[:</span><span class="nb">len</span><span class="p">(</span><span class="n">cols</span><span class="p">)</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span>

    <span class="k">def</span> <span class="nf">degree_of_validity</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">seed</span><span class="p">:</span> <span class="n">Seed</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="nb">float</span><span class="p">:</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Returns the proportion of a seed that is parsable&quot;&quot;&quot;</span>
        <span class="k">if</span> <span class="ow">not</span> <span class="nb">hasattr</span><span class="p">(</span><span class="n">seed</span><span class="p">,</span> <span class="s1">&#39;validity&#39;</span><span class="p">):</span>
            <span class="n">seed</span><span class="o">.</span><span class="n">validity</span> <span class="o">=</span> <span class="p">(</span><span class="nb">len</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">parsable</span><span class="p">(</span><span class="n">seed</span><span class="p">))</span> <span class="o">/</span> <span class="nb">len</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">)</span>
                             <span class="k">if</span> <span class="nb">len</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="k">else</span> <span class="mi">0</span><span class="p">)</span>
        <span class="k">return</span> <span class="n">seed</span><span class="o">.</span><span class="n">validity</span>

    <span class="k">def</span> <span class="nf">assignEnergy</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">population</span><span class="p">:</span> <span class="n">Sequence</span><span class="p">[</span><span class="n">Seed</span><span class="p">]):</span>
<span class="w">        </span><span class="sd">&quot;&quot;&quot;Assign exponential energy proportional to degree of validity&quot;&quot;&quot;</span>
        <span class="k">for</span> <span class="n">seed</span> <span class="ow">in</span> <span class="n">population</span><span class="p">:</span>
            <span class="n">seed</span><span class="o">.</span><span class="n">energy</span> <span class="o">=</span> <span class="p">((</span><span class="bp">self</span><span class="o">.</span><span class="n">degree_of_validity</span><span class="p">(</span><span class="n">seed</span><span class="p">)</span> <span class="o">/</span> <span class="n">math</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="nb">len</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">)))</span> <span class="o">**</span> <span class="bp">self</span><span class="o">.</span><span class="n">exponent</span>
                           <span class="k">if</span> <span class="nb">len</span><span class="p">(</span><span class="n">seed</span><span class="o">.</span><span class="n">data</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">1</span> <span class="k">else</span> <span class="mi">0</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Let's play with the degree of validity by passing in a valid seed ...</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">smart_schedule</span> <span class="o">=</span> <span class="n">AFLSmartSchedule</span><span class="p">(</span><span class="n">parser</span><span class="p">)</span>
<span class="nb">print</span><span class="p">(</span><span class="s2">&quot;</span><span class="si">%11s</span><span class="s2">: </span><span class="si">%s</span><span class="s2">&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="s2">&quot;Entire seed&quot;</span><span class="p">,</span> <span class="n">simple_seed</span><span class="p">))</span>
<span class="nb">print</span><span class="p">(</span><span class="s2">&quot;</span><span class="si">%11s</span><span class="s2">: </span><span class="si">%s</span><span class="s2">&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="s2">&quot;Parsable&quot;</span><span class="p">,</span> <span class="n">smart_schedule</span><span class="o">.</span><span class="n">parsable</span><span class="p">(</span><span class="n">simple_seed</span><span class="p">)))</span>

<span class="s2">&quot;Degree of validity: </span><span class="si">%0.2f%%</span><span class="s2">&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="mi">100</span> <span class="o">*</span> <span class="n">smart_schedule</span><span class="o">.</span><span class="n">degree_of_validity</span><span class="p">(</span><span class="n">simple_seed</span><span class="p">))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>Entire seed: &lt;b&gt;Text&lt;/b&gt;
   Parsable: &lt;b&gt;Text&lt;/b&gt;
</pre>
</div>

</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;Degree of validity: 100.00%&#39;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>... and an invalid seed.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="nb">print</span><span class="p">(</span><span class="s2">&quot;</span><span class="si">%11s</span><span class="s2">: </span><span class="si">%s</span><span class="s2">&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="s2">&quot;Entire seed&quot;</span><span class="p">,</span> <span class="n">invalid_seed</span><span class="p">))</span>
<span class="nb">print</span><span class="p">(</span><span class="s2">&quot;</span><span class="si">%11s</span><span class="s2">: </span><span class="si">%s</span><span class="s2">&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="s2">&quot;Parsable&quot;</span><span class="p">,</span> <span class="n">smart_schedule</span><span class="o">.</span><span class="n">parsable</span><span class="p">(</span><span class="n">invalid_seed</span><span class="p">)))</span>

<span class="s2">&quot;Degree of validity: </span><span class="si">%0.2f%%</span><span class="s2">&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="mi">100</span> <span class="o">*</span> <span class="n">smart_schedule</span><span class="o">.</span><span class="n">degree_of_validity</span><span class="p">(</span><span class="n">invalid_seed</span><span class="p">))</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>Entire seed: &lt;html&gt;&lt;body&gt;&lt;i&gt;World&lt;/i&gt;&lt;br/&gt;&gt;/body&gt;&lt;/html&gt;
   Parsable: &lt;html&gt;&lt;body&gt;&lt;i&gt;World&lt;/i&gt;&lt;br/&gt;
</pre>
</div>

</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;Degree of validity: 67.44%&#39;
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Excellent. We can compute the degree of validity as the proportion of the string that can be parsed.</p>
<p>Let's plug the validity-based power schedule into the structure-aware greybox fuzzer.</p>
</div>
</div>
</div>
</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">runner</span> <span class="o">=</span> <span class="n">FunctionCoverageRunner</span><span class="p">(</span><span class="n">my_parser</span><span class="p">)</span>
<span class="n">byte_mutator</span> <span class="o">=</span> <span class="n">Mutator</span><span class="p">()</span>
<span class="n">tree_mutator</span> <span class="o">=</span> <span class="n">RegionMutator</span><span class="p">(</span><span class="n">EarleyParser</span><span class="p">(</span><span class="n">XML_GRAMMAR</span><span class="p">,</span> <span class="n">tokens</span><span class="o">=</span><span class="n">XML_TOKENS</span><span class="p">))</span>
<span class="n">schedule</span> <span class="o">=</span> <span class="n">AFLSmartSchedule</span><span class="p">(</span><span class="n">parser</span><span class="p">)</span>

<span class="n">aflsmart_fuzzer</span> <span class="o">=</span> <span class="n">GreyboxGrammarFuzzer</span><span class="p">([</span><span class="n">valid_seed</span><span class="o">.</span><span class="n">data</span><span class="p">],</span> <span class="n">byte_mutator</span><span class="p">,</span> 
                                       <span class="n">tree_mutator</span><span class="p">,</span> <span class="n">schedule</span><span class="p">)</span>

<span class="n">start</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>
<span class="n">aflsmart_fuzzer</span><span class="o">.</span><span class="n">runs</span><span class="p">(</span><span class="n">runner</span><span class="p">,</span> <span class="n">trials</span><span class="o">=</span><span class="n">n</span><span class="p">)</span>
<span class="n">end</span> <span class="o">=</span> <span class="n">time</span><span class="o">.</span><span class="n">time</span><span class="p">()</span>

<span class="s2">&quot;It took AFLSmart </span><span class="si">%0.2f</span><span class="s2"> seconds to generate and execute </span><span class="si">%d</span><span class="s2"> inputs.&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">end</span> <span class="o">-</span> <span class="n">start</span><span class="p">,</span> <span class="n">n</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_text output_subarea output_execute_result">
<pre>&#39;It took AFLSmart 21.89 seconds to generate and execute 300 inputs.&#39;
</pre>
</div>

</div>

<div class="input_code">
<div class="cell border-box-sizing code_cell rendered">
<div class="input">

<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">print_more_stats</span><span class="p">(</span><span class="n">aflsmart_fuzzer</span><span class="p">,</span> <span class="n">parser</span><span class="p">)</span>
</pre></div>

</div>
</div></div>
</div>
</div>

<div class="output_area">

<div class="output_subarea output_stream output_stdout output_text">
<pre>From the 300 generated inputs, 28 (9.33%) can be parsed.
In total, 160 statements are covered.
On average, 26.5% of a seed in the population can be successfully parsed.
</pre>
</div>

</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p><strong><em>Summary</em></strong>. Indeed, by spending more time fuzzing seeds with a higher degree of validity, we also generate inputs with a higher degree of validity. More inputs are entirely valid w.r.t. the given grammar.</p>
<p><strong><em>Read up</em></strong>. Learn more about region-based fuzzing, deferred parsing, and validity-based schedules in the original AFLSmart paper: "<a href="https://arxiv.org/abs/1811.09447">Smart Greybox Fuzzing</a>" by Pham and co-authors. Download and improve AFLSmart: <a href="https://github.com/aflsmart/aflsmart">https://github.com/aflsmart/aflsmart</a>.</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h2 id="Mining-Seeds">Mining Seeds<a class="anchor-link" href="#Mining-Seeds">&#182;</a></h2><p>By now, it should have become clear that the <em>choice of seeds</em> can very much influence the success of fuzzing.  One aspect is <em>variability</em> – our seeds should cover as many different features as possible in order to increase coverage.  Another aspect, however, is the <em>likelihood of a seed to induce errors</em> – that is, if a seed was involved in causing a failure before, then a mutation of this very seed may be likely to induce failures again.  This is because fixes for past failures typically are successful in letting the concrete failure no longer occur, but sometimes may fail to capture all conditions under which a failure may occur.  Hence, even if the original failure is fixed, the likelihood of an error in the <em>surroundings</em> of the original failure-inducing input is still higher.  It thus pays off to use as seeds <em>inputs that are known to have caused failures before</em>.</p>
<p>To put things in context, Holler's <em>LangFuzz</em> fuzzer used as seeds JavaScript inputs from CVE reports.  These were published as failure-inducing inputs at a time when the error already had been fixed; thus they could do no harm anymore.  Yet, by using such inputs as seeds, LangFuzz would create plenty of mutations and recombinations of all their features, many of which would (and do) find errors again and again.</p>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h2 id="Lessons-Learned">Lessons Learned<a class="anchor-link" href="#Lessons-Learned">&#182;</a></h2><ul>
<li><p>A <strong>dictionary</strong> is useful to inject important keywords into the generated inputs.</p>
</li>
<li><p><strong>Fragment-based mutation</strong> first disassembles seeds into fragments, and reassembles these fragments to generate new inputs. A <em>fragment</em> is a subtree in the seed's parse tree. However, fragment-based mutation requires that the seeds can be parsed successfully, which may not be true for seeds discovered by a coverage-based greybox fuzzer.</p>
</li>
<li><p><strong>Region-based mutation</strong> marks regions in the input as belonging to a certain symbol in the grammar. For instance, it may identify a substring '&lt;/a&gt;' as closing tag. These regions can then be deleted or substituted by fragments or regions belonging to the same symbol. Unlike fragment-based mutation, region-based mutation is applicable to <em>all</em> seeds - even those that can be parsed only partially. However, the degree of validity is still quite low for the generated inputs.</p>
</li>
<li><p>A <strong>validity-based power schedule</strong> invests more energy into seeds with a higher degree of validity. The inputs that are generated also have a higher degree of validity.</p>
</li>
<li><p><strong>Mining seeds</strong> from repositories of previous failure-inducing inputs results in input fragments associated with past failures, raising the likelihood to find more failures in the vicinity.</p>
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h2 id="Background">Background<a class="anchor-link" href="#Background">&#182;</a></h2><p>This chapter builds on the following two works:</p>
<ul>
<li><p>The <em>LangFuzz</em> fuzzer [<a href="https://www.usenix.org/system/files/conference/usenixsecurity12/sec12-final73.pdf">Holler <em>et al</em>, 2012</a>] is an efficient (and effective!) grammar-based fuzzer for (mostly) JavaScript.  It uses the grammar for parsing seeds and recombining their inputs with generated parts and found 2,600 bugs in JavaScript interpreters to date.</p>
</li>
<li><p>Smart greybox fuzzing (<a href="https://github.com/aflsmart/aflsmart">AFLSmart</a>) brings together coverage-based fuzzing and grammar-based (structural) fuzzing, as described in [<a href="https://arxiv.org/abs/1811.09447">Van-Thuan Pham <em>et al</em>, 2018</a>].  The resulting AFLSMART tool has discovered 42 zero-day vulnerabilities in widely-used, well-tested tools and libraries; so far 17 CVEs were assigned.</p>
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><p>Recent fuzzing work also brings together grammar-based fuzzing and coverage.</p>
<ul>
<li><p><em>Superion</em> [<a href="https://2019.icse-conferences.org/event/icse-2019-technical-papers-superion-grammar-aware-greybox-fuzzing">Junjie Wang <em>et al</em>, 2019</a>] is equivalent to our section "Integration with Greybox Fuzzing", as above – that is, a combination of LangFuzz and Greybox Fuzzing, but no AFL-style byte-level mutation.  Superion can improve the code coverage (i.e., 16.7% and 8.8% in line and function coverage) and bug-finding capability over AFL and jsfunfuzz.  According to the authors, they found 30 new bugs, among which they discovered 21 new vulnerabilities with 16 CVEs assigned and 3.2K USD bug bounty rewards received.</p>
</li>
<li><p><em>Nautilus</em> [<a href="https://www.ndss-symposium.org/ndss-paper/nautilus-fishing-for-deep-bugs-with-grammars/">Cornelius Aschermann <em>et al</em>, 2019</a>] also combines grammar-based fuzzing with coverage feedback.  It maintains the parse tree for all seeds and generated inputs. To allow AFL-style byte-level mutations, it "collapses" subtrees back to byte-level representations.  This has the advantage of not having to re-parse generated seeds; however, over time, Nautilus degenerates to structure-unaware greybox fuzzing because it does not re-parse collapsed subtrees to reconstitute input structure for later seeds where most of the parse tree is collapsed.  Nautilus identified bugs in mruby, PHP, ChakraCore, and in Lua; reporting these bugs was awarded with a sum of 2600 USD and 6 CVEs were assigned.</p>
</li>
<li><p><a href="https://uds-se.github.io/FormatFuzzer/">FormatFuzzer</a> is a framework for high-efficiency, high-quality generation and parsing of binary inputs. It takes a binary template that describes the format of a binary input and generates an executable that produces and parses the given binary format. From a binary template for GIF, for instance, FormatFuzzer produces a GIF generator - also known as GIF fuzzer. Generators produced by FormatFuzzer are highly efficient, producing thousands of valid test inputs per second. FormatFuzzer operates in black-box settings, but can also integrate with AFL to produce valid inputs that also aim for maximum coverage.</p>
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h2 id="Next-Steps">Next Steps<a class="anchor-link" href="#Next-Steps">&#182;</a></h2><p>This chapter closes our discussion of syntactic fuzzing techniques.</p>
<ul>
<li>In the <a href="Reducer.html">next chapter</a>, we discuss how to <em>reduce failure-inducing inputs</em> after a failure, keeping only those portions of the input that are necessary for reproducing the failure.</li>
<li>The <a href="04_Semantical_Fuzzing.html">next part</a> will go from syntactical to <em>semantical</em> fuzzing, considering code semantics for targeted test generation.</li>
</ul>
</div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h2 id="Exercises">Exercises<a class="anchor-link" href="#Exercises">&#182;</a></h2></div>
</div>
</div>
</div>

<div class="input_markdown">
<div class="cell border-box-sizing text_cell rendered">
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html"><h3 id="Exercise-1:-The-Big-Greybox-Fuzzer-Shoot-Out">Exercise 1: The Big Greybox Fuzzer Shoot-Out<a class="anchor-link" href="#Exercise-1:-The-Big-Greybox-Fuzzer-Shoot-Out">&#182;</a></h3><p>Use our implementations of greybox techniques and evaluate them on a benchmark.  Which technique (and which sub-technique) has which impact and why?  Also take into account the specific approaches of Superion [<a href="https://2019.icse-conferences.org/event/icse-2019-technical-papers-superion-grammar-aware-greybox-fuzzing">Junjie Wang <em>et al</em>, 2019</a>] and Nautilus [<a href="https://www.ndss-symposium.org/ndss-paper/nautilus-fishing-for-deep-bugs-with-grammars/">Cornelius Aschermann <em>et al</em>, 2019</a>], possibly even on the benchmarks used by these approaches.</p>

    
<p><div class="solution_link"><a href="https://mybinder.org/v2/gh/uds-se/fuzzingbook/master?filepath=docs/beta/notebooks/GreyboxGrammarFuzzer.ipynb#Exercises" target=_blank>Use the notebook</a> to work on the exercises and see solutions.</div></p>
</div>
</div>
</div>
</div>

        
<p class="imprint">
<img style="float:right" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" alt="Creative Commons License">
The content of this project is licensed under the
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target=_blank>Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
The source code that is part of the content, as well as the source code used to format and display that content is licensed under the <a href="https://github.com/uds-se/fuzzingbook/blob/master/LICENSE.md#mit-license">MIT License</a>.
<a href="https://github.com/uds-se/fuzzingbook/commits/master/notebooks/GreyboxGrammarFuzzer.ipynb" target=_blank)>Last change: 2024-01-21 13:07:50+01:00</a> &bull; 
<a href="#citation" id="cite" onclick="revealCitation()">Cite</a> &bull;
<a href="https://cispa.de/en/impressum" target=_blank>Imprint</a>
</p>

<script>
function revealCitation() {
    var c = document.getElementById("citation");
    c.style.display = "block";
}
</script>

<div id="citation" class="citation" style="display: none;">
<a name="citation"></a>
<h2>How to Cite this Work</h2>
<p>
Andreas Zeller, Rahul Gopinath, Marcel Böhme, Gordon Fraser, and Christian Holler: "<a href="https://www.fuzzingbook.org/beta/html/GreyboxGrammarFuzzer.html">Greybox Fuzzing with Grammars</a>".  In Andreas Zeller, Rahul Gopinath, Marcel Böhme, Gordon Fraser, and Christian Holler, "<a href="https://www.fuzzingbook.org/beta/">The Fuzzing Book</a>", <a href="https://www.fuzzingbook.org/beta/html/GreyboxGrammarFuzzer.html">https://www.fuzzingbook.org/beta/html/GreyboxGrammarFuzzer.html</a>.  Retrieved 2024-01-21 13:07:50+01:00.
</p>
<pre>
@incollection{fuzzingbook2024:GreyboxGrammarFuzzer,
    author = {Andreas Zeller and Rahul Gopinath and Marcel B{\"o}hme and Gordon Fraser and Christian Holler},
    booktitle = {The Fuzzing Book},
    title = {Greybox Fuzzing with Grammars},
    year = {2024},
    publisher = {CISPA Helmholtz Center for Information Security},
    howpublished = {\url{https://www.fuzzingbook.org/beta/html/GreyboxGrammarFuzzer.html}},
    note = {Retrieved 2024-01-21 13:07:50+01:00},
    url = {https://www.fuzzingbook.org/beta/html/GreyboxGrammarFuzzer.html},
    urldate = {2024-01-21 13:07:50+01:00}
}
</pre>
</div>

      </div>
    </div>
    </article>

 </body>

</html>