/*
███████ ██████  ██ ████████  ██████  ██████
██      ██   ██ ██    ██    ██    ██ ██   ██
█████   ██   ██ ██    ██    ██    ██ ██████
██      ██   ██ ██    ██    ██    ██ ██   ██
███████ ██████  ██    ██     ██████  ██   ██
2021 ~ Mark Hillard | (mark@)markhillard.com
*/


/* CSS Reset
================================================== */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}

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

body { line-height:1; }
ul,ol { list-style:none; }
blockquote,q { quotes:none; }
blockquote::before,blockquote::after,q::before,q::after { content:none; }
table { border-collapse:collapse; border-spacing:0; }

button,input:not([type="checkbox"],[type="radio"]),textarea { appearance:none; background:none; }
button::-moz-focus-inner,input::-moz-focus-inner { border:0; padding:0; }

* { -webkit-tap-highlight-color:rgba(0, 0, 0, 0); -webkit-tap-highlight-color:transparent; }

*,*::before,*::after { box-sizing:border-box; }
*,*:focus { outline:none; }



/* Global Page Styles
================================================== */

html,body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
font-family:"Fira Code", "Source Code Pro", monospace;
font-size:100%;
font-weight:400;
height:100%;
line-height:1.45;
overflow:hidden;
}

/* Highlighting */
::selection { background-color:#282a36; color:#fff; }



/* CodeMirror Overrides
================================================== */

.CodeMirror {
/*font-family:"Fira Code", "Source Code Pro", monospace; */
font-feature-settings:"calt" 1;
font-variant-ligatures:contextual;
height:100%;
}

.CodeMirror-lines {
padding:0;
}

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
background-color:transparent;
}

.CodeMirror-overlayscroll-horizontal {
height:10px;
transition:height ease 300ms;
}

.CodeMirror-overlayscroll-horizontal:hover,
.CodeMirror-overlayscroll-horizontal.hold {
height:15px;
}

.CodeMirror-overlayscroll-vertical {
transition:width ease 300ms;
width:10px;
}

.CodeMirror-overlayscroll-vertical:hover,
.CodeMirror-overlayscroll-vertical.hold {
width:15px;
}

.CodeMirror-overlayscroll-horizontal div,
.CodeMirror-overlayscroll-vertical div {
background:#333540;
border-radius:0;
}

.CodeMirror-matchingtag,
.CodeMirror-matchingbracket {
background:none;
border-bottom:1px solid #f8f8f0;
text-decoration:none !important;
}

.CodeMirror-nonmatchingbracket {
background-color:#dc3545;
color:#fff !important;
}

.CodeMirror-guttermarker-subtle {
color:#6d8a88;
}

.CodeMirror-foldmarker {
background-color:#0e0f13;
color:#fff;
font-family:inherit;
padding:0 7px;
text-shadow:none;
}

.CodeMirror-lint-marker-error,
.CodeMirror-lint-marker-warning {
cursor:help;
height:14px;
left:5px;
top:-2px;
width:14px;
}

.CodeMirror-lint-mark-error,
.CodeMirror-lint-mark-warning {
background-image:none;
color:#fff !important;
cursor:help;
}

.CodeMirror-lint-mark-error {
background-color:#dc3545;
}

.CodeMirror-lint-mark-warning {
background-color:#ffc107;
}

.CodeMirror-lint-marker-error,
.CodeMirror-lint-message-error {
background-image:url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJ0aW1lcy1jaXJjbGUiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS10aW1lcy1jaXJjbGUgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZGMzNTQ1IiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMTIxLjYgMzEzLjFjNC43IDQuNyA0LjcgMTIuMyAwIDE3TDMzOCAzNzcuNmMtNC43IDQuNy0xMi4zIDQuNy0xNyAwTDI1NiAzMTJsLTY1LjEgNjUuNmMtNC43IDQuNy0xMi4zIDQuNy0xNyAwTDEzNC40IDMzOGMtNC43LTQuNy00LjctMTIuMyAwLTE3bDY1LjYtNjUtNjUuNi02NS4xYy00LjctNC43LTQuNy0xMi4zIDAtMTdsMzkuNi0zOS42YzQuNy00LjcgMTIuMy00LjcgMTcgMGw2NSA2NS43IDY1LjEtNjUuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsMzkuNiAzOS42YzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMTIgMjU2bDY1LjYgNjUuMXoiPjwvcGF0aD48L3N2Zz4=");
}

.CodeMirror-lint-marker-warning,
.CodeMirror-lint-message-warning {
background-image:url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJleGNsYW1hdGlvbi10cmlhbmdsZSIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWV4Y2xhbWF0aW9uLXRyaWFuZ2xlIGZhLXctMTgiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTc2IDUxMiI+PHBhdGggZmlsbD0iI2ZmYzEwNyIgZD0iTTU2OS41MTcgNDQwLjAxM0M1ODcuOTc1IDQ3Mi4wMDcgNTY0LjgwNiA1MTIgNTI3Ljk0IDUxMkg0OC4wNTRjLTM2LjkzNyAwLTU5Ljk5OS00MC4wNTUtNDEuNTc3LTcxLjk4N0wyNDYuNDIzIDIzLjk4NWMxOC40NjctMzIuMDA5IDY0LjcyLTMxLjk1MSA4My4xNTQgMGwyMzkuOTQgNDE2LjAyOHpNMjg4IDM1NGMtMjUuNDA1IDAtNDYgMjAuNTk1LTQ2IDQ2czIwLjU5NSA0NiA0NiA0NiA0Ni0yMC41OTUgNDYtNDYtMjAuNTk1LTQ2LTQ2LTQ2em0tNDMuNjczLTE2NS4zNDZsNy40MTggMTM2Yy4zNDcgNi4zNjQgNS42MDkgMTEuMzQ2IDExLjk4MiAxMS4zNDZoNDguNTQ2YzYuMzczIDAgMTEuNjM1LTQuOTgyIDExLjk4Mi0xMS4zNDZsNy40MTgtMTM2Yy4zNzUtNi44NzQtNS4wOTgtMTIuNjU0LTExLjk4Mi0xMi42NTRoLTYzLjM4M2MtNi44ODQgMC0xMi4zNTYgNS43OC0xMS45ODEgMTIuNjU0eiI+PC9wYXRoPjwvc3ZnPg==");
}

.CodeMirror-lint-marker-multiple {
cursor:help;
right:-1px;
top:-4px;
}

.CodeMirror-lint-tooltip {
background-color:#0e0f13;
border-radius:0;
border:none;
color:#fff;
font-family:inherit;
font-size:.9rem;
padding:5px 9px;
transition:none;
}

.CodeMirror-lint-message-error,
.CodeMirror-lint-message-warning {
background-position:top 3px left;
background-repeat:no-repeat;
background-size:14px;
padding-left:22px;
}

.cm-trailingspace {
border-bottom:1px dotted #dc3545;
}



/* jQuery UI Overrides
================================================== */

.ui-resizable-e {
background-color:#0e0f13;
cursor:col-resize !important;
right:-16px !important;
width:16px !important;
}

/* Mobile & Tablet */
@media only screen and (max-width:800px) {
    .ui-resizable-handle {
    display:none !important;
    }
}



/* Utility Bar
================================================== */

#utils {
background-color:#282a36;
border-bottom:16px solid #0e0f13;
display:flex;
flex-direction:row;
}

#utils > div {
font-size:0;
}

.logo {
width:43px;
}

.logo a {
color:#fff;
display:block;
font-size:2rem;
font-weight:700;
height:auto;
line-height:43px;
margin:0 auto;
text-align:center;
text-decoration:none;
width:100%;
}

.logo a:hover {
background-color:#0e0f13;
}

.code-tools {
position:absolute;
right:266px;
}

.code-swap span,
.code-tools span {
background-color:#282a36;
border-right:1px solid #0e0f13;
color:#6d8a88;
cursor:pointer;
display:inline-block;
font-size:1rem;
font-weight:700;
height:43px;
padding:10px 15px;
text-decoration:none;
}

.code-swap span.code-swap-html,
.code-tools span.toggle-lineWrapping {
border-left:1px solid #0e0f13;
}

.code-swap span:hover,
.code-tools span:hover {
background-color:#0e0f13;
}

.code-swap span.active,
.code-tools span.active,
.code-tools span:not([class^="toggle"]):active {
background-color:#6d8a88 !important;
color:#333540;
}

.code-swap span.toggle-view,
.code-swap span.toggle-preview,
.code-tools span.toggle-tools {
display:none;
}

.code-swap span svg,
.code-tools span svg {
margin-left:5px;
}

/* Custom */
@media only screen and (max-width:1538px) {
    .code-tools span {
    border-left:1px solid #0e0f13;
    display:block;
    height:auto;
    position:relative;
    text-align:right;
    z-index:100;
    }

    .code-tools span:last-child {
    border-bottom:1px solid #0e0f13;
    }

    .code-tools span.toggle-tools {
    display:block;
    }

    .code-tools span.toggle-tools ~ span {
    display:none;
    }

    .code-tools span.toggle-tools.active,
    .code-tools span.toggle-tools:active {
    background-color:#0e0f13 !important;
    color:#6d8a88;
    }

    .code-tools span.toggle-tools.active ~ span {
    border-top:1px solid #0e0f13;
    display:block;
    }
}

/* Mobile & Tablet */
@media only screen and (max-width:800px) {
    .logo {
    position:absolute;
    }

    .code-tools {
    right:0;
    }

    .code-tools span {
    border-right:none;
    }

    .code-swap {
    left:43px;
    position:absolute;
    }

    .code-swap span {
    border-left:1px solid #0e0f13;
    display:block;
    height:auto;
    position:relative;
    text-align:left;
    z-index:100;
    }

    .code-swap span:last-child {
    border-bottom:1px solid #0e0f13;
    }

    .code-swap span.toggle-view,
    .code-swap span.toggle-preview {
    display:block;
    }

    .code-swap span.toggle-view ~ span {
    display:none;
    }

    .code-swap span.toggle-view.enabled,
    .code-swap span.toggle-view:active {
    background-color:#0e0f13 !important;
    color:#6d8a88;
    }

    .code-swap span.toggle-view.enabled ~ span {
    border-top:1px solid #0e0f13;
    display:block !important;
    }
}

/* IE10+ */
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
    .toggle-lineWrapping {
    padding:11px 15px 9px !important;
    }
}

.toggle-lineWrapping.css,
.toggle-lineWrapping.js {
position:absolute;
visibility:hidden;
}

.reset-editor:active,
.clear-editor:active,
.run-script:active {
background-color:#6d8a88;
color:#333540;
}



/* Font Size
================================================== */

.font-size {
border-right:1px solid #0e0f13;
position:relative;
}

.font-size > input {
appearance:none;
background:none;
background-color:#6d8a88;
border:none;
box-shadow:0 1px 0 #0e0f13;
color:#282a36;
display:block;
font-family:"Fira Code", "Source Code Pro", monospace;
font-size:1rem;
font-weight:700;
height:43px;
padding:11px 15px 11px 52px;
width:128px;
}

.font-size > label {
color:#282a36;
cursor:text;
font-size:1rem;
left:12px;
position:absolute;
top:13px;
}

/* Mobile & Tablet */
@media only screen and (max-width:800px) {
    .font-size {
    border-top:1px solid #0e0f13;
    margin-top:43px;
    }
}



/* cdnjs Search
================================================== */

.tt-hint {
color:#48565c !important;
}

.tt-menu {
margin-top:1px;
max-height:calc(100vh - 44px);
overflow-x:hidden;
overflow-y:auto;
text-align:left;
width:100%;
}

.tt-menu .lib {
line-height:1.2;
}

.tt-menu .no-match {
background-color:#6d8a88;
color:#282a36;
font-size:1rem;
font-weight:700;
padding:11px 15px;
}

.tt-menu .version,
.tt-menu .description {
color:#48565c;
font-size:.8rem;
font-weight:500;
}

.tt-suggestion {
background-color:#6d8a88;
color:#282a36;
cursor:pointer;
font-size:1rem;
font-weight:700;
padding:11px 15px;
word-wrap:break-word;
}

.tt-cursor,
.tt-suggestion:hover {
background-color:#0e0f13;
color:#6d8a88;
}

/* Mobile & Tablet */
@media only screen and (max-width:800px) {
    .cdnjs-search {
    border-top:1px solid #0e0f13;
    margin-top:43px;
    position:relative;
    width:100%;
    }

    .cdnjs-search .query {
    width:calc(100vw - 129px);
    }

    .tt-menu {
    max-height:calc(100vh - 88px);
    }
}



/* Editor
================================================== */

#editor {
height:calc(100vh - 59px);
}

#preview {
height:100%;
width:calc(100% - 16px);
}

.preview-width {
background-color:#0e0f13;
bottom:0;
color:#fff;
display:none;
font-size:1rem;
left:16px;
margin:0 auto;
padding:5px 10px 5px 5px;
position:absolute;
}

.code-pane {
width:calc(50% - 16px);
}

.preview-pane {
height:calc(100vh - 59px);
position:relative;
width:calc(50% + 16px);
}

[class^="code-pane-"] {
height:calc(100vh - 59px);
position:relative;
}

/* Mobile & Tablet */
@media only screen and (max-width:800px) {
    #editor,
    #preview,
    .code-pane,
    .preview-pane,
    [class^="code-pane-"] {
    height:calc(100vh - 103px);
    margin-left:0 !important;
    width:100% !important;
    width:100vw !important;
    }
}



/* Loading Indicator
================================================== */

#load {
background-color:#282a36;
height:100%;
opacity:1;
position:fixed;
transition:opacity 300ms ease-out;
width:100%;
z-index:9999;
}

.lds-ellipsis {
display:inline-block;
height:39px;
left:50%;
position:absolute;
position:relative;
top:50%;
transform:translate(-50%, -50%);
width:57px;
}

.lds-ellipsis p {
color:#fff;
font-size:.83rem;
margin:0 auto;
position:absolute;
text-align:center;
}

.lds-ellipsis div {
animation-timing-function:cubic-bezier(0, 1, 1, 0);
background:#fff;
border-radius:50%;
height:11px;
position:absolute;
top:27px;
width:11px;
}

.lds-ellipsis div:first-child {
animation:lds-ellipsis1 600ms infinite;
left:4px;
}

.lds-ellipsis div:nth-child(2) {
animation:lds-ellipsis2 600ms infinite;
left:4px;
}

.lds-ellipsis div:nth-child(3) {
left:26px;
animation:lds-ellipsis2 600ms infinite;
}

.lds-ellipsis div:last-child {
animation:lds-ellipsis3 600ms infinite;
left:45px;
}

@keyframes lds-ellipsis1 {
    0% { transform:scale(0); }
    100% { transform:scale(1); }
}

@keyframes lds-ellipsis2 {
    0% { transform:translate(0, 0); }
    100% { transform:translate(19px, 0); }
}

@keyframes lds-ellipsis3 {
    0% { transform:scale(1); }
    100% { transform:scale(0); }
}