.image-upload-group {
    	position: relative;
    	text-align: center;
	}
	.image-upload-group input {
	    position: absolute;
	    width: 1px;
	    height: 1px;
	    padding: 0;
	    margin: -1px;
	    overflow: hidden;
	    clip: rect(0,0,0,0);
	    border: 0;
	}
	.image-upload-label {
	    background-color: #ee4055;
	    color: #fff;
	    padding: 8px 12px;
	    margin-top: 10px;
	    display: inline-block;
	    cursor: pointer;
	}
	.image-preview {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	}
	.image-preview > div {
	    position: relative;
	    flex: 0 0 50%;
	    margin-bottom: 1rem;
	    padding: 0 0.5rem;
	}
	@media (min-width:640px) {
		.image-preview > div {
		    flex: 0 0 33.33%;
		}
	}
	@media (min-width:768px) {
		.image-preview > div {
		    flex: 0 0 33.33%;
		}
	}
	@media (min-width:992px) {
		.image-preview > div {
		    flex: 0 0 25%;
		}
	}
	@media (min-width:1200px) {
		.image-preview > div {
		    flex: 0 0 20%;
		}
	}
	.close-icon {
	    position: absolute;
	    top: 10px;
	    right: 10px;
	    width: 24px;
	    height: 24px;
	    z-index: 9;
	    cursor: pointer;
	}
	#different_mailing_address {
    	display: none;
	}
	.m_error {
		border-color: red !important;
	}
	.form-outer {
		max-width: 1000px;
		margin: auto;
		padding: 0 100px;
		margin-bottom: 100px;
	}
	.form-title h3 {
		text-align: center;
		font-weight: 500;
		margin-bottom: 14px;
	}
	.col-name input {
		width: 80%;
		padding: 8px 10px;
	}
	.col-name {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		gap: 20px;
	}
	.pt-50{
		padding-top:24px;
	}
	.ui[class*="left icon"].input>i.icon {
		right: 0;
		left: auto;
	}
	.ui[class*="left icon"].input>input {
		padding-left: 18px;
	}
	.ui.form input {
		font-size: 1rem;
		border-radius: 0 !important;
		border: 1px solid #bbb !important;
	}
	.form-title p {
		margin-bottom: 14px;
		text-align: center;
	}
	input.city-in {
		width: 36%;
	}
	.mt-30 {
		margin-top: 30px;
	}
	.col-name.Jobsite select {
		width: 100%;
	}
	.diff-box {
		text-align: center;
		display: flex;
		justify-content: center;
	}
	.diff-box input {
		margin-right: 10px;
	}
	.different-mailing {
		margin-top: 30px;
	}
	.col-name.jobsite.contractor-col {
		display: block;
	}
	.col-name.cont-address input {
		width: 100%;
		margin-bottom: 20px;
	}
	.col-name.cont-city {
		margin-bottom: 20px;
	}
	.cont-state select {
		width: 100%;
	}
	.cont-state {
		display: flex;
		justify-content: space-around;
		gap: 20px;
	}
	.roofing-system select {
		border: 1px solid #bbb;
		padding: 8px 10px;
	}
	.roofing-system input[type="number"] {
		border: 1px solid #bbb;
		padding: 8px 10px;
	}
	.roofing-system .diff-box {
		margin-bottom: 26px;
		margin-top: 40px;
	}
	.square-col {
		text-align: center;
		margin: 30px 0;
	}
	.g-font-size-20 {
		font-size: 20px;
	}
	.starter-col input {
		width: 100%;
		border: 1px solid #bbb;
		padding: 8px 10px;
	}
	.starter-col {
		display: flex;
		justify-content: space-between;
		width: 100%;
		gap: 20px;
	}
	.form-text {
		text-align: center;
		margin-top: 50px;
	}
	.above-check a {
		color: #ee4055;
		outline: none;
	}
	.above-check {
		display: flex;
		gap: 10px;
		justify-content: center;
		margin-top: 30px;
	}
	.subm-col {
		text-align: center;
		margin-top: 50px;
	}
	.subm-col input {
		background: #ee4055;
		border: none;
		color: #fff;
		padding: 10px 20px;
		text-transform: uppercase;
		margin-right: 10px;
	}
	.subm-col input:hover {
		background-color: #f26f7f;
	}
	.subm-col a{
		color:#ee4055;
	}

	.subm-col a:hover{
		text-decoration: underline;
	}
	.universal-col {
		display: flex;
		gap: 0px;
		width: 100%;
		margin-top: 30px;
	}
	.universal-col input[type="text"] {
		width: 100%;
		background: #fff;
		border: 1px solid #ddd!important;
		background: #fffefe;
		border: none;
		color: #000;
		padding: 10px 20px;
		margin-right: 0;
		color: #000;
	}
	.diff-box.shingle-col {
		margin-top: 50px;
	}
	.universal-col input[type="text"]:hover {
		background: #ee4055;
		color:#fff;
	}
	@media only screen and (max-width:767px) {
		.form-outer {
			max-width: 1000px;
			padding: 0;
			width: 100%;
		}
		.col-name input {
			width: 100%;
			padding: 8px 10px;
			margin-bottom: 10px;
		}
		input.city-in {
			width: 100%;
		}
		.col-name.jobsite select {
			padding: 8px 8px;
			box-sizing: border-box;
			width: 100%;
			margin-bottom: 10px;
		}
		.cont-state {
			display: block;
		}
		.cont-state select {
			width: 100%;
			margin-bottom: 10px;
		}
		.cont-state input {
			width: 100%;
			margin-bottom: 10px;
		}
		.starter-col {
			display: block;
		}
		.starter-col input {
			width: 100%;
			margin-bottom: 10px;
		}
		.col-name {
			display: block;
		}
		.subm-col {
			text-align: center;
			margin-top: 50px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
	}
	.col-name input[type="checkbox"] {
		width: auto !important;
	}