* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  color:#000000;
  margin:0px;
  font-size:100%;
}
.swal2-container{
  font-family: consolas,Menlo,"courier new",monospace;

}
.trytopnav {
  height:40px;
  overflow:hidden;
  min-width:380px;
  position:absolute;
  width:100%;
  top:99px;

  background-color:#E7E9EB;
}
.topnav-icons {
  margin-right:8px;
}
.trytopnav a {
  color:#999999;
}
.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:144px;

  bottom:0;
  height:auto;
}
#textareacontainer, #iframecontainer {
  float:left;
  height:100%;
  width:50%;
}
#textarea, #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;
}
#textareawrapper {
  width:100%;
  height:100%;
  background-color: #ffffff;
  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: #ffffff;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#textareaCode, #innerCode {
  background-color: #ffffff;
  font-family: consolas,Menlo,"courier new",monospace;
  font-size:15px;
  height:100%;
  width:100%;
  padding:8px;
  resize: none;
  border:none;
  line-height:normal;
  margin-top: 0;
}
.CodeMirror.cm-s-default {
  line-height:normal;
  padding: 4px;
  height:100%;
  width:100%;
}
#iframeResult, #iframeSource {
  background-color: #ffffff;
  height:100%;
  width:100%;
}
#stackV {background-color:#999999;}
#stackV:hover {background-color:#BBBBBB !important;}
#stackV.horizontal {background-color:transparent;}
#stackV.horizontal:hover {background-color:#BBBBBB !important;}
#stackH.horizontal {background-color:#999999;}
#stackH.horizontal:hover {background-color:#999999 !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;
}
.darktheme #breadcrumb li {
  color:#fff;
}
.darktheme #breadcrumb a {
  background:#616161;
  color: #ddd;
}
.darktheme #breadcrumb a:after {
  border-left: 12px solid #616161;
}
.darktheme #breadcrumb a:before {
  border-left: 12px solid rgb(40, 44, 52);
}
.darktheme .currentcrumb {
  color:#ddd;
}
#runbtn {
  background-color:#ffc107;
  color:white;
  font-family: 'Source Sans Pro', sans-serif;
  font-size:18px;
  padding:6px 20px;
  margin-top:6px;
  border-radius:5px;
  word-spacing:10px;
  border-color: transparent;
  border: none;
  outline: 0;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
}
#runbtn:hover {
  background-color: #059862 !important;
  color:white!important;
}
#getwebsitebtn {
  background-color:#04AA6D;
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-size: 18px;
  padding:6px 15px;
  margin-top:4px;
  margin-right: 10px;
  display: block;
  float: right;
  border-radius: 5px;
}
#getwebsitebtn:hover {
  background-color: #059862 !important;
  color:white!important;
}

@media screen and (max-width: 727px) {
  .trytopnav {top:70px;}
  #container {top:116px;}
  #breadcrumb {display:none;}
  #tryhome  {display:block;}
}
@media screen and (max-width: 467px) {
  .trytopnav {top:60px;}
  #container {top:106px;}
  .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;}
}
#iframewrapper {

}

body.darktheme {
  background-color:rgb(40, 44, 52);
}
body.darktheme #tryitLeaderboard{
  background-color:rgb(40, 44, 52);
}
body.darktheme .trytopnav{
  background-color:#616161;
  color:#dddddd;
}
body.darktheme #container {
  background-color:#616161;
}
body.darktheme .trytopnav a {
  color:#dddddd;
}
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: #616161;}
body.darktheme ::-webkit-scrollbar-thumb:hover {background-color: #aaaaaa;}

.trytopnav {
  height:48px!important;
}
.fa {
  padding: 10px 10px!important;
}
a.topnav-icons, a.topnav-icons.fa-home, a.topnav-icons.fa-menu {
    font-size: 28px!important;
    text-decoration: none;
}

#backtotutcontainer {
  position:absolute;
  bottom:0;
  background-color:#F1F1F1;
  width:100%;
  height:50px;
  padding-left:10px;
  color:#555;
}
.w3-btn:hover.w3-blue, .w3-btn:active.w3-blue {
  background-color: #0d8bf2!important;
  color: #fff!important;
  box-shadow: none;
}
body.darktheme #backtotutcontainer {
  background-color:#616161;
  color:#ddd;
}

@media (max-width: 600px) {
  .w3-hide-small {
    display: none!important;
  }
}
a.topnav-icons {
  width: 52px !important;
  /*font-size: 20px !important;*/
  padding-top: 11px !important;
  padding-bottom: 13px !important;
}

.w3-bar .w3-button {
    white-space: normal;
}
.w3-bar .w3-dropdown-hover, .w3-bar .w3-dropdown-click {
    position: static;
    float: left;
}
.w3-bar .w3-bar-item {
    padding: 8px 16px;
    float: left;
    width: auto;
    border: none;
    display: block;
    outline: 0;
}