.widget-floorplan {
  position: relative;
}

.widget-floorplan .item-border {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 1px solid transparent;
  z-index: 4;
  /*display: none;*/
}

.widget-floorplan .item-border .info {
  position: absolute;
  top:  -1px;
  width: 230px;
  height: 150px;
  background-color: #FFDDDD;
  border: 1px solid #bcbcbc;
  box-sizing: border-box;
  box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.4);
}

.widget-floorplan .item-border .info .period {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

.widget-floorplan .item-border .info .period .reserved-time-box {
  display: flex;
  margin-bottom: 5px;
}

.widget-floorplan .item-border .info .period .booked-time {
  margin-left: 5px;
}

.widget-floorplan .item-border .info .period .status-icon {
  background-size: contain;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.widget-floorplan .item-border .info .period .status1:before {
  content: " ";
  background-image:url(/_themes/webdesktop/content/media/reservation/lock.svg/?stamp=190516);
  background-size: contain;
  width: 16px; height:16px;
  display:inline-block;
  margin-bottom:-3px;
  cursor:pointer;
}

.widget-floorplan .item-border .info .period .status2:before {
  content: " ";
  background-image:url(/_themes/webdesktop/content/media/reservation/clock-checked.svg/?stamp=190516);
  background-size: contain;
  width: 16px; height:16px;
  display:inline-block;
  margin-bottom:-3px;
  cursor:pointer;
}

.widget-floorplan .item-border .info .period .status3:before {
  content: " ";
  background-image:url(/_themes/webdesktop/content/media/reservation/unavailable.svg/?stamp=190516);
  background-size: contain;
  width: 16px; height:16px;
  display:inline-block;
  margin-bottom:-3px;
  cursor:pointer;
}

.widget-floorplan .item-border .info .period h3,
.widget-floorplan .item-border .info .period h3,
.widget-floorplan .item-border .info .period h3 {
  margin: 0 5px;
}

.widget-floorplan .item-border .item-rotate {
  position: absolute;
	top: -25px;
	left: 50%;
	transform: translate(-50%);
	background-image: url('/media/widgets/floorplan/rotate.png');
	background-size: 100% 100%;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.widget-floorplan .item-border .item-scale {
  position: absolute;
  bottom: -7px;
  right: -7px;
	width: 10px;
	height: 10px;
	/*cursor: nwse-resize;*/
}

.widget-floorplan .item-border .item-scale:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background-color: black;
}

.widget-floorplan .item-border .item-scale:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background-color: black;
}

.widget-floorplan .item-imitation {
  position: absolute;
  z-index: 2;
  display: none;
}

.widget-floorplan .item-imitation.active {
  display: block;
}

.widget-floorplan .zoom-plus {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 25px;
  height: 25px;
  z-index: 5;
  cursor: pointer;
  background-image: url(/media/widgets/floorplan/zoomIn.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.widget-floorplan .zoom-plus:hover {
  background-image: url(/media/widgets/floorplan/zoomIn_hover.svg);
}

.widget-floorplan .zoom-minus {
  position: absolute;
  top: 70px;
  left: 20px;
  width: 25px;
  height: 25px;
  z-index: 5;
  cursor: pointer;
  background-image: url(/media/widgets/floorplan/zoomOut.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

.widget-floorplan .zoom-minus:hover {
  background-image: url(/media/widgets/floorplan/zoomOut_hover.svg);
}

.widget-floorplan .set-auto {
  position: absolute;
  top: 120px;
  left: 20px;
  width: 25px;
  height: 25px;
  z-index: 5;
  cursor: pointer;
  background-image: url(/media/widgets/floorplan/auto.svg);
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: 50% 50%;
  background-color: white;
}

.widget-floorplan .set-auto:hover {
  background-image: url(/media/widgets/floorplan/auto_hover.svg);
}

.widget-floorplan .select-frame {
  position:absolute;
  border:1px dotted black;
}

.widget-floorplan .select-frame.hidden {
  display: none;
}

.widget-floorplan .rotation-table {
  position: absolute;
	width: 38px;
	height: 25px;
	border: 1px solid #BBBBBB;
	background: #E8E8E8;
	text-align: center;
	font-size: 14px;
	line-height: 28px;
	z-index: 999;
	box-shadow: 1px 3px 10px #B3B6B6;
}

.widget-floorplan .rotation-table.hidden {
  display: none;
}

.widget-floorplan .size-table {
  position: absolute;
	width: 100px;
	height: 25px;
	border: 1px solid #BBBBBB;
	background: #E8E8E8;
	text-align: center;
	font-size: 14px;
	line-height: 28px;
	z-index: 999;
	box-shadow: 1px 3px 10px #B3B6B6;
}

.widget-floorplan .size-table.hidden {
  display: none;
}

.widget-floorplan .position-table {
  position: absolute;
	border: 1px solid #BBBBBB;
	background: #E8E8E8;
	text-align: left;
	font-size: 12px;
	padding: 5px;
	z-index: 999;
	box-shadow: 1px 3px 10px #B3B6B6;
}

.widget-floorplan .position-table.hidden {
  display: none;
}

.widget-floorplan .substrate {
  position: absolute;
  border: 1px solid black;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.widget-floorplan .substrate .connection-line {
  position: absolute;
  height: 1px;
  background-color: black;
}

.widget-floorplan .substrate .connection-line:before {
  /*content: "";*/
  /*position: absolute;*/
  /*top: -5px;*/
  /*height: 10px;*/
  /*width: 100%;*/
  /*background-color: orangered;*/
  /*opacity: .5;*/
  /*cursor: pointer;*/
}

.widget-floorplan .substrate .anchor-point {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: lightgreen;
  border: 1px solid green;
  border-radius: 50%;
  z-index: 4;
  cursor: crosshair;
}

.widget-floorplan .substrate .item-scene {
  position: absolute;
  transform: rotate(0deg) scale(1);
  z-index: 3;
}

.widget-floorplan .substrate .item-scene.reserved svg {
  fill: red;
}

.widget-floorplan .substrate .item-scene.selected svg {
  fill: blue;
}

.widget-floorplan .substrate .item-scene.neighbour svg {
  fill: grey;
}

.widget-floorplan .substrate .item-scene.available svg {
  fill: green;
}

.widget-floorplan .substrate .item-name {
  position: absolute;
  background-color: #fff;
  z-index: 1;
}

.widget-floorplan .item-panel {
  position: absolute;
  height: 90%;
  top: 5%;
  right: 30px;
  width: 100px;
  border: 1px solid black;
  z-index: 4;
  background-color: #ffffff;
  transition: right .3s ease;
}

.widget-floorplan .item-panel.hide {
  right: -110px;
}

.widget-floorplan .create-connection-line {
  position: absolute;
  height: 1px;
  background-color: black;
}

.widget-floorplan .create-connection-line.hidden {
  display: none;
}

.widget-floorplan .item-panel .item-panel-model {
  text-align: center;
  margin-top: 10px;
  user-select: none;
}

.widget-floorplan .item-panel .item-panel-model:hover {
  fill: #136AFF;
  color: #136AFF;
}

.widget-floorplan .hide-item-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  border-left: 1px solid black;
  cursor: pointer;
  background-image: url(/media/widgets/floorplan/toggleRight.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: .3s ease background;
}

.widget-floorplan .hide-item-panel:hover {
  background-color: rgba(0,0,0, 0.2);
}

.widget-floorplan .hide-item-panel.hide {
  background-image: url(/media/widgets/floorplan/toggleLeft.png);
}

.widget-floorplan .substrate .item-scene{ overflow:visible;}
.widget-floorplan .substrate .item-scene{ 
  /*background-image:url($(theme_url)/media/marker/unchecked-checkbox.svg/?$(theme_query));  */
  background: url(/media/widgets/floorplan/unchecked-checkbox.svg) no-repeat left top transparent;
  background-size: 16px 16px;
  padding: 15px 0 0 0;
  margin-top:-8px;
}
.widget-floorplan .substrate .item-scene.reserved{  
  background-image: url(/media/widgets/floorplan/unchecked-checkbox-lock-red.svg) 
}
.widget-floorplan .substrate .item-scene.selected{  
  background-image: url(/media/widgets/floorplan/checked-checkbox-blue.svg) 
}
.widget-floorplan .substrate .item-scene.neighbour{
  background-image: url(/media/widgets/floorplan/unchecked-checkbox-lock-gray.svg) 
}

.workspace-grid-pane { 
  position: absolute; 
  z-index: 2; 
  overflow: visible; 
  left: 0px; 
  right: 0; 
  top: 0px; 
  height: 100vh; 
  padding: 20px;
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box;
  background-color: $(default_bg); 
}
.workspace-grid-pane.full-size > .content {  height: 100%; }