/* Minification failed. Returning unminified contents.
(3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(78,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(105,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(110,17): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(165,39): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(189,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-lighter'
(190,24): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-lighter'
(191,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(209,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(210,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-darkest'
(211,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-darkest'
(219,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-darkest'
(302,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(321,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-lighter'
(338,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(369,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(375,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(380,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-lightest'
(393,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(436,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-lighter'
(437,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(445,35): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(503,24): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(504,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(505,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(512,24): run-time error CSS1039: Token not allowed after unary operator: '-color-green'
(513,28): run-time error CSS1039: Token not allowed after unary operator: '-color-green'
(518,24): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(519,28): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(524,24): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(525,28): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(588,28): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(589,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(596,17): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(608,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(615,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(616,28): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(627,17): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(632,17): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(650,38): run-time error CSS1039: Token not allowed after unary operator: '-header-right-width'
(650,66): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-width'
(650,93): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-width'
(669,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(674,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(679,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(716,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(717,35): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(724,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(730,17): run-time error CSS1039: Token not allowed after unary operator: '-color-orange'
(749,28): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(750,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(777,17): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-items-width'
(780,38): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-mid'
(790,48): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(794,37): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-width'
(801,28): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(802,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(810,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(812,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(819,33): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-item-image-width'
(830,21): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-item-image-width'
(880,17): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(885,17): run-time error CSS1039: Token not allowed after unary operator: '-color-green'
(894,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(903,28): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(904,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(910,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(918,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(919,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(925,17): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(931,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(937,28): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(938,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(956,33): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-item-image-width'
(971,17): run-time error CSS1039: Token not allowed after unary operator: '-cart-item-image-width'
(999,33): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(1000,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(1034,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-mid'
(1039,17): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(1048,34): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(1049,35): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(1066,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-mid'
(1067,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1075,17): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1084,28): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1085,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(1098,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1106,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1112,17): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(1122,35): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(1134,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-mid'
(1135,35): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(1140,17): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(1168,28): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1169,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(1181,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1206,17): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(1215,28): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(1216,28): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1217,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(1227,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1234,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-lighter'
(1235,24): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-lighter'
(1236,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(1272,39): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(1286,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1287,39): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(1292,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1297,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1303,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(1308,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1330,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1331,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1339,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(1346,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1351,17): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(1360,28): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1361,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(1398,28): run-time error CSS1039: Token not allowed after unary operator: '-color-green'
(1399,24): run-time error CSS1039: Token not allowed after unary operator: '-color-green'
(1400,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1405,28): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(1406,24): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(1407,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1412,28): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(1413,24): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(1414,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1421,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1423,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1455,28): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1459,38): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(1472,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1477,17): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1482,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1487,17): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1492,28): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1497,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1503,28): run-time error CSS1039: Token not allowed after unary operator: '-color-blue'
(1509,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1515,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1528,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-lightest'
(1530,39): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(1537,28): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1542,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(1571,28): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1576,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-lightest'
(1597,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1598,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1599,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1613,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1620,17): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1629,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1630,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1641,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1646,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1653,17): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(1663,28): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(1664,28): run-time error CSS1039: Token not allowed after unary operator: '-color-pink'
(1673,28): run-time error CSS1039: Token not allowed after unary operator: '-color-red'
(1674,28): run-time error CSS1039: Token not allowed after unary operator: '-color-pink'
(1696,17): run-time error CSS1039: Token not allowed after unary operator: '-color-red-dark'
(1728,28): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(1729,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1777,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1794,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(1801,39): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(1802,32): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1824,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1853,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1859,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1878,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1894,17): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1901,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1908,28): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(1909,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(1924,28): run-time error CSS1039: Token not allowed after unary operator: '-color-green'
(1925,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1940,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-dark'
(1941,17): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(2033,41): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-width'
(2046,41): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-width'
(2054,41): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-width'
(2113,41): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-width'
(2230,32): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(2242,32): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(2263,21): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(2268,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2273,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2279,21): run-time error CSS1039: Token not allowed after unary operator: '-color-yellow'
(2296,32): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2329,21): run-time error CSS1039: Token not allowed after unary operator: '-color-black'
(2342,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(2364,32): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-items-width'
(2364,67): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-width'
(2401,43): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(2406,43): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-light'
(2414,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2421,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(2458,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(2464,32): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2469,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey-lighter'
(2482,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey'
(2525,47): run-time error CSS1039: Token not allowed after unary operator: '-header-right-width'
(2525,75): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-width'
(2525,102): run-time error CSS1039: Token not allowed after unary operator: '-cart-summary-width'
(2590,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2608,21): run-time error CSS1039: Token not allowed after unary operator: '-header-right-width'
 */
:root
{
    --color-black: #414042;
    --color-blue: #2295da;
    --color-green: #85c041;
    --color-grey: #d7d7d9;
    --color-grey-mid: #888888;
    --color-grey-dark: #565759;
    --color-grey-darkest: #4F4F4F;
    --color-grey-light: #c7c8ca;
    --color-grey-lighter: #f3f3f4;
    --color-grey-lightest: #f0eeee;
    --color-orange: #ed564d;
    --color-pink: #ffeeee;
    --color-red: #D7153A;
    --color-red-dark: #ae1f23;
    --color-white: #ffffff;
    --color-yellow: #ffc20e;
    --cart-summary-width: 125px;
    --cart-summary-items-width: 400px;
    --cart-summary-item-image-width: 100px;
    --cart-item-image-width: 150px;
    --header-right-width: 100%;
}

.black
{
    color: #414042;
}

.blue
{
    color: #2295da;
}

.green
{
    color: #85c041;
}

.grey
{
    color: #d7d7d9;
}

.grey-dark
{
    color: #565759;
}

.grey-lightest
{
    color: #f0eeee;
}

.white
{
    color: #ffffff;
}

.yellow
{
    color: #ffc20e;
}

/*Default*/
*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body
{
    font-family: Arial, sans-serif;
    background-color: var(--color-white);
    color: var(--color-black);
    margin: 0;
    padding: 0;
    font-size: 13px;
    -moz-appearance: none;
    -webkit-appearance: none;
}

h1
{
    margin-top: 35px;
}

h2
{
    margin-top: 35px;
}

h1 .gst,
h2 .gst
{
    font-size: 14px;
    font-weight: normal;
}

a
{
    color: var(--color-black);
}

a:hover
{
    color: var(--color-blue);
}

br
{
    line-height: 1.5em;
}

div
{
    height: auto;
}

iframe:not(.payway-credit-card-iframe)
{
    width: 100%;
    height: 100%;
    border: 0 none;
    margin: 0;
    padding: 0;
}

img
{
    border: 0 none;
    margin: 0;
    padding: 0;
    display: block;
}

ul, ol
{
    margin: 2px 0 10px 0;
    padding: 0 0 0 15px;
    line-height: 1.5em;
}

li
{
    padding: 0;
}

.break
{
    float: left;
    width: 100%;
}

.hidden
{
    display: none !important;
}

.shadow
{
    box-shadow: 7px 9px 9px -2px var(--color-grey-light);
}

.left
{
    float: left;
}

.right
{
    float: right;
}

#workingSpinner,
.working-spinner 
{
    margin: 50px 0 20px 0;
    display: block;
}

.button-disabled,
.button-disabled a,
.button-disabled a:hover 
{
    background-color: var(--color-grey-lighter) !important;
    border-color: var(--color-grey-lighter) !important;
    color: var(--color-grey-light) !important;
    pointer-events: none;
    cursor: default;
}

/*Page*/
.page-left
{
    margin-left: 0;
}

.page-right
{
    margin-right: 0;
}

.jump-to-page
{
    background-color: var(--color-white);
    color: var(--color-grey-darkest);
    border: 1px solid var(--color-grey-darkest);
    padding: 0 10px 0 10px;
    max-height: 250px;
    overflow-y: auto;
}

.jump-to-page a,
.jump-to-page a:hover {
    color: var(--color-grey-darkest);
}

.jump-to-page ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.no-results-found
{
    font-size: 25px;
    margin: 50px 0 20px 0;
    line-height: 30px;
}

.paged-list-count 
{
    font-size: 14px;
    margin: 0 0 15px 0;
}

/*Form*/
form
{
    border: 0;
    margin: 0;
    padding: 0;
}

fieldset
{
    margin: 0;
    padding: 0;
    width: 100%;
    border: 0;
}

fieldset.filters
{
    margin-bottom: 25px;
}

legend
{
    padding: 0;
    margin: 0;
}

fieldset ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

fieldset li
{
    padding: 7px 0 0 0;
    margin: 0;
    display: block;
}

fieldset h2
{
    margin: 15px  0 0 0;
}

label
{
    width: 100%;
    padding: 0 5px 0 0;
    display: block;
    vertical-align: top;
}

input,
select,
textarea
{
    padding: 3px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--color-grey);
}

textarea
{
    min-height: 100px;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

input[type=checkbox]
{
    margin: 0;
    width: auto
}

input[readonly],
textarea[readonly]
{
    background-color: var(--color-grey-lighter) !important;
}

input.working
{
    background: url(/content/images/smallProgressAnimation.gif) no-repeat;
    background-position: right 10px center;
}

/*Table*/
.table-list
{
    display: table;
    margin: 0 0 20px 0;
    padding: 0;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-grey);
}

.table-list thead
{
    display: table-header-group;
}

.table-list thead th
{
    display: table-cell;
}

.table-list tbody
{
    display: table-row-group;
}

.table-list tr
{
    display: table-row;
}

.table-list th,
.table-list td
{
    display: table-cell;
}

.table-list th
{
    background-color: var(--color-grey);
    font-weight: bold;
}

.table-list tr
{
    background-color: var(--color-white);
}

.table-list tr:nth-child(2n)
{
    background-color: var(--color-grey-lightest);
}

.table-list td,
.table-list th
{
    padding: 2px 10px 2px 10px;
    text-align: left;
    vertical-align: top;
}

.table-list td
{
    border: 1px solid var(--color-grey);
}

.table-list th.tool,
.table-list td.tool
{
    width: 50px;
    padding: 0 5px 0 5px;
    text-align: center;
}

.table-list img
{
    width: auto;
    max-height: 75px;
}

.table-list .tool img:hover
{
    cursor: pointer;
}

/*Collapsable tables*/
.table-list.collapsable
{
    border: none;
}

.table-list.collapsable thead tr,
.table-list.collapsable thead th
{
    display: none;
}

.table-list.collapsable thead th.toolbar.small
{
    display: table-cell;
}

.table-list.collapsable tr
{
    margin: 0 0 20px 0;
    display: block;
    background-color: var(--color-grey-lighter);
    border: 1px solid var(--color-grey);
    vertical-align: top;
}

.table-list.collapsable td
{
    display: block;
    border: none;
    border-bottom: 1px solid var(--color-grey);
    padding: 10px;
}

.table-list.collapsable td:last-of-type
{
    border-bottom: none;
}

.table-list th.tool,
.table-list td.tool
{
    width: 100%;
    text-align: left;
}

.table-list.collapsable td::before
{
    font-weight: bold;
}

.table-list.collapsable .active::before { content: "Active: "; }
.table-list.collapsable .code::before { content: "Code: "; }
.table-list.collapsable .display-name::before { content: "Display name: "; }
.table-list.collapsable .email::before { content: "Email: "; }
.table-list.collapsable .featured::before { content: "Featured: "; }
.table-list.collapsable .image::before { content: "Image: "; }
.table-list.collapsable .last-log-in-at::before { content: "Last log in at: "; }
.table-list.collapsable .last-log-in-ip::before { content: "Last log in ip: "; }
.table-list.collapsable .name::before { content: "Name: "; }
.table-list.collapsable .on-sale::before { content: "On sale: "; }
.table-list.collapsable .order-date::before { content: "Order date: "; }
.table-list.collapsable .order-number::before { content: "Order number: "; }
.table-list.collapsable .organisation::before { content: "Organisation: "; }
.table-list.collapsable .payment-received-date::before { content: "Payment received date: "; }
.table-list.collapsable .payment-reference::before { content: "Payment reference: "; }
.table-list.collapsable .price::before { content: "Price: "; }
.table-list.collapsable .published::before { content: "Published: "; }
.table-list.collapsable .quantity::before { content: "Quantity: "; }
.table-list.collapsable .role::before { content: "Role: "; }
.table-list.collapsable .shipped::before { content: "Shipped: "; }
.table-list.collapsable .shipped-date::before { content: "Shipped date: "; }
.table-list.collapsable .shipping-price::before { content: "Shipping price: "; }
.table-list.collapsable .shipping-reference::before { content: "Shipping reference: "; }
.table-list.collapsable .shipping-tracking::before { content: "Shipping tracking: "; }
.table-list.collapsable .total-price::before { content: "Total price: "; }
.table-list.collapsable .unit-price::before { content: "Unit price: "; }

.active-tag,
.featured-tag,
.on-sale-tag,
.published-tag,
.shipped-tag
{
    display: inline-block;
    padding: 3px;
    font-size: 13px;
    border-radius: 4px;
    border-color: var(--color-grey-light);
    background-color: var(--color-grey-light);
    color: var(--color-white);
}

.active-tag[data-is-active='True'],
.published-tag[data-is-published='True'],
.shipped-tag[data-is-shipped='True']
{
    border-color: var(--color-green);
    background-color: var(--color-green);
}

.featured-tag[data-is-featured='True']
{
    border-color: var(--color-blue);
    background-color: var(--color-blue);
}

.on-sale-tag[data-is-on-sale='True']
{
    border-color: var(--color-yellow);
    background-color: var(--color-yellow);
}

/*menu*/
.menu ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li
{
    margin: 0;
    padding: 0;
    display: block;
}

.menu.horizontal li
{
    display: inline-block;
}

.menu a
{
    text-decoration: none;
    display: block;
}

.menu-header
{
    padding: 10px 10px 10px 15px;
}

.menu-header:before
{
    content: "\f107";
    font-family: FontAwesome;
    font-weight: bold;
    text-align: right;
    float: right;
    padding-left: 10px;
}

.menu-header:hover
{
    cursor: pointer;
}

.menu-header-current
{
    float: left;
}

.menu-header-title
{
    float: right;
}

/*Primary menu*/
.menu-header.primary
{
    height: 44px;
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: 18px;
    text-transform: uppercase;
}

.menu-header.primary .menu-header-current
{
    color: var(--color-yellow);
}

.menu-header.primary .menu-header-title
{
    font-size: 16px;
    text-transform: capitalize;
}

.menu.primary
{
    display: none;
    color: var(--color-white);
    font-size: 15px;
    text-transform: uppercase;
}

.menu.primary ul
{
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
}

.menu.primary li
{
    display: block;
    padding: 3px 13px 3px 13px;
}

.menu.primary li a:hover
{
    color: var(--color-blue);
}

.menu.primary li.menu-selected a
{
    color: var(--color-yellow);
    font-weight: bold;
}

.menu.primary li.menu-separator
{
    display: none;
}

.menu-sub
{
    display: none !important;
}

/*Header*/
.header
{
    display: grid;
    grid-template-columns: calc(var(--header-right-width) - var(--cart-summary-width)) var(--cart-summary-width);
    grid-template-rows: auto auto auto;
    justify-content: stretch;
    padding: 30px 0 45px 0;
}

.header.secondary
{
    padding: 15px 0 20px 0;
}

/*Breadcrumbs*/
.header .breadcrumbs
{
    grid-column-start: 1;
    grid-row-start: 1;
    align-self: end;
    padding: 0 0 5px 15px;
    font-size: 13px;
    color: var(--color-grey);
}

.breadcrumbs a
{
    color: var(--color-grey);
}

.breadcrumbs a:hover
{
    color: var(--color-grey-dark);
}

/*Logo*/
.header .logo
{
    grid-column-start: 1;
    grid-row-start: 1;
    grid-column-end: span 2;
}

.header.secondary .logo
{
    grid-column-start: 1;
    grid-row-start: 2;
}

.header .logo img
{
    display: inline-block;
    padding: 0 15px 0 15px;
    max-width: 100%;
}

.header.secondary .logo img
{
    width: 200px;
}

/*Search*/
.header .search
{
    grid-column-start: 1;
    grid-row-start: 3;
    align-self: end;
    margin: 10px 15px 0 0;
    padding: 3px 3px 2px 15px;
    border-top: solid 1px var(--color-grey);
    border-bottom: solid 1px var(--color-grey);
    white-space: nowrap;
}

.header .search .fa-search
{
    padding-top: 3px;
    color: var(--color-grey);
    text-decoration: none;
}

.header .search .fa-search:hover
{
    color: var(--color-orange);
}

.header .search input
{
    border: none;
    width: calc(100% - 20px);
    box-sizing: border-box;
    vertical-align: top;
}

/*Cart summary*/
.header .cart-summary
{
    grid-column-start: 2;
    grid-row-start: 2;
    grid-row-end: span 2;
    align-self: end;
    padding: 5px 15px;
    background-color: var(--color-blue);
    color: var(--color-white);
    text-align: center;
}

.cart-summary .fa-shopping-cart
{
    font-family: FontAwesome;
    font-size: 45px;
}

.cart-summary div
{
    margin-top: 3px;
    display: block;
}

.cart-summary .count,
.cart-summary .total-price
{
    width: auto;
    display: inline-block;
}

.cart-summary-items
{
    position: absolute;
    padding: 3px 0 0 0;
    width: var(--cart-summary-items-width);
    max-width: 100%;
    z-index: 1000;
    box-shadow: 0 12px 6px -6px var(--color-grey-mid);
}

.cart-summary-items:before
{
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 6px 10px 6px;
    border-color: transparent transparent var(--color-blue)transparent;
    display: inline-block;
    vertical-align: middle;
    margin-top: 4px;
    margin-left: calc(320px - (var(--cart-summary-width) / 2) - 6px);
}

.cart-summary-items .heading
{
    display: block;
    padding: 7px 15px;
    background-color: var(--color-blue);
    color: var(--color-white);
    font-weight: bold;
    text-transform: uppercase;
}

.cart-summary-items .items
{
    padding: 7px 15px;
    background-color: var(--color-white);
    font-weight: normal;
    border: 1px solid var(--color-grey-dark);
    border-bottom: none;
}

.cart-summary-item-card
{
    display: grid;
    grid-template-columns: var(--cart-summary-item-image-width) auto;
    column-gap: 15px;
    grid-template-rows: auto auto auto auto;
    margin: 15px 0;
}

.cart-summary-item-card .product-image
{
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: span 4;
    max-width: var(--cart-summary-item-image-width);
}

.cart-summary-item-card .code
{
    grid-column-start: 2;
    grid-row-start: 1;
    font-weight: bold;
}

.cart-summary-item-card .name
{
    grid-column-start: 2;
    grid-row-start: 2;
    font-weight: bold;
}

.cart-summary-item-card .unit-price
{
    grid-column-start: 2;
    grid-row-start: 3;
    font-weight: bold;
}

.cart-summary-item-card .quantity
{
    grid-column-start: 2;
    grid-row-start: 4;
}

.cart-summary-items .total-price
{
    margin: 25px 0;
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
}

.cart-summary-items .gst
{
    font-size: 14px;
    font-weight: normal;
}

.cart-summary-items .continue-shopping
{
    margin: 25px 0;
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--color-blue);
}

.cart-summary-items .continue-shopping:hover
{
    color: var(--color-green);
    cursor: pointer;
}

.cart-summary-items .footer
{
    display: flex;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid var(--color-grey-dark);
    border-top: none;
}

.cart-summary-items .go-to-cart
{
    display: inline-block;
    padding: 7px 15px;
    width: 50%;
    background-color: var(--color-yellow);
    color: var(--color-black);
    text-decoration: none;
}

.cart-summary-items .go-to-cart:hover
{
    color: var(--color-white);
}

.cart-summary-items .checkout
{
    display: inline-block;
    padding: 7px 15px;
    width: 50%;
    background-color: var(--color-grey-dark);
    color: var(--color-white);
    text-decoration: none;
}

.cart-summary-items .checkout:hover
{
    color: var(--color-yellow);
}

/*Cart*/
.cart-items
{
    border: 1px solid var(--color-grey-dark);
}

.cart-items .heading
{
    padding: 7px 0;
    background-color: var(--color-blue);
    color: var(--color-white);
    font-weight: bold;
    text-transform: uppercase;
}

.cart-items .simple
{
    padding: 7px 15px;
}

.cart-items .heading.columns
{
    display: none;
}

.cart-items .cart-item-card
{
    display: grid;
    grid-template-columns: var(--cart-summary-item-image-width) auto;
    column-gap: 15px;
    grid-template-rows: auto auto auto auto;
    grid-row-gap: 10px;
    margin: 15px 0;
    padding: 10px 0;
    font-weight: bold;
}

.cart-item-card .product-image
{
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: span 5;
    padding-left: 10px;
    width: var(--cart-item-image-width);
    max-width: 100%;
}

#divCheckout .cart-item-card .product-image
{
    grid-row-end: span 4;
}

.cart-item-card .product p
{
    margin: 5px 0;
    padding: 0;
}

.cart-item-card .unit-price::before
{
    content: "Unit price: ";
}

.cart-item-card .quantity
{
    display: grid;
    grid-template-columns: 40px 20px;
    grid-template-rows: 20px 20px;
    align-items: stretch;
    justify-items: stretch;
    width: 60px;
    border-left: 1px solid var(--color-grey-light);
    border-top: 1px solid var(--color-grey-light);
}

#divCheckout .cart-item-card .quantity
{
    width: auto;
}

#divCheckout .cart-item-card .quantity::before
{
    content: "Quantity: ";
}

.cart-item-card .quantity .value
{
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: span 2;
}

.cart-item-card .quantity input
{
    width: 100%;
    height: 38px;
    text-align: center;
    border: none;
}

.cart-item-card .quantity .fa
{
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 100;
    color: var(--color-grey-mid);
}

.cart-item-card .quantity .fa:hover
{
    color: var(--color-blue);
    cursor: pointer;
}

.cart-item-card .quantity .value,
.cart-item-card .quantity .increase,
.cart-item-card .quantity .decrease
{
    border: none;
    border-right: 1px solid var(--color-grey-light);
    border-bottom: 1px solid var(--color-grey-light);
}

.cart-item-card .product-total::before
{
    content: "Product total: ";
}

.cart-item-card .gst
{
    font-weight: normal;
}

.cart-item-card .remove
{
    justify-self: start;
    padding: 3px;
    background-color: var(--color-grey-mid);
    color: var(--color-white);
    font-size: 13px;
    font-weight: normal;
    border-radius: 3px;
}

.cart-item-card .remove:hover
{
    color: var(--color-yellow);
    cursor: pointer;
}

.cart-items .footer
{
    display: inline-block;
    padding: 7px 15px;
    width: 100%;
    background-color: var(--color-yellow);
    color: var(--color-black);
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.cart-items .footer a
{
    text-decoration: none;
}

.cart-items .footer a:hover
{
    color: var(--color-white);
}

.totals
{
    display: grid;
    width: 500px;
    max-width: 100%;
    border: 1px solid var(--color-grey-dark);
}

.totals .heading
{
    padding: 15px 15px 5px 15px;
    color: var(--color-blue);
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
}

.totals .sub-total-price
{
    padding: 15px;
    font-weight: bold;
    border-bottom: 1px solid var(--color-grey-light);
}

.totals .sub-total-price .gst
{
    font-size: 14px;
    font-weight: normal;
}

.totals .shipping
{
    padding: 15px;
    color: var(--color-grey-mid);
    border-bottom: 1px solid var(--color-grey-light);
}

.highlight
{
    color: var(--color-red);
    font-weight: bold;
}

.totals .total-price
{
    padding: 15px;
    font-weight: bold;
}

.totals .total-price .price
{
    font-size: 28px;
}

.totals .total-price .gst
{
    font-size: 14px;
    font-weight: normal;
}

.totals a,
.totals input.order
{
    display: inline-block;
    padding: 7px 15px;
    width: 100%;
    max-width:none;
    background-color: var(--color-yellow);
    color: var(--color-black);
    text-decoration: none;
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    border: none;
}

.totals a:hover,
.totals input.order:hover
{
    color: var(--color-white);
    cursor: pointer;
}

/*Checkout*/
.instructions
{
    font-size: 16px;
}

#divCheckout .cart-items .heading,
#divCheckout .cart-items .items
{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

#divCheckout .cart-items .items .quantity,
#divCheckout .cart-items .items .quantity .value
{
    display: inline-block;
    border: none;
}

#totalsInvalidMessage
{
    color: var(--color-red);
    font-weight: bold;
}

input#payway-cc-submit
{
    display: inline-block;
    margin-top: 20px;
    padding: 7px 15px;
    border: 1px solid var(--color-black);
    background-color: var(--color-yellow);
    color: var(--color-black);
    text-decoration: none;
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

input#payway-cc-submit:hover
{
    color: var(--color-white);
    cursor: pointer;
}

input#payway-cc-submit:disabled,
input#payway-cc-submit:disabled:hover
{
    background-color: var(--color-grey-lighter) !important;
    border-color: var(--color-grey-lighter) !important;
    color: var(--color-grey-light) !important;
    pointer-events: none;
    cursor: default;
}

/*Content*/
.content
{
    margin: 25px 0 50px 0;
    padding: 15px;
}

.content-with-side-menu
{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

.content-has-side-menu
{
    width: 100%;
    margin: 0 0 50px 0;
}

#divOrderConfirmation .content
{
    font-size: 16px;
}

/*Side menu*/
.side-menu li:not(.menu-item-toolbar)
{
    margin: 0 0 10px 0;
    padding: 5px 15px 5px 15px;
    font-size: 13px;
    box-shadow: 7px 9px 9px -2px var(--color-grey-light);
    white-space: nowrap;
}

.side-menu li.menu-selected
{
    padding: 0;
    box-shadow: none;
}

.side-menu li.menu-selected > a
{
    width: 100%;
    padding: 5px 15px 5px 15px;
    background-color: var(--color-grey-dark);
    box-shadow: 7px 9px 9px -2px var(--color-grey-light);
}

.side-menu li a
{
    color: var(--color-grey-dark);
}

.side-menu li.menu-selected a
{
    color: var(--color-white);
    font-weight: bold;
}

.side-menu li:hover:not(.menu-item-toolbar)
{
    background-color: var(--color-grey);
}

.side-menu li.menu-selected:hover
{
    background-color: var(--color-white);
}

.side-menu ul.menu-sub
{
    position: static;
    margin: 10px 0 0 0 !important;
    display: block !important;
}

.side-menu .menu-sub li
{
    margin: 0 !important;
    padding: 0 13px 0 13px !important;
    line-height: 1.5em;
    height: auto !important;
    box-shadow: none;
}

.side-menu .menu-sub li a
{
    padding: 0;
    color: var(--color-grey-dark) !important; /*Mobile seems to need this*/
    background-color: var(--color-white) !important;
    font-weight: normal;
    box-shadow: none !important;
}

.side-menu .menu-sub li:hover,
.side-menu .menu-sub li a:hover
{
    background-color: var(--color-grey) !important;
}

.side-menu .menu-sub li.menu-selected,
.side-menu .menu-sub li.menu-selected:hover,
.side-menu .menu-sub li.menu-selected a:hover
{
    background-color: var(--color-white) !important;
}

.side-menu .menu-sub li.menu-selected a
{
    color: var(--color-blue) !important;
    font-weight: bold;
}

.flyout
{
    width: 100%;
    margin: 0 0 25px 0;
    padding: 15px;
    background-color: var(--color-yellow);
    color: var(--color-black);
    font-size: 24px;
    overflow: hidden;
}

.flyout.large
{
    display: none;
}

/*Results bar*/
.result-bar
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 1000;
    text-align: center;
}

.result-bar .close
{
    position: fixed;
    top: 0;
    right: 0;
    padding: 10px;
}

.result-bar .close:hover
{
    font-weight: bold;
}

.successful, .successful a, .successful a:hover
{
    background-color: var(--color-green) !important;
    border-color: var(--color-green) !important;
    color: var(--color-white) !important;
}

.unsuccessful, .unsuccessful a, .unsuccessful a:hover
{
    background-color: var(--color-red) !important;
    border-color: var(--color-red) !important;
    color: var(--color-white) !important;
}

.cart-successful, .cart-successful a, .cart-successful a:hover
{
    background-color: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
    color: var(--color-white) !important;
}

/*Footer*/
#footer
{
    padding: 0 15px 0 15px;
    border-top: solid 1px var(--color-grey-dark);
    font-size: 12px;
    color: var(--color-grey-dark);
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#footer ul
{
    padding: 5px 0 0 0;
}

#footer ul:last-of-type
{
    text-align:right;
}

#footer li
{
    padding-right: 5px;
}

#footer img
{
    vertical-align: middle;
    margin-left: 5px;
    display: inline-block;
}

.circle
{
    padding-top: 42px;
    background-color: var(--color-yellow);
    height: 125px;
    width: 125px;
    border-radius: 62px;
    box-shadow: 3px 2px 4px 2px var(--color-grey-light);
    font-size: 18px;
    text-align: center;
    font-weight: bold;
}

.circle a
{
    text-decoration: none;
}

.circle:hover
{
    background-color: var(--color-grey-dark);
}

.circle:hover a
{
    color: var(--color-yellow);
}

.circle.grey
{
    background-color: var(--color-grey-dark);
}

.circle.grey a
{
    color: var(--color-yellow);
}

.circle.grey:hover
{
    background-color: var(--color-yellow);
}

.circle.grey:hover a
{
    color: var(--color-grey-dark);
}

.call-to-action
{
    padding: 2px;
    background-color: var(--color-blue);
    text-align: center;
}

.call-to-action a
{
    color: var(--color-white);
    font-weight: bold;
}

.call-to-action a:hover
{
    color: var(--color-grey-dark);
}

.downloads
{
    margin: 50px 0 25px 0;
}

.download
{
    width: 265px;
    margin: 0 0 25px 0;
    padding: 7px 15px;
    background-color: var(--color-grey-lightest);
    text-transform: uppercase;
    box-shadow: 7px 9px 9px -2px var(--color-grey-light);
    font-size: 13px;
    display: inline-block;
}

.download:hover
{
    background-color: var(--color-yellow);
}

.download:hover a
{
    color: var(--color-black);
}

.download a
{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
}

.download div.fa
{
    font-size: 20px;
}

.download p
{
    margin: 0 0 0 10px;
    padding: 0;
}

.download br
{
    line-height: normal;
}

.download.yellow
{
    background-color: var(--color-yellow);
}

.download.yellow:hover
{
    background-color: var(--color-grey-lightest);
}

.toolbar
{
    margin: 0;
    width: auto;
    height: auto;
    font-size: 0;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    flex-direction: row;
}

.button
{
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 3px 15px 3px 15px;
    background-color: var(--color-grey-dark);
    color: var(--color-white);
    border: 1px solid var(--color-grey-dark);
    border-radius: 2px;
    white-space: nowrap;
    text-align: center;
    font-size: 13px;
}

.toolbar .button
{
    border-radius: 0;
}

.button a
{
    color: var(--color-white);
    text-decoration: none;
}

.button a:hover,
.button:hover
{
    color: var(--color-yellow);
}

.page-of
{
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 3px 15px 3px 15px;
    background-color: var(--color-white);
    border: 1px solid var(--color-grey-dark);
    font-size: 13px;
}

/*Go to top*/
#GoToTop
{
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99;
    color: var(--color-white);
    background-color: rgba(79, 79, 79, 0.5);
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    border: solid 1px var(--color-white);
    font-size: 20px;
}

/* Validation */
.field-validation-error
{
    color: var(--color-red);
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid var(--color-red) !important;
    background-color: var(--color-pink) !important;
}

.validation-summary-errors
{
    margin-bottom: 20px;
    padding: 4px;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid var(--color-red);
    background-color: var(--color-pink);
}

.validation-summary-valid
{
    display: none;
}

.validation-summary-errors ul
{
    font-weight: normal;
}

.validation-summary-errors
{
    width: calc(100% - 2px);
}

legend .mandatory::after,
label.mandatory::after
{
    margin: 0 0 0 3px;
    color: var(--color-red-dark);
    content: '*';
    font-size: 18px;
    vertical-align: middle;
    font-weight: normal;
}

/*Home*/
#divHome #divBanner
{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
}

#divHome #divBanner #divImages img
{
    width: 100%;
}

#divHome #divProducts
{
    margin: 25px 0 25px 0;
    display: flex;
    justify-content: space-between;
}

#divHome #divProducts .header
{
    display: block;
    padding: 5px 15px 5px 15px;
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: 14px;
    text-transform: uppercase;
    overflow: hidden;
}

#divHome #divProducts #divQuickLinks
{
    margin: 0 30px 0 0;
}

#divHome #divProducts #divQuickLinks ul
{
    margin: 20px 0 0 0;
}

#divHome #divProducts #divQuickLinks li
{
    white-space: normal;
}

#divHome #divProducts #divQuickLinks .circle
{
    margin: 20px 0 20px 0;
}

#divHome #divProducts #divFeaturedProducts
{
    flex-grow: 1;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) /*for IE */
{
    #divHome #divProducts #divFeaturedProducts
    {
        overflow: auto;
    }
}

#divHome #divProducts #divFeaturedProducts .product-card
{
    margin-left: 0;
}

#divHome #divLogos
{
    margin-top: 5px;
    padding: 15px 0 15px 0;
    border-top: solid 1px var(--color-grey-dark);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#divHome #divLogos img
{
    padding: 0 10px 0 10px;
}

/*Products*/

.header .breadcrumbs
{
    padding: 0 0 5px 15px;
    font-size: 13px;
    color: var(--color-grey);
}

.menu-header.products
{
    display: block;
    margin: 0 0 10px 0;
    box-shadow: 7px 9px 9px -2px var(--color-grey-light);
    border-top: 5px solid var(--color-yellow);
    overflow: auto;
    font-size: 16px;
}

.menu-header.products .menu-header-current ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-header.products .menu-header-current li
{
    margin: 0;
    padding: 0;
    display: inline-block;
    box-shadow: none;
}

.menu-header.products .menu-header-current li:hover
{
    background-color: var(--color-white);
}

.menu.products
{
    display: none;
}

#divProducts .circle
{
    margin-bottom: 50px;
}

#divProducts .flyout
{
    font-size: 18px;
}

.products
{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.product-card
{
    margin: 0 0 25px 0;
    border: solid 1px var(--color-grey-dark);
    transition: transform .2s;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    flex-basis: 202px;
    background-color: var(--color-white);
}

.product-card:hover
{
    transform: scale(1.075);
    z-index: 99;
    cursor:pointer;
}

.product-card img
{
    flex: 0 0 auto; /*Needed for IE*/
    max-width: 100%;
}

.product-card .product-banner
{
    padding: 7px;
    background-color: var(--color-grey-dark);
}

.product-card .product-banner p
{
    margin: 0;
    padding: 0;
}

.product-card .product-details
{
    padding: 7px;
}

.product-card .product-code
{
    color: var(--color-yellow);
    font-weight: bold;
}

.product-card .product-name
{
    font-weight: bold;
    color: var(--color-white);
}

.product-on-sale
{
    padding: 3px 7px;
    font-weight: bold;
    background-color: var(--color-yellow);
    color: var(--color-black);
    text-transform: uppercase;
}

.product-price
{
    padding: 3px 7px;
    font-weight: bold;
    text-transform: uppercase;
}

.product-add-to-cart
{
    padding: 3px 7px;
    font-weight: bold;
    background-color: var(--color-green);
    color: var(--color-white);
    text-transform: uppercase;
}

.product-add-to-cart:after
{
    content: "\f07a";
    font-family: FontAwesome;
    font-weight: normal;
    float: right;
    padding-left: 7px;
}

.product-add-to-cart:hover
{
    background-color: var(--color-grey-dark);
    color: var(--color-yellow);
    cursor: pointer;
}

.product-card h3
{
    margin: 7px 0 0 0;
    padding: 0;
    text-transform: uppercase;
    font-size: 13px;
}

.product-card .product-contact-us
{
    margin-top: auto;
    padding: 7px;
}

.product-card .product-contact-us a
{
    text-decoration: underline;
}

.photo img
{
    margin: 25px 0  25px 0;
}

.product .details
{
    margin: 0 0 35px 0;
    display: flex;
    flex-direction: column;
}

.product .details h3
{
    margin: 7px 0 0 0;
    padding: 0;
    text-transform: uppercase;
    font-size: 13px;
}

.product .details p
{
    margin: 4px 0 7px 0;
}

.product .product-contact-us
{
    margin: 10px 0 0 0;
}

.product .product-on-sale,
.product .product-price,
.product .product-add-to-cart
{
    margin-top: 10px;
    max-width: 300px;
}

.product .product-price
{
    padding-left: 0;
}

/*Contact us*/
#divContactUs .details
{
    margin: 25px 0 0 0;
    padding: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

#divContactUs .details div
{
    margin: 0 50px 20px 0;
}

.map
{
    width: 100%;
    height: 575px;
}

@media (min-width: 360px)
{
    .cart-summary-items:before
    {
        margin-left: calc(360px - (var(--cart-summary-width) / 2) - 6px);
    }
}

@media (min-width: 480px)
{
    .logo img
    {
        max-width: none;
    }

    .cart-summary-items:before
    {
        margin-left: calc(480px - (var(--cart-summary-width) / 2) - 6px);
    }
}

@media (min-width: 500px)
{
    .cart-summary-items:before
    {
        margin-left: calc(500px - (var(--cart-summary-width) / 2) - 6px);
    }

    .product-card
    {
        margin: 0 15px 25px 0;
    }
}

@media (min-width: 600px)
{
    label
    {
        width: 170px;
        display: inline-block;
    }

    input,
    select,
    textarea
    {
        width: calc(100% - 175px);
        max-width: 300px;
    }

    .flyout.small
    {
        display: none;
    }

    .flyout.large
    {
        display: block;
    }

    /*Content*/
    .side-menu
    {
        max-width: 265px;
    }

    .content
    {
        padding: 15px 0;
    }

    .content-with-side-menu
    {
        flex-direction: row;
    }

    .content-with-side-menu .side-menu
    {
        margin-right: 20px;
    }

    /*Cart summary*/
    .cart-summary-items:before
    {
        margin-left: calc(600px - (var(--cart-summary-width) / 2) - 6px);
    }

    /*Cart*/
    .cart-items .simple
    {
        display: none;
    }

    .cart-items .heading.columns
    {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 15px;
    }

    #divCheckout .cart-items .heading.columns
    {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    .cart-items .items .cart-item-card
    {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 15px;
        align-items: center;
        margin: 0;
    }

    #divCheckout .items .cart-item-card
    {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    .cart-item-card .product-total::before,
    #divCheckout .cart-item-card .quantity::before,
    .cart-item-card .unit-price::before
    {
        content: none;
    }

    .cart-item-card .product-image
    {
        grid-row-end: span 1;
    }

    .cart-item-card .gst
    {
        font-size: 14px;
        font-weight: normal;
    }

    /*Home*/
    #divHome #divBanner
    {
        flex-wrap: nowrap;
    }

    #divHome #divBanner .flyout
    {
        width: calc(70% - 25px);
    }

    #divHome #divBanner #divImages
    {
        width: 30%;
    }

    .menu-header.products
    {
        display: none;
    }

    .menu.products
    {
        display: block;
    }

    .product-card
    {
        margin: 0 15px 25px 0;
        flex-grow: 0;
    }

    .product .details
    {
        margin: 0 0 35px 0;
    }
}

@media (min-width: 768px)
{
    .page-left
    {
        margin-left: 30px;
    }

    .page-right
    {
        margin-right: 30px;
    }

    .break
    {
        width: calc(100% - 30px - 30px);
    }

    .menu-header
    {
        display: none;
    }

    .menu.primary
    {
        padding: 0 10px 0 10px;
        display: flex;
        height: 44px;
        background-color: var(--color-black);
    }

    .menu.primary ul
    {
        width: 100%;
        margin: 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        align-content: flex-start;
        justify-content:flex-start;
        background-color: var(--color-black);
        border: none;
    }

    .menu.primary li
    {
        padding: 23px 5px 0 5px;
        height: 100%;
        white-space: nowrap;
        width: auto;
        vertical-align: top;
        text-align: center;
    }

    .menu.primary li.account
    {
        margin-left: auto;
    }

    .menu.primary li:hover
    {
        color: var(--color-yellow);
    }

    .menu.primary li.menu-separator:hover
    {
        color: var(--color-white);
    }

    .menu.primary li a
    {
        color: var(--color-white);
    }

    .menu.primary li.menu-selected,
    .menu.primary li.menu-selected:hover
    {
        color: var(--color-yellow);
    }

    .menu.primary li.menu-separator
    {
        display: inline-block;
        font-size: 20px;
    }

    .menu.primary .menu-sub
    {
        position: absolute;
        margin: -1px 0 0 -13px !important;
        padding: 0 !important;
        width: auto !important;
        min-width: 150px !important;
        height: auto !important;
        background-color: var(--color-white) !important;
        white-space: nowrap;
        z-index: 100;
    }

    .menu.primary .account .menu-sub 
    {
        right: 30px;
    }

    .menu.primary li:hover .menu-sub
    {
        display: block !important;
    }

    .menu.primary .menu-sub li
    {
        display: block;
        margin: 0 !important;
        padding: 3px 13px 3px 13px !important;
        line-height: normal !important;
        font-weight: normal !important;
        height: auto !important;
        text-align: left !important;
    }

    .menu.primary .account .menu-sub li
    {
        text-align: right !important;
    }

    .menu.primary .menu-sub li a
    {
        color: var(--color-black) !important;
        font-size: 13px !important;
        border: none !important;
        text-transform: none;
    }

    .menu.primary li.menu-selected .menu-sub li a
    {
        font-weight: normal;
    }

    .menu-item-main .menu-sub li:hover
    {
        background-color: var(--color-grey);
    }

    .header .breadcrumbs
    {
        padding: 0 0 0 15px;
        font-size: 20px;
    }

    #footer
    {
        padding: 0;
    }

    .content-with-side-menu .side-menu
    {
        margin-right: 30px;
    }

    /*Cart summary*/
    .cart-summary-items:before
    {
        margin-left: calc(var(--cart-summary-items-width) - (var(--cart-summary-width) / 2) - 6px);
    }

    .cart-summary-items .heading
    {
        font-size: 17px;
    }

    .cart-summary-items .items
    {
        font-size: 14px;
    }

    .cart-summary-items .footer
    {
        font-size: 17px;
    }

    /*Cart*/
    .cart-items .heading
    {
        font-size: 17px;
    }

    .cart-items .items
    {
        font-size: 15px;
    }

    .cart-items .footer
    {
        font-size: 17px;
    }

    /*Home*/
    #divHome #divBanner .flyout
    {
        box-shadow: 7px 9px 9px -2px var(--color-grey-light);
    }

    #divHome #divBanner #divImages
    {
        box-shadow: 7px 9px 9px -2px var(--color-grey-light);
    }
}

@media (min-width: 990px)
{
    :root
    {
        --header-right-width: 50%;
    }

    /*Reset collapsable tables*/
    .table-list.collapsable
    {
        display: table;
        border: 1px solid var(--color-grey);
    }

    fieldset .table-list.collapsable
    {
        display: inline-table;
    }

    .table-list.collapsable thead
    {
        display: table-header-group;
    }

    .table-list.collapsable thead th
    {
        display: table-cell;
    }

    .table-list.collapsable tbody
    {
        display: table-row-group;
    }

    .table-list.collapsable thead tr,
    .table-list.collapsable tr
    {
        display: table-row;
    }

    .table-list.collapsable th,
    .table-list.collapsable td
    {
        display: table-cell;
    }

    .table-list.collapsable th
    {
        background-color: var(--color-grey);
        font-weight: bold;
    }

    .table-list.collapsable tr
    {
        background-color: var(--color-white);
    }

    .table-list.collapsable tr:nth-child(2n)
    {
        background-color: var(--color-grey-lighter);
    }

    .table-list.collapsable td,
    .table-list.collapsable th
    {
        padding: 2px 10px 2px 10px;
        text-align: left;
        vertical-align: top;
    }

    .table-list.collapsable td
    {
        border: 1px solid var(--color-grey);
    }

    .table-list.collapsable th.tool,
    .table-list.collapsable td.tool
    {
        width: 50px;
        text-align: center;
    }

    .table-list.collapsable .active::before,
    .table-list.collapsable .code::before,
    .table-list.collapsable .display-name::before,
    .table-list.collapsable .email::before,
    .table-list.collapsable .featured::before,
    .table-list.collapsable .image::before,
    .table-list.collapsable .last-log-in-at::before,
    .table-list.collapsable .last-log-in-ip::before,
    .table-list.collapsable .name::before,
    .table-list.collapsable .on-sale::before,
    .table-list.collapsable .order-date::before,
    .table-list.collapsable .order-number::before,
    .table-list.collapsable .organisation::before,
    .table-list.collapsable .payment-received-date::before,
    .table-list.collapsable .payment-reference::before,
    .table-list.collapsable .price::before,
    .table-list.collapsable .published::before,
    .table-list.collapsable .quantity::before,
    .table-list.collapsable .role::before,
    .table-list.collapsable .shipped::before,
    .table-list.collapsable .shipped-date::before,
    .table-list.collapsable .shipping-price::before,
    .table-list.collapsable .shipping-reference::before,
    .table-list.collapsable .shipping-tracking::before,
    .table-list.collapsable .total-price::before,
    .table-list.collapsable .unit-price::before
    {
        content: none;
    }

    /*Header*/
    .header
    {
        grid-template-columns: auto calc(var(--header-right-width) - var(--cart-summary-width)) var(--cart-summary-width);
        grid-template-rows: auto auto;
    }

    /*Breadcrumbs*/
    .header .breadcrumbs
    {
        grid-column-start: 1;
        grid-row-start: 1;
        grid-row-end: span 3;
    }

    /*Logo*/
    .header .logo
    {
        grid-column-start: 1;
        grid-row-start: 1;
        grid-row-end: span 2;
    }

    .header.secondary .logo
    {
        grid-column-start: 2;
        grid-row-start: 1;
        grid-row-end: span 1;
    }

    .header.secondary .logo img
    {
        padding-left: 0;
    }

    /*Search*/
    .header .search
    {
        grid-column-start: 2;
        grid-row-start: 2;
        padding-left: 0;
    }

    /*Cart*/
    .header .cart-summary
    {
        grid-column-start: 3;
        grid-row-start: 1;
        grid-row-end: span 2;
        align-self: end;
    }

    /*Home*/
    #divHome #divBanner .flyout
    {
        width: calc(50% - 50px);
    }

    #divHome #divBanner #divImages
    {
        width: 50%;
    }
}

@media (min-width: 1280px)
{
    :root
    {
        --header-right-width: 575px;
    }

    .header .breadcrumbs
    {
        font-size: 30px;
    }

    /*Home*/
    #divHome #divBanner .flyout
    {
        width: 100%;
        max-width: calc(100% - 625px);
        min-height: 575px;
    }

    #divHome #divBanner #divImages
    {
        width: var(--header-right-width);
    }
}

@media (min-width: 1400px)
{
}

@media (min-width: 1570px)
{
}


