.chair .circle .num{
	top: 50%;
}
.chair .ext-area{
	text-align: center;
	border-top: 2px solid #cecece;
	padding: 20px 0px;
}
.chair .battery{
	width: 20px;
	height: 11px;
	transition: 0.2s;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -2px;
}

.chair .battery-info,
.chair .chairdelta-info{
    margin-left: 25px;
    margin-right: 25px;
    height: 30px;
    position: relative;
}
.chair .chairdelta-info{
	position: relative;
	height: auto;
	display: none;
}

.fmPermanentBookingEnabled .chair .chairdelta-info{
	display: block;
}

.chair .chairdelta-info .cap{
	margin-top: 10px;
	text-align: left;
	width: 60%;
}

.chair .battery-info .left{
	position: absolute;
	left: 0;
	top: 0;
}
.chair .chairdelta-info .left{
	text-align: left;
	position: relative;
	top: 5px;
}
.chair .battery-info .right,
.chair .chairdelta-info .right{
	position: absolute;
	right: 0;
	top: 0;
}
.chair .battery-info label,
.chair .chairdelta-info label,
.chair .chairdelta-info .cap p{
    font-family: "Neue Haas Unica W01 Regular";
    font-size: 14px;
    color: #777;
}
.chair .chairdelta-info .cap p{
    font-family: "Neue Haas Unica W01 Light";
    line-height: 17px;
	
}
.chair .battery-info .percent,
.chair .chairdelta-info .right .vals{
	font-family: "Neue Haas Unica W01 Regular";
    font-size: 14px;
    color: #777;
    display: inline-block;
    margin-left: 10px;
}
.chair .chairdelta-info .right input{
	background: #eee;
	width: 60px;
	margin-right: 0;
}
.chair .chairdelta-info .right .vals{
	display: block;
	text-align: right;
}
.chair .chairdelta-info .right .textBtn{
	margin-top: 10px;
}
.chair.disconnected .battery{
	display: none;
}

.chair .battery .battery-outline{
	border: 2px solid #aaa;
	border-radius: 3px;
	width: 100%;
	height: 100%;
}
.chair .battery .battery-end{
	width: 3px;
	height: 5px;
	border: 2px solid #aaa;
	border-radius: 3px;
	border-left: 0;
	position: absolute;
	right: -7px;
	top: 3px
}

.chair .battery .battery-outline .inner{
	margin: 1px 0px 0px 1px;
	width: 18px;
	height: 9px;
	border-radius: 2px;
	background: #aaa;
	overflow: hidden;
}
.chair.batteryLow .battery .battery-outline .inner{
	background: #C81E1E;
	-webkit-animation: blinkingBattery 1s ease infinite;
  -moz-animation: blinkingBattery 1s ease infinite;
  -ms-animation: blinkingBattery 1s ease infinite;
  -o-animation: blinkingBattery 1s ease infinite;
  animation: blinkingBattery 1s ease infinite;
}
.chair .battery .battery-outline .inner .whiteOverlay{
	background: #fff;
	width: 100%;
	height: 100%;
	transform: translateX(70%);
}

.chair .battery-percent{
	font-size: 12px;
	font-family: "Neue Haas Unica W01 UltraLight";
	color: #999;
	position: absolute;
	bottom: -18px;
	left: 50%;
	transform: translateX(-50%);
}


.chair.batteryOk .infoBattery.batteryOk{
	opacity: 1;
	display: inline-block;
}

.chair.batterySoonLow .infoBattery.batterySoonLow{
	-webkit-animation: showAndHideBattery 3s ease forwards;
  -moz-animation: showAndHideBattery 3s ease forwards;
  -ms-animation: showAndHideBattery 3s ease forwards;
  -o-animation: showAndHideBattery 3s ease forwards;
  animation: showAndHideBattery 3s ease forwards;
}

.chair .infoBattery.batteryLow{
	color: #C81E1E;
}

.chair.batteryLow .infoBattery.batteryLow{
	opacity: 1;
	transform: scale(1);
}

@keyframes showAndHideBattery {
    0%   {transform: scale(0.8); opacity: 0;}
    20% {transform: scale(1); opacity: 1;}
    80% {transform: scale(1); opacity: 1;}
    100% {transform: scale(0.8); opacity: 0;}
}


@keyframes blinkingBattery {
    0%   {background: #C81E1E;}
    50% {background: #ffffff;}
    100% {background: #C81E1E;}
}




.chair .yoyo-slider-overlay .circle .numDiff {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(1);
    transition: 0.2s;
}





.desk .okIcon,
.chair .okIcon,
.circleInner .loadingIcon{
	pointer-events: none !important;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	opacity: 0;
	border-radius: 100%;
	background: #fff;
	transform: scale(0.5) translateX(-50%) translateY(-50%);
	transform-origin: 0 0;
}
.desk .okIcon img,
.chair .okIcon img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.desk.preset .okIcon,
.chair.preset .okIcon{
	-webkit-animation: showAndHide 3s ease forwards;
  -moz-animation: showAndHide 3s ease forwards;
  -ms-animation: showAndHide 3s ease forwards;
  -o-animation: showAndHide 3s ease forwards;
  animation: showAndHide 3s ease forwards;
}

.chair.preset.apiError-not_connected .okIcon,
.apiError-not_connected .widget-inner .roundBtn{
	display: none;
}


.chair .roundBtn.savePreset{
	transition: 0.2s;
	opacity: 0;
	transform: scale(0.7) translateY(-50%);
	transform-origin: 50% 0%;
}
.chair.notPreset .roundBtn.savePreset{
	opacity: 1;
	transform: scale(1) translateY(-50%);
}
.chair .btnWrapper-area{
	transition: 0.4s;
	overflow: hidden;
}
.chair.preset .btnWrapper-area{
	height: 20px;
}

@keyframes showAndHide {
    0%   {transform: scale(0.5) translateX(-50%) translateY(-50%); opacity: 0;}
    20% {transform: scale(1) translateX(-50%) translateY(-50%); opacity: 1;}
    80% {transform: scale(1) translateX(-50%) translateY(-50%); opacity: 1;}
    100% {transform: scale(0.5) translateX(-50%) translateY(-50%); opacity: 0;}
}



@keyframes infoTextShowAndHide {
    0%   {transform: scale(0.8) translateX(-50%) translateY(-50%); opacity: 0;}
    10% {transform: scale(1) translateX(-50%) translateY(-50%); opacity: 1;}
    90% {transform: scale(1) translateX(-50%) translateY(-50%); opacity: 1;}
    100% {transform: scale(0.8) translateX(-50%) translateY(-50%); opacity: 0;}
}



@keyframes infoTextShowAndHideLeft {
    0%   {transform: scale(0.8) translateX(0%) translateY(-50%); opacity: 0;}
    10% {transform: scale(1) translateX(0%) translateY(-50%); opacity: 1;}
    90% {transform: scale(1) translateX(0%) translateY(-50%); opacity: 1;}
    100% {transform: scale(0.8) translateX(0%) translateY(-50%); opacity: 0;}
}

.desk .stopBtn{
	pointer-events: none;
	box-shadow: none;
	padding: 0;
	width: 85px;
	height: 85px;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: scale(0.5) translateX(-50%) translateY(-50%);
	transform-origin: 0 0;
	border-radius: 100%;
	transition: 0.3s 0s;
	cursor: pointer;

	background: -moz-linear-gradient(bottom, #C81E1E 0%, #E26A04 100%) !important; /* FF3.6-15 */
	background: -webkit-linear-gradient(bottom, #C81E1E 0%, #E26A04 100%) !important; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to top, #C81E1E 0%, #E26A04 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.content-area[data-widget="desk"] .widget-right{
	position: relative;
}
#section-dashboard .mdl-button.stopDesk{
	margin: 0;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0;
	transition: 0.2s;
	background: -moz-linear-gradient(bottom, #C81E1E 0%, #E26A04 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(bottom, #C81E1E 0%, #E26A04 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to top, #C81E1E 0%, #E26A04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
}

#section-dashboard .content-area[data-widget="desk"].moving .mdl-button.stopDesk{
	pointer-events: all;
	opacity: 1;
}
#section-dashboard .content-area[data-widget="desk"] .roundBtn{
	transition: 0.2s;
}
#section-dashboard .content-area[data-widget="desk"].moving .roundBtn{
	opacity: 0;
	pointer-events: none;
}

.desk.moving .stopBtn{
	opacity: 1;
	transform: scale(1) translateX(-50%) translateY(-50%);
	transition: 0.3s 0.1s;
	pointer-events: all;
	border-radius: 100%;
}
.desk .stopBtn:active{
	background: -moz-linear-gradient(bottom, #000000 0%, #E26A04 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(bottom, #000000 0%, #E26A04 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to top, #000000 0%, #E26A04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.desk .stopBtn span{
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	font-family: "Neue Haas Unica W01 Medium";
	color: #fff;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
}


.desk.disconnected .yoyo-slider,
.chair.disconnected .yoyo-slider,
.chair.notAvailable .yoyo-slider, 
.chair.apiError-not_connected .yoyo-slider,
.disconnected #section-goals .yoyo-slider{
	background: #ddd;
	border-radius: 100%;
}

#section-workplace .disconnected .yoyo-slider-overlay .circleLeftButton .bg,
#section-workplace .disconnected .yoyo-slider-overlay .circleRightButton .bg,
.notAvailable .yoyo-slider-overlay .circleLeftButton .bg, 
.notAvailable .yoyo-slider-overlay .circleRightButton .bg, 
.apiError-not_connected .yoyo-slider-overlay .circleLeftButton .bg, 
.apiError-not_connected .yoyo-slider-overlay .circleRightButton .bg{
	background: -webkit-linear-gradient(left, #aaa 0%,#aaa 100%);
}
#section-workplace .disconnected .yoyo-slider-overlay .circleRightButton,
.disconnected #section-goals .yoyo-slider-overlay .circleRightButton {
	border-left-color: #aaa;
}

.statusConnected,
.statusLoginSuccess,
.desk .statusText,
.chair .statusText,
.desk.disconnected .circle .num,
.chair.disconnected .circle .num,
.desk.disconnected .yoyo-slider-overlay .circleLeftButton .icon,
.desk.disconnected .yoyo-slider-overlay .circleRightButton .icon,
.desk.disconnected .yoyo-slider .rs-container,
.chair.disconnected .yoyo-slider .rs-container,
.apiError-not_connected .circle .num,
.apiError-not_connected .yoyo-slider .rs-container,
.apiError-not_connected .yoyo-slider-range, 
.apiError-not_connected .yoyo-slider-arrow,
.apiError-not_connected .ext-area{
	opacity: 0;
}

.desk .statusPreset span,
.chair .statusNotPreset i{
	display: none;
}
.desk.preset.presetSit .statusPreset span.sit,
.desk.preset.presetLean .statusPreset span.lean,
.desk.preset.presetStand .statusPreset span.stand,
.chair.notPreset.lift .statusNotPreset i.lift,
.chair.notPreset.lower .statusNotPreset i.lower{
	display: inline-block;
}

.desk.disconnected .yoyo-slider-overlay .circleLeftButton .bg,
.desk.disconnected .yoyo-slider-overlay .circleRightButton .bg,
.desk.disconnected .yoyo-slider,
.desk.disconnected .circle .num .transInput,
.apiError-not_connected .circle .num input,
.apiError-not_connected .yoyo-slider-overlay .circleLeftButton .bg,
.apiError-not_connected .yoyo-slider-overlay .circleRightButton .bg,
.apiError-not_connected .yoyo-slider{
	pointer-events: none !important;
}

#section-goals .ergoLevel-0 .statusNoTracking,
#section-goals .noTracking .statusNoTracking,
.disconnected #section-light .statusDisconnected,
.disconnected #section-goals .statusDisconnected,
.chair.disconnected .statusDisconnected,
.desk.moving .statusMoving,
.desk.proximity .statusProximity,
.connected .desk.notPreset .statusNotPreset,
.chair.disconnected .statusDisconnected,
.chair.notPreset .statusNotPreset,
.disconnected .desk .statusDisconnected,
.connectingFail .desk .statusConnectingFail,
.connecting .desk .statusConnecting,
.checking .desk .statusChecking,
.checkingFail .desk .statusCheckingFail,
.configuring .desk .statusConfiguring,
.connecting .desk .statusConnecting,
.apiError-not_connected .loadingIcon,
.apiError-not_connected .statusNotConnected,
.withoutLight .statusNotAvailable{
	opacity: 1;
}

.withoutChair .chair.disconnected .statusDisconnected,
.withoutLight #section-light .statusDisconnected{
	opacity: 0;
}

.connected .statusConnected,
.loginSuccess .statusLoginSuccess,
.desk.preset .statusPreset,
.chair.preset .statusPreset{
	-webkit-animation: infoTextShowAndHide 4s ease forwards;
	-moz-animation: infoTextShowAndHide 4s ease forwards;
	-ms-animation: infoTextShowAndHide 4s ease forwards;
	-o-animation: infoTextShowAndHide 4s ease forwards;
	animation: infoTextShowAndHide 4s ease forwards;
}


.disconnected #section-goals .statusNoTracking,
.apiError-not_connected .yoyo-slider-overlay .circleLeftButton .icon, 
.apiError-not_connected .yoyo-slider-overlay .circleRightButton .icon,
#section-light.apiError-not_connected .content-area-wide .curves,
#section-light.apiError-not_connected .content-area-wide .break{
    display: none !important;
}


.desk.disconnected .btnWrapper-area,
.apiError-not_connected .btnWrapper-area{
	height: 0px;
}

.desk .save,
div[data-widget="desk"] .save,
.dashErgonomicLight .save,
.lightSetting .save,
#section-light .save,
#section-goals .roundBtn.mygoal .save{
	opacity: 0;
	pointer-events: none;
	max-width: 0px;
	transition: 0.2s;
	transform: translateX(0%);
}

.desk.notPreset.nearSit .roundBtn.sit:not(.focus) .save,
.desk.notPreset.nearLean .roundBtn.lean:not(.focus) .save,
.desk.notPreset.nearStand .roundBtn.stand:not(.focus) .save,
#section-light.notMyLight .save,
.dashErgonomicLight.notMyLight .save,
#section-dashboard .notPreset.nearSit .roundBtn.sit:not(.focus) .save,
#section-dashboard .notPreset.nearLean .roundBtn.lean:not(.focus) .save,
#section-dashboard .notPreset.nearStand .roundBtn.stand:not(.focus) .save,
#section-dashboard .notPreset.nearStand .roundBtn.stand:not(.focus) .save,
#section-goals .goalSetting.notSavedMyGoal .roundBtn.mygoal:not(.focus) .save{
	opacity: 1;
	max-width: 100px;
	pointer-events: all;
	transform: translateX(0%);
	width: 60px;
}



.desk.notPreset.nearSit .roundBtn.sit:not(.focus),
.desk.notPreset.nearLean .roundBtn.lean:not(.focus),
.desk.notPreset.nearStand .roundBtn.stand:not(.focus),
#section-light.lightCustom .notPreset .roundBtn.custom:not(.focus),
.lightSetting.lightCustom.notPreset .roundBtn.custom:not(.focus),
#section-dashboard .notPreset.nearSit .roundBtn.sit:not(.focus),
#section-dashboard .notPreset.nearLean .roundBtn.lean:not(.focus),
#section-dashboard .notPreset.nearStand .roundBtn.stand:not(.focus),
#section-goals .goalSetting.notSavedMyGoal .roundBtn.mygoal:not(.focus){
	margin-right: 36px;
}



.helpChairdelta{
	display: inline-block;
	padding: 0 10px;
	cursor: pointer;
	color: #999;
}

.helpChairdelta:hover{
	color: #333;
}