@media only screen and (max-width: 600px){
.orderFormWrap .form-control.selectField {
    padding-top: 0px;
    padding-bottom: 1px;
}
.selectField{ font-size: inherit; }
.orderFormWrap .form-control{
padding: 5px 1px!important;
}
.tablink {
    border-bottom: 1px solid white!important;
}
.orderFormWrap label {
    font-size: 8px!important;
    font-weight: bold;
}
/*.productFlashing .boxRow .box input {
    border: 2px solid!important;
    width: 30px!important;
}*/
.productAccessories .ascrTable input {
    background: black!important;
    color: white!important;
    width: 40px!important;
}
.productAccessories .bottomBorder {
    border-bottom: 0px solid black!important;
    margin-left: 0px!important;
    margin-right: 0px;
    font-size: 9px;
    padding: 9px;
}

.orderFormWrap td{
	font-size: .8em!important;
}
#Order .orderFormWrap{
	    width: 100%!important;

}
.productFlashing .bgContainer {
    position: relative;
    display: table;
}
/*.productFlashing .boxRow .box input {
    border: 1px solid!important;
    width: 25px!important;
    height: 10px!important;
    margin-left: 28px!important;
    margin-bottom: 5px!important;
}*/
.orderFormWrap .form-control{
	padding: 5px 5px;
	font-size: 1rem !important;
}

.fancy-checkbox-img:before {
    margin: 0px!Important;
}
}
footer {
    width: 100%;}



/*
 * Custom Style
*/

@media print {
	body {
		-webkit-print-color-adjust: exact !important;
	}
	#Order {
		display: block !important;
		padding: 0px !important;
	}
	body .orderFormWrap td {
		padding: 2px !important;
	}
	body .ascrTable td {
		padding: 0px !important;
	}
	body .productAccessories img {
		display: none !important;
	}
	body .content_wrap,
	body .formSheet,
	body .product_wrap {
		padding: 0px !important;
		margin: 0px !important;
	}
	body header,
	body .sidebar_master,
	body .product_wrap > *:not(#Order),
	body .orderFormWrap .uploadInput,
	body .orderFormWrap #submit,
	body .orderFormWrap #printBtn,
	body .orderFormWrap .downloadBtn,
	body footer
	{
		display: none !important;
	}

	body .orderFormWrap .productFlashing {
		/* padding-top: 50px !important; */
		/* padding-bottom: 150px !important; */
	}
	body .orderFormWrap .productFlashing,
	body .orderFormWrap .sheetTable {
		page-break-after : always;
	}
	body .orderFormWrap .productFlashing input::placeholder {
		visibility: hidden !important;
	}
	body input::placeholder {
		color: black !important;
	}
	body input::-ms-input-placeholder {
		color: black !important;
	}


	body input {
		background: #efefef !important;
		color: black !important;
		border: 1px solid grey !important;
	}
	body label {
		font-size: 16px !important;
	}
	body select {
		background: transparent !important;
		color: black !important;
	}

	body br {
		display :none !important;
	}
}

.clear {
	clear: both;
}
.btnWrap {
	background-color: black;
}
.text-left {
	text-align: left !important;
}
.text-center {
	text-align: center !important;
}
.text-right {
	text-align: right !important;
}
.orderFormWrap table {
	table-layout: fixed;
	border: none;
	border-collapse: collapse;
	width: 100%;
}
.orderFormWrap .formSheet {
	background: #ffffff;
	padding: 10px;
}
.orderFormWrap .gaCol {
	width: 100px;
}
.orderFormWrap label {
	font-size: 22px;
	font-weight: bold;
}
.orderFormWrap .form-control {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: 1px solid #C2C2C2;
	border-radius: 2px;
	color: inherit;
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: inherit;
	padding: 10px 10px;
	text-align: inherit;
	vertical-align: text-bottom;
	width: 100%;
	background: rgba(0,0,0,0.8);
	border: 1px solid rgba(12,123,225,1);
	color: rgba(12,123,225,1);
}
.orderFormWrap .form-control.selectField {
	padding-top: 8px;
	padding-bottom: 7px;
}
.orderFormWrap .form-control select {
	color: rgba(12,123,255,1);
	background: rgba(0,0,0,0.8);
	font-size: 1.5rem;
	font-family: Calibri;
	font-weight: bold;
	border: 0;
	background: transparent;
	width: 100%;
	text-align-last: center;
}
.orderFormWrap td {
	background-color: transparent;
	color: #000000;
	font-family: Calibri;
	font-size: 1.3em;
	text-align: center;
	font-weight: bold;
	padding: 1px;
}

.downloadBtn {
	display: block;
	margin: 15px auto 0;
	width: 200px;
	padding: 10px;
	background: #0C7BFF;
	border: 1px solid transparent;
	color: black;
	text-align: center;
}

.productFlashing {
	color: black;
}
.productFlashing .boxRow {
	clear: both;
	display: block;
	width: 100%;
}
.productFlashing .boxRow .box {
	float: left;
	width: 25%;
	position: relative;
	height: 100%;
}
.productFlashing .boxRow .box input {
	border: 2px solid;
	width: 50px;
	text-align: center;
	background: rgba(0,0,0,0.8);
	border: 1px solid rgba(12,123,255,11);
	color: rgba(12,123,255,11);
	font-family: Calibri;
	font-size: 1rem;
	cursor: pointer;
	font-weight: bold;
	padding: 5px;
	position: absolute;
	bottom: 7%;
	left: calc(50% - 20px);
}
.productFlashing .bgContainer {
	position: relative;
	display: inline;
}
.productFlashing .bgContainer img {
	width: 100%;
	margin-bottom: -1%
}
.productFlashing .inputBoxesOverlap .boxRow {
	width: 100%;
	height: 20%;
}
.productFlashing .inputBoxesOverlap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
 }

 .productFlashing.col5layout .boxRow .box {
	width: 20%;
 }
 .productFlashing .boxRow.col3row .box{
	width: 33.33%;
}

.iconPanelFlshng .fieldsContainer {
	background: white;
}
.iconPanelFlshng .imgContainer img {
	width: 100%;
}
.iconPanelFlshng .fieldsContainer input {
	border: 2px solid;
	width: 50px;
	text-align: center;
	background: rgba(0,0,0,0.8);
	border: 1px solid rgba(12,123,255,11);
	color: rgba(12,123,255,11);
	font-family: Calibri;
	font-size: 1rem;
	font-weight: bold;
	padding: 5px;
}

.productAccessories {
	color: black;
}

.productAccessories .ascrTable {
	width: 100%;
	text-align: center;
}
.productAccessories .bottomBorder.qtyBdr {
	width: 90px;
}

.productAccessories .bottomBorder {
	border-bottom: 2px solid black;
	margin: 0px auto;
	padding-bottom: 3px;
	/* width: 220px; */
}
.productAccessories .ascrTable input {
	width: 50px;
}
.productAccessories #pbsize::placeholder {
	color: black;
}
.productAccessories #pbsize {
	text-align: center;
	color: black;
	font-size: inherit;
	width: 50px;
}
.productAccessories img {
	width: 100%;
	max-width: 200px;
}
/*
 * General Style
*/

.uploadInput {
	text-align: center;
	background: #0C7BFF;
	border: 1px solid transparent;
	padding: 10px;
	width: 290px;
	margin: 0px auto;
	display: block;
	color: black;
}
.uploadInput:hover {
	transition: 0.2s;
	color: white;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	-moz-appearance:none;
}

input[type=number] {
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
}

.mb-2, .my-2 {
	margin-bottom: .5rem!important;
}

@media only screen and (max-width: 1024px) {
	.productFlashing .boxRow .box input {
		font-size: 15px;
		left: calc(50% - 25px);
		width: 3rem;
		bottom: 10px !important;
		height: 1.5rem;
	}

	.orderFormWrap td {
		font-size: 1.5rem;
	}

	.orderFormWrap .form-control{
		padding: 10px 10px;
	}

	.orderFormWrap .form-control select {
		font-size: inherit;
	}
	.orderFormWrap .form-control.selectField {
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.productAccessories .bottomBorder {
		width: 280px;
	}

	.orderFormWrap .gaCol {
		width: 150px;
	}

	.productAccessories .ascrTable input {
		width: 70px;
		font-size: inherit;
	}

	.iconPanelFlshng .fieldsContainer input {
		width: 70px;
		font-size: 1.5rem;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

.btnWrap{
	background:#333333!important;
}
.tablink {
	margin: 0px!important;
	border-bottom: 0px!important;
}

@media only screen and (max-width: 600px) {

	.tablink{
		border-bottom:1px solid white;
	}

	.diabondheadingwa{
		margin-top:25px!important;
	}
	.content_wrap{
		padding-left: 10px!important;
	}
	.box input{
		left: calc(50% - 15px)!important;
		font-size: 0.5rem !important;
		width: 30px !important;
		height: 10px !important;
	}
}

* {box-sizing: border-box}

/* Set height of body and the document to 100% */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Style tab links */
.tablink {
  background-color: #333;
  color: #0D7BFF;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 20px;
  width: 16.665%;
  min-height: 60px;
}

.tablink:hover {
  background-color: #555;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 20px 20px;
  height: 100%;
}

#RecommendedFlashings {background-color: black;}
#Colours {background-color: black;}
#Specifications {background-color: black;}
#Order {background-color: black;}
#Gallery {background-color: black;}
#Warranty {background-color: black;}

.iconpanels .orderFormWrap {
	background: black;
	margin: 0px 10px 20px;
	padding: 20px;
}

.orderFormWrap #submit:hover p {
	transition: 0.2s;
	color: white;
}

.orderFormWrap #submit:hover {
	transition: 0.5s;
	border: 1px solid #0C7BFF;
	background: #0C7BFF;
	cursor: pointer;
}

.orderFormWrap .downloadBtn:hover {
	transition: 0.2s;
	color: white;
}
.orderFormWrap #printBtn {
	display: block;
	margin: 15px auto 0;
	width: 200px;
	padding: 10px;
	background: #0C7BFF;
	border: 1px solid transparent;
}
.orderFormWrap #printBtn p {
	color: black;
}
.orderFormWrap #printBtn:hover p {
	transition: 0.2s;
	color: white;
}

.orderFormWrap #printBtn:hover {
	transition: 0.5s;
	border: 1px solid #0C7BFF;
	background: #0C7BFF;
	cursor: pointer;
}

.fancy-checkbox-label > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: inherit;
}
.fancy-checkbox-label {
  font-weight: normal;
  cursor: pointer;
}
.fancy-checkbox:before {
  font-family: FontAwesome;
  content: "\f00c";
  background: #fff;
  color: transparent;
  border: 3px solid #ddd;
  border-radius: 3px;
  z-index: 1;
}
.fancy-checkbox-label:hover > .fancy-checkbox:before,
input:focus + .fancy-checkbox:before {
  border-color: black;
}
.fancy-checkbox-label:hover > input:not(:checked) + .fancy-checkbox:before {
  color: #eee;
}
input:checked + .fancy-checkbox:before {
  color: #fff;
  margin: 5%;
  background: black;
  border-color: black;
}
.fancy-checkbox-img:before {
  position: absolute;
  margin: 0px;
  right: 5px;
  line-height: normal;
/*  margin-left: 270px;*/
}
input:checked + .fancy-checkbox-img + img {
  transform: scale(0.9);
  box-shadow: 0 0 40px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.column {
  float: left;
  width: 21%;
  padding: 5px;
}