/* Colour Variables */
:root {
    --primary-site-colour: #1060b4;
    /*    calendar  */
    --calendar-header: #294739;
    --calendar-header-text: #fafafa;
    --calendar-text: #212121;
    --calendar-hover: #294739;
    --calendar-icon-hover: #90C856;
    --calendar-hover-text: #fafafa;
    --calendar-current-date: #294739;
    --calendar-selected-date: #294739;

    /*    colours   */
    --zip-white: #fafafa;
    --zip-black: #212121;
    --zip-green: #2E8540;
    --zip-dark-green: #285F33;
    --zip-red: #AD0000;
    --zip-light-red: #fbb;
    --zip-dark-red: #900000;

}

main input[type="text"].input-validation-error,
main input[type="password"].input-validation-error,
main select.input-validation-error,
main textarea.input-validation-error {
    border: solid 2px var(--zip-red);
}

.form-errors,
.sys_cms-form-validationsummary,
.validation-summary-errors {
    color: var(--zip-red) !important;
    border-color: var(--zip-red) !important;
    background-color: var(--zip-white) !important;
}

.zip-field-required-asterisk,
.errorText {
    color: var(--zip-red);
}

main .btn.delete,
main .btn.btn-delete,
.btn.delete,
form #deleteButton {
    background-color: var(--zip-red) !important;
    border-color: var(--zip-red) !important;
}

main .btn.delete:hover,
main .btn.btn-delete:hover,
.btn.delete:hover,
form #deleteButton:hover {
    background-color: var(--zip-dark-red) !important;
    border-color: var(--zip-dark-red) !important;
}

.input-validation-error,
.validation-summary-errors,
.field-validation-error,
.temp-message,
.deleteQuestion {
    border: 3px solid var(--zip-red);
}

.input-validation-error > ul > li,
.validation-summary-errors > ul > li,
.field-validation-error > ul > li,
.temp-message > ul > li,
.deleteQuestion > ul > li {
    color: var(--zip-red);
}

.success-message {
    border-color: var(--zip-green);
    color: var(--zip-green);
}

/*Calendar*/
.ui-datepicker .ui-datepicker-header {
    padding: .3em 0 !important;
}

.ui-datepicker-calendar thead tr th {
    background-color: var(--calendar-header) !important;
    color: var(--calendar-header-text) !important;
}

.ui-datepicker-calendar .ui-state-default,
.ui-datepicker-content .ui-state-default,
.ui-datepicker-header .ui-state-default {
    color: var(--calendar-text) !important;
}

.ui-datepicker-calendar .ui-state-highlight,
.ui-datepicker-content .ui-state-highlight,
.ui-datepicker-header .ui-state-highlight {
    color: var(--calendar-current-date) !important;
}

.ui-datepicker-calendar .ui-state-active,
.ui-datepicker-content .ui-state-active,
.ui-datepicker-header .ui-state-active {
    color: var(--calendar-selected-date) !important;
    border: 1px solid var(--calendar-selected-date) !important;
}

.ui-datepicker-calendar .ui-state-hover,
.ui-datepicker-content .ui-state-hover,
.ui-datepicker-header .ui-state-hover,
.ui-datepicker-calendar .ui-state-focus,
.ui-datepicker-content .ui-state-focus,
.ui-datepicker-header .ui-state-focus {
    color: var(--calendar-hover-text) !important;
    border: 1px solid var(--calendar-hover) !important;
    background: var(--calendar-hover) url(images/ui-bg_highlight-soft_25_0073ea_1x100.png) 50% 50% repeat-x !important;
}

a.ui-datepicker-next.ui-state-hover.ui-corner-all {
    background-color: var(--calendar-icon-hover) !important;
    border: none !important;
    right: 2px;
    top: 2px;
}

a.ui-datepicker-prev.ui-state-hover.ui-corner-all {
    background-color: var(--calendar-icon-hover) !important;
    border: none !important;
    left: 2px;
    top: 2px;
}

body div div table.ui-datepicker-calendar td.highlight a {
    background: #fff5cc;
    border: 1px solid #cc0;
}

/*End Calendar*/

main tr.statusCancelled,
main tr.statusCancelledByCustomer,
main tr.statusCancelledCustomerVacant,
main tr.statusCancelledRequestedRefund,
main tr.statusCancelledTreatment,
main tr.statusDeleted,
main tr.Deleted,
main tr.IsExpress,
table tr.taskExpired {
    background-color: var(--zip-light-red) !important;
    color: var(--zip-black) !important;
}

table tr.IsExpress > td {
    background-color: var(--zip-red) !important;
    color: var(--zip-white) !important;
}
main a.zip-checkout-btn {
	float: right;
	clear: both;
	font-size: 14px;
	border: solid 1px #222;
	border-radius: 2px;
	color: #222;
	margin: 0 0 2em;
	display: inline-block;
	position: relative;
	padding-left: 4em;
	padding-right: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
	line-height: 1em;
	text-decoration: none !important;
	font-weight: 600;
	background: linear-gradient(to right, #222 50%, #fff 50%);
	background: linear-gradient(to right, var(--primary-site-colour) 50%, #fff 50%);
	background-size: 300% 100%;
	background-position: right bottom;
	color: var(--primary-site-colour);
	border-color: var(--primary-site-colour);
}

main a.zip-checkout-btn .zip-checkout-btn-count {
    background-color: var(--primary-site-colour) !important;
    color: var(--zip-white) !important;
}

main a.zip-checkout-btn {
    color: var(--primary-site-colour) !important;
    border-color: var(--primary-site-colour) !important;
}

main a.zip-checkout-btn:hover {
    color: var(--zip-white) !important;
    background-position: left bottom;
    transition: 0.5s ease;
}


.ui-tabs-nav .ui-state-default a, 
.ui-tabs-nav .ui-state-default a:link, 
.ui-tabs-nav .ui-state-default a:visited {
    color: var(--zip-black) !important;
}