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

  body {
      font-size:1.1em;
      font-family:'Open Sans',sans-serif;
      margin:0px;
      
  }

  h1 {
      font-weight:200;
      font-size:1.2em;
      margin:0px;
      margin-left:20px
  }
  
  h2 {
      margin-top:8px;
      margin-bottom:8px;
      font-weight:200;
      font-size:1.8em;
  }

  p {
      margin:0px; 
  }        

  footer  {
      margin-top:8px;
      display:block;
      width:100%;
      height:126px;
      padding:4px;
      font-size:0.8em;
  }

  canvas {
      background-color:white;
      cursor:crosshair;
      border:1px solid grey;
      z-index:200;
  }

  header {
      display:block;
      padding-bottom:4px;
      padding-left:8px;
      padding-right:4px;
      padding-top:4px;
      background-color:rgb(241, 241, 241);
  }

  #title {
    cursor: pointer;
  }

  .console {
      /* position:relative; */
      background-color:rgb(239, 252, 120);
      /* overflow:auto; */
      height:100%;
      /* width:600px; */
      padding:10px;
      font-size:1.4em;
      font-family:monospace;
  }
  
  input[type="button"] {
      outline:none;
      background-color:rgb(249, 251, 159);
      border:1px solid grey;
      font-size:1.2rem;
      padding:5px 10px;
      margin-right:8px;
      border-radius:6px;
  }

  input[type="button"]:hover {
      background-color:rgb(239, 251, 9);
  }
      
  .controls {
      position:absolute;
      font-size:2em;
      padding:6px;
      bottom:8px;
      right:0px;
      z-index: 100;
      display:flex;
  }

  .name {
    background-color:white;
    font-size:1.2em;
    padding:2px;
    color:rgb(132, 0, 0);
    width:360px;
    border:none;
    text-align:right;
    outline:none;
  }

  .name:hover, .name:focus {
    background-color:rgb(239, 251, 9);
    cursor:pointer;
  }
  
  .html {
    color:rgb(147, 151, 95);
    font-size:1.1em;
  }

  
  textarea {
      width:100%;
      height:100%;
      outline:none;
  }

  .cm-orange {
    background-color:rgb(255, 211, 128);
  }

  .cm-white {
    background-color:rgb(245, 245, 245);
  }

  .cm-yellow {
    background-color:rgb(252, 255, 227);
  }

  .bg-success {
      background-color:rgb(241, 241, 241);
  }

  .bg-running {
      background-color:rgb(199, 248, 218);    
  }

  .bg-error {
      background-color:pink;
  }

  .flex {
      display:flex;
      align-items: center;
  }

  .projects {
    border-top:1px solid rgb(114, 114, 114);
    border-bottom:1px solid rgb(114, 114, 114);
    display:grid;
    grid-template-columns: 200px 200px 200px 200px 200px;
    column-gap: 4px;
    font-size:0.6em;
    text-align:center;
    overflow-x:hidden;
  }

  .project {
    padding-top:4px;
    padding-bottom:4px;
  }

  .project:hover {
    background-color: rgb(239, 251, 9); 
  }

  .project-selected {
    background-color:rgb(249, 251, 159);
  }

  .align-top {
    align-items:flex-start;
  }

  .relative {
      position:relative;
  }

  .build {
      position:absolute;
      top:4px;
      right:10px;
      font-size:0.6em;
      color:rgb(173, 173, 173);
  }

  .param {
      color:rgb(36, 36, 36);
  }

  .mr-2 {
      margin-right:20px;
  }


  .ml-2 {
      margin-left:20px;
  }

  .mb-1 {
      margin-bottom:4px;
  }

  .mb-5 {
    margin-bottom:50px;
  }

  .highlite {
      color:rgb(132, 0, 0);
      font-weight:600;
  }

  .bold {
      font-weight: 400;
  }

  .italics {
      font-style: italic;
  }

  .command-grid {
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      row-gap:5px;
  }

  .command {
    /* position:relative; */
    display:inline-block;
  }

  .tooltip {
    position: relative;
    /* display: inline-block; */
}

.tooltip .tooltiptext {
    visibility: hidden;
    line-height:1.6em;
    width: 500px;
    background-color: rgb(255, 255, 120);
    border:2px solid rgb(72, 72, 72);
    color: #2b2b2b;
    font-size:1.2em;
    border-radius: 6px;
    padding: 0px 10px;
    padding-bottom:10px;
    bottom:20px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1000;
  }


  .tooltip-left-0 {
    left:50px;
  }

  .tooltip-left-4 {
      left:-100px;
  }

  .tooltip-left-5 {
      left:-200px;
  }

  .tooltip-left-6 {
      left:-300px;
  }

  .tooltip-left-7 {
      left:-400px;
  }

  .tooltip:hover .tooltiptext {
     visibility: visible;
  }


.ls-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    border:3px solid rgb(132, 0, 0);
    margin: 8% auto; /* 15% from the top and centered */
    padding: 20px;
    width: 50%; /* Could be more or less, depending on screen size */
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .wrapper {
    /* background: #333; */
    /* border: 6px solid #666; */
    display: flex;
    width:100%;
    height:100%; 
  }
  
  .pane {
    /* padding: 4px; */
    color: #fff;
    min-width: 100px;
  }
  

  .right {
    position: relative;
    width:300px;
  }
  
  .gutter {
    width: 10px;
    height: 100%;
    background: #bdbdbc;
    position: absolute;
    top: 0;
    left: 0;
    cursor: col-resize;
  }
  

  iframe {
    margin-left:8px;
    padding:4px;
    border:none;
  }

  .CodeMirror-foldmarker {
    color: grey !important;
    text-shadow: none!important;
  }

  /* Add these CSS rules to style.css */

.editor-options-dropdown {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 500;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.editor-options-dropdown:hover {
  opacity: 1;
}

.editor-options-select {
  background-color: rgb(252, 255, 227);
  border: 1px solid rgb(114, 114, 114);
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 0.6em;
  font-family: 'Open Sans', sans-serif;
  outline: none;
  cursor: pointer;
  min-width: 140px;
}

.editor-options-select:hover {
  background-color: rgb(249, 251, 159);
}

.editor-options-select:focus {
  border-color: rgb(132, 0, 0);
  box-shadow: 0 0 3px rgba(132, 0, 0, 0.3);
}

.cm-font-small .CodeMirror,
.cm-font-small .CodeMirror-code {
  font-size: 12px !important;
}

.cm-font-normal .CodeMirror,
.cm-font-normal .CodeMirror-code {
  font-size: 14px !important;
}

.cm-font-large .CodeMirror,
.cm-font-large .CodeMirror-code {
  font-size: 18px !important;
}

.cm-font-largest .CodeMirror,
.cm-font-largest .CodeMirror-code {
  font-size: 24px !important;
}