@charset "UTF-8";
/* CSS Document */

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

.overlay {
	left: 9px;

	width: 210px;
	padding: 0 16px;
	background: rgba(12,12,12,0.68);
	border-radius: 4px 4px;
	color: #FFF;
	z-index: 100;
	position: absolute;

	font-family: "proxima-nova",sans-serif;
	font-size: 0.76em;
	line-height: 1.3em;
	color: #FFF;

	z-index: 5000000000;
}
.dark .overlay {
	background: rgba(255,255,255,0.9);
	color: #000;
}

#parallel.overlay {
	top: 9px;
	height: 20px;
	padding-top: 5px;
}
#info.overlay {
	top: 36px;
}
#info.overlay.top {
	top: 14px;
}

#parallel {
	background: url("../glyphs/parallel-logo.svg") no-repeat center 4px, rgba(12,12,12,0.68);
	background-size: 80px 60px;
}
.dark #parallel {
	background: url("../glyphs/parallel-logo.svg") no-repeat center 4px, rgba(255,255,255,0.9);
	background-size: 80px 60px;
}
#parallel:hover {
	background: url("../glyphs/parallel-logo.svg") no-repeat center -16px, rgba(223,94,38,1);
	background-size: 80px 60px;
	cursor: pointer;
}

.action {
	border-bottom: 1px dotted #999;
	padding-bottom: 0;
	display: inline;
}
.action:hover {
	cursor:pointer;
	border-bottom: 1px dotted #ECCB1D;
}
.action.disabled {
	cursor:default;
	color: #CCCCCC;
}
.action.selected {
	color: #ECCB1D;
}

@media only screen
and (max-device-width: 420px)
and (-webkit-min-device-pixel-ratio: 2) { .not_iphone {display: none;} }

@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {.not_iphone {display: none;} }

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { .not_ipad {display: none;} }

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { .not_ipad {display: none;} }

.overlay a {color: #CCC; text-decoration: none;}
.dark .overlay a {color: #333; text-decoration: none;}
.overlay a:hover {color: #df5e26;}

#key {
    height: 18px;
    margin-top: 3px;
    border: solid 1px #FFF;
    background: linear-gradient(to right, rgba(153,195,225,0.9), rgba(136,4,11,0.9)), #FFF;
}
.dark #key {
	border: solid 1px #000;
}

#key.bgyor {
	background: linear-gradient(to right, rgb(49,121,162),rgb(74,148,160),rgb(107,181,156),rgb(148,201,151),rgb(195,211,145),rgb(229,210,133),rgb(229,181,115),rgb(229,138,95),rgb(213,96,74),rgb(163,60,50),rgb(109,34,32));
	opacity: 0.9;
}
#key.roygb {
	background: linear-gradient(to left, rgb(49,121,162),rgb(74,148,160),rgb(107,181,156),rgb(148,201,151),rgb(195,211,145),rgb(229,210,133),rgb(229,181,115),rgb(229,138,95),rgb(213,96,74),rgb(163,60,50),rgb(109,34,32));
	opacity: 0.9;
}

#min {float: left; font-size: 11px; padding: 1px 0 0 3px; color: #000;}
#min.flip {color: #FFF; margin-left: -32px;}
#min.combined {color: #FFF; margin-left: -74px;}

#max {float: right; font-size: 11px; padding: 1px 3px 0 0; color: #FFF}
#max.flip {color: #FFF; margin-right: -32px;}
#max.combined {color: #FFF; margin-right: -76px;}

#key #min.hidden, #key #max.hidden{
	display:none;
}
#decile_scale {
    margin-top: 1px;
    height: 4px;
    background: url("../images/decile_scale.png") 0 0 no-repeat;
    background-size: 210px 8px;
}
.dark #decile_scale {
    background: url("../images/decile_scale_dark.png") 0 0 no-repeat;
    background-size: 210px 8px;
}
#decile_scale.nonlinear {
	background: none;
	position: relative;
}
#decile_scale.nonlinear .tick {
	width: 1px;
	height: 4px;
	position: absolute;
	background: #FFF;
}
.dark #decile_scale.nonlinear .tick {
	background: #333;
}
#decile_phrase {
	font-size: 9px;
}
.blank {
    height: 18px;
    width: 209px;
    background: rgba(0,0,0,0.8);
}
.blank.min {
    width: 0px;
    float: left;
}
.blank.max {
    width: 0px;
    float: right;
}

#marker_holder {
    margin: 1px -7px 0 -6px;
    height: 10px;
    width: 222px;

    font-size: 9px;
    line-height: 13px;
    text-align: center;
}

.drag_marker {
    width: 12px;
    height: 12px;
    background: url("../images/triangle.svg?") 0 0 no-repeat;
    cursor: ew-resize;
}
.dark .drag_marker {
    background: url("../images/triangle_dark.svg?") 0 0 no-repeat;
}
.drag_marker.min {
    float: left;
    margin-left: 0px;
}
.drag_marker.max {
    float: right;
    margin-right: 0px;
}

.group {
  	margin-top: 8px;
}
.subgroup {
	padding-left: 4px;
	border-left: 14px solid #333;
	margin-top: 2px;
}

.mapboxgl-ctrl-attrib a {
	font-weight: 600;
}

.mapboxgl-popup-anchor-bottom {
	margin-top: -10px;
	pointer-events: none;
}
.mapboxgl-popup-anchor-top {
	margin-top: 10px;
	pointer-events: none;
}
.mapboxgl-popup-anchor-right {
	margin-left: -10px;
	pointer-events: none;
}
.mapboxgl-popup-anchor-left {
	margin-left: 10px;
	pointer-events: none;
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
	border-top-color: rgba(0,0,0,0.68) !important;
}
.dark .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
	border-top-color: rgba(255,255,299,0.9) !important;
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
	border-bottom-color: rgba(0,0,0,0.68) !important;
}
.dark .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
	border-bottom-color: rgba(255,255,299,0.9) !important;
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
	border-left-color: rgba(0,0,0,0.68) !important;
}
.dark .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
	border-left-color: rgba(255,255,299,0.9) !important;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
	border-right-color: rgba(0,0,0,0.68) !important;
}
.dark .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
	border-right-color: rgba(255,255,299,0.9) !important;
}
.mapboxgl-popup-content {
	font-family: "proxima-nova",sans-serif;
	padding: 6px 10px 6px 10px;
	background: rgba(0,0,0,0.68);
	color: #FFF;
	pointer-events: none !important;
	line-height: 14px;
}
.mapboxgl-popup.freeze {
	pointer-events: auto !important;
}
.mapboxgl-popup.freeze .mapboxgl-popup-content{
	pointer-events: auto !important;
}
.dark .mapboxgl-popup-content {
	background: rgba(255,255,299,0.9);
	color: #000;
}

#qualification {
	height: 12px;
	margin-top: 3px;
	text-align: center;
	font-size: 9px;
	text-transform: uppercase;
}
#qualification span {
	font-size: 12px;
	vertical-align: -1px;
}

.dark .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
	background-color: rgba(255, 255, 255, 0.2);
	color: #FFF;
}
.dark .mapboxgl-ctrl.mapboxgl-ctrl-attrib a {
	color: #FFF;
}

.ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content {z-index: 6000000000;}

/* spectrum colour picker */

.sp-container {
	border-radius: 4px;
	border: 1px solid #666;
	background: #F0F0F0;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
}
.sp-dd {
	display: none;
}
.sp-replacer {
	border: none;
	background: none;
	padding: 0;
}
.sp-preview {
	height: 20px; width: 20px;
	border: 1px solid #FFF; border-radius: 50%;
	background: #333;
}
.sp-preview-inner {
	height: 18px; width: 18px;
	margin: 1px 0 0 1px;
	border: none; border-radius: 50%;
	cursor: pointer;
}
.sp-replacer.no-colour .sp-preview-inner {
	background: url(../glyphs/no-colour.svg?) 0px 0px no-repeat !important;
	background-size: 36px 36px;
}
.sp-container .toggle_control_holder {
	margin: 8px 0 6px 10px;
}
.sp-container .toggle_control_holder+.sp-palette-container {
	margin-top: -6px;
}