.inline-icon svg {
    margin-right: .375em;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background: transparent
}
ul.inline-list {
    font-size: .875em;
    line-height: 1.14286em
}
ul.inline-list:after {
    clear: both;
    content: "";
    display: table
}
ul.inline-list li {
    list-style-type: none;
    display: inline-block;
    white-space: nowrap
}
ul.inline-list li:after {
    content: "|";
    padding: 0 .375em
}
ul.inline-list li:last-child:after {
    content: ""
}
.svg-container {
    min-width: 200px
}
.svg-container.loading .svg {
    position: absolute;
    top: -10000px
}
#deprecation-notice {
    background-color: #4FAF62;
    background-image: linear-gradient(180deg, #4FAF62, #8ca440);
    padding: 1.5em;
    margin: 1.5em;
    box-shadow: 0 0 10px #000
}
#deprecation-notice:after {
    clear: both;
    content: "";
    display: table
}
#deprecation-notice h1 {
    font-family: Bangers, "cursive"
}
#deprecation-notice p {
    margin-top: 1.5em
}
#content {
    /* padding: 1.5em */
}
#content .copy {
    background-color: #cbcbba;
    padding: .75em
}
#content .changelog dt {
    font-weight: 700
}
#content .changelog dd:before {
    content: "\BB";
    font-weight: 700;
    margin-right: .75em
}
#content .error {
    overflow: hidden
}
#content .error h1 {
    font-size: 2em;
    line-height: 1.5em;
    font-weight: 700;
    float: left
}
#content .error blockquote {
    background-color: #4FAF62;
    position: relative;
    padding: 1.5em;
    display: inline-block;
    font-style: italic;
    float: right
}
#content .error blockquote:before {
    content: "\201C";
    left: 0;
    top: 0
}
#content .error blockquote:after,
#content .error blockquote:before {
    font-size: 4em;
    line-height: 1.5em;
    position: absolute;
    font-style: normal
}
#content .error blockquote:after {
    content: "\201D";
    right: 0;
    bottom: -.5em
}
#content .error p {
    clear: left
}
#content .documentation h1 {
    font-size: 2em;
    line-height: 1.5em;
    font-weight: 700
}
#content .documentation h2 {
    font-weight: 700
}
#content .documentation h2,
#content .documentation h3 {
    font-size: 1em;
    line-height: 1.5em
}
#content .documentation h3:before {
    content: "\BB";
    font-weight: 700;
    margin-right: .375em
}
#content .documentation h1,
#content .documentation h2,
#content .documentation h3 {
    clear: both
}
#content .documentation h2,
#content .documentation h3 {
    margin-bottom: 1.5em
}
#content .documentation div.section,
#content .documentation section {
    margin: 1.5em 0;
    overflow: hidden
}
#content .documentation p {
    margin: 1.5em 0
}
#content .documentation figure {
    line-height: 0;
    background: #fff;
    margin: .375em;
    box-shadow: 0 0 10px #000
}
#content .documentation figure.shift-right {
    float: right;
    margin-left: .75em
}
#content .documentation figure.shift-left {
    float: left;
    margin-right: .75em
}
#content .documentation figure .svg {
    margin: 0;
    text-align: center
}
#content .documentation figure figcaption {
    font-size: 1em;
    line-height: 1.5em;
    background: #4FAF62;
    font-weight: 700;
    padding: 0 .375em
}
#content .application {
    position: relative
}
#content .application:after {
    clear: both;
    content: "";
    display: table
}
#content .application textarea {
    font-size: 1em;
    line-height: 1.5em;
    border: 0 none;
    outline: none;
    background: #ddd;
    padding: 0 .5em;
    width: 100%!important;
    box-sizing: border-box;
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace
}
#content .application textarea:-moz-placeholder,
#content .application textarea::-moz-placeholder {
    color: #6b6659
}
#content .application textarea:-ms-input-placeholder {
    color: #6b6659
}
#content .application textarea::-webkit-input-placeholder {
    color: #6b6659
}
#content .application button {
    font-size: 1em;
    line-height: 1.5em;
    width: 100px;
    border: 0 none;
    background-color: #4FAF62;
    float: left;
    cursor: pointer;
    color:white;
}
#content .application ul {
    float: right;
    display: none
}
body.has-results #content .application ul {
    display: inline-block
}
#content .application ul.hide-download .download,
#content .application ul.hide-permalink .download:after,
#content .application ul.hide-permalink .permalink {
    display: none
}
#content .results {
    margin-top: 1.5em;
    display: none
}
body.has-error #content .results,
body.has-results #content .results,
body.is-loading #content .results {
    display: block
}
.progress {
    width: 50%;
    height: .75em;
    border: 1px solid #8ca440;
    overflow: hidden;
    margin: 1.5em auto
}
.progress div {
    background-color: #4FAF62;
    background-size: 3em 3em;
    background-repeat: repeat-x;
    height: 100%;
    -webkit-animation: progress 1s infinite linear;
    animation: progress 1s infinite linear
}
@-webkit-keyframes progress {
    0% {
        background-position-x: 3em
    }
    to {
        background-position-x: 0
    }
}
@keyframes progress {
    0% {
        background-position-x: 3em
    }
    to {
        background-position-x: 0
    }
}
#error {
    background: #b3151a;
    color: #fff;
    padding: 0 .5em;
    white-space: pre;
    font-family: monospace;
    font-weight: 700;
    display: none;
    overflow-x: auto
}
body.has-error #error {
    display: block
}
#warnings {
    font-size: 1em;
    line-height: 1.5em;
    font-weight: 700;
    background-color: #f8ca00;
    display: none
}
#warnings li {
    margin: .375em
}
body.has-results #warnings {
    display: block
}
#regexp-render {
    background: #fff;
    width: 100%;
    /* overflow: auto; */
    text-align: center;
    display: none
}
body.has-results #regexp-render,
body.is-loading #regexp-render {
    display: block
}
#open-iconic {
    display: none
}
#open-iconic path {
    stroke: none;
    fill-opacity: 1
}
footer {
    padding: 0 1.5em
}
footer img {
    vertical-align: middle;
    width: 80px;
    height: 15px
}