// GLOBAL
// -------------------------

html {
	background: @body-bg;
}

html,
body {
	height: 100%;
	width: 100%;
	// overflow-x: hidden;
}

a:focus {
	outline: 0 none;
}

.overall-wrapper {
	height: 100%;
}

// table based layout
.panels-wrapper {
	width: 100%;
	height: 100%;
	display: table;
}

@media (max-width: @screen-sm-max) {
	.panel-toggle {
		display: block !important;
	}

	.overall-wrapper {
		margin-left: -370px;
	}
}


// MAIN NAVIGATION BLOCK
//---------------------------

#panel-left {
	width: @main-nav-width;
	display: table-cell;
	vertical-align: top;
	background: @main-nav-bg;

	// branding/logo and stuff
	.brand {
		text-align: center;
		display: block;
		width: @main-nav-width;
		padding: 12px 0;
		border-bottom: 1px solid @brand-border-color;

		img {
			max-width: 70%;
		}
	}

	// main navigation items
	.nav-main {
		width: @main-nav-width;
		margin: 0; padding: 0;
		list-style-type: none;
		text-align: center;

		> li {
			margin: 0;
			padding: 0;

			> a {
				display: block;
				padding: 20px 0;
				text-decoration: none;
				font-size: 12px;
				color: @main-nav-link-color;
				border-left: 2px solid transparent;
				.transition(all .3s ease-in-out);

				i {
					display: block;
					font-size: 26px;
					margin-bottom: 5px;
					color: @main-nav-link-icon-color;
					.transition(all .2s ease-in);
				}

				&:hover {
					background: @main-nav-link-hover-color;
				}
			}

			&.active {
				> a {
					background: @main-nav-link-active-bg-color !important;
					color: @main-nav-link-active-color !important;
					border-left: 2px solid @main-nav-link-active-border-color !important;

					i {
						color: @main-nav-link-active-icon-color;
						font-size: 38px;
					}
				}

				.nav-sub {
					display: block;
				}
			}

			&.current {
				> a {
					background: @main-nav-link-current-bg-color;
					border-left: 2px solid @main-nav-link-current-border-color;
				}
			}
		}
	}

	// system info
	.system-info {
		text-align: center;
		font-size: 11px;
		border-top: 1px solid @brand-border-color;
		padding-top: 20px;
		color: @main-nav-link-color;

		.social-links {
			margin-bottom: 20px;
			
			a {
				font-size: 20px;

				&:hover {
					text-decoration: none;
				}
			}
		}
	}
}


// SUBMENU
//---------------------------

#panel-center {
	width: @sub-nav-width;
	background: @sub-nav-bg;
	display: table-cell;
	vertical-align: top;

	.nav-sub {
		display: none;
		overflow: hidden;
		list-style-type: none;
		margin: 0;
		padding: 0;
		text-align: left;

		&.active {
			display: block;
		}

		> li {
			margin: 0 30px 0;
			padding: 0;

			> a {
				padding: 5px 10px;
				display: block;
				color: @sub-nav-link-color;

				&:hover {
					background: @sub-nav-link-hover-color;
					text-decoration: none;
					margin-right: -30px;
				}

				i {
					color: @brand-primary;
				}
			}

			> span {
				padding: 5px 10px;
				display: block;
				color: darken(@sub-nav-link-color, 30%);
			}


			&.heading {
				padding: 25px 10px 5px;
				color: @sub-nav-heading-color;
				text-transform: uppercase;
			}

			&.single {
				padding: 30px 10px 5px;
			}

			&.active {
				background: @sub-nav-link-active-bg-color;
				margin-right: -30px;

				> a {
					color: @sub-nav-link-active-color;

					&:hover {
						background: @sub-nav-link-active-bg-color;
						text-decoration: none;
					}
				}
			}

			&.user-info {
				padding: 30px 10px 0;
				
				h3, h5 {
					color: #fff;
				}
			}

			.label {
				float: right;
				margin-right: 0;
				margin-top: 5px;
				font-size: 14px;
			}
		} 
	}
}


// CONTENT
//---------------------------

#panel-content {
	background: @body-bg;
	margin-left: @main-nav-width + @sub-nav-width;
	min-height: 100%;
	position: relative;
	display: table-cell;
	vertical-align: top;
	.clearfix();

	.content-wrapper {
		padding: 30px;
	}
}


// BLOCKS
//---------------------------

.block {
	margin-bottom: 40px;

	&-heading {
		.clearfix();

		h3 {
			font-size: 42px;	
			font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
			color: @base-dark-color;
			margin: 0;
			line-height: 46px;
		}

		border-bottom: 1px solid #ddd;
		padding: 0 0 10px;
		margin: 0 0 10px;

		.nav {
			margin-bottom: 0;

			> li > a {
				text-align: center;
				font-size: 12px;
				color: @navbar-inverse-bg;
				border-radius: 0;

				i {
					display: block;
					font-size: 22px;
					margin-bottom: 10px;
				}

				&:hover {
					background-color: #f0f0f0;
				}
			}
		}

	}

	&-content {
		padding: 10px 0 0;
		margin-bottom: 30px;

		> .row {
			margin-left: -15px;
			margin-right: -15px;
		}
	}
}


// TEMPLATES BLOCK
// ---------------

// plates list
.plates-list {

	.media {
		margin-bottom: 30px;
		padding: 20px;
		background: #fff;
		.box-shadow(0 1px 1px rgba(0,0,0,.2));
	}

	.media-heading {
		.h3();
	}

	.media-object {
		width: 150px;
	}

	.media-body {
		padding-left: 20px;
	}
}


// CONFIG BLOCKS
//---------------------------

.wrap-list {

	.wrap-group {
		padding: 30px 15px 30px;
		background-color: @widget-bg;
		.box-shadow(0 1px 1px rgba(0,0,0,.2));
		margin-bottom: 15px;

		&-heading {
			font-size: (@font-size-base * 1.25);
			font-weight: 500;
			background-color: @widget-header-bg;
			border-bottom: 1px solid @widget-header-border;
			margin-top: -30px;
			margin-bottom: 30px;
			margin-left: -15px;
			margin-right: -15px;
			padding: 10px 15px;

			h4 {
				margin: 0;
				line-height: @line-height-base;
			}
		}

		.row {
			margin-left: 0;
			margin-right: 0;
			margin-bottom: 15px;

			&:last-child {
				margin-bottom: 0;
			}

			.row {
				margin-left: -15px;
				margin-right: -15px;
			}
		}

		.col {
			padding-left: 0;

			.col {
				padding-left: 15px;
			}
		}

		label {
			font-weight: normal;
			text-align: left;
		}

		.help-block {
			font-style: italic;
		}

		.alert {
			margin-bottom: 0;
		}
	}

	.form-actions {
		margin-top: 30px;
	}
}

.wrap-list + .form-actions {
	margin-top: 30px;
}

@media screen and (max-width: 1250px) {
  .wrap-list {
    .col-lg-2 {
    	width: 33.33333333333333%;
    }
    .col-lg-4 {
    	width: 66.66666666666666%;
    }
  }
}

.box-simple {
	margin-bottom: 30px;
	padding: @padding-base-vertical @padding-base-horizontal+6;
	font-size: @font-size-base;
	line-height: @line-height-base;
	background: #fff;
	color: @gray;
	border: 1px solid @input-border;
	border-radius: @input-border-radius;
	.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
	.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");

	height: 200px;
	overflow-y: auto;

	&.fieldset {
		margin-bottom: 6px;
	}

	&-large {
		height: 250px;
	}

	&-xlarge {
		height: 300px;
	}

	&-small {
		padding: 0;

		.x-tree-node-text {
			font-size: 12px;
		}
	}
}

#sqlButtons a {
	margin-bottom: 10px;
}

#query_history {
	margin-top: 40px;
	margin-bottom: 0;

	.box-simple {
		height: 150px;

		li {
			margin-bottom: 10px;
		}	
	}
}

.form-actions {

	&.inline {
		label {
			font-weight: normal;
			margin-left: 20px;
		}
		input, select {
			display: inline-block;
		}
	}
}

.js-tooltip {
	text-decoration: none;

	&:hover {
		text-decoration: none;
	}
}

.field_type,
.field_type + .row,
.wrap-row {
	margin-top: 15px;
}
 
.form-horizontal {

	.help-block {
		margin-bottom: 0;
		font-size: @font-size-small;
	}

	.actions {
		margin-top: 6px;
	}
}

.wrap-block {
	background: #f5f5f5;
	padding: 10px;

	.actions-panel {
		border-top: 1px solid #eee;
		padding: 10px 10px 0;
		margin: 10px -10px 0;
		text-align: right;
	}
}

// feedback modal

#send-feedback-modal {
	form {
		margin: 0;
	}
}

// quick-stts

.quick-stats-block {
	position: relative;
	// background: @link-color;
	background-color: #f5f5f5;
	color: @link-color;
	text-align: right;
	padding: 20px;
	.clearfix();
	margin-bottom: 20px;

	a {
		color: @link-color;
	}

	.icon {
		position: absolute;
		left: 20px;
		bottom: 20px;
		width: 90px;
		height: 90px;
		line-height: 90px;
		color: @link-color;
		text-align: center;
		font-size: 90px;
		border-radius: 50%;
	}

	.first {
		font-size: 42px;
		font-weight: normal;
	}
}


#js-advanced-section {
	display: none;
}


#plugins-control {
	background: #f8f8f8;
	padding: 20px;
}

#js-btn-proceed {
	.badge {
		background: #fff;
		color: @brand-success;
	}
}

.plugins-list {

	.item-plugin {
		border: 1px solid #eee;
		padding: 20px;
		.clearfix();
		margin-bottom: 20px;
		position: relative;

		.date {
			position: absolute;
			right: 20px;
			top: 20px;
			font-size: 12px;
			color: #aaa;
		}

		&-image {
			float: left;
			width: 100px;
		}

		&-desc {
			margin-left: 120px;
		}

		&-actions input {
			display: none;
		}

		&:hover {
			background: #f8f8f8;
		}

		&.checked {
			border-color: @brand-info;
			background: fadeout(@brand-info, 90%);

			&:hover {
				border-color: @brand-info;
				background: fadeout(@brand-info, 90%);
			}
		}
	}
}

.upgrade-options {

	li {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.help-block {
		margin-left: 20px;
		width: 50%;
	}
}

.help-block {
	font-size: 12px;
	color: #999;
}



//
// Spinner
// --------------------------------------------------

.vm-spinner {
  margin: 0;
  width: 40px;
  text-align: center;
  display: inline-block;
}

.vm-spinner > div {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.7);

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.vm-spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.vm-spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}