* {margin: 0; padding: 0;}
html, body {height: 100%;}
body {font: 14px/1.4 Arial, Sans-Serif; overflow-x: hidden;}

body.loading:before {
	display: block;
	content: "";
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 99991;
	background: rgba(255,255,255,.6);
}
body.loading:after {
	width: 50px;
    height: 50px;
    border-top: 6px solid #bbb;
    border-right: 6px solid #bbb;
    border-bottom: 6px solid #bbb;
    border-left: 6px solid #e32418;
    border-radius: 50%;
    -webkit-animation: rotate .75s infinite linear, opacity 1s forwards;
    -moz-animation: rotate .75s infinite linear, opacity 1s forwards;
    animation: rotate .75s infinite linear, opacity 1s forwards;
    opacity: 0;
    padding: 0;

	position: fixed;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	display: block;
	content: "";
	z-index: 99992;
}
@keyframes rotate{
	from { transform: rotate(0deg) translate3d(0,0,0); }
	to { transform: rotate(359deg) translate3d(0,0,0); }
}
@keyframes opacity {
	from { opacity:0; }
	to { opacity: 1; }
}

#page-wrap {margin: 50px;}
p {margin: 20px 0;}
.clear {clear:both;}

.ui-dialog {max-width: 95%;}
.ui-dialog .ui-dialog-content {padding: 1em 1em .5em;}
.ui-corner-all {-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;}
.ui-widget-header {background: #fff;}
.ui-dialog .ui-dialog-titlebar {border: none; border-bottom: 1px solid #aaa;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {background: #e6e6e6;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {background: #dadada;}

fieldset {
	border: 1px solid #ddd;
	padding: 0 1.4em 1.4em 1.4em;
	margin: 0 0 1.5em 0;
}

/*validation styles*/
.error, .field-validation-error, .ValidationMessage, .validation-summary-errors{color: #ff0000; text-align: center;}
.input-validation-valid, .field-validation-valid, .validation-summary-valid{display: none;}
.input-validation-error{border: 1px solid #ff0000; background-color: #ffeeee; outline: none;}
.input-validation-error:focus, input[type="text"].input-validation-error:focus, select.input-validation-error:focus{outline: none;}
.validation-summary-errors span{font-weight: 700;}
.validation-summary-errors ul{list-style: disc inside;}
.validation-summary-errors ul li{font-weight: normal;}
.validation-summary-errors ul li label, .validation-summary-errors ul li span{ display: inline !important; font-weight: normal;}
.validation-summary-warnings span{font-weight: 700;}
.validation-summary-warnings ul{list-style: disc inside;}
.validation-summary-warnings ul li{font-weight: normal;}
.validation-summary-warnings ul li label, .validation-summary-errors ul li span{ display: inline !important; font-weight: normal;}
#error-list{white-space: normal;}
.validation-summary-valid{font: 13px Helmet,Freesans,sans-serif; display: none;}

.field-label{min-width: 80px; white-space: nowrap; color: #000000; font-size: 9pt; font-weight: bold; vertical-align: middle;}


/*SVG Icons*/
.kpi-ui {
	content: '';
	background-image: url(images/icons.png);
	background-image: linear-gradient(transparent, transparent), url(images/icons.svg);
	background-repeat: no-repeat;
	display: inline-block;
}
.kpi-ui.nav-away {background-position: 0 0; width: 14px; height: 0; padding-top:14px; overflow: hidden; margin: 0 0 -2px 6px;}
.kpi-ui.nav-away:hover {background-position: 0 -40px;}
.kpi-ui#prev-chart {background-position: -19px 0; width: 22px; height: 27px; position: absolute; z-index: 99; cursor: pointer;}
.kpi-ui#prev-chart:hover {background-position: -19px -40px;}
.kpi-ui#next-chart {background-position: -49px 0; width: 22px; height: 27px; position: absolute; z-index: 99; cursor: pointer;}
.kpi-ui#next-chart:hover {background-position: -49px -40px;}
.kpi-ui.up {width: 17px; height: 21px; background-position: -75px 0;}
.kpi-ui.down {width: 17px; height: 21px; background-position: -95px 0;}
.kpi-ui.triangle-s {width: 10px; height: 7px; background-position: -120px -1px; margin-left: 9px;}
.kpi-ui.triangle-s-grey {width: 10px; height: 7px; background-position: -140px -1px; margin-left: 9px;}
.kpi-ui.export {background-position: 0 -80px; width: 16px; height: 0; padding-top:14px; overflow: hidden; margin: 0 0 -2px 6px;}
.kpi-ui.triangle-w {background-position: -77px -80px; width: 12px; height: 10px; display: block; padding: 0; margin: 0;}
.kpi-ui.pushpin {background-position: -155px 0px; width: 20px; height: 33px; display: inline-block; padding: 0; margin: 0; cursor: pointer; position: relative;}
.kpi-ui.pushpin:hover {z-index: 3000;}

/*Header and navigation styling*/
#logo {background: url(images/kettle-dashboard.jpg) left no-repeat; float:left; height: 50px; width: 325px; margin-top: 20px; cursor: pointer;}
#bread-crumbs {float: left; clear: both; margin: 10px 10px 10px 20px; font-weight: bold;}
#top-nav {float:right; margin-right: 15px; font-size: 12px; color: #fff;}
#top-nav a {color: #fff; text-decoration: none;}
#top-nav a:hover {color: #fff; text-decoration: underline;}
#nav {float: left; margin: 50px 0 0 20px; font-size: 0;}
.custom-select {
	height: 28px;
	line-height: 30px;
	border: 1px solid;
	display: inline-block;
	margin-left: 10px;
	font-size: 13px;
	padding: 0 10px;
	cursor: pointer;
	color: #fff;
	white-space: nowrap;
}
.nav-panel {position: absolute; z-index: 99; border: 1px solid; border-top: none;}
.nav-panel span, .nav-panel a {display: block; padding: 4px 10px; color: #fff; font-size: 13px; cursor: pointer; text-decoration: none;}

.custom-select#campaign-select {background-color: #999999; border-color: #999999;}
.custom-select#campaign-select:hover {background-color: #b0b0b0;}
.nav-panel#campaign-panel {background-color: #999999; border-color: #999999;}
.nav-panel#campaign-panel span:hover, .nav-panel#campaign-panel a:hover {background-color: #b0b0b0;}

.custom-select#report-select {background-color: #3265ff; border-color: #3265ff;}
.custom-select#report-select:hover {background-color: #5d80ff;}
.custom-select#report-select>span.text::before {content: "Export";}
.nav-panel#report-panel {background-color: #3265ff; border-color: #3265ff;}
.nav-panel#report-panel span:hover, .nav-panel#report-panel a:hover {background-color: #5d80ff;}

.custom-select#map-select {background-color: #fff; border-color: #999; color: #333; float: left; margin-left: 0; margin-right: 10px;}
.custom-select#map-select:hover {background-color: #f6f6f6;}
.custom-select#map-select>span.triangle-s-grey {float: right; margin-top: 12px;}
.nav-panel#map-panel {background-color: #fff; border-color: #999;}
.nav-panel#map-panel span, .nav-panel#map-panel a {color: #333;}
.nav-panel#map-panel span:hover, .nav-panel#map-panel a:hover {background-color: #f6f6f6;}

.custom-select#command-select {
	background-color: #fff;
	border-color: #999;
	color: #333;
	position: absolute;
	top: 0;
	right: 44px;
	bottom: 0;
	left: 0;
	margin: 0 0 0 -1px;
	border-top: none;
	height: auto;
}
.custom-select#command-select:hover {background-color: #f6f6f6;}
.custom-select#command-select>span.triangle-s-grey {float: right; margin-top: 12px;}
.custom-select#command-select>span.text {float: left; display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis;}
.nav-panel#command-panel {background-color: #fff; border: 1px solid #999;}
.nav-panel#command-panel span, .nav-panel#command-panel a {color: #333;}
.nav-panel#command-panel span:hover, .nav-panel#command-panel a:hover {background-color: #f6f6f6;}

#nav>#auth-level {display: inline-block; height: 28px; border: 1px solid #999999; font-size: 0;}
#nav>#auth-level>a {
	background-color: #fff; 
	height: 28px;
	line-height: 30px;
	display: inline-block;
	font-size: 13px;
	padding: 0 10px;
	cursor: pointer;
	color: #333;
	white-space: nowrap;
	margin: 0;
	position: relative;
	text-decoration: none;
}
#nav>#auth-level>a>svg {display: none;}
#nav>#auth-level>a.selected {background-color: #999999; color: #fff;}
#nav>#auth-level>a.selected>svg {display: block; position: absolute; bottom: -6px; left: 50%; margin-left:-5px;}
#nav>#auth-level>a:hover {background-color: #b0b0b0; color: #fff;}
#nav>#auth-level>a.selected:hover path.fill {fill: #b0b0b0;}

.content-container {clear: both; position: absolute; top: 120px; right: 0; bottom: 0; left: 0;}

/*Charts and graphs*/
#chart-row {width: 100%; margin: 0; overflow-x: auto; white-space: nowrap;}
#chart-row .chart-container {width: 22%; margin: 0 1.2%; display: inline-block; position: relative; height: 400px; min-width: 200px; padding-bottom: 45px;}

/*Highcharts FF title fix*/
svg:not(:root) {overflow: visible;}
.highcharts-title {width: 100% !important; text-align: center;}

/*Kettle Chart Styles*/
#chart-row .chart-container#kettle-chart {height: auto; min-width: 175px; width: 18%; margin: 0 1.2% 0 3.5%; padding:0px;}
#chart-row .chart-container#kettle-chart img {max-width: 100%; height: auto; margin: 0 0 75px;}

#fill-area-kettle-chart {background: #fff; position: absolute; left: 10%; right: 10%; bottom: 75px; margin-bottom: 6%; top: 32%; border-top: 5px solid #fff; border-bottom: 5px solid #fff;}
#filler-kettle-chart {position: absolute; left: 5px; right: 5px; bottom: 0; top: 100%;}
#filler-label-kettle-chart {margin: auto; height: 30px; position: absolute; z-index:99; top: 0; left: 0; bottom: 0; right: 0; text-align: center; font-size: 22px; color: #fff; cursor: default; display: none;}
#title-kettle-chart {color: #333333; font-size: 18px; position: absolute; bottom: 15px; left: 0; right: 0; text-align: center; display: none;}

/*Mobile Charts and graphs*/
#mobile-chart-row {height: 345px; width: 250px; margin: 0 auto;}
#mobile-chart-row .chart-container {height: 300px; width: 250px; right: 0; padding-bottom: 45px; display: block !important; background: #fff;}

/*Mobile Kettle Chart Styles*/
#mobile-chart-row .chart-container#mobile-kettle-chart {height: auto; margin: 0; padding:0px;}
#mobile-chart-row .chart-container#mobile-kettle-chart img {max-width: 100%; height: auto; margin: 0 0 75px;}

#fill-area-mobile-kettle-chart {background: #fff; position: absolute; left: 10%; right: 10%; bottom: 75px; margin-bottom: 6%; top: 32%; border-top: 5px solid #fff; border-bottom: 5px solid #fff;}
#filler-mobile-kettle-chart {position: absolute; left: 5px; right: 5px; bottom: 0; top: 100%;}
#filler-label-mobile-kettle-chart {margin: auto; height: 30px; position: absolute; z-index:99; top: 0; left: 0; bottom: 0; right: 0; text-align: center; font-size: 22px; color: #fff; cursor: default; display: none;}
#title-mobile-kettle-chart {color: #333333; font-size: 18px; position: absolute; bottom: 15px; left: 0; right: 0; text-align: center; display: none;}

#mobile-chart-nav {position: relative;}

/*kpi table pages*/
div.main-container {
	padding: 20px 20px 140px;
	overflow-x: auto;
}
table.main {
	margin: 0;
	padding: 0 10px 10px;
	max-width: 100%;
	width: 100%;
	white-space: nowrap;

	/*disable text selection*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	/*border and shadow*/
	border: 1px solid #999;
	/*-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-shadow: 4px 4px 4px #aaa;*/
}

table.main td.fixed-col {width: 1%; vertical-align: top;}
table.main td.scrollable-col {overflow-x: scroll; width: auto; max-width: 1px; white-space: nowrap;}
table.main table {width: 100%; max-width: 100%;}

table.main td.scrollable-col table tr:nth-of-type(even) {background-color: #eee;}
table.main table th {white-space: pre-wrap; padding: 12px 6px; vertical-align: middle; border-bottom: 1px solid #ccc; background-color: #fff; color: #000; font-weight: bold; text-align: center; cursor: default;}
table.main table th>div {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
table.main table td {position: relative; padding: 7px 8px; height: 21px; line-height: 21px; vertical-align: middle; border: 1px solid #fff; border-top: none; border-bottom: none; text-align: center; cursor: default;}
table.main td.scrollable-col table tr td:first-child {border-left: none;}
table.main td.fixed-col table tr td {border-left: none; background-color: #fff; text-align: right; width: 1%; white-space: nowrap; cursor: default;}
table.main table tr td:last-child {border-right: none;}
table.main table tr:last-child td {font-weight: bold;}
table.main td.fixed-col table tr.hovered td, table.main td.scrollable-col table tr.hovered td {background-color: #b6e3ff; border-color:#b6e3ff; cursor: pointer;}
table.main td.fixed-col table tr.selected td, table.main td.scrollable-col table tr.selected td {background-color: #aad7f9; border-color:#aad7f9;}

.change-indicator {position: absolute; left: 6px;}
table.main td.data-changed {padding-left: 29px;}
table.main td span.count-indicator {
	padding: 4px;
	border: 1px solid #ccc;
	background: #caf6ff;
	line-height: 8px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	display: inline-block;
	font-size: 11px;
	font-weight: normal;

	-webkit-transition: background-color .35s, border-color .35s, color .35s;
	-moz-transition: background-color .35s, border-color .35s, color .35s;
	transition: background-color .35s, border-color .35s, color .35s;
}
table.main td span.count-indicator:hover {
	background: #3265ff;
	border-color: #3265ff;
	color: white;
}

div.main-tooltip {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	border: 1px solid #999;
	/*-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;*/
	box-shadow: 1px 1px 6px #666;
	overflow: visible;
}
svg.main-tooltip-point {position: absolute; top: -7px; right: 10px; height: 7px; overflow: hidden;}
div.main-tooltip table, .fancy-table table {padding: 4px 8px; min-width: 160px;}
div.main-tooltip table tr:nth-of-type(even), .fancy-table table tr:nth-of-type(even) {background-color: #eee;}
div.main-tooltip table td, .fancy-table table td {padding: 6px; cursor: default; text-align: right;}
div.main-tooltip table td:first-child, .fancy-table table td:first-child {font-weight: bold; width: 1px;}
div.main-tooltip table th, .fancy-table table th {white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; padding: 6px; vertical-align: middle; border-bottom: 1px solid #ccc; background-color: #fff; color: #000; font-weight: bold; text-align: center; cursor: default;}

.fancy-table table table.fancy-inner-table {padding: 0; border: 1px solid #ccc; background: #f5f5f9;}
.fancy-table table table.fancy-inner-table tr {background: none !important;}
.fancy-table table table.fancy-inner-table tr:first-child td, .fancy-table table table.fancy-inner-table tr:last-child td {background: #ececf4;}
.fancy-table table table.fancy-inner-table tr:first-child td {border-bottom:1px solid #ccc;}
.fancy-table table table.fancy-inner-table tr:last-child td {border-top:1px solid #ccc;}
.fancy-table table table.fancy-inner-table td:first-child {font-weight: normal; width: 1px;}

/* map */
.map-table {width: 100%; height: 100%;}
.map-table td>div.map-wrapper {position: relative; height: 100%;}
.map-table tr:first-child td {height: 1%;}
.map-table tr:last-child td {height: 99%;}

.map-header {padding: 15px 20px;}
.map-header .map-select-desc {color: #999;}
.map-header .map-select-desc .map-select-desc-header {color: #000; font-size: 20px; display: inline-block; margin-right: 4px;}
.map-container {
	background: #fff;
	padding: 0;
	margin: 0;
	clear: both;
	border: 1px solid #999;
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 20px;
	left: 20px;
	min-height: 250px;
	overflow: hidden;
	/*-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-shadow: 4px 4px 4px #aaa;*/
}

/* legend */
.map-container>.legend {
	background: #fff;
	font-size: 13px;
	color: #000;
	padding: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 220px;
	border-right: 1px solid #999;
	-moz-transition: left 0.3s;
	-webkit-transition: left 0.3s;
	transition: left 0.3s;
}
.map-container>.legend>.collapse-btn-conainer {background: #fff; position: absolute; top: 0; right: 0; left: 0; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;}
.map-container>.legend>.collapse-btn-conainer>.collapse-btn {background: #fff; position: relative; margin: 0; padding: 10px 16px 9px; border-bottom: 1px solid #999; float: right; cursor: pointer;}
.map-container>.legend>.collapse-btn-conainer>.collapse-btn:hover {background: #f6f6f6;}

/* legend items*/
.map-container>.legend>.description {position: absolute; top: 40px; right: 10px; bottom: 40px; left: 10px;}
.map-container>.legend>.items {padding: 5px 0; position: absolute; top: 30px; right: 0; bottom: 40px; left: 0; overflow-y: auto; display: none;}
.map-container>.legend>.items>.item {padding: 5px 10px; min-height: 56px;}
.map-container>.legend>.items>.item>.color {width: 54px; height: 54px; margin-right: 10px; float: left; border: 1px solid #999; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
.map-container>.legend>.items>.item>.text {line-height: 18px;}

.stat1>.color, .red {background: #ef636b; fill: #ef636b; fill-opacity: 0.5;}
.stat2>.color, .orange {background: #f7bd7b; fill: #f7bd7b; fill-opacity: 0.5;}
.stat3>.color, .yellow {background: #efef7b; fill: #efef7b; fill-opacity: 0.5;}
.stat4>.color, .green {background: #7bef73; fill: #7bef73; fill-opacity: 0.5;}

/* legend footer */
.map-container>.legend>.footer {border-top: 1px solid #999; padding: 0 10px; height: 40px; line-height: 40px; position: absolute; left: 0; right: 0; bottom: 0; display: none;}

/* collapsed legend */
.map-container>.legend.collapsed {left: -251px;}
.map-container>.legend.collapsed>.collapse-btn-conainer {right: -139px; left: 250px; border: none;}
.map-container>.legend.collapsed>.collapse-btn-conainer>.collapse-btn {padding: 9px 16px; border: 1px solid #999; border-top: none; border-left: none; float: left; top: 29px;}
.map-container>.legend.collapsed>.collapse-btn-conainer>#command-select {right: 0; margin: 0;}
.map-container>.legend.collapsed>.collapse-btn-conainer>#command-select>span.text {max-width: 65px;}

/* map */
.map-container>.map {position: absolute; top: 0; right: 0; bottom: 0; left: 220px; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;}
.map-container>.map.collapsed {left: 0;}

/* bing map overrides */
.NavBar_compassControlContainer, .NavBar_zoomControlContainer, .NavBar_modeSelectorControlContainer {border-bottom: 1px solid #999; background: #fff !important;}
.MicrosoftMap .OverlaysTL>div:last-of-type {border-right: 1px solid #999;}
.NavBar_ModeSelectorControl>ul, .MicrosoftMap .OverlaysTL>div>div {border: 1px solid #999; background: #fff; margin-left: -1px;}

#dlgZipInfo .field-label {text-align: right; padding-right: 10px; white-space: normal;}
#dlgZipInfo>table {width: 100%; height: 100%;}
#dlgZipInfo>table td {vertical-align: middle;}
#dlgZipInfo>table td.zipInfo-general {padding: 10px 20px; line-height: 20px; font-size: 14px;}
#dlgZipInfo>table td.zipInfo-general .field-label {font-size: 14px;}
#dlgZipInfo>table td.zipInfo-general>table {padding-right: 40px; margin: 0 auto;}
#dlgZipInfo>table td.zipInfo-general>table tr>td {padding-top: 7px; padding-bottom: 7px;}
#dlgZipInfo>table td.zipInfo-general>table tr:first-child>td {padding-top: 0;}
#dlgZipInfo>table td.zipInfo-general>table tr:last-child>td {padding-bottom: 0;}
#dlgZipInfo>table td#dvZipInfo_kpistats {width: 1%; white-space: nowrap; padding: 10px; line-height: 21px; font-size: 13px;}
#dlgZipInfo>table td#dvZipInfo_kpistats .field-label {font-size: 13px;}
#dlgZipInfo>table td#dvZipInfo_kpistats>table {border: 1px solid #aaa;}
#dlgZipInfo>table td#dvZipInfo_kpistats>table th {white-space: nowrap;}

.zipText10 div, .zipText11 div, .zipText12 div, .zipText13 div, .zipText14 div, .zipText15 div{
    color: black !important; 
    text-align:center;
    vertical-align:middle;
    font: arial,sans-serif !important;
    font-weight:bold !important;
}
.zipText10 div {font-size: 8px !important;}
.zipText11 div {font-size: 12px !important;}
.zipText12 div {font-size: 16px !important;}
.zipText13 div {font-size: 20px !important;}
.zipText14 div {font-size: 24px !important;}
.zipText15 div {font-size: 32px !important;}

.nav-container {background: #333; position: absolute; left: 0; top: 0; right: 0; height: 40px; line-height: 40px;}
.nav-expand {
	position: absolute;
	overflow: hidden;
	max-width: 40px;
	max-height: 40px;
	padding: 0;
	background: #fff;
	white-space: nowrap;
	-moz-transition-property: max-width,max-height,box-shadow;
	-webkit-transition-property: max-width,max-height,box-shadow;
	transition-property: max-width,max-height,box-shadow;
	-moz-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	z-index: 99;
}
.nav-expand.shown {
	max-width: 1000px;
	box-shadow: 5px 0 3px -3px #000;
	-moz-transition: max-width 0.6s;
	-webkit-transition: max-width 0.6s;
	transition: max-width 0.6s;
}
.nav-expand a {float: left; font-size: 13px; color: #000; text-decoration: none; padding: 0 10px;}
.nav-expand a>span.kettleicon {float: left; color: #acacac; margin: 9px 10px 0 0; font-size: 20px;}
.nav-expand a:first-child>span.kettleicon {color: #cc3333;}
.nav-expand a:hover {color: #000; text-decoration: none; background: #f2f2f2;}
.nav-expand a:hover>span.kettleicon {color: #cc3333;}


/* Smartphones (portrait) ----------- */
@media 
	only screen and (max-width: 610px),
	(min-device-width: 320px) and (max-device-width: 610px)  
{
	#logo {background: url(images/kettle-dashboard-small.jpg) left no-repeat; float:left; height: 31px; width: 200px; margin: 10px;}
	#nav>span.custom-select {padding: 0 5px; margin-left: 5px;}
	.nav-panel span, .nav-panel a {padding: 4px 5px;}
	#nav>#auth-level>a {padding: 0 5px; margin-bottom: 5px;}
	.custom-select#report-select>span.text::before {content: "";}
	.custom-select#report-select>span.kpi-ui.export {margin-left: 3px;}
	.kpi-ui.triangle-s {margin-left: 4px;}
	.kpi-ui.triangle-s-grey {margin-left: 4px;}

	.nav-expand.shown {
		max-width: 160px;
		max-height: 300px;
		box-shadow: 1px 1px 4px #000;
		-moz-transition-property: max-height,max-width;
		-webkit-transition-property: max-height,max-width;
		transition-property: max-height,max-width;
	}
	.nav-expand a {float: none; display: block; width: 140px;}
	#nav {margin-left: 10px;}
	#bread-crumbs {margin-left: 10px;}

	div.main-container {padding: 0 0 140px; margin-top: 20px; border-top: 1px solid #999;}
	table.main {padding: 4px 0 10px; border: none; box-shadow: none;}

	#chart-row {display: none;}

	#mobile-chart-row .chart-container {height: 300px !important; width: 250px !important;}
	#mobile-chart-row .chart-container#mobile-kettle-chart {height: auto !important;}
	#prev-chart {left: 8px; top: 135px;}
	#next-chart {right: 8px; top: 135px;}

	.map-container {right: 0; left: 0; border-right: none; border-left: none; box-shadow: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
	.map-header {padding: 15px 10px;}
}

/* Smartphones (landscape) ----------- */
@media 
	only screen and (min-width: 611px) and (max-width: 767px),
	(min-device-width: 611px) and (max-device-width: 767px)  
{
	#logo {background: url(images/kettle-dashboard-small.jpg) left no-repeat; float:left; height: 31px; width: 200px; margin: 10px;}
	#nav>span.custom-select {padding: 0 5px; margin-left: 5px;}
	.nav-panel span, .nav-panel a {padding: 4px 5px;}
	#nav>#auth-level>a {padding: 0 5px; margin-bottom: 5px;}
	.custom-select#report-select>span.text::before {content: "";}
	.custom-select#report-select>span.kpi-ui.export {margin-left: 3px;}
	.kpi-ui.triangle-s {margin-left: 4px;}
	.kpi-ui.triangle-s-grey {margin-left: 4px;}

	#nav {margin-left: 10px;}
	#bread-crumbs {margin-left: 10px;}

	div.main-container {padding: 0 0 140px; margin-top: 20px; border-top: 1px solid #999;}
	table.main {padding: 4px 0 10px; border: none; box-shadow: none;}

	#chart-row {display: none;}

	#mobile-chart-row .chart-container {height: 300px !important; width: 250px !important;}
	#mobile-chart-row .chart-container#mobile-kettle-chart {height: auto !important;}
	#prev-chart {left: 8px; top: 135px;}
	#next-chart {right: 8px; top: 135px;}

	.map-container {right: 0; left: 0; border-right: none; border-left: none; box-shadow: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
	.map-header {padding: 15px 10px;}
}

/* iPads (portrait) ----------- */
@media only screen and (min-width: 768px) and (max-width: 929px),
	(min-device-width: 768px) and (max-device-width: 929px)
{
	#logo {margin-top: 20px;}

	#chart-row {display: none;}
	#chart-row .chart-container {height: 250px;}

	div.main-container {padding: 20px 20px 140px;}
	#mobile-chart-row {height: 435px; width:550px;}
	#mobile-chart-row .chart-container {height: 390px !important; width:550px !important;}
	#mobile-chart-row .chart-container#mobile-kettle-chart {height: auto !important;}
	#mobile-chart-row .chart-container#mobile-kettle-chart img {margin-left: 100px; margin-right: 100px !important;}
	#fill-area-mobile-kettle-chart {left: 25%; right: 25%; bottom: 65px;}
	#title-mobile-kettle-chart {bottom: 32px;}
	#prev-chart {left: 45px; top: 180px;}
	#next-chart {right: 45px; top: 180px;}

	.map-container {right: 20px; left: 20px; margin-bottom: 20px;}
}

/* iPads (landscape) ----------- */
@media only screen and (min-width: 930px) and (max-width: 1024px),
	(min-device-width: 930px) and (max-device-width: 1024px)
{
	#chart-row {display: block;}
	#chart-row .chart-container {height: 250px !important;}
	#chart-row .chart-container#kettle-chart {height: auto !important;}
	
	#mobile-chart-row {height: 435px !important; width:550px !important; display: none;}
	#mobile-chart-row .chart-container {height: 390px !important; width:550px !important;}
	#mobile-chart-row .chart-container#mobile-kettle-chart {height: auto !important;}
	#prev-chart {display: none;}
	#next-chart {display: none;}
}

@media only screen and (min-width: 1025px) and (max-width: 1240px) 
{
	#chart-row .chart-container {height: 300px !important;}
	#chart-row .chart-container#kettle-chart {height: auto !important;}

	#mobile-chart-row {display: none;}
	#prev-chart {display: none;}
	#next-chart {display: none;}
}

@media only screen and (min-width: 1240px) and (max-width: 1440px) 
{
	#chart-row .chart-container {height: 350px !important;}
	#chart-row .chart-container#kettle-chart {height: auto !important;}

	#mobile-chart-row {display: none;}
	#prev-chart {display: none;}
	#next-chart {display: none;}
}

@media only screen and (min-width: 1441px)
{
	#mobile-chart-row {display: none;}
	#prev-chart {display: none;}
	#next-chart {display: none;}
}