#{$parent-class} {
	.drag_list_items{
		ul {
			li{
				border: 1px solid $border;
				padding: 5px 10px;
				cursor: move;
			}
		}
	}

  // tab padding adjust
	.tab-builder {
		padding: 0;
		border: 0;
		background: transparent;
		border-radius: initial;
	}
	.formbuilder-button{
		pointer-events: none;
	}
	.form-wrap {
		&.form-builder {
			@include respond (tabport) {
				position: relative;
				height: 654px;
				overflow: hidden;
			}
			// builder preview
			ul.stage-wrap {
				width: calc(100% - 340px);
				height: 100%;
				overflow-y: auto;
				background: $white;
				padding: 10px 16px;
				border-radius: 12px;
				box-shadow: 0 0 14px rgba(197, 197, 197, 0.6705882353);
				margin-right: 16px;

				@include respond(tabport) {
					width: calc(100% - 120px);
				}
				@include respond(phone-sm) {
					width: calc(100% - 100px);
				}

				// input box 
				.form-field {
					.form-control,
					input {
						box-shadow: initial;
						border: 1px solid rgba($primary, 0.37);
						font-size: 14px;
						// width: 100%;

						&:focus {
							border-color: $primary;
							outline: none;
							box-shadow: none;
						}
					}
					.formbuilder-button {
						button {
							font-size: 14px;
							padding: 8px 20px;
							background: $primary;
							color: $white;
							border: 1px solid $primary;
							outline: none;
							transition: all 300ms;
							font-weight: 600;
							border-radius: 4px;
						}
					}
					.checkbox-group {
						.formbuilder-checkbox {
							display: flex;
							align-items: center;
							label {
								margin-bottom: 0;
							}
							input {
								width: 16px;
								height: 16px;
							}
						}
					}
					.radio-group {
						.formbuilder-radio {
							display: flex;
							align-items: center;
							label {
								margin-bottom: 0;
							}
							input {
								width: 16px;
								height: 16px;
							}
						}
					}
					// builder select-option style
					input {
						&.option-label.option-attr {
							flex: 1;
						}
						&[type="text"] {
							flex-basis: 140px;
							flex-grow: 1;
						}
					}
					// input.option-value.option-attr {
					// 	display: none !important;
					// }
					.fld-required {
						@include respond(tabport) {
							width: 1.5625rem;
						}
					}
					.field-options {
						.sortable-options>li {
							display: flex;
							align-items: center;
							justify-content: space-between;
							flex-wrap: wrap;
							gap: 6px;
							.option-selected {
								width: 1rem;
								aspect-ratio: 1/1;
								@include respond(tabport) {
									width: 1.5625rem;
								}
							}
							.remove {
								float: initial;
								right: initial;
								top: initial;
							}
						}
					}
				}
			}
			// builder controllers (.pull-right)
			.cb-wrap  {
				width: 320px;
				position: relative;
				@include respond(tabport) {
					width: 100px;
				}
				@include respond (phone-sm) {
					width: 80px;
				}
			}
			ul.frmb-control {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 12px;
				padding: 0;

				@include respond (tabport) {
					grid-template-columns: auto;
					overflow: auto;
    				height: 656px;
				}

				li {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					min-height: 100px;
					border-radius: 8px !important;
					border: 1px solid transparent;
					box-shadow: 0 0 14px #c5c5c5ab;
					// transition: $transition;

					@include respond (tabport) {
						min-height: 80px;
					}
					@include respond (phone-sm) {
						min-height: 70px;
					}

					&::before {
						font-size: 24px;
						// opacity: 0.5;
						margin: 0;
						transition: $transition;

						@include respond (tabport) {
							font-size: 32px;
							color: $primary;

						}
						@include respond (phone-sm) {
							font-size: 30px;
						}

					}
					
					/* max-width: 150px; */
					span {
						font-size: 14px;
						margin-top: 8px;
						font-family: Inter;
						font-weight: $regular;

						@include respond (tabport) {
							display: none;
						}
					
						&::before {
							font-size: 24px;
							opacity: 0.5;
							transition: $transition;
						}
					}
					&:hover {
						border-color: $primary;
						color: $primary;
						background: rgba($primary, 0.08);

						&::before {
							opacity: 0.8;
							color: $primary;
						}
					}
				}
			}
		}
	}

	li.input-control {
		&.input-control-14,
		&.input-control-15,
		&.input-control-16 {
			&>span {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				margin-top: 0 !important;
			}
			span.control-icon {
				width: min-content;
				margin: 0 0 8px 0!important;
				i {
					font-size: 25px;
				}
			}
		}
	}

	// Builder row and COl design modification
	#formit_builder_custom_field{
		.row {
			border: 1px dashed #ccc;
			margin: 10px 0;
			min-height: 35px;
			position: relative;
			padding: 10px;
			margin: 10px -10px;
			display: flex;
			gap: 10px;
			flex-wrap: nowrap;
			&.tempRowWrapper:before {
				content: 'Empty Row';
				position: absolute;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: .5;
				top: 0;
			}
			
			.colWrapper {
				border: 1px dashed #3d54cc;
				padding: 10px !important;
				flex: inherit !important;
				background-color: #fff;
				 &:before{
					content: 'Column';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					margin: 0 auto;
					color: #9c9b9b;
					width: 45px;
					top: -10px;
					background: #fff;
				}
				.form-field{
					border: 1px solid #ddd;
					margin-top: 3px;
					padding: 10px;
					height: 100%;
					textarea{
						width: 100%;
					}
					&:hover{
						border: 1px solid #009688;
					}
					.form-control{
						width: 100%;
						max-width: 100%;
					}
				}
			}
			.tempColWrapper {
				position: absolute;
			}

			&.hoverDropStyleInverse{
				  background: repeating-linear-gradient(
					45deg,
					transparent,
					transparent 10px,
					#f0f0f0 10px,
					#f0f0f0 20px
				);
			}
		}
		.grid-mode-help{
			// position: absolute;
			// top: 0;
			// width: 100%;
			background-color: #fff;
			
			div{
				// position: absolute;
				// height: 100%;
				// width: 100%;
			}
		}
	}
}