@import '../../../../../../../themes/bridge/css/scss/variables';
@import '../../../../../../../themes/bridge/css/scss/mixins';

.qodef-core-dashboard{
	max-width: initial !important;

	.qodef-core-dashboard-inner{
		margin: 0 -15px;
		display: inline-block;
		width: 100%;
	}

	.qodef-cd-logo {
		display: inline-block;
		vertical-align: middle;
		padding-right: 15px;
		width: 62px;
	}
	.qodef-cd-title {
		display: inline-block;
		vertical-align: middle;
		font-size: 41px;
		font-weight: 400;
		margin: 0;
	}

	.qodef-cd-title-holder {
		margin-bottom: 30px;
	}

	.qodef-cd-subtitle {
		font-size: 18px;
		line-height: 25px;
		font-weight: 400;
		color: #555d66;
		max-width: 610px;
		margin: 10px 0 30px;
	}
	.qodef-core-dashboard-column {
		float: left;
		width: 100%;
		max-width: 610px;
		padding: 0 15px;

		@media only screen and (max-width: 1600px) {
			.bridge-dashboard_page_system-info & {
				max-width: initial;
				width: 50%;
				box-sizing: border-box;
			}
		}

		@media only screen and (max-width: 768px) {
			.bridge-dashboard_page_system-info & {
				width: 100%;
			}
		}

		&.qodef-cd-smaller-column {
			max-width: 380px;
		}

		.qodef-core-dashboard-box {
			background-color: #fff;

			&.qodef-core-bottom-space {
				margin-bottom: 30px;
			}

			.qodef-cd-box-title-holder {
				padding: 28px 34px 23px;

				p {
					margin: 19px 0 0;
					padding: 0;
					font-size: 16px;
					line-height: 22px;
					font-weight: 400;
					color:#555d66;
				}
			}

			&.qodef-cd-import-box {
				.qodef-cd-box-title-holder {

					p {
						font-size: 14px;
						line-height: 20px;
						margin: 17px 0 0;
					}
				}

				.qodef-cd-label {
					font-weight: 600;
					margin-bottom: 15px;
				}

			}

			h2 {
				margin: 0;
				padding: 0;
				font-size: 25px;
				font-weight: 400;
				color: #32373c;
				text-align: left;
			}

			h3 {
				margin: 0;
				padding: 0;
			}

			.qodef-cd-field-holder {
				padding-bottom: 30px;
			}
			.qodef-cd-label {
				display: block;
				color: #555d66;
				font-size: 14px;
				margin-bottom: 7px;
			}
			.qodef-cd-input {
				border: none;
				border-bottom: 1px solid #c2c2c2;
				outline: 0;
				width: 50%;
				box-shadow: none;
				color: #555d66;
				font-size: 14px;
				padding: 4px 0;
				margin: 0;
				&:focus {
					outline: 0;
					border-color: #c2c2c2;

					@include qodefPlaceholder {
						color: #555d66;
					}
				}
				@include qodefPlaceholder {
					color: #555d66;
				}

				&:-webkit-autofill,
				&:-webkit-autofill:hover,
				&:-webkit-autofill:focus,
				&:-webkit-autofill:active  {
					-webkit-box-shadow: 0 0 0 30px white inset !important;
				}

				&:-webkit-autofill {
					-webkit-text-fill-color: #666 !important;
				}

			}


			.qodef-cd-error-field {
				border-bottom-color: #ee3535;
			}

			.qodef-cd-error-message {
				display: block;
				color: #ee3535;
				font-size: 12px;
				margin-top: 5px;
			}

			.qodef-cdb-problem {
				border: 1px solid #e1e1e1;
				border-left: 3px solid #ee3535;
				padding: 15px;
				margin-bottom: 25px;

				p {
					font-size: 12px;
					line-height: 18px;
					font-weight: 600;
					margin: 0;
					padding: 0;
				}

			}

			&:last-child {

				.qodef-cd-box-row {
					&:last-child {
						padding-bottom: 10px;
					}
				}

			}

		}

		.qodef-cd-button {
			padding: 7px 35px;
			font-size: 16px;
			line-height: 1em;
			color: #fff;
			background-color: #3596ee;
			border: none;
			border-radius: 5px;
			box-shadow: 0 2px 0 0 rgba(36, 110, 174, 1);
			cursor: pointer;
			
			&.qodef-import-demo-data-disabled,
			&.qodef-cd-button-disabled {
				background-color: #6bb4f7;
			}
		}

		.qodef-cd-button-wait {
			display: none;
			font-size: 12px;
			color: #3596ee;
			margin-left: 15px;
			font-weight: 400;
		}

		a.qodef-cd-button {
			text-decoration: none;
		}
		.qodef-cd-box-section {

			h3 {
				padding: 0;
				margin: 0 0 24px;
				color: #555d66;
				font-size: 17px;
				line-height: 20px;
			}

			padding: 0 35px 10px;


		}

		.qodef-cd-box-list {
			padding: 10px 35px;
			margin: 0;

			li {
				font-size: 15px;
				margin: 0 0 25px;

				a {
					color: #3675ae;
				}

			}

		}

		.qodef-cd-box-row {
			display: table;
			padding: 0 20px;
			border-bottom: 1px solid #f1f1f1;
			width: 100%;
			box-sizing: border-box;
			font-size: 14px;

		}

		.qodef-cdb-label,
		.qodef-cdb-value {
			display: table-cell;
			width: 50%;
			padding: 17px 15px;
		}

		.qodef-cdb-value {
			color: #3e87be;
		}

		.qodef-cdb-value-false span{
			color: #ea3a27;
		}

		.qodef-cd-import-form {
			padding: 0 30px 10px 30px;

			.qodef-cd-box-form-section {
				padding: 0 0 28px;


				&.qodef-cd-box-form-section-columns {
					display: flex;
					margin: 0 -15px;

					.qodef-cd-box-form-section-column{
						padding: 0 15px;
						&:first-child {
							width: 75%;
						}
						&:last-child {
							width: 25%;
						}
					}
				}
				.qodef-import-demo,
				.qodef-cd-import-option {
					width: 100%;
				}

				.select2-container--default .select2-selection--single {
					border-radius: 0;
					border-color: #e1e1e1;
					height: 34px;

					.select2-selection__rendered {
						line-height: 34px;
					}

					.select2-selection__arrow {
						height: 32px;
					}
				}



			}

			.qodef-cd-import-is-completed {
				display: none;
				color: #3596ee;
				font-size: 14px;
				font-weight: 600;
			}
			.qodef-cd-import-went-wrong {
				display: none;
				color: #3596ee;
				font-size: 14px;
				font-weight: 600;

				a {
					color: inherit;
				}
			}


			.qodef-cd-box-form-section-dependency,
			.qodef-cd-box-form-section-progress {
				display: none;
			}

		}

	}
}

#qodef-progress-bar[value] {
	/* Reset the default appearance */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	/* Get rid of default border in Firefox. */
	border: none;

	/* Dimensions */
	width: 100%;
	height: 5px;
}
#qodef-progress-bar[value]::-webkit-progress-bar {
	background-color: #fff;
	border: 1px solid #e1e1e1;
	border-radius: 0;
}

/* IE10 */
#qodef-progress-bar {
	color: #3596ee;
}

/* Firefox */
#qodef-progress-bar::-moz-progress-bar {
	background: #3596ee;
}

/* Chrome */
#qodef-progress-bar::-webkit-progress-value {
	background: #3596ee;
}

/* Polyfill */
#qodef-progress-bar[aria-valuenow]:before  {
	background: #3596ee;

}

.qodef-cd-selection {

	li.select2-results__option {
		padding: 10px;
		margin: 0;
	}

	img {
		vertical-align: middle;
		padding-right: 20px;
	}
	.select2-container--default & .select2-results__option[aria-selected=true] {
		background-color: #fafafa;
	}

	.select2-container--default & .select2-results__option--highlighted {
		background-color: #fafafa;
		color: #000000;
	}
}
.qodef-cd-action-selection,
.qodef-cd-single-page-selection {
	li.select2-results__option {
		margin: 0;
	}
	.select2-container--default & .select2-results__option[aria-selected=true] {
		background-color: #fafafa;
	}

	.select2-container--default & .select2-results__option--highlighted {
		background-color: #fafafa;
		color: #000000;
	}
}
.qodef-cd-import-single-page{
	width: 100%;
}
.qode-cd-switch {
	display: inline-block;
	border: 1px solid #e1e1e1;
	border-radius: 40px;
	overflow: hidden;

	.qodef-cd-import-attachments{
		display: none;
	}
	.qode-cd-cb-enable,
	.qode-cd-cb-disable{
		display: block;
		float: left;
		padding: 0 10px;

		&.selected {
			background-color: #3596ee;
			color: #fff;
		}
	}

	.qode-cd-cb-enable span,
	.qode-cd-cb-disable span{
		line-height: 32px;
		font-size: 13px;
		display: block;
		font-weight: bold;
	}
}


/*** Import List ***/

.qodef-cd-demos-list{
	@include qodeRelativeHolderLayout();
	background: #fff;
	box-sizing: border-box;
	padding: 45px 35px;


	/***** Demos Article Global Style - begin *****/

	article {
		@include qodeRelativeHolderLayout();
		box-sizing: border-box;

		.touchevents & {
			cursor: pointer;
		}

		.qodef-cd-demo-item-inner {
			@include qodeRelativeHolderLayout();
		}

		.qodef-cd-demo-item-link {

		}

		.qodef-cd-di-image {
			margin: 0 0 22px;
			position: relative;

			.qodef-cd-di-image-overlay {
				@include qodeAbsoluteHolderLayout();
				z-index: 1;
				opacity: 0;
				background-color: #fff;
				transition: opacity 0.3s ease;

				.qodef-cd-di-image-overlay-inner {
					display: flex;
					justify-content: center;
					flex-direction: column;
					text-align: center;
					height: 100%;

					.qodef-cd-di-image-links-holder {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-wrap: wrap;
						padding: 0 5%;
					}

					.qodef-cd-di-image-link {
						padding: 0 12px;
						margin: 0 0 4px;

						a {
							font-size: 11px;
							text-transform: uppercase;
							color: #272727;
							font-weight: 500;
							letter-spacing: 1.3px;
							text-decoration: none;

							&:focus {
								outline: none;
								box-shadow: none;
							}

							svg{
								transition: all 0.3s ease;
							}

							&:hover {
								svg{
									animation: qode-arrow-move 0.7s ease;
								}
							}
						}
					}

					.qodef-cd-di-image-description-holder {
						p{
							font-size: 13px;
							line-height: 16px;
							color: #b5b5b5;
							margin: 5px 0 0;
						}
					}
				}
			}
			
			&:hover {
				.qodef-cd-di-image-overlay {
					opacity: 1;
				}
			}

			img {
				box-shadow: 0px 0px 9px 4px rgba(0,0,0, 0.05);
			}
		}
		.qodef-cd-di-text {

			padding-bottom: 10px;

			.qodef-cd-di-title{
				padding: 0;
				margin: 0;
				font-size: 18px;
				line-height: 25px;
				font-weight: 400;
			}

			.qodef-cd-di-categories {
				font-size: 14px;
				font-weight: 400;
				color: #555d66;

				span{
					position: relative;
					display: inline-block;
					vertical-align: middle;
					padding: 0;
					margin: 0 7px 0 0;

					&:after{
						position: absolute;
						top: 0;
						right: -4px;
						content: ', ';
						color: inherit;
						line-height: inherit;

					}

					&:last-child{
						&:after{
							display: none;
						}
					}

				}
			}

		}

	}

	/***** Article Global Style - end *****/

	/***** Gallery Columns Space - begin *****/

	$columns_space_label: ('no', 'tiny', 'small', 'normal', 'medium', 'large');
	$columns_space: (0, 5, 10, 15, 25, 30);

	@for $i from 0 to length($columns_space_label) {
		&.qodef-cd-#{nth($columns_space_label,$i+1)}-space {
			$item_space: nth($columns_space, $i+1);
			$item_bottom_margin: $item_space * 2;

			article {
				padding: 0 #{$item_space}px;
				margin: 0 0 #{$item_bottom_margin}px;
			}
		}
	}



	&.qodef-cd-demos-masonry {

		.qodef-cd-demos-list-inner {
			opacity: 0;
		}

		article,
		.qodef-cd-grid-sizer {
			width: 100%;
		}

		.qodef-cd-grid-gutter {
			width: 0;
		}

		$masonry_columns_number: ('two', 'three', 'four', 'five');

		@for $i from 0 to length($masonry_columns_number) {
			&.qodef-cd-demos-#{nth($masonry_columns_number,$i+1)}-columns {
				$column_width: 100%/($i+2);

				article,
				.qodef-cd-grid-sizer{
					width: $column_width;
				}

			}
		}

	}

	/***** Gallery Types - end *****/

	.qodef-cd-demos-filter-holder {
		padding: 0 0 60px 25px;
	}

	.qodef-cd-dlf-search {

		position:relative;
		width: 250px;
		padding-right: 30px;

		.qodef-cd-dlf-search-icon {
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -11px;
			color: #3594cd;
		}

		input{
			width: 100%;
			box-sizing: border-box;
			border: none;
			border-bottom: 1px solid #c2c2c2;
			box-shadow: none;
			padding-left: 25px;
			outline: none;
			font-size: 14px;
			line-height: 26px;
			color: #555d66;
		}
	}

	.qodef-cd-dlf-search{
		display: inline-block;
	}

	.qodef-cd-dlf-filter{
		position: relative;
		display: inline-block;
		vertical-align: bottom;
	}

	.qodef-cd-dfl-filter-list {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin: 0;
		padding: 0;
		list-style: none;

		> li {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			padding: 0 10px;
			margin: 0;
			float: left;
			cursor: pointer;
			opacity: 1;
			@include qodeTransition(opacity 0.2s ease-out);

			span {
				position: relative;
				display: inline-block;
				vertical-align: middle;
				color: #555d66;
				font-size: 16px;
				font-weight: 600;
				line-height: 20px;
				white-space: nowrap;
				border-bottom: 1px solid transparent;
				@include qodeTransition(color .2s ease-out);

			}

			&:hover,
			&.qodef-cd-demos-current {
				span {
					border-bottom-color: #3596ee;
					color: #3596ee;
				}
			}
		}

	}

}

//Demo Import Popup

#qodef-demo-import-popup{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.3);

	.qodef-import-popup-close{
		position: absolute;
		right: 25px;
		top: 25px;
		text-decoration: none;
		color: #000;
	}

	.qodef-core-dashboard{
		margin: 0;
		padding: 27px 40px 2px;
		background-color: #fff;
		position: relative;

		.qodef-core-dashboard-column{
			max-width: 670px;

			.qodef-core-dashboard-box {
				.qodef-cd-box-title-holder{
					padding: 0;
					margin: 0 0 33px;
				}
			}

			.qodef-cd-import-form{
				padding: 0;
			}
		}

		.qodef-import-popup-top-info{

		}

		.qodef-import-popup-image-holder{
			max-width: 205px;
			margin-right: 19px;
			display: inline-block;
			vertical-align: top;

			img{
				display: block;
				max-width: 100%;
			}
		}

		.qodef-popup-required-plugins-holder{
			display: inline-block;
			vertical-align: top;
			max-width: calc(100% - 230px);
			border: 1px solid #e1e1e1;
			border-left: 3px solid #3596ee;
			box-sizing: border-box;
			padding: 16px 17% 11px 18px;

			p{
				margin: 0;
				font-size: 12px;

				&.qode-demo-plugins-install-main-title{
					margin: 0 0 7px;
				}

				.qodef-install-plugin-link {
					color: #4b9eef;
					text-decoration: none;
				}
				
				.qode-demo-plugin-installed{
					color: #6ab375;
				}

				.qodef-install-plugin-link{
					&.qodef-disabled{
						pointer-events: none;
						opacity: 0.6;
					}

					&:focus {
						box-shadow: none;
						outline: none;
					}
				}
			}

			.spinner{
				float: none;
				margin: 0 0 0 4px;
				top: 2px;
				width: 15px;
				background-size: 15px;
				position: relative;

				&.active{
					visibility: visible;
				}
			}
		}
	}
}

@media only screen and (max-width: 1440px) {
	.qodef-cd-demos-list {

		&.qodef-cd-demos-masonry {

			$masonry_columns_number: ('four', 'five');

			@for $i from 0 to length($masonry_columns_number) {
				&.qodef-cd-demos-#{nth($masonry_columns_number,$i+1)}-columns {
					$column_width: 100% / 3;

					article,
					.qodef-cd-grid-sizer {
						width: $column_width;
					}

				}
			}
		}

	}
}

@include laptop-landscape-large {

	.qodef-cd-dlf-filter{
		display: block;
		padding-top: 30px;
	}

	.qodef-cd-demos-list .qodef-cd-dfl-filter-list > li {

		padding: 5px 10px;

		span {
			line-height: 26px;
		}

	}

}

@include laptop-landscape-medium {

	.qodef-cd-demos-list {

		&.qodef-cd-demos-masonry {

			$masonry_columns_number: ('four', 'five');

			@for $i from 0 to length($masonry_columns_number) {
				&.qodef-cd-demos-#{nth($masonry_columns_number,$i+1)}-columns {
					$column_width: 100% / 3;

					article,
					.qodef-cd-grid-sizer {
						width: $column_width;
					}

				}
			}
		}

	}
}

@include ipad-landscape {

	.qodef-cd-demos-list {

		&.qodef-cd-demos-masonry {

			$masonry_columns_number: ('three', 'four', 'five');

			@for $i from 0 to length($masonry_columns_number) {
				&.qodef-cd-demos-#{nth($masonry_columns_number,$i+1)}-columns {
					$column_width: 100% / 3;

					article,
					.qodef-cd-grid-sizer {
						width: $column_width;
					}

				}
			}
		}
	}
}

@include ipad-portrait {

	.qodef-cd-demos-list {

		&.qodef-cd-demos-masonry {

			$masonry_columns_number: ('three', 'four', 'five');

			@for $i from 0 to length($masonry_columns_number) {
				&.qodef-cd-demos-#{nth($masonry_columns_number,$i+1)}-columns {

					article,
					.qodef-cd-grid-sizer {
						width: 50%;
					}

				}
			}
		}
	}
}



@include phone-landscape {

	.qodef-cd-demos-list {

		&.qodef-cd-demos-masonry {

			$masonry_columns_number: ('two', 'three', 'four', 'five');

			@for $i from 0 to length($masonry_columns_number) {
				&.qodef-cd-demos-#{nth($masonry_columns_number,$i+1)}-columns {

					article,
					.qodef-cd-grid-sizer {
						width: 100%;
					}
				}
			}
		}
	}
}
