/* ======================= *
 * ## Color Declaration ##
 * ======================= */

:root {
		--primary: #287DB3 !important;
		--primary-dark: #1C5C9F !important;
		--primary-light: #3FACE2 !important;

		--secondary: #2E80A9 !important;
		--secondary-dark: #1E5E86 !important;
		--secondary-light: #379CD2 !important;

		--error: #D25A5A !important;
		--error-dark: #9F3737 !important;
		--error-light: #E26565 !important;

		--inbound: #64AB3E !important;
		--inbound-dark: #508932 !important;
		--inbound-light: #83BC65 !important;

		--outbound: #11A2FE !important;
		--outbound-dark: #0E82CB !important;
		--outbound-light: #41B5FE !important;

		--black: #000000 !important;
		--grey: #C5C5C5 !important;
		--grey-dark: #888888 !important;
		--grey-darker: #646464 !important;
		--grey-light: #E9E9E9 !important;
		--grey-lighter: #FAFAFA !important;
		--white: #FFFFFF !important;
}


/* ============================ *
 * ## Green - var(--inbound) ##
 * ============================ */

.flighttype-counter-component .flighttype-inbound .amount .shape {
   background: var(--inbound);
}

.flighttype-counter-component .flighttype-inbound .airplane,
.runway-use-component #active > g.inbound g.flight,
.runway-use-component #active > g.flight.inbound,
.runway-use-component #active > g.inbound g.flight.inbound {
   fill: var(--inbound);
}

.runway-use-component #active > g.inbound line,
.runway-use-component #active > g line.inbound,
.runway-use-component #active > g.inbound line.inbound {
   stroke: var(--inbound);
}


/* ============================= *
 * ## Grey - var(--grey-dark) ##
 * ============================= */

/* ## background-color ## */
#cc-window .cc-window-buttons button.cc-btn-info:hover,
#cc-window-settings .cc-window-settings-buttons button.cc-btn-settings-select:hover {
   background-color: var(--grey-dark);
}

/* ## border-color ## */
.gui-menu-button.inactive,
.gui-menu-button.disabled,
.gui-menu-button.location-interactive-button,
.swiper-navigation .navigation-button.swiper-button-disabled {
	border-color: var(--grey-dark);
}


/* ======================== *
 * ## Grey - var(--grey) ##
 * ======================== */

/* ## border-color ## */
.cpa-label,
.cpa-label .tip:after,
.date-time-component .time-editor .editor-content,
.location-label,
.location-label .tip:after {
	border-color: var(--grey);
}

/* ## background-color ## */
#cc-window .cc-window-buttons button.cc-btn-info,
#cc-window-settings .cc-window-settings-buttons button.cc-btn-settings-select {
   background-color: var(--grey);
}

/* ## color ## */
[data-role='liveButton'].mobile-header-node.cInactive .label {
	color: var(--grey);
}

/* ## fill ## */
[data-role='liveButton'].mobile-header-node.cInactive .icon,
.date-time-component .time-editor .value-wheel .time-button .icon {
	fill: var(--grey);
}


/* ============================== *
 * ## Grey - var(--grey-light) ##
 * ============================== */

/* ## background-color ## */
.display-component .display-container > .background-container,
.gui-newsitem-component .role-content-bg .gradient,
.popup-component .role-content-bg .gradient {
	background-color: var(--grey-light);
}

/* ## border-color ## */
.gui-newsitem-component .content-container,
.popup-component .content-container {
	border-color: var(--grey-light);
}

/* ## color ## */
#cc-window-info .cc-modal-close,
#cc-window-settings .cc-modal-close {
   color: var(--grey-light);
}

.runway-use-component #active > g.closed line,
.runway-use-component #active > g line.closed {
	stroke: var(--grey-light);
}


/* ============================= *
 * ## Grey - var(--grey-dark) ##
 * ============================= */

/* ## background ## */
.pika-single .is-today .pika-button {
	background: var(--grey-dark);
}

/* ## color ## */
.pika-single .pika-table th {
	color: var(--grey-dark);
}


/* =============================== *
 * ## Grey - var(--grey-darker) ##
 * =============================== */

/* ## background ## */
.swiper-pagination .swiper-pagination-bullet {
	background: var(--grey-darker);
}

/* ## border-color ## */
.busy-logo {
	border-color: var(--grey-darker);
}

/* ## color ## */
body, td, input, select,
.pika-single .pika-title .pika-label {
	color: var(--grey-darker);
}

/* ## fill ## */
.homescreen-content .device-action-icon.ios6,
svg { fill: var(--grey-darker); }

/* ## stroke ## */
.gui-setting .button #circleBorder,
.gui-state .button #circleBorder,
.homescreen-content .device-action-icon.ios7,
.locations-list .list-row.highlight .list-cell.delete-location .icon {
	stroke: var(--grey-darker);
}

/* ## color !important ## */
.highcharts-container svg text {
	/color: var(--grey-darker) !important;
}

/* ## fill !important ## */
.highcharts-container svg text {
	/fill: var(--grey-darker) !important;
}


/* ======================== *
 * ## Red - var(--error) ##
 * ======================== */

/* ## border-color ## */
.gui-menu-button.error {
	border-color: var(--error-dark);
}


/* ================================ *
 * ## Grey - var(--grey-lighter) ##
 * ================================ */

/* ## background-color ## */
.dropdown-component .role-listitems .list-item:hover {
	background-color: var(--grey-lighter);
}


/* ========================== *
 * ## White - var(--white) ##
 * ========================== */

/* ## background ## */
.cc-modal-content {
	background: var(--white);
}

/* ## background-color ## */
.arrow .point .bottom,
.arrow .point .top,
.arrow .shaft,
.arrow-container .outer-border,
.arrow-container .outer-border:after,
.casper-map-layer .busy-logo,
.casper-tab-container-fill,
.drop-down-list [data-role='valueList'],
.flighttracking-header .component-container .border-container .border,
.flighttracking-header .fill-container .border-container .border,
.flighttracking-header .logo-container .border-container .border,
.flighttracking-header .meteo-container .border-container .border,
.gui-newsitem-component .content-container .content-fill,
.login-component .background-container,
.popup-component .content-container .content-fill,
.splash-guide-tab .busy-logo .center {
	background-color: var(--white);
}

/* ## border-color ## */
#cc-window .cc-window-content:before,
.cc-modal-content:before, 
.line-container .top,
.line-container .middle,
.line-container .bottom {
	border-color: var(--white);
}


/* ## color ## */
[data-role='dateTimeDisplay'].mobile-header-node,
[data-role='liveButton'].mobile-header-node.cActive .label,
[data-role="speedControl"].mobile-header-node .text,
#cc-window .cc-window-title,
#cc-window-info .cc-modal-close:hover,
#cc-window-settings .cc-modal-close:hover,
.busy-loading .overflow .text,
.casper-see-through-tab,
.casper-vehicle.highlight .casper-vehicle-label,
.dropdown-component .role-listitems .list-item.select .label,
.flighttracking-header,
.flighttracking-header .role-live-button .label,
.flighttracking-menu .version-container,
.gui-component .role-hover-label .label-container .label,
.gui-menu .menu-button .label-container .label,
.gui-newsitem-component .header-container .role-header,
.header-container > .title,
.home-screen-tab .role-continue,
.login-component .header .title,
.login-component .login-button-container .role-submit,
.meteo-container .meteo-header,
.no-bg .casper-detour-tab .role-continue,
.no-bg .content-scroll-container .content,
.no-bg .section-container > .header.title,
.no-bg .section-container > .header > .title,
.option-list-item .gui-menu-label,
.pika-single .is-today .pika-button,
.popup-container .header .role-title,
.popup-component .header-container .role-header,
.slider-button .slider-button-text,
.slider-component .slider-label {
	color: var(--white);
}

/* ## fill ## */
[data-role='liveButton'].mobile-header-node.cActive .icon,
[data-role='playControl'].mobile-header-node > svg,
[data-role='skipback-button'].mobile-header-node svg,
.cpa-label .svg-icon,
.features-list .feature .image .icon,
.flighttracking-header .background-container .visual #shapes,
.flighttracking-header .control-button svg,
.flighttracking-header .logo-container .logo .icon,
.flighttracking-header .logo-container .logo .text,
.flighttracking-header .meteo-component .role-visual svg,
.flighttracking-header .meteo-component .role-windDirVisual svg,
.flighttracking-header .meteo-component .role-windSpeedVisual svg,
.flighttracking-header .role-live-button .icon,
.flighttracking-menu .visual-container .visual #shapes,
.gui-menu .menu-button .visual-container .icon,
.gui-menu-button .icon,
.gui-newsitem-component .role-header-bg  .visual #shapes,
.guide-container .guide-button-container .guide-button svg,
.guide-text .menu-list-bg > .visual-container .visual #shapes,
.homescreen-content .device-action-icon.android,
.homescreen-content .device-action-icon.ios6,
.location-label .svg-icon,
.login-component .visual-container .visual #shapes,
.main-menu .menu-button .visual-container .icon,
.meteo-header svg ,
.noise-tab-icon #value,
.popup-component .role-header-bg .visual #shapes,
.splash-screen-component .logo {
	fill: var(--white);
}

/* ## Stroke ## */
.circle-border #circleBorder,
.dropdown-component .display-wrapper .list-toggle .gui-menu-button .icon,
.flighttracking-header .background-container .visual #lines,
.flighttracking-header .meteo-component .role-windSpeedVisual #rope,
.flighttracking-menu .visual-container .visual #lines,
.gui-map-controls-container .control-zoom-button .icon
.gui-menu .menu-button.picked .visual-container .icon,
.gui-newsitem-component .role-header-bg  .visual #lines,
.guide-text .menu-list-bg > .visual-container .visual #lines,
.homescreen-content .device-action-icon.ios7,
.icon #tracks #line,
.login-component .visual-container .visual #lines,
.main-menu .menu-button.picked .visual-container .icon,
.meteo-header .weather-vane,
.popup-component .role-header-bg .visual #lines,
.splash-guide-tab .busy-logo #circleBorder {
	stroke: var(--white);
}


/* ============================ *
 * ## Blue - var(--outbound) ##
 * ============================ */
.flighttype-counter-component .flighttype-outbound .amount .shape {
   background: var(--outbound);
}

.flighttype-counter-component .flighttype-outbound .airplane,
.runway-use-component #active > g.outbound g.flight,
.runway-use-component #active > g.flight.outbound,
.runway-use-component #active > g.outbound g.flight.outbound {
   fill: var(--outbound);
}
 
.runway-use-component #active > g.outbound line,
.runway-use-component #active > g line.outbound,
.runway-use-component #active > g.outbound line.outbound {
	stroke: var(--outbound);
}


/* ================================ *
 * ## Blue - var(--primary-dark) ##
 * ================================ */

/* ## background-color ## */
#cc-window .cc-window-buttons button.cc-btn-accept:hover,
#cc-window-settings .cc-window-settings-buttons button.cc-btn-settings-accept:hover,
body {
   background-color: var(--primary-dark);
}

/* ## border-color ## */
#cc-window .cc-window-title,
#cc-window-info .cc-modal-close,
#cc-window-settings .cc-modal-close,
.gui-menu-button.picked {
	border-color: var(--primary-dark);
}

/* ## color ## */
#cc-window .cc-window-message a:hover, #cc-window .cc-window-message a:visited {
   color: var(--primary-dark);
}


/* =========================== *
 * ## Blue - var(--primary) ##
 * =========================== */

/* ## accent color ## */
#cc-window-settings .cc-window-settings-cookie input[type="checkbox"] {
   accent-color: var(--primary);
}

/* ## background ## */
.pika-single .pika-button:hover {
	background: var(--primary);
}

/* ## background-color ## */
#cc-window .cc-window-title,
#cc-window .cc-window-buttons button.cc-btn-accept,
#cc-window-settings .cc-window-settings-buttons button.cc-btn-settings-accept,
#cc-window-info .cc-modal-close,
#cc-window-settings .cc-modal-close,
.casper-vehicle.highlight .casper-vehicle-label,
.cpa-label .tip:after,
.flighttracking-header .overflow-container .border-container .border,
.highlight .casper-vehicle-label:after,
.location-label .tip:after,
.login-component .footer, 
.login-component .header, 
.login-component .login-button-container .role-submit {
	background-color: var(--primary);
}

/* ## border-color ## */
.flighttracking-header .overflow-container .gradient-container,
.flighttracking-menu .version-container,
.gui-menu-button,
.gui-newsitem-component .header-container,
.mobile-header .header-border,
.popup-component .header-container {
	border-color: var(--primary);
}

/* ## border-top ## */
.casper-vehicle.highlight .casper-vehicle-label:before {
	border-top-color: var(--primary);
}

/* ## color ## */
#cc-window .cc-window-message a,
.content-container .content-scroll-container a,
.section-content ul li,
.section-content a:hover,
.splash-guide-popup-component .overflow.continue .text:hover,
.splash-guide-popup-component .overflow.loading .text:hover,
.splash-guide-popup-component .role-locale-button:hover {
	color: var(--primary);
}

/* ================================= *
 * ## Blue - var(--primary-light) ##
 * ================================= */

/* ## background ## */
.pika-single .is-selected .pika-button,
.swiper-pagination .swiper-pagination-bullet-active {
	background: var(--primary-light);
}

/* ## background-color ## */
.guide-container .guide-button-container .guide-button,
.radio-button [data-role='button'] .checked-circle .circle {
	background-color: var(--primary-light);
}

/* ## color ## */
[data-role="speedControl"].mobile-header-node.open .text,
.node-overflow > .value.current,
.section-content a,
.splash-guide-popup-component .overflow.continue .text,
.splash-guide-popup-component .overflow.loading .text,
.splash-guide-popup-component .role-locale-button,
.value-wheel .swiper-slide-active {
	color: var(--primary-light);
}

/* ## fill ## */
.checkbox [data-role='button'] .check,
.date-time-component .time-editor .value-wheel .time-button:hover .icon,
.group-checkbox [data-role='button'] .check {
	fill: var(--primary-light);
}

/* ## stroke ## */
.gui-setting.checked .button #circleBorder,
.gui-state.checked .button #circleBorder {
	stroke: var(--primary-light);
}


/* =================================== *
 * ## Blue - var(--secondary-light) ##
 * =================================== */

/* ## background-color ## */
.busy-logo .center,
.login-component .login-button-container .role-submit:hover {
	background-color: var(--secondary-light);
}

/* ## stroke ## */
.busy-logo #circleBorder {
	stroke: var(--secondary-light);
}


/* ============================= *
 * ## Blue - var(--secondary) ##
 * ============================= */

/* ## background-color ## */
.guide-container .guide-button-container .guide-button-bg-dark {
	background-color: var(--secondary);
}


/* ==================================================== *
 * ## Gradient Grey - var(--grey) - var(--grey-dark) ##
 * ==================================================== */

.gui-menu-button.inactive,
.gui-menu-button.disabled,
.gui-menu-button.location-interactive-button,
.gui-menu .menu-button .overlay .background-container .disabled,
.main-menu .menu-button .overlay .background-container .disabled,
.swiper-navigation .navigation-button.swiper-button-disabled {
	background: var(--grey); /* Old browsers */
	background: linear-gradient(135deg, var(--grey) 0%, var(--grey-dark) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


/* ====================================== *
 * ## Gradient Red - var(--error-light) - var(--error) ##
 * ====================================== */

.gui-menu-button.error {
	background: var(--error-light);
	background: linear-gradient(to bottom, var(--error-light) 0%, var(--error) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


/* ======================================= *
 * ## Gradient Blue - var(--primary-light) - var(--primary) ##
 * ======================================= */

.cpa-label,
.flighttracking-menu > .content-container > .gradient-container > .gradient,
.flighttracking-menu .content-container > .gradient-container > .gradient,
.flighttracking-header .background-container .gradient,
.gui-background-container,
.gui-component .role-hover-label .background-container .gradient.light,
.gui-newsitem-component .role-header-bg .gradient,
.guide-text .menu-list-bg > .gradient,
.location-label,
.popup-component .role-header-bg .gradient {
	background: var(--primary-light); /* Old browsers */
	background: linear-gradient(135deg, var(--primary-light) 0%,var(--primary) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


/* ======================================= *
 * ## Gradient Blue - var(--primary-light) - var(--primary) ##
 * ======================================= */

.gui-menu-button {
	background: var(--primary-light);
	background: linear-gradient(to bottom, var(--primary-light) 0%, var(--primary) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


/* ============================================================ *
 * ## Gradient Blue var(--secondary) - var(--secondary-dark) ##
 * ============================================================ */

.flighttracking-menu > .content-container .gradient-container.menu > .gradient,
.flighttracking-menu .content-container .gradient-container.menu > .gradient,
.gui-menu-button.picked,
.guide-text .menu-list-bg > .gradient-container .gradient,
.main-menu .menu-button .overlay .background-container .selected,
.main-menu .role-hover-label .background-container .gradient.dark {
	background: var(--secondary); /* Old browsers */
	background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}