.markdown-textarea header {
    position: relative;
    padding: 62px 6px 0;
}

.markdown-textarea nav {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-weight: 600;
}

.markdown-textarea header, .markdown-textarea article, .markdown-textarea footer nav {
    max-width: 720px;
    margin: 0 auto;
}

.markdown-textarea body {
    padding: 8px;
}

.nav-links {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
}

.nav-links > a {
    margin-left: 17px;
    padding-bottom: 3px;
}

a.logo {
    padding-left: 38px;
    letter-spacing: -1px;
    background-size: 28px 28px;
    background-position: top left;
    background-repeat: no-repeat;
    font-size: 24px;
    line-height: 30px;
}

.markdown-textarea footer {
    border-top: 1px solid #f2f2f2;
}

.markdown-textarea article {
    margin-bottom: 64px;
}

.markdown-textarea article .main-header {
    text-align: center;
}

.markdown-textarea article p a {
    text-decoration: underline;
}

.markdown-textarea footer .container {
    margin-top: 16px;
    padding-bottom: 64px;
}

/*
    Examples page styles
    ----
 */

ul.grid-list {
    list-style: none;
    padding: 0;
    margin: 36px 0 -36px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

ul.grid-list > li {
    display: block;
    max-width: 340px;
    min-width: 40%;
    width: 100%;
    margin-bottom: 36px;
    font-size: 14px;
    line-height: 20px;
    margin-left: 8px;
    margin-right: 8px;
}

ul.grid-list h2 {
    margin: 0 0 9px;
    line-height: 1;
    font-size: 20px;
}

ul.grid-list {
    text-align: left;
}

.markdown-textarea a:visited {
    color: inherit;
}

.markdown-textarea footer a {
    text-decoration: underline;
}

.markdown-textarea a {
    color: #333333;
}

.markdown-textarea a:hover {
    color: #5890ff;
}

.markdown-textarea a {
    text-decoration: none;
}

/*
 * Markdown example
 */
.markdown-textarea {
    width: 100%;
    min-height: 150px;
}


/*
 * Extension example
 */
.rte-main figure {
    margin-top: 16px;
    margin-bottom: 8px;
    width: 100%;
    text-align: center;
}

.rte-main figure.rte-selected {
    outline: transparent;
}

.rte-main figure.rte-selected img {
    outline: 2px solid #8cf;
}

.markdown-textarea figure input.caption  {
    color: #555;
    width: 100%;
    border: none;
    height: 24px;
    resize: none;
    caret-color: #333333;
    text-align: center;
    outline: none;
}

/*
 * create spec example
 */
li.todo-list-item {
    margin: 5px;
    list-style-type: none;
    display: flex;
    border: 1px solid #ccc;
    border-radius: 8px;
}

li.todo-list-item input {
    margin-right: 8px;
}

.todo-list-item-contents {
    width: 100%;
    margin-top: 5px;
}


div.checkbox {
    position: relative;
    display: inline-block;
    margin-top: 9px;
    margin-left: 10px;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}


div.checkbox::before {
    position: absolute;
    left: 0;
    top: 50%;
    height: 50%;
    width: 3px;
    background-color: #336699;
    content: "";
    transform: translateX(5px) rotate(-45deg);
    transform-origin: left bottom;
}

div.checkbox::after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: #336699;
    content: "";
    transform: translateX(5px) rotate(-45deg);
    transform-origin: left bottom;
}


div.checkbox.not-checked::before {
    background-color: transparent;
}

div.checkbox.not-checked::after {
    background-color: transparent;
}


.not-found {
    padding: 16px;
    text-align: center;
}
/*
  elm-hot creates an additional div wrapper around the app to make HMR possible.
  This could break styling in development mode if you are using Elm UI.

  More context in the issue:
    https://github.com/halfzebra/create-elm-app/issues/320
*/
[data-elm-hot="true"] {
  height: inherit;
}

.markdown-textarea body {
  font-family: 'Source Sans Pro', 'Trebuchet MS', 'Lucida Grande', 'Bitstream Vera Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  text-align: center;
  color: #293c4b;
}

.markdown-textarea article h1, .markdown-textarea article h2, .markdown-textarea article h3, .markdown-textarea article p {
  text-align: left;
}

article > h1 {
  font-size: 30px;
  margin: 24px 8px;
}


td, th {
  border: 1px solid #ccc;
}


.page-main {
  background:
          rgb(255, 255, 255) none repeat scroll 0% 0%;
  max-width: 42em;
  margin: 20px auto;
  padding: 20px;
}
.modal-container {
    border: 1px solid #333;
    padding: 10px;
    background-color: white;
    border-radius: 0 0 0 0;
    position: fixed;
    overflow: hidden;
    transition: transform 0.2s ease-out;
    z-index: 200;
}

.modal-container h3 {
    text-align: center;
}

.modal--top .modal-container {
    top: 0;
    left: 0;
    width: 100%;
    border-width: 0 0 1px 0;
    transform: translate(0%, -100%);
}
.modal--top.modal-isOpen .modal-container {
    transform: translate(0%, 0%);
}

.modal--right .modal-container {
    top: 0;
    right: 0;
    height: 100%;
    border-width: 0 0 0 1px;
    transform: translate(100%, 0%);
}
.modal--right.modal-isOpen .modal-container {
    transform: translate(0%, 0%);
}

.modal--bottom .modal-container {
    bottom: 0;
    left: 0;
    width: 100%;
    border-width: 1px 0 0 0;
    transform: translate(0%, 100%);
}
.modal--bottom.modal-isOpen .modal-container {
    transform: translate(0%, 0%);
}

.modal--left .modal-container {
    top: 0;
    left: 0;
    height: 100%;
    border-width: 0 1px 0 0;
    transform: translate(-100%, 0%);
}
.modal--left.modal-isOpen .modal-container {
    transform: translate(0%, 0%);
}

.modal-backdrop {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0);
    z-index: 100;
    display: none;
}
.modal-isOpen .modal-backdrop {
    background: rgba(0,0,0,0.4);
    display: block;
}
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
    padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
    list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
    max-width: 100%;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
    margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.rte-main {
    margin-top: 16px;
    min-height: 100px;
    text-align: left;
    outline: none;
    user-select: text;
    -webkit-user-select: text;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.rte-main img {
    min-width: 20px;
    min-height: 20px;
    max-width: 200px;
    border: 1px solid #f2f2f2;
}

.rte-hide-caret {
    caret-color: transparent;
}

/*
 * Workaround for https://github.com/mweiss/elm-rte-toolkit/issues/16, iOS has issues
 * changing caret color on elements that are already selected.
 */
@supports (-webkit-touch-callout: none) {
    .rte-hide-caret {
        caret-color: auto;
    }
}

.rte-button {
    color: #999;
    cursor: pointer;
    margin-right: 16px;
    padding: 2px 0;
    display: inline-block;
}

.rte-button.rte-active {
    color: #5890ff;
}

.rte-button.rte-disabled {
    color: #ccc;
    pointer-events: none;
}

.rte-controls {
    text-align: left;
    font-size: 14px;
    padding-bottom: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    margin-left: 16px;
}

.rte-controls-container {
    border-bottom: 1px solid #f2f2f2;
    text-align: left;
}

.editor-container {
    padding: 12px 16px 16px 16px;
    border: 1px solid #f2f2f2;
}

.rte-selected {
    outline: 2px solid #8cf;
}


.rte-main a {
    color: blue;
}

.rte-main a:hover {
    color: darkblue;
}

.rte-main a:visited {
    color: blueviolet;
}

.rte-main blockquote {
    padding-left: 16px;
    border-left: 2px solid #ccc
}

.rte-main pre {
    white-space: pre-wrap;
}

.rte-main p {
    margin-bottom: 1em;
    margin-top: 1em;
}