/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
	min-height: 100%;
	background: linear-gradient(133deg, #ff0000, #eeff00, #02ff00, #00fff6, #0600ff, #fd00ff);
	background-size: 1200% 1200%;

	/*-webkit-animation: ColorCycle 59s ease infinite;*/
	/*-moz-animation: ColorCycle 59s ease infinite;*/
	/*-o-animation: ColorCycle 59s ease infinite;*/
	animation: ColorCycle 59s ease infinite;
    animation-play-state: paused;
    color: #222;
	font-size: 1em;
	line-height: 1.4;
}
body {
	min-height: 100%;
}
body:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 100%;*/
  background: transparent;
  background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 61%, rgba(0,0,0,0.5) 88%, rgba(0,0,0,1) 100%);
}
/* ==========================================================================
   Anchors
   ========================================================================== */
a {
  color: white;
  text-decoration: none;
}
a:hover {
  border-radius: 10px;
  color: #ffffaa;
  background-color: #ffffff10;
}
/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
  font-family: "C64 Pro Mono";
  src: url("../fonts/C64_Pro_Mono_v1.0-STYLE.woff") format("woff");
}
@font-face {
  font-family: "C64 Pro";
  src: url("../fonts/C64_Pro_v1.0-STYLE.woff") format("woff");
}

/* ==========================================================================
   Scrollbars
   ========================================================================== */
::-webkit-scrollbar {
  padding: 10px;
  width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #00000033;
  border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffffff44;
  border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffffff55;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@-webkit-keyframes fadeIn {
  0%{opacity:0}
  50%{opacity:.5}
  100%{opacity:1}
}
@-webkit-keyframes ColorCycle {
  0%{background-position:0% 5%}
  50%{background-position:100% 96%}
  100%{background-position:0% 5%}
}
@-moz-keyframes ColorCycle {
  0%{background-position:0% 5%}
  50%{background-position:100% 96%}
  100%{background-position:0% 5%}
}
@-o-keyframes ColorCycle {
  0%{background-position:0% 5%}
  50%{background-position:100% 96%}
  100%{background-position:0% 5%}
}
@keyframes ColorCycle {
  0%{background-position:0% 5%}
  50%{background-position:100% 96%}
  100%{background-position:0% 5%}
}
@keyframes RotateIt {
  0%{transform:rotate3d(0,0,1,0deg)}
  50%{transform:rotate3d(0,0,1,180deg)}
  100%{transform:rotate3d(0,0,1,360deg)}
}
@keyframes TiEtator {
  0%{transform:rotate3d(0,0,1,360deg)}
  50%{transform:rotate3d(0,0,1,180deg)}
  100%{transform:rotate3d(0,0,1,0deg)}
}
@keyframes RadioActive {
  0% {background-position: 0% 0%}
  50% {background-position: 200% 0%}
  100% {background-position: 0% 0%}
}
@keyframes circle-in-center {
  from {clip-path: circle(0%)}
  to {clip-path: circle(125%)}
}
@keyframes about {
  0%{transform:rotate3d(0,0,1,-90deg)}
  100%{transform:rotate3d(0,0,1,0deg)}
}
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  8.0% { transform: rotate(0deg); }
  9% { transform: rotate(10deg); }
  10.5% { transform: rotate(-10deg); }
  12% { transform: rotate(10deg); }
  13.5% { transform: rotate(-10deg); }
  14.0% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.fadeIn {
  opacity: 0;
}
.fadeIn.active {
  animation: fadeIn 1s linear;
  animation-fill-mode: forwards;
}
/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

h1 {
  font: normal 20px/22px "C64 Pro", verdana, helvetica, sans-serif;
  margin: 0 0 20px 20px;
}
h2 {
  font-size: 12pt;
  line-height: 16pt;
}
h3 {
  font-size: 10pt;
  line-height: 12pt;
  margin: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}
#fileoutput {
  width: 80%;
  height: 25%;
}
/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   custom noscript and stuff!
   ========================================================================== */

noscript .Panel {
  padding: 45px;
  background: #b7af98;
  background: linear-gradient(155deg, #b7af98 0%, #b7af98 45%, #857a74 100%);
  font: normal 12pt/16pt "C64 Pro", verdana, helvetica, sans-serif;
  pointer-events: all;
  position: fixed;
  bottom: 0;
  left: 0;
}
noscript img {
  display: block;
  max-width: 300px;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   Site Logo
   ========================================================================== */
.siteLogo {
  margin: 20px;
  max-width: calc(100% - 40px);
}
/* ==========================================================================
   Cool Background stuff
   ========================================================================== */
#c64 {
  position: fixed;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: conic-gradient(rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 2%, rgba(0,0,0,0) 2%, rgba(0,0,0,0) 4%, rgba(0,0,0,.2) 4%, rgba(0,0,0,.2) 6%, rgba(0,0,0,0) 6%, rgba(0,0,0,0) 8%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.2) 10%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 12%, rgba(0,0,0,.2) 12%, rgba(0,0,0,.2) 14%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 16%, rgba(0,0,0,.2) 16%, rgba(0,0,0,.2) 18%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 20%, rgba(0,0,0,.2) 20%, rgba(0,0,0,.2) 22%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 24%, rgba(0,0,0,.2) 24%, rgba(0,0,0,.2) 26%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 28%, rgba(0,0,0,.2) 28%, rgba(0,0,0,.2) 30%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 32%, rgba(0,0,0,.2) 32%, rgba(0,0,0,.2) 34%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 36%, rgba(0,0,0,.2) 36%, rgba(0,0,0,.2) 38%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 40%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.2) 42%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 44%, rgba(0,0,0,.2) 44%, rgba(0,0,0,.2) 46%, rgba(0,0,0,0) 46%, rgba(0,0,0,0) 48%, rgba(0,0,0,.2) 48%, rgba(0,0,0,.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.2) 52%, rgba(0,0,0,.2) 54%, rgba(0,0,0,0) 54%, rgba(0,0,0,0) 56%, rgba(0,0,0,.2) 56%, rgba(0,0,0,.2) 58%, rgba(0,0,0,0) 58%, rgba(0,0,0,0) 60%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.2) 62%, rgba(0,0,0,0) 62%, rgba(0,0,0,0) 64%, rgba(0,0,0,.2) 64%, rgba(0,0,0,.2) 66%, rgba(0,0,0,0) 66%, rgba(0,0,0,0) 68%, rgba(0,0,0,.2) 68%, rgba(0,0,0,.2) 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 72%, rgba(0,0,0,.2) 72%, rgba(0,0,0,.2) 74%, rgba(0,0,0,0) 74%, rgba(0,0,0,0) 76%, rgba(0,0,0,.2) 76%, rgba(0,0,0,.2) 78%, rgba(0,0,0,0) 78%, rgba(0,0,0,0) 80%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.2) 82%, rgba(0,0,0,0) 82%, rgba(0,0,0,0) 84%, rgba(0,0,0,.2) 84%, rgba(0,0,0,.2) 86%, rgba(0,0,0,0) 86%, rgba(0,0,0,0) 88%, rgba(0,0,0,.2) 88%, rgba(0,0,0,.2) 90%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 92%, rgba(0,0,0,.2) 92%, rgba(0,0,0,.2) 94%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 96%, rgba(0,0,0,.2) 96%, rgba(0,0,0,.2) 98%, rgba(0,0,0,0) 98%, rgba(0,0,0,0) 100%);
  mask: url('../images/mask.webp') top left / cover; /* radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%); */
  animation: RotateIt 120s linear infinite;
  z-index: 0;
}
.logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/clogo_1920.webp') no-repeat center center fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  z-index: 20;
}
/* ==========================================================================
   Flex container
   ========================================================================== */
.ActionPanel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  height: min-content;
  background: #00000066;
  z-index: 100;
}
.ActionWrapper {
  width: calc(100% - 30px);
  min-height: calc(100vh - 30px - 90px); /* make room for the footer */
  max-height: calc(100vh - 30px - 90px); /* make room for the footer */
  background: #b7af9888;
  border-radius: 5px;
  margin: 15px;
  display: flex;
  box-shadow: 0px 0px 6px rgba(0,0,0, 0.5);
}
.ActionWrapper .ActionCol {
  display: flex;
  flex-basis: fit-content;
  flex-direction: column;
}
.ActionCol.Left {
  min-width: 450px;
  /*background: #ccaacc66;*/
}
.ActionCol.Right {
  min-width: calc(100% - 450px);
}
/* ==========================================================================
   Panels
   ========================================================================== */
.Panel {
  position: relative;
  flex: 1;
  background: #b7af98aa;
  background: linear-gradient(155deg, #b7af9888 0%, #b7af9888 45%, #564d47AA 100%);
  border-radius: 5px;
  width: auto;
  margin: 15px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 0px 0px 6px rgba(0,0,0, 0.5);
}
.Panel:after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  box-shadow: inset 0px 0px 6px rgba(0,0,0, 0.5);
  pointer-events: none;
}
.Panel.display {
  overflow: hidden;
}
.ActionCol.Left .Panel.colors {
  min-height: fit-content;
  max-height: 310px;
}

/* ==========================================================================
   Directory Panel
   ========================================================================== */
.Panel.dir, .Panel.dir2 {
  background-color: #352879aa;
  background: linear-gradient(155deg, #352879DD 0%, #352879DD 55%, #1e1552DD 100%);
  color: #ffffff;
  margin-top: 0;
  padding: 15px;
  font: normal 9pt/12pt "C64 Pro Mono", verdana, helvetica, sans-serif;
  max-height: 70%;
  min-height: 250px;
  overflow-y: auto;
}
.ActionCol.Left .Panel.dir {
  max-height: calc(100% - 310px - 30px);
}

.Panel.dir.file, .Panel.dir2.file2 {
  background-color: rgb(152, 103, 91);
  background: linear-gradient(155deg, rgb(152, 103, 91) 0%, rgb(152, 103, 91) 55%, rgb(103, 55, 45) 100%);
  color: rgb(241, 170, 152);
  margin-top: 0;
  padding: 15px;
  font: normal 9pt/12pt "C64 Pro Mono", verdana, helvetica, sans-serif;
  max-height: 70%;
  overflow-y: auto;
}

.Panel.dir2 {
  display: none;
}
.dir .dirTitle, .dir2 .dirTitle  {
  background-color: #ffffff;
  color: #352879;
}
.dir.file .dirTitle {
  background-color: rgb(241, 170, 152);
  color: rgb(103, 55, 45);
}

#monitor {
  max-height: 100%;
  overflow-y:auto;
}
#fileview, #fileview2 {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  max-height: 100%;
  width: calc(100% - 30px);
  overflow-y:auto;
  padding: 15px;
}
#fileview h2:first-of-type {
  margin-top: 100px;
}
#fileview2 h2:first-of-type {
  margin-top: 40px;
  font-size: 12px;
}
span.file:hover {
  color: #ffffff;
  cursor: pointer;
}
span.file.gen {
  color: #869168;
}
span.ver {
  float: right;
}
/* ==========================================================================
   Display Panel
   ========================================================================== */
.ActionCol.Right .Panel.display {
  display: flex;
  position: relative;
  margin-left: 0;
  justify-content: center;
  align-items: center;
}
#dropzone {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
}
#dropTarget {
  position: absolute;
  top: 20%;
  bottom: 0;
  left: 0;
  right: 0;
  width: 30%;
  margin: auto auto;
  /*display: none;*/
}
.loader {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  margin: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background: url('../images/decrunch.gif');
  background-repeat: repeat;
  opacity: 0;
  z-index: 100;
  animation: 1s cubic-bezier(.25, 1, .30, 1) circle-in-center both;
  transition: .25s opacity linear;
  pointer-events: none;
}
#cD64 {
  position: absolute;
  margin: 2.5%;
  height: 95%;
  animation: 1s cubic-bezier(.25, 1, .30, 1) circle-in-center both;
}
/* some default styles for our dynamically created track and shadow canvases. Canvii? */
#overlay, .fileOverlay {
  position: absolute;
  margin: 2.5%;
  height: 95%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease-in-out;
}
/* ==========================================================================
   Title and Color Panel
   ========================================================================== */
#diskPrev {
  position: relative;
  top: 5px;
  right: 5px;
}
ul.colorScheme {
  list-style: none;
  width: calc(100% - 30px);
  padding: 0;
  margin: auto;
}
ul.colorScheme li {
  position: relative;
  width: 50px;
  height: 50px;
  background: transparent;
  display: inline-block;
  /*border: 4px solid #6C5EB5;*/
  background-size: cover;
  background-repeat: repeat;
  cursor: pointer;
  background: transparent;
  background: linear-gradient(155deg, #b7af98 0%, #b7af98 45%, #857a74 100%);
  /*background: linear-gradient(155deg, #6C5EB5 0%, #352879 45%, #1e1552 100%);*/
  border-radius: 50%;
  margin: 5px;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 0px 0px 6px rgba(0,0,0, 0.5);
  cursor: pointer;
}
ul.colorScheme li:after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  box-shadow: inset 0px 0px 6px rgba(0,0,0, 0.5);
  border-radius: 50%;
  pointer-events: none;
}
.currentColor {
  text-transform: capitalize;
}
ul.colorScheme li.active {
  background: linear-gradient(155deg, #6C5EB5 0%, #6C5EB5 45%, #352879 100%);
}
ul.colorScheme li.heat:after {
  background: #999999;
  background: linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(243,255,0,1) 33%, rgba(255,0,0,1) 66%, rgba(233,0,255,1) 100%);
}
ul.colorScheme li.red:after {
  background: #ff0000;
}
ul.colorScheme li.orange:after {
  background: #ff8000;
}
ul.colorScheme li.yellow:after {
  background: #ffff00;
}
ul.colorScheme li.green:after {
  background: #00cc00;
}
ul.colorScheme li.mint:after {
  background: #00ff9d;
}
ul.colorScheme li.aqua:after {
  background: #00ffff;
}
ul.colorScheme li.blue:after {
  background: #0000ff;
}
ul.colorScheme li.plum:after {
  background: #8000ff;
}
ul.colorScheme li.purple:after {
  background: #ff00ff;
}
ul.colorScheme li.fuchsia:after {
  background: #ff0080;
}
ul.colorScheme li.white:after {
  background: #ffffff;
}

/* ==========================================================================
   Panel buttons
   ========================================================================== */
.uiButton {
  position: absolute;
  display: inline-block;
  background: #b7af98;
  background: linear-gradient(155deg, #b7af98 0%, #b7af98 45%, #857a74 100%);
  border-radius: 5px;
  margin: 15px;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 0px 0px 6px rgba(0,0,0, 0.5);
  cursor: pointer;
  z-index: 1;
}
.uiButton:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #5b8d48;
  background: linear-gradient(155deg, #b7c576 0%, #5b8d48 45%, #2e4921 100%);
  border-radius: 5px;
  z-index: -1;
  transition: opacity .5s linear;
  opacity: 0;
}
.uiButton:hover:before {
  opacity: 1;
}
.downButton {
  top: 10px;
  left: 10px;
  z-index: 20;
  width: 70px;
  height: 70px;
  overflow: hidden;
  display: none;
  transition: width, height .5s linear;
}
.downButton.active {
  width: calc(100% - 50px);
  height: revert;
  overflow: inherit;
  padding: 10px;
}
.uiButton:after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  box-shadow: inset 0px 0px 6px rgba(0,0,0, 0.5);
  pointer-events: none;
}
.panelIcon {
}
.down {
  display: inline-block;
}
.close {
  display: none;
}

.xButton {
  top: 0;
  right: 0;
  z-index: 20;
  width: 70px;
  height: 70px;
  overflow: hidden;
  transition: width, height .5s linear;
}
.xButton.active {
  width: calc(100% - 50px);
  height: revert;
  overflow: inherit;
  padding: 10px;
}


/* ==========================================================================
   Footer
   ========================================================================== */
.ActionFooter {
  font: normal 9pt "C64 Pro", verdana, helvetica, sans-serif;
   width: calc(100% - 30px);
  background: #b7af9888;
  border-radius: 5px;
  margin: 15px;
  display: block;
  display: flex;
  flex-basis: fit-content;
  flex-direction: row;
  box-shadow: 0px 0px 6px rgba(0,0,0, 0.5);
}
.ActionFooter .Panel {
  padding: 15px;
  margin: 15px;
}
.footerLeft {
  width: calc(100% - 30px - 115px);
}
.abtButton {
  display: flex;
  position: relative;
  top: initial;
  left: initial;
  width: 100px;
  margin-left:0;
  align-items: center;
  justify-content: center;
}
.abtButton.wiggle {
  animation: wiggle 5s infinite;
  animation-delay: 1s;
}
.abtClose {
  display: flex;
  font: normal 9pt "C64 Pro", verdana, helvetica, sans-serif;
  position: absolute;
  height: 45px;
  top: 0px;
  left: initial;
  right: 0px;
  width: 100px;
  margin-left:0;
  align-items: center;
  justify-content: center;
}
.abtOverlay {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000066;
  z-index: 1001;
  opacity: 0;
  transition: opacity .5s ease-out;
  pointer-events: none;
}
.abtOverlay .Panel {
  padding: 45px;
  height: calc(100% - 30px);
  background: #b7af98;
  background: linear-gradient(155deg, #b7af98 0%, #b7af98 45%, #857a74 100%);
  transform-origin: 50% 200%;
  transform-box: fill-box;
  transition: transform .5s cubic-bezier(.87,-.41,.19,1.44); /*ease-out; */
  transform: rotate(-90deg);
  font: normal 16px/20px Arial, verdana, helvetica, sans-serif;
  pointer-events: all;
}
.abtWrapper {
  max-height: calc(100% - 40px);
  max-width: 70%;
  margin: auto;
  overflow-y: auto;
  margin-top: 40px;
  padding-right: 20px;
}
.abtOverlay .Panel h1 {
  left: 0;
}
.abtOverlay .Panel p {
  /*font-size: .8em;*/
}
.abtOverlay.active .Panel {
  transform: rotate(0deg);
}
.abtOverlay.active {
  opacity: 1;
}
ul.sampleDisks {
  max-width: 500px;
  margin: auto;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  list-style: none;
  padding: 0;
}
ul.sampleDisks li {
  text-align: center;
}
ul.features {
  list-style: none;
}
ul.features li {
  background: url('../images/floppy_list.png') left center no-repeat;
  padding-left: 30px;
  font-size: 18px;
  margin: 10px;
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (max-width:1280px) {
  .ActionCol.Left {
    min-width: 350px;
  }
  .ActionCol.Right {
    min-width: calc(100% - 350px);
  }
  ul.colorScheme li {
    width: 35px;
    height: 35px;
  }
  .Panel.dir, .Panel.dir2 {
    font: normal 7pt/10pt "C64 Pro Mono", verdana, helvetica, sans-serif;
  }
  .Panel.dir.file, .Panel.dir2.file2 {
    font: normal 7pt/10pt "C64 Pro Mono", verdana, helvetica, sans-serif;
  }

}

@media only screen and (max-width:1024px) {
  #cD64, .fileOverlay {
    height: initial;
    width: 95%;
    position: revert;
  }
  .abtOverlay .Panel {
    padding: 15px;
  }
    .abtWrapper {
    max-height: calc(100% - 60px);
    max-width: 100%;
    margin: auto;
    overflow-y: auto;
    margin-top: 60px;
  }
  .ActionWrapper {
    max-height: initial; /* reset max height for scrolling */
  }
  #fileview h3 {
    font-size: 8px;
    margin-top: 30px;
  }

}

@media only screen and (max-width:768px) {
  html {
    height: initial;
  }
  .ActionPanel {
    height: min-content;
  }
  .ActionWrapper {
    width: calc(100% - 30px);
    height: auto;
    /*height: calc(100% - 30px - 90px); !* make room for the footer *!*/
    background: #b7af9888;
    border-radius: 5px;
    margin: 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 6px rgba(0,0,0, 0.5);
  }
  .ActionWrapper .ActionCol {
    display: flex;
    flex-basis: fit-content;
    flex-direction: column;
  }
  .ActionCol.Left {
    min-width: initial;
    max-width: initial;
    width: 100%;
  }
  ul.colorScheme li {
    width: 30px;
    height: 30px;
  }
    .ActionCol.Right {
    min-width: initial;
    max-width: initial;
    width: 100%;
  }
  .ActionCol.Right .Panel.display {
    margin-top: 0;
    margin-right: 15px;
    margin-left: 15px;
    padding-top: 65px;
  }
  .Panel.dir {
    display: none;
    font-size: 5pt;
    line-height: 8pt;
  }
  .Panel.dir2 {
    display: flex;
    font-size: 2.6vw;
    line-height: 3vw;
  }
}
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}