.width100 {
    width: 100%;
}

.height100 {
    height: 100%;
}

.alignItemsStart {
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.alignItemsCenter {
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.alignItemsBaseline {
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}

.alignItemsEnd {
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.alignItemsStretch {
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}

.alignSelfStart {
    -ms-flex-item-align: start;
    -webkit-align-self: flex-start;
    align-self: flex-start;
}

.alignSelfCenter {
    -ms-flex-item-align: center;
    -webkit-align-self: center;
    align-self: center;
}

.alignSelfEnd {
    -ms-flex-item-align: end;
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.alignSelfStretch {
    -ms-flex-item-align: stretch;
    -webkit-align-self: stretch;
    align-self: stretch;
}

.flexWrap {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.d-view-stack {
    height: auto;
}

.d-list-category {
    font-size: small;
    font-weight: bold;
}

.d-list-category .d-list-cell {
    height: 25px;
    cursor: default;
}

.justifyContentCenter {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.justifyContentEnd {
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.c4-dialog[maximizeDialog = true] > .c4-widget-preview {
    flex: 1;
}

.c4-dialog.c4-dialog-error {
    max-width: 50%;
    min-width: 600px !important;
}

.c4-dialog-error .c4-dialog-header {
    background-color: #FFF4F4;
}

.c4-dialog-error .c4-dialog-header div {
    color: #C54747;
    font-weight: 400;
}

.c4-dialog-error .c4-widget-preview {
    padding: 1em;
}

.c4-dialog-error-label {
    font-weight: 500;
}

.c4-dialog-header,
.fieldSectionHeader,
.nonSelectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    cursor: default;
}

.childMinWidth250 > * {
    min-width: 250px;
}


.childMinWidth300 > * {
    min-width: 300px;
}

.childMinWidth600 > * {
    min-width: 600px;
}

.childWidth100p > * {
    width: 100%;
}

.fieldSectionHeader {
    font-weight: 500;
    color: #5b5b5b;
    padding: 2px 1em;
    border-bottom: 1px #b5bcc7 solid;
    margin-bottom: 2px;
}

.borderBottom {
    border-bottom: 1px #b5bcc7 solid;
}

.borderLeft {
    border-left: 1px #b5bcc7 solid;
}

.borderRight {
    border-right: 1px #b5bcc7 solid;
}

.borderTop {
    border-top: 1px #b5bcc7 solid;
}

body {
    font-family: roboto, "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;

    -ms-touch-action: none;
    touch-action: none;
}

.c4-app {
    display: block;
}

.c4-action-button {
    white-space: normal;
    text-align: left;
    display: flex;
}

.c4-action-button-icon {
    margin-right: 1em;
}

.c4-action-button:hover .c4-action-button-icon {
    filter: opacity(80%);
}

.c4-action-button-label-strong {
    font-weight: 500;
}

.c4-action-image-download-button {
    width: 450px;
    justify-content: flex-start;
}

.c4-field-actions.compact .c4-action-button,
.c4-gadget-actions.compact .c4-action-button {
    padding: 0.5em 1em;
}

.formatter-action-button.borderless.d-button {
    padding: 0;
}

.c4-badge  {
    font-weight: bold;
    position: absolute;
    display: inline;
    padding: 4px 6px;
    top: 0px;
    right: 0px;
    color: white;
    border-radius: 10px;
    text-align: center;
    background-color: #de151f;
    background-clip: padding-box;
    line-height: 1;
}

.c4-badge-small {
    font-size: 12px;
    height: 20px;
    min-width: 20px;
}

.c4-control-characteristics .c4-widget-date {
    min-width: auto;
}

.c4-characteristic-row > * + * {
    margin-left: 1em;
}

.c4-widget-editor .d-scrollable-container {
    padding-left: 1em;
    padding-right: 42px;
}

.c4-control-file,
.c4-control-file-upload-info {
    min-height: 3em;
    border: dashed #959ca7 1px;
}

.c4-control-file:hover,
.c4-control-file-drag,
.c4-control-file-upload-info:hover {
    border-color: #0d85ef;
    border-width: 2px;
}

.c4-control-file-upload-info {
    text-align: center;
    padding: 1em;
}

.c4-control-list .d-list-item-label,
.c4-wizard-addsmd-list .d-list-item-label,
.c4-control-file-upload-list .d-list-item-label {
    word-break:break-word; 
    white-space: normal; 
}

.c4-control-list .d-list-item-icon,
.c4-wizard-addsmd-list .d-list-item-icon,
.c4-control-file-upload-list .d-list-item-icon {
    min-width: 16px;
}

.c4-control-list .d-list-cell,
.c4-wizard-addsmd-list .d-list-cell,
.c4-control-file-upload-list .d-list-cell {
    min-height: 40px;
    height: auto;
    padding: 4px 8px;
}

.c4-control-list-button {
    padding: 8px 6px;
}

.c4-control-list-button ~ .c4-control-list-button {
    margin-left: 0.5em;
}

.c4-wizard-addsmd-list,
.c4-control-list-list {
    min-height: 33px;
    border-radius: 4px;
    border: 1px solid #cccccc;
}

.c4-control-list[disabled=true] .c4-control-list-toolbar{
    display: none;
}

.c4-control-relation[disabled=true] .c4-control-relation-toolbar{
    display: none;
}
.c4-control-relation[disabled=true] .many-relations-add{
    display: none;
}

.c4-control-list .d-list-item-right-icon {
      margin-right: 1em;
      display: flex;
}

.c4-control-date .d-combobox-arrow {
    top: initial;
    right: 10px;
}

.c4-control-time input.d-textbox-input {
    max-width: 115px;
    padding: 4px 12px;
}

.c4-searchpart-advanced-value .nativeTimePicker input {
    padding: 3px 12px;  /* no time to figure out where the extra two px is */
}

.c4-control-time .fallbackTimePicker .clock-icon {
    padding-left: 5px;
    display: flex;
    align-items: center;
}

.c4-dialog-header {
    font-size: large;
    padding-left: 1em;
    font-weight: 300;
    color: #5b5b5b;
    background-color: #E0E0E0;
    min-height: 56px;
    min-width: 500px;
}

.c4-dialog-login .c4-dialog-header {
    min-width: auto;
}

.c4-component-list .dgrid-footer,
.c4-selection .dgrid-footer,
.c4-control-characteristics-toolbar,
.c4-dialog-toolbar {
    border-top: 1px #cccccc solid;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #E0E0E0;
    min-height: 56px;
}

.c4-toolbar {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    float: right;
}

.c4-toolbar-spacer {
    width: 1px;
    height: 2em;
    border: 1px #b5bcc7 solid;
    margin: 2px;
}

.c4-component-versions-list {
    width: 750px;
}

.dgrid.c4-component-version-compare {
    width: 1000px;
    height: 600px;
}

.c4-componentlist-toolbar + .c4-componentlist-toolbar {
    margin-left: 1em;
}

.c4-componentlist-toolbar-view {
    flex-grow: 1;
}

.c4-field-download-button {
    padding: 0.5em;
}

.c4-field-mandatory[disabled] {
    display: none;
}

.c4-button.clickable {
    padding: 1em;
}


.c4-button.clickable:hover {
    color: black;
}

.c4-logo {
    display: flex;
}

.c4-logo.clickable {
    cursor: pointer;
}

.c4-trail .c4-button {
    padding: 0.5em 0.5em;
    margin: 0 0.5em;
}

.c4-trail .c4-button:first-child {
    margin-left: 0;
}

.c4-control-characteristics-toolbar {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.c4-control-characteristics-toolbar > .d-button ~ .d-button {
    margin-left: 1em;
}

.c4-control-grideditor-header .dgrid-cell {
    border-style: none;
}

.c4-control-relation .dgrid-footer {
    padding: 0;
}


.c4-control-relation-view .dgrid-cell {
    border-style: none;
}

.c4-control-relation-view .dgrid-footer {
    padding-left: 0.25em;
}

.c4-control-virtual-features-parameters {
    border: 1px solid #dddddd !important;
    position: relative;
}

.c4-control-virtual-features-parameters .field-displayValue {
    padding: 0.25em 1em;
}

.c4-control-virtual-features-parameters .field-displayValue > * {
    margin-left: -1em;
}

.c4-disco {
    overflow: hidden;
}

.c4-disco-element {
    border: #ffffff solid 4px;
    color: transparent;
}

.c4-disco-element-background {
    width: 100%;
    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    -webkit-filter: grayscale(50%);
}

.c4-disco-element-label {
    padding: 4px;
}

.c4-edit-field {
    vertical-align: top;
}

.c4-edit-field > .c4-control {
    width: 100%;
}

.c4-edit-field-header {
}

.c4-edit-field-header .c4-field-label,
.c4-channel .c4-field-label {
    margin-left: 12px;
    margin-right: 0.5em;
    color: rgba(0,0,0,.7);
}

.c4-edit-field-header .c4-field-language {
    margin-left: 0.5em;
    background-size: 18px 18px;
    width: 18px;
    height: 18px;
}

.c4-edit-field-header .c4-field-mandatory,
.c4-edit-field-header .c4-field-multieditor {
    margin-left: 0.5em;
    margin-bottom: 2px;
}

.c4-component-preview .c4-field-label,
.c4-component-preview .c4-field {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.c4-field-characteristics {
    display: table-row-group;
}

.c4-widget-preview .c4-field-label {
    font-weight: 300;
    font-size: 14px;
}

.c4-widget-preview .c4-field {
    font-size: 14px;
}

.c4-control-characteristics-page .characteristicspage.chrlist-wrapper > .d-checkbox .d-checkbox-icon {
    margin-left: 8px;
    margin-right: 3px;
}

.c4-control-characteristics-page .characteristicspage.chrlist-wrapper > hr {
    display: none;
}

.c4-control-characteristics-page .characteristicspage.editor-wrapper > .c4-panel .c4-panel-titlebar {
    display: none;
}

.c4-control-characteristics-page .characteristicspage.editor-wrapper > .c4-panel .c4-panel-container {
    padding-top: 1em;
}

.c4-characteristics-group {
    display: table-row;
}

.c4-control-characteristics-rows {
    display: table;
}

.c4-characteristics-group-header {
    display: table-cell;
    padding-left: 1em;
    font-weight: bold;
}

.c4-characteristics-row {
    display: table-row;
}

.c4-characteristics-row > * {
    padding: 0.5em;
}

.c4-characteristics-row-drag-over > * {
    border-top: 1px red solid;
}

.c4-characteristics-row > *,
.c4-characteristics-row > .drag-handle {
    display: table-cell;
    vertical-align: middle;
}

.c4-characteristics-row[draggable=false] .drag-handle {
    display: none;
}

.c4-characteristics-value {
    padding-left: 1em;
    padding-right: 1em;
}

.c4-control-characteristics .c4-characteristics-header,
.c4-control-characteristics .c4-characteristics-value {
    padding-bottom: 0.5em;
}

.c4-control-characteristics .c4-characteristics-header {
    max-width: 380px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    width: 300px;
    font-size: 15px;
    font-weight: 500;
}

.c4-characteristics-header,
.c4-characteristics-remove {
    width: 1em;
}

.c4-field-characteristics .c4-characteristics-row .tdHeader {
    padding: 4px 1em;
    vertical-align: middle;
}

.c4-field-characteristics .c4-characteristics-value .c4-edit-field-header .c4-field-label {
    padding-left: 0;
}

.c4-field-characteristics .c4-characteristics-row .c4-characteristics-value .c4-edit-field {
    vertical-align: top;
    width: 60px;
}
.c4-field-characteristics .c4-characteristics-row .c4-characteristics-value .c4-edit-field-header {
    font-weight: bold;
}


.c4-characteristics-value > .d-linear-layout > .c4-edit-field + .c4-edit-field {
    margin-left: 1em;
}

/* controls/CharacteristicsPage */
.c4-control-characteristics-page-error-wrapper {
    display: flex; 
    flex-wrap: wrap;
}
.c4-control-characteristics-page-error-content {
    display: flex; 
    flex-direction: column; 
    padding: 0px 15px 15px 0px;
}

.c4-control-characteristics-page-error-span {
    font-weight: bold; 
    color: rgba(0,0,0,0.6);
}

.c4-field-customization {
    padding: 1em;
}

.c4-field-customization ul {
    margin: 0;
    padding-left: 1em;
}

.c4-field-label {
    white-space: nowrap;
}

.c4-field-value {
    align-items: center;
    align-content: center;
    moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    float: left;
}

.c4-field-single.header {
    font-size: 150%;
    font-weight: bold;
}

.c4-field-multi .c4-field-single {
    padding: 0 0.5em 0 0;
}

/* Deprecate c4-field-single with below */
.c4-field-single.clickable:hover {
    color: white;
    background-color:#9cd4d5;
    transition:background-color linear 0.5s;
}

/* Deprecate c4-field-single with below */

.c4-field-single.clickable {
    color: #3c7578;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius: 4px;
    padding: 4px 0.5em;
    cursor: pointer;
}

.c4-characteristics-value > .c4-field-multi .c4-field-multi-value.c4-field-single,
.searchwords.c4-field-multi > .c4-field-single {
    padding: 4px 12px 4px 12px;
    margin: 4px 8px 4px 0;
    color: black;
    background-color: #f1f1f1;
    border-radius: 28px;
}

.c4-characteristics-value > .c4-field-multi .c4-field-multi-value.c4-field-single.clickable,
.searchwords.c4-field-multi > .c4-field-single.clickable  {
    background-color: #9cd4d5;
    color: black;
    cursor: pointer;
}

.c4-characteristics-value > .c4-field-multi .c4-field-multi-value.c4-field-single.clickable:hover,
.searchwords.c4-field-multi > .c4-field-single.clickable:hover  {
    background-color: #f1f1f1;
    transition:background-color linear 0.5s;
}


.c4-field-multi.searchwords {
    display: flex;
    flex-wrap: wrap;
}

.c4-field-multieditor {
    color: darkmagenta;
}

.c4-workspace .dgrid-cell,
.c4-filter .dgrid-cell {
    padding: 0.5em 3px;
    border-style: none;
}

.c4-workspace .dgrid-expando-icon,
.c4-filter .dgrid-expando-icon {
   margin-top: 2px;
}

.c4-workspace :focus,
.c4-filter :focus {
    outline-style: none;
}

@media (max-width:970px) {
    .c4-component-editor {
        min-width: 0;
    }
}

.c4-component-editor-multi-ambiguous {
    border: darkmagenta solid;
    border-radius: 6px;
    display: block;
}

.c4-language-selector {
    flex-wrap: wrap;
}

.c4-language-selector .c4-button {
    padding: 0;
    width: 40px;
    height: 40px;

    margin-right: 8px;

    opacity: 1 !important;
}

.c4-search .d-combobox-input {
    padding-right: 8px;
}

.c4-searchpart-list,
.c4-list-noborders {
}

.c4-searchpart-list .d-list-cell,
.c4-list-noborders .d-list-cell {
    outline-style: none;
    border-bottom-style: none;
}

.c4-list-category .d-list-category {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.c4-list-category .d-list-category:first-child {
    margin-top: 0;
}

.c4-login {
    width: 350px !important;
    background-color: white;
    border-radius: 4px;
}

.c4-login-container {
    width: 100%;
    padding: 1.5em;
}

.c4-login-error {
    font-weight: 700;
    margin-bottom: 1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
}

.c4-login .logo {
    margin: 2em;
}

.c4-panel-container {
    padding: 0.25em 0.5em 0.5em;
}

.c4-panel-titlebar {
    padding: 0em 1em;
    cursor: pointer;
    color: #5b5b5b;
    font-size: 14px;
    font-weight: 500;
    height: 44px;
}

.c4-panel:not(.c4-searchpart-panel) .c4-panel-titlebar .font-icon {
    font-size: 24px;
}

.c4-widget-editor .c4-panel-titlebar:not(.c4-control *),
ds-c4-control-relation .c4-panel-titlebar {
   /* background-color: #f370261c;
    margin-top: 0.25em;
    font-size: 18px;*/
    padding: 0 1em;
    color: white;
    background-color: #7b7b7b;
    font-size: 17px;
}

.c4-panel.c4-searchpart-panel .c4-panel-titlebar {
    padding: 1em 0.5em 0.2em;
    font-weight: normal;
    height: auto;
}

.c4-panel.c4-searchpart-panel .c4-panel-container {
    padding: 0.25em 0;
}

.c4-panel-title-value {
    margin: 0 0.5em;
    font-weight: 300;

    white-space: nowrap;
    overflow: hidden;

    text-overflow: ellipsis;
}

.c4-panel-relation-badge {
    right: -15px; 
    top: -10px; 
    display: inline !important;
    background-color: grey;
}

.c4-panel-relation-badge-active {
    background-color: #2196F3;
}


.c4-popup-popup {
    width: 100% !important;
    height: 100% !important;

    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    top: 0 !important;
    left: 0 !important;

    /* background-color: rgba(0, 0, 0, 0.4); */
	backdrop-filter: blur(1px);

    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.c4-popup-popup > * {
    width: auto;
    height: auto;

    border: 1px #b5bcc7 solid
}

.c4-widget-preview {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* background-color: white; */
}

.c4-preview-popup {
    background-color: rgba(0, 0, 0, 0.4);
}

.c4-login-popup {
    background-color: rgba(0, 0, 0, 0);
}

.c4-search {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

/* c4-component-relation */
.c4-component-relation {
    min-height: 80vh; 
    min-width: 80vw;
    height: 100%;
}
.c4-component-relation .component-relation {
    /* padding: 15px; */
    height: 100vh; /* Height issues in safari */
}

.c4-component-relation .datatype-wrapper {
    padding: 1em;
}

.c4-component-relation .color-info {
    padding-left: 1em;
}

.c4-component-relation .datatype-wrapper .actions {
    margin-top: 15px;
}

.c4-component-relation .cl-wrapper h2 {
    margin-bottom: 15px;
    text-align: center;
}

.c4-component-relation .cl-parents-wrapper {
    width: 50%;
}

.c4-component-relation .cl-parents-wrapper .dgrid-header, .c4-component-relation .cl-children-wrapper .dgrid-header {
    height: 65px;
}

.c4-component-relation-status.status-success {
    color: green;
    background: white;
    border-radius: 50%;
}

.c4-component-relation-status.status-failure {
    color: red;
    background: white;
    border-radius: 50%;
}

.c4-component-relation-status.status-unchanged {
    color: #0b6dc4;
    background: white;
    border-radius: 50%;
}

.c4-searchpart-advanced {
}

.c4-searchpart-advanced-operator {
    margin-top: 0.5em;
}

.c4-searchpart-advanced-value {
    margin: 0.5em 0em;
}

.c4-searchpart-advanced-value.d-date-picker {
    width: 100%;
}

.c4-searchpart-advanced-condition {
    margin-left: 0.5em;
}

.c4-searchpart-advanced-condition .datatype {
    font-weight: 500;
}

.c4-searchpart-advanced-condition .d-button {
    margin-left: 0.5em;
    padding: 6px;
}

.c4-searchpart-advanced-condition ~ .c4-searchpart-advanced-condition {
    margin-top: 2px;
}

.c4-searchpart-componenttype-checkboxes .d-linear-layout .d-checkbox {
    margin-right: 0.5em;
}

.c4-searchpart-componenttype-checkboxes .d-linear-layout+.d-linear-layout {
    margin-left: 1em;
}

.c4-searchpart-group {
    border: none;
}

.c4-searchpart-group .d-panel-content {
    margin: 0 0.75em;
}

.c4-searchpart-group .d-panel-header {
    background-color: transparent;

    font-weight: 500;
    color: #5b5b5b;
    padding: 2px 1em;
    border-bottom: 1px #b5bcc7 solid;
    margin-bottom: 2px;
}

.c4-searchpart-filecontent .d-switch {
    margin-left: 1em;
}

.c4-searchpart-filecontent .d-checkbox {
    margin-right: 0.5em;
}

.d-combobox ~ .c4-searchpart-smd-depends-header {
    padding-top: 0.5em;
}

.c4-searchpart-smd-depends-header {
    padding-left: 4px;
}

.c4-searchpart-relations-list {
    margin: .5em 0;
}

.c4-searchpart-relations-list d-button {
    padding: .75em;
}

.c4-searchpart-relations-title {
    text-align: center;
    background-color: #EAEAEA;
    border-radius: 5px;
    padding: .5em 0;
    border: 1px solid #ccc;
}

.c4-searchpart-relations-no-relation {
    font-style: italic;
}

.c4-relation-condition-list > * {
    padding: 4px 0;
}

.c4-relation-condition-list > *:last-child {
    padding-bottom: 0;
}

.c4-relation-restrictions {
    width: 100%;
}

.c4-side-pane-button-float {
    position: absolute;
    top: 15px;
    right: -45px;
    z-index: 999;
    display: block;

    width: 45px;
    height: 75px;

    border-radius: 0 25px 25px 0;
    border: 1px #b5bcc7 solid;
    border-left-width: 0;
    border-left-style: none;
    outline-style: none !important;
    padding-left: 0.5em;
    background-color: white;
}

.c4-side-pane-button .font-icon,
.c4-field-container-status.font-icon,
.c4-field-checkout-status.font-icon,
.c4-field-channel-status .font-icon {
    font-size: 1.3em;
}

.c4-component-list .table .c4-field-checkout-status.font-icon,
.c4-selection .table .c4-field-checkout-status.font-icon {
    font-size: 1em;
}

.c4-side-pane {
    border-right: 1px #b5bcc7 solid;
    background-color: #F5F5F5;
}

.c4-side-pane-tabs {
    width: 60px;
    padding-left: 2px;
    border-right: 1px #b5bcc7 solid;
    background-color: #E0E0E0;
}

.c4-side-pane-tabs .c4-view-switch {
    border: solid 1px transparent;
}


.c4-side-pane-tabs:not(.collapsed) .c4-view-switch.d-checked {
    border: #F5F5F5 1px solid;
    border-right-color: #F5F5F5;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
    background-color: #F5F5F5;
}

.sidebar-logo {
    justify-content: center;
    padding-bottom: 16px;
}
.sidebar-logo > .c4-logo {
    width: 32px;
    height: 32px;
}

.c4-thumbnail-wrapper {
    width: calc(162px + 1em);
    display: flex;
    align-items: center;
}

.c4-thumbnail-wrapper .icon {
    width:160px;
    min-width: 28px;
}


.c4-thumbnail-wrapper .c4-field-thumbnail {
    display: flex; 
    width: 160px;
    height: 160px; 
    align-items: center;
    justify-content: center;
}

.c4-field-thumbnail.clickable {
    cursor: zoom-in;
}

.c4-field-thumbnail.clickable.fullscreen {
    cursor: zoom-out;
}

.c4-popup.c4-widget-preview > .c4-field-thumbnail.fullscreen {
    margin: 8px;
}

.c4-field-thumbnail-frame {
    padding: 0.5em;
    outline-style: none;
    border: 1px #d3d3d3 solid;
    background-color: white;
}

.c4-field-thumbnail-container.small > .c4-field-thumbnail-frame {
    padding: 0.4em;
}

.c4-field-thumbnail-container.small {
    width: calc(162px + 1em);
    height: calc(162px + 1em);
}

.c4-tooltip {
    position: absolute;
    z-index: 2000;
    display: block;
    margin: 0;
    padding: 2px;
    border-width: 1px;
    border-style: solid;
    opacity: .99;
    border-color: #5a5a5a;
    border-radius: 8px;
    background-color: white;
}
.c4-tooltip.c4-tooltip-above {
    margin-top: 11px;
}
.c4-tooltip.c4-tooltip-below {
    margin-top: -11px;
}
.c4-tooltip-anchor {
    position: absolute;
    width: 1px;
    height: 1px;
    background-color: transparent;
    line-height: 0;
    font-size: 0;
}
.c4-tooltip-above .c4-tooltip-anchor {
    top: -1px;
}
.c4-tooltip-below .c4-tooltip-anchor {
    bottom: -1px;
}

.c4-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    border: 11px solid transparent;
}
.c4-tooltip-above .c4-tooltip-arrow {
    top: auto;
    bottom: 1px;
    left: auto;
    right: auto;
    border-top-width: 0;
    border-bottom-color: #5a5a5a;
}
.c4-tooltip-below .c4-tooltip-arrow {
    top: 1px;
    bottom: auto;
    left: auto;
    right: auto;
    border-bottom-width: 0;
    border-top-color: #5a5a5a;
}
.c4-tooltip-inner-arrow {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    border: 10px solid transparent;
}
.c4-tooltip-above .c4-tooltip-inner-Arrow {
    bottom: 0;
    left: 0;
    border-top-width: 0;
    border-bottom-color: white;
}
.c4-tooltip-below .c4-tooltip-inner-arrow {
    top: 0;
    left: 0;
    border-bottom-width: 0;
    border-top-color: white;
}

.c4-tooltip > *:last-child {
    background-color: white;
    padding: 1em;
}

.c4-tooltip-header {
    white-space: nowrap;
    text-align: center;
    width: 100%;
}


.c4-view-switch,
.d-button.borderless,
.d-button.close,
.c4-language-selector-button {
    background-color: transparent;
    background-image: none;

    padding: 1em;
    border-style: none;
    outline-style: none;
}

.d-button.information {
    background-color: transparent;
    background-image: none;

    padding: .2em;
    border-style: none;
    outline-style: none;
}

.c4-widget-date {
    min-width: 150px;
}

.c4-view-switch:not(.d-checked),
.d-button.borderless,
.d-button.close,
.c4-language-selector-button:not(.d-checked) {
    cursor: pointer;
}

.c4-view-switch:hover:not(.d-checked) .d-icon,
.d-button.borderless:hover span,
.d-button.borderless:hover .d-icon,
.d-button.close:hover .d-icon {
    color: #808080;
}

.c4-language-selector-button {
    padding: 0.5em;
    background-color: rgba(180, 239, 245, 0.9);
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    display: flex;
}

.c4-language-selector-button:not(.d-checked) {
    background-color: rgba(245, 245, 245, 0);
}

.c4-language-selector-button ~ .c4-language-selector-button {
    margin-left: 2px;
}

.c4-view-tabs {
    display: block;
    border-bottom: 1px solid #ccc;
}

.c4-view-tabs-tab {
    display: inline-block;

    margin: 0 2px -1px 0;
    padding: 0 18px;
    line-height: 32px;
    background: #f1f1f1;
    text-align: center;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    border: solid 1px #ccc;
    border-bottom-style: none;
}

.c4-view-tabs div:first-child {
    margin-left: 1em;
}

.c4-view-tabs-selected {
    background-color: white;
    border-bottom-color: white;
}

.c4-waitpanel-message-header {
    font-weight: bold;
    padding-bottom: 0.5em;
}

.c4-dialog,
.c4-wizard {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    background-color: white;
    max-height: calc(100% - 4em);
    max-width: calc(100% - 4em);
}

.c4-widget-preview-popup > .c4-widget-preview {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    background-image: url('images/checkered_bg.png');
    background-repeat: repeat;
    max-height: calc(100% - 4em);
    max-width: calc(100% - 4em);
}

.d-ie-11 .c4-dialog.c4-popup {
    height: 100vh !important;
}

.c4-wizard > .c4-widget-preview,
.c4-wizard > .c4-widget-editor {
    overflow-x: hidden;
    overflow-y: auto;
}

.c4-workspace .dgrid-no-data {
    font-size: 1em;
    padding: 0;
}

.c4-workspace-trail-description {
    color: #a2a2a2;
}

.c4-workspace-trail-description:before {
    content: '(';
}

.c4-workspace-trail-description:after {
    content: ')';
}

.d-switch {
    outline-style: none;
}

.d-toaster-placement-default .d-toaster-inner {
    z-index: 2000;
    left: 25%;
    width: 50%;
}

.dgrid {
    border-style: none;
    height: 100%;
}

.dgrid-header {
    background-color: #f5f5f5;
    border-top: 1px #dddddd solid;
    border-bottom: 1px #dddddd solid;
}

.dgrid-header .dgrid-cell {
    border-style: none;
}

.dgrid-footer {
    background-color: white;
}

.dgrid-autoheight .dgrid {
    height: auto;
}

.dgrid-cell {
    vertical-align: middle;
    padding: 1em;
    border-left-style: none;
    border-right-style: none;
}

.dgrid-cell.field-Caption,
.dgrid-cell.field-ChrDtName,
.dgrid-cell.field-SmdRoot
 {
   width: 13%;
}
.previews .dgrid-content,
.thumbnails .dgrid-content,
.gallery .dgrid-content {
    height: auto;
}

.c4-workspace .dgrid-scroller,
.c4-filter .dgrid-scroller,
.previews .dgrid-scroller,
.thumbnails .dgrid-scroller,
.gallery .dgrid-scroller {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.c4-workspace .dgrid-header {
    border: 0px none;
}
.previews .dgrid-row > * {
    margin: 2px 1em;
}

.dgrid.previews .dgrid-row {
    border-bottom: 1px #dddddd solid;
}

.dgrid.previews .dgrid-row:first-of-type {
    border-top: 1px #dddddd solid;
}


.dgrid-no-data,
.dgrid-loading {
    color: #aaa;
    font-size: 2em;
    font-weight: 300;
    padding: 1em;
    text-align: center;
    width: 100%;
}

.dgrid-content:focus {
    outline-style: none;
}

.d-list-cell.c4-widget-preview {
    height: auto;
}

.icon {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.icon-componentlist-table {
    width: 32px;
    height: 32px;
}

.field-thumbnail {
    width: 48px;
    padding-left: 8px;
}

.field-delete-version {
    width: 48px;
}
.field-version {
    width: 4.5em;
}

.dgrid-content .field-version {
    text-align: right;
}

.field-SysCreated,
.field-SysModified {
    width: 9em;
}
.field-componenttype-icon {
    width: 32px;
    padding-left: 8px;
}

.field-checkout-status {
    width: 40px;
}

.field-image-limitations {
    width: 40px;
}

.field-file-download {
    width: 42px;
}

.thumbnails .dgrid-content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.gallery .dgrid-content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    -ms-flex-pack: justify;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

    -ms-flex-line-pack: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;

    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.gallery .dgrid-preload,
.thumbnails .dgrid-preload {
    width: 100%;
}

.gallery .dgrid-row {
    padding: 0.5em;
    margin: 0.75em;
    outline-style: none;
    border: 1px #d3d3d3 solid;
}

.thumbnails .dgrid-row {
    display: inline-block;
    padding: 0.5em;
    margin: 0.5em;
    outline-style: none;
    border: 1px #d3d3d3 solid;
}

.dgrid .dgrid-row:hover {
    background-color: #f5f5f5;
}

.dgrid-selected {
    background-color: #428bca !important;
    color: white;
}

.dgrid-selected:focus {
    outline: none;
}

.dgrid-selected .c4-field.clickable {
    color: #D9E2FF;
}

.dgrid-selected .c4-field.clickable:hover {
    color: white;
}

.dgrid-selected .missingValue {
    color: #CCCCCC;
}

.c4-control-textbox,  .c4-control-textarea {
    color: #555555;
}

.c4-control-relation .dgrid {
    border: rgb(204, 204, 204) 1px solid;
    border-radius: 4px;
}

.c4-control .dgrid-footer {
    border-top: rgb(204, 204, 204) 1px solid;
    align-items: center;
    display: flex;
    justify-content: space-between;
    flex-flow: row-reverse;
}

.c4-control .dgrid-footer-hidden {
    display: none;
}

.c4-control .dgrid-cell {
    border-style: none;
}


.c4-control-channel-ruleset td.dgrid-cell,
.c4-control-table-fields td.dgrid-cell,
.c4-control-table td.dgrid-cell {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.c4-control-channel-ruleset td.dgrid-cell:last-of-type,
.c4-control-table-fields td.dgrid-cell:last-of-type,
.c4-control-table td.dgrid-cell:last-of-type {
    border-right: none;
}

.c4-control-table .dgrid > .dgrid-header > .dgrid-row-table > tr > .dgrid-cell.dgrid-focus {
    background-color: #428bca !important;
    color: white;
}
.c4-control-table .dgrid > .dgrid-header > .dgrid-row-table > tr > .dgrid-cell > input {
    background-color: white;
    color: black;
    padding: 5px;
    width: 100%;
}

.c4-control .dgrid.table .dgrid-cell + .dgrid-cell {
    border-left: rgb(204, 204, 204) 1px solid;
}

.c4-control .dgrid.table .dgrid-row + .dgrid-row {
    border-top: rgb(204, 204, 204) 1px solid;
}

.c4-wizard-addsmd, .c4-wizard-virtualfeatures, .c4-wizard-import, .c4-wizard-relation-import, .c4-wizard-export-filter-result {
    padding: 1em;
}

.c4-wizard-virtualfeatures {
    min-width: 700px;
}

.c4-wizard-virtualfeatures .c4-control-virtual-features {
    height: 400px;
}

.c4-wizard-addsmd-search {
    width: 200px;
    margin-bottom: 0.5em;
}

.c4-wizard-addsmd-container {
    width: 460px;
    height: 400px;
    overflow-y: auto
}

.c4-wizard-file-upload .c4-control-file-upload {
    max-height: 600px;
}

.missingValue {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    color: #aaa;
    font-weight: 300;
}

.d-button span{
        vertical-align: middle;
}

.d-button span:not(.d-hidden) + span:not(:empty) {
    margin-left: 1em;
}

.d-button,
.c4-view-switch {
    font-family: roboto, "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
    font-size: 16px;
}

.d-button .d-icon,
.c4-view-switch .d-icon {
    color: #5B5B5B;
}

.d-ie-11 .c4-view-switch {
    overflow: visible;
}

.d-button.disabled,
.d-button.disabled .font-icon,
.d-button[disabled],
.d-button[disabled] .font-icon {
    color: #aaaaaa;
    pointer-events: none;
}

.d-checkbox::before {
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    font-size: 0.8em;
    text-align: center;
}

.d-checkbox.d-mixed .d-checkbox-icon::before {
    border-color: darkmagenta;
    border-width: 3px;
}

.d-combobox {
    font-size: inherit;
}

.d-combobox[disabled],
.d-combobox-input[disabled],
fieldset[disabled] .d-combobox-input {
    opacity: 1;
}

/* Allow loading incator to show even when state is disabled */
.d-combobox[disabled] :not(.c4-control-loading).d-combobox-arrow::after {
    content: ' ';
}

.d-combobox-input {
    width: 100%;
    padding-right: 12px;
}

.d-combobox-list {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
}

.d-toggle-button.d-checked {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: inherit;
}

.d-toggle-button:hover,
.d-toggle-button:focus {
    background-color: inherit;
    outline: none;
}

.d-date-picker {
    border-color: #cccccc;
    border-radius: 4px;
}

.d-date-picker .d-year,
.d-date-picker .d-month-select {
    color: #5b5b5b;
    font-weight: 500;
}

.d-date-picker .d-date-picker-button {
    color: #5b5b5b
}

.d-date-picker .d-month-select .d-chevron-down::after {
    content: ""
}

.d-date-picker .d-date-picker-selected,
.d-date-picker .d-date-picker-selected:hover {
    background-color: #428bca;
    border-radius: 4px;
}

.d-date-picker .d-date-picker-date:hover,
.d-date-picker .d-month-select:hover,
.d-date-picker .d-date-picker-button:hover {
    background-color: #ebebeb;
    border-radius: 4px;
}

.d-date-picker .d-month-select {
    padding-left: 0.5em;
    padding-right: 0.5em;
}
/* If a way to translate the buttons "today" and "clear" is found this can be removed */
.-d-datepicker-buttons {
    display: none;
}

.c4-control-list .d-list-item:only-child .d-list-cell {
    height: 31px;
}

.c4-control-list-list  .d-list-item:last-child .d-list-cell {
    border-bottom-style: none;
}


.d-switch {
    line-height: 28px;
}

.menu-popup {
    height: auto !important;
    background-color: white;
    overflow-y: auto;
    box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
}

.menu-popup-parent:after {
    content: '\f105';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    text-decoration:none;
}

.menu-popup .d-button.d-button.borderless:hover,
.menu-popup .d-button.borderless:hover span {
    background-color: #f6f6f6;
    color: rgba(0,0,0,.87) !important;
}

.menu-popup .d-button.d-button.borderless:active,
.menu-popup .d-button.borderless:active span {
    box-shadow: none;
    border-radius: 0%;
    background-color: rgb(179, 179, 179);
}

.c4-control-loading:after,
.c4-field-loading:after {
    content: "\f110";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    /* fa-spin animation from font awesome */
    animation: fa-spin 2s infinite linear;
    color: #555555;
    display: inline-block;
}

.c4-field-loading:after {
    position: absolute;
}
.c4-control-loading.c4-control-loading-list:after {
    position: absolute;
    right: 10px;
    top: 8px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Workspace expand spinner position */
.c4-loading-row {
    float: left;
    position: relative;
    left: 90%;
    top: -25px;
}

/**************************************
Draggable overrides
***************************************/
.draggable--is-dragging * {
    cursor: -webkit-grabbing;
}

.chrdef-draggable-ghost {
    color: white;
    border-radius: 10px;
    opacity: 0.7;
}

.draggable-mirror {
    z-index: 999;
    opacity: 0.7;
    border-radius: 10px;
    transition: background-color 0.5s, opacity 0.5s;
}
.draggable-invalid-dropzone {
    cursor: no-drop !important;
    opacity: 0.4;
    background-color: red !important;
    transition: background-color 0.5s;
}

/**************************************
 Vuetify style overrides 
 **************************************/
html {
    overflow-y: hidden !important;
    font-size: 14px !important;
}

.v-application {
    /* Override vuetify's "position: relative" introduced in 2.6.4 since it affected context menu position*/
    position: static;
}

.v-application.theme--light {
    /* Override background color of vuetify application. The background color clashes with whole UI */
    background: inherit !important;
}

.v-application.height100 .v-application--wrap {
    height: 100vh;
}

.v-application--wrap {
    flex: 1 1 auto;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    max-width: 100%;
    position: relative;
}

.v-input.table-editor {
    font-size: 14px;
}

.c4-control .v-input__control > .v-input__slot {
    padding: 0 12px;
    min-height: 40px;
}

.c4-control .v-input__control > .v-input__slot textarea {
    margin-top: 2px;
}

.c4-control .v-input__control > .v-text-field__details {
    margin-bottom: 8px;
}
.c4-control .v-text-field:not(.v-textarea) {
    margin-top: 0;
}

.modified-content {
    background-color: #efffe6;
}

.modified-content.invalid-content {
    background-color: #ffe6e6;
}

/* Override issue with disable[input=text] where we make input grey */
.v-select__selections > input[type="text"]:disabled {
    background-color: transparent;
}

.v-application .primary--text, 
.rtfeditor-is-focused:after {
    color: #1976d2 !important;
    caret-color: #1976d2 !important;
}

.v-application .v-input--is-readonly.primary--text,
.v-application .v-input--is-readonly.primary--text .primary--text {
    color: darkgray !important;
}

.d-combobox-input, .d-textbox-input {
    background-color: white;
}

.c4-language-selector > button > span.d-icon {
    display: inline-block !important;
}

.c4-multi-icon {
    position: relative;
    min-width: 32px;
}

.c4-multi-icon:after {
    font-weight: 900;
    background-color: white;
    border-radius: 50%;
    line-height: 15px;
    font-size: 20px;
    position: absolute;
    right: -5px;
    bottom: -4px;
    font-size: 20px;
}

.c4-multi-icon-plus:after {
    content:"\f055";
    color: #4CAF50;
}

.c4-multi-icon-minus:after {
    content:"\f056";
    color: #C31414;
}

.c4-control-textbox .d-textbox-input[type="number"] {
    width: inherit;
}

ds-c4-component-list .v-data-table__wrapper tr td {
    text-overflow: ellipsis;
    white-space: nowrap;
}

ds-c4-control-relation .c4-control-switch .-d-switch-transition {
    -webkit-transition: none;
    transition: none;
}

.v-application .c4-session-settings .info {
    background-color: inherit !important;
}

.c4-login .d-button-primary {
    color: white;
}

/*
 @Deprecated in 5.1.x workspace-add,workspace-remove, selection-add och selection-remove.  Will be removed in next "major release"
 Use c4-multi-icon and c4-multi-icon-plus or minus instead
*/

.workspace-add:after, .selection-add:after,
.workspace-remove:after, .selection-remove:after  {
    background-color: white;
    border-radius: 50%;
    line-height: 15px;
    font-size: 20px;
}


.workspace-add:after, .selection-add:after {
    content:"\f055";
    color: #4CAF50;
}

.workspace-remove:after, .selection-remove:after {
    content:"\f056";
    color: #C31414;
}

.menu-popup .workspace-remove,
.menu-popup .selection-remove,
.menu-popup .workspace-add,
.menu-popup .selection-add {
    position: relative;
}
.menu-popup .workspace-remove:after,
.menu-popup .selection-remove:after,
.menu-popup .workspace-add:after,
.menu-popup .selection-add:after   {
    position: absolute;
    right: -3px;
    bottom: -5px;
}

.c4-toolbar .workspace-remove,
.c4-toolbar .selection-remove,
.c4-toolbar .workspace-add,
.c4-toolbar .selection-add {
    position: relative;
}
.c4-toolbar .workspace-remove:after,
.c4-toolbar .selection-remove:after,
.c4-toolbar .workspace-add:after,
.c4-toolbar .selection-add:after {
    position: absolute;
    right: -5px;
    bottom: -5px;
}

.c4-view-switch[type="button"] {
    -webkit-appearance: none; 
}


/* c4-control-relation RelationPopup */
.c4-relation-popup {
    min-height: 80vh; 
    min-width: 80vw;
    height: 100%;
}

.c4-relation-popup .rsp {
    width: 100%;
}

.c4-relation-popup .rsp-search {
    padding: 1em 0 1em 0;
}

.c4-relation-popup .rsp-search .search-wrapper {
    padding: 1em;
    display: flex;
}
.c4-relation-popup .rsp-search .search-wrapper .c4-search {
    flex: 1;
}
.c4-relation-popup .rsp-search .search-wrapper .c4-button {
    padding: 10px;
    border: 1px solid #cccccc; 
    margin-left: 4px; 
    background-color: #eeeeee; 
}

.c4-relation-popup .rsp-search .ct-wrapper {
    padding: 0 1em 1em 0
}

.c4-relation-popup .rsp-search .list-wrapper {
    height: 100%; overflow-y: auto;
}

.c4-relation-popup .rsp-search .list-wrapper .list {
    display: block; 
    height: 100%;
    background-color: white;
}

.c4-relation-popup .rsp-selection {
    padding: 1em 0 1em 0;
}

.c4-relation-popup .rsp-selection .selection-wrapper {
    padding: 1em 1em 0 1em;
}

.c4-relation-popup .rsp-selection .selection-wrapper .button {
    padding: 10px; 
    border: 1px solid #cccccc; 
    margin-left: 4px; 
    background-color: #eeeeee; 
    width:300px
}

.c4-relation-popup .rsp-selection .selection-wrapper .info {
    padding-top: 15px; 
    padding-left: 5px;
    background-color: inherit !important;
}

.c4-relation-popup .rsp-selection .list-wrapper {
    height: 100%; 
    overflow-y: auto;
}

.c4-relation-popup .rsp-selection .list-wrapper .list {
    display: block; 
    height: 100%;
    background-color: white;
}

.c4-relation-popup .rsp-create {
    padding-bottom: 1em;
}

.c4-relation-popup .rsp-create .create-wrapper {
    padding-top: 10px; 
    border-top: 2px #dddddd solid; 
    min-width: 220px; 
    flex: 1
}

.c4-relation-popup .rsp-create .list-wrapper {
    height: 100%; 
    width: 100%; 
    overflow-y: auto; 
    flex: 2;
}

.c4-relation-popup .rsp-create .list-wrapper .list {
    display: block; 
    height: 100%;
    background-color: white;
}

.category-divider {
    color: #888;
    padding: 0 .3em;
}

/* Fix style */
.interact {
    position: absolute;
    cursor: col-resize;
    z-index: 7; /* Needs to be lower than popup and dialogs (600) */
}

.interact::after {
    content: "";
    position: absolute;
}

.interact.resize-r {
    right: 0;
    height: 100%;
    width: 2px;
}

.interact.resize-r:hover,.interact.resize-l:hover {
    background-color: #428bca;
    transition: background-color ease-in .2s;
    transition-delay: 0.05s;
}

.interact.resize-r::after {
    left: 0px;
    width: 10px;
    height: 100%;
    background-image: url('images/resize-r.svg');
    background-repeat: no-repeat;
    background-position: 5px 45%;
}

.interact.resize-l {
    left: 0;
    height: 100%;
    width: 2px;
}

.interact.resize-l::after {
    right: 0px;
    width: 18px;
    height: 100%;
    background-image: url('images/resize-l.svg');
    background-repeat: no-repeat;
    background-position: 12px 45%;
}

/**
* delite upgrade changes
* Matches .d-selectable .d-list-item.d-selected .d-list-cell, .d-multiselectable .d-list-item.d-selected .d-list-cell
* in deliteful/List List.css
**/
.d-selectable .d-list-item.d-selected .d-list-cell, .d-multiselectable .d-list-item.d-selected .d-list-cell {
    border-bottom: 1px solid #428bca;
    background-color: #428bca;
    color: #ffffff;
    font-weight: bold;   
}
/* ComponentShowVersion */
.c4-comparer-diff .delete {
    color: #760101;
    background-color: #FFD9D9;
    outline: 1px solid #d48888;
}

.c4-comparer-diff .insert {
    color: #044E04;
    background-color: #BCF0BC;
    outline: 1px solid #81cb81;
}

.c4-component-version-compare .field-expand {
    width: 32px;
}

.c4-component-version-compare tr {
    cursor: pointer;
}
.v-data-table .v-data-footer {
    min-height: 58px;
}
.wizard-relation-import {
    min-height: 350px; 
    min-width: 650px;
}

.wizard-relation-import .wrapper {
    flex-grow: 1;
    padding: 1em 1em 0 1em;
}

.wizard-relation-import .header {
    padding-bottom: 1em;
}

.wizard-relation-import .wrapper .content {
    padding-bottom: 1em;
}

.wizard-relation-import .wrapper .content .label {
    min-width: 140px;
}
.wizard-relation-import .wrapper .content .value {
    flex-grow: 1;
}

.c4-componentlist-toolbar-load-from-file .c4-action-button {
    display: inline-flex;
    width: 0;
}

.wizard-load-from-file {
    width: 100%;
    padding-bottom: 10px;
}

.wizard-load-from-file .wrapper {
    flex-grow: 1;
    padding: 1em 1em 0 1em;
}


.wizard-load-from-file .wrapper .content {
    padding-bottom: 1em;
    align-items: center;
}

.wizard-load-from-file .wrapper .content .key-selector:not(:first-child) {
    padding-left: 10px;
}

.wizard-load-from-file .wrapper .content .btn-key {
    padding: 0 0 0 10px;
}

.wizard-load-from-file .wrapper .content.center {
    align-items: center;
}

.wizard-load-from-file .wrapper .content .label {
    min-width: 140px;
}
.wizard-load-from-file .wrapper .content .value {
    flex-grow: 1;
}
.wizard-load-from-file .wrapper .content .input {
    width: 70px;
}

.wizard-load-from-file .wrapper .row-wrapper {
    align-items: center;
    padding-left: 10px;
}

.wizard-load-from-file .wrapper .row-wrapper .c4-field-label.label {
    padding-right: 10px;
    min-width: 0px;
}

/* Used to visualize which values will be loaded from an excel sheet */
.wizard-load-from-file .import-example-table {
    border-collapse: collapse;
    border-spacing: 0;
    cursor: pointer;
}

/* Fade out bottom and right side of the table to suggest that
 * we only see the first rows / columns
 */
.wizard-load-from-file .import-example-table:after {
    content  : "";
    position : absolute;
    z-index  : 1;
    bottom   : 0;
    left     : 0;
    pointer-events   : none;
    background-image : linear-gradient(to bottom, rgba(255,255,255, 0) 70%, rgba(255,255,255, 1) 90%),
      linear-gradient(to right, rgba(255,255,255, 0) 70%, rgba(255,255,255, 1) 90%);
    width    : 100%;
    height   : 100%;
}

.wizard-load-from-file .import-example-table td {
    width: 2em;
    height: 0.5em;
    border-top: 1px solid #555;
    border-right: 1px solid #555;
    border-left: 1px solid #555;
}

.wizard-load-from-file .import-example-table td.selected {
    background-color: #7592e7;
}

/* ***** Sync example **************** */
.c4-native-control-wrapper {
    padding: 1em;
}
.c4-native-control-wrapper .element-wrapper {
    padding-bottom: 1em;
}

select.c4-native-control {
    /* Vuetify override */
    -moz-appearance: menulist;
    -webkit-appearance: menulist;
    appearance: menulist;
    cursor: pointer;
}

.c4-native-control {
    border: 1px solid #CCCCCC;
    padding: 6px 12px;
}
.c4-native-control-label {
    padding-left: 0.5em;
    padding-bottom: 2px;
    margin-right: 1.5em;
}
/* ********************************** */

/* Compare multiple versions */
.dgrid.c4-component-version-compare {
    overflow-x: auto;
    height: auto;
	width: auto;
}

.dgrid.c4-component-version-compare .dgrid-header.dgrid-header-row.ui-widget-header {
	position: relative;
	margin-top: 0 !important;
	overflow-y: auto;
	max-height: 400px;
}

.dgrid.c4-component-version-compare > div.dgrid-scroller {
	position: relative;
	margin-top: 0 !important;
	overflow: auto;
	max-height: 500px;
}

.version-compare-container {
	width: 100%;
	max-width: 1000px
}

.c4-component-version  .c4-widget-preview {
	width: 750px;
}

.dgrid.c4-component-version-compare > div > table > tr > th {
    width: 200px;
	background: #f5f5f5;
    border-top: 1px #dddddd solid;
    border-bottom: 1px #dddddd solid;
}

.dgrid.c4-component-version-compare > div > div > div > table > tr > td:last-of-type {
    width: 50px;
}

.dgrid.c4-component-version-compare > div > table > tr > th:last-of-type {
    width: 50px;
}

.dgrid.c4-component-version-compare > div > div > div > table > tr > td {
    width: 200px;
}

.c4-component-version-compare .dgrid-scroller {
    overflow: visible;
}

.compare-data-table td:nth-child(1) {
	width: 200px;
}

.c4-component-version .c4-field {
	font-weight: bold;
}

.version-compare-container .c4-field {
	font-weight: bold;
}

/* ************************** */