/* ===================== *
 * ## Green (#64AB3E) ##
 * ===================== */

.runway-use-component #active > g.inbound line,
.runway-use-component #active > g line.inbound { stroke: #64AB3E; }


/* ==================== *
 * ## Grey (#888888) ##
 * ==================== */

/* ## border-color ## */
.gui-menu-button.inactive,
.gui-menu-button.disabled,
.swiper-navigation .navigation-button.swiper-button-disabled {
   border-color: #888888;
}


/* ==================== *
 * ## Grey (#C5C5C5) ##
 * ==================== */

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

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

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


/* ==================== *
 * ## Grey (#E9E9E9) ##
 * ==================== */

/* ## background-color ## */
.display-component .display-container > .background-container,
.gui-newsitem-component .role-content-bg .gradient,
.popup-component .role-content-bg .gradient {
   background-color: #E9E9E9;
}

/* ## border-color ## */
.gui-newsitem-component .content-container,
.popup-component .content-container {
   border-color: #B1B1B1;
}


/* ==================== *
 * ## Grey (#B2B2B2) ##
 * ==================== */

.runway-use-component #active > g.closed line,
.runway-use-component #active > g line.closed { stroke: #B2B2B2; }


/* ==================== *
 * ## Grey (#888888) ##
 * ==================== */

/* ## background ## */
.pika-single .is-today .pika-button {
   background: #888888;
}

/* ## color ## */
.pika-single .pika-table th {
   color: #888888;
}


/* ==================== *
 * ## Grey (#646464) ##
 * ==================== */

/* ## background ## */
.swiper-pagination .swiper-pagination-bullet {
   background: #646464;
}

/* ## border-color ## */
.busy-logo {
   border-color: #646464;
}

/* ## color ## */
body, td, input, select,
.pika-single .pika-title .pika-label {
   color: #646464;
}

/* ## fill ## */
.homescreen-content .device-action-icon.ios6,
svg { fill: #646464; }

/* ## stroke ## */
.gui-setting .button #circleBorder,
.gui-state .button #circleBorder,
.homescreen-content .device-action-icon.ios7 {
   stroke: #646464;
}


/* =================== *
 * ## Red (#9F3737) ##
 * =================== */

/* ## border-color ## */
.gui-menu-button.error {
   border-color: #9F3737;
}


/* ===================== *
 * ## White (#FFFFFF) ##
 * ===================== */

/* ## 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,
.popup-component .content-container .content-fill,
.splash-guide-tab .busy-logo .center {
   background-color: #FFFFFF;
}

/* ## border-color ## */
.line-container .top,
.line-container .middle,
.line-container .bottom {
   border-color: #FFFFFF;
}


/* ## color ## */
[data-role='dateTimeDisplay'].mobile-header-node,
[data-role='liveButton'].mobile-header-node.cActive .label,
[data-role="speedControl"].mobile-header-node .text,
.busy-loading .overflow .text,
.casper-see-through-tab,
.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,
.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: #FFFFFF;
}

/* ## fill ## */
[data-role='liveButton'].mobile-header-node.cActive .icon,
[data-role='playControl'].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,
.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: #FFFFFF;
}

/* ## Stroke ## */
.circle-border #circleBorder,
.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,
.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: #FFFFFF;
}


/* ==================== *
 * ## Blue (#11A2FE) ##
 * ==================== */
 
.runway-use-component #active > g.outbound line,
.runway-use-component #active > g line.outbound { stroke: #11A2FE; }


/* ==================== *
 * ## Blue (#1C5C9F) ##
 * ==================== */

/* ## border-color ## */
.gui-menu-button.picked {
   border-color: #1C5C9F;
}

/* ==================== *
 * ## Blue (#287DB3) ##
 * ==================== */

/* ## background ## */
.pika-single .pika-button:hover {
   background: #287DB3;
}

/* ## background-color ## */
.cpa-label .tip:after,
.flighttracking-header .overflow-container .border-container .border,
.highlight .casper-vehicle-label,
.location-label .tip:after {
   background-color: #287DB3;
}

/* ## 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: #287DB3;
}

/* ## border-top ## */
.highlight .casper-vehicle-label:after {
   border-top-color: #287DB3;
}

/* ## color ## */
.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: #287DB3;
}

/* ==================== *
 * ## Blue (#3FACE2) ##
 * ===================== */

/* ## background ## */
.pika-single .is-selected .pika-button,
.swiper-pagination .swiper-pagination-bullet-active {
   background: #3FACE2;
}

/* ## background-color ## */
.guide-container .guide-button-container .guide-button,
.radio-button [data-role='button'] .checked-circle .circle {
   background-color: #3FACE2;
}

/* ## 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: #3FACE2;
}

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

/* ## stroke ## */
.gui-setting.checked .button #circleBorder,
.gui-state.checked .button #circleBorder {
   stroke: #3FACE2;
}


/* ==================== *
 * ## Blue (#379CD2) ##
 * ==================== */

/* ## background-color ## */
.busy-logo .center {
   background-color: #379CD2;
}

/* ## stroke ## */
.busy-logo #circleBorder {
   stroke: #379CD2;
}


/* ==================== *
 * ## Blue (#375C6E) ##
 * ==================== */

/* ## background-color ## */
body { background-color: #375c6e; }


/* ==================== *
 * ## Blue (#2E80A9) ##
 * ==================== */

/* ## background-color ## */
.guide-container .guide-button-container .guide-button-bg-dark { background-color: #2E80A9; }



/* ======================================= *
 * ## Gradient Grey (#B6B6B6 - #999999) ##
 * ======================================= */

.gui-menu-button.inactive,
.gui-menu-button.disabled,
.gui-menu .menu-button .overlay .background-container .disabled,
.main-menu .menu-button .overlay .background-container .disabled,
.swiper-navigation .navigation-button.swiper-button-disabled {
   background: #B6B6B6; /* Old browsers */
   background: linear-gradient(135deg, #B6B6B6 0%,#999999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B6B6B6', endColorstr='#999999',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* ====================================== *
 * ## Gradient Red (#E26565 - #D25A5A) ##
 * ====================================== */

.gui-menu-button.error {
   background: #E26565;
   background: linear-gradient(to bottom, #E26565 0%,#D25A5A 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E26565', endColorstr='#D25A5A',GradientType=0 ); /* IE6-9 */
}


/* ======================================= *
 * ## Gradient Blue (#45BEFB - #2D8BC7) ##
 * ======================================= */

.gui-menu .menu-button .overlay .background-container .selected {
   background: #45BEFB; /* Old browsers */
   background: linear-gradient(135deg, #45BEFB 0%,#2D8BC7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45BEFB', endColorstr='#2D8BC7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


/* ======================================= *
 * ## Gradient Blue (#3EABE1 - #287DB3) ##
 * ======================================= */

.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: #3EABE1; /* Old browsers */
   background: linear-gradient(135deg, #3EABE1 0%,#287DB3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3EABE1', endColorstr='#287DB3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


/* ======================================= *
 * ## Gradient Blue (#3FACE2 - #379CD2) ##
 * ======================================= */

.gui-menu-button {
   background: #3FACE2;
   background: linear-gradient(to bottom, #3FACE2 0%,#379CD2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3FACE2', endColorstr='#379CD2',GradientType=0 ); /* IE6-9 */
}


/* ======================================= *
 * ## Gradient Blue (#2E80A9 - #1E5E86) ##
 * ======================================= */

.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: #2E80A9; /* Old browsers */
   background: linear-gradient(135deg, #2E80A9 0%,#1E5E86 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E80A9', endColorstr='#1E5E86',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}