.page main {
    background-color:#efefef;
    }

.page main > div {
    background-color:#fff;
    padding-top:40px;
    padding-bottom:40px;
    }
.container {
    margin:20px !important;
    padding:0;
    max-width: calc(100% - 40px) !important;
}
.container > legend,
.photo .control-label{
    background-color:#efefef;
    font-size:16pt;
    font-weight:600;
    padding:10px 20px;
}
joomla-tab[view=tabs] > div[role=tablist] {
    margin:20px 0 0 0 !important;
    padding:0!important;
    column-gap:unset!important;
}

joomla-tab[view=tabs] > div[role=tablist] > button{
	padding: 10px 20px 15px 20px;
	font-size: 20px;
}
joomla-tab[view=tabs] > div[role=tablist] > button[aria-selected=true] {
    background-color: transparent;
	background-image: none;
	box-shadow: none;
	border:3pt solid #efefef;
}
joomla-tab button[aria-expanded=true]:after,
joomla-tab button[aria-selected=true]:after {
    background-color:#333;
}
.mb-4 {
    padding:30px!important;
}
.mb-4,
.mb-3 {
    background-color:#efefef;
}
.mb-3,
.wrapper {
    padding:20px!important;
}
joomla-tab-element,
.wrapper,
.photo .controls {
    border:3pt solid #efefef!important;
}
.photo .controls {
    padding:10px;
}
.photo .controls div {
    margin: 0 auto !important;
    display:flex;
    align-items:center;
}
.wrapper.customer-details .control-group {
    display:grid;
    grid-template-columns:75px auto;
    grid-column-gap:15px;
    margin:0!important;
}
.wrapper .photo .control-group {
    display:grid;
    grid-template-columns:100%;
    grid-column-gap:15px;
    margin:0!important;
}
.wrapper .photo .control-group .control-label {
    text-align:center;
    justify-content:center!important;
}
.control-label {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:0!important;
    line-height: 1.2;
}
label {
    text-align:right;
}
input[type="text"],
input[type="email"],
textarea {
    min-height: 50px;
	border: 1pt solid #d3d3d3;
	padding: 5px 10px;
	width: 100%;
}
input {
    font-family: 'Barlow Semi Condensed';
}
    
    
.btn-toolbar {
    display:grid;
    grid-template-columns:calc(100% - 663px) 272px 330px;
    background-color:#efefef;
    padding:15px;
    gap:30px;
    
}
.filter-search-bar .input-group {
    width:100%!important;
}
.page.orders .ordering-select {
    display:flex;
    gap:20px;
    width: max-content;
}
.page.orders .filter-search-actions {
    width: max-content;
}
.wrapper.order-details,
.wrapper.kit-details {
    display: grid;
	grid-template-columns: calc(33.333% - 20px) calc(33.333% - 20px) calc(33.333% - 20px);
	grid-column-gap:30px;
}
.wrapper.order-details .control-group,
.wrapper.kit-details .control-group {
    display: grid;
	grid-template-columns: max-content auto;
	align-items: center;
	grid-column-gap: 20px;
	margin:0;
}

.wrapper.vehicle-details {
    display: grid;
	grid-template-columns: calc(33.333% - 20px) calc(33.333% - 20px) calc(33.333% - 20px);
	grid-column-gap:30px;
	grid-row-gap: 20px;
}

.wrapper.vehicle-details .control-group {
    display: grid;
	grid-template-columns: 161px auto;
	align-items: center;
	grid-column-gap: 10px;
	margin:0;
}
.order-edit .mt-3 {
    margin-left:20px;
    margin-right:20px;
    margin-bottom:20px;
}
.js-stools-btn-clear {
    border: 1pt solid #000;
	color: #000!important;
	background-color: #fff!important;
}
.ordering-select .form-select {
    height:100%!important;
}

.page.kits .ordering-select {
    display:flex!important;
}

.page.orders.filters-shown .js-stools-container-filters {
    display:grid;
    grid-template-columns:max-content max-content max-content;
    grid-column-gap:15px;
    background-color:#efefef;
    padding:15px;
    margin-top:15px;
}
.page.orders .js-stools-container-filters {
    display:none;
}
.page.orders .js-stools-container-filters .js-stools-field-filter {
    display:grid;
    grid-template-columns:max-content max-content;
    grid-column-gap:15px;
}

.page.orders .js-stools-container-filters .js-stools-field-filter > span {
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.js-stools-container-filters .chosen-container a,
select {
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	list-style: none;
	box-sizing: border-box;
	margin: 0;
	border-radius: 0;
	font: inherit;
	text-transform: none;
	max-width: 100%;
	width: 100%;
	border: 0 none;
	padding: 0 10px;
	background: #fff;
	color: #777;
	transition: .2s ease-in-out;
	transition-property: color,background-color,border-color,box-shadow;
	height: 44px;
	vertical-align: middle;
	display: inline-block;
	border-bottom: 1px solid #efefef;
	-webkit-appearance: none;
	padding-right: 20px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23777%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23777%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
	background-repeat: no-repeat;
	background-position: 100% 50%;
    
}

.page.orders .js-stools-container-filters .chosen-container a span {
    display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 18px;
	height: 100%;
}

.page.orders .js-stools-container-filters .chosen-container a b {
    display:none;
}
.page.orders .table-responsive {
    margin-top:30px;
}
.chosen-container .chosen-drop {
    font-size:18px;
    border-width:0 1pt 1pt 1pt;
    border-color:#efefef;
    border-type:solid;
}

.chosen-container .chosen-drop li {
    margin-bottom:5px;
}
.page.login #orderList {
    width: 100%;
	margin-top: 15px;
}
.page.login #orderList thead {
    background-color:#efefef;
}
.page.login main > div {
    max-width:600px;
}
.page.login fieldset {
    border: none;
	padding: 0;
}
.page.login fieldset .control-group {
    display:flex;
    gap:15px;
}
.page.login fieldset .control-group input {
    min-height:35px;
    border:1pt solid #efefef;
}
.page.login button {
    height: 38px;
	background-color: #333;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 5px;
}
.page.login .password-group > div {
    display:flex;
    gap:10px;
}

.page.login .com-users-login__options {
    display:grid;
    grid-template-columns:33.333% 33.333% 33.333% ;
}
.page.login .com-users-login__options a {
    display:grid;
    align-items:center;
    justify-content:center;
}
.com-users-logout .com-users-logout__submit {
    margin:0!important;
}
.com-users-logout .com-users-logout__submit .controls {
    display:flex;
    justify-content:center;
}

.wrapper.customer-details,
.wrapper.customer-details > .address-accordion,
.wrapper.photos,
.wrapper.before-photos,
.wrapper.after-photos {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

/* 3 columns for main customer and address-accordion */
.wrapper.customer-details,
.wrapper.customer-details .address-accordion {
    grid-template-columns: calc(33.333% - 13.333px) calc(33.333% - 13.333px) calc(33.333% - 13.333px);
}

/* Main customer wrapper grid areas */
.wrapper.customer-details {
    grid-template-areas:
        "customer_name customer_email customer_phone"
        "customer_address customer_address customer_manual_address"
        "address_accordion address_accordion address_accordion"
        "customer_notes customer_notes customer_notes";
}

/* Accordion address area grid */
.wrapper.customer-details > .address-accordion {
    grid-template-areas:
        "customer_street_address customer_suburb customer_city"
        "customer_state customer_post_code customer_country";
}

/* Grid area assignments */
.customer-name           { grid-area: customer_name; }
.customer-email          { grid-area: customer_email; }
.customer-phone          { grid-area: customer_phone; }
.customer-address        { grid-area: customer_address; }
.customer-manual-address { grid-area: customer_manual_address; }
.address-accordion       { grid-area: address_accordion; }
.customer-notes          { grid-area: customer_notes; }

/* Accordion fields */
.customer-street-address { grid-area: customer_street_address; }
.customer-suburb         { grid-area: customer_suburb; }
.customer-city           { grid-area: customer_city; }
.customer-state          { grid-area: customer_state; }
.customer-post-code      { grid-area: customer_post_code; }
.customer-country        { grid-area: customer_country; }


.wrapper.photos,
.wrapper.before-photos,
.wrapper.after-photos {
    grid-template-columns:50% 50% ;
}
.wrapper.corner-weights {
	display: grid;
	grid-template-columns: 30% 40% 30%;
	grid-template-areas:
		'. cGVM .'
		'cFPS . cFDS'
		'cRPS . cRDS'
		'. cBW .';
	grid-row-gap: 70px;
	background-image: url(/images/gvm/gvm-vehicle-corners.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 160px;
}

.corner-weights .tare-weight {grid-area:cGVM;}
.corner-weights .front-ps {grid-area:cFPS;}
.corner-weights .front-ds {grid-area:cFDS;}
.corner-weights .rear-ps {grid-area:cRPS;}
.corner-weights .rear-ds {grid-area:cRDS;}
.corner-weights .ball-weight {grid-area:cBW;}

.wrapper.before.vehicle-heights,
.wrapper.after.vehicle-heights {
    display: grid;
	grid-template-columns: 50% 50%;
	grid-template-areas:
		'Arrow Arrow'
		'LHF RHF'
		'LHR RHR';
}
.wrapper.vehicle-heights .measurement-arrow {grid-area:Arrow;
    width:30px;
}
.wrapper.vehicle-heights .left-front {grid-area:LHF;}
.wrapper.vehicle-heights .right-front {grid-area:RHF;}
.wrapper.vehicle-heights .left-rear {grid-area:LHR;}
.wrapper.vehicle-heights .right-rear {grid-area:RHR;}

.wrapper.vehicle-heights .arrow-wrapper {
    display:flex;
    justify-content:center;
    align-items:flex-end;
}

.wrapper.vehicle-heights > div {
    padding:30px;
}
.wrapper.vehicle-heights .left-front,
.wrapper.vehicle-heights .left-rear {
    border-right:3pt solid #000;
}
.wrapper.vehicle-heights .left-front,
.wrapper.vehicle-heights .right-front {
    border-bottom:3pt solid #000;
}

.wrapper.vehicle-heights .control-group {
	display: grid;
	grid-template-columns: 100%;
	grid-template-areas:
		'cLbl'
		'cCtr';
	grid-row-gap: 10px;
	margin-bottom: 0 !important;
	justify-content:center;
}


.wrapper.kit-items .control-label {
    display:none!important;
}
.wrapper.kit-items tr {
    display:grid;
grid-template-columns: minmax( calc( 15.3374233128834356% - 11.25px), 188.75px ) minmax( calc( 18.4049079754601227% - 11.25px), 228.75px ) minmax( calc( 12.5766871165644172% - 11.25px), 152.75px ) minmax( calc( 13.803680981595092% - 11.25px), 168.75px ) minmax( calc( 4.6012269938650307% - 11.25px), 48.75px ) minmax( calc( 11.5030674846625767% - 11.25px), 138.75px ) minmax( calc( 4.6012269938650307% - 11.25px), 48.75px ) minmax( calc( 8.4355828220858896% - 11.25px), 98.75px ) minmax( calc( 10.7361963190184049% - 11.25px), 128.75px );
    grid-column-gap:10px;
}
.wrapper.kit-items th,
.wrapper.kit-items td {
    width:unset!important;
    padding:0!important;
}


.wrapper.kit-items thead {
    background-color:#efefef;
}