/*
** #############
** ### NOTE! ###
** #############
**
** DO NOT CHANGE THIS FILE ONSITE! IT WILL BE REPLACED BY DEPLOYMENT!
**
** To override, copy specific variables or style rules to branding/app-branding.css and change the value there.
**
** See documentation for details.
*/
:root {
	/*
	** GLOBAL CSS VARIABLES
	*/
	/**** Colour palette ****/
	--branding--dark-mono-colour: hsl(0, 0%, 27%);
	--branding--medium-mono-colour: hsl(0, 0%, 46%);
	--branding--light-mono-colour: hsl(0, 0%, 80%);
	--branding--very-light-mono-colour: hsl(0, 0%, 94%);
	--branding--error-colour: hsl(0, 100%, 46%);
	--branding--warning-colour: hsl(37, 100%, 50%);
	--branding--success-colour: hsl(120, 50%, 40%);
	--branding--dark-primary-colour: hsl(211, 50%, 34%);
	--branding--medium-primary-colour: hsl(211, 35%, 48%);
	--branding--light-primary-colour: hsl(211, 100%, 80%);
	--branding--very-light-primary-colour: hsl(211, 100%, 94%);
	--branding--highlight-colour: hsl(211, 100%, 46%);
	--branding--light-highlight-colour: hsl(211, 100%, 60%);
	--branding--dark-accent-colour: hsl(326, 50%, 34%);
	--branding--medium-accent-colour: hsl(326, 75%, 46%);
	--branding--light-accent-colour: hsl(326, 100%, 80%);
	/**** Default static data item colours ****/
	--branding--item-tint-colour-1: rgb(255, 197, 216);
	--branding--item-tint-colour-2: rgb(155, 215, 255);
	--branding--item-tint-colour-3: rgb(162, 238, 172);
	--branding--item-tint-colour-4: rgb(255, 225, 160);
	--branding--item-tint-colour-5: rgb(133, 172, 255);
	--branding--item-tint-colour-6: rgb(247, 245, 129);
	--branding--item-tint-colour-7: rgb(197, 255, 247);
	--branding--item-tint-colour-8: rgb(223, 223, 223);
	/**** Element type colours ****/
	--branding--general-text-colour: var(--branding--dark-mono-colour);
	--branding--muted-text-colour: var(--branding--medium-mono-colour);
	--branding--inverse-text-colour: hsl(255, 100%, 100%);
	--branding--title-text-colour: var(--branding--dark-primary-colour);
	--branding--section-heading-text-colour: var(--branding--medium-primary-colour);
	--branding--sub-heading-text-colour: var(--branding--medium-accent-colour);
	--branding--column-heading-text-colour: var(--branding--dark-mono-colour);
	--branding--selection-highlight-colour: var(--branding--light-primary-colour);
	--branding--new-item-highlight-colour: hsl(120, 100%, 42%);
	--branding--list-item-hover-bg-colour: hsl(211, 100%, 99%);
	--branding--form-field-focus-bg-colour: var(--branding--light-highlight-colour);
	/**** Buttons ****/
	/* Buttons used for primary call-to-action buttons (except affirmation below) - e.g. main button in action card, next in workflow */
	--branding--button-primary-action-text-colour: white;
	--branding--button-primary-action-background-colour: var(--branding--dark-primary-colour);
	/* Buttons used for affirmative actions - e.g. main btn in dialogs that produce a major side-effect, final action on workflow pages */
	--branding--button-affirmative-action-text-colour: white;
	--branding--button-affirmative-action-background-colour: var(--branding--success-colour);
	/* Buttons used for minor actions, or secondary actions alongside primary actions */
	--branding--button-secondary-action-text-colour: var(--branding--medium-primary-colour);
	--branding--button-secondary-action-background-colour: white;
	/* Buttons shown without border as a link - typically used for navigation or view changes (e.g. Back, Show all, Toggle view) */
	--branding--button-link-text-colour: var(--branding--highlight-colour);
	--branding--button-link-background-colour: transparent;
	/* Buttons used for benign close action in dialogs, shown without border */
	--branding--button-dialog-close-text-colour: var(--branding--medium-mono-colour);
	--branding--button-dialog-close-background-colour: transparent;
	/* Buttons used for invoking destructive actions but before user confirmation - e.g. delete
	   These are borderless (text-only) and would typically be red on a transparent background */
	--branding--button-pre-destructive-action-text-colour: hsl(0, 100%, 46%);
	--branding--button-pre-destructive-action-background-colour: transparent;
	/* Buttons used for destructive actions after user confirmation - e.g. confirm deletion
	   These are raised buttons and would typically be white text on red background */
	--branding--button-destructive-action-text-colour: white;
	--branding--button-destructive-action-background-colour: hsl(0, 100%, 46%);
	/**** page container sizes ****/
	--page-margin: 40px; /* overridden for small screens in media query below */
	/* used on pages with preferred 'standard' width */
	--branding--max-content-width: min(950px, calc(100vw - var(--page-margin)));
	/* used on pages with preferred 'large' width */
	--branding--max-content-width-large: min(1600px, calc(100vw - var(--page-margin)));
	/* used on pages with preferred width taking up the whole screen width */
	--branding--max-content-width-full: calc(100vw - var(--page-margin));
	/* used for classified ad workflow steps - outer container (includes title bar) */
	--branding--classified-stepper-container-max-width: var(--branding--max-content-width);
	/* used for classified ad workflow steps - inner container (content below title bar) */
	--branding--classified-stepper-content-max-width: var(--branding--max-content-width);
	/* the dashboard page outer container (includes title bar) */
	--branding--dashboard--container-max-width: var(--branding--max-content-width-full);
	/* the dashboard page inner container (content below title bar) */
	--branding--dashboard--content-max-width: var(--branding--max-content-width-full);
	/* the dashboard page out container margin */
	--branding--dashboard--container-margin: 20px auto;
	/**** Specific purpose properties ****/
	--branding--app-background-blend-colour: rgba(240, 240, 250, 0.667);
	--branding--price-breakdown-message-colour: var(--branding--highlight-colour);
	--branding--price-breakdown-total-colour: var(--branding--highlight-colour);
	--branding--subscriber-discount-success-colour: var(--branding--success-colour);
	--branding--style-sample-background-colour: var(--branding--very-light-mono-colour);
	--branding--field-tooltip-button-color: var(--branding--selection-highlight-colour);
	--branding--field-edit-icon-colour: var(--branding--highlight-colour);
	--branding--mandatory-field-indicator-colour: var(--branding--error-colour);
	--branding--ad-preview-background-colour: var(--branding--very-light-mono-colour);
	--branding--ad-preview-message-colour: var(--branding--highlight-colour);
	--branding--stepper-selection-value-text-colour: var(--branding--medium-mono-colour);
	--branding--stepper-done-text-colour: white;
	--branding--stepper-done-background-colour: darkgreen;
	--branding--stepper-selected-text-colour: white;
	--branding--stepper-selected-background-colour: var(--branding--highlight-colour);
	--branding--toolbar--display: initial;
	--branding--toolbar--background: transparent;
	--branding--toolbar--height: unset;
	--branding--toolbar-button-text-colour: var(--branding--dark-primary-colour);
	--branding--toolbar--home-logo-url: none;
	--branding--toolbar--home-logo-height: 0;
	--branding--toolbar--home-logo-width: 0;
	--branding--home--create-ad-image-url: none;
	--branding--home--account-image-url: none;
	--branding--home--action-card-image-height: 0px;
	--branding--home--action-card-image-width: 0px;
	--branding--calendar--selected-day-text-colour: var(--branding--general-text-colour);
	--branding--calendar--selected-day-background-colour: hsl(120, 73%, 75%);
	--branding--calendar--unavailable-day-text-colour: var(--branding--error-colour);
	--branding--calendar--unavailable-selected-day-text-colour: white;
	--branding--calendar--unavailable-selected-day-background-colour: var(--branding--error-colour);
	--branding--unread-message-highlight-colour: var(--branding--new-item-highlight-colour);
	--branding--loading-spinner--forecolour: var(--branding--light-primary-colour);
	--branding--loading-spinner--backcolour: var(--branding--very-light-primary-colour);
	/**** Built-in images ****/
	--branding--home--create-ad-image-url: url('assets/images/message-edit-256.png');
	--branding--home--create-ad-image-height: 100px;
	--branding--home--create-ad-image-width: 100px;
	--branding--payment--paytrail-logo-url: url('assets/images/paytrail-logo.svg');
	--branding--payment--paytrail-logo-height: 100px;
	--branding--payment--paytrail-logo-width: 100px;
	--branding--payment--braintree-logo-url: url('assets/images/braintree-logo.png');
	--branding--payment--braintree-logo-height: 57px;
	--branding--payment--braintree-logo-width: 233px;
	--branding--payment--windcave-logo-url: url('assets/images/windcave-red-logo-horizontal.svg');
	--branding--payment--windcave-logo-height: 57px;
	--branding--payment--windcave-logo-width: 233px;
}

/* Reduce page margin on small screens */
@media (width <= 600px) {
	:root {
		--page-margin: 20px;
	}
}
@media (width <= 400px) {
	:root {
		--page-margin: 10px;
	}
}


/*
** DEFAULT STYLE RULES
*/

/* Title cards */
.branding--title-card {
	background-color: white;
	border-top: 5px solid var(--branding--highlight-colour);
	margin-bottom: 10px;
	display: flex;
}

/* Section cards */
.branding--section-card {
	background-color: white;
	border-top: 5px solid var(--branding--light-primary-colour);
	margin-bottom: 10px;
}

.branding--section-card-heading {
	font-weight: 700;
}

/* Action cards */
.branding--action-card {
	background-color: white;
	border-top: 5px solid var(--branding--light-primary-colour);
}

/* Home page action cards */
.branding--home--action-card {
	background-color: white;
	border-top: 5px solid var(--branding--light-primary-colour);
}

/* Category selection cards */
.branding--select-category-card {
	background-color: white;
}

/* Category selection cards: Labels */
.branding--select-category-card--label {
	color: var(--branding--dark-mono-colour);
	font-size: 18px;
	font-weight: 500;
	background-color: #eaeaea;
	border-bottom: solid 1px #d9d9d9;
}

/* Category selection cards: Description */
.branding--select-category-card--description {
	color: var(--branding--dark-mono-colour);
}

/* Placement selection cards */
.branding--select-placement-card {
	background-color: white;
}

/* Placement selection cards: Labels */
.branding--select-placement-card--label {
	color: var(--branding--dark-mono-colour);
	font-size: 18px;
}

/* Package selection cards */
.branding--select-package-card {
	background-color: white;
}

/* Package selection cards: labels */
.branding--select-package-card--label {
	color: var(--branding--dark-mono-colour);
	font-size: 18px;
	font-weight: 500;
}

/* Package selection cards: description */
.branding--select-package-card--description {
	color: var(--branding--medium-mono-colour);
}

/* Style selection cards */
.branding--select-style-card {
	background-color: white;
}

/* Style selection cards: label */
.branding--select-style-card--label {
	color: var(--branding--dark-mono-colour);
	font-size: 18px;
	font-weight: 500;
}

/* Style selection cards: description */
.branding--select-style-card--description {
    color: var(--branding--medium-mono-colour);
}

/* Style selection cards: image */
.branding--select-style-card--image {
    width: 200px;
    height: 150px;
}

/* Browser not supported page: message */
.branding--browser-not-supported-message {
	text-align: center;
	padding: 32px;
	font-weight: 500;
	font-size: 25px;
	color: red;
}

/* Popup Info Panel */
.branding--product-info-popup {
	min-width: 100px;
	max-width: 100vw;
	background-color: white;
	border-radius: 0px;
	padding: 4px 16px;
	box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

/* Order Status chips */
.branding--order-status-draft {
	background-color: rgb(197, 85, 231);
	color: rgb(255, 255, 255);
}
.branding--order-status-started {
	background-color: rgb(131, 255, 126);
	color: rgb(0, 0, 0);
}
.branding--order-status-finished {
	background-color: rgb(190, 190, 190);
	color: rgb(0, 0, 0);
}
.branding--order-status-approval-pending {
	background-color: rgb(111, 202, 255);
	color: rgb(0, 0, 0);
}
.branding--order-status-rejected,
.branding--notification-rejected {
	background-color: rgb(255, 46, 46);
	color: rgb(255, 255, 255);
}
.branding--order-status-reserved {
	background-color: rgb(43, 150, 238);
	color: rgb(255, 255, 255);
}
.branding--order-status-waiting-material {
	background-color: rgb(255, 211, 116);
	color: rgb(0, 0, 0);
}
.branding--order-status-confirmed {
	background-color: rgb(79, 167, 54);
	color: rgb(255, 255, 255);
}
.branding--order-status-cancelled {
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
}
.branding--order-status-booked {
	background-color: rgb(79, 167, 54);
	color: rgb(255, 255, 255);
}

/* Notification type chips - note some are shared with order statuses above */
.branding--notification-approved {
	background-color: rgba(255, 101, 209, 0.473);
	color: rgb(0, 0, 0);
}
.branding--notification-modified {
	background-color: rgb(43, 150, 238);
	color: rgb(255, 255, 255);
}
.branding--notification-confirm-deadline-warning {
	color: black;
	background-color: hsl(37,100%,50%);
}
.branding--notification-confirm-deadline-passed {
	background-color: red;
	color: white;
}

/* Scrollbars */
*::-webkit-scrollbar {
    -webkit-appearance: none;
    position: absolute;
    height: 10px;
	width: 10px;
}

*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track {
    background-clip: padding-box!important;
    border-radius: 5px;
    color: transparent;
}

*::-webkit-scrollbar-track {
    background-color: transparent;
    box-shadow: inset 0 -4px 0 0,inset 0 4px 0 0;
}

*::-webkit-scrollbar-track:horizontal {
    background-color: #f1f1f1;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(92, 92, 92, 0.2);
    box-shadow: inset 0 -2px,inset 0 -3px,inset 0 2px,inset 0 3px;
    min-height: 36px;
}

.branding--locale-icon {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.branding--locale-icon-en-AU {
	background-image: url('images/en-au.ico');
}

.branding--locale-icon-fi {
	background-image: url('images/fi.ico');
}

.branding--locale-icon-sv {
	background-image: url('images/sv.ico');
}

.branding--general--email-address, .branding--general--phone {
	text-decoration: none;
	color: var(--branding--medium-primary-colour);
}

.branding--general--email-address:hover {
	text-decoration: underline;
}