@mixin ff-style {
  width: 100%;
  height: 32px;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  -webkit-transition: all .3s;
  transition: all .3s;

  &:focus, &:active {
    border-color: #40a9ff;
    border-right-width: 1px !important;
    outline: 0;
    -webkit-box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }
}

.wp-filter {
	padding: 20px;

	.custom-tab-view {
	  	display: flex;
	  	justify-content: flex-start;

	  	.tab-selection {
	  		width: 210px;
	  		margin-right: 30px;
	  		min-height: 400px;
	  		height: 400px;
	  		display: flex;
	  		flex-direction: column;
	  		justify-content: space-between;

		    a {
		    	display: flex;
		    	align-items: center;
			    width: 100%;
			    padding: 5px;
			    font-size: 15px;

			    &.selected {
			    	color: white;
			        background-color: #0073aa;

			    	.icon {
				    	color: #ffffff;
				    }
			    }

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

			    .icon {
			    	font-size: 23px;
			    	color: #000000;
			    }

			    .text-label {
			    	padding-left: 15px;
			    	flex: 1;
			    }
		    }

		    .button-wrap {
		    	padding: 10px;
    			border-top: 1px solid #dcdcdc;

    			button {
    				height: 35px;
    				padding: 0 20px 1px;
    			}
		    }
		}

		.form-section {
			display: flex;
		    align-items: flex-start;
		    flex: 1;

		    &.hidden {
		    	display: none;
		    }

		    h2 {
		    	margin: 0;
		    	width: 150px;
		    	font-size: 18px;
		    }

		    span.separator {
		    	&.vertical {
			        align-self: stretch;
			        width: 1px;
			        background-color: #989898;
	      		}
		    }
		    
		    .form-container {
		    	flex: 1;
		    	padding: 0 30px;

				hr {
					margin-top: 15px;
					width: 500px;
					float: left;
				}

			    .form-item {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					width: 500px;

					label,
					.pure-text {
						font-size: 15px;
						line-height: 20px;
						margin-bottom: 5px;
						cursor: default;

						&.hint {
							font-size: 13px;
							font-style: italic;
						}
					}

					.label-with-tooltip {
						display: flex;
						align-items: center;

						.tooltip {
							display: block;
							height: 15px;
							width: 15px;
							background-image: url('../images/info.svg');
							background-repeat: no-repeat;
							background-size: contain;
							background-position: center;
							margin: 0 0 5px 10px;
							position: relative;
							z-index: 2;
							cursor: pointer;

							&.tooltip-right:before, &.tooltip-right:after {
								left: 200%;
							}

							&.tooltip-right:after {
								width: 250px;
							}
						}
					}

					.field-wrap {
						background-color: #fff;
						background-image: none;
						border: 1px solid #ececec;;
						border-radius: 4px;
						width: 100%;
						height: 32px;
						display: flex;
						align-items: center;
						box-sizing: border-box;
						padding: 0 10px;

						&.button {
							padding-top: 30px;
							padding-bottom: 30px;
						}
					}

					input {

						&[type="text"] {
							@include ff-style;
						}

						&[type="checkbox"] {
							margin: 0;
						}
					}

					select {
						@include ff-style;
					}

					table {
						margin: 0;
						width: 100%;

						.mce-tinymce {
							border: 1px solid #e5e5e5;
							border-radius: 4px;
							box-shadow: none;
						}

						td {
							padding: 0;
						}
					}

					textarea {
						@include ff-style;
						height: 200px;
					}

					button {

						&.button-field {
							height: 32px;
							margin: 0 0 2px 0;
							padding: 0 20px 1px;
						}
					}

					ul.list-form-item {
						font-size: 14px;
						line-height: 1.5;
						border: 1px solid #d9d9d9;
						border-radius: 4px;
						padding: 10px;
						margin: 0;

						&:empty {
							border: none;
							padding: 0;
							margin: 0;
						}

						.list-item {
							padding: 5px;
						    width: 100%;
						    display: flex;
						    align-items: flex-end;
						    justify-content: space-between;

						    &:not(:first-child) {
						    	border-top: 1px solid #e4e4e4;
						    }

						    span, button {
						    	flex: 1;
						    	margin: 0 10px;

						    	&:first-child,
						    	&:last-child {
						    		margin: 0;
						    	}
						    }
						}
					}

					&:not(:first-child) {
						margin-top: 12px;
					}

					&.subgroup {
						text-transform: uppercase;
    					margin-top: 3vh;
					}

					&.inline-fields {
						flex-direction: row;
						align-items: flex-end;

						.form-item {
							flex: 1;

							&:not(:first-child) {
								margin-top: 0;
							}

							&:not(:last-child) {
								margin-right: 10px;
							}
						}
					}

					ul {
						width: 100%;

						.menu-item-handle,
						.field-settings {
							//width: 100%;
						}
					}
			    }

			    // CUSTOM STUFF

			    .form-item {
			    	.list-form-item .redirect-row {
			    		span:first-child, button:last-child {
			    			flex: none;
			    		}
			    	}
			    }
			}
	  	}
	}
}