@import 'variables/_variables.less';

#mailcotentarea {
	.info-attachment {
		 	font-size: 12px;
		 }
	.control.attachment {
		display: flex;
		align-items: center;
		 margin: 10px 0px; 
		.info-attachment-text {
			    height: 48px;
    			display: flex;
    align-items: center;
    padding: 0px 15px 0px 40px;
    position: relative;
    background-image: url(/pub/media/wysiwyg/steelbro/polygon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    background-position-x: 0px;
    background-color: @color_white;

		}
		.info-attachment {
			display: inline-block;
			margin-top: 5px;
			font-size: 14px;
			font-style: italic;
			
		}

	}

	.attachment {
		input[type="file"] {
			border: 0;
			width: auto;
			padding: 0;
			margin: 0;
			cursor: pointer;

			&::-webkit-file-upload-button {
				visibility: hidden;
				display: none;
			}

			&:before {
				overflow: hidden;
				white-space: nowrap;
				cursor: pointer;
				margin: 0 10px 0 0;
				outline: none;
				font-family: "Jost";
				font-size: 16px;
				padding: 10px 15px;
				min-width: 120px;
				background-color: @upload_background;
				border: 1px solid @upload_background;
				color: @upload_color;
				font-weight: 500;
				border-radius: 0px !important;
				display: inline-block;
				vertical-align: middle;
				line-height: 26px;
				text-align: center;
				-moz-transition: all 500ms ease;
				-webkit-transition: all 500ms ease;
				-o-transition: all 500ms ease;
				transition: all 500ms ease;
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				content: attr(data-text);
			}

		}

	}

}
.classic-form {
	.send-msg {
		    margin: auto;
    		max-width: fit-content;
    		text-align: center;
    		.imageshow {
    				max-width: 150px;
    				margin: auto;
    				padding: 30px 0px;
				}
    		.message1, .message2 {
    			margin: 20px 0px;
    		}
    		.title-text {
    			background: @success_message_background;
    			padding: 7px 20px;
    			font-size: 14px;
    			font-weight: 500;
    			color: @success_message_color;
    			display: flex;
    			align-items: center;
    			width: max-content;
    			margin: auto;
    			img {
    				width: 12px;
    				margin-right: 7px;
    			}
		}
	}
	.info_text {
    text-align: center;
    margin: 30px 0px;
    font-size: 12px;
	}
}
.bigconnect_form.modal-popup._inner-scroll {
	.modal-inner-wrap {
		max-width: 830px;
	}

	.modal-content {
		padding: 0px 50px 50px 50px;
	}

	.modal-title {
		border-bottom: 0px;
		text-align: center;
		font-size: 24px;
		font-weight: 700;
		padding-bottom: 30px;
	}

	#mailcotentarea {
		.goback {
			margin-top: 30px;
		}

		.send-msg {
			display: none;
			text-align: center;

			.message1 {
				font-size: 20px;
			}

			.left-msg {
				h3 {
					width: max-content;
					margin: auto;
					padding: 7px 15px;
					background: @success_message_background;
					color: @success_message_color;
					font-size: 14px;
					font-weight: 600;
				}

			}

		}

		.imageshow {
			margin: auto;
			padding: 30px 0px;

			img {
				max-width: 70px;
			}

		}

		.actions-toolbar {
			display: flex;
			justify-content: center;

			.action.primary {
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 50px;
				padding: 0px 20px;
			}

		}

	}

}

.catalog-product-view {
	.product.media {
			.contact_us_bar_widget {
				display: flex;
			}
			}
	.contact_us_bar_widget {
		width: 100%;
		display: none;
		margin: 30px 0px;
	}

}

.page-products.page-layout-1column .products-grid .product-item {
	&.contact_form_category {
		width: 50%;
	}

}

.contact_form_category {
	.contact_us_bar_widget {
		flex-wrap: wrap;
		margin: 0px;
		height: 100%;

		.contact-us-image {
			width: 85px;
			height: 85px;
		}

		.contact-us-text {
			display: flex;
			flex-wrap: wrap;

			.main_text {
				font-weight: 900;
				font-size: 26px;
			}

			.long_text {
				font-size: 21px;
			}

			.draw_timing {
				display: flex;
				align-items: center;

				img {
					margin-right: 10px;
					width: 25px;
				}

			}

			.cta-block {
				display: flex;
				width: 100%;
				justify-content: right;

				.action.primary {
					height: 55px;
					padding: 0px 25px;
				}

			}

		}

	}

}

//
//  Tablet
//  _____________________________________________

@media only screen and (min-width:@screen__s) and (max-width:(@screen__l)) {
	.page-products.page-layout-1column .products-grid .product-item {
		&.contact_form_category {
			width: calc(~'((100% / 3)*2)');
		}

	}

}

//
//  Table to 860px
//  _____________________________________________

@media only screen and (min-width:@screen__s) and (max-width:860px) {
	.contact_form_category {
		.contact_us_bar_widget {
			padding: 20px;

			.contact-us-text {
				margin-top: 20px;

				.main_text {
					font-size: 22px;
				}

				.long_text {
					font-size: 18px;
				}

				.draw_timing {
					font-size: 16px;
				}

				.cta-block .action.primary {
					height: 45px;
				}

			}

		}

	}

}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum ='max') and (@break = @screen__s) {
	.page-products.page-layout-1column .products-grid .product-item {
		&.contact_form_category {
			width: 100%;
		}

	}

	.contact_form_category {
		.contact_us_bar_widget {
			padding: 20px;

			.contact-us-image {
				width: 60px;
				height: 60px;
			}

			.contact-us-text {
				margin-top: 20px;

				.main_text {
					font-size: 18px;
				}

				.long_text {
					font-size: 16px;
				}

				.draw_timing {
					font-size: 14px;
				}

				.cta-block .action.primary {
					height: 45px;
				}

			}

		}

	}

}

//
//  Mobile 768px
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum ='max') and (@break = @screen__m) {
	#mailcotentarea .control.attachment .info-attachment-text { display: none; }
	.catalog-product-view {
		.product.media {
			.contact_us_bar_widget {
				display: none;
			}
		}
		
		.contact_us_bar_widget {
			width: 100%;
			margin: 15px 0px;
			padding: 25px 20px;
			flex-wrap: wrap;
			display: block;

			.contact-us-image {
				width: 65px;
				height: 65px;
				margin-bottom: 25px;
			}

			.main_text {
				font-size: 18px;
			}

			.long_text {
				font-size: 16px;
			}

			.phone_number {
				margin-top: 20px;
			}

			.cta-block {
				margin-top: 20px;
				float: right;
			}

		}

	}

}