/*
 * Forms and form fields
 */

label {cursor: pointer}

input,
button,
select {vertical-align: middle; outline: none}
textarea {vertical-align: top; outline: none; border:1px solid #dbdbdb;border-radius:4px;}

button,
select,
label[for],
input[type="reset"],
input[type="radio"],
input[type="button"],
input[type="submit"],
input[type="checkbox"] {cursor: pointer}

button[disabled],
select[disabled],
label[disabled][for],
input[disabled][type="reset"],
input[disabled][type="radio"],
input[disabled][type="button"],
input[disabled][type="submit"],
input[disabled][type="checkbox"] {cursor: default}

/* Input style */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="password"],
input[type="tel"],
.textarea-wrapper {width: 100%; min-height: 46px; padding: 0 30px 0 32px; border: 1px solid #dbdbdb; border-radius: 4px; background: #fff; color: #797979; font-size: 13px; vertical-align: middle; outline: none}
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="password"],
input[type="tel"] {line-height: 46px}
textarea {padding: 20px 30px 0 32px;width: 97%;}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus {border-color: #323433; color: #323433}

input[type="file"] + span {color: #D97D34; transition: color 0.25s ease}
input[type="file"] + span:before {margin-right: 5px; color: #212121; font-size: 12px; transition: color 0.25s ease}
input[type="file"] + span:hover {color: #212121}
input[type="file"] + span:hover:before {color: #ccb423}

input[type="search"] {box-sizing: border-box}

input:required {
    box-shadow: none;
}
input:invalid {
    box-shadow: none;
}

input.error,
input.error:focus,
.textarea-wrapper.error,
.fake-select.error,
.placeholder.error {border-color: #ad3843; color: #ad3843}

.retailer-postcode {width: 235px !important}


/*
 * Button style
 */
.button, input[type="submit"]{overflow: hidden; display: inline-block; min-width: 165px; padding: 0 10px; border: none; border-radius: 4px; background: #5e6a71; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: 46px; text-align: center; text-transform: uppercase; vertical-align: middle; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; white-space: nowrap}
.button.block {display: block; width: 100%}
@media (max-width: 719px) {
    .button {padding: 0; font-size: 12px}
}
.button.short {min-width: 85px}
.button.refine {min-width: 105px; border: 1px solid transparent; line-height: 44px}
.button.refine:hover {border: 1px solid #494949}
@media (min-width: 720px) and (max-width: 768px) {
    .button.refine {min-width: 85px}
}

.button.active,
.desktop .button:hover {background: #e31f26; color: #fff; text-decoration: none !important}

.button.secondary {background: #a3a3a3}
.button.secondary.active,
.desktop .button.secondary:hover {background: #323433}

.button.tertiary {padding: 0 29px; background: #5e6a71}
.desktop .button.tertiary:hover {background: ##e31f26}

.button:before,
.button>span:before {text-indent: 0; text-shadow: none}
.button:before {float: right; margin-left: 25px}
.button>span:before {float: left; margin-right: 25px}

.button.text-hide {width: 40px; padding-left: 0; padding-right: 0; text-indent: -999em}


.button.text-hide {padding-left: 0; padding-right: 0; text-indent: -999em}
.button.text-hide[class*="icon-"]:before {float: right; width: 100%; margin: auto; line-height: 46px; text-align: center}

@media (max-width: 719px) {
    .button {line-height: 43px}
}


/*
 * Checkbox style
 */
input[type="checkbox"]+span {overflow: hidden; display: inline-block; width: 20px; height: 20px; border: 1px solid #dcdcdc; background: #fff; text-indent: -99em; vertical-align: middle; white-space: nowrap; cursor: pointer}
input[type="checkbox"]+span:before {float: left; width: 100%; height: 100%; text-indent: 0; color: transparent; font-size: 12px; text-align: center; line-height: 18px; transition: color 0.25s ease}
input[type="checkbox"]:checked+span:before {color: #d97d34}


/*
 * Radio style
 */
input[type="radio"] {position: absolute; visibility: hidden}
input[type="radio"]+span {position: relative; overflow: hidden; display: inline-block; width: 20px; height: 20px; border: 1px solid #dcdcdc; border-radius: 20px; background: #fff; text-indent: -99em; vertical-align: middle; white-space: nowrap; cursor: pointer}
input[type="radio"]+span:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 10px; height: 10px; margin: auto; border-radius: 10px; background: transparent; transition: background 0.25s ease}
input[type="radio"]:checked+span:before {background: #d97d34}


/*
 * Select box
 */
.fake-select {overflow: hidden; position: relative; display: block; width: 100%; padding: 0 32px 0 30px; border: 1px solid #dbdbdb; border-radius: 4px; background: #fff; color: #797979; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; text-transform: uppercase; outline: none; white-space: nowrap; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none}
.fake-select:before {float: right; margin-left: 10px; color: #dcdcdc; font-size: 5px; line-height: 44px}
.fake-select.secondary {border-color: #494949; background: #323433; color: #fff; text-transform: uppercase}
.fake-select.secondary:before {color: #fff}
.fake-select.secondary.region {color: #797979}

.fake-select .value {overflow: hidden; display: block; line-height: 44px}
.fake-select select {top: 0; left: 0; width: 100%; height: 44px}
.desktop:not(.webkit) .fake-select select {width: 0; height: 0}

.fake-select.dropdown-visible {border-bottom: 1px solid transparent; border-color: #323433; border-radius: 4px 4px 0 0; color: #323433}
.fake-select.dropdown-visible:before {color: #393b3a}
.fake-select.secondary.dropdown-visible {border-color: #dbdbdb; color: #fff}
.fake-select.secondary.dropdown-visible:before {color: #fff}

.fake-dropdown {position: absolute; overflow: hidden}
.fake-dropdown .scrollable {max-height: 176px}
.fake-dropdown a {overflow: hidden; display: block; text-decoration: none; white-space: nowrap}

.fake-dropdown {z-index: 12; margin: -2px 1px 0 0; background: #fff; border: 1px solid #323433; border-top: none; border-radius: 0 0 4px 4px; font-size: 14px;}
.fake-dropdown a {padding: 11px 30px 14px 32px; color: #797979; font-size: 13px; transition: none}
.fake-dropdown a.selected,
.desktop .fake-dropdown a:hover {background: #f1f1f1; color: #323433}

.fake-select.open-top {border-top: 1px solid transparent; border-bottom: 1px solid #323433; border-radius: 0 0 4px 4px}
.fake-dropdown.open-top {border-top: 1px solid #323433; border-bottom: 1px solid transparent; border-radius: 4px 4px 0 0}
.fake-select.open-top.region {border-top: 1px solid #363636}
.fake-dropdown.open-top.region {margin-top: 1px; border-bottom: 0}

.fake-dropdown.secondary {border-color: #dbdbdb; background: #363636; color: #797979}
.fake-dropdown.secondary .selected,
.fake-dropdown.secondary a:hover {background: #2f2f2f; color: #797979}


/*
 * Placeholder
 */
.placeholder-container {position: relative}
.placeholder {overflow: hidden; position: absolute; top: 0; left: 0; padding: 9px 30px 0 32px; color: #797979; font-size: 13px; text-align: left; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap}
.webform-component-checkboxes .placeholder{
	position: initial;
	padding: 0px 0px 0px 10px;
}
.webform-component-checkboxes input[type="checkbox"]{
	float: left;
    	margin: 4px 0px 0px 0px;
}
.webform-component-checkboxes label{
	display: none;
}
.webform-component-checkboxes .form-checkboxes label{
        display: block;
}