@import "abstracts/variables";
// ToolBar Editor
.mce-tinymce .mce-toolbar-grp .mce-stack-layout > .mce-last:nth-child(3) {
	background-color: $color-gray-2 !important;
	border-top: 1px solid $color-gray-4 !important;
	border-left: 1px solid $color-gray-4 !important;
	border-right: 1px solid $color-gray-4 !important;
	margin-left: -4px !important;
    margin-right: -4px !important;
    margin-bottom: -3px;
    padding: 6px 5px 0px 5px !important;

	.mce-btn {
		display: flex;
		float: left;
		height: 45px;
		background-color: #fff;
		border-radius: 0;
		border: 1px solid #dddddd !important;
		margin-left: 2.5px !important;
		margin-right: 2.5px !important;
		margin-bottom: 7px !important;
		transition: all 0.3s ease;

		&.disable {
			cursor: default;
			opacity: 0.3;
		}

		&:hover {

		}

		@media (min-width: 768px) {
			height: 57px;
		}

		@media (max-width: 768px) {
			width: 97%;
		}

		&:after {
			display: flex;
			align-items: center;
			content: attr(aria-label);
			font-weight: 600;
			color: #212121;
			font-size: 12px;
			padding: 5px 18px;
			font-family: "Poppins", sans-serif;
		}

		button {
			padding: 0;
		}

		i {
			width: 45px;
			height: 45px;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: auto;
			border-right: 1px solid #e7e7e7;
			@media (min-width: 768px) {
				height: 57px;
				width: 57px;
			}
		}
	}
}

#wp-listing_content-wrap {

	.mce-toolbar-grp .mce-stack-layout > .mce-last {
		border-top: 1px solid #b4b4b4 !important;
		border-left: 1px solid #b4b4b4 !important;
		border-right: 1px solid #b4b4b4 !important;
		background-color: #e7e7e7 !important;
	}

	.mce-toolbar-grp {
		border-bottom-color: #b4b4b4;
	}

	// #wp-listing_content-editor-tools {
	// 	display: none;
	// }

	.wp-editor-tabs,
	#prism-shortcode {
		display: none;
	}

	#wp-listing_content-editor-container {
		overflow: hidden;
	}

	.wp-editor-tabs {
		.wp-switch-editor {
			border-top-color: #b4b4b4;
			border-left-color: #b4b4b4;
			border-right-color: #b4b4b4;
		}
	}

	.wp-editor-container {
		border: 1px solid #b4b4b4 !important;
	}

	.mce-tinymce {
		.mce-statusbar {
			border-top-color: #b4b4b4;
		}
	}
}

// Content Popup
.wil-popup-wrap,
.addlisting-popup-wrap {
	position: fixed;
	z-index: 9992;
	display: flex;
	align-items: center;
	justify-align: center;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	background-color: rgba(#000, 0.5);
	padding: 50px 15px;
	box-sizing: border-box;
	overflow: hidden;

	@media (max-width: 768px) {
		padding: 50px 10px;
	}

	&.hidden {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease;
		display: flex !important;
		z-index: 0;
		width: 0;
		height: 0;
	}

	&:not(.hidden) {
		
		.wil-popup,
		.addlisting-popup {
			opacity: 1;
			// transform: translateY(0);
		}
	}

	*, :before, :after {
		box-sizing: border-box;
	}
}

.wil-popup,
.addlisting-popup {
	max-width: 970px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	position: relative;
	background-color: #fff;
	opacity: 0;
	transition: all 0.3s ease 0.05s;
	// transform: translateY(-30px);
}
.wil-popup__close,
.addlisting-popup__close {
	position: absolute;
	width: 30px;
	height: 30px;
	right: 13px;
	top: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	transition: all 0.3s ease;

	&:before, &:after {
		content: '';
		width: 21px;
		height: 1px;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background-color: #fe6d6d;
		transform: rotate(45deg);
	}

	&:after {
		transform: rotate(-45deg);
	}
}
.wil-popup__header,
.addlisting-popup__header {
	background-color: #212121;
	font-weight: 600;
	display: flex;
	align-items: center;
	height: 60px;
	padding: 0 20px;
	font-size: 14px;
	position: relative;
    color: #f8b000;
    font-weight: bold;
    font-family: "Poppins", sans-serif;

    @media (max-width: 768px) {
    	height: 42px;
    	font-size: 13px;
    }
}
.wil-popup__content,
.addlisting-popup__content {
	padding: 20px 0;
	background-color: #fff;
	
	@media (max-width: 768px) {
		padding: 15px;
	}
	&:after {
		content: '';
		clear: both;
		display: block;
	}

	.row {
		margin-left: -5px;
		margin-right: -5px;

		[class*="col-"] {
			padding-left: 5px;
			padding-right: 5px;
		}
	}
}

.wil-popup__form,
.addlisting-popup__form,
.wil-popup__preview,
.addlisting-popup__preview {
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	@media (max-width: 767px) {
		padding-left: 0;
		padding-right: 0;
	}
}

.wil-popup__form,
.addlisting-popup__form {
	width: 100%;

	@media (min-width: 567px) {
		width: 60%;
	}
}
.wil-popup__actions,
.addlisting-popup__actions {
	#listgo-cancel-event,
	#listgo-create-event {
		@media (max-width: 480px) {
			width: 100%;
			margin: 0;
		}
	}
	#listgo-cancel-event {
		margin-bottom: 10px;
	}
}
.wil-popup__preview,
.addlisting-popup__preview {
	display: none;

	@media (min-width: 567px){
		display: block;
		width: 40%;
	}
}

.wil-popup__preview-img,
.addlisting-popup__preview-img {
	border: 5px solid #dfdfdf;

	img {
		width: 100%;
	}
}

.wil-popup__plus,
.addlisting-popup__plus {
	display: block;
	background-color: #212121;
	font-weight: 600;
	line-height: 42px;
	width: 42px;
	text-align: center;
	font-size: 20px;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: bold;
	color: #f8b000;

	@media (max-width: 768px) {
		width: 34px;
		line-height: 34px;
		font-size: 18px;
	}

	&:hover {
		color: #212121;
		background-color: #f8b000;
	}
}

.wil-popup__field,
.addlisting-popup__field {
	margin-bottom: 20px;
	position: relative;

	.wil-popup__field-icon,
	.addlisting-popup__field-icon {
		position: absolute;
		right: 10px;
		top: 10px;
		font-size: 20px;
		color: #5a5b5c;
	}

	input[type="text"], 
	input[type="tel"], 
	input[type="email"], 
	input[type="url"], textarea,
	input[type="time"],
	input[type="date"], {
		width: 100%;
		box-shadow: none;
		height: 42px;
		padding: 0 15px;
		line-height: 40px;
	}

	input[type="time"] {
		padding-right: 30px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	textarea {
		padding-top: 10px;
		padding-bottom: 10px;
		line-height: normal;
		height: auto;
	}
}

.wil-popup__nav,
.addlisting-popup__nav {
	margin-left: -5px;
	margin-right: -5px;
	overflow: hidden;

	.wil-popup__plus,
	.addlisting-popup__plus {
		margin-left: 5px;
		margin-right: 5px;
		float: left;
	}

	a {
		float: left;
		margin-left: 5px;
		margin-right: 5px;
		height: 42px;
		display: flex;
		align-items: center;
		font-weight: 700;
		border: 1px solid #b4b4b4;
		padding-right: 20px;
		padding-left: 25px;
		border-radius: 5px;
		color: #212121;
		text-decoration: none;
		transition: all 0.3s ease;
		margin-bottom: 5px;
		position: relative;

		@media (max-width: 768px) {
			height: 34px;
			padding-right: 10px;
			font-size: 12px;
		}

		&:focus {
			outline-width: 0;
			text-decoration: none;
			box-shadow: none;
		}

		&.active {
			color: #212121;
			text-decoration: none;
			background-color: #f8b000;
			border-color: #f8b000;

			&:hover {
				color: #212121;
			}
		}

		&:hover {
			color: #f8b000;
			border-color: #f8b000;
		}
	}

	.wil-popup__nav-remove,
	.addlisting-popup__nav-remove {
		position: absolute;
		width: 16px;
		height: 16px;
		left: 5px;
		top: 0;
		bottom: 0;
		margin: auto 0;
		color: #212121;
		border-radius: 2px;
		color: red;
		transition: all 0.3s ease;

		&:hover {
			color: red;
		}

		&:after, &:before {
			content: '';
			display: inline-block;
			width: 10px;
			height: 0px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			border-top: 1px solid;
			transform: rotate(45deg);
		}

		&:before {
			transform: rotate(-45deg);	
		}
	}
}

.wil-popup__group,
.addlisting-popup__group {
	border: 1px solid #dbdbdb;
	padding: 20px 20px 10px 20px;
	margin-bottom: 20px;
	background-color: #fafafa;

	@media (max-width: 768px) {
		padding: 15px;
	}

	.wil-popup__field,
	.addlisting-popup__field {
		margin-bottom: 10px;
	}
}

.wil-popup__upload,
.addlisting-popup__upload {
	border: 2px dashed #b4b4b4;
	display: flex;
	width: 100%;
	padding: 35px 20px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	user-select: none;
	transition: all 0.3s ease;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: center center;

	&[style*="background-image"] {

		p {
			opacity: 0;
			visibility: hidden;
			transition: all 0.3s ease;
		}

		&:hover { 
			background-image: none !important;

			p {
				opacity: 1;
				visibility: visible;
			}
		}
	}

	&:hover {
		border-color: #f8b000;
	}

	p {
		font-size: 14px;
		color: #9d9d9d;
		text-align: center;
		margin-bottom: 0;

		strong {
			display: block;
			font-weight: 700;
			font-size: 20px;
			margin-bottom: 5px;
			color: #212121;
		}
	}
}

.wiloke-event-package {
	td > {
		label {
			position: absolute;
			height: 100%;
			width: 20000px;
			top: 0;
			left: 0;
			z-index: 9;
			display: block;
			max-width: none;
			cursor: pointer;
		}
    }
}

.wil-popup__content,
.addlisting-popup__content {
	max-height: calc(100vh - 250px);
    overflow-x: hidden;
    overflow-y: auto;

    label {
    	font-weight: normal;
    	font-family: "Poppins", sans-serif;
    	color: #212122;
    	font-size: 16px;
    }
    
	.wil-addlisting-gallery__list {

		.wil-addlisting-gallery__list-upload {
			width: calc(100% - 10px);

			&:before {
				content: none;
			}
		}

		.wil-addlisting-gallery__list-item {
			width: calc(25% - 10px);

			&:before {
				padding-top: 100%;
			}

			+ .wil-addlisting-gallery__list-upload {
				width: calc(25% - 10px);

				&:before {
					content: '';
					padding-top: 100%;
				}
				
				.wil-popup__upload,
				.addlisting-popup__upload {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					padding: 0;

					p {
						display: none;
					}

					&:before, &:after {
						content: '';
						width: 21px;
						height: 5px;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						background-color: #000;
						transition: all 0.3s ease;
					}

					&:after {
						transform: rotate(90deg);
					}

					&:hover {

						&:before, &:after {
							background-color: #f8b000;
						}
					}
				}
			}
		}
	}
}

.wil-popup__actions,
.addlisting-popup__actions {
	text-align: right;
	padding: 15px 20px;
	background-color: #f4f4f4;
	border-top: 1px solid #dddddd;

	.wil-popup__btn,
	.addlisting-popup__btn {
		margin-right: 4px;

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

.wil-popup__btn,
.addlisting-popup__btn {
	min-width: 160px;
	font-size: 16px;
	padding: 12px 30px;
	text-align: center;
	background-color: #dddddd;
	font-family: "Poppins", sans-serif;
	color: #212121;
	border-width: 0;
	font-weight: 600;
	transition: all 0.3s ease;
	
	@media (max-width: 768px) {
		min-width: 100px;
		font-size: 12px;
		padding: 8px 15px;
		margin-bottom: 5px;
	}

	i {
		position: relative;
		top: 2px;
	}

	&.primary {
		background-color: #f5af02;
	}

	&:hover {
		color: #fff;
		background-color: #212121;
	}
}

.wil-popup__radio,
.addlisting-popup__radio {
	margin: 0;

	input {
		display: none;

		&:checked ~ span {
			border-color: #51c939;

			&:before {
				display: block;
			}
		}
	}

	span {
		display: block;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background-color: #f9f9f9;
		border: 1px solid #ddd;
		transition: all 0.3s ease;
		position: absolute;
		cursor: pointer;
		margin: auto;
		left: 25px;
		top: 0;
		bottom: 0;

		&:before {
			content: '';
			display: none;
			position: absolute;
			width: 20px;
			height: 20px;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background-color: #51c939;
			border-radius: 50%;
		}
	}

	&:hover {

		span {
			border-color: #51c939;
		}
	}
}

// Event
.wil-popup-wrap,
#wiloke-event-settings {

	.wil-popup,
	.addlisting-popup {
		max-width: none;
		transform: none;
		visibility: visible;
		opacity: 1;
	}

	.wil-popup__status,
	.wiloke-event-package,
	.wiloke-event-settings,
	.wiloke-event-method {
		position: absolute;
		top: 50%;
		left: 50%;
		max-width: 1010px;
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		opacity: 0;
		transform: translate(-50%, -50%) translateX(15vw);
		visibility: hidden;
		will-change: transform, opacity, visibility;
		transition: all 0.4s ease;

		&.prev {
			transform: translate(-50%, -50%) translateX(-15vw);
			opacity: 0;
			visibility: hidden;
		}

		&.active {
			z-index: 2;
			transform: translate(-50%, -50%);
			opacity: 1;
			visibility: visible;
			+ *, + *.prev, ~ *.active {
				opacity: 0;
				visibility: hidden;
				transform: translate(-50%, -50%) translateX(15vw);
				z-index: 1;
			}
		}
		@media (max-width: 767px) {
			padding-left: 0;
			padding-right: 0;
		}

	}

}

// Event Setting
.wil-popup__status,
.wiloke-event-settings {

	.wil-popup__content,
	.addlisting-popup__content {
		padding-left: 15px;
		padding-right: 15px;
	}

	.wil-popup__form,
	.addlisting-popup__form {
		width: 100%;

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

			[class*="col-"] {
				padding-left: 15px;
				padding-right: 15px;
			}
		}
	}
}

// Event Package
.wiloke-event-package {

	.wil-popup__content,
	.addlisting-popup__content {
		padding: 20px;

		@media (min-width: 767px) {
			padding: 30px 30px 30px 30px;
		}

		@media (min-width: 992px) {
			padding: 25px 40px 35px 40px;
		}
	}
}

.wil-popup__package,
.addlisting-popup__package {
	border: 1px solid #dddddd;
	width: 100%;

	tr {
	
		@media (min-width: 768px) {
			cursor: pointer;
			transition: all 0.3s ease;
			
			&:hover {
				background-color: #f9f9f9;
				.wil-popup__package-action input:checked + span,
				.addlisting-popup__package-action input:checked + span {
					border-color: #51c939;
				}
			}
		}

		&.active {
			.wil-popup__package-action a,
			.addlisting-popup__package-action a {
				background-color: #f5af02;
			}
		}

		&:first-child td {
			border-top-width: 0;
		}
		
	}

	td {
		position: relative;
		padding: 30px 25px;
		border-top: 1px solid #dddddd;
	}

	.wil-popup__package-price-currency,
	.addlisting-popup__package-price-currency,
	.wil-popup__package-price-amount,
	.addlisting-popup__package-price-amount,
	.wil-popup__package-price-time,
	.addlisting-popup__package-price-time,
	.wil-popup__package-price-slash,
	.addlisting-popup__package-price-slash {
		font-family: "Poppins", sans-serif;
	}

	.wil-popup__package-price-td,
	.addlisting-popup__package-price-td {
		white-space: nowrap;

		.wil-popup__package-price-currency,
		.addlisting-popup__package-price-currency {
			font-size: 24px;
			font-weight: 600;
			margin-right: 3px;
			line-height: 1;
		}
		
		.wil-popup__package-price-amount,
		.addlisting-popup__package-price-amount {
			font-weight: 600;
			font-size: 40px;
			line-height: 1;
		}

		.wil-popup__package-price-slash,
		.addlisting-popup__package-price-slash {
			color: #bababa;
		}
	}

	.wil-popup__package-description,
	.addlisting-popup__package-description {
		width: 100%;
		
		strong {
			color: #212121;
			font-size: 18px;
			font-family: "Poppins", sans-serif;
		}

		p {
			margin-bottom: 0;
		}
	}

	.wil-popup__package-action,
	.addlisting-popup__package-action {
		padding-left: 30px;
		min-width: 80px;
	}

	.wil-popup__event-payment,
	.addlisting-popup__event-payment {
		display: block;
		width: 100%;
		padding: 0;
		border-bottom-width: 0;

		&.active {
			border-bottom-width: 1px;

			.wil-popup__event-method,
			.addlisting-popup__event-method {
				display: block;
			}
		}
	}

	@media (max-width: 767px) {
		display: block;

		tr, td, tbody {
			display: block;
		}

		td {
			width: 100% !important;
			text-align: right;
			padding: 10px 20px !important;
			label {
				display: block;
				left: auto;
				right: 0;
				span {
					left: auto;
					right: 20px;
				}
			}
		}

		.wil-popup__package-action,
		.addlisting-popup__package-action {
			background-color: #f1f1f1;
			padding: 0 !important;

			&:before {
				content: attr(data-title);
				display: block;
				color: #212121;
				font-size: 18px;
				font-weight: 600;
				font-family: "Poppins", sans-serif;
				text-align: left;
				padding: 20px !important;
			}
		}

		.wil-popup__package-price,
		.addlisting-popup__package-price {

			.wil-popup__package-price-currency,
			.addlisting-popup__package-price-currency {
				font-size: 20px;
			}

			.wil-popup__package-price-amount,
			.addlisting-popup__package-price-amount {
				font-size: 34px;
			}
		}

		.wil-popup__package-price-td,
		.addlisting-popup__package-price-td,
		.wil-popup__package-description,
		.addlisting-popup__package-description {
			
			&:before {
				content: attr(data-title) ':';
				font-family: "Poppins", sans-serif;
				float: left;
				color: #212121;
				font-weight: 600;
				margin-right: 15px;
			}

			.wil-popup__package-description,
			.addlisting-popup__package-description,
			.wil-popup__package-price,
			.addlisting-popup__package-price {
				overflow: hidden;
			}
		}

		.wil-popup__package-description strong,
		.addlisting-popup__package-description strong {
			display: none;
		}

		.wil-popup__package-name,
		.addlisting-popup__package-name {
			overflow: hidden;
		}
	}
}

// Event Method
.wiloke-event-method {

	tr {
		display: block;

		&.active {

			.wil-popup__package-form,
			.addlisting-popup__package-form {
				display: block;
			}
		}
	}

	.wil-popup__content,
	.addlisting-popup__content {
		padding: 20px;

		@media (min-width: 767px) {
			padding: 30px 30px 30px 30px;
		}

		@media (min-width: 992px) {
			padding: 25px 40px 35px 40px;
		}
	}

	.wil-popup__package-description,
	.addlisting-popup__package-description {

		.wil-popup__package-edit,
		.addlisting-popup__package-edit {
		    border: 1px solid #dddddd;
		    color: #ff7010;
		    border-radius: 6px;
		    padding: 6px 20px;
		    font-weight: 600;
		    margin-bottom: 5px;
		    display: inline-block;
		    font-family: "Poppins", sans-serif;

			i {
				width: 22px;
			    line-height: 22px;
			    background-color: #ff7010;
			    color: #fff;
			    border-radius: 50%;
			    padding: 4px;
			    margin-right: 3px;
			}

			&:hover {
				border-color: #ff7010;
			}

			@media (min-width: 768px) {
				float: right;
				margin-top: 5px;
				margin-bottom: 0;
			}
		}
	}
	
	.wil-popup__package-form,
	.addlisting-popup__package-form {
		width: 100%;
		padding-top: 0;
		display: none;
	}
}

.listg-event-msg,
#listg-event-msg {
	margin-bottom: 10px;
	font-style: italic;

	&:empty {
		margin-bottom: 0;
	}

	@media (min-width: 768px) {
		float: left;
		width: 45%;
		padding: 10px 0;
		margin-bottom: 0;
		text-align: left;
	}
}

.wiloke-event-method__form {
	text-align: left;
	padding-top: 15px;
	clear: both;

	.profile-actions {
		display: block;

		.listgo-btn {
			display: inline-block;
		}
	}
}

// Media Gallery
.page-template-addlisting {

	.mce-toolbar-grp.gallery-active {
		opacity: 0;
		visibility: hidden;
	}

}

#ui-datepicker-div,
.pac-container {
	z-index: 9993;
}

#wpadminbar {
	z-index: 9991;
}