.Console.Page {
  height: 100%;
  width: 100%
}

.Console .Panel {
  background-color: #c5ced4
}

.Console .Panel > .Layout {
  width: 100%;
  height: 100%;
  overflow: auto
}

@media only screen and (max-width: 70em) {
  .Console .Panel {
     height: 100vh;
     width: 100vw
  }
}

@media only screen and (min-width: 70em) {

.Console > .Layout.CentredHorizontally {
    max-width: 100%;
   height: calc(100vh - 16px);
   display: flex;
   align-items: center;
   justify-content: center;
}

.Console .Panel {
   position: relative;
   width: 100vmin;
   height: 80vmin;
   border: solid black 1px;
   -moz-border-radius: 0.25em;
   -webkit-border-radius: 0.25em;
   border-radius: 0.25em;
   box-sizing: border-box;
}

   .Console .Panel:after {
      content: "";
      display: block;
      padding-bottom: 100%;
      width: 100%;
      height: 100%;
   }

   .Console .Panel > .Layout {
      position: absolute
   }
}

.Console .Panel .Top.Bar {
flex-grow: 0;
height: 2.1em;
clear: both;
background-color: #256e84;
color: #ffffff;
font-size: 130%;
}

.Console .Panel .Body {
flex-grow: 1;
}


@media only screen and (max-width: 70em) {
.Console .Modules {
   max-height: calc(100vh - 12em)
}
}


   .Modules.Layout {
      display: flex;
      flex-direction: column;
   }



   .Console .Panel .Modules .Fixed {
      padding-right: 1.25em;
   }

   .Modules .Scrollable {
      display: flex;
      flex-grow: 1;
      max-height: calc(100vh - 20em);
      overflow-y: auto
   }

   .Modules .Hint {
      flex-grow: 0;
   }

   .Console .Panel .ScriptEntry {
      clear: both;
      width: 100%
   }

   .Hint .HighlightLabel {
      color: #ffffff;
      font-weight: 600;
      text-shadow: 0.0625em 0.0625em #256e84;
   }


   @media only screen and (max-width: 70em) {
      .Console .Panel textarea {
         height: calc(100vh - 22.5em)
      }
   }


   @media only screen and (min-width: 70em) {
      .Console .Panel textarea {
         height: calc(80vmin - 20em)
      }
   }


   .Console .Panel textarea {
      width: 100%;
      font-family: "Courier New", Courier, monospace;
      font-size: 82%;
      overflow: scroll;
      border-style: solid;
      border-color: #aaaaaa;
      border-width: 1px;
      -moz-border-radius: 0.25em;
      -webkit-border-radius: 0.25em;
      border-radius: 0.25em;
      box-sizing: border-box;
      overflow: auto;
   }