/* CSS files add styling rules to your content */

body {
  margin: 0;
  background-color: #e0dede;
  font-family: sans-serif;
  font-size: 1em;
}

h1 {
  font-size: 1.5em;
  margin: 0;
}

p {
  margin-top: 0.75em;
  margin-bottom: 0;
}

p:first-child {
  margin-top: 0;
}

a:link,
a:visited {
  color: #0000ee;
}

header {
  background-color: #222;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  padding: 10px 0;
  /*box-shadow: 0px 1px 5px 1px #151515;*/
}

header img {
  height: 120px;
}

header p {
  font-family: Inconsolata, monospace;
  font-size: 72px;
  line-height: 120px;
  margin: 0;
}

main {
  width: 70%;
  margin: 20px 15%;
  display: grid;
  grid-gap: 20px;
}

.box {
  background-color: #eee;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 20px;
  width:100% auto;
}

.io {
  display: grid;
  grid: auto-flow / 1fr 1fr;
  grid-gap: 20px;
}

.in,
.out {
  min-height: 240px;
}

.url {
  font-family: Inconsolata, monospace;
  width: 100%;
  box-sizing: border-box;
}

.file {
  font-family: Inconsolata, monospace;
}

.log {
  font-family: Inconsolata, monospace;
  list-style: none;
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0;
}

#js-box-download {
  display: none;
}

.icn-spinner {
  animation: spin-animation 0.5s infinite;
  display: inline-block;
}

.icn-spinner-e {
  animation: spin-animatione 0.6s infinite;
  display: inline-block;
}

@keyframes spin-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

@keyframes spin-animatione {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1turn);
  }
}

.install {
	box-shadow:inset 0px 1px 0px 0px #6b6b6b;
	background:linear-gradient(to bottom, #303030 5%, #000000 100%);
	background-color:#303030;
	border-radius:3px;
	border:1px solid #404040;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-family:Arial;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
.install:hover {
	background:linear-gradient(to bottom, #000000 5%, #303030 100%);
	background-color:#000000;
}
.install:active {
	position:relative;
	top:1px;
}
.install.disable {
	box-shadow:inset 0px 1px 0px 0px #6b6b6b;
	background:linear-gradient(to top, #303030 5%, #303030 100%);
	background-color:#303030;
	border-radius:3px;
	border:1px transparent #404040;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
.install.disable:hover {
	background:linear-gradient(to top, #303030 5%, #303030 100%);
	background-color:#303030;
}
.install.disable:active {
	position:relative;
	top:0px;
}


        
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}