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

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

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

.empty{
	height: 1px !important;
}

.quater {
	width: 50%;
	float: left; 
	height: 80%;
	margin-top: 4rem;
}

.full{
	height: 100%;
}

.half{
	height: 100%;
}


.chartRow {
	margin-top: 4rem;
}

.chartColumn {
	margin-top: 4rem;
	width: 50%;
	float:left;
	height: 80%;
}


.picture{
	width: 40rem;
}


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

.rankingColumn {
	float: left; 
	width: 30%; 
	padding-left: 3%;
}


.rankingBox {
	height: 10%;
	margin-bottom: 1rem;
}

.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 {
	min-height: 2.9rem;
	max-height: 2.9rem;
}

.salesInner {
}

.flex {
	display: flex;
}

.flex-column {
	display: flex;
	flex-direction: column;
}



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

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

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

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


.salesTarget {
	font-size: 0.9rem;
}


.rankingChart {
 margin-top: 0.5rem;
 /*border-radius: 0.8rem;*/
 height: 3.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: -22px;
}


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

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


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

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


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

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

.text_small{
	font-size: 1.1rem;
}

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

.ui-blockui {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    background: rgba(190,190,190,0.5);
    
    
}

.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;
}


.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;
	width: 12.0rem;
	-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: 2rem;
	border: 1px solid #5A5B5E;	
	border-radius: 0;
	vertical-align: middle;
}


.ui-selectonemenu .ui-selectonemenu-trigger {
    background: #CCC;
}
.ui-selectonemenu-panel {
    position: absolute;
    height: auto;
    background: #FFF;
    font-size: 0.8rem;
    box-shadow: none;
    border: 1px solid;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
    overflow: auto;
    border-radius: 5px;
    overflow-x: hidden;
}

.ui-selectonemenu-panel .ui-selectonemenu-list-item.ui-state-highlight {
	background: #888;
	border-radius: 3px;
	color: #FFF;
}
.ui-selectonemenu-panel .ui-selectonemenu-list-item.ui-state-hover {
	background: #CCC;
	color: #000;
}

.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}
.ui-icon-triangle-1-s {
    background-position: -64px 0;
}
.ui-icon {
    width: 16px;
    height: 16px;
    background-image: url("/javax.faces.resource/images/ui-icons_38667f_256x240.png.xhtml?ln=primefaces-aristo");
}

.ui-icon.ui-icon-check {
	width: 16px;
	height: 16px;
	background-image: url("/javax.faces.resource/images/ui-icons_38667f_256x240.png.xhtml?ln=primefaces-aristo");
	background-position: -67px -147px;
}

.ui-chkbox .ui-chkbox-box {
    width: 0.9rem;
	height: 0.9rem;
	border-radius: 0;
	vertical-align: top;
	border: 1px solid;
}
.ui-chkbox .ui-chkbox-box.ui-state-active {
	background: #FFF;
}

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;
}


.ui-datepicker table {
    width: 25%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
    background-color: #cccccc !important;
}


.ui-panelgrid .ui-panelgrid-cell {
    border: none;
    text-align: right;
}

.ui-panelgrid .ui-panelgrid-cell{
	padding: 0px 4px;
}


.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: 1.8rem;
 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;
}