table {
  empty-cells: show;
}

.trillo-display-none {
  display: none !important;
}

/* The following CSS is applied to an element when it becomes invisible due to 
   view-port size (for example a responsive navigation bar collapses when view-port
   is smaller. 
*/
.trillo-hidden {
  visibility: hidden;
}

.trillo-template-hidden {
  visibility: hidden;
}

/* The following CSS class is applied to a container element when it has no content. 
   It is different from "trillo-hidden" which is applied on a responsive element.
*/
.trillo-cleared {
  
}

/* Style used to remove something from the user view still be rendered in the 
   background 
*/
.trillo-position-outside {
  position: absolute;
  left: -10000px;
  top: 10x;
}

/* Used to show something as receded, for example when a modal dialog is 
   shown the main panel is receded. 
*/
.trillo-content-receded {
  position: fixed;
  opacity: 0.5;
  width: 100%;
}

/* Until application is ready, templates and model data are mixed-in, certain 
   elements such as with mustache template may be kept invisible. They will be 
   made visible once application is ready. When the application is ready, framework
   adds a class called trillo-app-ready to body. */
.trillo-on-app-ready {
  visibility: hidden;
}

.trillo-app-ready .trillo-on-app-ready {
  visibility: visible;
}

.trillo-sortable {
  cursor: pointer;
}

.trillo-clearfix:before, .trillo-clearfix:after {
  display: table;
  content: "";
}

.trillo-clearfix:after {
  clear: both;
}

/* Canvas */
.trillo-canvas {
  position: relative;
}

/* Hiding and showing editable part of a cell in the table */
.trillo-on-edit-cell {
  display: none;
}

.trillo-editable .trillo-on-edit-cell {
  display: table-cell;
}

/* Flex grid */
.trillo-flex-grid {
  position: relative;
}

/* Page */
.trillo-root-elem {
  height: 100%;
}

.trillo-application {
  height: auto !important;
  min-height: 100%;
  height: 100%;
}

/* utility CSS such as text alignment, styling */
.trillo-text-left {
  text-align: left;
}

.trillo-text-right {
  text-align: right;
}

.trillo-text-center {
  text-align: center;
}

.trillo-text-justify {
  text-align: justify;
}

.trillo-text-nowrap {
  white-space: nowrap;
}

.trillo-text-lowercase {
  text-transform: lowercase;
}

.trillo-text-uppercase {
  text-transform: uppercase;
}

.trillo-text-capitalize {
  text-transform: capitalize;
}

.trillo-pull-left {
  float: left;
}

.trillo-pull-right {
  float: right;
}

@media (max-width: 1400px) {
  .hide-1400 {
    display:none;
  }
}

@media (max-width: 1300px) {
  .hide-1300 {
    display:none;
  }
}

@media (max-width: 1200px) {
  .hide-1200 {
    display:none;
  }
}

@media (max-width: 1100px) {
  .hide-1100 {
    display:none;
  }
}

@media (max-width: 1000px) {
  .hide-1000 {
    display:none;
  }
}

@media (max-width: 900px) {
  .hide-900 {
    display:none;
  }
}

@media (max-width: 800px) {
  .hide-800 {
    display:none;
  }
}

@media (max-width: 700px) {
  .hide-700 {
    display:none;
  }
}

@media (max-width: 600px) {
  .hide-600 {
    display:none;
  }
}

@media (max-width: 500px) {
  .hide-500 {
    display:none;
  }
}

@media (max-width: 400px) {
  .hide-400 {
    display:none;
  }
}

.trillo-role-display-none {
  display: none;
}

.trillo-empty-container-hide {
  display: none !important;
}

.trillo-dragable {
  position: absolute !important;
  z-index: 10000;
  border: 1px dashed #000;
  outline: 1px dashed #eeeeee;
}

.trillo-drop-zone {
  border: 1px dashed #000;
  outline: 1px dashed #eeeeee;
  background-color: #eee;
}

/* Used for <msg>, <help> etc tags in HTML. */
.trillo-custom-tag-none {
  display: none !important;
}

.trillo-table-tool {
  cursor: pointer;
  text-decoration: underline;
  opacity: 0.66;
}

.trillo-table-tool:hover {
  opacity: 1;
}

.trillo-tree-node-hide {
  display: none;
}

.trillo-tree-node-match > .trillo-tree-item {
  font-style: italic;
}