* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  body {
    color:#000000;
    margin:0px;
    font-size:100%;
  }
  .trytopnav {
    height:40px;
    overflow:hidden;
    min-width:380px;
    position:absolute;
    width:100%;
    top:99px;
    background-color:#f1f1f1;
  }
  .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 span {
    font-family:Consolas, monospace;
  }


  #textarea, #iframe {
    height:100%;
    width:100%;
    padding-bottom:10px;
    padding-top:1px;
  }
  #textarea {
    background: #ef5e5e;
    padding-left
    :5px;
    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 {
    background-color: #ffffff;
    font-family: consolas,"courier new",monospace;
    font-size:15px;
    height:100%;
    width:100%;
    padding:8px;
    resize: none;
    border:none;
    line-height:normal;    
  }
  .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;
  }
  
    .w3-dropdown-content {width:350px}
    
  @media screen and (max-width: 727px) {
    .trytopnav {top:70px;}
    #container {top:108px;}
  
  }
  @media screen and (max-width: 467px) {
    .trytopnav {top:60px;}
    #container {top:98px;}
    .w3-dropdown-content {width:100%}
  }
  @media only screen and (max-device-width: 768px) {
    #iframewrapper {overflow: auto;}
    #container     {min-width:320px;}
    .stack         {display:none;}
    #tryhome       {display:block;}
  }
  
  @font-face {
  font-family: 'fontawesome';
  src:url('../lib/fonts/fontawesome.eot?14663396');
  src:url('../lib/fonts/fontawesome.eot?14663396#iefix') format('embedded-opentype'),
      url('../lib/fonts/fontawesome.woff?14663396') format('woff'),
      url('../lib/fonts/fontawesome.ttf?14663396') format('truetype'),
      url('../lib/fonts/fontawesome.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); }
  }
  #iframewrapper {
      
  }
  
  body.darktheme {
    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;
  }
  
  button{
  margin:5px ! important;
  }
  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;}