/* Desktop ******************************************/
@media screen and (min-width: 1025px) {
	.desktop-show {display: block}
	.desktop-hide {display: none !important}
}	
	

/* Tablet ******************************************/
@media screen and (max-width: 1024px) {
	.tablet-show  {display: block}
	.tablet-hide  {display: none}
		
	.main-container {
		background-position: -30px 0px;
	}
	.strapline-container {
		display: none;
	}
	.content {
		padding: 28px;
	}
	.sidenav {
		width: 200px;
	}
	.content-container {
		width: -moz-calc(100% - 200px);
		width: -webkit-calc(100% - 200px);
		width: calc(100% - 200px);
		background-color: #ffffff;
	}
	.col-1-1, .col-1-2 {
		width: 100%;
		float: none;
	}

	.footer {
		width: -moz-calc(100% - 200px);
		width: -webkit-calc(100% - 200px);
		width: calc(100% - 200px);
	}
	.accordion-content {
		padding: 32px;
	}
	
	.table-container {
	    overflow-x: auto; 
	}
	
	.button-wrapper {
		width: 48.25%;
		margin-right: 3.5%;
		margin-top: 20px;
	}
	.button-wrapper:nth-child(2n + 2) {
		margin-right: 0%;
	}
	.button-wrapper:nth-child(2n + 3) {
		clear: left;
	}
	
	.chart-wrapper {
		display: block;
	}

	.chart-wrapper-inner {
		display: block;
	}

	.chart-body {
		display: block;
		margin-bottom: 32px;
		width: 100%;
	}

	.chart-right {
		display: block;
		width: 100%;
		background: none;
		clear: both;
	}
	
	.chart-nav {
		display: block;
		max-height: 1000px;
		width: auto;
		padding-left: 0px;
		text-align: left;
	}
	
	div.chart-nav table td {
		font-size: 14px;
		line-height: 18px;
	}

	div.chart-nav table tr.chart-nav-head td  {
		font-size: 14px;
	}
	
	
	
	div.tree-container {
		float: none;
		width: 100%;
	}

	div.tree-container-desc {
		float: none;
		width: 100%;
	}
	
	div.select-tree {
		margin: 8px 0;
	}
	
	div.tree-item {margin-left: 20px; line-height: 30px}
	
	div.tree-item span {padding: 1px 8px}
	
	div.tree-item input {margin: 0 20px}
	
	div.tree-item div.tree-input-invalid {
		font-size: 8px;
		font-weight: bold;
		border: 1px solid #ddd;
		background: #fff;
		color: #f00;
		display: inline;
		margin: 0 22px;
		padding: 0 3px
	}
	
	div.select-tree div.tree-personal-chart {
		margin-bottom: 10px;
		margin-left: 0px;
	}
	
	div.tree-item span:hover {
		cursor: pointer;
		background: #ddd;
	} 
	
	div.tree-item.open > span .fa-chevron-right {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	
	.bar-body, .bar-x-label {
		max-width: 100px;
	}
	
	.width-col3 {min-width: 50%;}
	
}

/* Mobile ******************************************/
@media screen and (max-width: 768px) {
	.mobile-show {display: block}
	.mobile-hide {display: none !important}
		
	.sidenav {
		position: relative;
		width:100%;
		display: none;
		float: none;
	}
	.mobile-header a.mobile-menu-icon {
		float: right;
		display: block;
	}
	.mobile-header {
		display: block;
	}
	.mobile-header-spacer {
		display: block;
	}
	.content-container {
		width: 100%;
		padding-bottom: 60px;
	}
	.header {
		background-color: #dbdbdb;
	}
	.main-header {
		display: none;
	}
	.main-sub-header {
		display: none;
	}
	
	.top-banner-container {margin: 10px 12px 0 0;}

	.content {
		padding: 22px;
	}
	.content h1 {
		margin: 0px 0px 18px 0px;
		font-size: 36px;
		line-height: 40px;
	}
	
	.panel-container {
		padding: 2% 4%;
		background: inherit;
	}
	
	.panel-header-title {
		padding: 2% 4%;
		line-height: 16px;
		min-height: 46px;
	}
	
	.accordion-content.wide {padding: 12px}
	
	.footer {
		width: 100%;
	}
	.footer .terms-privacy {
		width: 100%;
		float: none;
		text-align: center
	}
	.footer .copyright {
		width: 100%;
		float: none;
		text-align: center;
	}
	.help-container {
		width: 100%;
	}
	
	.button-wrapper {
		width: 100%;
		float: none;
		margin-right: 0%;
		margin-top: 20px;
	}
	.concern-key {
		margin: 30px auto;
		float: none;
	}

	.donut-chart-container {
		width: 100%;
		float: none;
	}
	
	.chart-wrapper.donut div.chart-body {width: 100%}
	
	div.dial-wrapper, div.dial-wrapper:first-child {
		float: none;
		width: 80%;
		margin: 10px auto;
	}
	
	div.dialog-label {
		min-width: 80px;
	}
	
	div.dialog-heading.heading-vertical > div {
		transform: translate(0px, 160px) rotate(-90deg);
		width: 28px;
		padding: 0;
		font-size: 14px;
	}
	
	div.survey-button {
		margin: 3px;
		width: 22px;
		height: 22px;
		line-height: 20px;

	}
	
	.dialog-question {
		display: block; 
		width: 100%; 
		clear: both; 
		text-align: left; 
		margin: 5px 0 5px 10px; 
		padding: 5px 0 5px 0px; 
		xborder-top: 1px solid #ddd;
	}
	
	div.form-row.q-row div.dialog-question {background: #fff}
	
	div.dialog-answers {display: block; width: 100%; clear: both; text-align: right;}
	div.dialog-answers div.answer-table {float: right}

	table.report td.data:first-child {padding-left: 6px;}
	
	table.table-style1 th {font-size: 13px;}
	
	.bar-body, .bar-x-label {
		max-width: 70px;
		font-size: 12px;
	}
	
	table.report td.h-head,
 	 table.report th.h-head  {
		padding-left: 10px;
	
	}

	table.report td.style4 {
		padding-left: 10px;
	}
	
	.rpt-normal  {padding: 4% 2%;}
	.rpt-indent1 {padding-left: 12px;}
	.rpt-indent2 {padding-left: 22px}
	.rpt-indent3 {padding-left: 32px}
	.rpt-indent4 {padding-left: 42px}
	.rpt-indent5 {padding-left: 52px}
	.rpt-pad-right5 {padding-right: 2px}
	
	
	
	.help-video-wrapper {
		display: block;
	}
	
	.help-video-row {
		display: block;
	}
	
	.help-video-container {
		display: block;
		width: 100%;
		clear: both;
	}

	.width-col3 {min-width: 100%; display: block}
}