/* this must be the last import - this one will contain the substituted variables */
/* Mixins */
/**
    Be as precise as possible when applying this style!
    overflow: hidden; used here will cause the element to get its own render layer.
    This is a huge performance drawback when applied to a lot of elements in the table!
 */
.draggable-page-list-widget .horizontal {
  display: flex;
  flex-direction: row;
}
.draggable-page-list-widget .item-container-title {
  background-color: #f5f5f5;
  color: #4c4c4c;
  height: 45px;
  line-height: 45px;
  padding-left: 10px;
}
.draggable-page-list-widget .drag-n-drop-area .column-separator {
  border: 1px solid #f3f4f7;
  border-top: none;
  border-bottom: none;
  background-color: #f5f5f5;
  width: 8px;
}
.draggable-page-list-widget .drag-n-drop-area .filler {
  width: 35px;
}
.draggable-page-list-widget .drag-n-drop-area .clickable {
  cursor: pointer;
}
.draggable-page-list-widget .drag-n-drop-area .item-container {
  flex: 50%;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item {
  overflow: hidden;
  background-color: white;
  width: inherit;
  border-bottom: 1px solid #f3f4f7;
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  padding: 5px 11px 5px 0;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-icon-wrapper {
  flex: 0 0 auto;
  width: 40px;
  padding: 3px 0 0;
  text-align: center;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-icon-wrapper .item-icon {
  color: #d5d9e2;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-icon-wrapper img.item-icon {
  width: 18px;
  height: 18px;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-icon-wrapper .fa.item-icon {
  font-size: 18px;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-content {
  flex-grow: 1;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-title {
  font-size: 13px;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-title a:hover,
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-title a:active {
  text-decoration: none;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-details {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 0.3em;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-details .item-icons {
  flex-shrink: 0;
  line-height: 16px;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-details .item-icons > img {
  vertical-align: top;
  width: 16px;
  height: 16px;
  margin-right: 0.3em;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-details .item-labels {
  margin-left: auto;
  font-size: 11px;
  font-weight: bold;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-details .item-labels a,
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-details .item-labels a:hover,
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-details .item-labels a:active {
  color: black;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-user-icons {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-self: center;
  justify-content: flex-start;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-user-icons img,
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-user-icons span {
  border-radius: 28px;
  border: 1px solid white;
  height: 28px;
  width: 28px;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-user-icons img:not(:first-child),
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-user-icons span:not(:first-child) {
  margin-left: -15px;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item .item-user-icons span {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: #a9a9a9;
  font-size: 10px;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item:hover {
  background-color: #f5f5f5;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-source--is-dragging {
  opacity: 0.4;
  background-color: #f5f5f5;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-item.blocked {
  background-color: #fbd4d7;
}
.draggable-page-list-widget .drag-n-drop-area .item-container .draggable-mirror {
  width: 550px;
  border: none;
  z-index: 10;
}
:root {
  --repo-path-main: '../main';
  --plugin-path-cf-cplace-platform: '../../../../main/cf.cplace.platform';
  --brand-default: #FFFFFF;
  --brand-primary-components: #3070b3;
  --font-family-sans-serif: "Roboto", Arial, Helvetica, Sans-Serif;
  --border-radius-base: 3px;
  --input-border-radius: 0px;
  --modal-border-radius: 5px;
  --widget-border-radius: 0px;
  --widget-padding: 10px;
  --header-bg: #ffffff;
  --header-border: #4c4c4c;
  --header-link-color: #3071b3;
  --header-link-hover-color: #25588b;
  --history-bg: #e2e2e2;
  --history-color: #3071b3;
  --workspace-sidebar-bg: #4c4c4c;
  --workspace-sidebar-link-color: #c6c7c8;
  --workspace-sidebar-link-focus-color: #ffffff;
  --workspace-sidebar-link-hover-color: #4c4c4c;
  --workspace-sidebar-link-hover-bg: #c9c9c9;
  --cf-cplace-breadcrumbs-font-color: #ffffff;
  --cf-cplace-breadcrumbs-background-color-odd: #4085cc;
  --cf-cplace-breadcrumbs-background-color-even: #3071b3;
  --cf-cplace-breadcrumbs-background-color-hover: #689fd7;
  --cf-cplace-breadcrumbs-background-color-active: #488ace;
  --cf-cplace-navigation-tile-background-color: #828282;
  --cf-cplace-navigation-tile-background-color-hover: #c0c0c0;
  --cf-cplace-navigation-tile-font-color-hover: #000000;
  --cf-cplace-navigation-tile-font-color: #ffffff;
  --cf-cplace-navigation-tile-font-color-active: #000000;
  --cf-cplace-navigation-tile-dropdown-font-color: #ffffff;
  --cf-cplace-navigation-tile-dropdown-background-color: #828282;
  --cf-cplace-navigation-tile-dropdown-background-color-hover: #828282;
  --cf-cplace-navigation-tile-dropdown-item-background-color: #828282;
  --cf-cplace-navigation-tile-dropdown-item-font-color: #ffffff;
  --cf-cplace-navigation-tile-dropdown-item-font-color-active: #000000;
  --tnb-border-color: #4c4c4c;
  --wm-logo-bg-color: #ffffff;
  --wm-toggle-bg-color: #ffffff;
  --wm-toggle-color: #4c4c4c;
  --wm-bg-color: #4c4c4c;
  --wm-node-color: #c6c7c8;
  --wm-node-hover-bg-color: #c9c9c9;
  --wm-node-hover-color: #4c4c4c;
  --wm-node-active-color: #ffffff;
  --brand-primary: #3070b3;
  --brand-info: #a5b5bd;
  --brand-success: #34c049;
  --brand-warning: #e2a336;
  --brand-danger: #bf111d;
  --body-bg: #f4f4f4;
  --text-color: #4c4c4c;
  --link-color: #3071b3;
  --modal-content-bg: #f4f4f4;
  --widget-header-bg: #f5f5f5;
}