div.cmf-core-controls-columnViewRow {
  height: 45px;
  /*
    * This 43px is needed due to the first row border of 1px and its border of 1px
    */
  line-height: 43px;
  /*     display: flex;
    flex-direction: row; */
  padding: 0 10px;
  display: grid;
  /* ========================================================================
     * = selection                |icon                     |name|icon cmf-color-error     |icon info                |value                    |action                   |action remove            |expander                 |           
     * = minmax(auto, min-content)|minmax(auto, min-content)|auto|minmax(auto, min-content)|minmax(auto, min-content)|minmax(auto, min-content)|minmax(auto, min-content)|minmax(auto, min-content)|minmax(auto, min-content)|
     * ========================================================================
     */
  grid-template-columns: minmax(auto, -webkit-min-content) minmax(auto, -webkit-min-content) auto minmax(auto, -webkit-min-content) minmax(auto, -webkit-min-content) minmax(auto, -webkit-min-content) minmax(auto, -webkit-min-content) minmax(auto, -webkit-min-content) minmax(auto, -webkit-min-content);
  grid-template-columns: minmax(auto, min-content) minmax(auto, min-content) auto minmax(auto, min-content) minmax(auto, min-content) minmax(auto, min-content) minmax(auto, min-content) minmax(auto, min-content) minmax(auto, min-content);
  border: solid;
  border-width: 1px;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
}
div.cmf-core-controls-columnViewRow .is-orderable {
  padding-left: 8px;
}
div.cmf-core-controls-columnViewRow div.name {
  display: grid;
  grid-column: 3;
  grid-template-columns: -webkit-min-content auto;
  grid-template-columns: min-content auto;
  /* flex: auto; */
  padding-right: 4px;
  overflow: hidden;
  position: relative;
}
div.cmf-core-controls-columnViewRow div.name span.is-item-required {
  font-size: 0.8em;
  grid-column: 1;
}
div.cmf-core-controls-columnViewRow div.name span.is-item-required.visibility-hidden {
  visibility: hidden;
}
div.cmf-core-controls-columnViewRow div.name .name-text {
  grid-column: 2;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
div.cmf-core-controls-columnViewRow div.selection {
  grid-column: 1;
  padding-right: 5px;
}
div.cmf-core-controls-columnViewRow div.icon {
  grid-column: 2;
  font-size: 1.2em;
  margin-right: 7px;
}
div.cmf-core-controls-columnViewRow div.icon.cmf-color-error {
  grid-column: 4;
}
div.cmf-core-controls-columnViewRow div.icon.info {
  grid-column: 5;
}
div.cmf-core-controls-columnViewRow div.action {
  font-size: 1.7em;
  margin-left: 7px;
  margin-right: 3px;
  display: -webkit-box;
  display: flex;
  grid-column: 7;
}
div.cmf-core-controls-columnViewRow div.action.remove {
  grid-column: 8;
}
div.cmf-core-controls-columnViewRow div.action.remove[disabled='true'] {
  opacity: 0.5;
}
div.cmf-core-controls-columnViewRow div.action .actionText {
  font-family: open-sans-regular;
  font-size: 0.5em;
  font-weight: bold;
  padding-left: 2px;
  white-space: nowrap;
}
div.cmf-core-controls-columnViewRow div.value {
  white-space: nowrap;
  grid-column: 6;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  -webkit-box-flex: 1;
          flex: auto;
}
div.cmf-core-controls-columnViewRow div.expander {
  grid-column: 9;
  padding-left: 3px;
  display: none;
}
div.cmf-core-controls-columnViewRow div.expander > span {
  font-size: 20px;
}
div.cmf-core-controls-columnViewRow.group div.value {
  font-weight: lighter;
}
div.cmf-core-controls-columnViewRow.group div.expander {
  display: block;
}
div.cmf-core-controls-columnViewRow div.order {
  margin-left: -4px;
  position: absolute;
  opacity: 0.2;
  font-size: 18px;
}