#section-dashboard div[data-widget="workplace"],
#section-dashboard div[data-widget="actual-booking"],
#section-dashboard div[data-widget="desk"],
#section-dashboard div[data-widget="session"],
#section-dashboard div[data-widget="lightSetting"],
#section-dashboard div[data-widget="lockers"],
#section-dashboard div[data-widget="busylight"],
#section-dashboard div[data-widget="trackings"],
#section-dashboard .dashErgonomicLight,
body.fmLoggedOut #section-dashboard .section-inner-vertical-line,
#section-dashboard .section-inner-horizontal-line.fromDesk,
#section-dashboard .section-inner-horizontal-line.fromSession,
#section-dashboard .section-inner-horizontal-line.fromLockers,
#section-dashboard .section-inner-horizontal-line.fromBusylight,
#section-dashboard .section-inner-horizontal-line.fromDesk,
#section-dashboard .section-inner-horizontal-line.fromLightSetting,
#section-dashboard .section-inner-horizontal-line.fromLightSetting,
#section-dashboard .section-inner-horizontal-line.fromTrackings,
#section-dashboard div[data-widget="actual-booking"] .widget-area.state-no-booking,
#section-dashboard.no-booking div[data-widget="session"],
#section-dashboard.no-booking .section-inner-horizontal-line.fromSession,
body.connected #section-dashboard div[data-widget="session"],
body.connected #section-dashboard .section-inner-horizontal-line.fromSession,
.fmLoggedIn #section-dashboard .btn.login,
.fmLoggedOut #section-dashboard .textBtn.logout,
.fmLoggedOut #section-dashboard div[data-widget="workplace"],
body.disconnected #section-light .split-2,
body.disconnected #section-light .split-3,
body.withoutLight #section-light .split-2,
body.withoutLight #section-light .split-3,
body.fmLoggedOut #section-dashboard .section-split-2 .split-1,
body.disconnected #section-workplace .section-inner-vertical-line,
body.disconnected #section-workplace .section-split-2 .split-2,
#section-dashboard .statusText,
.nonErgoWorkplace #section-dashboard .stopSession{
    display: none;
}
#section-dashboard .statusText.statusConnected,
#section-dashboard .statusText.statusLoginSuccess{
	display: block;
}

.fmPermanentBookingEnabled #section-dashboard div[data-widget="workplace"],
body.connected.ergoWorkplace #section-dashboard div[data-widget="desk"],
body.connected.ergoWorkplace #section-dashboard .section-inner-vertical-line,
body.connected.ergoWorkplace #section-dashboard .section-inner-horizontal-line.fromDesk,
body.connected.ergoWorkplace #section-dashboard div[data-widget="trackings"],
body.connected.ergoWorkplace #section-dashboard .section-inner-horizontal-line.fromTrackings,
body.withBusylight #section-dashboard div[data-widget="busylight"],
body.withBusylight #section-dashboard .section-inner-horizontal-line.fromBusylight,
body.disconnected.fmPermanentBookingDisabled #section-dashboard div[data-widget="actual-booking"],
body.connected.fmPermanentBookingDisabled #section-dashboard div[data-widget="actual-booking"],
body.noBookings #section-dashboard div[data-widget="actual-booking"] .widget-area.state-no-booking,
body.withLight #section-dashboard div[data-widget="lightSetting"],
body.withLight #section-dashboard .dashErgonomicLight,
body.withLight #section-dashboard .section-inner-horizontal-line.fromLightSetting,
body.withLocker #section-dashboard div[data-widget="lockers"],
body.withLocker #section-dashboard .section-inner-horizontal-line.fromLockers,
body.connected.ergoWorkplace #section-dashboard .section-inner-horizontal-line.fromDesk,
.connected #section-dashboard .statusText.statusConnected,
.connecting #section-dashboard .statusText.statusConnecting,
.connectingFail #section-dashboard .statusText.statusConnectingFail,
.configuring #section-dashboard .statusText.statusConfiguring,
.checking #section-dashboard .statusText.statusChecking,
#section-dashboard .ergoLevel-0 .statusText.statusTrackingDisabled,
#section-dashboard .ergoLevel-2.changeNow.toStand .statusText.statusChangeToStand,
#section-dashboard .ergoLevel-2.changeNow.toSit .statusText.statusChangeToSit,
#section-dashboard .ergoLevel-3.changeNow.toStand .statusText.statusChangeToStand,
#section-dashboard .ergoLevel-3.changeNow.toSit .statusText.statusChangeToSit,
.checkingFail #section-dashboard .statusText.statusCheckingFail,
.disconnected #section-dashboard .statusText.statusDisconnected,
.loginFail #section-dashboard .statusText.statusLoginFail,
.loginProcess #section-dashboard .statusText.statusLoginProcess{
    display: block;
}
#section-dashboard .content-area{
    position: relative;
}

#section-dashboard .split-1{
    padding-bottom: 30px;
}


#section-dashboard .mdl-button,
#section-booking-workplace .mdl-button{
    margin: 30px 0px 10px 0px;
}

#section-booking-workplace .mdl-button.fmRefresh,
#section-booking-meetingroom .mdl-button.fmRefresh{
	margin-top: 6px;
}


#section-dashboard .preset-list{
    margin-top: 10px;
}
#section-dashboard .preset-list .wp-item{
    display: inline-block;
    border: 2px solid #ccc;
    border-radius: 15px;
    cursor: pointer;
    margin: 0 10px;
    margin-bottom: 10px;
    padding-bottom: 2px;
    position: relative;
    transition: 0.3s;
}
#section-dashboard .preset-list .wp-item:hover{
    border: 2px solid #777;
}

#section-dashboard .preset-list .wp-item:hover .wp-name{
    color: #777;
}
#section-dashboard .preset-list .wp-name{
    padding: 0px 10px 0px 30px;
    line-height: 24px;
    font-size: 16px;
    font-family: "Neue Haas Unica W01 Regular";
    color: #aaa;
    display: inline-block;
    transition: 0.2s;
}

#section-dashboard .preset-list .wp-icn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    width: 15px;
    height: 20px;
    opacity: 0.6;
    transition: 0.3s;
}
#section-dashboard .preset-list .wp-item:hover .wp-icn{
    opacity: 1;
}
#section-dashboard .preset-list .wp-item.workplace .wp-icn{
    background: url(../img/icon_workplace.svg) no-repeat center center;
    background-size: contain;
}

#section-dashboard .preset-list .wp-item.meetingroom .wp-icn{
    background: url(../img/icon_meetingroom.svg) no-repeat center center;
    background-size: contain;
}


#section-dashboard .state-no-workplaces,
#section-dashboard.no-booking .state-booking,
.noBookings #section-dashboard .state-booking,
#section-dashboard.no-workplaces .state-booking,
#section-dashboard.no-workplaces .state-no-booking,
#section-dashboard.no-workplaces.no-booking .state-no-booking{
    display: none !important;
}

#section-dashboard.no-workplaces .state-no-workplaces,
#section-dashboard.no-booking .state-no-booking{
    display: block !important;
}

#section-dashboard .checkoutBooking,
.disconnected #section-dashboard .stopSession,
.connected #section-dashboard .startSession,
.fmPermanentBookingDisabled #section-dashboard .stopSession,
.fmPermanentBookingDisabled #section-dashboard .startSession,
.bookingModeOnline #section-dashboard .mdl-button.endBooking{
    display: none;
}

.connected.fmPermanentBookingDisabled #section-dashboard .checkoutBooking{
	display: inline-block;
}


.wp-list .wp-item .createBooking,
.wp-list .wp-item .endBooking,
#section-dashboard.state-booking .workplaces-list .wp-item .createBooking,
#section-dashboard.no-booking .workplaces-list .wp-item .endBooking{
    display: none;
}
#section-dashboard .workplaces-list{
    text-align: left;
    border-top: 1px solid #ccc;
}
#section-dashboard .workplaces-list .wp-item{
    border-bottom: 1px dotted #ccc;
    padding: 10px 0px;
    position: relative;
}
#section-dashboard .workplaces-list .wp-item .createBooking,
#section-dashboard .workplaces-list .wp-item .endBooking{
    position: absolute;
    right: 0;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
}
#section-dashboard .workplaces-list .wp-item,
#section-dashboard.state-booking .workplaces-list .wp-item.selected{
    max-height: 300px;
    padding: 10px 0px;
    transition: 0.4s;
    overflow: hidden;
}

#section-dashboard.state-booking .workplaces-list .wp-item{
    max-height: 0px;
    padding: 0;
}

#section-dashboard div.content-area[data-widet="light-1"] .transInput,
#section-dashboard .yoyo-slider-overlay .circle .circleInnerFlip{
    pointer-events: all;
}


#section-dashboard div[data-widget="busylight"] .widget-area .widget-left,
#section-dashboard div[data-widget="busylight"] .widget-area .widget-right{
    vertical-align: middle;
}
#section-dashboard div[data-widget="busylight"] .widget-area .widget-left,
#section-dashboard div[data-widget="busylight"] .widget-area .widget-right{
	width: calc(50% - 5px);
}
#section-dashboard div[data-widget="busylight"] .widget-area .widget-vertical-line{
	left: 50%;
}
#section-dashboard div[data-widget="busylight"] .busyIcon{
	position: relative;
}
#section-dashboard div[data-widget="busylight"] .busyIcon img{
	transition: 0.2s;
	width: 40px;
	height: auto;
}
#section-dashboard div[data-widget="busylight"] .busyIcon img.active{
	position: absolute;
	opacity: 0;
	left: 50%;
	transform: translateX(-50%);
}
#section-dashboard div[data-widget="busylight"].isBusy .busyIcon img.normal{
	opacity: 0;
}
#section-dashboard div[data-widget="busylight"].isBusy .busyIcon img.active{
	opacity: 1;
}
#section-dashboard div[data-widget="busylight"] label{
	font-family: "Neue Haas Unica W01 Regular";
	font-size: 16px;
	color: #999;
}
#section-dashboard div[data-widget="busylight"].isBusy label{
	background-image:linear-gradient(90deg,#1EC8B4 0%,#00AAD2 100%);
	 -webkit-background-clip: text;
	 -webkit-text-fill-color: transparent;
}



#yoyoApiVersion{
    display: block;
    font-size: 12px;
    position: relative;
    top: -15px;
    font-family: "Neue Haas Unica W01 Light";
}

.widget-area.state-booking .widget-left h2{
    font-family: "YOYONumbers Light";
    font-weight: normal;
}