* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body {color:#000;margin:0;font-size:100%}
.trytopnav {height:40px;overflow:hidden;min-width:380px;position:absolute;width:100%;top:0;background-color:#E7E9EB}
.topnav-icons {margin-right:8px}
.trytopnav a,.trytopnav button {color:#999}
.w3-bar .w3-bar-item:hover {color:#757575 !important}
a.w3schoolslink {padding:0 !important;display:inline !important}
a.w3schoolslink:hover,a.w3schoolslink:active {text-decoration:underline !important; background-color: transparent !important}
#dragbar{position:absolute;cursor: col-resize;z-index:3;padding:5px}
#shield {display:none;top:0;left:0;width:100%;position:absolute;height:100%;z-index:4}
#framesize {font-family: 'Montserrat', 'Source Sans Pro', sans-serif;font-size: 14px}
#container {background-color:#E7E9EB;width:100%;overflow:auto;position:absolute;top:40px;bottom:0;height:auto}
#textareacontainer, #iframecontainer {float:left;height:100%;width:50%}
#textarea, #textarea2, #iframe {height:100%;width:100%;padding-bottom:10px;padding-top:1px}
#textarea {padding-left:10px;padding-right:5px}
#iframe {padding-left:5px;padding-right:10px;position:relative;color:#fff;font-family: consolas,"courier new",monospace}
#textareawrapper {width:100%;height:100%;overflow:auto;background-color: #fff;position:relative;box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)}
#iframewrapper {width:100%;height:100%;-webkit-overflow-scrolling:touch;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);color:#fff;font-family:consolas,"courier new",monospace}
#textareaCode, #textareaCode2 {background-color: #fff;font-family: consolas,Menlo,"courier new",monospace;font-size:15px;height:100%;width:100%;padding:8px;resize: none;border:none;line-height:normal}
.localhostoutercontainer {position: absolute;width: auto;left:5px;right:10px;background-color: #E7E9EB;height: 30px;z-index: 9}
.localhostoutercontainer.horizontal {left:10px}
.localhostcontainer {position:relative;width:auto;right:0;left:0;z-index:2;padding:4px 12px 6px 12px;border-bottom:1px solid #d9d9d9;background-color:#F1F1F1;border-top-right-radius:10px;border-top-left-radius:10px;overflow:hidden}
.localhostdiv {overflow:hidden;font-family: consolas,Menlo,"courier new",monospace, sans-serif;color:#000;background-color:#fff;font-size:15px;padding-left:10px;border-radius:20px;width:60%;float:left}
.localhostbuttoncontainer {width:20%;min-width:100px;color:#ffc107;float:left;font-size:16px;overflow:auto}
div.localhostbuttoncontainer span{display:inline-block;color:#ffc107;position:relative;padding-bottom:4px;padding-left:2px}
div.localhostbuttoncontainer span:first-child{color:#dc3545;padding-left:12px}
div.localhostbuttoncontainer span:last-child{color:#04AA6D;padding-left:2px}
#filenamecontainer {position:absolute;text-align:center;z-index:4;width:100%}
.CodeMirror.cm-s-default {line-height:normal;padding: 4px;height:100%;width:100%}
#filenamecontainer span {opacity:0.9;padding:1px 6px;font-family:Consolas, sans-serif;background-color:#E7E9EB;font-size:16px}
#iframeResult {background-color: #000;color:#fff;font-family: consolas,"courier new",monospace!important;padding:8px;height:100%;width:100%}
#iframeResult * {font-family: consolas,"courier new",monospace!important}
#stackV {background-color:#999}
#stackV:hover {background-color:#BBB !important}
#stackV.horizontal {background-color:transparent}
#stackV.horizontal:hover {background-color:#BBB !important}
#stackH.horizontal {background-color:#999}
#stackH.horizontal:hover {background-color:#999 !important}
#textareacontainer.horizontal,#iframecontainer.horizontal {height:50%;float:none;width:100%}
#textarea.horizontal {height:100%;padding-left:10px;padding-right:10px}
#iframe.horizontal {height:100%;padding-right:10px;padding-bottom:10px;padding-left:10px}
#container.horizontal {min-height:200px;margin-left:0}
#tryitLeaderboard {overflow:hidden;text-align:center;margin-top:5px;height:90px}
.w3-dropdown-content {width:350px}
#breadcrumb ul {font-family:'Montserrat', 'Source Sans Pro', sans-serif;list-style: none;display: inline-table;padding-inline-start: 1px;font-size: 12px;margin-block-start: 6px;margin-block-end: 6px}
#breadcrumb li {display: inline}
#breadcrumb a {float: left;background: #E7E9EB;padding: 3px 10px 3px 20px;position: relative;margin: 0 5px 0 0;text-decoration: none;color: #555}
#breadcrumb a:after {content: "";border-top: 12px solid transparent;border-bottom: 12px solid transparent;border-left: 12px solid #E7E9EB;position: absolute;right: -12px;top: 0;z-index: 1}
#breadcrumb a:before {content: "";border-top: 12px solid transparent;border-bottom: 12px solid transparent;border-left: 12px solid #fff;position: absolute;left: 0;top: 0}
#breadcrumb ul li:first-child a:before {display: none}
#breadcrumb ul:last-child li {padding-right: 5px}
#breadcrumb ul li a:hover {background: #04AA6D;color:#fff}
#breadcrumb ul li a:hover:after {border-left-color: #04AA6D;color:#fff}
#breadcrumb li:last-child {display: inline-block!important;margin-top: 3px!important}
#runbtn {background-color:#04AA6D;color:white;font-family: 'Source Sans Pro', sans-serif;font-size:18px;padding:6px 25px;margin-top:4px;border-radius:5px;word-spacing:10px}
#runbtn:hover {background-color: #059862 !important;color:white!important}
#getwebsitebtn:hover {background-color: #059862 !important;color:white!important}
@media screen and (max-width: 727px) {#breadcrumb {display:none} #tryhome {display:block}}
@media screen and (max-width: 467px) {.w3-dropdown-content {width:100%}}
@media only screen and (max-device-width: 768px) {#iframewrapper {overflow: auto} #container {min-width:310px}.stack {display:none} #tryhome {display:block} .trytopnav {min-width:310px}}
#runloadercontainer {display:none;position:absolute;background-color:#000;z-index:9}
#runloader {margin:auto;border: 10px solid #333;border-top: 10px solid #04AA6D;border-radius: 50%;max-width: 150px;max-height: 150px;animation: spin 2s linear infinite;position:relative}
@font-face {font-family: 'fontawesome';src: url('../lib/fonts/fontawesome8deb.eot?14663396');
    src: url('../lib/fonts/fontawesome8deb.eot?14663396#iefix') format('embedded-opentype'),
    url('../lib/fonts/fontawesome8deb.woff?14663396') format('woff'),
    url('../lib/fonts/fontawesome8deb.ttf?14663396') format('truetype'),
    url('../lib/fonts/fontawesome8deb.svg?14663396#fontawesome') 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; transform: translate(0, 0)}
.fa-2x {font-size: 2em}
.fa-home:before {content: '\e800';}
.fa-save:before {content: '\e804';}
.fa-rotate:before {content: '\e813';}
.fa-menu:before {content: '\f0c9';}
.fa-adjust:before {content: '\e80b';}
.loader {border: 6px solid #f3f3f3; /* Light grey */border-top: 6px solid #3498db; /* Blue */border-radius: 50%;width: 60px;height: 60px;animation: spin 2s linear infinite}
#saveLoader {margin: 20px}
@keyframes spin {0% { transform: rotate(0deg)} 100% { transform: rotate(360deg)}}
.tabitem, #resttab {position:absolute;z-index:2;font-family: Consolas, 'Source Code Pro', Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;padding:4px 15px;width:70px;cursor:pointer}
.tabitem {background-color:lightgray;color:#000;border-top-left-radius:5px;border-top-right-radius:5px;border: 1px solid #E7E9EB;border-bottom:none}
#resttab {cursor:default;z-index:1;background-color:#E7E9EB;border-bottom: 1px solid #E7E9EB;width:100%;left:0}
.tabitem .tabselected {background-color:#fff;border: 1px solid #fff}
.tabitem:hover {background-color:#bfbfbf}
.tabitem .tabselected:hover {background-color:#fff}
.fa {padding: 10px 10px!important}
a.topnav-icons, a.topnav-icons.fa-home, a.topnav-icons.fa-menu, button.topnav-icons.fa-adjust {font-size: 28px!important}
.darktheme .tabitem {background-color: #4b5b68;color: #fff !important;border: 1px solid #444;border-bottom-color:rgb(21,32,43)}
.darktheme .tabitem .tabselected {background-color:rgb(21,32,43);border: 1px solid rgb(21,32,43)}
.darktheme .tabitem:hover {background-color: #404e59}
.darktheme .tabitem.tabselected:hover {background-color:rgb(21,32,43)}
.darktheme #resttab {background-color:#38444d;border-bottom: 1px solid #38444d}
.darktheme #breadcrumb li {color:#fff}
.darktheme #breadcrumb a {background-color:#38444d;color: #ddd}
.darktheme #breadcrumb a:after {border-left: 12px solid #616161;border-left: 12px solid #38444d}
.darktheme #breadcrumb a:before {border-left: 12px solid rgb(40, 44, 52);border-left: 12px solid #1d2a35}
.darktheme .currentcrumb {color:#ddd}
body.darktheme .localhostoutercontainer {background-color: #38444d}
body.darktheme #filenamecontainer span {background-color:#555;color:#E7E9EB}
body.darktheme {background-color:#1d2a35}
body.darktheme #tryitLeaderboard {background-color:#1d2a35}
body.darktheme .trytopnav {background-color:#38444d;color:#ddd}
body.darktheme .trytopnav a {color:#ddd}
body.darktheme #container {background-color:#38444d}
body.darktheme #textareaCode {background-color:rgb(40, 44, 52);color:#fff}
body.darktheme #textareawrapper {background-color:rgb(21,32,43)}
body.darktheme .tabs {background-color:#38444d}
body.darktheme .tab {background: rgb(21,32,43);color:#fff;opacity:0.5}
body.darktheme .tab.active {background: rgb(21,32,43);color:#fff;opacity:1}
body.darktheme ::-webkit-scrollbar {width:12px;height:3px}
body.darktheme ::-webkit-scrollbar-track-piece {background-color:#000}
body.darktheme ::-webkit-scrollbar-thumb {height:50px;background-color:#38444d}
body.darktheme ::-webkit-scrollbar-thumb:hover {background-color: #4b5b68}
.darktheme #file1filetab {border-right:1px solid rgb(21,32,43)}