/* Concrete Step Container Styles */
@font-face {
	font-family: 'font-fileuploader';
	src: url('font/font-fileuploader.ttf?yhe2ig') format('truetype'),
		 url('font/font-fileuploader.woff?yhe2ig') format('woff'),
		 url('font/font-fileuploader.svg?yhe2ig#font-fileuploader') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="fileuploader-icon-"], [class*=" fileuploader-icon-"] {
	display: inline-block;
	font-family: 'font-fileuploader' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.fileuploader-icon-main:before {
	content: "\e900";
}
.fileuploader-icon-alert:before {
	content: "\e901";
}
.fileuploader-icon-calendar:before {
	content: "\e902";
}
.fileuploader-icon-camera:before {
	content: "\e903";
}
.fileuploader-icon-success:before {
	content: "\e904";
}
.fileuploader-icon-arrow-left:before {
	content: "\e905";
}
.fileuploader-icon-arrow-right:before {
	content: "\e906";
}
.fileuploader-icon-crop:before {
	content: "\e908";
}
.fileuploader-icon-download:before {
	content: "\e909";
}
.fileuploader-icon-edit:before {
	content: "\e90a";
}
.fileuploader-icon-external:before {
	content: "\e90b";
}
.fileuploader-icon-eye:before {
	content: "\e90c";
}
.fileuploader-icon-file:before {
	content: "\e90d";
}
.fileuploader-icon-video:before {
	content: "\e90f";
}
.fileuploader-icon-folder:before {
	content: "\e910";
}
.fileuploader-icon-help:before {
	content: "\e911";
}
.fileuploader-icon-image:before {
	content: "\e912";
}
.fileuploader-icon-link:before {
	content: "\e913";
}
.fileuploader-icon-message:before {
	content: "\e914";
}
.fileuploader-icon-menu:before {
	content: "\e915";
}
.fileuploader-icon-sort:before {
	content: "\e916";
}
.fileuploader-icon-audio:before {
	content: "\e917";
}
.fileuploader-icon-plus:before {
	content: "\e918";
}
.fileuploader-icon-retry:before {
	content: "\e919";
}
.fileuploader-icon-rotate:before {
	content: "\e91a";
}
.fileuploader-icon-save:before {
	content: "\e91b";
}
.fileuploader-icon-search:before {
	content: "\e91c";
}
.fileuploader-icon-settings:before {
	content: "\e91d";
}
.fileuploader-icon-share:before {
	content: "\e91e";
}
.fileuploader-icon-deny:before {
	content: "\e91f";
}
.fileuploader-icon-trash:before {
	content: "\e920";
}
.fileuploader-icon-upload:before {
	content: "\e921";
}
.fileuploader-icon-user:before {
	content: "\e922";
}
.fileuploader-icon-remove:before {
	content: "\e923";
}
.fileuploader-icon-zoom-in:before {
	content: "\e924";
}
.fileuploader-icon-zoom-out:before {
	content: "\e925";
}
.concreteBody {
    max-width: 100vw !important;
    width: 100% !important;
    padding: 2% 0 2% 0;
    background-color: #ffffff;
}
.concreteBody input:focus {
    outline: none !important;
}
.concreteBody input,
.proffBody input
.calculatorBody input {
    padding: 15px 20px !important;
    height: inherit !important;
}
.concreteBody input[type='checkbox'],
.proffBody input[type='checkbox'] {
    padding: 0 !important;
    height: 20px !important;
}
.concreteBody input[type='checkbox']::before,
.proffBody input[type='checkbox']::before {
    position: absolute !important;
    top: 0px !important;
    display: block !important;
    left: 0px !important;
    transform: none !important;
    border: none !important;
}
.concreteBody input[type='checkbox']::after,
.proffBody input[type='checkbox']::after {
    display: none !important;
}
.proffBody input[type='checkbox'] {
    padding: none !important;
}
.calculatorContainer input {
    height: 100%;
}
.concreteBody label {
    margin-top: 0;
}
.concreteBody select {
    font-family: 'Ubuntu', sans-serif !important;
}
.concreteBody h1 {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 42px;
}

.concreteBody h2 {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 32px;
}

.concreteBody h3 {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 24px;
}

.concreteBody p {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 16px;
}
.concreteBody input, .calculatorBody input, .proffBody input {
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 600;
}
.navigationBtns {
    display: flex;
    justify-content: center;
    margin: 2% auto 2% auto;
}
.concreteBody select, .proffTypeSelect, .proffSelect {
    appearance: none;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border: 1px solid black;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 7px 7px 12px -4px rgba(0,0,0,0.35);
    padding: 15px;
    padding-left: 5px !important;
}
.concreteSelectWrapper {
    width: 49%;
    margin-bottom: 0 !important;
    position: relative;
}
.concreteSelectWrapper select {
    background-image: url('../images/sort-down.svg') !important;
    background-position-x: 97%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: 15px;
}
.concreteSelectWrapper:after {
    content: "";
    border-left: 1px solid black;
    position: absolute;
    height: 100%;
    width: 1px;
    right: calc(15px + 6%);

}
.concreteBody select:before, .proffTypeSelect:before, .proffSelect:before{
    content: " ";
    border-left: 1px solid black;
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: black;
}
.concreteBody input[type='text'] {
    font-family: 'Ubuntu', sans-serif !important;
}
.concreteBody input::placeholder, .concreteNameInput::placeholder {
    color: #A9A9A9;
    font-size: 18px;
    font-family: 'Ubuntu', sans-serif !important;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 1px;
}
.concreteBody select[value='placeholder'] {
    color: #A9A9A9;
    font-size: 18px;
    font-family: 'Ubuntu', sans-serif !important;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 1px;
}
/* Buttons and misc styles */
.blueText {
    color: #006bb7;
}
.blueBtn {
    background-color: #0b97ef !important;
    font-size: 18px;
    padding: 15px;
    border: 1px solid black;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none !important;
}
.disabledBtn  {
    background-color: transparent !important;
    color: #aaaaaa;
    font-size: 18px;
    padding: 15px;
    border: 1px solid black;
    border-radius: 8px;
    display: block;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none !important;

}
.resetBtn {
    width: 40%;
    background-color: #7a7a7a !important;
    border-radius: 8px;
    border: 1px solid black;
    color: #ffffff;
    text-decoration: none !important;
    margin-right: 2%;
    font-size: 18px;
    font-weight: 700;
}
.nextBtn, .orderBtn {
    width: 40%;
    background-color: #07b92d !important;
    border-radius: 8px;
    border: 1px solid black;
    color: #ffffff;
    text-decoration: none !important;
    margin-left: 2%;
    padding: 1.1em 1.44em !important;
    font-size: 18px;
    font-weight: 700;
}
.backBtn, .deleteBtn {
    background-color: #E61610 !important;
    text-transform: uppercase;
    color: #ffffff;
    border: 1px solid black;
    width: 40%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px solid black;
    color: #ffffff;
    text-decoration: none !important;
    padding: 1.1em 1.44em !important;
    font-size: 18px;
    font-weight: 700;
}
.disabledBtn:focus,
.blueBtn:focus,
.nextBtn:focus,
.resetBtn:focus,
.backBtn:focus
{
    outline: 0;
}
.blueBtn:hover {
    background-color: #11a4ffcb !important;
    outline: 0;
}
.disabledBtn:hover {
    background-color: #00000021 !important;
    outline: 0;
}
.nextBtn:hover, .orderBtn:hover {
    background-color: #088824 !important;
    outline: 0;
}
.resetBtn:hover {
    background-color: #a5a1a1 !important;
    outline: 0;
}
.backBtn:hover, .deleteBtn:hover {
    background-color: #af140f !important;
    outline: 0;
}
.titleBox {
    text-align: center;
}
.titleBox h1 {
    color: #006bb7;
    font-weight: 700;
    margin-bottom: 0;
}
.titleBox h3 {
    font-weight: 700;
    margin-top: 0;
}

.stepper {
    width: 80%;
    margin: 0 auto 0 auto;
	margin-bottom: 20px;
}

.stepper .stepperDisplay {
    display: flex;
    justify-content: center;
    align-items: center;
	padding-bottom: 25px;
}

.stepper .stepNames {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
.stepper .singleStep{
	text-align: center;
    width: 50px;
    background: none;
    position: relative;
}
.stepper .singleStep div.inner{
    height: 50px;
    width: 50px;
    border: 1px solid black;
    border-radius: 8px;
    background-color: #07b92d;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
	display: flex;
    justify-content: center;
    align-items: center;
}
.stepper .singleStep div.label{
	position: absolute;
    left: -50px;
    width: 150px;
}
.stepper .stepDivider {
    width: 30%;
    height: 30px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: #07b92d;
}

/* Step 1 Styles */
.step1Body, .step2Body, .step3Body {
    width: 90%;
    margin: 0 auto 0 auto;
    background-color: rgba(235, 235, 235, 0.42);
    border: 3px solid #ebebeb;
    box-shadow: 7px 7px 12px -4px rgba(0,0,0,0.35);
}
.locationSelectOptions h2 {
    margin-top: 4% !important;
}
.singleSubStep h2 {
    text-align: center;
    margin: 4% 0 2% 0;
}
.locationSearchBar {
    width: 90%;
    display: flex;
    margin: 0 auto 2% auto !important;
    height: 50px;
    position: relative;
}
.locationInput::placeholder {
    text-align: center;
}
.locationInput {
    width: 100% !important;
    border: 1px solid black;
    border-radius: 30px !important;
    box-shadow: 7px 7px 12px -4px rgba(0,0,0,0.35) !important;
    text-align: center;
    background-color: #fff !important;
}
.current_location{
    display: block;
    position: absolute;
    z-index: 99;
    width: 29px;
    height: 28px;
    right: 9px;
    top: 12px;
    background-size: contain;
    background-repeat: no-repeat;
}
.locationDisplay {
    border: 1px solid black !important;
    width: 90% !important;
    min-height: 400px;
    margin: 0 auto 0 auto;
    border-radius: 8px;
}
.pac-container {
    margin-top: 0.5%;
}
.savePositionBtn {
    width: 90%;
    margin: 0 auto 0 auto;
    display: block;
    margin-top: 10px;
}
.timeSelectOptions {
    width: 90%;
    margin: 0 auto 0 auto;
}
.timeSelectButtons button {
    width: 32% !important;
    min-height: 48px;
    white-space: normal;
    line-height: 1.25;
    padding: 8px 5px !important;
    font-size: 13px;
}
.timeSelectButtons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;
    gap: 5px;
}
.bmax-time-hint {
    font-size: 12px;
    color: #555;
    margin: 5px 0 10px;
}
.timeSelectItem {
    display: flex;
    justify-content: space-between;
    padding-top: 1%;
    padding-bottom: 1%;
}

.timeSelectItem input {
    width: 39% !important;
    background-color: #ffffff;
    border: 1px solid black !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 700;
    padding-left: 5px !important;
    box-shadow: 7px 7px 12px -4px rgba(0,0,0,0.35) !important;
    height: inherit !important;
    position: relative;
}

.timeSelectItem button {
    width: 19%;
    font-size: 32px;
    line-height: 20px;
    font-weight: 400;
    text-decoration: none;
}

.bottomInfo {
    font-family: 'Ubuntu', sans-serif !important;
    font-style: italic;
    text-align: center;
    width: 80%;
    margin: 4% auto 2% auto;
    font-size: 20px !important;
}
.dateSelect {
    width: 49% !important;
}
/* Step 2 Styles */
.volumeEnterMenu input#concreteVolumeInput {
    height: 50px !important;
    font-size: 18px;
}
.volumeEnterMenu input#concreteVolumeInput::placeholder {
    font-size: 18px;
}
.volumeEnterMenu .calculatorBtn {
    padding: 4px 10px !important;
}
.volumeEnterMenu .calculatorBtn::after {
    background-size: 30px;
}
.step2Body {
    padding: 0 2% 0 2%;
}
.deliverySelector h2 {
    margin-top: 4% !important;
    margin-bottom: 2% !important;
    font-size: 30px !important;
}
.deliveryEntry {
    margin: 1% 0 1% 0;
}
.deliveryList {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.deliveryActive, .deliveryEntry:hover {
    text-decoration: underline;
    text-decoration-color: #006bb7;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
    cursor: pointer;
}
.volumeSelectButtons, .vehicleSelectButtons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;
}
.volumeSelectButtons button, .vehicleSelectButtons button {
    width: 49%;
}
.volumeSelectButtons {
    display: flex;
}
.volumeEnterMenu {
    display: flex;
    justify-content: space-between;
}
.volumeEnterMenu input {
    width: 74% !important;
    border-radius: 10px !important;
    border: 1px solid black;
    box-shadow: 7px 7px 12px -4px rgba(0,0,0,0.35) !important;
    background-color: #fff !important;
}
.volumeEnterMenu button {
    width: 24% !important;
}
.proffBtn {
    width: 24% !important;
}
.concreteTypeSelect .concreteSelectWrapper  {
    width: 74% !important;
}
.calculatorBtn {
    padding: 5px 10px;
}
.calculatorBtn::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    min-height: 40px;
    background-image: url('../images/calculator.svg');
    background-repeat: no-repeat;
    filter: invert(100%) sepia(74%) saturate(2%) hue-rotate(258deg) brightness(108%) contrast(100%);
    background-position: center;
}
.concreteTypeSelect {
    display: flex;
    justify-content: space-between;
}
.concreteOptions {
    display: flex;
    flex-wrap: wrap;
    margin-top: 4%;
}
.concreteOptions input[type='checkbox'], 
.proffOptions input[type='checkbox'], 
.concreteSingleOption input[type='checkbox'] {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: 1px solid black;
    border-radius: 5px;
    line-height: normal !important;
}
.concreteSingleOption {
    width: 50%;
    font-size: 22px;
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 700;
    margin-top: 2%;
    text-transform: capitalize !important;
    font-style: normal !important;
    color: #000000 !important;
}
.vehicleSelectMenu {
    display: flex;
    justify-content: space-between;
}
.vehicleSelectMenu .concreteSelectWrapper {
    width: 74% !important;
}
.vehicleSelect {
    padding-left: 5px !important;
}
.truckInfoBtn {
    text-transform: lowercase;
    width: 24%;
    font-family: "Times New Roman", serif;
    font-size: 34px;
    line-height: 34px;
    padding: 10px 0 10px 0;
}
.concreteOptions input[type="checkbox"]:checked, 
.proffOptions input[type='checkbox']:checked, 
.concreteSingleOption input[type='checkbox']:checked {
    background-color: #4169e1;
}
.concreteOptions input[type="checkbox"]:checked:before, 
.proffOptions input[type='checkbox']:checked:before, 
.concreteSingleOption input[type='checkbox']:checked:before {
    content: "";
    filter: invert(100%) sepia(74%) saturate(2%) hue-rotate(258deg) brightness(108%) contrast(100%);
    width: 20px;
    height: 20px;
    margin: 0;
    background-image: url('../images/tick.svg');
    background-position: center;
    background-size: 60%;
    background-repeat: no-repeat;
}
#concreteVolumeInput::placeholder {
    text-align: center;
}
#concreteVolumeInput {
    text-align: center;
}
#concreteVolumeInput.error{
	border-color: red !important;
	color: red;
}
.nextBtn:disabled, .orderBtn:disabled{
	opacity: 0.5;
}
.dateSelect[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url('../images/calendar.svg') !important;
    background-position-x: 97% !important;
    background-position-y: 50% !important;
    background-size: 18px !important;
    background-repeat: no-repeat !important;
    position: absolute;
    right: 5px;
}
.timeselector{
    display: block;
    position: relative;
    width: 39% !important;
}
.timeselector input{
    width: 100% !important;
}
.timeselector input[type='text']{
    background: #fff;
}
.timeselector div.clock{
    background-image: url('../images/clock.svg') !important;
    background-position-x: 97% !important;
    background-position-y: 50% !important;
    background-size: 18px !important;
    background-repeat: no-repeat !important;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 9px;
    fill: #000;
    display: block;
    right: 9px;
}
.dateSelect::after,
.timeselector div.line{
    content: "";
    position: absolute;
    height: 100%;
    border-left: 1px solid black;
    right: calc(25px + 3%);
    width: 1px;
    top: 0px;
    height: 57px;
}
/* Calculator Popup Styles */
.calculatorBody {
    border-radius: 8px;
    border: 1px solid black;
    padding: 2%;
    background-color: #ffffff;
}
.calculatorContainer, .proffContainer, .truckContainer {
    display: none;
}
.concreteVolumeButtons {
    display: flex;
    justify-content: space-between;
}
.squareBtn, .cylinderBtn, .inclineBtn {
    width: 100%;
}
.volumeSelectSingle {
    width: 31%;
}
.volumeSelectSingle img {
    min-height: 180px;
    object-fit: contain;
}
.cylinderImage {
    width: 60%;
    margin: 0 auto 0 auto;
}
.measurementMenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.operator {
    height: 100%;
    display: inline-block;
    padding-bottom: 1.5em;
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 600;
}
.measurementMenu label {
    width: 20%;
    text-align: center;
    font-family: 'Ubuntu', sans-serif !important;
    font-style: italic;
    font-weight: 600;
}
.nameEntryMenu {
    display: flex;
}
.exitButtons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5%;
}
.measurementMenu input {
    border-radius: 8px !important;
    border: 1px solid black;
    width: 100% !important;
    padding: 15px 20px;
}
.closeCalcBtn, .saveCalcBtn {
    width: 49%;
}
.closeCalcBtn {
    background-color: #C7C7C7 !important;
    color: #ffffff;
}
.nameEntryMenu input {
    border: 1px solid black;
    border-radius: 8px !important;
    width: 74% !important;
    height: auto;
}
.nameEntryMenu {
    display: flex;
    justify-content: space-between;
}
.areaAddBtn {
    width: 24%;
}
.calculatorBody h2 {
    text-align: center;
	margin-top: 15px;
    margin-bottom: 15px;
}
.storedCalculatons h3 {
    text-decoration: underline;
    text-decoration-color: #006bb7;
    text-decoration-thickness: 3px;
    text-underline-offset: 10px;
    margin-top: 4%;
	text-align: center;
}
.concreteAmountOptions{
    margin: 0 auto;
}
.nameEntryTitle {
    margin-bottom: 0 !important;
    font-style: italic;
    font-family: 'Ubuntu', serif !important;
    margin-top: 4% !important;
}
.concreteVolumeMenu h3 {
    margin-bottom: 2% !important;
    margin-top: 4%;
}
.inclineResultDisplay {
    width: 100% !important;
}
.calculatorBody input[type='text']::placeholder {
    color: #A9A9A9;
    font-size: 18px;
    font-family: 'Ubuntu', sans-serif !important;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 1px;
}
.areaNameInput {
    padding: 15px 20px;
    padding-left: 5px !important;
}
.measurementMenu input {
    text-align: center;
}
.singleArea {
    display: flex;
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 700;
    margin-bottom: 2%;
}
.singleArea .areaNumber {
    margin-right: 10px;
    font-size: 24px;
}
.singleArea .areaCalc {
    font-size: 16px;
}
.singleArea .areaData {
    width: 74%;
    display: flex;
    justify-content: flex-start;
}
.singleArea .deleteAreaBtn {
    width: 24%;
}
.singleArea .areaName {
    font-size: 24px;
}
/* Proff Popup Styles */
.proffBody {
    border: 1px solid black;
    border-radius: 8px;
    padding: 2%;
    background-color: #ffffff;
}
.proffTitle {
    margin-bottom: 0 !important;
}
.proffSelect {
    padding-left: 5px !important;
    color: #006bb7;
    width: 100%;
    box-shadow: none;
}
.proffSelectContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 2%;
}
.proffSelectContainer label {
    width: 47%;
    display: flex;
    flex-direction: column;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Ubuntu', sans-serif !important;
    margin-bottom: 2%;
}
.proffSelectContainer .concreteSelectWrapper {
    width: 100%;
}
.proffBody .concreteSelectWrapper {
    width: 90%;
}
.proffOptions {
    display: flex;
    flex-wrap: wrap;
}
.proffOptions label {
    width: 50%;
}
.concreteNameTitle {
    margin-top: 4% !important;
    margin-bottom: 0 !important;
}
.concreteNameInput {
    border: 1px solid black;
    border-radius: 8px !important;
}
.proffExitButtons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4%;
}
.proffCloseBtn, .proffSaveBtn {
    width: 49%;
}
.proffCloseBtn {
    background-color: #C7C7C7 !important;
    color: #ffffff;
}
.concreteNameInput {
    padding-left: 5px !important;
}
/* Truck Popup Styling */
.truckBody {
    border: 1px solid black;
    border-radius: 8px;
    padding: 0 5% 0 5%;
    background-color: #ffffff;
}
.truckBody img{
    display: inline-block;
}
.truckTitle {
    text-align: center;
    margin-top: 4% !important;
    margin-bottom: 2% !important;
}
.oftenUsedTitle {
    text-align: center;
    margin-top: 2% !important;
    margin-bottom: 0 !important;
}
.truckText {
    text-align: center;
    font-family: 'Ubuntu', sans-serif !important;
}
.truckText {
    margin-bottom: 2%;
}
.truckCloseBtn {
    width: 100%;
    margin-bottom: 4%;
    background-color: #C7C7C7 !important;
    color: #ffffff;
}
.truckUsedFor {
    text-align: center;
    border: 2px solid black;
    border-radius: 8px;
    margin-bottom: 2%;
}
.usedForItem {
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 700;
}
.pupmixerOptions {
    display: none;
}
#pumpHoseAmountInput {
    border: 1px solid black;
    border-radius: 25px;
    box-shadow: 7px 7px 12px -4px rgba(0,0,0,0.35);
    width: 100%;
    text-align: center;
}
/* Step 3 Styles */
.step3Body {
    padding: 0 2% 0 2%;
}
.otherInfoTitle {
    text-align: center;
    margin-top: 4% !important;
    margin-bottom: 2% !important;
}
#extraInfoInput {
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 500;
    resize: none;
    width: 74%;
    height: 60px !important;
    border-radius: 8px;
    border: 1px solid black;
    box-shadow: 7px 7px 12px -4px rgba(0,0,0,0.35);
}
.extraInfoBox {
    display: flex;
    justify-content: space-between;
}
.extraInfoBtn {
    width: 24%;
    font-family: "Times New Roman", serif;
    text-transform: lowercase;
    font-size: 34px;
    line-height: 34px;
    padding: 10px 0 10px 0;
}
.extraOfferOptions .concreteSingleOption {
    width: 100%;
    font-size: 20px;
}
.infoSelectButtons {
    display: flex;
    justify-content: space-between;
}
.infoSelectButtons button {
    width: 49%;
}
.fileUploadArea {
    margin-top: 4%;
    margin-bottom: 2%;
    border: dashed 1px black;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    padding: 2% 0 2% 0;
    font-family: 'Ubuntu', sans-serif !important;
    font-style: italic;
    background-color: #EBEBEB;
}
.selectFilesBtn {
    width: 25%;
    font-size: 12px;
    padding: 5px 15px;
    margin: 0 auto 0 auto;
    border: none !important;
}
.nameSection {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	margin-bottom: 1%;
}
.nameSection div {
    width: 49% !important;
}
.nameSection div input{
	width: 100% !important;
}
.privateInputs input, .companyInputs input {
    border: 1px solid black;
    border-radius: 8px !important;
    width: 100%;
    margin-bottom: 2% !important;
    padding-left: 5px !important;
}
.privateInputs, .companyInputs {
    margin-bottom: 4%;
    margin-top: 4%;
}
.responsibleBtn {
    margin-top: 4% !important;
    margin-bottom: 4% !important;
    text-align: center;
}
.orderTerms {
    display: none;
    width: 80%;
    margin: 0 auto 0 auto;
    margin-bottom: 20px;
}
.orderTerms .concreteSingleOption {
    width: 100%;
    font-style: italic !important;
    display: block;
    font-size: 20px;
}
.termsLink, .privacyLink {
    color: #006bb7;
}
.orderBottomText {
    margin-top: 4% !important;
    width: 80%;
    margin: 0 auto 0 auto;
    text-align: center;
    font-family: 'Ubuntu', sans-serif !important;
    font-style: italic;
    font-size: 20px !important;
}
/* Extra Info Styles */
.extraInfoBody {
    display: none;
    border: 1px solid black;
    border-radius: 8px;
    padding: 0 5% 0 5%;
    background-color: #ffffff;
}
.extraInfoTitle {
    margin-top: 4% !important;
    margin-bottom: 2% !important;
    text-align: center;
}
.extraCloseBtn {
    width: 100%;
    margin-bottom: 4%;
    color: #ffffff;
    background-color: #C7C7C7 !important;
}
.extraInfoText {
    font-family: 'Ubuntu', sans-serif !important;
    text-align: center;
    margin: 2% 0 2% 0 !important;
}

#customConcreteName{
    width: 95%;
}
.truckImage{
    text-align: center;
}
.concreteOrderOverview{ 
    width: 100%; margin: 0 auto; margin-top: 0px; margin-bottom: 40px; 
}

.fileuploader-input .fileuploader-input-button, .fileuploader-popup .fileuploader-popup-header .fileuploader-popup-button.button-success{
    background: #0e97ef;
    border: 1px solid #000;
    border-radius: 8px;
}

/* Step 3 Loader */
.save_order_loader{
	width: 100%;
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    height: 100%;
    background: rgb(255,255,255, 0.8);
	display: none;
}
.save_order_loader .inner{
	background: rgb(246, 246, 246);
	max-width: 800px;
	margin: 0 auto;
	margin-top: 150px;
	padding: 2%;
}
.save_order_loader .inner h2{
	color: #006bb7;
    text-transform: uppercase;
}
.save_order_loader .inner p{
	font-size: 24px;
    font-weight: bold;
}

/* Desktop styling */
@media only screen and (min-width: 1024px) {
    /* Concrete Step Container Styles */
    .step1Body, .step2Body, .step3Body, 
    .calculatorBody, .proffBody, .extraInfoBody, 
    .truckBody, .calculatorContainer, .truckContainer, 
    .proffContainer, .extraInfoContainer {
        max-width: 800px !important;
        width: auto !important;
        margin: 0 auto 0 auto;
    }
    .orderBottomText, .orderTerms, .navigationBtns {
        max-width: 800px !important;
    }
    .stepNames {
        width: 75%;
        margin: 0 auto 0 auto;
    }
    .timeSelectOptions {
        margin-top: 8%;
    }
    /* Step 1 Styles */
    #step1Sub1 {
        display: flex;
        flex-wrap: wrap;
    }
    .locationSelectOptions {
        width: 100%;
    }
    .timeSelectOptions {
        width: 90%;
        margin: 0 auto 0 auto;
    }
    .timeSelectOptions h2 {
        margin: 6.4% 0 2% 0 !important;
    }
	.stepper{
		width: 100%;
		margin: 0 auto 0 auto;
		max-width: 800px;
		margin-bottom: 20px;
	}
    /* Step 2 Styles */
    #step2Sub1 {
        padding-top: 4%;
        display: flex;
        flex-wrap: wrap;
    }
    .concreteAmountOptions h2 {
        margin-top: 0 !important;
    }
    .deliverySelector h2 {
        margin-top: 0 !important;
    }
    .concreteAmountOptions {
        width: 100%;
        margin-bottom: 15px;
    }
    .concreteTypeSelect select#customConcreteType {
        padding: 10px;
    }
    .vehicleSelectMenu select#vehicleTypeSelect {
        padding: 10px;
    }
    .concreteTypeOptions {
        width: 100%;
        padding-right: 1%;
    }
    .vehicleSelectOptions {
        width: 100%;
        padding-left: 1%;
    }
    .concreteVolumeEntry {
        width: 100%;
        margin: 0 auto 0 auto;
    }
    .concreteVolumeButtons {
        width: 100%;
        margin: 0 auto 0 auto;
    }
    .concreteVolumeMenu {
        width: 100%;
        margin: auto;
    }
    .volumeNameEntry {
        width: 100%;
        margin: auto;
    }
    .storedCalculatons {
        width: 100%;
        margin: auto;
    }
    .exitButtons {
        width: 100%;
        margin: 0 auto 4% auto;
    }
    .truckCloseBtn {
        width: 60%;
        margin: 0 auto 4% auto;
    }
    .concreteNameTitle{
        margin: 0 auto;
    }
    .truckUsedFor, .truckText {
        width: 80%;
        margin: 0 auto 2% auto;
    }
    .proffExitButtons {
        margin: 0 auto 4% auto;
    }
    .customNameArea {
        margin: 0 auto;
    }
    .proffOptions {
        margin: 0 auto;
    }
    .pupmixerOptions {
        margin-top: 4%;
    }
    .proffTitle {
        text-align: center;
    }
    .proffSelectContainer {
        margin: 0 auto;
    }
    .deliverySelector {
        width: 21%;
    }
    div#step2Sub1 {
        width: 80%;
        margin: 0 auto;
    }
    /* Step 3 Styles */
    .step3Container {
        display: flex;
        flex-wrap: wrap;
    }
    .otherInfoTitle {
        width: 100%;
    }
    .extraOfferOptions {
        width: 100%;
        margin-left: 0%;
        display: flex;
        align-content: center;
        flex-direction: column;
    }
    .concreteSingleOption {
        margin-top: 0;
    }
    .extraInputArea {
        width: 100%;
        margin-right: 0%;
    }
    .infoSelectButtons, .orderInputFeilds {
        width: 100%;
        margin: 0 auto 0 auto;
    }
    .responsibleTitle {
        text-align: center;
    }
    .userInformationInput {
        width: 100%;
    }
    .extraInfoBody img {
        margin:  0 auto 0 auto;
    }
    .extraCloseBtn {
        width: 60%;
        margin: 0 auto 4% auto;
    }
    .extraInfoText {
        width: 60%;
        margin: 2% auto 2% auto !important;
    }
    #pumpHoseAmountInput {
        margin-top: 4%;
    }
    #extraInfoInput {
        height: 104px !important;
    }
    .extraInfoBtn {
        height: max-content;
    }
    .extraInfoBox {
        align-items: center;
    }
    .orderBottomText, .orderTerms, .navigationBtns {
        width: 100%;
    }
	.orderTerms{
		margin-bottom: 20px;
	}
    .responsibleTitle {
        margin: 4% 0 2% 0 !important;
        text-align: center;
    }
    .pupmixerOptions .concreteSingleOption {
        width: 100%;
        display: block;
    }
    #companyName {
        width: 100% !important;
    }
}   

@media only screen and (max-width: 767px) {
    /* Concrete Step Container Styles */
    .topLogo .logo {
        width: 70%;
    }
    .blueBtn, .disabledBtn {
        font-size: 14px;
        padding: 15px 5px;
    }
    .concreteBody input::placeholder, .concreteNameInput::placeholder, .selectDefaultOption {
        font-size: 16px;
    }
    .responsibleTitle {
        text-align: center;
    }
    .concreteBody h2, 
    .proffBody h2, 
    .calculatorBody h2, 
    .truckBody h2 {
        font-size: 28px;
    }
    .concreteSingleOption {
        font-size: 18px;
    }
    .concreteBody input, 
    .concreteBody select, 
    .proffBody input, 
    .proffBody select, 
    .calculatorBody input, 
    .calculatorBody select {
        font-size: 16px;
    }
    /* Step 1 Styles */
    .step1Body {
        width: 100%;
        box-shadow: none;
    }
    /* Step 2 Styles */
    .step2Body {
        width: 100%;
        box-shadow: none;
    }
    .truckInfoBtn, .extraInfoBtn {
        font-size: 30px !important;
        padding: 5px 0 5px 0;
    }
    .concreteVolumeButtons button {
        padding: 15px 5px;
        font-size: 13px;
    }
    .volumeSelectSingle img {
        min-height: 100px;
    }
    .measurementMenu label {
        font-size: 12px !important;
    }
    .calculatorBody h3 , .calculatorBody h4 {
        font-size: 24px;
    }
    .calculatorBtn {
        padding: 5px 10px;
    }
    .proffBody .proffSelectContainer label {
        font-size: 16px;
    }
    .concreteNameTitle {
        font-size: 24px;
    }
    .proffOptions .concreteSingleOption {
        font-size: 16px;
    }
    /* Step 3 Styles */
    .step3Body {
        width: 100%;
        box-shadow: none;
    }
    .selectFilesBtn {
        width: 40%;
        font-size: 10px;
        padding: 5px 15px;
    }
    .orderBottomText, .orderTerms, .navigationBtns {
        width: 90%;
    }
    .navigationBtns {
        justify-content: space-between;
    }
    .bottomInfo {
        font-size: 16px !important;
    }
    .orderBottomText {
        font-size: 16px !important;
    }
	.stepper .singleStep div.label{
		font-size: 16px;
	}
}
@media only screen and (max-width: 600px) {
	.stepper .singleStep div.label{
		font-size: 12px;
	}
}

.google_map{
    position: relative;
}
.google_map .message{
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 25%;
    text-align: center;
    color: #000;
    text-transform: uppercase;
    width: 200px;
    margin-left: -100px;
}
.current_location:focus{
    outline: 0;
}
.proffContainer,
.calculatorContainer{
	margin-top: 10px;
}


/* HVA & HVORDAN */

@media (max-width:767px) {
/*===============*/
    .concreteBody h2{
        font-size: 22px; 
    }
    .home .large-12.columns{
        padding-left: 0;
        padding-right: 0;
    }
    .stepper {
        width: 85%;
    }
    .stepper .singleStep div.label {
        font-size: 11px;
        left: -30px;
        width: 110px;
    }
    .navigationBtns > button {
        padding: 15px 10px !important;
    }
    .resetBtn,
    .nextBtn, 
    .orderBtn,
    .backBtn,  
    .deleteBtn { 
        font-size: 15px;
    }
}
.concreteContainer #step1Sub1 input,
.concreteContainer #step2Sub1 input,
.concreteContainer #step2Sub1 select,
.proffSelectContainer select{
	border-color: #000 !important;
}
/* Validation */
.concreteContainer #step1Sub1 input.error,
.concreteContainer #step2Sub1 #customConcreteType.error,
.concreteContainer #step2Sub1 #concreteVolumeInput.error,
.concreteContainer #step2Sub1 #vehicleTypeSelect.error,
.concreteContainer #step2Sub1 input.error,
.proffSelectContainer select.error,
.concreteContainer .step3Body label.error,
.concreteContainer .step3Body label.error input[type="checkbox"]{
	border-color: red !important;
	color: red !important;
}
.concreteContainer .orderTerms p.error_message{
	display: none;
}
@media(max-width: 520px) { .timeSelectButtons { flex-wrap: wrap; } .timeSelectButtons button { flex: 1 1 30%; font-size: 11px !important; } }

/* Keep the project-address feedback aligned to the map, not the page edge. */
.concreteBody .bmax-location-status {
    display: block;
    width: 90%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 10px auto 18px !important;
    padding: 0 3px;
    font-size: 13px;
    line-height: 1.5;
    color: #596373;
    text-align: left;
    overflow-wrap: break-word;
    word-break: normal;
}
.concreteBody .bmax-location-status.is-selected { color: #1c5c84; font-weight: 600; }
@media (max-width: 600px) {
    .concreteBody .bmax-location-status { font-size: 12px; }
}


/* BMAx 2.0.15: time intervals are selects rather than free text. */
.timeSelectMenu .timeSelect{display:block;width:100%;min-width:165px;min-height:41px;border:1px solid #a7b5c5;border-radius:3px;background:#fff;color:#222;padding:5px 10px;font-size:15px;}
.timeSelectMenu .timeSelect.error,.timeSelectMenu .dateSelect.error{border:2px solid #c32e2e;}

/* BMAx 2.0.17: branded modal replacing native alert() in the order flow. */
.bmax-modal-overlay{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(13,38,59,.55);backdrop-filter:blur(2px);opacity:0;transition:opacity .18s ease;}
.bmax-modal-overlay.bmax-modal-show{opacity:1;}
.bmax-modal{font-family:'Ubuntu',sans-serif;background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.28);max-width:420px;width:100%;padding:30px 28px 26px;text-align:center;transform:translateY(14px) scale(.97);transition:transform .18s ease;}
.bmax-modal-overlay.bmax-modal-show .bmax-modal{transform:translateY(0) scale(1);}
.bmax-modal-icon{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.bmax-modal-icon svg{width:32px;height:32px;}
.bmax-modal-success .bmax-modal-icon{background:#e6f8ea;color:#07b92d;}
.bmax-modal-warning .bmax-modal-icon{background:#fdf3e2;color:#c77c11;}
.bmax-modal-error .bmax-modal-icon{background:#fdeae9;color:#af140f;}
.bmax-modal-title{margin:0 0 8px;font-size:21px;font-weight:700;color:#0d263b;line-height:1.3;}
.bmax-modal-message{margin:0 0 22px;font-size:15px;line-height:1.55;color:#4a5a68;}
.bmax-modal-btn{display:inline-block;min-width:170px;border:0;border-radius:8px;background:#006bb7;color:#fff;font-family:'Ubuntu',sans-serif;font-size:16px;font-weight:500;padding:12px 26px;cursor:pointer;transition:background .15s ease;}
.bmax-modal-btn:hover,.bmax-modal-btn:focus{background:#005a9a;color:#fff;outline:none;box-shadow:0 0 0 3px rgba(0,107,183,.25);}
@media (max-width:480px){.bmax-modal{padding:24px 18px 20px;}.bmax-modal-title{font-size:19px;}}