:root {
  --grid-maxWidth: 150rem; /* max container width 1080px */
}
h2 { margin-bottom: 1rem; }
nav { margin-bottom: 2rem; }
input[readonly], input[readonly]:hover {
    opacity: .4;
    cursor: not-allowed;
}
img.icon {
  vertical-align: bottom;
  padding-right: 0.7rem;
}
.CodeMirror {
  font-size: 1.3rem;
  height: 40rem;
  border: 1px solid #ececec;
}

form input[type=button], form button {
  margin-top: 2rem;
}

.file-entry, .file-entry-open {
  margin-bottom: 0.2rem;
  word-break: break-all;
}
.file-entry:hover {
  background: #fcfcfc;
}
.file-entry a {
  display: inline-block;
  width: 60%;
}
.file-entry .up {
  font-weight: bold;
}

.editor-mode-switcher {
  margin-bottom: 2rem;
}

form .fields {
  margin-bottom: 1rem;
}

#preview iframe {
  width: 100%;
  height: 50rem;
  margin-top: 5rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

#modal {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(240,240,240,0.9);
}

#modal-content {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  /* box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  background: #fefefe;
  margin: 5% auto;
  padding: 1rem 2rem 1rem 2rem;
  width: 80%;
}

header h1{
  margin: 2rem 0 0 0;
  line-height: 1;
}
header h1 a {
  color: #0fb973;
  color: #333;
}
header {
  margin-bottom: 2rem;
}
header small {
  font-style: italic;
}
#help-button {
  margin-top: 2rem;
}
#rebuild-component {
  margin-top: 2rem;
}
.cancel-button {
  margin-left: 2rem;
}