/**
 * File Name: Layout_OrgChart.css
 * Original creator: Joey El Rassi
 * Date Created: 10/09/2024
 * Code Revision: 0
 * Last Change: -- no need to specify this if it is the creator
 * Reference: 
 */

/**
    File containing orgchart styles
*/

/* Mazzola 19/1/2015: non mostra bordo attorno alla orgchart quando ci clicco dentro */
.NoOutline {
    outline: none;
}

.hidden {
    visibility: hidden;
}

.orgdiagram .ps__rail-x,
.orgdiagram .ps__rail-y {
    opacity: 0.6;
}
/* Styles for Sections in OrgChart */
div.orgChartPreviewContent td.Label {
    min-width: 200px;
    height: 33px;
}

div.orgChartPreviewContent td.Label > span.Label {
    font-weight: normal !important;
}

@media (max-width: 991px) {
    .orgChartOptionsButtons.orgChartNavigationToggle {
        display: none;
    }
    div.fileOptionsPopup.orgItemPopup {
        right: -4px;
    }
}

.orgChartWait {
    display: inline-flex;
    overflow: visible !important;
}

.orgChartContainer > *:not(.orgChartDrawerContainer) {
    user-select: none;
}

.orgChartPositionContainer svg, .orgChartPositionContainer path, .orgChartPositionContainer :focus-visible {
    outline: none;
}

.orgChartContainer {
    position: relative;
    display: inline-flex;
    flex-direction: row-reverse;
    width: 100%;
    height: 100%;
}

div.bp-item {
    overflow: visible;
}
/*-------------------------------------------------------- Orgchart item sort styles --------------------------------------------------------*/
div.OrgChartItem:not(.ui-sortable-helper, .noTransition) {
    transition: opacity ease-in 200ms, top 200ms, left 200ms;
}

div.OrgChartItem.OrgItemSort {
    transform: rotate(4deg);
}

div.OrgChartItem.OrgItemSort .orgChartItemWrapper {
    cursor: grabbing;
}

.OrgItemSortPlaceholder {
    color: black;
    font-size: 36px;
    position: absolute;
    display: none;
    z-index: 1;
    pointer-events: none;
}
.beingDragged {
    display: none;
}
.hoverOver {
    transition: transform 0.3s ease !important;
}
    .hoverOver.tilt-left {
        transform: perspective(1000px) rotateY(-9deg);
    }
    .hoverOver.tilt-right {
        transform: perspective(1000px) rotateY(9deg);
    }
    .hoverOver.tilt-bottom {
        transform: perspective(1000px) rotateX(-9deg);
    }
/*-------------------------------------------------------- Orgchart item sort styles end --------------------------------------------------------*/
.OrgChartItem .orgChartItemWrapper {
    cursor: pointer;
    overflow: hidden;
    height: 100%;
    border-radius: 6px;
    width: 100%;
    /*    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;*/
    position: relative;
}

.orgChartItemWrapper > table {
    table-layout: fixed;
    width: 100%;
}

.OrgChartItem.connectorAnnotationHighlight .orgChartItemWrapper {
    outline: 2px solid !important;
}

.OrgChartItem.list .orgChartItemWrapper {
    padding: 0 4px;
    overflow: visible;
}

.OrgChartItem.list:not(.box-list) {
    display: flex;
    align-items: center;
}

.OrgChartItem.SelectedBox:not(.list) {
    border: 2px solid #fbd850 !important;
    padding: 2px !important;
    border-radius: 4px;
}

.OrgChartItem.SelectedBox.list .orgChartItemWrapper > table {
    border: 2px solid #fbd850 !important;
}

.OrgChartItem.box-list {
    height: 0px !important;
}

.OrgChartItem:hover .orgChartItemWrapper {
    animation: shadowOffOn 0.4s linear 1;
}

.box-list > .orgChartItemWrapper > table {
    background-color: #eeeeee;
    position: relative;
    left: calc(-50% - 10px);
    border-radius: 6px;
}

.box-list > .orgChartItemWrapper.bc-transparent > table {
    background-color: transparent;
}

.OrgChartItem .orgChartItemWrapper.boxListWrapper > table {
    border-top-width: 0px !important;
    border-bottom-width: 0px !important;
    border-radius: 0px !important;
}

.OrgChartItem .orgChartItemWrapper.boxListTopWrapper > table {
    border-bottom-width: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.OrgChartItem .orgChartItemWrapper.boxListBottomWrapper > table {
    border-top-width: 0px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.OrgChartItem.box-list .itemFieldWrapper {
    padding: 0 4px;
}

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

.orgChartLogoContainer.left {
    text-align: left;
}

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

.OrgchartLegendPreviewContainer {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 10px;
    height: 100%;
}

.OrgchartLegendPreview {
    width: 32px;
    height: 20px;
    margin-right: 4px;
}

.OrgChartLegend > .footerIconsLeft {
    flex-direction: column;
}
/*
.LayerForegroundAnnotations > svg {
    display: none;
}
*/
/*.LayerForegroundAnnotations > div.bp-item.bp-connector-label {
    z-index: 1;
}*/
.LayerControls {
    z-index: 1;
}
.OrgChartItem {
    z-index: 1;
}
.LayerForegroundConnectorAnnotation > svg {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.LayerForegroundConnectorAnnotation > div {
    z-index: 2;
}

div.bp-item .itemField > span {
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
    padding: 0 4px;
    font-family: Arial, sans-serif;
}

/*popup and subpopup option*/
.orgItemPopup .childrenPlacementOption {
    display: flex;
    border-radius: 50%;
    background-color: #ddd;
    width: 36px;
    height: 36px;
    margin: 6px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

    .orgItemPopup .childrenPlacementOption > img {
        height: 30px;
        border-radius: 50%;
    }


.childrenPlacementOption.adviserPlacementOption {
    border: 4px solid #ddd;
    background-color: white;
    transition: border-width 200ms ease;
}
.orgItemPopup .childrenPlacementOption.adviserPlacementOption:hover {
    border-width: 2px;
}

.childrenPlacementOption.selected {
    border: 1px solid;
}

.orgChartTitleContainer, .orgChartLogoContainer {
    position: absolute;
    width: 100%;
}

.orgChartTitle {
    text-align: center;
    font-size: 20px;
    overflow: hidden;
    word-break: break-word;
    display: inline-block;
}

    .orgChartTitle:empty {
        display: none;
    }

.msgContainer {
    display: flex;
    text-align: left;
    padding: 4px;
    border-radius: 6px;
    z-index: 2;
    width: 130px;
    cursor: context-menu;
    border: 2px solid;
    animation: showHideBorder 1.75s linear infinite;
    margin: 0 2px;
}

    .msgContainer.load:not(.hidden) .bi-hourglass-top::before {
        animation: fa-spin 1.25s infinite linear;
    }

.orgChartMSG {
    display: flex;
    flex-direction: column;
}

.orgChartMSGIcon {
    display: flex;
    align-items: flex-end;
    padding: 4px;
}

.amimatedEllipsis:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis steps(4,end) 1500ms infinite;
    animation: ellipsis steps(4,end) 1500ms infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
    width: 0px;
}

.logoAnnotation {
    height: 60px;
}

/*------------------------------------------------------name template style start ------------------------------------------------------*/


/*joeyelrassi 15062021 in case of custom field there is no title -> to center it*/
.customField article {
    top: 6px;
    position: relative;
}

/*------------------------------------------------------name template style end ------------------------------------------------------*/

/*------------------------------------------------------items with children------------------------------------------------------*/
.orgChartItemFooterContainer {
    display: flex;
    height: 16px;
    justify-content: flex-end;
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 100%;
}

.orgChartItemWrapper .orgChartItemFooter {
    display: inline-flex;
    /*right: 2px;*/
    align-items: center;
    justify-content: center;
    border: 1px solid #484848;
    border-radius: 6px;
    /*position: relative;*/
    height: 16px;
    min-width: 16px;
    /*bottom: 2px;*/
    padding: 2px;
    z-index: 1;
    line-height: 16px;
}

.orgChartItemFooter > i {
    padding-left: 2px;
}

    .orgChartItemFooter > i.bi-caret-down {
        position: relative;
        top: 1px;
    }

/*------------------------------------------------------zoom3 template style end ------------------------------------------------------*/

.orgChartViewsContainer {
    margin-right: 20px;
    display: inline-flex;
    align-items: center;
}
/*------------------------------------------------------drawer box style start ------------------------------------------------------*/
/*ariannaboisseau 051023 modified width to better fit icons*/
.orgChartUtilityContainer {
    position: relative;
    height: 100%;
    margin-left: 10px;
    margin-right: -10px;
    overflow: hidden;
    border-top-left-radius: 6px;
    background: whitesmoke;
    /*border-left: 1px solid #E0E0E0;*/
    flex-direction: column;
    align-items: center;
    display: flex;
    width: 0px;
}

.orgChartUtilityContainer, .orgChartDrawerContainer {
    border-top: 4px solid;
}

.orgChartUtilityWidgetContainer {
    margin: 2px 0 2px 0;
    cursor: pointer;
}

    .orgChartUtilityWidgetContainer i {
        display: flex;
        font-size: 18px;
    }

        .orgChartUtilityWidgetContainer i.zmdi {
            font-size: 22px;
        }
/*changed width from % to px*/
.orgChartDrawerContainer {
    position: relative;
    max-height: 100%;
    margin-left: 10px;
    margin-right: -10px;
    border-top-left-radius: 6px;
    flex-direction: column;
    background-color: whitesmoke;
    overflow: hidden;
    width: 0px;
    display: flex;
}

    .orgChartDrawerContainer.left {
        margin-left: -10px;
        margin-right: 10px;
        border-top-right-radius: 6px;
        border-top-left-radius: 0px;
        /*        width: 220px;
        min-width: 220px;*/
    }

    .orgChartDrawerContainer:not(.left) > * {
        border-left: 1px solid #E0E0E0;
    }

    .orgChartDrawerContainer.left > * {
        border-right: 1px solid #E0E0E0;
    }

.orgChartDrawer {
    overflow: hidden;
    position: relative;
    flex: 1;
    padding-bottom: 16px;
}

.orgChartDrawer .chk {
    white-space: nowrap;
}

.orgChartDrawerContainer.left .orgChartTabsContainer {
    justify-content: flex-start;
}

.orgChartTabsContainer {
    height: 30px;
    display: flex;
    justify-content: space-evenly;
}

.orphansContainer {
    flex-direction: column;
    align-items: center;
}

.orgChartPreviewTabsContainer.orgChartTabsContainer {
    margin-top: -16px;
    border-top: 2px solid;
}

.orgChartTabsContainer .orgChartTab {
    display: inline-flex;
    height: 26px;
    padding: 2px 2px;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    align-items: center;
    min-width: 10px;
    width: 100%;
    margin: 4px 2px;
    line-height: 26px;
    flex: 1 1 0;
}

.orgChartTab > span {
    max-width: 62px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*joeyelrassi 22072024 commented seems useless*/
/*.orgChartTab.selected:first-child {
    border-left: 4px solid;
}*/
.orgChartTabsContainer a.orgChartTab.selected {
    color: white;
}

.orgChartTab:not(.selected):hover {
    color: black;
    background-color: rgba(220,220,220, 0.6);
}

.orgChartDrawerSubTabsContainer {
    padding-top: 6px;
}


/*joeyelrassi 26012021 orgchart search box*/
.inputClear.OrgChartSearch {
    width: 100%;
    font-weight: normal;
    font-size: 13px;
    color: Gray;
    font-style: italic;
    padding-left: 20px;
}

.orgdiagram > .bp-scrollframe {
    width: 100% !important;
    overflow: hidden !important;
    margin: 0px !important;
}

.orgdiagram.noCursor {
    cursor: none;
}

.noCursor *, .cursor {
    cursor: none !important;
}

.cursor {
    height: 16px;
    width: 16px;
    position: absolute;
    z-index: 1000;
}

/*joeyelrassi 14/02/25 commented to see if still exists*/
/*.orgChartFilterContainer {
    position: absolute;
    top: -30px;
    left: 0;
    z-index: 10;
}*/
/* Box di ricerca MultiField in Grid */

.modal-body .filter-grid tr:not(.header) td {
    padding-right: 4px;
}

.modal-body .filter-grid tr.header td {
    margin-left: 4px;
}

.modal-content .modal-body .filter-grid .filterFieldValues + button {
    transition: none;
}

.orgChartOptionsButtonsContainer {
    display: inline-flex;
    padding: 2px;
    background-color: rgba(250,250,250,0.75);
    border-radius: 6px;
    align-items: center;
    position: absolute;
    top: -40px;
    z-index: 4;
}

    .orgChartOptionsButtonsContainer.left:not(.fixed) {
        left: 0px;
    }

.orgChartOptionsButtons {
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 3;
    background-color: white;
    font-size: 20px;
    overflow: hidden;
    margin: 0px 2px;
    position: relative;
    border: 1px solid #ddd;
}

    .orgChartOptionsButtons.selected {
        border: 1px solid;
    }

    .orgChartOptionsButtons.dashboard {
        font-size: 18px;
    }

    .orgChartOptionsButtons.noBackground {
        background-color: transparent !important;
        border: 0px !important;
    }

.filterBlue {
    color: #457B9D;
}

.orgChartOptionsButtonsContainer.left .orgChartOptionsButtons {
    overflow: visible;
}

div.orgChartOptionsButtons.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
}

    div.orgChartOptionsButtons.disabled:hover {
        background-color: #ddd;
    }

.orgChartOptionsButtons.fitToPage {
    margin-right: 20px;
}

.orgChartOptionsButtons > i {
    display: inline-flex;
}

.orgChartOptionsButtons.goRoot {
    display: none;
}

#OrgChartSearchResults.orgDrawerItem {
    flex-direction: column;
}

span.orphans-count.badge, span.filter-count.badge, .hiddenItems-count.badge {
    position: absolute;
    z-index: 1;
    padding: 2px 2px;
    height: 14px;
    min-width: 14px;
    color: #FFFFFF;
    font-size: 10px;
    right: -2px;
    top: -2px;
}

.hiddenItems-count.badge {
    right: -6px;
}

.orgDrawerItemContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.orgDrawerItem {
    display: flex;
    width: 98%;
    padding-top: 5px;
    justify-content: space-between;
    padding-left: 8px;
}

    .orgDrawerItem.orphansContainer {
        padding-right: 8px;
    }

    .orgDrawerItem.toggleContentContainer {
        flex-direction: column;
        cursor: pointer;
    }

.orgDrawerItem .bootstrap-switch {
    white-space: nowrap;
}

.toggleContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

    .toggleContent > .toggleContent > .orgDrawerItem {
        margin-left: 28px;
        padding-right: 14px;
    }

.orgChartUploadImage {
    width: 230px;
}

    .orgChartUploadImage > tbody > tr {
        display: flex;
        justify-content: space-between
    }

    .orgChartUploadImage img.uploadPictureMin {
        max-width: 55px;
    }

.orgChartUploadFile div.uploadBarName .fileProgress {
    width: 200px;
}

.treeTabIcons {
    user-select:none;
    width: 40%;
    min-width: 40%;
}

.treeTabButtons {
    width: 60%;
    min-width: 60%;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    .treeTabButtons .treeTabButton {
        width: calc(50% - 8px);
        margin: 2px 2px 0 0;
        padding: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

a.orgChartTreeTab {
    cursor: pointer;
    margin-left: 4%;
    font-size: 20px;
    position: relative;
    display: inline-block;
}

.orgChartTreeTab[value="1"] > i, .orgChartContextMenuOptionIcon[value="1"] {
    color: green;
}

a.orgChartTreeTab[disabled] {
    pointer-events: none;
    opacity: 0.5;
}

.orgChartTreeTab > .zmdi {
    vertical-align: middle;
}

.condFormatCombo.orgChartTreeTab {
    display: inline-block;
    max-width: calc(100% - 30px);
    min-width: calc(100% - 30px);
}

    .condFormatCombo.orgChartTreeTab > div {
        max-width: 100%;
        min-width: 100%;
    }

.jstree .jstree-anchor {
    display: inline-block
}

.jstree .highlightAncestor {
    background-color: lightgreen;
}

.orgDrawerItem.profileContent {
    flex-direction: column;
    padding-top: 0;
}

.orgDrawerItem.zoomSlider {
    justify-content: center;
}

.orgDrawerItem.toggleOptionsContainer {
    justify-content: flex-start;
}

.toggleOptions {
    margin-right: 4px;
}

.profiletab.orgDrawerItem.orgChartFieldToggle {
    width: 90%;
    padding-top: 0px;
    justify-content: end;
}

.orgDrawerItem.orgChartFieldToggle > .field-toggle {
    font-size: 20px;
    cursor: pointer;
}

.toggleContentContainer .orgChartDrawerLabel {
    cursor: pointer;
    margin: 4px 0 4px 0;
}

.orgChartDrawerLabel {
    white-space: nowrap;
}

    .orgChartDrawerLabel > i.drawerLabelIcon, .modal-body i.drawerLabelIcon {
        margin: 4px 4px 4px 0;
        transition-duration: 0.2s;
        transition-property: transform;
    }
    .orgChartDrawerLabel > i.drawerLabelIcon {
        display: inline-block;
    }

.drawerLabelIcon.open {
    transform: rotate(90deg);
}

.orgDrawerItem .uploadSmall.uploadSmall2 {
    margin-right: 6px;
}

.orgChartSelectFields {
    width: 100%;
}

.sortTree.orgChartSelectFields {
    top: 64px;
}

.orgChartSelectFields #selectFields {
    left: unset;
    right: 5%;
    max-width: 90%;
}

.orgChartSelectFields .fieldsFilter {
    width: 100%;
    padding-right: 10px;
    display: block;
    margin-bottom: 2px;
}

    .orgChartSelectFields .fieldsFilter input {
        width: 100%;
        height: 22px;
        padding-left: 22px;
    }

    .orgChartSelectFields .fieldsFilter > i {
        left: 10px;
        position: absolute;
        margin-top: 1px;
    }

.orgChartSelectFieldsContainer {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
}

    .orgChartSelectFieldsContainer div.fieldsExcluded, .orgChartSelectFieldsContainer div.fieldsIncluded {
        float: none;
        width: 49%;
    }

    .orgChartSelectFieldsContainer ul#fieldsExcluded, .orgChartSelectFieldsContainer ul#fieldsIncluded {
        width: 100%;
    }

.orgChartSortItem {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fieldPreviewTitleContainer {
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.orgChartPreviewContent .fieldPreviewTitle {
    font-weight: 400;
}

.orgChartPreviewContent .fieldPreviewContainer {
    border: 1px solid silver;
    width: 135px;
    height: 135px;
    display: table-cell;
    overflow: hidden;
}

.orgChartPreviewContent .container .fieldContainer .FieldValueEdit {
    border: 0px;
}

.profileContent > div > .container {
    display: inline-flex;
    flex-direction: column;
    width: 100% !important;
    border-left: 0px transparent;
    padding-bottom: 10px;
}

    .profileContent > div > .container .fieldContainer {
        display: inline-flex;
        justify-content: space-between;
        margin-bottom: 2px;
        padding: 0;
    }

        .profileContent > div > .container .fieldContainer .FieldValueEdit, .profileContent > div > .container .fieldContainer .Label {
            word-break: break-word;
            text-align: left;
            margin: 0;
            min-height: 18px;
            text-overflow: ellipsis;
            overflow: hidden !important;
        }

div.profileContent > div > .container .fieldContainer .FieldValueEdit {
    border: none;
    padding: 0 0 0 1px;
    max-width: 60%;
}

.profileContent > div > .container .fieldContainer .Label {
    line-height: 20px;
    max-width: 40%;
}

.profileContent > div > .container .fieldContainer input[type=text]:not(.ListNavigationSelect) {
    width: 175px;
    max-width: 175px;
    /*height: 20px;*/
}

.profileContent > div > .container .fieldContainer input:not(#SearchKeyMenu):focus {
    outline: 0px !important;
}

.profileContent > div > .container img, .profileContent > div > .container img:hover {
    min-width: 150px;
    max-width: 158px;
}

i.jstree-icon.noicon, .TreeNodeEditButton {
    display: none;
}

.TreeNodeEditButton {
    margin: 3px;
}

.orgChartContainer .orgChartContextMenu {
    position: absolute;
    display: none;
    z-index: 5;
    transition: opacity 0.25s;
}

    .orgChartContainer .orgChartContextMenu ul.dropdown-menu {
        display: block;
        width: 300px;
    }

        .orgChartContainer .orgChartContextMenu ul.dropdown-menu.submenu {
            visibility: hidden;
            transition-delay: 0.25s;
            width: 220px;
            left: 290px;
        }

    .orgChartContainer .orgChartContextMenu .orgChartContextMenuOption {
        position: static;
    }

        .orgChartContainer .orgChartContextMenu .orgChartContextMenuOption:not(.disabled):hover ul.dropdown-menu.submenu {
            visibility: visible;
        }

    .orgChartContainer .orgChartContextMenu a .orgChartContextMenuOptionRightSpan {
        opacity: 0.6;
        float: right;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .orgChartContainer .orgChartContextMenu li:not(.disabled):hover a .orgChartContextMenuOptionRightSpan {
        opacity: 1;
    }

    .orgChartContainer .orgChartContextMenu .orgChartSubmenuArrow {
        float: right;
        height: 18px;
        margin: 0px;
        transition-duration: 0.2s;
    }

    li.orgChartContextMenuOption:not(.disabled):hover .orgChartSubmenuArrow {
        transform: rotate(-180deg);
    }

    .orgChartContainer .orgChartContextMenu a .orgChartContextMenuOptionLabel {
        left: 32px;
        position: relative;
    }

    .orgChartContainer .orgChartContextMenu a .orgChartContextMenuOptionIcon {
        position: absolute;
        font-size: 16px;
        width: 16px;
        height: 20px;
    }

    .orgChartContainer .orgChartContextMenu .horizontalSeparator {
        width: 100%;
        margin: 4px 0 4px 0;
        display: block;
        opacity: 0.1;
        border-color: #1d1d1d;
    }

    .orgChartContainer .orgChartContextMenu .orgChartContextMenuOption.disabled a:hover > i:not(.bi-arrow-repeat) {
        color: #b6b6b6;
    }

    .orgChartContainer .orgChartContextMenu > .dropdown-menu > .orgChartContextMenuOption > a, .orgChartContainer .orgChartContextMenu .dropdown-menu.submenu > .orgChartContextMenuOption > a {
        cursor: default;
        padding: 4px 15px 4px 15px;
    }

        .orgChartContainer .orgChartContextMenu > .dropdown-menu > .orgChartContextMenuOption > a[targetProperty="label"] {
            display: flex;
            justify-content: center;
            align-items: center;
        }
            .orgChartContainer .orgChartContextMenu > .dropdown-menu > .orgChartContextMenuOption > a[targetProperty="label"] span {
                font-weight: bold;
                font-size: 14px;
                max-width: 100%;
                text-overflow: ellipsis;
                overflow: hidden;
            }

.orgChartContextMenuOption button {
    margin: 2px;
    padding: 4px 6px;
    cursor: pointer;
}

.horizontalSeparator {
    border-bottom: 1px solid lightgray;
    width: 80%;
    margin-top: 8px;
    margin-bottom: 8px;
}

.orgChartPopupPropContainer {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

.orgChartPopupProp.disabled {
    pointer-events: none;
    opacity: 0.4;
}

.orgChartPopupProp, .orgChartOpenFileHeader {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.orgChartPopupPropSpan {
    display: flex;
}

    .orgChartPopupPropSpan > .orgDrawerItem {
        padding: 0px;
        margin: 0px 4px;
    }

    .orgChartPopupPropSpan > input {
        margin: 0px 4px;
    }

    .orgChartPopupPropSpan > span {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
    }

.orgChartPopupProp.select-version {
    border-radius: 4px;
    padding: 2px 2px 2px 6px;
    margin: 2px 0px;
    cursor: pointer;
}

.orgChartOpenFileHeader {
    padding-bottom: 6px;
}

    .orgChartPopupProp.select-version span, .orgChartPopupProp.select-version input, .orgChartPopupProp.select-version .orgChartUserShareLevel,
    .orgChartOpenFileHeader span, .orgChartOpenFileHeader .orgChartUserShareLevel {
        width: 20%;
    }

    .orgChartOpenFileHeader .versionSharelabel {
        width: 64px;
    }

.orgChartPopupProp.select-version:hover {
    background-color: #f5f5f5;
}

.orgChartDeleteVersion {
    font-size: 20px;
    color: #787878;
    margin-right: 16px;
}

.orgChartPopupProp.select-version.selected, .orgChartPopupProp.select-version.selected .orgChartDeleteVersion {
    background-color: #037ffc;
    color: white;
}


.orgItemPopup {
    display: block;
    position: absolute;
    float: right;
    border-radius: 6px;
    background-color: white;
    width: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    z-index: 2;
    border: 1px solid rgba(0, 0, 0, .2)
}

.createSubChartsContainer, .pdfOptionsContainer {
    position: absolute;
    display: none;
    width: 90%;
    left: 2px;
    top: 82px;
    min-width: 288px;
    z-index: 2;
}

.pdfOptionsContainer {
    top: 58px;
}

    .pdfOptionsContainer span.orgChartPopupLabel {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.orgItemPopup.propertiesPopup {
    width: 350px;
    font: 13px Roboto, sans-serif;
    color: black;
}

.fileOptionsPopup.orgItemPopup {
    width: 150px;
    right: 32px;
    top: 46px;
}

.fileOptionsPopup .orgChartPopupProp {
    cursor: pointer;
    justify-content: flex-start;
    height: 30px;
}

    .fileOptionsPopup .orgChartPopupProp:not(:last-child) {
        border-bottom: 1px solid #e5e5e5;
    }

    .fileOptionsPopup .orgChartPopupProp:last-child {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }

.fileOptionsPopup:after {
    border-color: rgba(0, 0, 0, 0);
    border-style: solid;
    display: block;
    height: 0;
    position: absolute;
    width: 0;
    border-width: 10px;
    content: "";
    border-bottom-color: #FFFFFF;
    border-top-width: 0;
    top: -10px;
    right: 13px;
}

.fileOptionsPopup .orgChartPopupOption {
    margin-left: 12px;
}

.fileOptionsPopup .orgChartPopupLabel {
    margin-left: 8px;
}

.fileOptionsPopup .orgChartPopupProp:hover {
    color: #262626;
    background-color: #f5f5f5;
}

.subChartPropertiesPopup {
    right: 12px;
}

.orgItemPopup > i {
    cursor: pointer;
    font-size: 20px;
    padding: 2px;
}

.orgChartPopupOption {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border-radius: 6px;
    margin: 4px;
}

.orgChartPopupSwitch {
    border: 1px solid lightgray;
}
.orgChartPopupProp .orgChartPopupOption.select2 {
    justify-content: flex-end
}

.orgChartPopupOption.zoomSlider {
    width: 80%;
    justify-content: flex-end;
}

.orgChartPopupOptionChoice {
    cursor: pointer;
    border-radius: 5px;
    padding: 4px;
    min-width: 72px;
    text-align: center;
    height: 26px;
}

    .orgChartPopupOptionChoice:not(:last-child) {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-right: 1px solid lightgrey;
    }


    .orgChartPopupOptionChoice:not(:first-child) {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .orgChartPopupOptionChoice:hover {
        background-color: rgba(92, 184, 92,0.2);
    }

    .orgChartPopupOptionChoice.selected {
        background-color: rgb(92, 184, 92);
        color: white;
    }

.orgChartPopupLabel {
    font-weight: bold;
    padding-left: 4px;
    white-space: nowrap;
    margin: 2px 4px 0 2px;
}


/*sub popups*/
.orgItemPopup.orgItemSecondaryPopup {
    left: 34px;
    top: 0px;
}

.saButtonsContainer .orgItemPopup {
    display: none;
    width: auto;
    top: 32px;
    left: 166px;
}

.connectorButtonsContainer .orgItemPopup, .groupButtonsContainer .orgItemPopup {
    left: 0px;
    top: 24px;
}

.saButtonsContainer .modal-header, .connectorButtonsContainer .modal-header, .groupButtonsContainer .modal-header {
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
}

.orgChartModal .modal-header {
    padding: 15px 15px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header.noTitle {
    padding: 6px 4px 0px;
    border-bottom: none;
}

.modal-header.noTitle + .modal-body {
    padding: 0 10px 10px 10px;
}

.tabContent {
    margin-top: 6px;
}

.orgChartPreviewContent > .findImgList {
    max-height: 300px;
    overflow: hidden;
    position: relative;
    padding-left: 4px;
    padding-right: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.findImgList > .imgContainer {
    margin: 5px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 5px;
    cursor: pointer;
}

    .findImgList > .imgContainer.selected {
        box-shadow: 0 0 2px 1px rgb(3, 127, 252);
    }

.imgContainer > img {
    width: 106px;
    height: 106px;
}

.imgContainer > span {
    max-width: 120px;
    white-space: normal;
}

.orgChartPreviewContent, .orgChartPreviewFooter {
    padding: 4px;
}

.fieldFormatContent.orgChartPreviewContent {
    display: flex;
}

.orgChartTabsContainer.orgChartPreviewTabsContainer > .orgChartTab {
    border-bottom-left-radius: 6px;
}

.orgChartTab.shadow {
    box-shadow: 0 0 0 transparent;
}

.fieldDesignContainer, .rulesDesignContainer {
    display: flex;
    width: 100%;
    height: 320px;
}

.fieldDesignContainer {
    margin-top: 10px;
}

.rulesDesignContainer .OrgChartItem {
    min-height: 60px;
}

.userFieldContainer {
    width: 30%;
}

.userRulesContainer {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.standardFieldsContainer {
    position: relative;
    overflow: hidden;
    max-height: 350px;
    height: 50%;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
}

.userRulesContainer > .userFields, .previewContainer > .previewSpace {
    height: calc(100% - 35px);
}

.previewContainer {
    display: inline-flex;
    flex-direction: column;
}

.stylesContainer {
    display: inline-block;
    font-size: 10px;
    position: relative;
}

.styleSourcesLabel {
    margin-left: 4px;
    display: inline-flex;
    cursor: default;
}

    .styleSourcesLabel > i {
        margin-left: 4px;
    }

.styleSourcesContainer {
    position: absolute;
    display: none;
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 0 6px 2px rgba(153, 153, 153, .5);
    background-color: white;
    top: 15px;
    right: 0px
}

.styleSourcesLabel:hover + .styleSourcesContainer {
    display: block;
}

.styleSources {
    font-size: 10px;
    margin: 2px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.userFormatPreviewButtons {
    display: flex;
    justify-content: space-around;
}

.userRulesButtons > button {
    margin-right: 1%;
    width: 24%;
}


.userFormatPreviewButtons > button {
    min-width: 100px;
}

.condFormatRule {
    display: flex;
    cursor: pointer;
}

    .condFormatRule > span {
        display: flex;
        width: 100%;
        padding: 5px;
    }

    .condFormatRule > i {
        padding: 7px 5px 0 0
    }

    .condFormatRule > input {
        margin: 0 6px 0 0;
    }

    .condFormatRule.selected > span {
        color: white;
        background-color: #037ffc;
    }

/* Condition to keep the grid width within popup width */
.orgChartPreviewContent .container {
    width: 100%;
}

.condFormattingEditPopupContainer .footerIconsRight {
    visibility: hidden;
}

.designContainer, .previewContainer {
    width: 70%;
}

.rulesDesignContainer > .previewContainer {
    width: 50%;
}

.condFormatWorkflow {
    left: 20px;
    margin: 0px;
}

.orgChartModal i.condFormatWorkflow:before {
    left: 0px;
}

.userFieldChoice {
    font-weight: normal;
    margin-bottom: 1px;
    cursor: pointer;
    font-size: 12px;
    background: white;
    padding: 1px 4px;
    min-height: 22px;
    border-radius: 6px;
    border: 1px solid #D2D7D7;
    list-style: none;
    color: #1d1d1d;
}

.designSpace .designBox.selected {
    border-color: #037ffc;
    box-shadow: 0 0 2px 1px rgba(3, 127, 252, .5)
}

.dropArea.designBox .userFieldChoice:not(.ui-sortable-helper) {
    background: transparent;
    border: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.userFields .userFieldChoice {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
}

.standardFieldsContainer .userFieldChoice {
    display: inline-flex;
    align-items: center;
}

    .standardFieldsContainer .userFieldChoice > input {
        margin-top: 0px;
        margin-right: 4px;
    }

    .standardFieldsContainer .userFieldChoice > label {
        width: 100%;
        margin-bottom: 0px;
        cursor: pointer;
    }

.choiceIcon {
    margin-right: 2px;
}

.dropArea.designBox {
    overflow: hidden;
}

    .dropArea.designBox .choiceIcon {
        display: none;
    }

.userFields, .designSpace, .previewSpace {
    height: calc(100% - 5px);
    padding: 4px;
    max-height: calc(80vh - 128px);
    position: relative;
}

.fieldDesignContainer .designContainer .designSpace, .fieldDesignContainer .previewContainer .previewSpace {
    justify-content: space-around;
}

.designSpace, .previewSpace {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.userFields {
    border-right: 1px solid #aaa;
    padding-right: 14px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 35px);
    width: 100%;
}

.rulesIndexContainer div.chk {
    min-width: 60px;
}


.templateBorders {
    border: 1px solid #aaa;
    width: 300px;
    table-layout: fixed;
    overflow: hidden;
    position: relative;
    padding: 0px 8px;
    border-collapse: separate;
    border-spacing: 2px;
    display: block;
    max-height: 250px;
    min-height: 30px;
}

.formatFieldContainer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.editFieldContainer {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 6px;
}

.editFieldLabelContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 52px;
    opacity: 0;
}


.formatStandardFieldContainer.formatFieldContainer {
    flex-direction: row;
    justify-content: flex-end;
}

.formatStandardFieldContainer > button {
    margin: 8px;
}

.showLabelContainer, .formatLabelContainer {
    display: flex;
    align-items: center;
}

    .showLabelContainer > .editFieldLabelRadio, .editFieldLabelTitle, .showLabelContainer > .editFieldLabelInput, .formatLabelContainer > .editFieldLabelStyleRadio {
        margin: 0 2px 0 0;
    }

    .showLabelContainer.disabled > .editFieldLabelInput, .showLabelContainer.disabled > .editFieldLabelTitle {
        color: grey;
        pointer-events: none;
    }

.layoutLabel {
    height: 20px;
    padding-left: 10px;
}

/*.designSpace .row {
    margin: 2px 0 2px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}*/

.designSpace .row:empty {
    display: none;
}

.designSpace .column {
    height: 25px;
    min-width: 40px;
    border: 1px solid #bbb;
    /*margin: 0 2px 0 2px;*/
    width: 100%;
}

.designSpace .subRow {
    width: 100%;
    display: inline-flex;
}


.userFields .sortablePlaceholder {
    min-height: 22px;
}

.dragOver.ui-sortable {
    background-color: lightgreen;
}


.designPreviewOptionsContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.designPreviewSwitch > a.designPreviewChoice.selected {
    background-color: rgb(92, 184, 92);
    color: white;
}

.designPreviewChoice:first-child {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.designPreviewChoice:not(:first-child) {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.designPreviewChoice {
    cursor: pointer;
    border-radius: 5px;
    padding: 4px;
    min-width: 72px;
    text-align: center;
}

.designPreviewSwitch {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid lightgray;
    border-radius: 6px;
    margin: 4px;
    height: 28px;
}

.templateApplicationOptions {
    display: flex;
    justify-content: space-between;
    margin: 8px;
}

.orgChartPreviousIconContainer {
    font-size: 26px;
    color: grey;
    cursor: pointer;
    border: 1px solid #a5a5a5;
    transition: all ease-in-out 200ms;
    position: absolute;
    left: 15px;
}

.ImportFileNavigation .confirm {
    float: left;
}


.ImportFileNavigation {
    width: 100%;
    justify-content: flex-end;
}

.popupApplicationButtons .ImportFileNavigation button {
    margin-bottom: 0px;
}

.templateRadioContainer {
    align-items: center;
    display: flex;
}

    .templateRadioContainer > input[type=radio] {
        margin: 0 2px 0 0;
    }

    .templateRadioContainer > span {
        margin-right: 6px;
    }

.templateChoiceContainer {
    margin: 2px 0 6px 0;
}

.itemFieldWrapper {
    vertical-align: middle;
}
/*joeyelrassi 13032023 changed display from inline-flex to block -- in case of label, change display to flex*/
.itemField {
    text-overflow: ellipsis;
    word-break: break-word;
    padding: 2px 0px;
    width: 100%;
}

    .itemField .horizontalLine {
        border-bottom: 1px solid #b0b0b0;
        position: relative;
        top: 7px;
    }

        .itemField .horizontalLine.dashed {
            border-bottom: 1px dashed #b0b0b0;
        }

.templateChoiceLabel {
    margin-right: 6px;
}

.descLine {
    max-width: 100%;
    max-height: 100%;
}
/*--------------------------------------------on search name template start --------------------------------------------*/
/*in its original position*/
.onlyNameTemp .selectedOrgText {
    display: inline;
    font-weight: bold;
    background-color: yellow;
}
/*--------------------------------------------on search name template end --------------------------------------------*/

/*--------------------------------------------on search zoom3 template start -- NOT WORKING--------------------------------------------*/
.zoom3 p.selectedOrgText .descLine {
    display: inline;
    font-weight: bold;
    background-color: yellow;
}
/*--------------------------------------------on search zoom3 template end --------------------------------------------*/

/*--------------------------------------------on search common start --------------------------------------------*/
/*under the search bar*/
#OrgChartSearchResults > .OrgChartItem, .orphansContainer > .OrgChartItem {
    margin-left: 10px;
    margin-top: 6px;
    position: relative;
}

.orphansContainer > .OrgChartItem {
    margin-left: 0px;
}

/*in its original position*/
.selectedOrgPerson {
    border-color: #fbcb09 !important;
}

.treeSearchContainer {
    position: relative;
}

    .treeSearchContainer .treeSearch {
        max-width: 100%;
        margin-top: 4px;
        padding-right: 20px;
    }

    .treeSearchContainer .clear {
        position: absolute;
        top: 8px;
        right: 6px;
        cursor: pointer;
        display: none;
    }

    .treeSearchContainer:hover .clear, .treeSearch:focus ~ .clear {
        display: block;
    }
/*--------------------------------------------on search common end --------------------------------------------*/
.zoomSliderContainer {
    width: 80%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .zoomSliderContainer div.zoomOut, .zoomSliderContainer div.zoomIn {
        position: relative;
        display: inline-flex;
        padding: 4px;
        cursor: pointer;
        justify-content: center;
    }

        .zoomSliderContainer div.zoomOut i, .zoomSliderContainer div.zoomIn i {
            font-size: 16px !important;
            transition: transform .2s;
            display: flex;
        }

        .zoomSliderContainer div.zoomOut:hover i, .zoomSliderContainer div.zoomIn:hover i {
            transform: scale(1.25);
        }

    .zoomSliderContainer .orgChartSlider {
        width: 80%;
        height: 10px;
        border: 1px solid #cccccc;
    }

        .zoomSliderContainer .orgChartSlider a {
            cursor: pointer;
        }

.orgChartVersion {
    position: absolute;
    left: 0;
    bottom: 10px;
    color: #808080;
}

button.btn.save-userLevel {
    display: none;
    margin-left: 4px;
    min-width: 0px;
}


.OrgChartLegend {
    display: flex;
    justify-content: space-between;
}

.OrgChartVersionName {
    font-size: 18px;
}

.orgChartButtonContainer {
    padding: 2px;
    width: 34px;
    cursor: pointer;
    right: 2px;
}

.btn.btn-light.orgChartButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
}

.orgChartButton.box-list-button {
    right: 95px;
}

.btn.btn-light.orgChartButton:hover i {
    animation: bigsmall 1.5s linear infinite;
}

.orgItemArrow {
    color: silver;
    position: absolute;
    z-index: 1;
    cursor: pointer;
    left: calc(50% - 10px);
    transition: left linear 250ms, top linear 250ms;
    bottom: -16px;
    width: 22px;
    height: 22px;
    font-size: 22px;
}

    .orgItemArrow:hover {
        animation: downupLess 1s ease-in-out infinite;
    }

    .orgItemArrow.rotated {
        top: -24px;
    }

        .orgItemArrow.rotated:before {
            transform: rotate(180deg);
        }

        .orgItemArrow.rotated:hover {
            animation: updownLess 1s ease-in-out infinite;
        }

        .orgItemArrow.rotated.subChartParentWrapper {
            width: 100%;
            left: 0px;
            top: -136px;
            height: 86px;
            border: 1px solid #ACACAC;
            border-left-width: 4px;
            font-size: 12px;
            padding: 5px;
            background-color: white;
        }
        .orgItemArrow.rotated.subChartParentWrapper:hover .dashedLine.right {
            transform: rotate(-45deg);
            height: 16px;
            left: calc(50% + 5px);
        }
        .orgItemArrow.rotated.subChartParentWrapper:hover .dashedLine.left {
            transform: rotate(45deg);
            height: 16px;
            left: calc(50% - 6px);
        }

        .orgItemArrow.rotated.subChartParentWrapper .dashedLine {
            height: 32px;
            width: 2px;
            border: 1px solid;
            left: 50%;
            position: absolute;
            border-style: dashed;
            top: calc(100% + 10px);
            transition: transform 400ms, height 400ms, left 400ms;
        }
        .orgItemArrow.rotated.subChartParentWrapper .dashedLine.left {
            height: 0px;
        }
    .hiddenItemConnector {
        display: none;
    }

.hiddenItem > .orgChartItemWrapper {
    display: none;
}

.hiddenItem.showConnector .hiddenItemConnector {
    display: block;
    position: absolute;
    height: 100%;
    border-left: 1px dashed lightgrey;
    left: calc(50% - 1px);
    top: 0px;
}

.jstree a.hiddenItem {
    text-decoration: line-through !important;
}

.jstree .jstree-rename-input {
    height: 24px !important;
    line-height: 24px !important;
}

.annotationToggle {
    z-index: 1;
    position: absolute;
    right: -10px;
    top: -10px;
    border-color: transparent;
    border-style: solid;
    display: block;
    height: 0;
    border-width: 12px;
    content: " ";
    box-sizing: border-box;
    border-right-color: rgb(250, 130, 2);
    transform: rotate(135deg);
    cursor: pointer;
}

.orgChartCustomAnnotation.annotation, .orgChartCustomAnnotation.newAnnotation {
    border-radius: 6px;
    border: 1px solid grey;
    padding: 2px 4px;
    float: left;
}

.standardAnnotationContainer {
    position: absolute;
    left: 6px;
    width: 100%;
    height: 100%;
    display: inline-flex;
    z-index: 2;
}

.saButtonsContainer {
    font-size: 14px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-left: 2px;
    justify-content: space-evenly;
}

    .saButtonsContainer > a {
        color: silver;
        font-size: 16px;
    }

.saButton {
    margin-bottom: 2px;
    cursor: pointer;
}

i.orgChartSaveAnnotation.currentView, .annotationView.selected > i {
    color: green;
}

.annotationButtonsContainer > i.selected, a.allviews i.orgChartSaveAnnotation {
    color: green;
}

.standardAnnotation {
    width: 100%;
    height: 100%;
    border: 1px solid grey;
    border-radius: 6px;
    background: white;
    box-shadow: 0 0 6px 2px rgb(153 153 153 / 50%);
}


    .standardAnnotation:after {
        left: -18px;
        top: 7px;
        border-color: transparent grey transparent transparent;
        border-style: solid;
        display: block;
        height: 0;
        position: absolute;
        border-width: 9px;
        content: " ";
        bottom: 100%;
        box-sizing: border-box;
    }

    .standardAnnotation.arrowDown:after {
        left: 140px;
        top: 90px;
        border-color: grey transparent transparent transparent;
    }

    .standardAnnotation > textarea, .standardAnnotation > textarea:focus {
        width: 100%;
        height: 65%;
        border: 0px !important;
        outline: 0px !important;
        background: transparent;
        font-weight: normal;
    }

    .standardAnnotation > .standardAnnotationTitle {
        width: 100%;
        height: 35%;
        background-color: whitesmoke;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 4px;
        border-bottom: 2px solid rgb(250, 130, 2);
    }

.annotationButtonsContainer {
    display: none;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    padding: 7px;
    margin: 2px;
    color: #ACACAC;
    border-radius: 6px;
    background-color: rgba(250, 250, 250, 0.8);
}

.showButtons .annotationButtonsContainer {
    display: inline-flex;
}

    .showButtons .annotationButtonsContainer ~ .CustomAnnotationResize {
        right: 26px;
        bottom: 0px;
    }

    .annotationButtonsContainer ~ .CustomAnnotationResize {
        right: -8px;
    }

    .annotationButtonsContainer > i {
        margin-bottom: 4px;
    }

        .annotationButtonsContainer > i:hover:before {
            cursor: pointer;
        }

.CustomAnnotationResize {
    position: absolute;
    bottom: -4px;
    right: -8px;
    padding: 8px;
    cursor: nw-resize;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-45deg);
}

.lineAnnotationContainer {
    position: absolute;
    width: 10px;
    height: 10px;
    overflow: visible;
}

svg.lineAnnotation {
    overflow: visible;
    width: 10px;
    height: 10px;
}

.lineAnnotationContainer .annotationButtonsContainer {
    position: relative;
    left: 10px;
}
.lineAnnotationContainer circle {
    fill: #037ffc;
    display: none;
    cursor: pointer;
}
.showButtons.lineAnnotationContainer circle {
    display: block;
}

.resizeLineDown {
    width: 6px;
    border-top-width: 1px;
    border-top-style: solid;
    border-color: grey;
}

.resizeLineUp {
    width: 12px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: grey;
    margin-bottom: 2px;
}


.annotationColorPickerContainer > .colorPickerSelect {
    min-width: 100px;
}

.connectorLabelContainer {
    margin-left: 15px;
}

.connectorButtonsContainer, .groupButtonsContainer {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    padding: 0px 2px 0px 0px;
    margin: 0px;
}

    .connectorButtonsContainer > .nlbi, .orgChartButton > .nlbi, .groupButtonsContainer .nlbi {
        /*display: inline;*/
        justify-content: center;
        font-size: 16px;
    }

.groupButtonsContainer {
    z-index: 1;
    position: relative;
    width: 30px;
    top: 20px;
}
.groupAnnotationLabel {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.orgchartLayoutGrid #ResultTable > thead {
    background-color: transparent;
    pointer-events: none;
}

.orgchartLayoutGrid #ResultTable > tbody > tr > td {
    border: transparent;
}

.orgchartLayoutGrid #ResultTable .RicercaRiga1:hover, .orgchartLayoutGrid #ResultTable .RicercaRiga2:hover {
    background-color: transparent;
}

.orgchartLayoutGrid #ResultTable > tbody > tr > td > div:not(.DESC_MAIN) {
    position: absolute;
    left: 300px;
}


.modal-dialog button:not(.close) {
    /*min-width: 100px;*/
    max-height: 30px;
}

.modal-footer button:not(.close) {
    line-height: 18px;
}
.modal-footer button i {
    font-size: 14px;
}


/*--------------------------------------------orgchart import--------------------------------------------*/

/*import grid styles*/
.orgChartGrid THEAD, .orgChartGrid .THeadTable {
    background: white;
    color: #484848;
}

table.dataTable.orgChartGrid thead th, table.dataTable.orgChartGrid thead td {
    padding: 10px 18px;
    border-bottom: 1px solid #111;
}
table.dataTable.orgChartGrid > tbody > tr > td {
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
}

.orgChartGrid .validationError.selected {
    background-color: lightgray;
    border: 1px solid red;
}
.importDatatableEdit{
    width: Calc(100% - 40px);
}
.importDatatableAddColumn {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 14px;
    border: 1px solid #a5a5a5;
    transition: all ease-in-out 200ms;
    cursor: pointer;
}
    .importDatatableAddColumn i {
        padding-left: 1px;
    }
.importDatatableRemoveColumn {
    position: unset;
    margin-left: 4px;
    font-size: 16px;
    cursor: pointer;
    color: #a5a5a5;
}
.importDatatableRemoveColumn:hover {
    color: black;
}
.importWizardChoice {
    display: flex;
    align-items: center;
    margin: 0px 4px;
}
.importWizardBody > .importWizardChoice {
    margin: 15px 12px;
    cursor: pointer;
}
.importWizardChoice > input {
    margin: 0px 4px;
}
.importWizardChoice > input[type="radio"] {
    cursor: pointer;
}

.importWizardBody {
    max-width: 100%;
    position: relative;
    overflow: hidden;
}
    .importWizardBody.mapFieldsContainer {
        max-height: 446px;
    }

    .importWizardBody .orgChartHelpContainer .modal-body {
        max-height: 150px;
    }
    .importWizardBody div.dot {
        height: 12px;
        width: 12px;
        min-width: 12px;
        border: 2px solid grey;
        margin-top: 1px;
    }
    #FilePreviewTable {
        margin: 0;
        border-collapse: separate;
        border-spacing: 4px 4px;
    }

#FilePreviewEnableEdit.dataTables_info {
    float: right;
    clear: none;
}

#FilePreviewEnableEdit input {
    margin: 0px 4px 0px 0px;
}

#ImportFileErrorInfo {
    display: none;
}

#ImportFileErrorContent {
    max-height: 74px;
    overflow: hidden;
    padding-left: 6px;
    position: relative;
    width: 500px;
    padding-right: 15px;
}
#ImportFileSuccessInfo {
    display: none;
    color: green;
    font-weight: bold;
}


.orgChartImportErrorDesc {
    cursor: pointer;
    color: red;
}

.importWizardPreviewTree {
    position: relative;
    height: 385px;
    overflow: hidden;
}
.importWizardHeader {
    margin: 4px 0px;
    display: flex;
    justify-content: space-between;
}
    .importWizardHeader .treeTabButtons {
        width: 50%;
        min-width: 50%;
    }
.importWizardLabel {
    font-weight: bold;
    margin-bottom: 6px;
}

.importWizardFooter {
    margin-top: 4px;
}
.separator {
    border-top: 2px solid #e5e5e5;
    padding-top: 4px;
}

.orgChartImportSampleButtonContainer {
    display: flex;
}

.orgChartImportSampleButtonContainer > * {
    position: absolute;
    bottom: 8px;
}
.orgChartImportSampleButtonContainer > .btn {
    right: 20px;
}
.importWizardSampleGroupContainer {
    height: 388px;
}

.importWizardSampleGroup {
    display: inline-flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
}

.mapFields {
    flex-direction: column;
    align-items: flex-start;
    max-width: 420px;
}

    .mapFields > div {
        margin: 5px;
        width: 100%;
        justify-content: space-between;
    }


/*grid layout*/
.importWizardBody.gridLayout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 10px;
}
    .importWizardBody.gridLayout.norepeat {
        grid-template-columns: repeat(1, 0.6fr);
    }
.importWizardOption {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background 0.3s, transform 0.2s, border 0.3s;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid transparent;
}
    .importWizardOption:hover {
        background: #fafafa;
        transform: scale(1.05);
    }

/*--------------------------------------------orgchart help--------------------------------------------*/
.orgChartHelpContainer {
    color: #484848;
    margin-left: 4px;
    z-index: 1;
    font-weight: normal;
    white-space: normal;
    display: inline-block;
}

.orgDrawerItem .orgChartHelpIcon {
    position: relative;
    top: 2px;
}

.orgChartHelpIcon {
    cursor: pointer;
    font-size: 14px;
}

.orgChartHelpContainer .orgChartModal {
    position: absolute;
    max-width: 250px;
    z-index: 1;
}


.subChartParentTemplate {
    display: flex;
    height: 100%;
    align-items: center;
}

.subChartParentTemplate .img {
    margin-right: 10px;
}
.subChartParentTemplate .img > img {
    max-height: 72px;
    max-width: 72px;
    border-radius: 50%;
}
.subChartParentTemplate .infoContainer {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
}
.subChartParentWrapper .infoContainer > span {
    overflow: hidden;
    text-overflow: ellipsis;
}