/* Werte */
.hidden {
    /* display: none; */
}

.edit {
    display: inline-block;
}

.edit:not(.editing) {
    cursor: pointer;
}

/**
    Ticket: 33979
    span width of internal comment field behaves strange when there is content
    so we need to set it manually to 100%
*/
span.edit[id$="_ta"],
span.edit[id^="hidden_int_"][id$="a"] {
    width: 100%;
}

.edit.empty {
    font-style: italic;
    color: #7e7e7e;
}

a.edit:not(.editing):hover, span.edit:not(.editing):hover, div.edit:not(.editing):hover {
    background-color: #f2f2f2;
    border-radius: 4px;
}

/*!* in ER8 the selector is empty not only emptyField! */
.emptyField,
.empty {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    color: transparent !important;
}

@media screen and (max-width: 400px) {
    .emptyField,
    .empty {
        max-width: 60vw;
    }
}

.emptyField:hover {
    cursor: default;
}

a.edit:hover .emptyField,
span.edit:hover .emptyField,
span.edit.emptyField:hover,
div.edit:hover .emptyField,
a.editable:hover .emptyField,
span.editable:hover .emptyField,
span.editable.emptyField:hover,
div.editable:hover .emptyField,
.rexx-wheel.is-any-mobile-device .edit.emptyField,
.rexx-wheel.is-any-mobile-device .editable.emptyField,
.rexx-wheel.is-any-mobile-device .edit .emptyField,
.rexx-wheel.is-any-mobile-device .editable .emptyField,
.rexx-wheel.is-any-mobile-device .edit.empty,
.rexx-wheel.is-any-mobile-device .editable.empty,
.rexx-wheel.is-any-mobile-device .edit .empty,
.rexx-wheel.is-any-mobile-device .editable .empty,
    /*!* in ER8 the selector is empty not only emptyField! */
a.edit:hover .empty,
span.edit:hover .empty,
div.edit:hover .empty,
a.editable:hover .empty,
span.editable:hover .empty,
div.editable:hover .empty {
    background-color: #f2f2f2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #f2f2f2 !important;
    cursor: pointer;
}

.contentFrameContent input.error,
.contentFrameContent textarea.error,
.contentFrameContent button.ui-multiselect.error {
    border: 1px solid #c00;
    background-color: #fee;
}

.edit .btn.save {
    line-height: 18px;
    padding: 0 12px;
    vertical-align: top;
    z-index: 9999;
}

/*.edit:focus, .editable:focus,
.language_headline:focus {
    border: 1px dotted black;
    background-color: #f2f2f2 !important;
}*/

.contentFrameTable .editing > form button.btn.save {
    margin-left: 5px;
}

.contentFrameTable .editing > form button.ui-multiselect .button_label {
    white-space: nowrap !important;
}

tr.contentFrameRowEditing > td.contentFrameContent .contentFrameRowEditButtons {
    margin: 0;
    padding: 0;
    list-style: none;
    clear: both;
    width: 100%;
    display: inline-block;
}

tr.contentFrameRowEditing > td.contentFrameContent .contentFrameRowEditButtons > li {
    padding: 5px 5px 0 0;
    float: left;
}

tr.contentFrameRowEditing > td.contentFrameContent .contentFrameRowEditButtons > li > .btn {
    font-size: 0.75rem;
    padding: 3px 12px;
    margin-bottom: 0;
}

tr.contentFrameRowEditing > td.contentFrameContent {
    position: relative;
}

tr.contentFrameRowEditing > td.contentFrameContent .waiterOverlayInline {
    padding: 17px 5px 0 5px !important;
}

.contentFrameArea {
    margin-bottom: 20px;
    background-color: #fff;
    border: 0 none;
    border-radius: 4px;
    box-shadow: none;
}

.contentFrameArea.parallel_step {
    margin-top: -15px;
}


.contentFrameArea.not_chosen_step {
    opacity: .6;
}

.rexx-wheel:not(.is-a-smartphone) .contentFrameWrapper {
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.rexx-wheel.is-a-smartphone.contentFrameArea {
    border-radius: 0;
}

.portlet .contentFrameArea {
    border: 1px solid #ddd;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.rexx-wheel.is-a-smartphone .portlet .contentFrameArea {
    border: none;
    box-shadow: none;
}

body.is-a-smartphone.rexx-wheel .contentFrameArea {
    margin-bottom: 5px;
}

body.is-a-smartphone.rexx-wheel > div.container-fluid > div {
    margin-bottom: 0;
}

.rexx-wheel:not(.is-a-smartphone) .portlet .contentFrameArea {
    border-radius: 4px;
    border: none;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.rexx-wheel .box-default .contentFrameArea {
    /* don't add borders/shadow again if already in box */
    border: none;
    box-shadow: none;
}

.rexx-wheel .portlet .contentFrameArea .grid_container {
    margin: -8px !important; /* overwrite js set stuff to fix double overlapping */
    border-bottom: none;
    box-shadow: none;
}

.rexx-wheel .card-body .contentFrameArea {
    box-shadow: none;
}

.contentFrameArea:first-child {
}

.contentFrameButtons {
    position: absolute;
    padding: 10px 0 0 8px;
    display: none;
}

.contentFrameButtons * {
    margin-right: 5px;
    cursor: pointer;
}

.contentFrameButtons *:last-child {
    margin-right: 0;
}

.contentFrameHeading, .contentFrameHeadingNoHover {
    padding: 10px 15px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 14px;
    position: relative;
}

.rexx-wheel.is-a-smartphone .contentFrameHeading, .rexx-wheel.is-a-smartphone .contentFrameHeadingNoHover {
    padding: 15px 15px;
}

.rexx-wheel.is-a-smartphone .contentFrameHeading, .contentFrameHeadingNoHover {
    border-radius: 0;
}

.rexx-wheel .contentFrameHeading, .rexx-wheel .contentFrameHeadingNoHover {
    border: none;
    background-color: inherit;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #7c7c7c;
}

.mobile.rexx-wheel .contentFrameHeading, .mobile.rexx-wheel .contentFrameHeadingNoHover {
    color: #989898;
}

.contentFrameToolbar .fas {
    cursor: pointer;
}

.contentFrameToolbar {
    position: absolute;
    right: 1em;
}

.contentFrameTable {
    max-width: 100%;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0 none;
}

#time_overview_widget,
#cat_app_additional_fields_workflow_details,
.tf_area_steps .contentFrameTable {
    table-layout: fixed;
}

.rexx-wheel.is-a-smartphone .fp_portlet.contentFrameArea {
    margin-bottom: 5px !important;
}

.rexx-wheel.is-a-smartphone .column {
    height: auto !important;
    min-height: auto !important;
}

.contentFrameContent {
    line-height: 1.5;
    padding: 0.5rem;
    vertical-align: top;
    word-break: break-word;
}

.contentFrameTable > tbody > tr > th {
    font-weight: inherit;
}

.contentFrameTable > tbody > tr.only_display_field > td,
.contentFrameTable > tbody > tr.only_display_field > th {
    padding: 0.1rem 0.5rem;
}

.contentFrameTable td div[class*="cf_"] > div:not(.rating_box):not(.fixed_toolbar):not(.more_languages):not(.edit):not(.upload):not(.language_headline),
.contentFrameTable td[class*="cf_"] > div:not(.rating_box):not(.fixed_toolbar):not(.more_languages):not(.edit):not(.upload):not(.language_headline) {
    line-height: 1.5;
    /* from HR, purpose unknown, incompatible
        padding: 0.5rem 0;
    */
    vertical-align: top;
}

.contentFrameTable td div[class*="cf_"] > div:first-child,
.contentFrameTable td[class*="cf_"] > div:first-child {
    padding-top: 0;
}

.contentFrameTable td div[class*="cf_"] > div:last-child:not(.sp-replacer),
.contentFrameTable td[class*="cf_"] > div:last-child:not(.sp-replacer) {
    padding-bottom: 0;
}

.cf_FieldGroupSubRow:not(.cf_FieldGroupSubRowFirst) > th, .cf_FieldGroupSubRow:not(.cf_FieldGroupSubRowFirst) > td {
    padding-top: 0;
}

.cf_FieldGroupSubRow:not(.cf_FieldGroupSubRowLast) > th, .cf_FieldGroupSubRow:not(.cf_FieldGroupSubRowLast) > td {
    padding-bottom: 0;
}

.bold {
    font-weight: bold;
}

.contentFrameTable .headline {
    width: 190px;
    text-align: right;
    cursor: default;
    word-wrap: break-word;
    color: #7c7c7c;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contentFrameTable .nowrap .headline {
    white-space: nowrap;
}

.contentFrameTable .headline.duty > div {
    display: inline;
}

.contentFrameTable .headline .expl {
    clear: left;
    font-size: 11px;
    white-space: normal;
    line-height: 12px;
    color: #666;
}

.contentFrameHeading h2.headline_text,
.contentFrameHeadingNoHover h2.headline_text {
    font-size: 14px;
    margin: 0;
    display: inline-block;
    color: rgb(124, 124, 124);
}

h2.contentFrameHeading.headline_text {
    margin: 0;
}

.contentFrameContent h2 {
    font-size: 1em;
    margin: 0;
    line-height: inherit;
    font-weight: 400;
}

.contentFrameTable .spacer {
    width: 5px;
}

.contentFrameTable .symbol_col {
    width: 70px;
}

.contentFrameTable .symbol_col img {
    display: inline-block;
    margin-right: 5px;
    margin-top: 8px;
}

.contentFrameTable .symbol_col img[onclick] {
    cursor: pointer;
}

.contentFrameRow {
}

.contentFrameRow_ovelay {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    background: rgba(0, 0, 0, .1);
}

.contentFrameRow.no-height > th.headline,
.contentFrameRow.no-height > td.contentFrameContent {
    padding: 0;
    line-height: 0;
    height: 0;
}

.contentFrameRow.less-space > th.headline,
.contentFrameRow.less-space > td.contentFrameContent {
    padding-top: .1rem;
    padding-bottom: .1rem;
}

.contentFrameRow.less-space-top > th.headline,
.contentFrameRow.less-space-top > td.contentFrameContent {
    padding-top: .1rem;
}

.contentFrameRow.less-space-bottom > th.headline,
.contentFrameRow.less-space-bottom > td.contentFrameContent {
    padding-bottom: .1rem;
}

.contentFrameRowSpacer {
    min-height: 10px;
    height: 16px;
}

.further_link,
.copy_link,
#further_link,
#copy_link {
    visibility: hidden;
}

.contentFrameRow:hover .further_link,
.further_link.always_visible,
.contentFrameRow:hover #further_link,
.contentFrameRow:hover .copy_link,
.contentFrameRow:hover #copy_link,
.copy_link.always_visible {
    visibility: visible;
}

.contentFrameContent {
    word-wrap: break-word;
}

.contentFrameContent:after {
    clear: both;
}

.contentFrameTable > tbody > .contentFrameRow > .contentFrameContent.detail {
    padding: 0 0.5rem 0.5rem 15px;
}

/* Formelemente */
.contentFrameContent form {
    margin: 0;
    padding: 0;
    background-color: white;
}

/* Link for truncated text in field groups  */
.contentFrameContent .more_link {
    background: white;
    color: #4c5bba;
}

.contentFrameContent .truncated_group_line {
    white-space: nowrap;
}

.contentFrameContent > div > .disabled,
.contentFrameContent > div > .disabled > .emptyField {
    color: #555;
    cursor: not-allowed;
}

body.portal_probably_mobile:not(.rexx-wheel) .portalContentFrame .edit,
body.portal_probably_mobile:not(.rexx-wheel) .portalContentFrame .editable {
    border-bottom: 1px dashed black;
}

@media screen and (max-width: 500px) {
    body.portal_probably_mobile .portalContentFrame .contentFrameTable,
    body.portal_probably_mobile .portalContentFrame .contentFrameTable > tbody {
        display: block;
    }

    .portal_probably_mobile.rexx-wheel .portalContentFrame .contentFrameTable,
    .portal_probably_mobile.rexx-wheel .portalContentFrame .contentFrameTable > tbody {
        padding: 0.5rem;
    }

    body.portal_probably_mobile .portalContentFrame .contentFrameTable .contentFrameRow:not(.hidden) {
        display: block;
        margin-bottom: 10px;
    }

    body.portal_probably_mobile .portalContentFrame .contentFrameTable .headline,
    body.portal_probably_mobile .portalContentFrame .contentFrameTable .contentFrameContent {
        display: block;
        margin: 0;
        padding: 0;
    }

    body.portal_probably_mobile .portalContentFrame .contentFrameTable .top_line,
    body.portal_probably_mobile .portalContentFrame .contentFrameTable .bottom_line,
    body.portal_probably_mobile .portalContentFrame .contentFrameTable .left,
    body.portal_probably_mobile .portalContentFrame .contentFrameTable .right,
    body.portal_probably_mobile .portalContentFrame .contentFrameTable .spacer {
        display: none;
    }

    body.portal_probably_mobile .portalContentFrame .contentFrameTable .cf_FieldGroup .cf_FieldGroup_h {
        margin-right: 0;
        border: none;
        background: none;
        padding: 0;
    }

    body.portal_probably_mobile .portalContentFrame .contentFrameTable .contentFrameRow .headline {
        text-align: left;
        background: none !important;
        font-size: 1.25em;
    }

    .rexx-wheel.is-a-smartphone .portalContentFrame .contentFrameTable .contentFrameRow .headline {
        font-family: RexxSystems, Arial, Helvetica, Verdana, sans-serif;
        font-size: 16px;
        font-weight: bold;
    }

    body.portal_probably_mobile .portalContentFrame .contentFrameHeadingNoHover,
    body.portal_probably_mobile .portalContentFrame .contentFrameHeading {
        background: none !important;
        border: none !important;
        position: relative;
        margin: 0 0 0.5ex;
    }

    body.portal_probably_mobile:not(.rexx-wheel) .portalContentFrame .contentFrameHeadingNoHover,
    body.portal_probably_mobile:not(.rexx-wheel) .portalContentFrame .contentFrameHeading {
        padding: 0;
    }

    body.portal_probably_mobile .portalContentFrame .contentFrameHeadingNoHover .fs,
    body.portal_probably_mobile .portalContentFrame .contentFrameHeading .fs {
        font-size: 1.5em;
        padding: 0;
        margin: 0;
    }

    body.portal_probably_mobile .portalContentFrame .round_frame {
        border: none;
        background: none;
        padding: 0;
    }

    .contentFrameToolbar {
        position: static;
        margin-left: 10px;
    }

    .rexx-wheel.is-a-smartphone .contentFrameToolbar {
        position: absolute;
    }
}

.panel-body .contentFrameArea {
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
}

.panel-body .grid_container,
.panel-body .panel_container {
    border-radius: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin: 0 -15px;
    border: 0 none;
}

.panel-body .grid_container:first-child,
.panel-body .panel_container:first-child {
    margin-top: -15px;
}

.panel-body .grid_container:last-child,
.panel-body .panel_container:last-child {
    margin-bottom: -15px;
}

td#attachment-link, td#attachment-deletion {
    padding-top: 0;
}

.attachment-preview-tooltip-delete-wrap .previewable_attachment_delete_button {
    margin: 0;
    padding: 3px;
    background: transparent;
    border: none;
    color: black;
    cursor: pointer;
    font-size: 1.1rem;
}

.attachment-preview-tooltip-delete-wrap .previewable_attachment_delete_button .fas {
    color: inherit;
}

.attachment-preview-tooltip-title-container {
    display: flex;
}

.previewable_attachment_delete_container .previewable_attachment_delete_button .fas {
    color: #878787;
    font-size: 0.8rem;
}

.attachment-preview-tooltip-title {
    flex-grow: 1;
    padding-top: 3px;
}

.attachment-previewable .popover-content {
    padding: 2px;
    cursor: default;
}

/*
    This checks if the ui-multiselect is the only thing with their hidden select field in their parent
    and we can apply the 100 width percent rule here for override the in jquery added individual width

    .contentFrameArea select:nth-last-child(2)
    selects every pre-last child in a parent in a contentFrame
    / so its counting somehow the child's /

    :not(.group-field select)
    prevent to apply this rule to group fields as they only have one form element

    + button.ui-multiselect
    select and check if the element next to this select is a multiselect

    &:nth-child(2)
    keep the thing tight together, with just indexing it,
    / the count will not match if you change something between, before or after /
*/
.contentFrameArea select:nth-last-child(2):not(.group-field select):not(.input-autowidth) + button.ui-multiselect:nth-child(2),
.contentFrameArea input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='reset']):not([type='button']):not([type='file']):not([type='date']):not(.input-autowidth),
.contentFrameArea textarea {
    /* TODO: remove width on individual elements to remove !important */
    /* Endless as we either want "static" css sizes or want plugins to calc it with text len */
    width: 100% !important;
    max-width: 320px;
    min-width: 50px;
}

.contentFrameArea #indicator + select:not(.group-field select) + button.ui-multiselect,
.contentFrameArea #indicator + select:not(.group-field select) + button.ui-multiselect ~ * {
    display: none;
}

.contentFrameArea #colorPicker {
    width: auto !important;
}

.contentFrameArea .edit input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='reset']):not([type='button']):not([type='file']):not(.form-autocomplete):not(.input-autowidth):not(.brevent),
.contentFrameArea .edit textarea {
    /* TODO: remove width on individual elements to remove !important */
    /* full width minus save button (55px), not for form-autocomplete, because button is outside */
    width: -moz-calc(100% - 55px) !important;
    width: -webkit-calc(100% - 55px) !important;
    width: calc(100% - 55px) !important;
    max-width: 320px;
}

.contentFrameArea .edit select + button.ui-multiselect {
    max-width: 320px;
}

.contentFrameArea div.autocomplete_list {
    /* div around autocomplete lists needs it because of float */
    width: -moz-calc(100% - 55px);
    width: -webkit-calc(100% - 55px);
    width: calc(100% - 55px);
    max-width: 320px;
}

.contentFrameArea .historic_field {
    /* group fields */
    max-width: 320px;
}

.contentFrameArea .historic_field .historic_field_input {
    float: left;
    width: calc(100% - 140px);
}

.contentFrameArea .historic_field .historic_field_dates {
    float: right;
    text-align: right;
}

.contentFrameArea .historic_field .historic_field_dates .historic_field_dates_from {
    margin-bottom: 2px;
}

.contentFrameArea .historic_field input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='reset']):not([type='button']):not([type='file']),
.contentFrameArea .historic_field textarea,
.contentFrameArea .historic_field select + button.ui-multiselect {
    /* group fields */
    width: 100% !important;
    max-width: 100% !important;
}

/* group fields */
.contentFrameArea .field-group {
    width: 100%;
    max-width: 320px;
}

.contentFrameArea .field-group:after {
    clear: both;
}

.contentFrameArea .edit .field-group {
    width: -moz-calc(100% - 55px) !important;
    width: -webkit-calc(100% - 55px) !important;
    width: calc(100% - 55px) !important;
}

.contentFrameArea .field-group .group-field {
    min-width: 50px;
    float: left;
}

.contentFrameArea .field-group .group-field input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='reset']):not([type='button']):not([type='file']),
.contentFrameArea .field-group .group-field select + button.ui-multiselect,
.contentFrameArea .field-group .group-field textarea,
.contentFrameArea .field-group .group-field button.ui-multiselect,
.contentFrameArea .edit .field-group .group-field input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='reset']):not([type='button']):not([type='file']),
.contentFrameArea .edit .field-group .group-field select + button.ui-multiselect,
.contentFrameArea .edit .field-group .group-field textarea {
    width: 100% !important
}

/* special width classes, give your input this class and enjoy! */

/* select boxes */
.contentFrameArea select.auto-select,
.contentFrameArea select.auto-select + button.ui-multiselect {
    width: auto !important;
}

/* date fields (extra not's are required to be a more distinctive css rule) */
.contentFrameArea input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='reset']):not([type='button']):not([type='file']).datepicker {
    max-width: 90px !important;
}

.contentFrameTable td div[class*="cf_"] > div.fixedTeaserImg {
    position: absolute;
    top: 52px;
    z-index: 900;
    width: 145px;
    text-align: right;
    height: 145px;
    padding: 0;
    margin: 0;
    left: 42px;
    overflow: hidden;
}

.contentFrameTable td div[class*="cf_"] > div.fixedTeaserLayer {
    background-color: white;
    position: absolute;
    top: 30px;
    z-index: 899;
    width: 180px;
    height: 170px;
    padding: 0;
    margin: 0;
    left: 10px;
}

.contentFrameTable td div[class*="cf_"] > div.rating_box {
    padding: 0;
    line-height: 1em;
}

.photo-upload-group {
    background: #000;
    opacity: .7;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.photo {
    overflow: hidden;
}

.photo .photo-upload-group {
    display: block;
    transition: left .2s ease;
    left: -150%;
}

div:not(.photo):hover > .photo-upload-group {
    display: block;
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

div.photo:hover > .photo-upload-group {
    left: 0;
}

.photo-upload-group a, .photo-upload-group i {
    color: #fff;
}

.deletePhotoBtn {
    position: absolute;
    right: 4px;
    top: 1px;
}

.expandPhotoBtn {
    position: absolute;
    right: 50px;
    top: 1px;
    font-size: .94em;
}

.uploadPhotoBtn {
    left: 50%;
    margin-left: -24px;
    margin-top: -24px;
    position: absolute;
    top: 50%;
}

.cfContextMenu {
    display: inline-block;
    margin-right: 5px;
}

.rexx-wheel .cfContextMenu {
    text-transform: none;
}

.cfContextMenu .rexx-dropdown-toggle {
    cursor: pointer;
}

.cfContextMenu .rexx-dropdown-toggle:hover {
    color: black;
}

.cfContextMenu > .dropdown-menu {
    z-index: 2000;
}

.dropdown-submenu-item[aria-hidden=true] {
    display: none;
}

.dropdown-submenu-toggle[aria-expanded=false]::after {
    content: '\f103';
}

.dropdown-submenu-toggle[aria-expanded=true]::after {
    content: '\f102';
}

.dropdown-submenu-toggle::after {
    font-family: 'Font Awesome 6 Pro';
    margin-left: 5px;
}

.rexx-wheel .cfTitleIcon {
    color: #606671;
}

.rexx-wheel .cfTitleIcon:hover {
    color: #bec2c9;
}

@media only screen and (max-width: 479px) {
    /* Collapse rows on small screens */
    tr.contentFrameRow td.headline {
        display: block;
        text-align: left;
        padding-bottom: 0;
    }

    tr.contentFrameRow td.contentFrameContent {
        display: block;
        /* padding-top: 0; */
    }

    tr.contentFrameRow td.contentFrameContent div[class*="cf_"] > div.fixedTeaserImg {
        position: relative; /* default value */
        top: 0;
        text-align: left;
        left: 0;
    }
}

span.maxLength {
    width: 100%;
}

.cf_icon_google {
    background: url("../icon/images/google.png") 0 0;
    background-size: cover;
    display: inline-block;
    height: 14px;
    vertical-align: middle;
    width: 14px;
    margin: 0 10px 2px 0;
}

.contentFrameTable .workflowhelp-icon {
    font-size: 22px;
    position: absolute;
    top: 9px;
    left: 10px;
    right: auto;
    color: #0065bd;
}

@media screen and (max-width: 479px) {
    .contentFrameTable .workflowhelp-icon {
        left: auto;
        right: 10px;
    }
}

.contentFrameContent_ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style-position: inside;
}

.contentFrameContent.dataNonExistent {
    color: grey;
}

.rexx-wheel.is-a-smartphone .contentFrameContent.dataNonExistent {
    text-align: center;
    width: 100vw;
}

.rexx-wheel.is-a-smartphone .headline.dataNonExistent {
    display: none !important;
}

#groupDefaultIcon {
    background-image: url('/inc/common/assets/img/rexx-logo.svg');
    height: 145px;
    width: 145px;
    background-size: cover;
    margin: auto;
}

/**
 * Help toggle
 */
.contentFrameHelpText {
    overflow: hidden;
    clear: both;
}

.contentFrameHelpText.extendable {
    cursor: pointer;
}

.fp_portlet_content > .contentFrameHelpText {
    border-bottom: 1px solid #e0e0e0;
}

.contentFrameHelpText > .helpText {
    float: left;
    /*
    white-space: nowrap;
    */
    text-overflow: ellipsis;
    overflow: hidden;
    font-family: Roboto, serif !important;
    font-size: 0.86rem;
    width: calc(100% - 50px);
    min-height: 42px;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
}

.contentFrameHelpText > .helpText.extended {
    display: inline;
    word-break: break-word;
    white-space: pre-line;
    overflow: visible;
}

.fp_portlet_content > .contentFrameHelpText .helpText {
    margin: 10px 15px;
    -webkit-line-clamp: 1; /* number of lines to show */
    min-height: 21px;
}

.contentFrameHelpText > .icon {
    color: #606671;
    float: right;
    position: relative;
    right: 13px;
    top: 2px;
    display: none;
}

.contentFrameHelpText.extendable > .icon {
    display: inline-block;
}

.contentFrameHelpText:hover > .icon {
    color: black;
    font-weight: bold;
}

.fp_portlet_content > .contentFrameHelpText > .icon {
    right: 21px;
    top: 12px;
}


#cf_POSITION a {
    display: inline-block;
}

.widgetReloader {
    position: absolute;
    left: 1em;
    cursor: pointer;
}

.contentFrameContent div button.translate, button.cancel_translate {
    line-height: 18px;
    padding: 0 12px;
    vertical-align: top;
    margin: 0 5px;
}

.translation-loader {
    width: 400px;
    position: absolute;
    /*top: 75px;*/
    left: 130px;
    height: 150px;
}

.translation-loader-full {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.contentFrameTable .in-translate {
    width: 70%;
    display: inline-block;
    max-width: 320px;
}

#cat_masterdata_div .contentFrameTable .in-translate, #cat_detectgroup_div .contentFrameTable .in-translate {
    width: 25%;
}

#cat_masterdata_div .contentFrameTable .in-translate.width-lg {
    width: 70%;
}

#cat_event_data_div .contentFrameTable .in-translate.width-sm {
    width: 25%;
}

#cat_MASTERDATA_div .contentFrameTable .in-translate.width-md, #vacancy_create_form .contentFrameTable .in-translate.width-md {
    width: 50%;
    max-width: 320px;
}

.contentFrameTable .in-translate .save {
    float: right;
}

.portlet #cat_basic .language-row-inline-flex td div {
    display: inline-flex;
}

.portlet #cat_basic .language-row-inline-flex td div .in-translate {
    width: 210px !important;
}

@media (max-width: 540px) {
    .contentFrameArea select:nth-last-child(2):not(.group-field select) + button.ui-multiselect:nth-child(2) {
        max-width: calc(100% - 17px);
    }
}