/*  Copyright (c) 2019 AT&T Intellectual Property.                             #
#                                                                              #
#   Licensed under the Apache License, Version 2.0 (the "License");            #
#   you may not use this file except in compliance with the License.           #
#   You may obtain a copy of the License at                                    #
#                                                                              #
#       http://www.apache.org/licenses/LICENSE-2.0                             #
#                                                                              #
#   Unless required by applicable law or agreed to in writing, software        #
#   distributed under the License is distributed on an "AS IS" BASIS,          #
#   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #
#   See the License for the specific language governing permissions and        #
#   limitations under the License.                                             #
##############################################################################*/


.properties-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 300px;
  z-index: 10;
  border-left: 1px solid #ccc;
  overflow: auto;
  background: white;
}

.properties-panel:empty {
  display: none;
}

.properties-panel > .djs-properties-panel {
  padding-bottom: 70px;
  min-height: 100%;
}

.properties-toggle {
  position: absolute;
  top: 0;
  right: 280px;
}

#left_panel {
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 0;
  right: 300px;
}

#drag {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 15px;
  cursor: w-resize;
  z-index: 1000;
}

.panel-buttons {
  position:absolute; 
  right: -103px; 
  z-index: 5; 
  top: 30%; 
  transform: rotate(270deg);
}

.properties-panel-button {
  cursor: pointer;
  padding: 5px 10px;
  user-select: none;
  background: lightgrey;
  margin-right: 10px;
  display: inline;
}

#tool-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background: #f8f8f8;
}

#tool-bar button mat-icon {
  font-size: 18px;
}

#tool-bar button {
  line-height: 30px !important;
}

.no-margin{
  margin: 0px !important;
}