hpe-planning-board.css

/*
 (c) Copyright 2016 Hewlett Packard Enterprise Development LP

 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.
 */
.ext-ie .gen-board .column-holder {
  transform: translate3d(0, 0, 0);
}
.gen-context-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 100px;
  z-index: 1000;
  border: 1px solid blue;
  background: white;
}
.gen-board {
  position: relative;
  height: 100%;
}
.gen-board .header {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}
.gen-board .column-holder {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0px;
  bottom: 10px;
  border: 1px solid #ccc;
  overflow: auto;
}
.gen-board .column-container {
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
  margin: 0;
  min-height: 100%;
  vertical-align: top;
}
.gen-board .board-row {
  display: flex;
  display: -ms-flexbox;
  flex-direction: row;
  -ms-flex-direction: row;
  flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  position: relative;
  /*z-index: 1;*/
  /*fixed test*/
  /*
		flex: 0 0 80px;
		-ms-flex: 0 0 80px;
		*/
}
.gen-board .board-row.header-row {
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}
.gen-board .board-row.header-row-separator {
  -ms-flex: 0 0 34px;
  flex: 0 0 34px;
  -webkit-flex: 0 0 34px;
  height: 34px;
  background-color: #e2e9f6;
  margin: 2px 0px 0px 0px;
}
.gen-board .board-row.collapsed {
  /*
				-ms-flex: 0 0 30px;
				 flex: 0 0 30px;
				 -webkit-flex: 0 0 30px;
				 height: 30px;
		*/
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 0px;
  -ms-flex-shrink: 0;
  -ms-flex-grow: 0;
  -ms-flex-basis: 0px;
  -ms-flex-positive: 0;
  -ms-flex-negative: 0;
  -ms-flex-preferred-size: 0px;
  -webkit-flex-shrink: 0;
  -webkit-flex-grow: 0;
  -webkit-flex-basis: 0px;
  height: 0px;
  background-color: transparent;
  /*border: 1px solid whitesmoke;*/
}
.gen-board .board-row .board-column {
  display: flex;
  display: -ms-flexbox;
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 0px;
  -ms-flex-shrink: 1;
  -ms-flex-grow: 1;
  -ms-flex-basis: 0px;
  -ms-flex-positive: 1;
  -ms-flex-negative: 1;
  -ms-flex-preferred-size: 0px;
  overflow: hidden;
  position: relative;
}
.gen-board .board-row .board-column:not(:last-child) {
  border-right: 3px solid white;
}
.gen-board .board-row .board-column.first {
  flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #fff;
}
.gen-board .board-row .board-column:hover .collapse-column-icon {
  visibility: visible;
}
.gen-board .board-row .board-column .collapse-column-icon {
  visibility: hidden;
}
.gen-board .board-row .board-column.collapsed-column {
  flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  background-color: #ccc;
  border-left: 1px solid white;
  border-right: 3px solid white;
  min-width: 30px;
}
.gen-board .board-row .board-column.collapsed-column .collapsed-header-column {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 0px;
  -ms-flex-shrink: 1;
  -ms-flex-grow: 1;
  -ms-flex-basis: 0px;
  -ms-flex-positive: 1;
  -ms-flex-negative: 1;
  -ms-flex-preferred-size: 0px;
  overflow: hidden;
}
.gen-board .board-row .board-column:not(.first):not(.collapsed-column):not(.fixed-column) {
  min-width: 400px;
}
.gen-board .board-row .board-column .column_cell {
  min-height: 100%;
  flex-wrap: nowrap;
  display: flex;
  display: -ms-flexbox;
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 0px;
  -ms-flex-shrink: 1;
  -ms-flex-grow: 1;
  -ms-flex-basis: 0px;
  -ms-flex-positive: 1;
  -ms-flex-negative: 1;
  -ms-flex-preferred-size: 0px;
  /* flex-direction: column; - required to stretch gen-board-cell */
  flex-direction: column;
  -ms-flex-direction: column;
  overflow: auto;
}
.gen-board .board-row.header {
  flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  height: 30px;
  z-index: 2;
}
.gen-board .board-row.header .collapse-circle-left-icon {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRnVuY3Rpb25fSWNvbnNfX3gyMDEzX18yNHB4X0NvcmUiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiCgkgdmlld0JveD0iMCAwIDE4IDE4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOCAxODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtvcGFjaXR5OjAuMztmaWxsOiNGRkZGRkY7fQoJLnN0MXtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI5IiBjeT0iOSIgcj0iOSIvPgo8cG9seWdvbiBjbGFzcz0ic3QxIiBwb2ludHM9IjExLjcwNyw1LjIxOSAxMC40ODUsMy45OTggNS41MjMsOC45NiAxMC40ODUsMTMuOTIzIDExLjcwNywxMi43MDEgNy45NjYsOC45NiAiLz4KPC9zdmc+Cg==);
  width: 18px;
  height: 18px;
  margin-top: 2px;
  display: inline-block;
}
.gen-board .board-row.header .collapse-circle-right-icon {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRnVuY3Rpb25fSWNvbnNfX3gyMDEzX18yNHB4X0NvcmUiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiCgkgdmlld0JveD0iMCAwIDE4IDE4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOCAxODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtvcGFjaXR5OjAuMztmaWxsOiNGRkZGRkY7fQoJLnN0MXtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI5IiBjeT0iOSIgcj0iOSIvPgo8cG9seWdvbiBjbGFzcz0ic3QxIiBwb2ludHM9IjYuMjkzLDUuMjE5IDcuNTE1LDMuOTk4IDEyLjQ3Nyw4Ljk2IDcuNTE1LDEzLjkyMyA2LjI5MywxMi43MDEgMTAuMDM0LDguOTYgIi8+Cjwvc3ZnPgo=);
  width: 18px;
  height: 18px;
  margin-top: 4px;
  display: inline-block;
}
.gen-board .board-row.header .board-column {
  flex-direction: column;
  -ms-flex-direction: column;
  height: 100%;
}
.gen-board .board-row.header .board-column .subcolumn {
  flex-direction: row;
  -ms-flex-direction: row;
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 0px;
  -ms-flex-shrink: 1;
  -ms-flex-grow: 1;
  -ms-flex-basis: 0px;
  -ms-flex-positive: 1;
  -ms-flex-negative: 1;
  -ms-flex-preferred-size: 0px;
}
.gen-board .board-row.header .board-column .subcolumn .header-widget {
  margin-top: 8px;
}
.gen-board .board-row.header .board-column .header-widget {
  height: 100%;
  width: 100%;
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 0px;
  -ms-flex-shrink: 1;
  -ms-flex-grow: 1;
  -ms-flex-basis: 0px;
  -ms-flex-positive: 1;
  -ms-flex-negative: 1;
  -ms-flex-preferred-size: 0px;
  overflow: hidden;
}
.gen-board .board-row.header .board-column .header-widget .column-header {
  padding: 2px 5px;
}
.gen-board .board-row.header .board-column .header-widget .column-header .info {
  font-size: 11px;
  float: right;
}
.gen-board .board-row.header .board-column.first {
  z-index: 2;
}
.row-header {
  font-size: 11px;
}
.item-card {
  margin: 5px;
  height: 130px;
  position: relative;
  z-index: 0;
  padding: 5px;
  display: block;
  overflow: hidden;
  box-shadow: 10px 10px 5px #888888;
}
.item-card input[type="checkbox"] {
  opacity: 1;
}
.dragged-card-indicator {
  opacity: 0.5;
}
.item-card:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 16px;
  bottom: 0;
  content: "";
}
.item-card:after {
  position: absolute;
  top: 16px;
  width: 16px;
  right: 0;
  bottom: 0;
  content: "";
}
.item-card.us:before,
.item-card.us:after {
  background-color: #eff6fe;
  border: 2px solid #89a8c7;
}
div.item-card.us:after,
div.item-card.def:after {
  border-left: none;
  border-top: none;
}
div.item-card.us:before,
div.item-card.def:before {
  border-right: none;
  z-index: -1;
}
.item-card.def:before,
.item-card.def:after {
  background-color: #fdf0e7;
  border: 2px solid #e88b2e;
}
.item-card.def.selected:before,
.item-card.def.selected:after {
  border-color: red;
}
.item-card.us.selected:before,
.item-card.us.selected:after {
  border-color: blue;
}
.item-card.us.selected polygon {
  fill: blue;
}
.item-card.def.selected polygon {
  stroke: red;
}
.item-card .svg-fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
}
.item-card.us polygon {
  fill: #89a8c7;
}
.item-card.def polygon {
  fill: #fdf0e7;
  stroke: #e88b2e;
  stroke-width: 2;
}
.small-board-card .gen-board-cell-style .card-container {
  flex: 1 0 182px;
  max-width: 182px;
  min-width: 182px;
}
.tiny-board-card .gen-board-cell-style .card-container {
  flex: 1 0 120px;
  max-width: 120px;
  min-width: 120px;
}
.gen-board-cell-style {
  flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  min-height: 110px;
  /* min-height should be 100% if flex-basis (-ms-flex-preferred-size) is set to pixel size
	and min-height should be in pixels if flex-basis is set to auto
	*/
  background-color: #e2e9f6;
  overflow: hidden;
  padding: 0px 0px;
}
.gen-board-cell-style:hover .add-card-line {
  opacity: 1;
}
.gen-board-cell-style .card-container {
  display: inline-block;
  vertical-align: top;
  flex: 1 0 320px;
  max-width: 320px;
  min-width: 320px;
}
.gen-board-cell-style .add-card-line {
  border-bottom: 2px solid;
  border-color: #89ccae;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.gen-board-cell-style .add-card-line .add-card {
  margin: auto;
  width: 40px;
  height: 20px;
  border-radius: 50px 50px 0 0;
  background-color: #89ccae;
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
}
.gen-board-cell-style .add-card-line .add-card .plus-sign {
  position: absolute;
  bottom: -10px;
  font-size: 25px;
  color: #FFF;
  left: 13px;
  right: 0;
}
.dragged-item {
  transition: top 0.5s, left 0.5s, opacity 0.5s;
  position: absolute;
  opacity: 1;
}
.dragged-item-counter {
  transition: opacity 0.5s;
  position: absolute;
  opacity: 0;
  background-color: #555;
  color: #fff;
  padding: 5px;
  border-radius: 50%;
  top: -5px;
}
.dragged-container {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.subcolumn {
  display: flex;
  display: -ms-flexbox;
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 0px;
  -ms-flex-shrink: 1;
  -ms-flex-grow: 1;
  -ms-flex-basis: 0px;
  -ms-flex-positive: 1;
  -ms-flex-negative: 1;
  -ms-flex-preferred-size: 0px;
  overflow: hidden;
}
.subcolumn:not(:last-child) {
  border-right: 1px solid #ccc;
}
.dummy {
  margin: 5px;
  height: 30px;
  padding: 5px;
  display: none;
  background-color: #fdf0e7;
  border: 5px dashed rgba(0, 0, 255, 0.5);
  opacity: 0.5;
}
.dummy div {
  transform: translateY(-50%);
  top: 50%;
  position: relative;
  text-align: center;
}
.dummy.show {
  display: block;
}
.over-down {
  opacity: 0.1;
}
.over-up {
  opacity: 0.1;
}
/* */
.dummy-area-style {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
}
.dummy-style {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 100px;
  pointer-events: none;
}
.drag-container {
  display: block;
  overflow-x: hidden;
}
.drag-error .drag-dummy-inside {
  border-color: #bbbbbb;
}
.drag-error .drag-dummy-inside .dummy-error-image {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMyAtMyAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAzIC0zIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJ3Ij4KPC9nPgo8cGF0aCBzdHlsZT0iZmlsbDojRkE0NjUyOyIgZD0iTTExLTNDNi41NDYtMywzLDAuNTQ2LDMsNXMzLjU0Niw4LDgsOHM4LTMuNTQ2LDgtOFMxNS40NTQtMywxMS0zeiBNMTEtMS4yNjgKCWMxLjMyLDAsMi42MzksMC40MTIsMy42MjksMS4xNTVsLTguNjYsOC43NDJDNS4yMjcsNy42MzksNC44MTQsNi4zMiw0LjgxNCw1QzQuNzMyLDEuNTM2LDcuNTM2LTEuMjY4LDExLTEuMjY4eiBNMTEsMTEuMTg2CgljLTEuNDAyLDAtMi42MzktMC40MTItMy42MjktMS4xNTVsOC42Ni04Ljc0MmMwLjc0MiwwLjk5LDEuMTU1LDIuMzA5LDEuMTU1LDMuNjI5QzE3LjI2OCw4LjM4MSwxNC40NjQsMTEuMTg2LDExLDExLjE4NnoiLz4KPC9zdmc+Cg==);
  width: 16px;
  height: 16px;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  transform: translateY(-10px);
}
.drag-error .drag-dummy-inside .dummy-text {
  color: #fa4753;
}
.drag-dummy-inside {
  border: 2px solid #777777;
  border-style: dashed;
  background-color: #ffffff;
  opacity: 0.85;
  overflow: hidden;
  z-index: 1000;
  font-size: 26px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.drag-dummy-inside .inner-dummy {
  position: absolute;
  margin: auto;
  top: 50%;
  bottom: 0px;
  left: 50%;
  right: 0px;
  transform: translate(-50%, -50%);
  text-align: center;
}
.drag-dummy-inside .dummy-image {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjU2LjExN3B4IiBoZWlnaHQ9IjI0LjIwMXB4IiB2aWV3Qm94PSIwIDAgNTYuMTE3IDI0LjIwMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTYuMTE3IDI0LjIwMTsiCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIHN0eWxlPSJmaWxsOiM4ODg4ODg7IiBkPSJNNTUuNTQxLDIyLjE4MWMwLTAuMDE5LTAuMDI5LDAuMzAxLTAuMDI4LDAuMjgybDAuNTY0LTEwLjM5NGwwLDBsMC4wMjgtMC42ODQKCWMwLjA4OC0wLjc5OS0wLjMxOS0xLjU1Ni0xLjEwNi0xLjcyMmMtMC43OTMtMC4xNjctMS41NTcsMC4zNDEtMS43MjEsMS4xMzFsLTAuMDQyLDAuMjI1bC0xLjE5OCw1LjA1NgoJYy0wLjAwNC0wLjAwNS0wLjAwNi0wLjAwNy0wLjAxLTAuMDEyYy0wLjk3Ny0xLjIxOC0yLjIxMi0yLjY2Ni0zLjcyNS00LjIxOWMtMi4xMTUtMi4xNjEtNC43NjYtNC41My03Ljk1My02LjYwOAoJYy0zLjE3NS0yLjA3My02LjkyNC0zLjg0MS0xMC45MjEtNC42NTFjLTAuNTA0LTAuMTAzLTEuMDIyLTAuMTgtMS41My0wLjI2OGMtMC41MDktMC4wODMtMC45NzMtMC4xMS0xLjQ2LTAuMTY3bC0wLjM5NS0wLjA0MgoJbC0wLjM3Mi0wLjAxNEwyNC45MywwLjA2N2MtMC40OTMtMC4wMTctMC45ODUtMC4wMzUtMS40NzUtMC4wNTJjLTAuNDg4LTAuMDMyLTAuOTc3LTAuMDA0LTEuNDYyLDAuMDE2CgljLTAuNDg0LDAuMDItMC45NjcsMC4wNC0xLjQ0NywwLjA1OWMtMC40NzksMC4wMDYtMC45NTMsMC4wNi0xLjQyMywwLjEyYy0wLjQ2OSwwLjA1NS0wLjkzNSwwLjEwOS0xLjM5OCwwLjE2MwoJYy0zLjY4NywwLjUxMS03LjAyMiwxLjU1NS05LjY4OSwyLjgxNkM1LjM1OSw0LjQzNywzLjMyNyw1LjgyNywxLjk5LDYuODg3QzAuNjUxLDcuOTQ5LDAsOC42NzgsMCw4LjY3OFMwLjcwNiw4LDIuMTExLDcuMDUKCWMxLjQwMS0wLjk0OCwzLjUwOS0yLjE2Niw2LjIxLTMuMTgzYzIuNjkxLTEuMDMyLDUuOTkzLTEuNzk0LDkuNTU3LTIuMDE0YzAuNDQ1LTAuMDE4LDAuODk2LTAuMDQxLDEuMzQ4LTAuMDU5CgljMC40NTItMC4wMjMsMC45MDctMC4wNTEsMS4zNjctMC4wMjFjMC40NTgsMC4wMTYsMC45MjEsMC4wMTMsMS4zODQsMC4wMjljMC40NjIsMC4wMTYsNC4xNSwwLjU1LDQuMTUsMC41NQoJYzAuNDY4LDAuMDkxLDAuOTcyLDAuMTU1LDEuNDE1LDAuMjY2YzAuNDQsMC4xMTUsMC44ODMsMC4xNzEsMS4zMjIsMC4yOTdjMy41NzksMS4wMTQsNi44NjMsMi44NTYsOS42MjksNC45NzcKCWMyLjc3MiwyLjEyNSw1LjA1OSw0LjQ4Nyw2Ljg2MSw2LjYzM2MxLjE5NSwxLjQzMSwyLjE3OCwyLjc1NCwyLjk2MywzLjg5bC00LjkzNi0xLjA4OWwtMC4yMjUtMC4wNQoJYy0wLjc4OS0wLjE3My0xLjU2MywwLjI5Ny0xLjczOCwxLjA4NWMtMC4xNzQsMC43ODgsMC4yODEsMS42MjMsMS4wNzgsMS43MWwtMC4wMjctMC4wMDNsLTAuMDA2LDAuMDU1bDkuNjI1LDMuNzAxCgljMC43OTMsMC41MzIsMS44ODUsMC41MTMsMi42NTYtMC4xMjljMC40MjYtMC4zNTUsMC42ODEtMC44NDUsMC43NjItMS4zNTRDNTUuNTE4LDIyLjI4OSw1NS41MzYsMjIuMjM3LDU1LjU0MSwyMi4xODF6Ii8+Cjwvc3ZnPgo=);
  width: 60px;
  height: 24px;
  margin: auto;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  transform: translateY(-10px);
}
.drag-dummy-inside .dummy-text {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 0px;
  right: 0px;
  bottom: 0px;
  color: #777777;
}
.dummy-style .drag-dummy-inside .inner-dummy .dummy-image {
  transform: scale(0.8);
}
.dummy-style .drag-dummy-inside .inner-dummy .dummy-text {
  font-size: 22px;
  top: 60%;
}
.small-board-card .dummy-style .drag-dummy-inside .inner-dummy .dummy-image {
  transform: scale(0.8);
}
.small-board-card .dummy-style .drag-dummy-inside .inner-dummy .dummy-text {
  font-size: 18px;
  top: 60%;
}
.tiny-board-card .dummy-style .drag-dummy-inside .inner-dummy .dummy-image {
  transform: scale(0.5);
}
.tiny-board-card .dummy-style .drag-dummy-inside .inner-dummy .dummy-text {
  font-size: 12px;
  top: 60%;
}
.draggable-element.autofit {
  overflow: hidden;
  background-color: red;
  padding: 2px;
  margin: 2px;
  position: relative;
  border: 2px solid green;
}
.draggable-element.autofit.small {
  width: 50px;
}
.draggable-element.autofit.medium {
  width: 100px;
}
.draggable-element.autofit.large {
  width: 300px;
}