body {
	margin: 0;
	background: #EDF2F6;
	color: #666666;
	font-family: Segoe UI, Arial, sans-serif;
}
button {
	padding: 5px 10px 5px 10px;
	margin-left: 10px; 
	border: #CCCCCC 1px solid;
	border-radius: 5px;
}
#lbox {
	position: relative;
	width: 250px;
	height: 200px;
	margin: 100px auto 0 auto;
	background: #FFFFFF;
	border-radius: 5px;
}
.title {
	width: 100%;
	height: 30px;
	margin-bottom: 10px;
	padding: 10px 0 8px 0;
	background: #6F7E95;
	color: #FFFFFF;
	border-radius: 3px 3px 0 0;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
}
.lgi {
	display: inline-block;
	width: 24px;
	background: #555555;
	color: #FFFFFF;
	vertical-align: bottom;
}
.lgi i {
	line-height: 22px;
}
.item {
	text-align: center;
	margin-bottom: 5px;
}
#smb {
	width: 50%;
	margin-top: 20px;
	background: #6F7E95;
	color: #FFFFFF;
	font-weight: 600;
}
#main {
	position: relative;
	display: inline-block;
	padding: 0;
	margin: 0;
}
.isle {
	top: 0;
	float: left;
	width: 200px;
	min-width: 200px;
	min-height: 50px;
	margin: 1px;
	border-radius: 3px;
	background: #FFFFFF;
	font-size: 12px;
}
#code {
	position: fixed;
	left: 204px;
	display: block;
	width: calc(100% - 204px);
}
#prjl, #ctr .cntnr {
	padding: 5px;
	word-wrap: break-word;
	overflow: auto;
}
.cols {
	position: relative;
	display: inline-block;
	float:left;
	width: 32.5%;
	height: calc(100% - 60px);
	margin-right: 5px;
	z-index: 1;
}
.cols:last-child {
	margin-right: 0;
}
.tcd {
	display: inline-block;
	min-width: 99%;
	height: 90%;
}
.isle button {
	float: right;
}
#ctr {
	position: absolute;
	
	margin: -11px 0 -15px 0;
	width: 100%;
	height: 90%;
	border: #555555 1px solid;
}
.isle input, textarea {
	width: 95%;
	font-size: 11px;
}
.isle input[type=button], .isle button {
	clear: both;
}
.sa:hover, .sl:hover, .sc:hover {
	color: #555555;
}
.sc {
	cursor: pointer;
}
#btns, #btc, #btc table {
	float: right;
}
#btc {
	position: relative;
	display: inline-block;
	width: 33%;
	min-width: 500px;
	max-height: 25px;
	margin: -50px 20px 0 -204px;
	z-index: 9999;
}
a {
	margin-right: 15px;
	text-decoration: none;
	color: #FFFFFF;
}
#ctr, textarea {
	overflow-y: auto;
	overflow-x: hidden;
	word-wrap: break-word;
	word-break: break-all;
}
textarea {
	background: #1E1E1E;
	color: #FFF;
}
pre {
	white-space: pre-wrap;
}
.loader {
	border: 3px solid #f3f3f3;
	border-top: 3px solid #3498db;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	margin: 10px auto;
	animation: spin 2s linear infinite;
}
.crun {
	text-align: center;	
	font-size: 16px;
}

.circles {
  margin-bottom: -10px;
}

.circle {
  width: 100px;
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}

.circle canvas {
  vertical-align: top;
}

.circle strong {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 40px;
  font-size: 30px;
}

.circle strong i {
  font-style: normal;
  font-size: 0.6em;
  font-weight: normal;
}

.circle span {
  display: block;
  color: #aaa;
  margin-top: 12px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}