// compileCompressed: plugin.css

$white: #FFFFFF;
$black: #000000;
$red: #9E2B25;
$danger: #f14668;
$success: #48c78e;
$info : #3e8ed0;
$blue: #1D3354;
$light_blue: #467599;
$silver_light: #b7b7b7;

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

#wahforms_builder .inside *{
	font-family: 'Varela Round', sans-serif;
	.dashicons {
		font-family: dashicons;
	}
	textarea#wahforms-email-body,
	code {
		font-family: Consolas,Monaco,monospace;
	}
}

li.ui-tabs-tab.ui-corner-top.ui-state-default.ui-tab {
	a {
		&.missing {
			background: $danger;
			color: $white;
		}
	}
}
#wahforms-admin-tabs.ui-tabs {
	.ui-tabs-nav .ui-tabs-anchor {
		padding: 1em;
		.dashicons {
			position: relative;
			top: -2px;
		}
	}
}

@mixin trans($duration: 150ms) {
	-webkit-transition: all $duration ease;
	-moz-transition: all $duration ease;
	-ms-transition: all $duration ease;
	-o-transition: all $duration ease;
	transition: all $duration ease;
}

@mixin flexbox {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
}

.wah-forms-settings-dashboard {
    margin-right: 20px;
    border: 1px solid silver;
    .dashboard-header {
        background: $white;
        color: $blue;
        font-size: 16px;
        padding: 5px 10px;
        font-weight: bold;
        border-bottom: 1px solid silver;
    }
    .dashboard-options {
        background: $white;
        color: $black;
        padding: 10px;
    }
}
.sidebar-title {
    color: $white;
    background: $info;
    margin:0 0 10px 0;
    line-height: 1.25;
    padding: 0.5em 1em;
    font-size: 1.25em;
	font-weight: normal;
	border-radius: 25px;
}
.sortable-placeholder {
    border: 5px solid $red !important;
    height: 20px !important;
    width: inherit;
}
.wahforms-builder-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    // Sidebar
    .wahforms-builder-sidebar {
        width: 30%;
        ul {
            margin:0;
            li {
                margin: 0 0 10px 0;
                position: relative;
                cursor: move;
                border-radius: 2px;
                overflow: hidden;
            }
            .wahforms-builder-item {
                background: $white;
                color: $blue;
                line-height: 1.25;
                padding: 0.3em 0.3em 0.3em 0.6em;
                border-radius: 25px;
				border: 1px solid $silver_light;
                font-size: 1.25em;
                .title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-weight: 400;
                }
                button {
                    background: $info;
                    color: $white;
                    border:0;
                    padding: 2px;
                    cursor: pointer;
                    font-size: 14px;
					border-radius: 50%;
                    span {
                        font-size: inherit;
                        display: flex;
                        align-items: center;
                        justify-content: center;
						font-size: 20px;
                    }
                }
            }
        }
    }

    .wahforms-builder-form-fields {
        width: 68%;
        border: 1px solid silver;
        height: auto;
        .wahforms-builder-form-fields-inner {
            padding: 10px;
            height: auto;
            ul {
                min-height: 200px;
                list-style-type: none;
                margin:0;
                position: relative;
                li {
                    margin-bottom: 10px;
                    height: auto !important;
					&:last-child {
						margin-bottom: 0;
					}
                }
            }
        }
        li.draggable-item {
            width: 100% !important;
            max-width: 100%;
        }
        .wahforms-builder-item {
            background: $blue;
            color: $white;
            line-height: 1.25;
            padding: 0.5em 1em;
            border-radius: 0;
            font-size: 1.25em;
            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-weight: 400;
				font-size: 14px;
				position: relative;
            }
            button {
                background: $info;
                color: $white;
                border:0;
                padding: 2px;
                cursor: pointer;
                font-size: 14px;
                span {
                    font-size: inherit;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    &.loading {
                        background: url(../images/loading.gif) no-repeat center;
                    }
                }
            }

            .item-fields {
                margin-top: 10px;
                border-top: 1px solid white;
                padding: 10px 0;
                .item-group {
					font-size: 14px;
					&.is-repeater {
						min-height: 10px !important;
					}
					&.is-file-group {
						.is-file-group-label {
							.label-name {
								margin-bottom: 10px;
							}
							.allowed-items {
								@include flexbox;
								justify-content: flex-start;
								flex-wrap: wrap;
							}
							.allowed-item {
								@include flexbox;
								justify-content: flex-start;
								width: 50%;
								input {
									margin-right: 8px !important;
								}
							}
						}
					}
					&.is-radio-options {
						label {
							.label-name {

							}
							.add-radio-option,
							.add-selectbox-option {
								margin-left: 10px;
							}
							.remove-radio-option,
							.remove-selectbox-option {
								margin-left: 10px;
								background: $danger;
							}
						}
					}
                    &.is-checkbox {
                        label {
                            justify-content: flex-start;
							flex-direction: row !important;
                            .label-name {
                                margin-left: 8px;
                            }
                            input[type=checkbox] {
                                border-radius: 2px;
                                &:checked::before {
                                    height: 16px;
                                    width: 1.3125rem;
                                }
                            }
                        }
                    }
                    &.column2 {
                        display: flex;
                        justify-content: space-between;
                        label {
                            width: 49%;
                            flex-direction: column;
                            align-items: flex-start;
                            .label-name {
                                margin-bottom: 10px;
                            }
                        }
                    }
                    label {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 10px;
                        &.with-description {
                            .description {
                                font-size: 1em;
                            }
                        }
                        .label-name {
                            min-width: 150px;
                            max-width: 150px;
							@include flexbox;
							align-items: center;
							&.with-description {
								align-items: flex-start !important;
								flex-direction: column !important;
							}
							span.dashicons {
							    margin-right: 8px;
							}
                        }
                        textarea {
                            border-radius: 0.375em;
                            box-shadow: none;
                            padding-bottom: calc(0.3em - 1px);
                            padding-left: calc(0.5em - 1px);
                            padding-right: calc(0.5em - 1px);
                            padding-top: calc(0.3em - 1px);
                            border: 1px solid transparent;
                            -moz-appearance: none;
                            -webkit-appearance: none;
                        }
                        input {
                            width: 100%;
                            background-color: #fff;
                            border-color: #dbdbdb;
                            border-radius: 0.375em;
                            color: #363636;
                            -moz-appearance: none;
                            -webkit-appearance: none;
                            align-items: center;
                            border: 1px solid transparent;
                            border-radius: 0.375em;
                            box-shadow: none;
                            display: inline-flex;
                            font-size: 1rem;
                            height: 2em;
                            justify-content: flex-start;
                            line-height: 1.5;
                            padding-bottom: calc(0.3em - 1px);
                            padding-left: calc(0.5em - 1px);
                            padding-right: calc(0.5em - 1px);
                            padding-top: calc(0.3em - 1px);
                            position: relative;
                            vertical-align: top;
                            &[type="checkbox"] {
                                width: 16px;
                                height: 16px;
                                padding: 0 !important;
                                cursor: pointer;
                                vertical-align: baseline;
                                margin: 0 !important;
                                border-radius: 2px;
                            }
                        }
                    }

                    &.delete-this-item {
                        justify-content: flex-end;
                        display: flex;
                        button {
                            background: $danger;
                            color: $white;
                            border-radius: 2px;
                            padding-bottom: calc(0.5em - 1px);
                            padding-left: 1em;
                            padding-right: 1em;
                            padding-top: calc(0.5em - 1px);
                        }
                    }
                }
            }
        }
    }
}

.copy-message {
	background: $success;
	color: $white;
	padding-bottom: calc(0.5em - 1px);
	padding-left: 1em;
	padding-right: 1em;
	padding-top: calc(0.5em - 1px);
	border-radius: 2px;
	position: absolute;
	z-index: 100;
}
.contact-form-shortcode {
    .copy-message {
		left: 312px;
	    top: 46px;
    }
}
.wahforms-email-body-tags-list li {
	.copy-message {
		left: 0px;
		bottom: -32px;
	}
}

p.no-margin {
    margin-bottom: 0 !important;
}
.wahforms-settings-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    border: 1px solid silver;
    .settings-item {
        width: 48%;
        position: relative;
        margin-bottom: 10px;
        input {
            width: 100%;
        }
        p {
            margin: 0 0 10px 0;
        }
    }
}

span.red-asterix {
    color: $danger;
    font-size: 20px;
    display: inline-block;
    margin-left: 3px;
}
.is-red-asterix {
	padding-left: 6px;
	&:before {
		content: '*';
		color: $danger;
	    font-size: 20px;
	    display: inline-block;
		margin:0;
		left:-3px;
		position: absolute;
	}
}
.wahforms-publish-error {
    margin-top: 10px;
    background: $danger;
    color: $white;
    padding: 5px;
    text-align: center;
}
.error-field {
    outline: 3px solid $danger !important;
}
.wahform-btn {
    background: $blue;
    color: #fff;
    line-height: 1.25;
    padding: 0.5em 1em;
    border-radius: 6px;
    font-size: 1.25em;
    border:0;
    cursor: pointer;
    @include trans(300ms);
	@include flexbox;
	align-items: center;
	.dashicons {
		margin-right: 5px;
	}
    &:hover {
        background: $info;
    }
	&[disabled] {
		color: #a7aaad!important;
	    border-color: #dcdcde!important;
	    background: #f6f7f7!important;
	    box-shadow: none!important;
	    cursor: default;
	    transform: none!important;
	}
}

.wahforms-lead-item {
	ol {
		list-style-type: none;
		margin: 0;
	}
	li {
		@include flexbox;
		justify-content: space-between;
		padding: 5px 8px;
		border:1px solid silver;
		margin-bottom: 0;
		align-items: center;
		flex-wrap: wrap;
		background: #f3f3f3;
		@include trans(300ms);
		&:nth-child(2n+0) {
			background: #fff;
			border-top: 0;
		    border-bottom: 0;
		}
		&:last-child {
			border-bottom: 1px solid silver !important;
		}

		.preview-inner,
		.list-inner {
			@include flexbox;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			flex-wrap: wrap;
		}
		.list-inner {
			.lead-option {
				width: 72%;
				line-height: 1.6;
				&.lead_input_name {
					width: 26%;
					font-weight:bold;
				}
			}
		}

		.lead-details {
			margin-left: 10px;
			@include flexbox;
    		align-items: center;
			.dashicons {
				margin-right: 2px;
				top: 2px;
				font-size: 16px;
				position: relative;
			}
		}
	}
}

.wahforms-leads-container {
	position: relative;
	&.loading {
		&:before {
			content:'';
			display: block;
			left:-1px;
			top:0;
			bottom: -1px;
			position: absolute;
			z-index: 1000000;
			background: #FFF url(../images/loader.gif) no-repeat center;
			width: calc( 100% + 1px );
			height: calc( 100% + 1px );
		}
	}
}

#wahforms_builder {
	.postbox-header {
		display: none;
	}
	.ui-tabs .ui-tabs-panel {
		border-top:1px solid silver !important;
	}
}

.wahforms-email-body-tags-list {
	list-style-type: none;
	@include flexbox;
	justify-content: flex-start;
	flex-wrap: wrap;;
	li {
		margin-right: 10px;
		position: relative;
		font-size: 12px;
		&.missing {
			color: $danger;
			code {
				background: $danger;
				color: $white;
			}
		}
		code {
			cursor: pointer;
		}
	}
}

textarea#wahforms-email-body {
	width: 100%;
	min-height: 250px;
	font-family: Consolas,Monaco,monospace;
    font-size: 15px;
}

.option-controls {
	@include flexbox;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 15px;
	label {
		margin-right: 20px;
		font-weight: bold;
	}
}
.additional-links {
	a {
		color: $blue !important;
		position: relative;
	    padding-left: 18px;
		&:before {
			content: "\f103";
			font-family: 'Dashicons';
			position: relative;
		    left: 0;
			top: 2px;
		    margin-right: 6px;
		}
	}
}

.contact-form-shortcode {
	margin-bottom: 20px;
	position: relative;
	@include flexbox;
	justify-content: space-between;
	.right-column {
		@include flexbox;
		justify-content: center;
	    align-items: center;
	}
	input {
		width: 300px;
	}
}
input.key-input {
    margin-right: 11px;
}

.wahforms-leads-load-more {
	display: none;
	margin-top: 20px;
	.load-more-leads {
		position: relative;
		.dashicons {
			position: relative;
			top:4px;
		}
	}
}

.wp-core-ui {
	.submit-wahforms-wrapper {
		button {
			@include flexbox;
			align-items: center;
			justify-content: center;
			align-self: center;
			width: auto;
			min-width: 120px;
		    flex-wrap: wrap;
		    padding: 10px;
			span {
				margin: 0 5px 0 0;
			}
		}
	}
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	background: $white;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
.ui-widget-header .ui-state-focus {
	background: $blue;
	border: 1px solid $blue;
}
.ui-widget-header a {
	&:hover,
	&:focus,
	&:active {
		box-shadow: none !important;
	}
}

.download-lead-attachment {
	span {
		position: relative;
		top: 4px;
	}
}
.lead_attachment_value {
	margin-bottom: 5px;
}