/* quote page */

section.quotepage {
    background-color: #f9f5ea;
    padding-block: 50px;
}

.quote-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-inline: auto;
    max-width: 1200px;
    padding-inline: 20px;
	text-align: center;
}

@media (min-width:768px) {
    .quote-wrapper {
        flex-direction: row;
    }
}

.quote-menu {
    flex: auto;
}

.quote-form {
    flex: auto;
    margin: 30px 0;
}

.quote-wrapper form.quote .line input[type="button"]{
	display:block;
	margin:30px auto 90px auto;
	font-family:"bodoni-urw";
	font-size:20px;
	line-height:26px;
	border:1px solid #008f4c;
	background-color:transparent;
	color:#008f4c;
	padding:16px 50px;
	text-align:center;
	text-decoration:none;
	cursor:pointer;
}


@media (min-width:1098px) {
    .quote-form {
        margin-right: 300px;
    }
}

.quote-form form {
    width: 100%;
}

.to-be-closed {
    display: grid;
    gap: 20px 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width:1098px) {
    .to-be-closed {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.quote-menu .step h3 {
	font-size:32px;
	font-family: "bodoni-urw";
	font-weight:normal;
	color:#008f4c;
	padding:0;
	margin:0;
}

.quote-menu .step h3 + p {
    margin-top: 5px;
}

.quote-menu .step h3:hover {
	text-decoration:underline;
	cursor:pointer;
	color:#6a5f14;
}

.quote-menu .step .option {
    display: flex;
    flex-direction: column;
	font-family: "bodoni-urw";
	gap: 10px;
}

.quote-menu .step .option h4 {
	color: #000;
	font-size: 20px;
	font-weight:normal;
	line-height: 1.2;
	margin: 0;
}

.quote-menu .step .option p {
	font-family: "proxima-nova-extra-condensed";
	letter-spacing:1px;
	margin-bottom: auto;
	margin-top: 0;
}

.quote-menu .step .option img{
	width:100%;
	height:auto;
	object-fit: cover;
	aspect-ratio: 16/9;
}

@media (min-width:1098px) {
    .quote-menu .step .option img{
    	aspect-ratio: 1;
    }
}

.quote-menu a.close-device{
	border-bottom: 1px solid #d9d8d2;
	color:#008f4c;
	display:block;
	height: 0.5em;
	margin-block: 30px;
	overflow: visible;
	text-decoration:none;
}

.quote-menu a.close-device i{
	padding: 0;
	background-color: #f9f5ea;
	width: 20px;
	text-align: center;
	margin: 0 auto;
	color:#000;
	font-size:16px;
}

.quote-menu a.close-device.closed .open{
	display:block;
	text-decoration:none;
}

.quote-menu a.close-device.closed .closed{
	display:none;
}

.quote-menu a.close-device .open{
	display:none;
}

.quote-menu a.close-device .closed{
	display:block;
}

.my-order {
    align-self: start;
 	border:1px solid #d9d8d2;
	border-radius:8px;
	padding: 20px;
	position: sticky;
	top: 160px;
	width: 100%;
}

@media (min-width:768px) {
    .my-order {
        min-width: 300px;
        width: auto;
    }
}

@media (min-width:1098px) {
    .my-order {
    	top: 150px;
    }
}




.my-order h2{
	font-family: "proxima-nova-extra-condensed";
	font-size:30px;
	font-weight:normal;
	letter-spacing:2px;
	color:#000;
	margin:0;
	padding:0;
	text-transform:uppercase;
}
.my-order h3{
	font-family: "proxima-nova-extra-condensed";
	font-size:20px;
	font-weight:normal;
	letter-spacing:2px;
	color:#008f4c;
	margin: 12px 0 0;
	padding: 15px 0 0;
	border-top:1px solid #000;
	text-transform:uppercase;
}
.my-order .my-order-step{
	display:table;
	width:100%;
}
.my-order .item{
	display:table-row;
}
.my-order .item label,
.my-order .item a{
	display:table-cell;
	color:#000;
	font-size:16px;
	font-family: "bodoni-urw";
	padding-bottom:10px;
	padding-top:10px;
	border-bottom:1px solid #d9d8d2;
}
.my-order .item:last-child label,
.my-order .item:last-child a{
	padding-bottom:0;
	border-bottom:none;
}
.my-order .item label{
	text-align:left;
	padding-right:5%;
}
.my-order .item a{
	text-align:right;
}

.quote-menu .quote-content{
	color:#000;
	font-family: "proxima-nova-extra-condensed";
	font-size:22px;
	letter-spacing:2px;
	text-align:center;
}

.quote-menu .step .option a{
	display:none;
	font-family:"bodoni-urw";
	font-size:20px;
	line-height:26px;
	border:1px solid #008f4c;
	color:#008f4c;
	padding:12px 0;
	text-align:center;
	text-decoration:none;
	width:100%;
}

.quote-menu .step .option a.selected{
	color:#fff;
	background-color:#008f4c;
}

.quote-menu .step .option[data-selected="selected"][data-available="available"] a.selected{
	display:block;
}
.quote-menu .step .option[data-selected=""][data-available="available"] a.available{
	display:block;
}
.quote-menu .step .option[data-selected="selected"][data-available="not-available"] a.not-available,
.quote-menu .step .option[data-selected=""][data-available="not-available"] a.not-available{
	display:block;
	font-size:15px;
	border-color:#f9f5ea;
}
.quote-menu .step .option[data-available="not-available"]{
	display:none;
}

.quote-wrapper.quote-form{
	background-color:#f1eee0;
}

.quote-wrapper form.quote label{
	display:block;
	font-size:20px;
	transition:0.25s;
	font-family: "bodoni-urw";
}
.quote-wrapper form.quote textarea{
	resize:none;
}
.quote-wrapper form.quote textarea,
.quote-wrapper form.quote input:not([type="submit"]){
	display:block;
	border-top:none;
	border-right:none;
	border-bottom:1px solid #000;/*@todo toby confirm colour and thickness*/
	border-left:none;
	font-size: 1rem;
	transition:0.25s;
	box-sizing: border-box;
	min-height:15px;
	background-color:transparent;
	outline: none;
}

.quote-wrapper form.quote .EMLabelField-filled label{
	font-size:1rem;
}

.quote-wrapper form.quote .EMLabelField-filled input:not([type="submit"]){
	font-family: "bodoni-urw";
	font-size:21px;
	height:27px;
}

.quote-wrapper form.quote .EMLabelField-filled textarea{
	font-family: "bodoni-urw";
	font-size:21px;
	height:200px;
}

.quote-wrapper [data-validation]{
	color:#b52025;
	display:block;
	font-family: "bodoni-urw";
	padding-bottom: 10px;
}

.quote-wrapper [data-validation]:empty{
	display:none;
}

.quote-wrapper form.quote .line{
	overflow:hidden;
}
.quote-wrapper form.quote .line .EMLabelField{
	width:47.25%;
	float:left;
	margin-bottom:45px;
}
.quote-wrapper form.quote .line .EMLabelField.left{
	margin-right:5%;
}
.quote-wrapper form.quote .line .EMLabelField textarea,
.quote-wrapper form.quote .line .EMLabelField label,
.quote-wrapper form.quote .line .EMLabelField input{
	width:100%;
}
.quote-wrapper form.quote .line .EMLabelField.full{
	width:100%;
}

.ui-datepicker.ui-widget{
	font-family:"bodoni-urw";
}
.ui-datepicker .ui-datepicker-title{
	font-family:"bodoni-urw";
	font-weight:normal;
}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable a{
	background-color:#fdfcf8;
}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a{
	background-color:#028f4c;
}
.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-widget-header{
	background-color:#f9f5ea;
}
.ui-datepicker a.ui-state-highlight,
.ui-datepicker .ui-widget-content a.ui-state-highlight,
.ui-datepicker .ui-widget-header a.ui-state-highlight{
	border:1px solid #c5c5c5;
	color:#454545;
}



@media (max-width:768px) {
    
    .quote-wrapper {
        padding-top: 0;
    }
    
    .quote-wrapper .quote-menu{
    	float:none;
    	width:100%;
    	margin:0;
    }
    
    .quote-wrapper form.quote .line .EMLabelField,
    .quote-wrapper form.quote .line .EMLabelField.left{
    	float:none;
    	width:100%;
    	margin:20px 0 0 0;
    }
    
    .quote-wrapper .quote-separators{
    	display:block;
    	border-top: 1px solid #d9d8d2;
    	margin-bottom:50px;
    }
    .quote-menu .step .option[data-available="not-available"]{
    	display:none;
    }

}