@import 'snippets';
/* 
**
**
** Masterkey Header 
-------------------------------------------------------------*/



.main-top-section {
	width: 100%;
	height: 123px;
	background: #2e3840;
	.border-radiuses(4px, 0, 0, 4px);
	.box-shadow(0 0 0 1px #2e3840);
}
 
.masterkey-branding {
	position: absolute;
	top:40px;
	right:40px;
	text-align: center;
	svg {
		polygon, line {
			stroke-width: 1px;
			stroke: #7d8a94;
		}
	}

	.mk-theme-version {
		display: block;
		clear:both;
		color: #7d8a94;
		font-size: 10px;
		line-height: 12px;
		margin-top: 5px;
		strong {
			display: block;
		}
	}
}




 
/* 
**
**
** Masterkey Header
-------------------------------------------------------------*/



.mk-options-container { 
	position: relative;
	background: url(../../images/masterkey-body-bg.png) left center repeat-y #fff;
	margin: 10px 20px 0 0;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	border:1px solid #bfbfbf;
	.border-radius(4px);
}


.mk-main-navigator li, .mk-sub-navigator li {
	&.ui-state-active, &.ui-widget-content &.ui-state-active, &.ui-widget-header &.ui-state-active, &.ui-state-hover {
		border: none !important;
		background: none !important;
		font-weight: inherit !important;
		color: inherit !important;
	}
}


/* 
**
**
** Main Navigator
-------------------------------------------------------------*/

.mk-main-navigator {
	margin:0;
	width: 100%;
	li {	
		margin:13px 0 5px 15px;
		text-align: center;
		display: inline-block;
		float:left;
		a {
			display: block;	
			color:#fff !important;
			text-align: center;
			font-size: 14px;
			line-height: 14px;
			text-decoration: none;
			.border-radius(20px);
			width: 97px;
			height: 97px;
			
			svg {
				margin-top: 20px;
				path {
					stroke-width: 0;
					fill: #89daff;
				}
				polygon, line {
					stroke-width: 1px;
					stroke: #89daff;
				}
				polygon {
					fill: transparent;
				}
				rect {
					fill: #89daff;
				}
			}
			
			span {
				display: block;
				clear: both;
				margin-top: 8px;
			}

			&:hover {
				background-color: #43505a;
			}
			&:focus{
				.box-shadow(none) !important;
			}

		}

		&.ui-tabs-active a {
			background-color: #53a2be;
			svg {
				path {
					fill: #fff;
				}
				polygon, line {
					stroke: #fff;
				}
				rect {
					fill: #fff;
				}
			}
		}

													
	}
}


.mk-main-panes {
	min-height: 700px;
	display: block;
	&.hidden-view {
		opacity: 0.35;
	}
}

.mk-options-v2-container .mk-main-panes {
	margin: 0 0 15px 188px;
	padding-top: 25px;
}

html[dir="rtl"] .mk-options-v2-container .mk-main-panes {
	margin: 0 188px 15px 0;
}



/* 
**
**
** Sub Navigator
-------------------------------------------------------------*/

.mk-sub-navigator {
	display: block;
	float: left;
	margin: 30px 0 0;
	padding: 0;
	width:184px;

	li {
		display: block; 
		margin: 0;
		padding: 5px 0 5px 10px;
		a {
			display: inline-block;
			.border-radius(20px);
			padding: 16px;
			color:#222222 !important;
			font-size: 14px;
			line-height: 14px;
			padding: 13px 16px;
			text-decoration: none;
			&:hover {
				background-color: #cbcfd4;
			}
			&:focus{
				.box-shadow(none) !important;
			}
		}	
			&.ui-state-active a {
				background-color: #6d808f;
				color:#fff  !important;
			}
	}
}

.mk-sub-panes {
	display: block;
	margin: 0 0 15px 188px;
	padding-top: 25px;


}





/* 
**
**
** General Options Layouts
-------------------------------------------------------------*/

.mk-single-option {
	padding: 0 15px 25px 25px;
	margin: 0 0 20px 0;
	label{
		display: block;
		color: #444;
		font-weight: bold;
		margin-bottom: 10px;
		font-size: 14px;
		text-transform: capitalize;
	} 

	border-bottom: 1px solid #eee;

	.option-desc {
		display: block;
		margin-bottom: 20px;
		color:#99999b;
		font-size: 14px;
		font-style: italic;

	}

	.option-desc-warning {
		display: block;
	    color: #e74c3c;
	    margin-top: 10px;

	}

}

.mk-heading-option {
	border-bottom: 1px solid #d9d9d9;
	margin-bottom: 40px;
	.mk-page-heading {
		padding:0 0px 0 33px;
		font-size: 26px;
		line-height: 32px;
		font-weight: 400;
		display: block;
	}

	.option-desc {
		display: block;
		margin:0 200px 15px 33px;
		color:#777777;
		font-size: 11px;

	}
}




.mk-footer-buttons {
	display: block;
	margin:60px 30px 30px 130px;
	text-align: right;
	height: 70px;

}

.primary-button {
	font-size: 14px;
	display: inline-block;
	font-weight: 500;
	letter-spacing: 1px;
	.border-radius(40px);
	outline:0;
	border:0;
	margin-left: 15px;
	padding: 14px 25px;
	text-decoration: none;
	cursor: pointer;
}

.secondary-button {
	font-size: 14px;
	display: inline-block;
	font-weight: 500;
	letter-spacing: 1px;
	.border-radius(6px);
	outline:0;
	border:0;
	margin-left: 10px;
	padding: 11px 20px;
	text-decoration: none;
	cursor: pointer;
	color: #666666;
	.gradient(#dddddd,#cdcdcd);

	&:hover {
		color: #5c5c5c;
		.gradient(#d5d5d5,#c1c1c1);
	}
}

.full-rounded {
	.border-radius(40px);
}

.blue-button {
	color:#fff !important;
	.gradient(#58bcdf,#42a6c9);
	&:hover {
		.gradient(#57b8da,#409dbe);
	}
}

.outline-button {
	border:1px solid #6d808f;
	color: #6d808f;
	&:hover {
		background-color: #6d808f;
		color: #fff;
	}
}

.green-button {
	color:#fff !important;
	background: #43b77a;
	.border-radius(6px);
	&:hover {
		background: #3ea971;
	}
}

#save_theme_options_top {
	position: absolute;
	top:137px;
	right:15px;
}
#mk_reset_confirm {
	position: absolute;
	bottom:20px;
	left:0px;
	padding: 14px 20px;
}





.progress-circle {
  	position: relative;
  	display: inline-block;
  	top: -13px;
	opacity: 0;
	transition: all 0.2s;

	&.is-active {
		opacity: 1;
	}
}

.progress-circle svg {
  position: absolute;
  top: 0;
  left: 0;
  transition: color 0.2s; 
}

.progress-msg {
	position: absolute;
	width: 600px;
	text-align: right;
	right: 20px;
	top: 15px;
	font-size: 14px;
}

.progress-circle__line {
  	fill: transparent;
  	stroke-width: 3;
  	stroke-dasharray: 200;
    transform-origin: center center;
    transform: rotate(-90deg);
  /* firefox bug fix - won't rotate at 90deg angles */
  // -moz-transform: rotate(-89deg) translateX(-190px);
}

.progress-circle__line.inner {
  	stroke: #e6e6e6;
  	stroke-dashoffset: 0;
}

.progress-circle__line.outer {
  	stroke: #43a7ca;	
  	stroke-dashoffset: 200;
}
.progress-circle.is-success .progress-circle__line.outer {
  	stroke: #1ecd97;	
}


.progress-circle {
	.success-icon, 
	.error-icon {
		top: 8px;
		left: 8px;
		opacity: 0;
		transition: opacity 0.2s;

		path {
			stroke-linecap: round;
			stroke-width: 2;
		}
	}

	.success-icon path {
		stroke: #1ecd97;
	}
	.error-icon path {
		stroke: #f24b4e;
	}

	&.is-error {
		.progress-msg {
			color: #f24b4e;
		}
		.progress-circle__line.outer {
			stroke: #f24b4e;
		}
		.error-icon { 
			opacity: 1; 
		}
	}

	&.is-success {
		.progress-msg {
			color: #1ecd97;
		}
		.progress-circle__line.outer {
			stroke: #1ecd97;
		}
		.success-icon {
			opacity: 1;
		}
	}
}


/* 
**
**
** RTL styling for admin panel
-------------------------------------------------------------*/
html[dir="rtl"] .mk-options-container{
  background: url(../../images/masterkey-body-bg-rtl.png) right center repeat-y #fff;
  margin: 10px 0 0 20px;
}
html[dir="rtl"] .mk-sub-panes {
  margin: 0 188px 15px 0;
}
html[dir="rtl"] .mk-sub-navigator {
  float: right;
}
html[dir="rtl"] #save_theme_options_top {
	left: 15px;
	right: auto;
}
html[dir="rtl"] .mk-sub-navigator li {
	padding: 5px 10px 5px 0;
}
html[dir="rtl"] #mk_reset_confirm {
	right:0px;
	left: auto;
	margin-left: 0;
	margin-right: 15px;
}
html[dir="rtl"] .mk-footer-buttons {
	margin:60px 130px 30px 30px;
	text-align: left;
}


@font-face {
	font-family: 'masterkey-icons';
	src:url('../masterkey-icons/masterkey-icons.eot');
	src:url('../masterkey-icons/masterkey-icons.eot?#iefix') format('embedded-opentype'),
		url('../masterkey-icons/masterkey-icons.woff') format('woff'),
		url('../masterkey-icons/masterkey-icons.ttf') format('truetype'),
		url('../masterkey-icons/masterkey-icons.svg#masterkey-icons') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:

[class*="icon-"] {
*/
.icon-globe, .icon-checkmark3, .icon-close2, .icon-menu10, .icon-lock2, .icon-arrow-up-right2, .icon-arrow-up4, .icon-arrow-up-left2, .icon-arrow-right5, .icon-arrow-left4, .icon-arrow-down4, .icon-arrow-down-right2, .icon-arrow-down-left2, .icon-menu10-2, .icon-support, .icon-lab, .icon-blog, .icon-briefcase3, .icon-type, .icon-globe-2, .icon-droplet3 {
	font-family: 'masterkey-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-globe:before {
	content: "\25a0";
}
.icon-checkmark3:before {
	content: "\25a2";
}
.icon-close2:before {
	content: "\25a3";
}
.icon-menu10:before {
	content: "\25a4";
}
.icon-lock2:before {
	content: "\25a8";
}
.icon-arrow-up-right2:before {
	content: "\25ad";
}
.icon-arrow-up4:before {
	content: "\25ac";
}
.icon-arrow-up-left2:before {
	content: "\25b0";
}
.icon-arrow-right5:before {
	content: "\25c6";
}
.icon-arrow-left4:before {
	content: "\25db";
}
.icon-arrow-down4:before {
	content: "\25e0";
}
.icon-arrow-down-right2:before {
	content: "\25de";
}
.icon-arrow-down-left2:before {
	content: "\25e3";
}
.icon-menu10-2:before {
	content: "\25e5";
}
.icon-support:before {
	content: "\25e8";
}
.icon-lab:before {
	content: "\25e7";
}
.icon-blog:before {
	content: "\25eb";
}
.icon-briefcase3:before {
	content: "\25ef";
}
.icon-type:before {
	content: "\25f1";
}
.icon-globe-2:before {
	content: "\25f2";
}
.icon-droplet3:before {
	content: "\25f4";
}