@CHARSET "ISO-8859-1";
/* Basic */
html {
	font-family: 'Open Sans', 'OpenSans';
	font-size: 80%;
	height: 100%;
}
body {
	padding: 0;
	margin: 0;
	min-width: 34rem;
	color: #5A5B5E;
	font-size: 1.0rem;
	height: 100%;
}

#login {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 3rem;
}

.login {
	font-size: 3rem;
	padding: 1rem;
}

#countdown {
	position: absolute;
	bottom: 3rem;
	right: 3rem;
}

.rankingColumn:first-of-type{
	float: left; 
	width: 90%; 
	padding-left: 0;
}

.rankingColumn {
	float: left; 
	width: 90%; 
	padding-left: 0;
}


.picture{
	width: 40rem;
}


.rankingBox {
//	background-color: red;
	height: 8rem;
	padding-bottom: 0.5rem;
}

.rankingPosition {
	font-size: 3.0rem;
	font-weight: bold;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	text-align: right;
}

.rankingInner {
	display: inline-block;
	width: calc(100% - 4.3rem);
}

.salesImage {
	float: left;
	margin-right: 0.5rem;
}

.salesBox {
	padding-bottom: 0.5rem;
}

.salesInner {
}

.salesName {
	font-size: 2.5rem;
	font-weight: 600;
}

.flex {
	display: flex;
}


.value {
	font-size: 2.9rem;
	text-align: right;
	width: 20rem;
}

.position {
	font-size: 1.5rem;
	text-align: center;
}



.salesGrade {
	font-size: 2.9rem;
	width: 35rem;
}

.salesTarget {
	font-size: 0.9rem;
}


.rankingChart {
	margin-top: 0.5rem;
/*	border-radius: 0.8rem; */
	height: 5.1rem;
	 background-size: 5rem 5rem;
	 background-color: #DDD;
	 background-image: linear-gradient(135deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, transparent 75%, transparent);
	 animation: progress-background  2s infinite;
	 animation-timing-function: linear;
}

@keyframes progress-background {
    0% {background-position: 0;}
    100% {background-position: 10rem;}
}


.top {
	height: 100%;
	/* border-radius: 0.8rem; */
	float: left;
	margin-top: -38px;
}

.top-current {
	height: 100%;
	/* border-radius: 0.8rem 0rem 0rem 0.8rem; */
	float: left;
	margin-top: -38px;
}

.top-current-outstanding {
	height: 100%;
	/* border-radius: 0.8rem 0rem 0rem 0.8rem; */
	float: left;
	margin-top: -38px;
}


.top.detect {
	animation: progress-detect 5.5s;
}

@keyframes progress-detect {
    0% {width: 0;}
    50% {width: 100%;}
    100% {width: 0;}
}


.topExtra {
	height: 100%;
/*	border-radius: 0.8rem; */
	float: left;
}


.current {
	font-size: 1.9rem;
	font-weight: bold;
	padding-top: 0.4rem;
	padding-left: 0.5rem;	
}

.target {
	font-size: 1.9rem;
	font-weight: bold;
	padding-top: 0.4rem;
	padding-right: 0.5rem;
	text-align: right;
}

.text_small{
	font-size: 1.1rem;
}

.inputField{
	border-style: none;
	color: #E5E5E5;
}


.ui-chkbox-box {
	border: 0.2rem solid #5A5B5E;
	border-radius: 0.3rem;
	width: 100%;
	cursor: pointer;
	background: #FFFFFF;
}

.ui-chkbox .ui-chkbox-box {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 0.2rem;
}

.ui-chkbox-box.ui-state-active {
	background: #5A5B5E;
}

.ui-inputswitch {
	width: 8.2rem !important;
	height: 2.4rem;
	background: #EAEAEA none repeat scroll 0% 0%;
	border-radius: 2.4rem;
	line-height: 2rem;
}

.ui-inputswitch .ui-inputswitch-off, .ui-inputswitch .ui-inputswitch-on
	{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-weight: 400;
	font-size: 0.9rem;
	height: 100%;
	padding-top: 0.2rem;
	color: #5A5B5E;
}

.ui-inputswitch .ui-inputswitch-off {
	width: 5.0rem !important;
	margin-right: 0.45rem !important;
	color: #5A5B5E;
}

.ui-inputswitch .ui-inputswitch-off>span {
	width: 100% !important;
	color: #5A5B5E;
}

.ui-inputswitch .ui-inputswitch-on {
	width: 5.0rem !important;
	margin-left: 0.1rem !important;
	color: #00CCFF;
}

.ui-inputswitch.ui-state-disabled .ui-inputswitch-on {
	color: inherit;
}

.ui-inputswitch .ui-inputswitch-on>span {
	width: 100% !important;
	color: #5A5B5E;
}

.ui-inputswitch .ui-inputswitch-handle {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 2.4rem !important;
	height: 2.4rem;
	background: #5A5B5E;
	border: 0.4rem solid #EAEAEA;
	border-radius: 100%;
}

.ui-inputswitch.ui-state-disabled .ui-inputswitch-handle {
	background: #999999;
}

.ui-slider {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 0.6rem;
	width: 100%;
	border: 0 none;
	background: #F5F5F5;
	border-radius: 0.2rem;
	box-shadow: 0 0.1rem 0.5rem #C3C8CC inset, 0 0.1rem 0 #FFFFFF;
	padding: 0.2rem;
}

.ui-slider.ui-state-disabled {
	background: #E0E0E0;
	box-shadow: 0 0.1rem 0.5rem #C3C8CC inset, 0 0.1rem 0 #FFFFFF;
}

.ui-slider .ui-slider-handle {
	background: #00CCFF;
	border-radius: 100%;
	cursor: pointer;
	height: 1.6rem;
	width: 1.6rem;
	border: 0.2rem solid #C6E7E1;
	top: -0.7rem;
}

.ui-slider.ui-state-disabled .ui-slider-handle {
	background: #E2E2E2;
	cursor: default;
	border: 0.2rem solid #7E7E7E;
}

.slim-layout-col .ui-inputfield {
	height: 4.4rem;
}


input.thin, .thin.ui-selectonemenu, .thin.ui-selectcheckboxmenu, .thin.ui-calendar .ui-inputfield,
	.thin.ui-selectonebutton .ui-button-text {
	height: 2.8rem;
	min-width: 4rem;
	line-height: 2rem;
}

.ui-calendar .ui-inputfield {
	margin-bottom: 1rem;
}

.ui-inplace-content .ui-inputfield.ui-inputtext {
	width: calc(100% - 6.5rem) !important;
}

select, .ui-selectonemenu, .ui-selectcheckboxmenu {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #FFFFFF;
	border: solid 0.2rem #5A5B5E;
	border-radius: 0.3rem;
	box-shadow: none;
	font-size: 0.9rem;
	-webkit-transition: background 0.5s ease-in-out;
	-moz-transition: background 0.5s ease-in-out;
	-ms-transition: background 0.5s ease-in-out;
	-o-transition: background 0.5s ease-in-out;
	transition: background 0.5s ease-in-out;
	-webkit-transition: border 0.5s ease-in-out;
	-moz-transition: border 0.5s ease-in-out;
	-ms-transition: border 0.5s ease-in-out;
	-o-transition: border 0.5s ease-in-out;
	transition: border 0.5s ease-in-out;
}

.ui-selectonemenu, .ui-selectcheckboxmenu {
	height: 3.6rem;
	
}
select:focus, .ui-selectonemenu.ui-state-focus,
	.ui-selectcheckboxmenu.ui-state-focus, select:hover, 
	.ui-selectonemenu.ui-state-hover, .ui-selectcheckboxmenu.ui-state-hover
	{
	border-color: #5A5B5E;
}

.ui-inputfield.search-input {
	height: 2.6rem;
	border: none;
	border-bottom: 0.1rem solid #C3C8CC;
	border-radius: 0;
	margin: 0 0 0 0.5rem;
	font-size: 1.6rem;
}

.ui-inputfield.search-input:hover, .ui-inputfield.search-input:focus {
	border-bottom-color: #00CCFF;
}

.ui-inputswitch {
	width: 5.2rem !important;
	height: 2.4rem;
	background: #EAEAEA none repeat scroll 0% 0%;
	border-radius: 2.4rem;
	line-height: 2rem;
}

.ui-inputswitch .ui-inputswitch-off, .ui-inputswitch .ui-inputswitch-on
	{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-weight: 400;
	font-size: 0.9rem;
	height: 100%;
	padding-top: 0.2rem;
}

.ui-inputswitch .ui-inputswitch-off {
	width: 2.8rem !important;
	margin-right: 0.45rem !important;
}

.ui-inputswitch .ui-inputswitch-off>span {
	width: 100% !important;
}

.ui-inputswitch .ui-inputswitch-on {
	width: 2.8rem !important;
	margin-left: 0.1rem !important;
	color: #00CCFF;
}

.ui-inputswitch.ui-state-disabled .ui-inputswitch-on {
	color: inherit;
}

.ui-inputswitch .ui-inputswitch-on>span {
	width: 100% !important;
}

.ui-inputswitch .ui-inputswitch-handle {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 2.4rem !important;
	height: 2.4rem;
	background: #5A5B5E;
	border: 0.4rem solid #EAEAEA;
	border-radius: 100%;
}

.ui-inputswitch.ui-state-disabled .ui-inputswitch-handle {
	background: #999999;
}

.ui-inputtextarea {
	font-size: 1.6rem;
	height: 10rem;
	margin-bottom: 0.3rem;
	min-height: 3.6rem;
}

.jqplot-grid-canvas{
	z-index: -1;	
}

.deviceDetails{
	width: 100%;
	height: 100%;
}

.deviceSpecsColumn{
	float: left;
	margin-left: 10px;
	font-size: 0.9rem
}

.specsDescription{
	font-size: 0.9rem;
	width: 45%;
	float: left;
}

.specsData{
	font-size: 0.9rem;
}

.closeButton{
	background: transparent;
	border: transparent;
	font-size: 2.5rem;
	color: #5A5B5E;
}

.ui-helper-hidden-accessible{
	overflow: visible !important;
	
}

.datatable {
	overflow-x: auto;
	width: auto;
	font-size: 0.9rem;
}

.datatable thead tr th, .datatable.ui-datatable thead tr th .ui-button {
	width: auto;
	font-weight: 700;
}

.datatable.ui-datatable thead tr th .ui-button {
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	color: #5A6673 !important;
}

.datatable.ui-datatable thead tr th .ui-button .ui-icon {
	margin-top: -0.6rem;
	height: 1.2rem;
	width: 1rem;
}

.backButton {
	background-image: url(images/color.png') !important;
}


.salesperson {
	width: 100%;
	padding-bottom: 1.5rem;
}

.salesperson_firstrow {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.salesperson_secondrow {
 /*border-radius: 0.8rem;*/
 height: 5.1rem;
 margin-left: 0.5rem;
 background-size: 3rem 3rem;
 background-color: #DDD;
 background-image: linear-gradient(135deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, transparent 75%, transparent);
 animation: progress-background  2s infinite;
 animation-timing-function: linear;
}

.salesperson_thirdrow {
	width: 100%;
}

.salesImage2 {
	float: left;
}


.ampeldashboard{
	height: 80%;
	width: 100%;
	display: none;
	flex-direction: row;
}

.ampel-container {
	flex: 1 1 20%; /* Each container takes up 20% of the parent */
	border: 1px solid #ccc;
    justify-content: center;
    align-items: center;	
    position: relative;
    display: flex;
    flex-direction: column;
}

.ampel {
	padding-top: 0.1rem;
}

.ampelheader{
	font-size: 0.8rem;
	font-weight: 600;
}

.red {
    background-color: red;
}

.rankingPosition2{
  font-size: 3.0rem;
  font-weight: 400;
  width: 8%;
  text-align: right;
}

.box{
	
}

.box:nth-child(1) {
    flex: 0 0 9%;
    padding-right: 0.5rem;
}

.box:nth-child(2),
.box:nth-child(3) {
    flex: 0 0 8%;
}

.box:nth-child(4) {
    flex: 0 0 45%;
}


.right-align {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}