/*! Place your custom styles here */

#addToOrder, #cancelOrder, #getWallPrice, #getPointingPrice, #getBrickworkPrice, .understoodModal, #bSubmitRemove, #bSubmitOK, #requestSamples, #submitOrder, #saveOrder, #generateQuote, #amendQuote, #confirmOrder, #cancelQuote, #createQuoteOrder {width:100%;}
#addRow {float:left; clear:both; color:#252525; font-size:1em; line-height:2em; cursor:pointer; transition-duration:0.5s;}
#addRow:hover {color:#4A90E2; text-decoration:none;}
.deleteRow {transition-duration:0.5s;}
.deleteRow:hover {background:#862025 !important;}


a.btn--primary {color:#FFF;}

.btn-green {background:#74B542; border-color:#74B542; color:#FFF;}
.btn-green:hover {background:#97DB63; border-color:#74B542 !important; color:#FFF;}

.btn-red {background:#B0222A; border-color:#B0222A; color:#FFF;}
.btn-red:hover {background:#F8343F; border-color:#B0222A !important; color:#FFF;}

.btn-right {float:right;}
.btn-left {float:left;}

.invID {font-weight:400; font-size:0.8em; color:#000;}

.mb--05 {margin-bottom: 1em;}
p.mb--05 {margin-bottom: 1em !important;}

.height-100-min {min-height:100vh; height:auto;}
.pos-small {padding-top:2em !important;}

#pricingRequest-p-0 #shoppingCart {min-height:85.5px;}

.removeMOQ, .addToDownloads, .addToDownloadsI {cursor:pointer;}
.bg--add {background:#4ebf56;}
.bg--add::before {content:"+";}

.formError {border:1px solid #B0222A !important;}
#formText {color:#B0222A; font-weight:600;}

#hubspotLoading, #xeroLoading {position:absolute; background:rgba(255, 255, 255, 0.8); top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; z-index:10;}
#hubspotLoading::after {content:"Updating the Hubspot contacts...";}
#xeroLoading::after {content:"Updating the Xero contacts...";}

input[type='number'] {-moz-appearance:textfield;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance:none;}

.input-number span.input-number__increase, .input-number span.input-number__decrease {
  position: absolute;
  top:0;
  display: block;
  width: 10%;
  min-width: 3.71428571em;
  height: 100%;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
  padding-top: 6px;
  transition: all .3s ease;
}
.input-number span:hover {
  color: #4a90e2;
}
.input-number .input-number__increase {
  right: 0;
  border-left: 1px solid #ececec;
  z-index: 1;
}
.input-number .input-number__decrease {
  left: 0;
  border-right: 1px solid #ececec;
}
label {cursor:pointer;}
label span {font-size:1em !important; position:relative; margin-left:5px; bottom:8px; display:inline-block;}

a.addToSampleI, a.addToSample {cursor:pointer;}
a.addedToSample, a.addedToSample i, .addedToDownload {color:#B0222A; opacity:1 !important;}
#downloadSelectedR {display:none;}

form div[class*="col-"]:not(:last-child), form .row > div[class*="col-"]:not(:last-child) {margin-bottom:0.92857143em;}
select.field-error, textarea.field-error, .input-radio label.field-error {border-color:#EBA8A8;}
#formErrorMsg {display:none; font-weight:700; color:#EBA8A8; margin:15px 0;}

input[disabled] {opacity:0.5;}

section.content {background:#fafafa; border:1px solid #ececec;}
.wizard > .content {background:none !important; border:none !important;}

.ui-autocomplete .ui-menu-item-wrapper {line-height:17px; font-size:16px;}
.ui-autocomplete .ui-menu-item-wrapper:hover, .ui-menu-item-wrapper:hover span {color:#FFF;}
.ui-menu-item span {font-size:12px; color:#575656;}

#shareColleaguesFormResponse, #shareColleaguesForm, #shareColleaguesForm p.lead, #colleagueAdd, .colleagueInput, #joinPProgramFormResponse, #joinPProgramForm {float:left; width:100%;}
#shareColleaguesFormResponse, #joinPProgramFormResponse {display:none;}
#colleagueAdd {display:flex; position:relative;}
#colleagueList {float:left; width: 83.33333333%;}
#shareColleaguesForm .col-sm-6 {float:left !important; width:50%;}
#colleagueAdd .col-sm-2 {position:absolute; right:0; left:unset; bottom:1.85714286em; width:16.66666667%;}
.colleagueInput input, #joinPProgramForm input, #joinPProgramForm .input-select {margin-bottom:0.92857143em;}
#colleagueList input, button.btn.btn--primary, button.btn.btn--secondary {width:100% !important;}

#shareColleaguesForm .field-error, #joinPProgramForm .field-error {background:#EBA8A8; color:#FFF !important;}
#shareColleaguesForm .field-error::placeholder, #joinPProgramForm .field-error::placeholder {color:#F0F0F0 !important;}

#watchVideoC, #videoContainer {width:100%;  overflow:hidden; position:relative;}
#watchVideoC {background:url(/images/Introduction-to-Natural-Hydraulic-Mortar.jpg); background-size:cover; background-position:center center; aspect-ratio:16/9;}
#showCPDVideo, #showCPDVideoConf {position:absolute; top:0; left:0; width:100%; height:100%; justify-content:center; align-items:center; color:#FFF; cursor:pointer; text-decoration:none !important;}
#videoContainer {display:flex; justify-content:center;}
#showCPDVideo, #relevantProject {display:none;}
#showCPDVideoConf {display:flex;}
#showCPDVideoConf span {border-color:#FFF !important; background:rgba(255, 255, 255, 0.9); color:#252525;}
#showCPDVideoConf:hover {text-decoration:none;}
#showCPDVideoConf:hover span {border-color:#609de6 !important; background:#FFF; color:#609de6; transform:translate3d(0, -2px, 0); -webkit-transform:translate3d(0, -2px, 0);}
#showCPDVideoConf span:hover {color:#609de6;}

#videoModal .container {background:#252525 !important; padding:1px !important;}
#videoModal video {width:100%; height:auto;}

#videoModal .modal-close {color:#FFF !important; opacity:0.8;}
#videoModal .modal-close:hover {color:#609de6 !important;}
.vQAError p {color:#B0222A; font-weight:600;}

span.mortarTitle, span.mortarDesc {cursor:pointer;}
.mortarDesc {float:left; width:100%; font-size:0.8em;}

@media (min-width: 768px) {
	#orderSelect {float:left;}
}
@media (max-width: 767px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    width:100%;
}