@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,600,700');
/* Reset */
body {
	padding: 0;
	background: #F8F8F8;
}
h1 {
	margin: 0;
}
span.text-bold {
	font-weight: bold;
}
/* Header */
.zkfiddle-header {
	height: 64px;
	min-width: 320px;
	background: #00A2CF;
}
.zkfiddle-header .header-inner {
	height: 100%;
	max-width: 1296px;
	margin: 0 auto;
	position: relative;
}
.zkfiddle-header .logo {
	width: 50px;
	height: 64px;
	position: absolute;
	left: 41px;
	background: url(../img/ZK-logo.svg) no-repeat center;
	background-size: 50px 33px;
	float: left;
}
.zkfiddle-header .logo a {
	display: block;
	height: 100%;
	width: 50px;
	text-indent: 150%;
	overflow: hidden;
	white-space: nowrap;
}

.zkfiddle-header .title {
	color: #ffffff;
	font-family: 'Roboto';
	font-size: 16px;
	line-height: 64px;
	font-weight: 300;
	position: absolute;
	left: 122px;
}

/** Control **/
.zkfiddle-header .z-combobox {
	height: 26px;
	background-color: #FFFFFF;
	background-image: linear-gradient(top, #FFFFFF, #EDEDED);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#EDEDED');
}
.z-combobox-pp {
	-moz-border-radius: 4px; /* FF1-3.6 */
	-webkit-border-radius: 4px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
	border-radius: 4px;
}
.z-combobox-pp .z-comboitem-text {
	padding: 3px 0;
}
.z-comboitem td.z-comboitem-img,
.zkfiddle-header .z-combobox-inp {
	-moz-border-radius: 4px 0 0 4px; /* FF1-3.6 */
	-webkit-border-radius: 4px 0 0 4px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
	border-radius: 4px 0 0 4px;
}
.z-comboitem td.z-comboitem-text,
.zkfiddle-header .z-combobox-btn {
	-moz-border-radius: 0 4px 4px 0; /* FF1-3.6 */
	-webkit-border-radius: 0 4px 4px 0; /* Saf3-4, iOS 1-3.2, Android <1.6 */
	border-radius: 0 4px 4px 0;
}
.zkfiddle-header .z-combobox-inp {
	background: transparent;
	height: 20px;
}
.zkfiddle-header .z-combobox-btn {
	width: 18px;
	height: 24px;
	border: 1px solid #CCCCCC;
	background-color: transparent;
	background-image: url(../img/comp/combobtn.gif);
}
.zkfiddle-header .z-combobox-focus .z-combobox-btn,
.zkfiddle-header .z-combobox-btn-over,
.zkfiddle-header .z-combobox-btn-clk {
	border-color: #90BCE6;
}
.zkfiddle-header .z-combobox-btn-over {
	margin-left: 0;
}

.fiddle-header-check>input {
	background-color: #f6f6f6;
	border: 1px solid #f6f6f6;
	margin-right: 8px;
}
.fiddle-header-check>input:hover {
	border: 1px solid #69b9d2;
}
.fiddle-header-check>input:checked {
	background-color: #69b9d2;
	border: 1px solid #fff;
}

.zkfiddle-header .z-button {
	height: 28px;
	background-color: #007C9E;
	font-family: 'Roboto';
	font-size: 14px;
	font-weight: 300;
	line-height: normal;
	letter-spacing: 0.3px;
	box-shadow: none;
	-webkit-box-shadow: none;
}
.zkfiddle-header .z-button:hover {
	background-color: #0090B8;
}
.zkfiddle-header .z-button:active {
	background-color: #005E78;
}
.zkfiddle-header .z-button-cm {
	vertical-align: middle;
	line-height: 18px;
}

.zkfiddle-header .z-selectbox {
	border: 1px solid #007C9E;
	border-radius: 4px;
	background-color: white;
}

.header-views {
	line-height: 64px;
	text-align: right;
	margin-right: 48px;
}

@media (min-width: 1024px) and (max-width: 1296px) {
	.zkfiddle-header .logo {
		left: 48px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.zkfiddle-header .logo {
		left: 32px;
	}
}

@media (max-width: 767px) {
	.zkfiddle-header {
		height: auto;
	}
	.zkfiddle-header .logo {
		left: 32px;
	}
	.header-views {
		display: flex;
		flex-wrap: wrap;
		width: 350px;
		margin-left: auto;
		margin-right: 24px;
		padding-top: 16px;
		padding-top: 8px;
		align-items: center;
		justify-content: flex-end;
	}

	.header-views > *{
		margin-bottom: 8px;
	}
	.fiddle-header-new {
		order: 1;
		margin-left: 8px;
	}
	.fiddle-header-check {
		order: 2;
		line-height: 32px;
	}
	.fiddle-header-save {
		order: 5;
		margin-left: 8px;
	}
	.fiddle-header-fork {
		order: 6;
		margin-left: 8px;
	}
	.fiddle-header-version {
		order: 3;
		margin-left: 8px;
	}
	.fiddle-header-theme {
		order: 4;
		margin-left: 8px;
	}
	.fiddle-header-view {
		order: 7;
		margin-left: 8px;
	}
}

@media (max-width: 440px) {
	.header-views {
		width: 150px;
	}
	.fiddle-header-new {
		order: 3;
	}
	.fiddle-header-check {
		order: 4;
	}
	.fiddle-header-save {
		order: 5;
	}
	.fiddle-header-fork {
		order: 6;
	}
	.fiddle-header-version {
		order: 1;
	}
	.fiddle-header-theme {
		order: 2;
	}
	.fiddle-header-view {
		order: 7;
	}
}

.social {
	padding: 24px;
}

/* Right */
.zkfiddle-outer {
	margin-top: 5px;
	background-color: #F2F2F2;
}
.zkfiddle-center {
	max-width: 1296px;
	margin: 0 auto;
	background: #F8F8F8;
}
.zkfiddle-center .z-center {
	padding-right: 5px;
	margin-left: 5px;
}
.sourceCodeEditor {
	padding: 5px;
	border: 1px solid #C5C5C5;
	/*fix firefox3 issue. */
	overflow-y: auto;
}

.z-codeeditor {
	height: 100%;
}

.z-hlayout + .z-codeeditor {
	height: calc(100% - 16px);
}

/** Source Tabs **/
.z-separator-hor-bar {
	border-top: 1px solid #cccccc;
	background: 0 none;
}
.sourcetabs .z-tabs-cnt {
	padding-left: 3px;
	margin: 0;
	white-space: nowrap;
}
.sourcetabs .z-tab-seld .z-tab-text,
.sourcetabs .z-tab .z-tab-text {
	padding-top: 2px;
	padding-bottom: 2px;
}
.sourcetabs .z-tab-seld .z-tab-text {
	padding-bottom: 3px;
}
.sourcetabs .tab-textbox {
	margin-left: 5px;
	width: 200px;
}
.sourcetabs .z-tabs-add-edge .z-tab-text {
	font-size: 18px;
	height: 25px;
}
.sourcetabs .z-tabpanel {
	padding: 0;
}

.sourcetabs .z-tab {
	padding: 2px;
	margin-left: 10px;
}

.zkfiddle-source-tag-container a{
	margin-left:6px;
}
.zkfiddle-index{
	text-align:center;
}

/***AuthorInput***/
.guest-user{
	color:black !important;
	text-decoration:none !important;
	font-weight:normal;
}

.author-saved .author-input-container{
	float: right;
}
.author-new .author,.author-new .author-input-label{
	display:none;
}
.author-new .author-input-container{
	display:inline;
}
.author-login-ctrl{
	margin-left:20px;
	font-size:80%;
	font-family: 'Roboto';
	text-decoration: none;
	color: #1D96BC;
}
.fiddle-loginWin .z-window-icon {
	font-size: 20px;
	width: 20px;
	height: 20px;
}
.fiddle-loginWin {
	box-shadow: rgba(0,0,0,0.06) 0 0 10px 1px;
	position: relative;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
}
.fiddle-loginWin .z-textbox {
	transition: .2s ease-in-out;
	border: none;
	border-bottom: 2px solid #e3e3e3;
	font-size: 15px;
	font-family: 'Roboto';
	padding: 5px;
	color: #4a4a4a;
	border-radius: 0;
}
.fiddle-loginWin .z-textbox:focus {
	border-bottom: 2px solid #31b59c;
}
.fiddle-fiddle-loginWin .z-textbox::-webkit-input-placeholder {
  color: #e3e3e3;
}
.fiddle-fiddle-loginWin .z-textbox:-moz-placeholder {
  /* FF 4-18 */
  color: #e3e3e3;
  opacity: 1;
}
.fiddle-loginWin .z-textbox::-moz-placeholder {
  /* FF 19+ */
  color: #e3e3e3;
  opacity: 1;
}
.fiddle-loginWin .z-textbox:-ms-input-placeholder {
  /* IE 10+ */
  color: #e3e3e3;
}
.fiddle-loginWin .loginBox-description {
	padding: 40px 100px 30px;
	text-align: center;
	line-height: 22px;
	color: #7e7e7e;
}
.fiddle-loginWin .loginBox-description>.z-label {
	font-size: 14px;
}
.fiddle-loginWin .inpbox {
	padding: 10px 0;
	text-align: center;
}
.fiddle-loginWin .inpbox-check .z-checkbox-content {
	font-family: 'Roboto';
	font-size: 15px;
	color: #7e7e7e;
	vertical-align: bottom;
}
.fiddle-loginWin .inpbox-check>input {
	background-color: #f6f6f6;
	border: 1px solid #f6f6f6;
	margin-right: 8px;
}
.fiddle-loginWin .inpbox-check>input:hover {
	border: 1px solid #69b9d2;
}
.fiddle-loginWin .inpbox-check>input:checked {
	background-color: #69b9d2;
	border: 1px solid #fff;
}
.fiddle-loginWin .loginBox-button {
	border-radius: 25px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	transition: .2s ease-in-out;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
	display: inline-block;
	font-family: 'Roboto';
	color: #fff;
	font-size: 16px;
	width: 124px;
	letter-spacing: 2px;
	background-color: #36A2C3;
	margin: 20px 5px 5px 5px;
	border: none;
	outline: 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	-ms-box-shadow: none;
	box-shadow: none;
}
.fiddle-loginWin .loginBox-button.cancel-btn {
	background-color: #82C5DA;
}
.fiddle-loginWin .loginBox-button:hover {
	background-color: #1D96BC;
	box-shadow: rgba(29, 150, 188, 0.5) 0px 2px 8px;
}
/***Taglist***/
.zkfiddle-taglist .token{
	display:block;
	color:gray;
	font-size:10px;
	margin-left:15px;
}
.zkfiddle-taglist .tag-container *{
	margin-left:5px;
}

/***Tag cloud ***/
.left-tag .z-caption-r,.left-tag .z-caption-l{
	text-align:left;
}
.left-tag .z-caption-r input{
    width:65%;
}

.left-tag .tag-container{
	padding-top:3px;
	padding-bottom:5px;
	line-height:23px;
}

.tag-cloud{
	padding:5px;
	z-index:1;
	position: relative;
}
.tag-cloud-sel{
	background:#DDDDDD;
	z-index:0;
}
.tag-cloud0 {font-size: 100%;}
.tag-cloud1 {font-size: 110%;}
.tag-cloud2 {font-size: 115%;}
.tag-cloud3 {font-size: 120%;}
.tag-cloud4 {font-size: 130%;}

/***CodeMirror***/
span.c-like-keyword {
	color: #7F0055;
}
span.c-like-string {
	color: #0000C0;
}
.CodeMirror {
	border: 0 none;
}
pre.CodeMirror-cursor {
	margin-top: 1px;
}
.CodeMirror-scroll {
	overflow: auto;
}

/* Left */
/** West **/
.zkfiddle-center .z-west-splt {
	background: 0 none;
}
.zkfiddle-center .z-west-colpsd {
	background: #f5f5f5; /* Old browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dddddd',GradientType=1 ); /* IE6-9 */
	background: linear-gradient(left, #f5f5f5 0%,#dddddd 100%); /* W3C */
}
/** Left List **/
.leftlist .z-tabpanel-accordion-cnt{
	overflow-y:auto;
}
.ie7 .leftabout,.ie6 .leftabout{
	position:relative;
	background:white;
	z-index:100;
}

.leftlist div.z-listheader-cnt {
	padding: 4px 5px;
}

.leftlist .z-tabpanels-accordion {
	border: 0 none;
}

.leftlist .z-tabpanel-accordion-cnt {
	padding: 0;
}

.leftlist .z-tab-accordion-header {
	border-width: 1px 0;
}

.leftlist .likes .amount,.leftlist .recentlys .version {
	text-align: center;
}

.leftlist .recentlys,.leftlist .likes {
	border-width: 0 0 1px 0;
}

.leftlist .z-tabpanel-accordion-cnt {
	border-width: 1px 0;
}

/** Left About**/
.grouptop {
	border-top: 1px solid #C5C5C5;
}
.leftabout .z-groupbox-cnt {
	border-width: 1px 0 0;
}

.leftabout .z-groupbox-hm {
	border-width: 0 0 1px 0;
}
.leftabout .z-caption-l{
	font-weight: bold;
	color: #555555;
}
/** Popup **/
.popupContent .z-window-modal-cnt-noborder {
	padding: 10px;
}

/** Widget View **/
.widgetWindow .operations img{
	width:16px;
	height:16px;
}

.z-notification {
	padding: 0;
}

.CodeMirror {
	height: 100%;
}

.view-result-caption .z-caption-content{
	width: 100%;
}