@viewport {
   width: device-width;
   zoom:1;
}

body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}
label {
	display: inline-block;
	width: 80px;
	text-align: left;
}
.label2 {
	display: inline-block;
	width: 130px;
	text-align: left;
}
.header {
	height: 100px;
	background-color: #19bcdf;
	display: flex;
	flex-direction: row;
	padding: 10px 0 0 0;
	color: #ffffff;
	font-size: 18px;font-weight:3;
}
.header div {
	width: 30%;
	margin: 0 0 0 2%;
}		
.header-data {
	background-color: transparent;
	color: #ffffff;
	font-size: 18px;
	font-weight: 3;
	align-self: flex-end;
}
.center1 {
	width: 70%;
}
.center2 {
	width: 26%;
}
.center3 {
	width: 50%;
}
.login-panel {
	justify-content: center;
	align-items: center;
	text-align: center;
}
.table_report1 {
	width: 85%;
	line-height: 20px;
	font-size: 12px;
}
.table_report2 {
	width: 70%;
	line-height: 20px;
	font-size: 12px;
}
.logo {
	height: 80px;
	margin: 0 0 5px 0;
}
.filters {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	color: #8600b3;
}
.filters2 {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: left;
	justify-content: left;
	color: #19bcdf;
	padding:0px 2px 0px 2px;
}
.filter-child {
	width: 16%;
}
.filter-child-a {
	width: 55%;
	text-align:left;
}
.filter-child-b {
	width: 100%;
	display: flex;
	flex-direction: row;
	padding-bottom:5px;
}
.filter-child-c {
	width: 100%;
}
.filter-child-d {
	width: 90%;
	padding-bottom:2px;
	display: flex;
	flex-direction: row;	
}
#subtest {
	width: 10%;
}
#rc {
	width:40%;
	overflow:hidden;
}
#rc2 {
	width:80%;
	overflow:hidden;
}
#tdisplay {
	width: 45%;
}
#ptcontainer {
	width: 60%;
}
#ptcontainer2 {
	width: 30%;
}
#ptcontainer3 {
	width: 90%;
}
#notice-display-header {
	margin-top:2px;
	border: 1px solid #19bcdf;
	background: #ebf9fd;
	width: 90%;
}
#notice-display {
	margin-top:2px;
	border: 1px solid #19bcdf;
	background: #ebf9fd;
	border-radius: 5px;
	width: 90%;
}
#ptbuttons{
	padding: 0;
	margin: 2px 2px 0 0;
	font-size: 10px;
	height: 25px;
	width: 100px;
}
#ptbuttons2{
	padding: 0;
	margin: 10px 5px 0 0;
	font-size: 10px;
	height: 25px;
	width: 140px;
}

.text-wrap td {
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.close {
    position: absolute;
    float: right;
	color: #ffffff;
    top: 5px;
    right: 5px;
	z-index: 999;
}
div.close a {
	color: #ffffff;
	text-decoration: none;
}
.install-button {
	font-family: arial;
	font-size: 12pt;
	letter-spacing: 1px;
	padding-left: 20px;
	padding-right: 20px;
	color: #FFFFFF;
	background: #8600b3;
	text-decoration: none;
	border-style: solid;
	border-width: 1.5px;
	border-radius: 6px;
}
.tsfilter {
	display: flex;
	flex-direction: row;
	width: 15%;
	border-bottom: 1px solid #19bcdf;
	background-color: #e699ff;
}
.tsfilter2 {
	display: flex;
	flex-direction: row;
	width: 16%;
	border-bottom: 1px solid #19bcdf;
	background-color: #e699ff;
}
.tsfilter3 {
	display: flex;
	flex-direction: row;
	width: 7%;
	border-bottom: 1px solid #19bcdf;
	background-color: #e699ff;
}
.atcontainer1 {
	border: 1px solid #19bcdf;
	margin: 5px;
	height: 350px;
	flex: 0 1 200px;
	display: flex;
	flex-direction: column;
	border-radius: 5px;
	padding: 10px;
	overflow: auto;
}
.atcontainer2 {
	border: 1px solid #19bcdf;
	margin: 5px;
	height: 350px;
	flex: 0 1 300px;
	display: flex;
	flex-direction: column;
	border-radius: 5px;
	padding: 10px;
	overflow: auto;
}

.non-essential1 {
	width: 1%;
}
.non-essential3 {
	width: 3%;
}
.non-essential4 {
	width: 4%;
}
.non-essential5 {
	width: 5%;
}
.non-essential6 {
	width: 6%;
}
.non-essential7 {
	width: 7%;
}
.non-essential8 {
	width: 8%;
}
.non-essential9 {
	width: 9%;
}
.non-essential10 {
	width: 10%;
}
.non-essential11 {
	width: 11%;
}
.non-essential12 {
	width: 12%;
}
.non-essential13 {
	width: 13%;
}
.non-essential15 {
	width: 15%;
}
.non-essential20 {
	width: 20%;
}
.non-essential26 {
	width: 26%;
}
.non-essential30 {
	width: 30%;
}
.non-essential50 {
	width: 50%;
}

/*responsive*/

@media(max-width: 500px){
	.header {
		height: 80px;
		flex-direction: column;
		padding: 5px 0 0 0;
	}
	.header div {
		width: 100%;
		height: 12px;
		margin: 0 0 5px 0;
	}	
	.header-data {
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: flex-end;		
	}
	.center1 {
		width: 98%;
	}
	.center2 {
		width: 90%;
	}
	.center3 {
		width: 90%;
	}	
	.table_report1 {
		width: 90%;
		font-size: 8px;
	}
	.table_report1 td {
		max-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}		
	.table_report2 {
		width: 90%;
		font-size: 12px;
	}
	.table_report2 td {
		max-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}	
	.logo {
		height: 40px;
		margin: 0;
	}
	.filters {
		flex-direction: column;
	}
	.filters2 {
		flex-direction: column;
		padding-left:4%;
	}
	.filter-child {
		width: 90%;
		padding-top: 5px;
	}
	.filter-child-a {
		width: 90%;
		padding-top: 5px;
	}
	.filter-child-b {
		width: 90%;
		padding-top: 5px;
	}
	.filter-child-c {
		width: 100%;
		padding-top: 5px;
	}
	.tsfilter {
		width: 100%;
	}
	.tsfilter2 {
		width: 100%;
	}
	.tsfilter3 {
		width: 100%;
	}
	.atcontainer1 {
		flex: 0 1 100%;
	}
	.atcontainer2 {
		flex: 0 1 100%;
	}
	
	#subtest {
		width: 30%;
	}
	#logo-box {
		height: 40px;
	}
	#ptcontainer {
		width: 95%;
	}
	#ptcontainer2 {
		width: 90%;
	}
	#notice-display-header {
		width: 98%;
	}
	#notice-display {
		width: 98%;
	}
	#tdisplay {
		width: 90%;
	}
	#rc, #rc2 {
		width: 95%;
		overflow: hidden;
	}
	#ptbuttons{
		width: 100%;
	}
	#ptbuttons2{
		width: 100%;
	}
	
	.non-essential1 {
		display: none;
	}
	.non-essential3 {
		display: none;
	}
	.non-essential4 {
		display: none;
	}
	.non-essential5 {
		display: none;
	}	
	.non-essential6 {
		display: none;
	}
	.non-essential7 {
		display: none;
	}
	.non-essential8 {
		display: none;
	}
	.non-essential9 {
		display: none;
	}
	.non-essential10 {
		display: none;
	}
	.non-essential11 {
		display: none;
	}
	.non-essential12 {
		display: none;
	}	
	.non-essential13 {
		display: none;
	}	
	.non-essential15 {
		display: none;
	}
	.non-essential20 {
		display: none;
	}
	.non-essential26 {
		display: none;
	}
	.non-essential30 {
		display: none;
	}	
	.non-essential50 {
		display: none;
	}		
}

@media only screen and (max-width:500px) {
	.header {
		height: 80px;
		flex-direction: column;
		padding: 5px 0 0 0;
	}
	.header div {
		width: 100%;
		height: 12px;
		margin: 0 0 5px 0;
	}	
	.header-data {
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: flex-end;		
	}
	.center1 {
		width: 98%;
	}
	.center2 {
		width: 90%;
	}
	.center3 {
		width: 90%;
	}	
	.table_report1 {
		width: 90%;
		font-size: 8px;
	}
	.table_report1 td {
		max-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}		
	.table_report2 {
		width: 90%;
		font-size: 12px;
	}
	.table_report2 td {
		max-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}	
	.logo {
		height: 40px;
		margin: 0;
	}
	.filters {
		flex-direction: column;
	}
	.filters2 {
		flex-direction: column;
		padding-left:4%;
	}
	.filter-child {
		width: 90%;
		padding-top: 5px;
	}
	.filter-child-a {
		width: 90%;
		padding-top: 5px;
	}
	.filter-child-b {
		width: 90%;
		padding-top: 5px;
	}
	.filter-child-c {
		width: 100%;
		padding-top: 5px;
	}
	.tsfilter {
		width: 100%;
	}
	.tsfilter2 {
		width: 100%;
	}
	.tsfilter3 {
		width: 100%;
	}
	.atcontainer1 {
		flex: 0 1 100%;
	}
	.atcontainer2 {
		flex: 0 1 100%;
	}
	
	#subtest {
		width: 30%;
	}
	#logo-box {
		height: 40px;
	}
	#ptcontainer {
		width: 95%;
	}
	#ptcontainer2 {
		width: 90%;
	}
	#notice-display-header {
		width: 98%;
	}
	#notice-display {
		width: 98%;
	}
	#tdisplay {
		width: 90%;
	}
	#rc, #rc2 {
		width: 95%;
		overflow: hidden;
	}
	#ptbuttons{
		width: 100%;
	}
	#ptbuttons2{
		width: 100%;
	}
	
	.non-essential1 {
		display: none;
	}
	.non-essential3 {
		display: none;
	}
	.non-essential4 {
		display: none;
	}
	.non-essential5 {
		display: none;
	}	
	.non-essential6 {
		display: none;
	}
	.non-essential7 {
		display: none;
	}
	.non-essential8 {
		display: none;
	}
	.non-essential9 {
		display: none;
	}
	.non-essential10 {
		display: none;
	}
	.non-essential11 {
		display: none;
	}
	.non-essential12 {
		display: none;
	}	
	.non-essential13 {
		display: none;
	}	
	.non-essential15 {
		display: none;
	}
	.non-essential20 {
		display: none;
	}
	.non-essential26 {
		display: none;
	}
	.non-essential30 {
		display: none;
	}	
	.non-essential50 {
		display: none;
	}		
}