@import "less-variables.less";

.formcraft-shadow {
	background-color: white;
	box-shadow: 0 0 0 0.5px rgba(0,20,40,.11), 0 2px 8px 0 rgba(50,55,90,.2);
}
.smoothing {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;	
}
.noSmoothing {
	-webkit-font-smoothing: initial;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: initial;	
}

#wpbody-content {
  padding-bottom: 0;
  >.settings-error,
  >.notice,
  >.error,
  >.updated,
  .update-nag {
    display: none !important;
  }
}

#wpcontent {
	padding-left: 0;
}
#wpfooter {
	display: none;
}

.FormCraftNewFormModal {
	color: @fontColor;
	.NewFormOptions {
		background: white;
		border-bottom: 1px solid @borderColor;
		height: 11em;
		position: relative;
		z-index: 99;
		.NewFormOption {
			.smoothing();			
			cursor: pointer;
			width: 25%;
			text-align: center;
			padding: 1.4em 0;
			display: inline-block;
			opacity: .8;
			vertical-align: top;
			span.NewFormText {
				font-size: .9em;
				text-transform: uppercase;
				font-weight: 600;
				color: @fontColor;	
			}
			.two-document {
				margin: 1em auto;
				margin-top: 1.8em;
				display: block;
				top: -.8em;
				left: -.5em;
				width: 2.2em;
				height: 3.2em;
				border: 2px solid lighten(@fontColor, 15%);
				border-radius: 2px;
				position: relative;
				
			}
			.two-document:before {
				position: absolute;
				content: '';
				top: .6em;
				left: .5em;
				width: 2.2em;
				height: 3.2em;
				border: 2px solid lighten(@fontColor, 15%);
				border-radius: 2px;			
				background: white;		
			}
			.document,
			.document-lines,
			.document-import {
				margin: 1em auto;
				display: block;
				width: 2.75em;
				height: 4em;
				border: 2px solid lighten(@fontColor, 15%);
				border-radius: 2px;
				position: relative;
			}
			.document-import:before,
			.document-lines:before {
				color: lighten(@fontColor, 15%);
				font-family: 'Material Icons';
				-webkit-font-smoothing: antialiased;
				text-rendering: optimizeLegibility;
				-moz-osx-font-smoothing: grayscale;
				font-feature-settings: 'liga';
				content: 'arrow_downward';
				position: absolute;
				left: 50%;
		    margin-left: -.49em;
		    margin-top: -.62em;
		    top: 50%;
		    font-size: 1.8em;				
			}
			.document-lines:before {
				content: 'format_align_justify';
			}
		}
		.NewFormOption.isActive,
		.NewFormOption:hover {
			opacity: 1;
			span.NewFormText {
				color: darken(@themeColor, 5%);
			}
			> span,
			> span:before,
			> span:after {
				color: lighten(@themeColor, 5%);
				border-color: lighten(@themeColor, 5%);
			}
			.document-lines:before,
			.document-lines:after {
				color: lighten(@themeColor, 5%);
			}
		}
	}
	.NewFormView {
		position: absolute;
		top: 11em;
		left: 0;
		right: 0;
		bottom: 6.95em;
		background: @backgroundGreyOne;
		> div {
			text-align: center;
		}
		select,
		.formcraft-button.white {
			width: 18em;
			opacity: .8;
			background-color: white;
			position: relative;
			background-size: 7px;
			&:hover {
				opacity: 1;
			}
		}
		.formcraft-button.white {
			padding: 1.05em 1em .87em 1em;
			margin-top: -1px;
			text-align: left;
			width: 16em;
			.formcraft-icon {
				font-weight: 300;
				text-shadow: none;
				position: absolute;
				top: 50%;
				margin-top: -0.42em;
				right: .65em;
				font-size: 1em;
				.smoothing();
			}
		}
		select.formcraft-button.white {
			width: 18em;
		}		
		.NewForm-Blank,
		.NewForm-Duplicate,
		.NewForm-Import {
			.smoothing();
			width: 100%;
			font-size: 1.4em;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
		.NewForm-Template {
			height: 100%;
			.NoTemplate {
				.smoothing();
				font-size: 1.4em;
				text-align: center;
				position: absolute;
				content: '';
				left: 10.4em;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
				z-index: 101;				
			}
			.TemplateBrowser {
				.formcraft-shadow();
				font-size: 1.02em;
				padding: 1.2em 1.2em 0 1.2em;
				text-align: left;
				position: absolute;
				background: white;
				position: absolute;
				left: 1.2em;
				top: 1.2em;
				width: 13em;
				box-sizing: border-box;
				bottom: 1.2em;
				border-radius: 4px;
				overflow-y: auto;
				.TemplateGroupHead {
					.smoothing();
					font-size: 1em;
					padding: .2em;
					font-weight: 600;
					text-transform: uppercase;
				}
				.TemplateGroup {
					padding-bottom: 1.2em;
					button {
						color: inherit;
						display: block;
						padding: .2em;
						background: none;
						box-shadow: none;
						border: 0px;
						outline: none;
						opacity: .75;
						cursor: pointer;
						border-left: 2px solid transparent;
						margin-left: -2px;
						transition: all .2s;
						width: 100%;
						text-align: left;
						&.isActive {
							border-color: @themeColor;
							margin-left: 3px;
							opacity: 1;
						}
						&:hover {
							opacity: 1;
						}
					}
				}
			}
			.ZoomInfo {
				position: absolute;
				top: 1.2em;
				right: 1.2em;
				font-size: .9em;
				font-weight: 600;
				.smoothing();
				text-transform: uppercase;
			}
			.TemplateView {
				margin-left: 15.4em;
				text-align: center;
				overflow-y: auto;
				height: 100%;
				position: static;
				&:before {
					position: absolute;
					content: '';
					left: 15.4em;
					top: 0;
					right: 0;
					bottom: 0;
					z-index: 101;
				}
				.fc-form {
					margin: 1em auto;
				}
				.form-cover {
					transform: scale(.8);
					transform-origin: 50% 0%;
					margin-top: 10%;
					margin-bottom: -15%;
					input[name='website'] {
						display: none;
					}
				}
			}
		}
	}
	.NewFormFooter {
		box-sizing: border-box;
		padding: 1.5em;
		text-align: right;
		border-top: 1px solid @borderColor;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: white;
		height: 6.95em;
		.formcraft-loader {
			top: .6em;
		}
		.NewFormName {
			display: inline-block;
			vertical-align: top;
			margin-left: 1.5em;
		}
		.NewFormName input {
			min-width: 100px;
			outline: none;
			font-size: 1.18em;
		  background-color: @backgroundGreyOne;
		  color: lighten(@fontColor, 2%);
			&:hover,
			&:focus {
		  	background-color: white;
		  	color: @fontColor;
		  	border-color: darken(@borderColor, 10%);
			}
		}
		.NewFormError {
			position: relative;
			top: .1em;
			font-size: 1.1em;
			display: inline-block;
		}
		.NewFormSuccess {
			position: relative;
			top: .1em;
			font-size: 1.1em;
			display: inline-block;
		}
		.formcraft-button,
		.formcraft-input-button {
			margin-left: 1.5em;
		}
	}
}

#formcraft_dashboard {
	padding: @gridPadding;
	position: relative;
	color: @fontColor;

	/* Layout Stuff */
	* {
		box-sizing: border-box;
		line-height: 1.5;
	}
	.block {
		display: inline-block;
		vertical-align: top;
		&.padding-left {
			padding-left: @gridPadding;
		}
		&.padding-right {
			padding-right: @gridPadding;
		}
		&.width-2 {
			width: 20%;
			max-width: 24em;
		}
		&.width-4 {
			width: 40%;
			max-width: 48em;
		}
		&.width-6 {
			width: 60%;
			max-width: 72em;
		}
		&.width-8 {
			width: 80%;
			max-width: 96em;
		}
		&.width-10 {
			width: 100%;
			max-width: 120em;
			padding-right: 0;
		}
	}
	.formcraft_card {
		.formcraft-shadow();
		background-color: white;
		border-radius: 4px;
	}
	.block-header {
		.smoothing();
		padding: 1.1em 1.2em;
		border-bottom: 1px solid @borderColor;
		.formcraft-button,
		.formcraft-input-button {
			margin-left: 1em;
		}
		.formcraft-loader {
			margin-left: .65em;
		}
		.formcraft-button {
			vertical-align: bottom;
		}
		.float-right {
			float: right;
		}
		.block-title {
			font-size: 1.4em;
			margin-right: .5em;
			vertical-align: bottom;
			position: relative;
			bottom: -1px;
		}
	}
	.result-count {
		display: inline-block;
		padding: .35em 1.2em;
	}
	.formcraft_table {
		display: block;
		overflow: hidden;
		.td {
			display: inline-block;
		}
		.thead.tr > span,
		.thead.tr > div > label,
		.thead.tr > label,
		.thead.tr > a {
			display: inline-block;
			padding: 1.53em 0em 1.33em 1em;
			position: relative;
		}
		.sortable {
			cursor: pointer;
			border-bottom: 2px solid transparent;
			.formcraft-icon {
				position: absolute;
				right: 1em;
				top: 50%;
				font-size: 1.4em;
				margin-top: -.55em;
			}
			&:hover {
				border-color: @themeColor;
			}
		}
		.tr {
			display: block;
			border-bottom: 1px solid @borderColor;
		}
		.tbody {
			min-height: 31.54em;
			overflow: auto;
			background: @backgroundGreyOne;
			position: relative;
			.tr {
				border-color: lighten(@borderColor, 3%);
			}
			.NoResults {
				position: absolute;
				left: 0;
				right: 0;
				top: 50%;
				text-align: center;
				font-size: 1.4em;
				transform: translateY(-50%);
				-webkit-font-smoothing: antialiased;
				a {
					.noSmoothing();
					color: @themeColor;
					display: inline-block;
					padding: .1em .5em;
					font-size: .8em;
					text-decoration: none;
					&:hover {
						color: darken(@themeColor, 10%);
						opacity: 1;
					}
				}
			}
			.tr .formcraft-icon.TrashIcon {
				padding: .52em 1em .52em 0;
		    text-align: right;
		    font-size: 1.2em;
		    vertical-align: top;
		    color: inherit;
		    cursor: pointer;
		    &:hover {
		    	color: red;
		    }
			}
		}
		.tbody .tr.canHover {
			cursor: pointer;
		}
		.tbody .tr.canHover a:focus {
			color: inherit;
		}
		.tbody .tr.canHover:hover,
		.tbody .tr.canHover.isActive {
			border-color: lighten(@borderColor, 1%);
			border-top: 1px solid lighten(@borderColor, 1%);
			margin-top: -1px;
			background-color: @backgroundGreyTwo;
		}
		.tr > span,
		.tr > label,
		.tr > a {
			padding: .79em 0 .79em 1em;
			vertical-align: top;
			text-decoration: none;
			display: inline-block;
			color: inherit;
			outline: none;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			&:focus {
				box-shadow: none;
				color: @themeColor;
			}
		}
		.tr.thead {
			.smoothing();
			font-weight: 600;
			text-transform: uppercase;
			font-size: .9em;
			height: 4.45em;
			position: relative;
			z-index: 999;
			> div {
				vertical-align: top;
				display: inline-block;
			}
			input[type='radio'] {
				margin-right: 6px;
			}
			.hasDivider {
				position: relative;
			}
			.hasDivider::before {
				content: '-';
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    font-size: 1.5em;
		    margin-top: -.75em;
		    margin-left: -.2em;
		    font-weight: 300;
			}
			input[type='text'],
			select {
				color: inherit;
				font-weight: inherit;
				text-align: center;
				font-size: inherit;
				width: 50%;
				margin: 0;
				border: 0px;
				padding: 1.53em .6em 1.25em .6em;
				text-transform: uppercase;
				background-color: transparent;
				vertical-align: top;
				outline: none;
				box-shadow: none;
				cursor: pointer;
				border-bottom: 2px solid transparent;
				&:hover {
					border-color: @themeColor;
				}
				&:focus {
					border-color: @themeColor;
					box-shadow: none;
				}
			}
			input[type='text'].datepicker-field.isActive {
				background: @themeColor;
				color: white;
				box-shadow: 0px 0px 20px rgba(0,10,20,.18);
			}
			select {
				width: 100%;
				text-transform: none;
				height: auto;
				font-size: 1.1em;
				padding: 1.32em 1.5em 1.1em 1.7em;
				letter-spacing: 0;
				font-weight: 500;
				&:focus {
					border-color: transparent;
				}
			}
			.form-dropdown-arrow {
				position: absolute;
				top: 50%;
				right: .8em;
			}
			div > label {
				text-align: center;
				border-bottom: 2px solid transparent;
				padding: 1.54em 1.35em 1.33em 1.35em;
			}
			label input[type='radio'] {
				position: absolute;
				left: -999em;
			}
			label.isActive {
				color: @themeColor;
			}
			label:hover,
			input[type='text']:hover,
			select:hover {
				border-color: @themeColor;
			}	
		}
	}
	.formcraft_form_list {
		.tbody {
			min-height: 34.694em;
			overflow: hidden;
		}
	}
	.tbody.analytics_body {
		width: 100%;
		> .block {
			padding: 2.75em 0;
			height: 26%;
			text-align: center;
			.one {
				.smoothing();
				display: block;
				font-size: 1.6em;
			}
		}
		#chart-cover {
			position: absolute;
			top: 26%;
			left: 1.2em;
			right: 1.2em;
			bottom: 1.2em;
		}
		#chart-canvas {
			width: 100%;
			height: 100%;
		}
	}
	.insights_config_table {
		.tbody {
			min-height: auto;
		}
		.tbody .tr .td:nth-child(2) {
			float: right;
		}
		.tbody .tr:last-child {
			border-bottom: 0px;
		}
		.tbody .td {
			padding: .9em 1.2em .85em 1.2em;
			vertical-align: top;
		}
		.tbody select.td,
		.tbody input[type='text'].td {
			vertical-align: top;
			padding: .9em 1.2em .85em 1.2em;
			background-color: transparent;
			box-shadow: none;
			border: 0px;
			color: inherit;
		}
		.tbody input[type='text'].td.isActive {
			background: @themeColor;
			color: white;
			box-shadow: 0px 0px 20px rgba(0,10,20,.18);			
		}		
	}
	.insights_cover {
		.block-header {
			background-color: white;
		}
		.block-description {
			padding: .35em .5em;
		}
		.formcraft_card {
			overflow: hidden;
			height: 20em;
			margin-bottom: @gridPadding;
			position: relative;
			background: @backgroundGreyOne;
		}
		.chart-container {
			position: absolute;
			top: 5.8em;
			left: 1.5em;
			right: 1.5em;
			bottom: 1.3em;
		}
	}
	.formcraft_entry_list {
		.tbody {
			min-height: 34.694em;
			overflow: hidden;
		}
		.tr.thead select {
			font-size: 1.15em;
			font-weight: 500;
			padding: 1.22em 1.5em .96em 1.7em;
			padding-left: 1em;
			text-align: left;
			letter-spacing: 0;
		}
		.tr.canHover {
			transition: transform .25s;
			position: relative;
		}
		.tr.canHover.isActive {
			transform: translateX(2px);
			&::before {
				left: -2px;
				top: -1px;
				bottom: -1px;
				width: 2px;
				content: '';
				position: absolute;
				background: @themeColor;
			}
		}
	}
	.formcraft_entry_view {
		overflow: hidden;
		.block-title {
			display: inline-block;
			max-width: 40%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		.tr.thead > span {
			.noSmoothing();
			text-transform: none;
			letter-spacing: 0;
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			padding-left: 1.5em;
			font-weight: 400;
		}
		.tr.thead > span:last-child {
			padding-right: 1.5em;
			padding-left: 0;
			text-align: right;
		}
		.tbody {
			min-height: 37.5em;
			&.page-count-1 {
				.field-page-title {
					display: none;
				}
			}
			span {
				display: inline-block;
			}
			.field-page-cover {
				padding: 0 1.5em 1.5em .25em;				
				border-top: 1px solid @borderColor;
			}
			.field-page-cover:first-child {
				border-color: transparent;
			}
			.field-page-title {
				padding: 20px 20px 0 20px;
				.smoothing();
				font-size: 1.4em;
			}
			.field-label,
			.field-value {
				display: block;
			}
			.field-label {
				.smoothing();
				font-weight: 700;
				font-size: .9em;
				text-transform: uppercase;
			}
			.field-value {
				padding: 0;
				border: 0;
				box-shadow: none;
				margin: 0;
				font-family: inherit;
				width: 100%;
				font-size: 1.1em;
				display: block;
				white-space: pre-wrap;
				img {
					box-shadow: 0 0 0 1px rgba(0,20,40,.09), 0px 2px 6px rgba(0,20,40,.07);
					border-radius: 4px;
					margin-top: .5em;
				}
			}
			.field-cover {
				padding: 20px 0 0 20px;
				vertical-align: top;
				&.isEmpty {
					padding: 0;
					display: inline;
				}
				&.field-type-heading {
					.field-label {
						display: none;
					}
					.field-value {
						.smoothing();
						font-size: 1.4em;
					}
				}
				textarea.field-value,
				&.field-type-heading textarea.field-value {
					font-weight: inherit;
					.noSmoothing();
					text-transform: none;
					background: transparent;
					resize: none;
					color: @fontColor;
					box-shadow: 0 3px 0 -1.5px @fontColor;
					opacity: .75;
				}
				textarea.field-value:focus,
				&.field-type-heading textarea.field-value:focus {
					font-weight: inherit;
					.noSmoothing();
					opacity: 1;				
					color: @themeColor;
					box-shadow: 0 3px 0 -1.5px @themeColor;
				}
			}			
		}
	}
	.formcraft-license-cover {
		padding: 3em 5em 0;
		text-align: center;
		font-size: 1.05em;
		form {
			width: 26em;
			margin: 0 auto;
			.ValidKey {
				.smoothing();
				height: 6.5em;
				font-weight: 1.4em;
				padding-bottom: 1.8em;
				text-transform: uppercase;
				font-size: 1em;				
				text-align: center;
				color: #44b377;
				font-weight: 600;
				.formcraft-icon {
					font-size: 1.4em;
					width: 1.7em;
					height: 1.7em;
					line-height: 1.7em;
					border-radius: 100%;
					display: block;
					margin: 0 auto;
					margin-bottom: .5em;
					border: 1px solid #44b377;
					box-shadow: 0 0 0 .5px #44b377;
				}
			}
			input[type='text'],
			button {
				width: 100%;
				padding: 1.05em 1.2em .9em 1.2em;
				display: block;
				margin: 0 auto;
			}
			input[type='text'] {
				box-shadow: none;
				outline: none;
				position: relative;
				z-index: 100;
				border: 0px;
				font-size: 1.1em;
				box-shadow: 0 0 0 0.5px rgba(0,0,0,.08), 0px 1px 4px rgba(0,20,40,.09);
				transition: all .2s;
				color: lighten(@fontColor, 20%);
				&:nth-of-type(1) {
					border-radius: 4px 4px 0 0;
				}
				&:nth-of-type(2) {
					border-radius: 0 0 4px 4px;
				}
				&:focus {
					z-index: 101;
					color: @fontColor;
					border-radius: 4px;
					box-shadow: 0 0 0 0.5px rgba(0,0,0,.10), 0px 1px 8px rgba(0,20,40,.2);
					transform: scale(1.02);
				}
			}
			button {
				margin-top: 1.8em;
				padding: 1.35em 1em 1.25em 1em;
				.formcraft-loader {
					margin: -7px 0 0 .5em;
					width: 14px;
					height: 14px;
					border-color: white;
					border-left-color: @themeColor;
					opacity: 0;
					position: absolute;
					top: 50%;
					right: -1em;
					transition: all .25s;
				}
				span {
					display: inline-block;
					transition: all .25s;
					transform: translateX(0);
					position: relative;
				}
				&.loading-true {
					span {
						transform: translateX(-.7em);
					}
					.formcraft-loader {
						opacity: 1;
						right: -2.4em;
					}
				}
			}
			.ResponseMessages {
				padding: 1.8em 0em;
			}
			.KeyInfo {
				padding-top: 1.8em;
				.MoreInfo {
					text-align: center;
					opacity: .75;
					cursor: pointer;
					margin-top: -.9em;
					&:hover {
						opacity: 1;
					}
				}
				> div {
					text-align: left;
					padding-bottom: .5em;
					.float-right {
						float: right;
					}
				}
				.ExpiresDays {
					text-align: center;
					font-size: 1em;
					padding-top: 1.3em;
					span {
						font-size: 1.2em;
						display: inline-block;
						text-align: center;
						height: 3em;
						width: 3em;
						padding: 0;
						line-height: 3em;
						border-right: 1px solid rgba(0,0,0,.08);
						&:last-child {
							border-right: 0;
						}
					}
					.DigitCover {
						box-shadow: 0 0 0 0.5px rgba(0,0,0,.08), 0 1px 4px rgba(0,20,40,.09);
						background: white;						
						display: inline-block;
						border-radius: 4px;
					}
					.DaysToGo {
						.smoothing();
						margin: 1.3em auto .8em auto;
						text-transform: uppercase;
						font-weight: 600;
						font-size: .85em;
					}
				}
				a {
					padding: .85em 1.3em;
				}
				.description-key {
					opacity: .85;
					padding: 1.8em 2em 0 2em;
					font-size: .9em;
					text-align: center;
				}
			}
		}
	}
	.pagination-cover {
		margin-top: -1px;
		border-top: 1px solid @borderColor;
		position: relative;
		z-index: 99;
		.pagination {
			white-space: nowrap;
			overflow-x: auto;
		}
		.pagination div > span {
			position: relative;
			padding: 0 1em;
			height: 2.8em;
			line-height: 2.8em;
			display: inline-block;
			vertical-align: top;
			text-align: center;
			border-top: 2px solid transparent;
			cursor: pointer;
			&.active {
				border-color: @themeColor;
				color: @themeColor;
			}
			&:hover {
				color: @themeColor;
				border-color: @themeColor;
			}
		}
	}

	/* Header */
	.formcraft_header {
		color: inherit;
		text-align: right;
		margin: -@gridPadding;
		margin-bottom: @gridPadding;
		padding: 15px @gridPadding;
		border-bottom: 1px solid darken(@borderColor, 6%);
		min-height: 4.462em;
		.FormCraft-Notices {
			font-size: 1.05em;
			.formcraft-icon {
				vertical-align: middle;
		    font-size: 1.2em;
		    margin-top: -2px;				
			}
			a, span {
				outline: none;
				text-decoration: none;
				padding: .3em .75em .1em;
				display: inline-block;
				&:hover,
				&:focus {
					box-shadow: none;
				}
			}
			a {
				cursor: pointer;
				opacity: .9;
				&:hover {
					opacity: 1;
				}
			}
			span a {
				display: inline;
				padding: 0;
			}
		}
		h1 {
			font-size: 1.4em;
			padding: 0;
			margin: 0;
			padding-right: .5em;
			display: inline-block;
			font-weight: inherit;
		}
		.version {
			font-size: 1em;
			line-height: 2.4em;
		}
		h1, .version {
			color: inherit;
			float: left;
		}
	}
}

@media print {
  .entry-list-block,
  #adminmenumain,
  #adminmenuwrap,
  .formcraft_header {
    display: none !important;
  }
  #wpcontent {
  	margin: 0 !important;
  }
  #formcraft_dashboard {
  	padding-top: 0;
  }
  #formcraft_dashboard .formcraft_table .tbody,
  body {
  	background: none !important;
  }
  .entry-view-block,
  .field-label,
  .field-page-title,
  .field-value {
  	 color: #444 !important;
  }
  .entry-view-block {
  	width: 100% !important;
  	max-width: none !important;
  	.field-page-cover {
  		padding-left: 0 !important;
  	}
  	.formcraft_card {
  		box-shadow: none !important;
  		border-radius: 0px !important;
  		background: none !important;
  	}
  	.block-header button {
  		display: none;
  	}
  }
}

@media screen and (max-width: 1400px) {
	#formcraft_dashboard {

	}
}