/*
    GENERAL NOTES

    1. Backgrounds
        Hover: background-color: #EFEFEF;
        Selected: background-color: #F0F0F0;
        Selected border: #0088CC
        Normal header: #F0F0F0
        Normal subitem header (when there is a parent header): #F8F8F8
        Popup panel background: #F8F8F8

    2. Border colors: heavy: #CCCCCC, light: #d2d2d2

    3. To break words, try to not use word-break: break-all
       Instead, have a fixed-width element & word-wrap: break-word.
       However, in some case word-break might still be needed (e.g. to break "1111111111111111111111111111111111111")
*/

/*0.0 ExtJS overrides*/
/*
    Make the disable mask more transparent.
    The "filter" attr must be manually removed from all EXTJS css files for disabled & mask
*/
* .x-item-disabled {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.x-item-disabled > .x-mask {
    display: none;
}

.x-item-disabled > label,
label.x-item-disabled,
div.x-component-default.x-item-disabled,
.x-item-disabled .x-form-cb-label {
    color: #A5B8CE;
}

.x-item-disabled > label,
label.x-item-disabled {
    opacity: 1;
}

* .x-mask {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

body > .x-mask {
    background: #001D40;
    opacity: 0.38;
    position: fixed;
    bottom: 0;
    right: 0;
}

.x-body, .x-panel-body {
    font-size: 10.5pt;
    color: var(--color-black);
}

.x-form-item-label, .x-grid-cell, .x-form-item, .x-form-display-field, .x-form-field {
    font-family: Arial, Tahoma, Verdana, sans-serif;
    font-size: 10.5pt !important;
    color: var(--color-black);
}
.x-form-item-label {
    line-height: 19px;
}

.x-btn-inner {
    font-size: 10.5pt !important;
}

.x-form-field.x-form-checkbox, .x-form-field.x-form-radio {
    vertical-align: -3px; /*Fix for the 10.5pt font*/
}
.hoverable .x-form-cb-wrap {
    padding-top: 0px !important; /*Override for checkbox to look better in grids*/
}

.x-form-file-wrap input {
    height: 30px !important;
    top: 0 !important;
}

.x-grid-cell-inner, .x-selectable {
    -moz-user-select: text !important;
    -webkit-user-select: text !important;
}

.x-grid-header-ct, .x-column-header {
    background-image: none;
    background-color: #f9f9f9;
}

.column-header-padding-top0 div {
    padding-top: 0 !important;
}

.grid-picker .x-grid-header-ct {
    border-color: #f9f9f9 !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    border-top-width: 0px !important;
}

.grid-picker .x-column-header-over {
    background-image: none;
    background-color: #f9f9f9;
}

.grid-picker .x-grid-body {
    border-bottom-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
}

.grid-picker .x-scroller-horizontal {
    display: none !important;
}

.jobDashboardNavigator .x-tree-panel .x-grid-row div.x-grid-cell-inner {
    height: 26px;
    line-height: 26px;
}

.x-tree-panel .x-grid-row div.x-grid-cell-inner {
    padding: 1px 0;
    height: 40px;
    line-height: 40px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.x-tree-panel .x-grid-row .x-grid-cell-inner .x-tree-checkbox {
    margin: 8px 3px 0 0;
}

svg {
    display: block;
}

/*******************************************************************************/
/******************************* UI Controls start *****************************/
/*******************************************************************************/

/*1.1 COMMON STUFF*/
.itemInaccessible {
    font-style: italic !important;
    color: #888 !important;
}

/*Inventory path element, which should be ellipsed from the _left_ side*/
.pathEl {
    direction: rtl;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
}

.icon24 {
    width: 24px;
    min-width: 24px;
    height: 24px;
}

/*Clickable icon/text*/
.clickablePassive {
    cursor: default;
}

.clickable,
.clickable1 {
    cursor: pointer;
}

.clickableBox {
    cursor: pointer;
}

.clickableBox:hover {
    background-color: #EFEFEF;
}

.clickableIcon {
    cursor: pointer;
    opacity: 0.7;
}

.clickableIcon:hover {
    opacity: 1;
}

.clickableText {
    cursor: pointer;
    text-decoration: none;
}

.clickableText:hover {
    text-decoration: underline;
}

.clickableText tspan {
    cursor: pointer !important;
}

/*Selectable item*/
.selectable {
    cursor: pointer;
}

.selected {
    background-color: #F0F0F0;
}

.selectable:hover {
    background-color: #EFEFEF !important;
}

.hoverable {
    cursor: default;
}

.hoverable:hover {
    background-color: #EFEFEF !important;
}

.visibleOnHoverItem {
    visibility: hidden;
}

.hoverable:hover .visibleOnHoverItem {
    visibility: visible;
}

.unselectableText {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */

    /* No support for these yet, use at own risk */
    -o-user-select: none;
    user-select: none;
}

.dragable {
    cursor: move;
}

.disabled {
    opacity: 0.5;
}

.inline {
    display: inline;
}

.block {
    display: block;
}

.inlineb {
    display: inline-block;
    vertical-align: middle;
}

.hidden {
    display: none;
}

.splitter {
    border-top: 1px solid #d2d2d2;
}

.editableText {
    cursor: text !important;
}

.stripedRow:nth-child(even) {
    background-color: #F8F8F8;
}

.xcentered {
    margin-left: auto;
    margin-right: auto;
}

.ycentered {
    position: relative !important;
    top: 40% !important;
}

.ycentered2 {
    position: relative !important;
    top: 30% !important;
}
.ycentered3 {
    padding-top: 40%;
}

.centeredAbs { /*The parent container must have position:relative */
    width: 100%;
    text-align: center;
    position: absolute !important;
    top: 40% !important;
}

.ymiddle {
    vertical-align: middle;
}

.clear {
    clear: both;
}

.floatRight {
    float: right;
}

.floatLeft {
    float: left;
}

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

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

.borderAll {
    border: var(--border-default);
}

.borderBottom {
    border-bottom: var(--border-default) !important;
}

.borderLeft {
    border-left: var(--border-default);
}

.borderRight {
    border-right: var(--border-default);
}

.borderTop {
    border-top: var(--border-default);
}

.borderPrevent {
    border: 0 transparent !important;
}

.borderPreventChildren * {
    border: 0 transparent !important;
}

.borderAllCallToAction {
    border-color: #4285f4;
}

.fullWidth, .fullWidth input {
    width: 100% !important;
}

/*Subpanel stuff*/
.subpanel {
    background-color: #F8F8F8;
}

.subpanelBorderB {
    border-bottom: 1px dotted #CCCCCC;
}

.subpanelBorderL {
    border-left: 1px dotted #CCCCCC;
}

.subpanelBorderR {
    border-right: 1px dotted #CCCCCC;
}

.subpanelBorderT {
    border-top: 1px dotted #CCCCCC;
}

/*Fieldset area*/
.fieldsetTitle {
    margin-bottom: 0.1em;
}

.fieldsetIcon {
    margin-right: 7px;
    display: inline-block;
    vertical-align: middle;
}

.fieldsetText {
    display: inline-block;
    vertical-align: middle;
}

.fieldsetContainer {
    margin-bottom: 1em;
}

.fieldsetSplitter { /* This style is proper for handling hide/show depend on the context. E.g UserConfigurationView */
    margin-bottom: 1em; /* The space must be the same to the margin-bottom of .fieldsetContainer for synchronize*/
}

.fieldsetTitle2 {
    margin-top: 1em; /* The space must be the same to the margin-bottom of .fieldsetContainer for synchronize */
    margin-bottom: 0.1em; /* The space must be the same to the margin-bottom of .fieldsetTitle for synchronize */
}

.pageInnerBox {
    padding: 10px;
}

.pageInnerPanel {
    margin: 10px;
}

.pageInnerPanel2 {
    margin: 10px 10px 0px 10px;
}

/*Flexbox helper styles*/
.flexboxContainer {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}
.flexboxMainItem {
    flex-grow: 1;
}
.flexboxContainer > div:not(.flexboxMainItem) {
    flex-shrink: 0;
}

/*Generic link style*/
.linkInText {
    color: #476E9A;
    fill: #476E9A;
    font-size: 10.5pt;
}
.linkColor {
    color: #1788e2;
    fill: #1788e2;
}

/*Generic comment style*/
.comment, .textComment1 {
    color: #888;
    font-size: 10.5pt;
}

.normal {
    color: var(--color-black);
}

/*Generic header styles*/
.header1, h1 {
    font-size: 15pt;
}

.header2, h2 {
    font-size: 13pt;
}

.header3, h3 {
    font-size: 11.5pt;
}

/*Generic tab style*/
.textInverted {
    color: #F1F1F1;
}

/*Text on dark bg*/

/*Text to icon margins*/
.textIcon {
    margin-right: 3px;
}

.text9icon {
    margin-right: 5px;
}

.text10icon {
    margin-right: 6px;
}

.icon24text {
    margin-right: 6px;
}

.icon32text {
    margin-right: 8px;
}

/*Icon to icon margins*/
.iconToIcon24 {
    margin-left: 3px;
}

/*Colors*/
.red {
    color: var(--color-red);
}
.green-text {
    color: #10CC62;
}
.red-text {
    color: #D91C16;
}

.red .x-btn-inner { /*This is to enforce text color for buttons*/
    color: red;
}

.orange {
    color: orange;
}

.orange .x-btn-inner { /*This is to enforce text color for buttons*/
    color: orange;
}

.green {
    color: green;
}

.green .x-btn-inner { /*This is to enforce text color for buttons*/
    color: green;
}

.white {
    color: white;
}

.white .x-btn-inner { /*This is to enforce text color for buttons*/
    color: white;
}

.gray {
    color: #888;
}

.bgWhite {
    background: white;
}

.bgForceNone {
    background-color: transparent !important;
}

.transparentMask .x-mask {
    background: none;
}

/*Storage colors*/
.colorStorageOk {
    background-color: var(--color-blue-17);
}

.colorStorageWarn {
    background-color: var(--color-yellow-2);
}

.colorStorageError {
    background-color: var(--color-red-4);
}

/*Alarm colors*/
.colorAlarmOk {
    background-color: #009DD3;
}

.colorAlarmWarn {
    background-color: #dbba00;
}

.colorAlarmError {
    background-color: #ab2222;
}

.colorAlarmDisabled {
    background-color: #d2d2d2;
}

/*Fonts*/
.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.centered {
    text-align: center;
}

.right {
    text-align: right;
}

/*Generic icons*/
.iconQue16 { width: 16px; min-width: 16px; height: 16px; background: url(../img/views/icons-sprite-fl.svg#icon_hint) no-repeat}
.lvFieldContainer .iconHint {
    width: 14px; min-width: 14px; height: 14px;
    background: url(../img/views/icons-sprite-fl.svg#icon_hint_new) no-repeat;
    position: absolute;
    right: -20px;
    top: 14px;
}

.iconEmpty24 {
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: transparent 0 0 no-repeat;
}

.iconOk24 {
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-check) 0 0 no-repeat;
}

.iconAdd24,
.iconDelete24,
.iconStart24,
.iconEdit24,
.iconStop24,
.iconGear24,
.iconInfo24,
.iconEditBtn24,
.iconDeleteBtn24,
.iconAddBtn24,
.iconQue24,
.iconWarn24,
.iconErr24 {
    width: 24px;
    min-width: 24px;
    height: 24px;
}
.iconAdd32,
.iconDelete32,
.iconStart32,
.iconEdit32,
.iconStop32,
.iconWarn32,
.iconQuest32,
.iconInfo32,
.iconErr32 {
    width: 32px;
    min-width: 32px;
    height: 32px;
    background-position: 4px 4px;
}

.iconEditBtn16 {
    width: 16px;
    min-width: 16px;
    height: 16px;
}

.iconDeleteBtn11 {
    width: 11px;
    min-width: 11px;
    height: 11px;
}

.iconAdd24,
.iconAdd32,
.iconAddBtn24 {
    background-image: url(/img/ctrl/generic/generic-icons.svg#icon-add);
    background-repeat: no-repeat;
}

.iconDelete24,
.iconDelete32,
.iconDeleteBtn24 {
    background-image: url(/img/ctrl/generic/generic-icons.svg#icon-delete);
    background-repeat: no-repeat;
}

.iconDeleteBtn11 {
    background-image: url(/img/ctrl/generic/generic-icons.svg#icon-delete-11);
    background-repeat: no-repeat;
}

.iconStart24,
.iconStart32,
.mtIconActivate {
    background-image: url(/img/ctrl/generic/generic-icons.svg#icon-start);
    background-repeat: no-repeat;
}

.iconEdit24,
.iconEdit32,
.iconEditBtn24 {
    background-image: url(/img/ctrl/generic/generic-icons.svg#icon-edit);
    background-repeat: no-repeat;
}
.iconEditBtn16 {
    background-image: url(/img/ctrl/generic/generic-icons.svg#icon-edit-16);
    background-repeat: no-repeat;
}

.iconStop24,
.iconStop32,
.mtIconDeactivate {
    background-image: url(/img/ctrl/generic/generic-icons.svg#icon-stop);
    background-repeat: no-repeat;
}

.iconWarn24,
.iconWarn32,
.mbIconWarn {
    background-image: url(/img/views/icons/icons-sprite-common.svg#icon-alert);
    background-repeat: no-repeat;
}

.iconGear24 {
    background: url(/img/ctrl/generic/generic-icons.svg#icon-setting) no-repeat;
}

.iconInfo24,
.iconInfo32 {
    background-image: url(/img/ctrl/generic/generic-icons.svg#icon-info);
    background-repeat: no-repeat;
}
.iconQue24,
.iconQuest32 {
    background-image: url(/img/ctrl/generic/generic-icons.svg#icon-help);
    background-repeat: no-repeat;
}

.iconErr24,
.iconErr32 {
    background-image: url(/img/ctrl/generic/generic-icons.svg#icon-error);
    background-repeat: no-repeat;
}

/*------------------------------*/
.iconRunning24 {
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: url(/img/ctrl/generic/running24.gif) 0px 0px;
}

.iconSpinner24 {
    width: 24px;
    min-width: 24px;
    height: 24px;
    background-image: url(/img/views/icons/spinner-proceed.gif);
    background-size: contain;
    margin-bottom: 10px;
}

.triStateCheckSomeSelector {
    background: grey;
}

.iconRunning32 {
    width: 32px;
    min-width: 32px;
    height: 32px;
    background: url(/img/ctrl/generic/running32.gif) 0px 0px;
}

.iconCell16 {
    width: 16px;
    min-width: 16px;
}

/*Structural*/
.padding10 {
    padding: 10px;
}

.paddingLeft5 {
    padding-left: 5px;
}

.paddingLeft10 {
    padding-left: 10px;
}

.paddingRight10 {
    padding-right: 10px;
}

.paddingTop0 {
    padding-top: 0px !important;
}

.paddingTop10 {
    padding-top: 10px;
}

.paddingBottom0 {
    padding-bottom: 0px !important;
}

.paddingLeft16 {
    padding-left: 16px;
}

.paddingTop20 {
    padding-top: 20px;
}

.paddingLeft20 {
    padding-left: 20px;
}

.paddingLeft25 {
    padding-left: 25px;
}

.paddingLeft32 {
    padding-left: 32px;
}

.padding1em {
    padding: 1em;
}

.padding25 {
    padding: 25px;
}

.paddingTopBottom20{
    padding: 20px 0;
}

.paddingTopBottom15{
    padding-top: 15px;
    padding-bottom: 15px;
}

.paddingTopBottom5{
    padding: 5px 0;
}

.paddingTop15 {
    padding-top: 15px;
}

.margin10 {
    margin: 10px;
}

.margin15 {
    margin: 15px;
}

.margin25 {
    margin: 25px;
}

.margin10 {
    margin: 10px;
}

.margin1em {
    margin: 1em;
}
.marginTop3 {
    margin-top: 3px !important;
}

.marginTop5 {
    margin-top: 5px !important;
}

.marginTop10 {
    margin-top: 10px !important;
}

.marginTop20 {
    margin-top: 20px!important;
}

.marginTop25 {
    margin-top: 25px!important;
}

.marginTop40 {
    margin-top: 40px!important;
}

.marginBottom10 {
    margin-bottom: 10px;
}

.marginBottom15 {
    margin-bottom: 15px;
}

.marginBottom1em {
    margin-bottom: 1em;
}

.marginLeft0 {
    margin-left: 0px !important;
}

.marginLeft5 {
    margin-left: 5px;
}

.marginRight5 {
    margin-right: 5px;
}

.marginBottom5 {
    margin-bottom: 5px;
}

.marginLeft6 {
    margin-left: 6px;
}

.marginLeft10 {
    margin-left: 10px;
}

.marginLeft15 {
    margin-left: 15px;
}

.marginBottom20 {
    margin-bottom: 20px;
}

.marginBottom25 {
    margin-bottom: 25px;
}

.marginBottom30 {
    margin-bottom: 30px;
}

.marginLeft30 {
    margin-left: 30px;
}

.marginRight10 {
    margin-right: 10px !important;
}

.height100Percent {
    height: 100%;
}

/*Global checkbox for grids*/
.globalCheckbox .x-form-checkbox {
    vertical-align: 0px !important; /*Override fix for the 10.5pt font*/
}

/*Proper horizontal scroll support for tree view*/
.treeViewScroll table {
    width: auto !important; /*This is to fight with fixed width ExtJS is assigning to the tree's inner table*/
}

.treeViewScroll .x-grid-dirty-cell {
    background-image: none;
}

/*Force the tree view to use auto height, instead of calling doLayout in the InventoryView's reloadNode function*/
.treeViewAutoHeight {
    height: auto !important;
}
.treeViewAllowExternalScroll {
    width: 100% !important;
    height: 100% !important;
}
.treeViewAllowExternalScroll .x-panel-body {
    overflow: visible !important;
}

/*Common styles for popup with help and date picker*/
.popupHelp {
    margin: 0 auto 1em auto;
}

.popupPicker {
    margin: 0 auto 0 auto;
}

.popupPicker.x-datepicker {
    border: 0 !important;
}

.popupPicker .x-datepicker-header {
    background: transparent none !important;
}

.popupPicker .x-datepicker-month .x-btn {
    width: 100%;
    height: auto;
}

.popupPicker .x-datepicker-month .x-btn .x-btn-split-right {
    padding-right: 0 !important;
}

.popupPicker .x-datepicker-month span {
    color: #333 !important;
}

.popupPicker .x-datepicker-inner tbody td a {
    display: flex;
    align-items: center;
    height: 23px;
    padding-right: 3px;
}

.popupPicker .x-datepicker-inner tbody td em {
    width: 100%;
}

.popupPicker .x-monthpicker .x-monthpicker-buttons {
    background: white;
}

.popupPicker .x-monthpicker .x-monthpicker-buttons .x-btn {
    display: inline-block;
    height: auto;
}

/*1.2 LinkLabel*/
.llNorm {
    position: relative;
    cursor: pointer;
    font-family: tahoma, arial, verdana, sans-serif;
    text-decoration: none;
}

.llExpando {
    position: relative;
    cursor: pointer;
    padding-left: 14px; /*For the arrows*/
}

.llMenuPad {
    padding-right: 12px;
}

.llMenu {
    position: absolute;
    right: 0;
    top: 45%;
    cursor: pointer;
}

.llClosed {
    background: transparent url(/img/ctrl/label-link/arrows.gif) -6px 1px no-repeat;
}

.llOpen {
    background: transparent url(/img/ctrl/label-link/arrows.gif) -5px -14px no-repeat;
}

.llNorm .x-mask {
    background: none;
}

.llNorm:hover {
    text-decoration: underline;
}

/*1.3 God Label*/
.glRoot {
    box-sizing: border-box;
    cursor: default;
    width: 100%;
}

.glRootClickable {
    box-sizing: border-box;
    cursor: pointer;
    width: 100%;
}

.glRootLink {
    box-sizing: border-box;
    cursor: pointer;
    width: 100%;
}


.glT1 {
    position: absolute;
    font-family: Arial, verdana, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.glRootLink:hover .glT1 {
    text-decoration: underline;
}

.policy-view .glT1 {
    width: 80% !important;
}

.glT2 {
    position: absolute;
    font-family: tahoma, arial, verdana, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.glT2:hover {
    overflow: visible; /*Show "ellipsis" text when mouse over*/
    background-color: white;
}

.glTR {
    position: absolute;
    right: 10px;
    font-family: tahoma, arial, verdana, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*1.4 Button with mark*/
.buttonWithMark {
    margin: 1px;
    padding-left: 5px;
}

.buttonWithMark .x-btn-inner {
    text-align: left;
}

/*1.5 Simple progress bar*/
.simplePb2 {
    border: 1px solid #d2d2d2;
    position: relative;
    display: inline-block;
    text-align: center;
    height: 100%;
    width: 100%;
}

.simplePb2ForH {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-top: 2px;
}

.simplePb2BackH {
    position: absolute;
    border-right: 0px solid #d2d2d2;
    height: 100%;
    left: 0;
}

.simplePb2ForV {
    position: absolute;
    top: 40%;
    width: 100%;
}

.simplePb2BackV {
    position: absolute;
    border-top: 0px solid #d2d2d2;
    width: 100%;
    bottom: 0;
}

/*1.6 Message box*/
.mbContent {
    background: white;
    overflow: auto;
    padding: 5px 5px 10px 5px;
}

.mbFooter {
    padding: 10px 0 5px 0;
}

.mbIcon {
    float: left;
    width: 32px;
    min-width: 32px;
    height: 32px;
}

.mbIconError {
    background: url(/img/ctrl/generic/generic-icons.svg#icon-error) no-repeat;
}

.mbIconConfirm {
    background: url(/img/ctrl/generic/generic-icons.svg#icon-help) no-repeat;
}

.mbIconInfo {
    background: url(/img/ctrl/generic/generic-icons.svg#icon-info) no-repeat;
}

.mbIconText {
    padding-left: 45px;
    padding-top: 1px;
    word-wrap: break-word;
}

/*1.7 Tree plugin for disabled nodes*/
.treeNodeDisabled .x-grid-cell {
    color: #888 !important;
}

.treeNodeCheckDisabled input {
    -moz-opacity: 0.5;
    opacity: .5;
    filter: alpha(opacity=50);
}

/*1.8 Tree column with tail icon for nodes*/
.treeNodeTailIcon {
    display: inline;
    float: none !important;
    vertical-align: middle;
    padding-left: 5px;
    padding-bottom: 2px;
}

/*1.10 Item selector*/
.isTrigger {
    width: 16px;
    min-width: 16px;
    height: 16px;
    right: 4px;
    background: url("/img/ctrl/item-selector/d.png") 0 0;
}

.isLink {
    box-sizing: border-box;
    cursor: pointer;
    width: 100%;
}

.isNoLink {
    box-sizing: border-box;
    width: 100%;
}

.trigger-form-item {
    right: 1px !important;
}

/*1.12 Expander list view*/
.elvHeader {
    padding-left: 21px;
    cursor: pointer;
}

.elvHeaderClosed {
    background: transparent url(/img/ctrl/expander-list/arrows.png) 0 0 no-repeat;
}

.elvHeaderOpened {
    background: transparent url(/img/ctrl/expander-list/arrows.png) 0 -16px no-repeat;
}

/*1.13 Current month view*/
.cmvMarkedCells {
    background: #e4ff78;
}

.cmvMarkedTodayCells {
    border: 1px solid darkred !important;
    background: #e4ff78;
}

/*1.16 List view*/
.lvEmpty {
    text-align: center;
}
.lvEmpty img {
    max-width: 100%;
}

.lvTransparentMask .x-mask {
    background: none;
}

/*1.17 Alarm box*/
.abMain {
    border: 1px solid #cccccc;
    border-radius: 8px;
    padding: 5px;
    background: white;
}

.abMainEmbedded {
    padding: 5px;
    background: #F8F8F8;
}

.abInner {
    width: 100%;
    height: 100%;
}

.abCol0 {
    width: 50px;
}

.abCol1 {
    padding: 3px;
}

.abCol2 {
    width: 30px;
}

.abIcon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    margin: auto;
    background: url(/img/views/icons/icons-sprite-common.svg#icon-alert) no-repeat 4px 4px;
}

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

.abTextFont {
    font-family: tahoma, arial, verdana, sans-serif;
}

.abCmt {
    margin: 4px 0 0 1px;
    word-wrap: break-word;
}

.abCmtFont {
    font-family: tahoma, arial, verdana, sans-serif;
}

.abClose {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: auto;
    background: url(/img/ctrl/alarm-box/cross.png) no-repeat;
    cursor: pointer;
}

/*1.18 Question mark*/
.qmMain {
    cursor: pointer;
    opacity: 0.7;
}

.qmMain:hover {
    opacity: 1;
}

.qmMainTt {
    padding: 8px 12px;
    line-height: 140%;
}

.qmMainTt.out-of-date-tooltip {
    font-size: var(--font-size-default);
    line-height: var(--line-height-default);
}

.qmUserNameAlign{
    margin-top: -10px !important;
}

.qmUNAlign{
    margin-top: -25px !important;
}

/*1.19 Multiple text fields*/
.mtfParent {
    position: relative;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}

.mtfLeft {
    left: 0;
    position: absolute;
    background: #e8e8e8;
    border-right: 1px solid #cccccc;
    padding: 0 5px 0 5px;
    height: 23px;
    line-height: 23px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mtfRight {
    left: 50%;
    position: absolute;
    margin: 0;
    height: 100%;
}

.mtfRight input {
    border: 0;
}

.mtfLastLine {
    border-bottom: 1px solid #cccccc;
}

/*1.20 Augmented button*/
.augbImg {
    vertical-align: middle;
}

.augbSpan {
    margin-left: 5px;
}

/*1.23 Steps box*/
.stepsBoxStatus {
    margin-top: 20px;
    margin-bottom: 20px;
    color: red;
}

.stepsBoxLeftCol {
    padding-right: 20px;
    padding-bottom: 5px;
}

.stepsBoxRightCol {
    vertical-align: text-top;
}

.stepsBoxCheck {
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-check);
}

/*1.24 Address Bar*/
.addressBar {
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}

.addressBarBox {
    display: inline-table;
    table-layout: fixed;
    height: 100%;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

.abNoNext .addressBarNextCell {
    display: none;
}

.abInactive {
    cursor: default;
}

.abActive {
    cursor: pointer;
}

.abActive:hover {
    border-left: var(--border-default);
    border-right: var(--border-default);
    background-color: #EFEFEF;
}

.abActive:hover .addressBarNextCell {
    border-left: var(--border-default);
}

.addressBarCell {
    display: table-cell;
    vertical-align: middle;
    width: 16px;

    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 200px;
}

.addressBarIcon {
    margin-left: 5px;
    margin-right: 5px;
}

.addressBarText {
    padding-right: 3px;
}

.addressBarNextCell {
    border-left: 1px solid transparent;
}

.addressBarNext {
    background: transparent url(/img/ctrl/generic/arrows24.png) 0 0 no-repeat;
    width: 24px;
    height: 24px;
}

/*1.25 List Menu*/
.listMenu {
    border: var(--border-default);
    background: white;
    box-sizing: border-box;
}

.lmItem {
    display: table;
    table-layout: fixed;
    border: 1px solid transparent;
    padding: 3px;
}

.lmiSel { /*Selectable item*/
    cursor: pointer;
}

.lmiSel:hover {
    border: var(--border-default);
    background-color: #EFEFEF;
}

.lmiIcon {
    width: 0px;
}

.lmiCell {
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*1.26 Help message with icon*/
.hmTable {
    table-layout: fixed;
}

.hmMain24 {
    padding: 4px 6px;
}

.hmMain32 {
    padding: 10px 20px 10px 15px;
}

.hmHelp {
    background: none repeat scroll 0 0 #fffae6;
    border: 1px solid #F0C36D;
}

.hmNormal {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.hmEmbedded {
    border-left: 0px !important;
    border-right: 0px !important;
    overflow: hidden;
}

.hmStandalone {
    border-radius: 5px;
    overflow: hidden;
}

.hmEmbedded .hmTable {
    /*This will force proper word-wrap*/
    width: 100%;
}

.hmIcon24 {
    vertical-align: top;
    width: 24px;
    height: 24px;
}

.hmIcon32 {
    vertical-align: top;
    width: 32px;
    height: 32px;
}

.hmText24 {
    padding-left: 12px;
    word-wrap: break-word;
}

.hmText32 {
    padding-left: 15px;
    word-wrap: break-word;
}

.hmError {
    background: rgba(255, 255, 255, 0.12);
    margin-bottom: 10px;
    border-radius: 8px;
    border: none;
    padding: 0;
}

.hmErrorHighlight {
    background: #FFF3F2;
    margin-bottom: 15px;
    border-radius: 8px;
    border:none;
    color: #D91C16;
}

.hmErrorMain {
    padding: 0;
}

.hmErrorIcon32 {
    width: 32px;
    padding: 14px;
}

.hmErrorQmIconWrp {
    vertical-align: top;
    width: 40px;
}

.hmErrorQmIconWrpHighLight {
    vertical-align: top;
    width: 32px;
}

.hmErrorQmIcon {
    cursor: pointer;
    opacity: 0.7;
    margin-top: 5px;
}

.hmErrorQmIconHighLight {
    cursor: pointer;
    margin-top: 18px;
}

.hmErrorQmTt {
    padding: 8px 12px;
    line-height: 140%;
}

/*1.27 Bar chart*/
.chartBar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chartBar .data-remain {
    flex-grow: 1;
}

.chartBarStripe {
    width: 100%;
}

/*1.28 Tooltip*/
.ttMain {
    overflow: visible;
}

.ttNormal {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

.ttHelp {
    box-shadow: 0 4px 16px rgba(107, 102, 140, 0.2);
    border: none;
    background: #ffffff;
    border-radius: 8px;
}



.ttInner {
    overflow: hidden;
    word-wrap: break-word;
    word-break: normal;
}

.ttTitle {
    padding: 0.75em 0em 0.75em 0.75em;
}

.ttAnchorBorder {
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
    z-index: 1;
}

.popupMenu .ttAnchorBorder {
    border-color: transparent transparent rgba(255, 255, 255)!important;
}

.ttAnchorFill {
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
    z-index: 1;
}

/*Also, force make the ExtJS QTip look the same*/
.x-tip {
    background: none repeat scroll 0 0 #F9EDBE !important;
    border: 1px solid #F0C36D !important;
    box-shadow: 0 2px 10px #F0C36D !important;
    /*height: auto !important;*/
    /*width: auto !important;*/
}

.x-tip-header, .x-tip-body, .x-form-invalid-tip-body {
    color: #222 !important;
}

/*Common styles for custom popup items*/
.ttButton {
    margin-left: 1em;
    margin-top: 0.8em;
    float: right;
}

.ttButton2 { /*HBOX layouts*/
    margin-left: 1em;
}

.ttButton3 { /*HBOX layouts*/
    margin-right: 1em;
}

.ttButton4 { /*CSS layouts*/
    margin-top: 0.8em;
}

.ttCustom {
    padding: 1em;
}

.ttList {
    margin-top: 1em;
}

.ttLeft0 {
    left: 0 !important;
}

/*Popup with 1em padding*/
.ttBody {
    padding: 1em;
}
/*Popup with button aligned right without set layout: HBOX_LEFT */
.ttToolbar {
    margin-top: 1em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/*Popup with 0 padding*/
.ttBodyPopup {
    padding: 0;
}

.ttToolbarPopup {
    margin: 1em;
}

.ttFormPopup {
    padding: 1em;
}

.ttComponentPopup {
    padding-left: 1em;
    padding-right: 1em;
}
.ttComponentPopupTop {
    padding-top: 1em;
}
.ttComponentPopupBottom {
    padding-bottom: 1em;
}

/*Generic popup widths*/
.ttBodyType1 {
    width: 500px;
    height: 300px;
}

/*1.29 SimpleLink*/
.slMain {
    cursor: pointer;
    position: relative;
    /*white-space: nowrap;*/
}
.slMain.unselectableText {
    cursor: auto;
}

.slMain.unselectableText .add-icon {
    cursor: auto;
}

.jobBoxStyle .slMain {
    cursor: default;
}
.jobBoxStyle .slActive {
    cursor: pointer;
}

.slIcon {
    display: inline-block;
    vertical-align: middle;
}

.slText {
    vertical-align: middle;
}

.slActive {
    color: #476E9A;
    cursor: pointer;
}

.slActive:hover {
    color: var(--color-blue-5);
    text-decoration: underline;
}

.slActive:active {
    color: var(--color-blue-5);
    text-decoration: underline;
}

.slActive:focus {
    background-color: #F2F8FF;
}

.slDdown {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background: url(/img/ctrl/label-link/sprites.png) 0 -16px no-repeat;
}

.slForceRed {
    color: red !important;
}

/*1.30 Dummy progress bar*/
.progressBar1 {
    width: 220px;
    height: 19px;
    background: url(/img/ctrl/progress/progress1.gif) 0 0 no-repeat;
}

.spinner1 {
    width: 16px;
    height: 16px;
    background: url(/img/ctrl/button/loading.gif) 0 0 no-repeat;
}

/*1.31 Grid checkbox*/
.gridCb {
    vertical-align: middle;
}

/*1.32 SimpleLabel*/
.sllMain {
    cursor: default;
}

.sllIcon {
    display: inline-block;
    vertical-align: middle;
}

.sllText {
    vertical-align: middle;
}

.sllMenu {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background: url(/img/ctrl/label-link/sprites.png) 0 -16px no-repeat;
}

/*1.33 Line progress bar*/
.lineProgressBar1 {
    height: 1px;
}

.lineProgressNormal {
    border-top: 1px solid #007299;
}

.lineProgressFail {
    border-top: 1px solid red;
}

/*1.34 ExpanderLabel*/
.stMain {
    width: 16px;
    height: 16px;
    background-image: url(/img/ctrl/label-link/sprites.png);
}

.stOpened {
    background-position: 0 -16px;
}

.stClosed {
    background-position: 0 -32px;
}

/*1.36 Grid link*/
/* TODO: maybe have the same when merging with Tape*/
.gridLinkIcon {
    float: left;
}

.gridLinkText {
    float: left;
    padding: 3px 0 0 5px;
    height: 24px;
}

.gridLinkText .linkInText {
    font-size: inherit;
}

/*1.35 Custom progress bar*/
.customProgress {
    border-radius: 8em;
    overflow: hidden;
    height: 8px;
    background-color: #E1EAF5;
}

.customProgress-text {
    overflow: hidden;
    position: absolute;
    padding: 0 5px;
    height: 8px;
    font-weight: bold;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    border-radius: 8em;
}

.customProgress-text-back {
    padding-top: 1px;
}

.customProgress-bar {
    height: 8px;
    overflow: hidden;
    position: absolute;
    border-radius: 8em;
    width: 0;
}

.customProgress-default {
    border-color: #8e8e8e;
}

.customProgress-default .customProgress-back {
    color: #5d5d5d;
}

.customProgress-default .customProgress-text {
    color: white;
}

.customProgress-default .customProgress-bar {
    background-color: #188EF5;
}

/*View switch bar*/
.tabSwitchMain:not(.noMargin) {
    margin-right: 16px;
}

.tabSwitchMainInner {
    border-bottom: 1px solid #d2d2d2;
    width: 100%;
}

.tabSwitchLink {
    display: inline-block;
    margin-right: 2em;
    border-bottom: 4px solid transparent;
}

.tabSwitchLinkAgent + .tabSwitchLinkAgent {
  margin-right: 0;
}

.tabSwitchLink:hover {
    border-bottom-color: #444;
    text-decoration: none;
}

.tabSwitchLinkActive {
    border-bottom-color: #444;
    color: #444;
    cursor: default;
}

/*Clock with hands view*/
.cwhMain {
    width: 129px;
    height: 150px;
    background: url("/img/ctrl/clock/clock2.png") no-repeat 0 25px;
    position: relative;
    box-sizing: border-box;
    margin-left: 55px;
}

.cwhClockDiv1 {
    text-align: center;
    font-weight: bold;
}

.cwhClockDiv2 {
    position: absolute;
    left: 0px;
    bottom: -1px;
    width: 127px;
    height: 127px;
}

.cwhClockDiv3 {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    font-weight: bold;
}

.cwhClockDiv2 div {
    position: absolute;
    bottom: 63px;
    left: 63px
}

.cwhClockDiv2 .hh {
    background: #586a72;
    width: 2px;
    height: 2px
}

.cwhClockDiv2 .mm {
    background: #586a72;
    width: 2px;
    height: 2px
}

.cwhClockDiv2 .ss {
    background: #586a72;
    width: 1px;
    height: 1px
}

/*Simple icon*/
.smplIconMain {
    display: table-cell;
    vertical-align: middle;
}

.smplIconIcon {
    margin-left: auto;
    margin-right: auto;
}

/*******************************************************************************/
/******************************* UI Controls end *******************************/
/*******************************************************************************/

/*Dashboard top view*/
.dashboardMain {
    background-size: cover;
    background-position: center center;
    overflow: auto;
    height: 100%;
}

/*Abstract dashboard*/
.dashboardBody {
    background-size: cover;
    background-position: center center;

    width: 100%;
    height: 100%;
    overflow: auto;
}

.dashboardBodyView {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/*Dashboard header*/
.dashboardNewHeader {
    width: 100%;
    height: 50px;
}

.dashboardNewHeaderBody {
    height: 100%;
    overflow: visible;
    white-space: nowrap;
}

.dashboardSpacer {
    float: right;
}

/*Header toolbar area*/
.dashboardHeaderIcons {
    float: right;
    height: 100%;
    display: table;
}

.dashboardHeaderIcon {
    display: table-cell;
    padding: 9px 5px 0 5px;
    position: relative;
}

.dashboardHeaderText {
    display: table-cell;
    vertical-align: middle;
    color: white;
    font-size: 13.5pt;
    position: relative;
    padding: 0 5px 0 5px;
}

.dashboardHeaderActivityText {
    left: 29px;
    position: absolute;
    top: 26px;
    color: white;
    background-color: #00a671;
    border-radius: 3px;
    padding: 0px 2px;
    font-size: 12px;
}

.dashboardHeaderTextActive {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid;
    bottom: 0;
    /*Center horizontally*/
    left: 50%;
    margin-left: -10px;
}

.dashboardHeaderIconActive {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid;
    left: 34%;
    bottom: 0;
}

.dashboardHeaderActiveDark {
    border-bottom-color: #494949;
}

.dashboardHeaderActiveLight {
    border-bottom-color: white;
}

/*Header product logo*/
.dashboardProductLogo {
    width: 40px;
    height: 40px;
}

/*Dashboard notification area*/
.dashboardNotification {
    float: right;
    height: 100%;
    display: table;
}

.dashboardNotificationInner {
    display: table-cell;
    vertical-align: middle;
    padding-right: 10px;
}

.dashboardNotificationLink {
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    background-color: white;
}

/*----------------/Disable class----------------------*/

.dashboardPqlPopupText {
    width: 200px;
}

.dashboardNewFooterBody {
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: table;
}

.dashboardNewFooterArea {
    display: table-cell;
    width: 33%;
    vertical-align: middle;
    padding: 5px;
    color: white;
}

.localeStyle {
    left: 30px !important;
    z-index: 1;
}

.localeIcon {
    width: 20px;
    height: 20px;
    background: url(/img/views/icons/footer/icon-locale.svg) no-repeat; /* Replace with the path to your SVG icon */
    background-size: cover;
}

.locale-combobox input {
    padding-left: 36px !important;
}


.locale-combobox .x-form-text {
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
    line-height: 36px;
    width: 100% !important;
    text-overflow: ellipsis;
    word-break: break-word;
    text-align: left;
    padding: 0 36px;
}

.locale-combobox .x-form-text:hover {
    border-color: #98B1CC;
}

.locale-combobox .x-form-focus {
    text-align: left !important;
    padding: 0 36px !important;
}

.beta {
    display: inline-block;
    background-color: #F0F5FA;
    color: #50759F;
    font-size: 0.8em;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 8px;
    border: 1px solid #98B1CC;
    margin-left: 6px;
    line-height: 1;
    vertical-align: middle;
}

.dashboardNewFooterArea .linkInText {
    color: white;
}

/*Dashboard body area: multiple tabs case*/
.dashboardCenterCard1 {
    display: table-row;
    height: 100%;
}

.dashboardCenterCard2 {
    height: 100%;
    padding: 1em;
}

/*Dashboard body area: no tabs case*/
.dashboardCenter {
    background-color: transparent;
    display: flex;
    flex-direction: column;
}

.dashboardCenterTenantBar {
    height: calc(100% - 40px/*footer*/ - 50px/*header*/ - 31px /*tenant bar*/);
    border-right: 1px solid #D2D2D2;
    border-left: 1px solid #D2D2D2;
}

/*Job dashboard empty group view */
.egvInner {
    padding-top: 100px;
    text-align: center;
}

.egvButton {
    display: inline-block;
    margin-top: 1em;
}

/*3.0 Navigation panel and its children*/
.navigationView {
    background-color: white;
}

/*3.1 Inventory view*/
.inventoryView {
    border: 0 !important;
}

.iconJobHome24 {
    width: 32px;
    height: 32px;
    background-image: none;
    background-color: #476E9A;
    -webkit-mask: url(/img/views/icons-sprite-fl.svg#jobsHome) no-repeat 0 0;
    mask: url(/img/views/icons-sprite-fl.svg#jobsHome) no-repeat 0 0;
}
.x-grid-row-selected .iconJobHome24 {
    background-color: var(--color-blue-5);
}

.iconSp24 {
    width: 24px;
    height: 24px;
    background-image: url(/img/ctrl/generic/generic-icons.svg#recovery-point);
}

.iconPma24 {
    width: 24px;
    height: 24px;
    background-image: url(/img/entity/pma24.png);
}

.icon24_0 {
    background-position: 0px 0px;
}
.icon24_1 {
    background-position: 0px -24px;
}
.icon24_2 {
    background-position: 0px -48px;
}
.icon24_3 {
    background-position: 0px -72px;
}
.icon24_4 {
    background-position: 0px -96px;
}
.icon24_5 {
    background-position: 0px -120px;
}
.icon24_6 {
    background-position: 0px -144px;
}
.icon24_7 {
    background-position: 0px -168px;
}

.icon32_0 {
    background-position: 0px 0px;
}

.icon32_1 {
    background-position: 0px -32px;
}

.icon32_2 {
    background-position: 0px -64px;
}

.iconEntityPlaceholder24 {
    background-image: url(/img/entity/placeholder24.png);
}

/*Search view*/
.searchControl.searchControlBig {
    height: 32px;
}
.searchControl.searchControlNormal, .searchControl.searchControlSmall {
    height: 26px;
}

.searchControl input:not(.x-form-invalid-field) {
    background: none;
    border: none;
    display: inline-block;
}

.searchControl input:placeholder-shown {
    font-style:italic;
}

.searchControlBig input {
    height: 30px !important;
}
.searchControlNormal input {
    height: 24px !important;
}
.searchControlSmall input {
    height: 24px !important;
}

.searchTrigger {
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: 0.7;
}

.searchControlBig .searchTrigger {
    margin-right: 5px;
    margin-top: 4px;
}

.searchTrigger:hover {
    opacity: 1;
}

/*4.0 UI Dialog Controls*/
/*4.2 Editor control*/
.edMain {
    padding: 0 20px 20px;
    background-color: white;
    display: flex;
    flex-direction: column;
}

.tenantWizardEditor.edMain {
    padding: 0 20px 20px;
}

.edMainForStatic {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}

.edMainForStaticHeight {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}

.edTitle {
    text-align: center;
    background-color: #e7ebf1;
    margin: 0 -20px;
    padding-bottom: 20px;
}

.edTitleIcon {
    margin-right: 7px;
    display: inline-block;
    vertical-align: middle;
}

.edTitleText {
    display: inline-block;
    vertical-align: middle;
}

.edStepTabs {
    margin-bottom: 0;
}

.edFooterGlobal {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 0;
    padding: 20px 0 0;
}

.edStepAutoHeight {
    flex-grow: 1;
}

.edStepContainer {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

.edStepContainer .simple-label,
.policy-view .simple-label {
    white-space: normal;
}

.directory-setting-step {
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
}

/*6.0 Login view*/
.loginView {
    background-size: cover;
    background-position: center center;
}

.lvInner {
    border: 1px solid gray;
    background: white;
    border-radius: 8px;
    padding-top: 25px;
    padding-bottom: 18px;
}

.lvSidePaddings {
    margin-left: 2em;
    margin-right: 2em;
}

.lvSideMargins {
    margin-left: 2em;
    margin-right: 2em;
}

.lvSpacer5 {
    height: 5px;
}

.lvSpacer10 {
    height: 10px;
}

.lvSpacer20 {
    height: 20px;
}

.lvSpacer30 {
    height: 30px;
}

.lvFieldContainer {
    padding: 15px 25px 10px 25px;
    margin-bottom: 15px;
}

.lvProductName {
    height: 40px;
    padding-left: 25px;
    padding-right: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lvNote {
    margin-bottom: 20px;
}

.lvVerifyFailBox {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.lvAcceptLicense {
    padding: 10px 20px 10px 15px;
    background: none repeat scroll 0 0 #F9EDBE;
    border-top: 1px solid #F0C36D;
    border-bottom: 1px solid #F0C36D;
}

/*Job Settings portlet*/
.jvgsItem {
    margin-bottom: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}
.jobOptionPopup {
    top: 25% !important;
}

/*General Info panel*/
.jvgiMain {
    padding: 7px 10px 6px 10px;
}

.jvgiItem {
    margin-bottom: 2px;
    margin-top: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

.jvgiPb {
    margin-left: 8px;
    height: 24px;
    width: 120px;
    vertical-align: baseline;
}

/*Job item info*/
.jobInfoPopup {
    width: 400px;
}

/*Common classes for item info tooltip*/
.itemInfoTtPropertyDefault,
.itemInfoTtPropertyTape
{
    width: 131px;
}

.itemInfoTtPropertyName {
    width: 95px;
}

.itemDynamicInfo {
    visibility: hidden;
}

.itemInfoTtLineNonColor:first-child .itemDynamicInfo {
    visibility: visible;
}

.itemInfoTtPropertyIcon24 {
    width: 32px;
}

.itemInfoTtValue .scrollable {
    max-height: 150px;
    overflow-y: auto;
}

.itemInfoTtCell {
    display: table-cell;
}

.itemInfoTtPreviewImageContainerInner {
    position: absolute;
    right: 20px;
    width: 80px;
}

.itemInfoTtPreviewImage {
    width: 80px;
}

.itemInfoTtContentHalf {
    display: table;
    width: 55%;
    margin-bottom: 5px;
}

.itemInfoTtLine:nth-child(even) {
    background-color: #F8F8F8;
}

.itemInfoTtLineBackgroundColor {
    background-color: #F8F8F8;
}

/*JobObjects portlet*/
.jvjoItem {
    margin-bottom:  10px;
    display: block;
}

.jvjoTransportModes {
    float: right;
    width: 155px;
    text-align: right;
    color: #888;
    padding-right: 5px;
}

.jvjoPb {
    height: 24px;
    width: 80px;
}

/*Transporters portlet*/
.jvthItem {
    margin: 5px 10px 0px 10px;
    height: 24px; /*To prevent height changes when chart is shown*/
    display: block;
}

.jvthMiniChart {
    width: 16px;
    height: 19px;
    margin-left: 10px;
    float: right;
    border-radius: 4px;
    border: 1px solid #188EF5;
}

/*Storages portlet*/
.jvstItem {
    margin: 5px 10px 0px 10px;
    display: block;
    height: 24px;
}

.jvstMiniChart {
    width: 16px;
    height: 20px;
    margin-left: 10px;
    float: right;
    border-radius: var(--size-xxs);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}

.jvstMiniChart.colorStorageOk {
    background-color: transparent;
    border-color: var(--color-blue-7);
}

.jvstMiniChart.colorStorageWarn {
    background-color: transparent;
    border-color: var(--color-yellow);
}

.jvstMiniChart.colorStorageError {
    background-color: transparent;
    border-color: var(--color-red);
}

/*Dashboard actions*/

/*Run Job popup*/
.jobRunPopupTb {
    margin-top: 1em;
}

/*Job/group rename popup*/
/*13.0 Configuration tab*/
.configurationIgnorePanelBorders {
    box-sizing: content-box;
}

.configurationTabSelectorInner {
    height: 45px;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: bottom;
    display: table-cell;
}
.configurationTabPages {
    height: 100%;
}

.configurationTabPage {
    height: 100%;
    width: 100%;
}

.wizardMode .configurationTabPage,
.wizardModeFF .configurationTabPage {
    height: calc(100% - 80px);
}

.wizardMode.pageEdit .configurationTabPage ,
.wizardModeFF.pageEdit .configurationTabPage{
    height: 100%;
}
/*TODO Kieu handle show scrollbar when transporter note is long, will be refactor late*/

.configurationTabPages .isvMain {
    padding: 0.3em 2em;
    height: 100%;
}
.info-screen {
    overflow-y:auto;
    height: calc(100% - 50px);
}
/*end TODO Kieu handle show scrollbar when transporter note is long, will be refactor late*/
/* Configuration->General view*/
.gilMain {
    width: 200px;
}

/* Configuration->Inventory view*/
.diEmptyListView {
    margin-left: 41%;
    position: absolute;
    top: 50% !important;
}

/* Configuration->Inventory view*/
.diDetailsCmp {
    margin-bottom: 5px;
    position: relative;
}
.diDetailsCmpProp {
    width: 150px;
}
.diDetailsCmpValue {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Configuration->Transporters view*/
.rnAdvancedOptionsHeader {
    width: 530px;
}
.addTransporterViewCheckBox {
    top: 0px !important;
}

/*14.0 About box*/
.aboutBox {
    background-color: white;
    padding: 1em;
}

.aboutStr1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 0.7em;
}

.aboutStr2 {
    margin-bottom: 0.7em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.aboutUpdateLine {
    margin-top: 1em;
    margin-bottom: 0.5em;
}
.aboutPoweredLine {
    margin-top: 1em;
}
.aboutDownloadLink {
    margin-left: 1em;
}

.aboutTable {
    display: flex;
    flex-flow: row wrap;
}
.aboutTable div {
    margin-top: 0.5em;
}
.aboutTable div:nth-of-type(odd) {
    width: 200px;
}
.aboutTable div:nth-of-type(even) {
    flex-basis: calc(100% - 200px);
}

/*15.0 Savepoint list+dropdown view*/
.spDropdownView {
    background: white;
    padding: 1px;
    border: var(--border-default);
}

.spItemView {
    border: var(--border-default);
    margin-bottom: 2px;
    padding: 2px;
    position: relative;
}

.spListView2 {
    width: auto !important;
}

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

/*16.0 Job alarm list view*/
/*Header*/
.alHeaderView {
    line-height: 23px;
    height: 25px;

    cursor: pointer;
}

.alhArrow {
    float: left;
    margin: 5px 2px 0 5px;
    width: 16px;
    height: 16px;
    background: url(/img/views/alarms/arrows.png) no-repeat;
    cursor: pointer;
}

.alhIcon {
    float: left;
    margin: 4px 2px 0 2px;
    width: 16px;
    height: 16px;
    background: url(/img/views/icons/icons-sprite-common.svg#icon-alert) no-repeat 0 0;
    background-size: cover;
}

/* TODO [Tuan Truong] to be replaced?*/
.colorAlarmDisabled .alsbIcon {
    background-image: url(/img/views/icons-sprite.svg#jobAlarmDisabled);
    zoom: 1.02;
}

.alhContent {
    float: left;
    margin-left: 5px;
    color: white;
}

.colorAlarmError .alsbContent {
    color: white;
}

.colorAlarmDisabled .alsbContent,
.colorAlarmWarn .alsbContent,
.colorAlarmOk .alsbContent {
    color: var(--color-black);
}

.alhDismiss {
    margin-right: 8px;
    color: white;
}


.alHeaderPopup {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: inherit;
}

.alSearchCtnHeaderPopup {
    width: 335px; margin-left: auto;
}

.alSearchFieldHeaderPopup {
    margin: 1px 10px 1px 0;
    border-radius: 8px;
}

/*Content*/
.alContentView {
    padding: 0px;
}

/*Alarm item*/
.aliItemView:hover {
    background-color: #EFEFEF;
}

.aliItemViewPopup {
    padding: 5px 0;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}

.aliItemViewPopup:hover {
    background-color: #EFEFEF;
    border-top: var(--border-default);
    border-bottom: var(--border-default);
}

.aliItemViewPopup.aliItemViewFirst:hover {
    border-top: 1px solid #EFEFEF;
}

.aliSummaryPopup {
    padding: 10px 0;
}

.aliCol0 {
    padding: 1px;
    cursor: default;
    background: #F8F8F8;
    vertical-align: middle;
    width: 42px;
}

.aliItemView:hover .aliCol0 {
    background-color: #EFEFEF;
}

.aliSummary .aliCol0 {
    display: none;
}

.aliCol0Popup {
    padding: 1px;
    cursor: default;
    background: #FFF;
    vertical-align: middle;
    width: 42px;
}

.aliItemViewPopup:hover .aliCol0Popup {
    background-color: #EFEFEF;
}

.aliSummaryPopup .aliCol0 {
    display: none;
}

.aliSummaryPopup .aliCol0Popup {
    display: none;
}

.aliAlarm .aliIcon1 {
    margin: 0px 0 0 7px;
    width: 32px;
    height: 32px;
    background: url(/img/views/icons/icons-sprite-common.svg#icon-alert) no-repeat 4px 4px;
}

.aliAlarm .aliIcon1.icon32_1 {
    background-image: url(/img/ctrl/generic/generic-icons.svg#icon-error);
}

.aliCol1 {
    text-align: center;
    padding: 1px;
    cursor: default;
    width: 130px;
    background: #F8F8F8;
    vertical-align: middle;
}

.aliItemView:hover .aliCol1 {
    background-color: #EFEFEF;
}

.aliCol2 {
    padding: 3px;
    /*width: 70%;*/
}

.aliSummary .aliIcon2 {
    margin: 0px 2px 0 6px;
    width: 32px;
    height: 32px;
}

.aliSummaryPopup .aliIcon2 {
    margin: 0px 2px 0 6px;
    width: 32px;
    height: 32px;
}

.aliAlarm .aliIcon2 {
    display: none;
}

.aliSummary .aliContent1 {
    float: left;
    margin-left: 5px;

    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aliSummaryPopup .aliContent1 {
    float: left;
    margin-left: 5px;
}

.aliAlarm .aliContent1 {
    margin-left: 5px;
    word-wrap: break-word;
    word-break: break-word;
}

.aliSummary .aliContent2 {
    float: left;
    margin-left: 5px;
}

.aliSummaryPopup .aliContent2 {
    float: left;
    margin-left: 5px;
}

.aliAlarm .aliContent2 {
    margin-left: 5px;
    word-wrap: break-word;
}

.aliAlarm .aliScheduleName {
    margin-left: 5px;
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aliScheduleNameCol {
    text-align: center;
    width: 140px;
    padding: 0 10px;
}

.aliDismiss {
    text-align: center;
    visibility: hidden;
    width: 8%;
}

.aliDismissAndDateSummaryPopup {
    text-align: right;
    width: 170px;
    padding: 0 10px;
}

.aliDismissAndDatePopup {
    text-align: right;
    width: 170px;
    padding: 0 10px;
}

.aliDismissPopup {
    display: none;
    text-align: right;
}

.aliItemView:hover .aliDismiss {
    visibility: visible;
}

.aliItemViewPopup:hover .aliDismissPopup {
    display: block;
}

.aliItemViewPopup:hover .aliDatePopup {
    display: none;
}

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

/*update style for alarm List InfiniteView Table */
.aliSummaryPopup .aliItemTable .aliCol2 {
    display: flex;
    align-items: center;
}

/*Footer*/
.alFooterView {
    height: 25px;
}

.alFooterView div {
    line-height: 25px;
}

.alfLeft {
    float: left;
    margin-left: 10px;
}

.alfRight {
    float: right;
    margin-right: 10px;
}

.alfCurrent {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/*Configuration area event list*/
.eventDetailView {
    height: 100%;
}

.configurationEventHeader {
    padding: 0 20px 20px 20px;
}
.configurationEventItem {
    width: 100%;
    display: table;
    table-layout: fixed;
}
.configurationEventItemTitle {
    word-wrap: break-word;
    word-break: break-all;
}
.configurationEventItemLeft {
    display: table-cell;
    padding: 7px;
    border-right: var(--border-default);
    border-bottom: var(--border-default);
    text-overflow: ellipsis;
    overflow: hidden;
}
.configurationEventItemRight {
    display: table-cell;
    padding: 5px;
    border-bottom: var(--border-default);
    border-right: var(--border-default);
    vertical-align: middle;
    width: 172px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.configurationEventItemRight.middleColumn {
    text-align: left;
    border-right: var(--border-default);
}

.configurationEventItemProgress {
    width: 120px;
    display: block;
}

.eventSearchFilter {
    margin-left: 1em;
    float: left;
}

.eventPortletSearchField {
    background-color: white;
    left: 2px !important;
}

.simplePBContainer {
    display: flex;
    align-items: center;
    height: inherit;
}

.simplePBContainer .simplePbV2 {
    height: 8px;
    background: #E1EAF5;
    border-radius: 8em;
    margin-left: 0.5em;
    overflow: hidden;
    position: relative;
}
.simplePBContainer .simplePbV2BackH {
    border-radius: 8em;
    position: absolute;
    height: 100%;
    left: 0;
}

.simplePBContainer .simplePbV2ForH {
    margin: 0;
}

/*Shared event list view*/
.evlvBox {
    /*Next 2 lines are to force "no events" msg to be on the vertical center*/
    height: 100%;
    position: relative;
}

.evlvItem {
    width: 100%;
    display: table;
    table-layout: fixed;
}

.evlvItemLTitle {
    word-wrap: break-word;
    word-break: break-all;
}

.evlvItemL {
    display: table-cell;
    padding: 5px;
    border-right: var(--border-default);
    text-overflow: ellipsis;
    overflow: hidden;
}

.evlvItemR {
    display: table-cell;
    padding: 5px;
    width: 70px;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
}

.evlvItemM {
    display: table-cell;
    padding: 15px 10px;
    width: 90px;
    text-align: center;
    white-space: normal;
    border-right: var(--border-default);
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
}

.evlvPb {
    width: 100px;
    height: 1.5em;
    margin-left: 0.5em;
    vertical-align: baseline;
}

/*FLR tree view*/
.flr1 {
    width: 100%;
}

.flrTreeView {
    border: 0 !important;
}

.flrTreeBody {
    padding-top: 5px;
}
.flrTreeBody .x-grid-table {
    width: auto !important;
}

.flrTreeBody .x-grid-row .x-grid-cell-inner img.x-tree-icon {
    margin-right: 5px;
}

.flrDelBtn {
    width: 24px;
    height: 24px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-delete) no-repeat;
}

.olrExCtPhoto {
    height: 200px;
    background: url(/img/views/flr/olr-exchange-default-user-photo-128x128.png) center no-repeat;
    background-size: contain;
    border: var(--border-default);
}

.olrExUnknown {
    width: 24px;
    height: 24px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-help) no-repeat;
}

/*MS AD types*/
.olrMsAdDomainController24 {
    width: 24px;
    height: 24px;
    background: url(/img/views/icons/icon-new/olr-msad-icon.svg#msad-domain) no-repeat;
}

/*FLR item*/
.flrsgRow .flrDelBtn {
    visibility: hidden;
    vertical-align: top;
}

.flrsgRow:hover .flrDelBtn {
    visibility: visible;
}

/*OLR selected item*/

.olrSelectionView .olrItem .olrColModified,
.olrSelectionView .olrItem .olrColSize,
.flrSelectionView .flrsgRow .flrColModified,
.olrSelectionView .flrsgRow .flrColSize {
    text-align: -webkit-left;
    text-align: -moz-left;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
}
.olrItem {
    width: 100%;
    table-layout: fixed;
    height: 49px;
}

.olrItem .olrColNameA,
.olrItem .olrColDesc{
    -webkit-user-select: all !important;  /* Chrome 49+ */
    -moz-user-select: all !important;     /* Firefox 43+ */
    -ms-user-select: all !important;      /* No support yet */
    user-select: all !important;          /* Likely future */
}

.olrColIcon {
    width: 30px;
    padding: 3px 0 3px 0;
    vertical-align: middle;
}

.olrColNameA {
    padding: 0 3px 0 0;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.olrColNameB {
    padding: 0 3px 0 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.olrColPath {
    width: 275px;
    padding: 3px 6px;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.olrColSize {
    width: 100px;
    padding: 3px 6px;
    vertical-align: middle;
    white-space: nowrap;
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
}

.olrColModified {
    width: 280px;
    padding: 3px 6px;
    vertical-align: middle;
    white-space: nowrap;
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
}

.olrColDesc {
    padding: 0 3px 0 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    overflow: hidden;
}

.olrColDate {
    width: 170px;
    padding: 2px 3px 0 0;
    vertical-align: middle;
    text-align: right;
}
.olrColDateTime {
    width: 250px;
    padding: 2px 3px 0 0;
    vertical-align: middle;
    text-align: right;
}

.olrColFlags {
    width: 170px;
    text-align: right;
    vertical-align: middle;
    padding-bottom: 2px;
}

.olrColAction {
    width: 25px;
    text-align: center;
}

.olrItem .flrDelBtn {
    visibility: hidden;
}

.olrItem:hover .flrDelBtn {
    visibility: visible;
}

.olrFlag {
    margin-left: 3px;
}

/*FLR items grid*/
.flrGridContainer * {
    cursor: pointer;
}

.flrNoRightBorder,
.x-column-header-last {
    border-right: none;
}

.flrGridCb {
    vertical-align: middle;
}

.flrGridIcon {
    margin-right: 6px;
}

.flrGridFlagIcon {
    margin-left: 3px;
}

.x-grid-row-over .olrGridPreviewItem {
    display: block;
}

/*Row actions*/
.x-grid-tree-loading .x-tree-icon {
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.x-grid-row-over .flrGridPreviewItem {
    display: block;
}

.flrGridContainer.x-grid-row-over .x-grid-cell-last .x-grid-cell-inner {
    padding-left: 0 !important;
}

.tenant-step-grid .x-grid-cell-last {
    border-right: none !important;
}

.tenantHelpBox {
    border-top: none;
}

/*FLR step 1*/

/*FLR step 2*/

.flrSelectedItemsTitle {
    margin: 5px 0 5px 5px;
}

.flrSpSites > .x-box-inner {
    width: 100%;
    height: 100%;
}

.flrProgressPage {
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    height: 100%;
    background: white;
}

.flrInnerPage {
    height: 100%;
    border-top: none !important; /*Wizard bar has border*/
}

.flrInnerPage .addressBarIcon {
    width: 32px;
    height: 24px;
    background-position: center;
}

.flrInnerPage .addressBarIcon[class*="iconMicrosoft365"] {
    background-position: 0 -4px;
}

.flrInnerPage .flrRoot24 {
    background: url(/img/views/icons/icon-new/common-icons.svg#backup-object) no-repeat -4px -4px;
    width: 24px;
    height: 24px;
}

.flrInnerPage .searchControlEmptyBorder {
    padding: 0;
    background-position-y: 7px;
}
.flrInnerPage .searchControlEmptyBorder input {
    height: 29px !important;
}

/*FLR error view*/
.flrErrorView {
    padding: 30px;
    background: white;
    overflow-y: auto;
}

.flrErrorViewTitle {
    margin-bottom: 10px;
}

.flrErrorViewText {
    max-width: 70%;
}

.flrErrorView ul {
    padding-left: 40px;
}

.flrErrorView li {
    list-style: disc;
    padding: 5px;
}

.flrErrorView .x-box-inner {
    overflow-y: auto;
}

/*24.0 Support popup view*/
.spvMain {
    background: white;
}

/*25.0 Inventory/Entities rendering*/
.inventoryNodeDropdownEmpty {
    padding: 10px;
}

.inventoryNodeDropdownEmpty .lvEmpty .text-empty {
    font-size: 14px;
}

.inventoryItemLine {
    margin: 5px 10px 0px 0px;
    display: block;
}



/*25.1 Backup object (full)*/
.boSpListEmpty {
    padding: 10px;
}

/*25.2 Storage dropdown*/
.stDropdownViewNote {
    padding: 1px;
    width: 95%;
    margin: 5px auto 5px;
    font-style: italic;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: auto!important;
}

.stDropdownViewNote > b {
    margin-right: 5px;
}

/*"Skip" item*/
.stDropdownViewStatic {
    display: table;
    cursor: pointer;
    width: 100%;
}

.stDropdownViewStatic:hover {
    background-color: #EFEFEF;
}

.stDropdownViewStaticInner {
    display: table-cell;
    vertical-align: middle;
    padding: 1em;
}

/*25.3 Storage item view */
.stItemView {
    position: relative;
}

.stItemViewNormal {
    padding: 10px;
}
.stItemViewBorder {
    border-bottom: var(--border-default);
}

.stItemViewBorder:first-child {
    border-top: var(--border-default);
}

.stItemViewChild {
    padding: 10px 10px 10px 35px;
    border-top: 1px dashed #CCCCCC;
}

.stItemViewDiv1 {
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.stItemViewDiv2 {
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stItemViewDiv3 {
    position: absolute;
    top: 4px;
    right: 2px;
    width: 30px;
    margin: 4px;
    height: 44px;
}

/*25.4 Generic Inventory Node (line)*/
.inLineMain {
    min-height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inLineTitle {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.inLineIcon {
    margin: 5px 5px 5px 6px;
    display: inline-block;
    vertical-align: middle;
}

.inLineIcon[type="checkbox"] {
    margin-right: 0;
}

.inLineName {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 35px);
}

.inLineDescription {
    margin-left: 35px;
}

.backupObjectDropdown .inLineTitle{
    display: flex;
    align-items: center;
}
.backupObjectDropdown .boItemBackupname {
    width: 44.5%;
}

.backupObjectDropdown .spItemViewBackup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 12px 16px;
}

/*25.5 Transporter host dropdown*/
.thDropdownView {
    padding: 5px;
}

/*"Auto" item*/
.thDropdownViewStatic {
    display: table;
    cursor: pointer;
    border: var(--border-default);
    margin-bottom: 5px;
    width: 100%;
}

.thDropdownViewStatic:hover {
    background-color: #EFEFEF;
}

.thDropdownViewStaticInner {
    display: table-cell;
    vertical-align: middle;
    padding: 1em;
}

/*26.0 Multitenancy editor view*/
.mtPageTitle {
    background: #f0f0f0;
    border: 1px solid #d2d2d2;
    padding: 10px 10px 10px 8px;
    height: 57px;
}

.mtPage {
    padding: 15px;
}

.mtIconNewTenant32 {
    width: 32px;
    height: 32px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-add) no-repeat 4px 4px;
}

/*27.0 New tenant view*/
.mtNewForm {
    padding: 20px;
}

.mtNewForm .x-form-text {
    padding: 1px 5px;
}

.mtNewLogoBox {
    float: right;
    margin: 20px;
    width: 140px;
}

.mtNewNowrap {
    white-space: nowrap;
}

/*28.0 Tenants view*/
.mtAlarms {
    margin: 0 0 10px 0;
}


.mtIconPhone {
    width: 24px;
    height: 24px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-phone) no-repeat;
}

.mtIconEmail {
    width: 24px;
    height: 24px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-email) no-repeat;
}

.mtIconUrl {
    width: 24px;
    height: 24px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-url) no-repeat;
}

.mtIconAddress {
    width: 24px;
    height: 24px;
    background: url(/img/views/settings/icons-tab/iconTape.svg#tape-location) no-repeat -4px -4px;
}

.mtIconActivate,
.mtIconDeactivate {
    width: 24px;
    height: 24px;

}

/*Alarm counter*/

.mttbAlarmTt {
    padding: 5px 5px 0 5px;
}

.mtTenantBox:hover .mttbText {
    visibility: visible;
}

/*30.0 Tenant filter view*/

.mtfAddLabel {
    margin-top: 8px;
}

/*Filter item*/
.mtfIcon {
    float: left;
    margin: 0 0 0 2px;
}

.mtfItemMinus {
    width: 24px;
    height: 24px;
    background: url(/img/ctrl/generic/minus24.png) 0px 0px no-repeat;
}

.mtfItemLabel {
    width: 24px;
    height: 24px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-tag) no-repeat;
}

.mtfTextNoIcon {
    margin-left: 5px;
}

.pessSelLabelView-hl1 {
    border-top: 2px solid #CCC !important;
}

.pessSelLabelView-hl2 {
    border-bottom: 3px solid #CCC !important;
}

.pessSelLabelView {
    box-sizing: border-box;
    border-bottom: var(--border-default);
    background: white;
}

/*32.0 Tenant preview*/
.mtpMain {
    border: 1px solid #d2d2d2;
    padding: 10px;
    display: table;
}

.mtpHeader {
    display: table-row;
    text-align: center;
    white-space: nowrap;
}

.mtpInner {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    padding-top: 0.2em;
}

.mtpLogo {
    margin: 0 auto 5px ;
}

.mtpName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 0 auto;
}

/*40.0 Event rendering*/
.eruTable {
    max-width: 600px;
}
.eruTable .ellipsis {
    width: calc(100% - 45px);
    margin: 0;
}

.eruIcon {
    float: left;
    margin-right: 3px;
}

.eruTt {
    padding: 5px;
}

.eruTdHeader {
    padding: 0px 5px 5px 5px;
}

.eruTd {
    padding: 5px;
    vertical-align: middle;
    max-width: 150px;
}

.eruTdHelp {
    padding: 5px 5px 0px 5px;
    text-align: center;
}

.eurVmName {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.eruErrorText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

/*41.0 Label picker*/
.lpMain label {
    margin-top: 2px;
}

.x-form-trigger-loader {
    background-image: url(/img/ctrl/generic/running24.gif);
    background-size: 100% 100%;
    background-position: 50% 50% !important;
}

.lpLabels {
    left: 0;
    padding: 5px 35px 5px 15px;
    overflow: hidden;
    position: absolute;
    top: 0;
    cursor: text;
}

.lpLabel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
    background: white;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 2px 5px;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
}

.lpLabelText {
    white-space: nowrap;
    overflow: hidden;
    max-width: 290px;
    text-overflow: ellipsis;
    box-shadow: none;
    background: none;
}

.lpLabelIcon {
    margin-left: 2px;
    cursor: pointer;
}

.lpLabelBeforeDelete {
    border-color: #0088CC;
}

.lpsMain {
    background: white;
    border: 1px solid #d2d2d2;
    overflow-y: auto;
    max-height: 200px;
}

.lpsSuggest {
    padding: 4px 8px 4px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.lpsCreate {
    padding: 4px 8px 4px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.lpsEmpty {
    padding: 4px 8px 4px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-style: italic;
}

.label-picker .lpField {
    display: block;
    overflow: hidden;
    padding: 2px 30px 2px 3px;
    resize: none;
    border: 1px solid #C3D3E6;
    box-sizing: border-box;
    border-radius: 8px;
    height: 36px;
    line-height: 30px;
    background: linear-gradient(rgb(247, 249, 252) 10.42%, rgb(255, 255, 255) 17.71%);
}

.label-picker .lpDdPicker {
    background-image: url(/img/views/icons/component/arrow-combo.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 12px;
    min-width: 12px;
    height: 8px;
    border: none;
    position: absolute;
    top: 14px;
    right: 14px;
}

/*43.0 Info screen view*/
.isvMain {
    overflow-y: auto;
    padding: 2em;
}

.infoScreenView {
    background-color: #fff;
    border-radius: 12px;
}

.isvMain h2:before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 7px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-info) no-repeat 4px 4px;
}

.isvMain .action {
    background: #C4F47D;
    /*background: greenyellow;*/
}

.isvMain p {
    margin-left: 20px;
    margin-top: 5px;
    text-align: justify;
}

.isvMain ul {
    margin-left: 40px;
    margin-top: 5px;
    text-align: justify;
}

.isvMain li {
    list-style: disc;
    padding-top: 3px;
}

.isvMain ul div {
    padding-top: 3px;
}

/*44.0 Branding configuration view*/
.brandingConfPreview {
    float: left;
}

.imageCustomLinkFileField,
.brandingCustomLinkFileField {
    margin-left: 5px;
    margin-bottom: 0;
}

/*45.0 OLR Exchange Email preview*/
.exchEmailActions {
    padding: 4px;
}

.exchEmailDetails {
    margin: 10px;
    table-layout: fixed;
    width: 100%;
}

.exchEmailTimestamp {
    width: 300px;
    text-align: right;
}

.exchEmailDetails tr td:first-child {
    width: 70px;
}

.exchEmailDetails td {
    padding: 3px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.exchEmailDetails td.exchEmailTd2 {
    vertical-align: top;
    white-space: normal;
    word-break: break-all;
}

.exchEmailBody {
    overflow-y: auto;
    border: 0px;
}

.exchEmailAttContainer {
    max-height: 170px;
}

.exchEmailAttContainer table {
    table-layout: fixed;
    margin: 3px 10px 3px 10px;
}

.exchEmailAttContainer tr td:first-child {
    width: 116px;
    vertical-align: top;
}

.exchEmailAttContainer td {
    padding: 3px;
}

.exchEmailAtt {
    margin: 0 10px 0 0;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    max-width: 300px;
    white-space: nowrap;
}

/*45.1 OLR Exchange Contact preview*/
.exchContactActions {
    padding: 4px;
}

.exchContactDetails table {
    margin: 10px;
}

.exchContactDetails table td {
    width: 702px;
}

.exchContactDetails table tr {
    line-height: 17px;
}

.exchContactDetails table tr td:first-child {
    vertical-align: top;
    width: 150px;
}

.exchContactDetails table tr:first-child td:last-child {
    vertical-align: top;
    text-align: right;
    width: 200px;
}

.exchContactDetails table tr:first-child td:last-child img {
    border: var(--border-default);
}

.exchContactContainer {
    height: calc(100% - 31px) !important;
    overflow-y: auto;
    border: 0;
}

/*45.2 OLR Exchange Calendar preview*/
.exchCalendarActions {
    padding: 4px;
}

.exchCalendarDetails {
    margin: 10px;
    table-layout: fixed;
    width: 100%;
}

.exchCalendarTimestamp {
    width: 300px;
    text-align: right;
}

.exchCalendarDetails tr td:first-child {
    width: 117px;
}

.exchCalendarDetails td {
    padding: 3px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.exchCalendarBody {
    overflow-y: auto;
    border: 0px;
}

.exchCalendarAttContainer {
    max-height: 170px;
}
.exchCalendarAttContainer table {
    table-layout: fixed;
    margin: 3px 10px 3px 10px;
}

.exchCalendarAttContainer tr td:first-child {
    width: 116px;
    vertical-align: top;
}

.exchCalendarAttContainer td {
    padding: 3px;
}

.exchCalendarAtt {
    margin: 0 10px 0 0;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    max-width: 300px;
    white-space: nowrap;
}

/*46.0 FLR wizard*/
.iconFlrWizard32 {
    width: 32px;
    height: 32px;
    background: url(/img/views/icons/icon-new/tree-view-icons.svg#group-expanded) no-repeat;
}

.iconOlrWizard32 {
    width: 32px;
    height: 32px;
    background: url(/img/views/flr/flr-icons.svg#olr-activity) no-repeat;
}

.iconVirtualMountWizard32 {
    width: 32px;
    height: 32px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-export-backup) no-repeat 4px 4px;
}

/*46.0 OLR Email Forward */
.olrForwardView {
    display: flex;
    flex-direction: column;
}
.olrForwardView .textFieldContainer {
    flex: 1 1 auto;
}
.olrForwardView .formContainer {
    flex: 0 0 auto;
    padding-bottom: 10px;
}

.olrForwardTitle {
    padding: 5px 5px 5px 8px;
}

.olrForwardActions {
    padding: 4px;
}

.olrForwardDetails {
    margin: 10px;
}
.olrForwardAttContainer {
    max-height: 100px;
    flex: 0 0 auto;
    margin-bottom: 10px;
}

.olrForwardAttContainer table {
    table-layout: fixed;
    margin: 3px 10px 3px 10px;
}
.olrForwardAttContainer tr td:first-child {
    width: 116px;
    vertical-align: top;
}
.olrForwardAttContainer td {
    padding: 3px;
}
.olrForwardAtt {
    margin: 0 10px 0 0;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    max-width: 300px;
    white-space: nowrap;
}

/*Product update popup*/
.productUpdatePopupTable {
    margin-bottom: 10px;
}

.productUpdatePopupTable td:first-child {
    padding: 1px 10px 1px 1px;
}

.productUpdatePopupInner {
    width: 510px;
}

.productScheduleUpdatePopupInner {
    width: 415px;
}

.productUpdatePopupLink {
    display: inline-block;
    margin-top: 0.5em;
}

/*Daily Report popup*/
.popupReportHelp {
    width: 350px;
}

/*History Report popup*/
.popupHistoryReportInner {
    text-align: center;
}

.popupHistoryReportInner .popupHistoryReportPicker:first-of-type {
    margin-right: 2em;
}

.popupHistoryReportInner .popupHistoryReportPicker {
    display: inline-block;
}

.popupHistoryReportHelp {
    width: 450px;
}

.formatTypeCombo {
    top: 5px !important;
}

.format-report-combo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 28px 20px;
}

/*Falied Report Popup */
.popupFailedmachinePadding {
    padding-left: 10px;
}

/**************************************************/
/*              Job wizard (editor)               */
/**************************************************/
/*Wizard main icons*/
/* TODO [Tuan Truong]: Where use*/
.iconJobRestore {
    width: 32px;
    height: 32px;
    background-image: url(/img/views/icons-sprite.svg#recoveryJob);
    background-position: 50% 50%;
}

.jwsStep {
    border-bottom: 1px solid #cccccc;
    padding: 15px 0;
}

/*Sources step*/
.jwsLicense {
    text-align: center;
    height: 20px;
}

.jwsItemDeleteRadios {
    margin: 1em 0 0;
}

/*Targets step*/
.jwtEmpty {
    height: 100px;
    line-height: 100px;
}

.jwtJobObject {
    margin-left: auto;
    margin-right: auto;
}

/*Targets step*/
.jwtBasicTitles {
    height: 20px;
}

.jwtSourceMain {
    margin-bottom: 5px;
}

.jwtSourceHeader {
    display: flex;
    align-items: center;
    padding: 5px 10px;
}

.jwtSourceIcon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.jwtSourceTitle {
    display: inline-block;
    vertical-align: middle;
    max-width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: auto;
}

.jwtSourceNote {
    display: none;
    margin-left: 5px;
}

.selected > .jwtSourceNote, .selectable:hover > .jwtSourceNote {
    display: block;
}

/*Targets step: Replication View, JobSource mapping, JobObject mapping*/
.rmvContainer {
    white-space: nowrap;
}

.rmvContainer > * {
    display: flex;
}

.rmvBlock {
    padding: 10px 5px 0px 15px;
    width: 50%;
    display: inline-block;
    vertical-align: top;
    border-collapse: collapse;
}

.rmvBlock.borderRight {
    width: calc(50% - 1px);
}

.rmvLast .rmvBlock {
    padding-bottom: 10px;
}

.rmvLine {
    display: flex;
    margin-bottom: var(--padding-x-small);
}

.rmvLine:has(.rmvRightSelector) {
    align-items: center;
}

.rmvLine .x-form-item {
    margin-bottom: 0;
}

.rmvLeft {
    display: inline-block;
    vertical-align: middle;
    width: 160px !important;
    min-width: 160px !important;
    text-wrap: wrap;
}

.rmvLeft.rmvLine {
    width: 100% !important;
}

.rmvRight {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 160px - var(--col-gap)) !important;
    margin-left: var(--col-gap);
}

.rmvRightSelector {
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 160px - var(--col-gap)) !important;
    margin-left: var(--col-gap);
}

.rmvRightSelector.simple-number-field,
.rmvRightSelector.simple-combo {
    height: auto;
}

.rmvRightSelector.auto-width {
    width: auto !important;
}

.rmvRightSelector.simple-combo.borderless > .x-form-item-body {
    width: 100% !important;
}

.rmvRightSelector.simple-combo.borderless input {
    width: 100% !important;
    max-width: calc(100% - 20px);
    border: none;
}

.rmvRightSelector.simple-combo.borderless .x-form-arrow-trigger {
    border: none;
    background: url("/img/ctrl/item-selector/d.png") 0 0;
}

.x-boundlist.full-border {
    border-top-width: var(--border-width);
}

/*Targets step: Backup View, JobSource mapping, JobObject mapping*/
.bmvEditor {
    padding: 5px;
}

.bmvBlock {
    padding: 5px 5px 5px 10px;
    width: 45%;
    display: inline-block;
    vertical-align: top;
    border-collapse: collapse;
    margin-left: -1px;
}

.bmvStorageSelector {
    width: 340px;
}

.bmvChk {
    margin-top: 5px;
}

.bmvConfirmRadios {
    margin: 1em 0 0;
}

.bmvItemBlock {
    margin: 10px 5px 10px 5px;
    display: inline-block;
    vertical-align: middle;
    border-collapse: collapse;
}

.contentView .schedulesViewCntSmall { width: 100% }

/*Switch to the new scheduler*/
.confirmMessageSwitch {
    background-color: white;
    box-shadow: 0 2px 8px rgba(107, 102, 140, 0.2);
    border-radius: 12px;
    max-width: 686px;
    padding: 20px 15px 20px;
    margin: 20px 0;
}
.confirm-switch-schedule .button-confirm-group {
    display: flex;
    justify-content: flex-end;
}
.confirm-switch-schedule.style-after-hide {
    margin: 0 0 var(--row-gap-large) 0;
}

.confirm-switch-schedule.style-after-hide .button-confirm-group {
    display: block;
}
.switchOptionTitle {
    margin-left: 10px;
}

.confirmMessageSwitch .alarm-box {
    color: var(--color-black);
}
.confirmMessageSwitch .alarm-box .abCol0 {
    width: 40px;
}
.confirmMessageSwitchIcon  .alarm-box .abCol0 {
    vertical-align: top;
}
.confirmMessageSwitch .alarm-box .abCol1 .linkInText {
    margin-top: 5px;
    display: block;
}
.confirmMessageSwitch .alarm-box .abCol1 .header2 {
    font-weight: bold;
    font-size: 14px;
}
.confirmMessageSwitch .alarm-box .abCol1 .abCmtFont {
    font-family: Arial, Helvetica, sans-serif;
}
.useNewScheduleRetentionTitleText {
    margin: 15px 0 0 36px;
    font-size: 12px;
    color: #7392b4;
}

.switchOptionCnt {
    margin: 0 0 10px 10px;
    padding: 5px;
}

.switchOptionCntSelected {
    background: #e5f0fe;
    border-radius: 8px;
}

.useNewRetentionOptionTitleDefault {
    width: 100%;
    font-weight: bold;
    margin: 0px 3px 0px 0px;
}

.useNewRetentionOptionTitleDefault .switchOptionTitle {
    color: #476e9a !important;
}

.useNewRetentionOptionTitleSelected .switchOptionTitle {
    color: #0676fa !important;
}

.useNewRetentionWarningAlarmText {
    background: #ffffff;
    color: #cdbd11;
}

.switchSchedulerPopupTitle {
    font-weight: bold;
    margin: 0px 0px 10px 10px;
}

.switchSchedulerDot8 {
    font-size: 8px;
}

.switchSchedulerDot4 {
    font-size: 4px;
    padding-right: 8px;
}

.switchSchedulerLearnMore .linkInText {
    color: #188EF5 !important;
}

.switchWarningLine{
    line-height: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.switchSchedulerWarningText {
    margin: 15px 0 0 40px;
    font-size: 12px;
    color: #7392b4;
}

.switchSchedulerOptionTitleDefault {
    width: 100%;
    font-weight: bold;
    margin: 0px 3px 0px 0px;
}

.switchSchedulerOptionTitleDefault .switchOptionTitle {
    color: #476e9a !important;
}

.switchSchedulerOptionTitleSelected .switchOptionTitle {
    color: #0676fa !important;
}

.switchSchedulerWarningAlarmText {
    background: #faf9ed;
    color: #cdbd11;
    border-radius: 8px;
}

/*Options step: two & custom transporters*/
.jwoTransporterBlock {
    margin-top: 10px;
    width: 99%;
}

.jwoTransporterTable {
    display: table;
}

.jwoTransporterLeftCell {
    display: table-cell;
    width: 50%;
    margin-right: 10px;
}

.jwoTransporterRightCell {
    display: table-cell;
    width: auto;
}

.jwoLeftColumn {
    margin-right: 10px;
}

.jwoLine {
    margin-right: 0.5em;
}

.jwoLine:not(:last-child) {
    margin-bottom: 0.5em;
}

.jwoLabelBox {
    margin-right: 1em;
}

.jwoSavepointConfigStatus {
    margin-top: 10px;
    height: 35px;
}

.jwoSavepointConfigExact {
    padding-left: 1em;
}

/* Credentials Management */
/* TODO: [Tuan Truong]: replace old icons?*/
.iconKey24 {
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-key) no-repeat;
}

.iconUser24 {
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: url(/img/views/icons/icon-new/user-role-icons.svg#user) no-repeat -4px -4px;
}

.iconMasterPassword24 {
    width: 24px;
    min-width: 24px;
    height: 24px;
}

.iconMasterPass {
    background: url(/img/views/flr/flr-icons.svg#icon-master-password) no-repeat -3px;
}

.iconEncryption24 {
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: url(/img/views/icons/icon-new/lock.svg#encryption) no-repeat;
}

.iconWarningEncryption24 {
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: url(/img/views/icons/icon-new/warning-lock.svg#warning-encryption) no-repeat;
}

.credentialFooter {/*Fix margin between search field & list view*/
    background-color: #FFFFFF;
}

.credentialItemView {
    padding: 5px;
    display: flex;
}
.credentialItemViewTitle {
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 4px;
}
.credentialItemViewDescription {
    flex-shrink: 2;
}
.credentialItemViewActions {
    flex-basis: 90px;
    white-space: nowrap;
}

/*Credentials picker*/
.bound-list-popup.bound-credential-list-popup .x-boundlist-item {
    padding: var(--padding-small) var(--padding);
    height: auto;
}

.bound-credential-list-popup .x-boundlist-item > div {
    display: flex;
    flex-direction: column;
    row-gap: var(--size-3xs);
}

.credential-info {
    display: flex;
    max-height: var(--line-height-large);
    column-gap: var(--size-s);
}

.credential-icon {
    transform: scale(0.83333);
}

.credential-title {
    display: flex;
    text-wrap: nowrap;
    line-height: var(--line-height-large);
}

.credential-description {
    display: flex;
    padding-left: var(--size-4xl);
    text-wrap: nowrap;
    line-height: var(--line-height-large);
    color: var(--color-subtext);
}

.credIcon {
    margin: 0px 3px 0px 0px;
    display: inline-block;
    vertical-align: middle;
}

.credDesc {
    margin: 0px 0px 0px 27px;
    vertical-align: middle;
}

.certificateFooter {/*Fix margin between search field & list view*/
    background-color: #FFFFFF;
}

.certificateItemView {
    padding: 5px;
    display: flex;
}
.certificateItemViewTitle {
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 4px;
}
.certificateItemViewDescription {
    flex-shrink: 2;
}
.certificateItemViewActions {
    flex-basis: 90px;
    white-space: nowrap;
}

/*Certificates picker*/
.certIcon {
    margin: 0px 3px 0px 0px;
    display: inline-block;
    vertical-align: middle;
}

.certDesc {
    margin: 0px 0px 0px 27px;
    vertical-align: middle;
}

/* Custom file field */
.customFormFileBtn {
    overflow: hidden;
    float: right;
    height: 30px;
}

/*Backup/restore system popup*/
.sbkTargetBrDisplayBody {
    width: 550px;
    height: 400px;
}

.sbkTargetBrListEmpty {
    padding: 10px;
}

.sbkBrColumnCb {
    margin-right: 10px;
}

.sbkBrColumn1_1 {
    width: 240px;
}

.sbkBrColumn1_2 {
    width: 217px;
}

.sbkPopupRecoveryPointImportantNote {
    font-size: 11.5pt;
    color: red;
    margin-top: 0.7em;
    margin-left: 1em;
}

.sbkPopupRecoveryPointNote {
    margin: 0.7em 1em 0 1em;
}

.sbkPopupLimitReached {
    width: 450px;
    height: 120px;
}

.sbkPopupLimitReachedMain {
    text-align: center;
}

.sbkPopupLimitReachedMain div {
    margin-top: 1em;
}

.sbkPopupRestoreSystem {
    width: 400px;
    height: 120px;
}

.sbkPopupRestoreSystemPlaceholder {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.sbkPopupRestoreSystemRunning {
    text-align: center;
}

.sbkPopupRestoreSystemRunning div {
    margin-top: 1em;
}

.sbkPopupRestoreSystemRunningNote {
    font-size: 9pt;
    color: red;
    margin-top: 1em;
    font-weight: bold;
    text-align: center;
}

.sbkPopupRestoreSystemDone {
    display: table;
}

.sbkPopupRestoreSystemDone > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.sbkPopupRestoreSystemInner > div {
    display: inline-block;
    word-wrap: break-word;
    margin-right: 0.6em;
    vertical-align: middle;
    max-width: 350px;
    max-height: 70px;
    overflow: hidden;
}

.sbkPopupImportSelfBackup {
    width: 440px;
    height: 116px;
}

.sbkPopupBackupSystemToAllRepos {
    width: 480px;
    height: 150px;
}

.sbkDisplayBody {
    width: 550px;
    height: 400px;
}
.sbkSavepointPickerRadiosView {
    overflow-y: auto;
    overflow-x: hidden;
}
.sbkSavepointPickerRadios .x-form-radio-group {
    /*TODO: revisit during ExtJS upgrade*/
    width: 100% !important;
}

.repositoryTypePickerRadios {
    font-size: 14pt !important;
    font-weight: 500;
}

.hypervisorInventoryPickerRadios {
    font-size: 14pt !important;
    font-weight: 500;
}

.repositoryTypePickerRadios .x-form-field.x-form-radio,
.hypervisorInventoryPickerRadios .x-form-field.x-form-radio {
    vertical-align: -1px;
}

/*Export/import popup*/
.popupMigration .note-box-container .note-content {
    align-items: start;
}

.popupMigrationPlaceholder {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.popupMigrationEstimate {
    margin: 1em 0 1em 0;
}

.popupMigrationFile {
    padding-bottom: 1em;
}
.popupMigrationMapping {
    padding-top: 1em;
}

.popupMigrationEstimate div {
    vertical-align: middle;
    margin-right: 0.5em;
    display: inline-block;
}

.popupMigrationRunning {
    text-align: center;
}

.popupMigrationRunning div {
    margin-top: 1em;
}

.popupMigrationDone {
    display: table;
    min-height: 70px;
}

.popupMigrationDone > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.popupMigrationInner > div {
    display: inline-block;
    word-wrap: break-word;
    margin-right: 0.6em;
    vertical-align: middle;
    max-width: 350px;
    max-height: 70px;
    overflow: hidden;
}

/*Error message box*/
.messageBoxContext {
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
}

/*Inventory type selector*/
.inventoryTypeSelector.x-form-item {
    margin-bottom: 0;
}

.inventoryTypeSelector label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Export backup */
.exportBackupIconWizard32 {
    width: 32px;
    height: 32px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-export-backup) no-repeat 4px 4px;
}

.exportBackupDisksLvItemTitle {
    margin-bottom: 5px;
}

.exportBackupDisksLvItems {
    margin-left: 29px;
}

.exportBackupTestConnBtn {
    padding-left: 20px;
}

/*Savepoint picker view*/
.savepointPickerTabs {
    margin: 0.5em 0.5em 0 0.5em;
}

.savepointPickerSearch {
    margin: 0.5em;
}

.savepointPickerRadios .x-form-radio-group {
    /*TODO: revisit during ExtJS upgrade*/
    width: 100% !important;
}
.savepointPickerRadios .x-field-default .x-form-item-body {
    display: flex;
    align-items: baseline;
    float: none;
}
.savepointPickerRadios .x-field-default .x-form-item-body .x-form-cb-label {
    flex: 1;
}

.spItemEncryption {
    width: 25px;
    margin-right: 5px;
    margin-left: 25px;
}

.spItemEncryptionTitle {
    width: 250px;
    padding-top: 5px;
}

.spItemEncryptionTitle .red {
    color: red;
}

.encryptionDialogList {
    overflow: auto;
    height: 100%;
}

.spItemViewDate {
    width: 230px;
    float: left;
}

.spItemTitle {
    margin-left: 25px;
}

.spItemViewCreated {
    width: 158px;
    float: left;
    vertical-align: middle;
}

.spItemViewType {
    width: 82px;
    float: left;
    vertical-align: middle;
}

.spItemViewDescription {
    width: 180px;
    float: left;
    vertical-align: middle;
}

.spItemViewValue {
    display: flex;
    align-items: start;
}


.spItemViewColumn1 {
    width: 35%;
}

.spItemViewColumn2 {
    width: 25%;
}

.spItemViewColumn3 {
    width: 80px;
    margin-left: 30px;
}

.spItemViewColumn4 {
    flex: 1;
    flex-wrap: wrap;
    white-space: break-spaces;
}

/*Job wizard option: target VM naming*/
.tvnItem {
    padding: 0 0.5em;
    height: 2em;
    display: flex;
    align-items: center;
}

.tvnColumn1 {
    width: 50%
}

/*Re-IP management popup*/
.reipDisplayBody {
    width: 550px;
    height: 400px;
}

.reipFormBody {
    width: 500px;
}

/*Re-IP list view*/
.reipHeader {
    padding: 0 0.5em;
    height: 2em;
    display: flex;
    align-items: center;
}

.reipColumn {
    width: 240px;
}

/*Re-IP short item view*/
.reipItem {
    padding: 0 0.5em;
    height: 2em;
    display: flex;
    align-items: center;
}

.reipColumnCb {
    margin-right: 10px;
}

.reipColumn1_1 {
    width: 240px;
}

.reipColumn1_2 {
    width: 217px;
}

.reipColumn2 {
    flex: 1;
}

/*Re-IP wizard step*/
.reipsCheckbox {
    margin-top: 1em;
}

.reipsHeader {
    margin-top: 1em;
}

.reipsLink1 {
    margin-left: 4em;
}

.reipsLink2 {
    margin-left: 4em;
}

/*Network mapping management popup*/
.nmDisplayBody {
    width: 760px;
    height: 400px;
}

.nmFormBody {
    width: 500px;
}

.ntDropdown .ntDropdownInventoryView .x-box-inner:only-child {
    /*Problem: Target network inventory view doesn't show after doing some changes on source's inventory type*/
    position: static;
}

/*Network Mapping list view*/
.nmHeader {
    padding: 0 0.5em;
    height: 2em;
    display: flex;
    align-items: center;
}

.nmList,
.ssList,
.reipList {
    height: calc(100% - 2em);
}

.nmColumn {
    width: 240px;
}

/*Network Mapping short item view*/
.nmItem {
    padding: 0 0.5em;
    height: 2em;
    display: flex;
    align-items: center;
}

.nmColumnCb {
    margin-right: 10px;
}

.nmColumn1_1 {
    width: 240px;
}

.nmColumn1_2 {
    width: 217px;
}

.nmColumn2 {
    flex: 1;
}

/*Network mapping wizard step*/
.nmsCheckbox {
    margin-top: 1em;
}

.nmsHeader {
    margin-top: 1em;
}

.nmsLink1 {
    margin-left: 4em;
}

.nmsLink2 {
    margin-left: 4em;
}

.nmsList,
.reipsList {
    margin-top: 1em;
    height: 100%;
}

/*Scan Server management dialog*/
.connectButton {
    margin: 33px 0 0 10px !important;
}

/*Malware detection*/
.mtDisplayBody {
    width: 550px;
    overflow: visible;
}

/*Bulk backup/savepoint delete popup*/
.bbdSetupBody {
    width: 700px;
}

.bbdPreviewBody {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}

.bbdHeader {
    padding: 0 0.5em;
    height: 2em;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.bbdList {
    flex: 1;
    max-height: 400px;
    overflow-y: auto;
}

.bbdItem {
    padding: 0 0.5em;
    height: 2em;
    display: flex;
    align-items: center;
}

.bbdColumn {
    flex: 1;
}

.bbdTimeColumn {
    width: 280px;
}

/* Item selector */
.itemSelectorTitle.x-form-invalid-field {
    height: 30px !important;
}

.siteRecoveryEditor .itemSelectorTitle.x-form-invalid-field {
    height: 21px !important;
    border: none;
}

.siteRecoveryEditor .item-selector:not(.recovery-point-selector) .glInner {
    display: block;
}

.siteRecoveryEditor .borderAll:has(.x-form-invalid-field) {
    border-color: var(--color-red);
}

/*Item selector list*/
.itemSelectorList {
    overflow-x: hidden !important;
}

.itemSelectorListViewGlobalCheckbox {
    margin-left: 8px;
}
.itemSelectorListViewChild {
    margin-left: 8px;
}

.itemSelectorListViewChild label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    width: calc(100% - 25px);
}

/* Bandwidth throttling */
.bwrHeader {
    padding: 0 0.5em;
    height: 2em;
    display: flex;
    align-items: center;
}

.bwrItem {
    padding: 0 0.5em;
    height: 2em;
    display: flex;
    align-items: center;
}

.bwrColumn {
    width: 210px;
}

.bwrColumn_0 {
    width: 100px;
}

.bwrColumn_1 {
    width: 60px;
}

.bwrColumn_2 {
    width: 290px;
}

.bwrColumn_3 {
    width: 130px;
}

.bwrColumn_4 {
    text-align: right;
    flex-grow: 1;
    white-space: nowrap;
}

.bwrListEmpty {
    padding: 10px;
}

.bwrFormBody {
    width: 630px;
}

.bwrDisplayBody {
    width: 910px;
    height: 380px;
}

.bwrList {
    height: calc(100% - 2em);
}

.bwrColumnCb {
    margin-right: 10px;
    padding-bottom: 3px;
}

/* Site recovery wizard */
.siteRecoveryWizardNoPageScrollContainer {
    display: flex !important;
    flex-flow: column nowrap;
    align-items: stretch;
}

.siteRecoveryEditor {
    height: 100% !important;
    width: 100% !important;
    border: none;
}

/* Site recovery action selection view */
.siteRecoveryActionGroupCombo {
    margin: 0.5em 0.5em 0 0.5em;
}

.siteRecoveryActionSearch {
    margin: 0.5em;
}

.siteRecoveryActionLink {
    display: block;
    margin: 0.3em 0.5em 0 0.5em;
}

/* Site recovery action list */
.siteRecoveryActions .x-portlet-header {
    border-bottom: 1px solid #C5D2DF;
}

.siteRecoveryActionInfoHeader .header2 {
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    font-weight: bold;
    color: #476E9A;
}
.siteRecoveryActionList .siteRecoveryActionInfoActions {
    display: none;
}
.siteRecoveryActionInfoActions .iconEdit,
.siteRecoveryActionInfoActions .deleteIcon,
.siteRecoveryActionInfoActions .icon-moveUp,
.siteRecoveryActionInfoActions .icon-moveDown {
    transform: scale(0.8);
    font-size: 0;
    margin-left: 16px;
    display: inline-block;
}
.siteRecoveryActionList .siteRecoveryActionInfo:hover {
    background: #F2F8FF;
}
.siteRecoveryActionList .siteRecoveryActionInfo:hover .siteRecoveryActionInfoActions {
    display: block;
}
.siteRecoveryActionInfo .siteRecoveryActionInfoDetail {
    padding: 10px 16px 0;
}
.siteRecoveryActionInfo .siteRecoveryActionInfoDetail .row {
    line-height: 24px;
}
.siteRecoveryActionList {
    overflow: auto;
    padding: 0;
    display: inline-block;
    width: 100%;
}

.siteRecoveryActionInfo {
    padding: 14px 20px 8px;
    position: relative;
}

.siteRecoveryActionInfoHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.siteRecoveryActionInfoMode {
    margin-left: 30px;
    flex: 1;
}
.siteRecoveryActionInfoActions {
    flex-grow: 1;
    text-align: right;
}
.siteRecoveryActionInfoStatus {
    padding-top: 1px;
}

.siteRecoverySelectRepositoryTitle {
    margin-right: 5px;
    width: 150px;
}

.siteRecoveryEditorSshField {
    display: inline-block;
    margin: -5px 0 -3px 0;
}
/* TODO [Tuan Truong] Where use*/
.iconScreenshot {
    background-image: url(/img/views/icons-sprite.svg#screenshot);
    background-size: 500%;
    background-position: 0px 0px;
    display: inline-block;
}
.iconArrow {
    font-size: 32px;
    line-height: 32px;
    font-weight: bold;
    padding: 0 20px;
    display: inline-block;
    vertical-align: middle;
}

.actionJobListView {
    height: 300px;
    margin-bottom: 10px;
}

.tagsContainer {
    position: relative;
    float: left;
    border: 1px solid #b5b8c8;
    height: 80px;
}

.tagsInput {
    float: left;
}

.tagsList {
    padding: 2px 0 0 2px;
    height: 100%;
}

.tagsLabel {
    float: left;
    margin-top: 4px;
    margin-right: 5px;
}

.tagsInput input {
    border: none!important;
    background: none!important;
    margin-bottom: 0;
}

.tagItemContainer {
    float: left;
    position: relative;
    background-color: #4285f4;
    color: #fff;
    border-radius: 4px;
    padding: 4px;
    margin: 0 5px 5px 0;
}

.tagItemText {
    padding-right: 10px;
    font-size: 11px;
    line-height: 1;
}

.tagItemButton {
    position: absolute;
    right: 4px;
    top: 0;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}

.sendMailAttachmentBtn,
.sendMailAttachmentBtn .x-form-file-wrap {
    width: fit-content !important;
}

.sendMailAttachmentBtn .customFormFileBtn {
    display: inline-block;
    -webkit-text-fill-color: #1788e2;
    border: none;
    background: none;
}

/*Job schedule: effective from date UI*/
.popupEffectiveDateHelp {
    width: 350px;
}

/*Drilldown component*/
.drilldownHeader {
    padding: 0 20px 10px 20px;
    width: 100%;
}

.drilldownHeaderNoRootIcon {
    margin-right: 0 !important; /*Override the link icon css*/
}

.drilldownBodyContentContainer {
    width: 1100px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.drilldownFooter {
    background-color: #F0F0F0;
    padding: 10px 20px 10px 20px;
    width: 100%;
}

/*Configuration drill down view (customize)*/
.cddheader {
    padding: 10px 20px 20px 20px;
}

.cddEditorheader {
    padding: 10px 20px 0 20px;
}

.cddPaddingLeftRight {
    padding-left: 20px;
    padding-right: 20px;
}

.cddPaddingLeft20 {
    padding-left: 20px;
}

.cddDetailActionButtons {
    padding: 20px;
}

/*Configuration drill down alarm item view: extends from 'Alarm item' above*/
.aliItemView2 {
    margin-bottom: 5px;
    background-color: #F8F8F8;
}

.aliCol0_2 {
    cursor: default;
    vertical-align: middle;
    width: 55px;
}

.aliAlarm .aliIcon1_2 {
    width: 32px;
    height: 32px;
    background: url(/img/views/icons/icons-sprite-common.svg#icon-alert) no-repeat 4px 4px;
}

.aliDismissAndDate {
    text-align: right;
    width: 150px;
    padding: 0 10px;
}

.aliDismissAndDate .aliDismissLink {
    text-align: center;
}

.aliDismissLink {
    display: none;
}

.aliItemView2:hover {
    background-color: #F0F0F0;
}

.aliItemView2:hover .aliDate {
    display: none;
}

.aliItemView2:hover .aliDismissLink{
    display: inline-block;
}

/*Table view*/
.table {
    display: table;
    width: 100%;
    height: 100%;
}

.tableRow {
    display: table-row;
    width: 100%;
    height: 100%;
}

.tableCell {
    display: table-cell;
    width: 100%;
    height: 100%;
}

.tableCellScrollY {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.tableCellEmptyMsg {
    padding: 15px;
    display: flex;
}
.tableCellEmptyMsg .lvEmpty {
    height: auto !important;
}

/*SSL Certificate*/
.sslPopupInstallPlaceholder {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.sslPopupInstallDone {
    display: table;
}

.sslPopupInstallDone > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.sslPopupInstallInner > div {
    display: inline-block;
    word-wrap: break-word;
    margin-right: 0.6em;
    vertical-align: middle;
    max-width: 350px;
    max-height: 70px;
    overflow: hidden;
}

.sslPopupView {
    width: 538px;
}

.sslPopupView .normal:not(:first-child) {
    margin-top: 0.5em;
}


/*Savepoint item view*/
.updateSavepointPopup .ttAnchorBorder,
.updateSavepointPopup .ttAnchorFill {
    left: auto !important;
    right: -8px;
}

.spivMain {
    height: 28px;
    padding: 2px 4px;
    background-color: #FFF;
}
.spivIcon {
    display: inline-block;
    vertical-align: middle;
}
.spivTitle {
    display: inline-block;
    vertical-align: middle;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 3px;
    padding-right: 1px; /*Browser cutout bug fix - when the last char is )*/
}
.spivActions {
    vertical-align: middle;
    padding-left: 25px;
    padding-right: 10px;
    float: right;
}
.spivActions > * {
    margin-left: 10px;
}

/*Dropdown searchable*/
.noScroll {
    overflow: hidden ;
}

.inventoryListView {
    border-top:1px solid #ccc;
}

.dropdownSearchView {
    overflow: auto ;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.flrServerDropdownSearch {
    top: 0px ;
    border-top: none;
}

/* Support bundle view*/
.sbNormalView {
    border: 1px solid #d2d2d2;
    margin-bottom: 10px;
}

.sbNormalHeader {
    height: 35px;
    padding: 0 5px 0 5px;
}

.sbHeaderText {
    margin: 0px 5px 0 0;
}

.sbHeaderComment {
    margin: 0px 0 0 0;
}

.sbHeaderError {
    margin: 0px 0 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sbAdvancedView {
    height: 90px;
    border-top: 1px solid #d2d2d2;
}

.sbAdvancedViewDescription {
    padding: 10px 10px;
    overflow-y: auto;
}

/*New SB*/
.sbCenter {
    margin: 0;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.sbLogCenter table {
    margin: 1em auto 1em auto;
    width: 70%;
}

/*Configuration tab classes (Repository tab, Transporter tab, etc)*/
.configurationTabToolbar {
    padding: 10px 0;
    flex: 0 0 auto;
}
.configurationTabToolbar > .x-box-inner {
    height: auto !important;
    overflow: visible !important;
    min-height: 36px;
}

/*Configuration - list item*/
.configurationListItem {
    background-color: #FFF;
    padding: 5px 20px;
    margin-bottom: 5px;
}
.configurationListItemToolbar {
    padding: 1em;
}

.configurationListItem:nth-child(odd), .configurationListItemAlert {
    background-color: #F8F8F8;
}

.configurationListItem:hover,
.configurationListItem.selected,
.configurationListItem:hover .abMainEmbedded /*Alarm box case*/ {
    background-color: #F0F0F0 !important;
}

/*Configuration - header in List/Detail view*/
.configurationItemHeaderList {
    padding: 5px 0;
}
.configurationItemHeaderDetail {
    padding: 10px 20px 0 20px;
}
.configurationItemHeaderMain {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    flex-wrap: nowrap;
}
.configurationItemHeaderStaticBlock {
    white-space: nowrap;
    flex-shrink: 0; /*Do not shrink at all*/
}
.configurationItemHeaderDynamicBlock {
    white-space: nowrap;
    flex-shrink: 30; /*Shrink at will, to allow actions to grow*/
    flex-grow: 30; /*Occupy all free space to push the actions to the right*/
}

.selected .configurationItemHeaderAction,
.selectable:hover .configurationItemHeaderAction,
.hoverable:hover .configurationItemHeaderAction {
    display: block;
}

.configurationItemHeaderAction {
    display: none;
    margin-left: 10px;
}

.configurationItemHeaderProgress {
    width: 100px;
    height: 1.5em;
}

/*Configuration - content block in Detail view*/
.configurationItemContentBlock {
    padding: 10px 20px 0 20px;
}

.configurationItemContentFullBlock {
    padding-bottom: 10px;
}

.content-items-view.specialDetailView {
    padding: 20px 0px 20px 0px !important;
}

.configurationChildItem {
    margin-left: 25px;
}

.configurationItemContentBlock.x-item-flex .header2{
    margin-right: auto;
}

/*Auto Update*/
.productUpdatePopupInner {
    min-width: 400px;
    min-height: 70px;
}

.productUpdatePopupPlaceholder {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.productUpdatePopupInner .progressBox {
    margin-top: 1em;
    margin-bottom: 1em;
    height: auto;
    line-height: 3em;
}

/*Align default item to vm folder tree NJM-10066 */
.vmFolderCustomSelectableLine {
    padding-left: 7px;
}

/*alignment combo box, apply only for chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .x-form-cb-label-after {
        vertical-align: middle;
    }
}
/*Combobox patch*/
.comboBoxEmptyText {
    padding: 10px;
}

/* fixed vertical scroll bar for combobox */
.maxHeightDefault .list-ct {
    max-height: 300px;
}

.generalView { /* Why 'overflow: auto' is generated already? -> WHERE? */
    overflow: hidden !important;
}

/*Configuration drill down alarm item view: extends from 'Alarm item' above*/
.aliItemView2 {
    margin-bottom: 5px;
    background-color: #F8F8F8;
}

.aliCol0_2 {
    cursor: default;
    vertical-align: middle;
    width: 55px;
}

.aliItemView2:hover {
    background-color: #F0F0F0;
}

.aliItemView2:hover .aliDate {
    display: none;
}

.aliItemView2:hover .aliDismissLink{
    display: inline-block;
}

/* Grid link action column */
.grid-actions-link, .grid-actions-link-horizontal {
    display: none;
}
.x-grid-row-over .grid-actions-link,
.grid-row-selected .grid-actions-link {
    display: block;
}

.x-grid-row-over .grid-actions-link-horizontal,
.grid-row-selected .grid-actions-link-horizontal {
    display: inline;
    margin-right: 12px;
}

.x-grid-dirty-cell {
    background-image: none !important;
}

/* Users and Roles */
.userRoleHeader {
    padding: 10px 0 10px 10px;
}
.userViewDropdown {
    background: white;
    padding: 1px;
    border: var(--border-default);
}

.userViewPermission {
    width: 150px;
    text-align: right;
    padding-right: 10px;
    margin-left: auto;
}

.userViewDropdownItem {
    padding: 4px;
    position: relative;
}

.userViewTopActions {
    margin-left: 185px;
    padding: 10px 20px 20px 0;
    min-height: 65px;
}

.userViewTopSearch {
    margin: 7px 0;
    border-top: none;
}

.userStep.noInfo {
    height: 700px;
}

.userGridCb, .adGroupGridCb {
    vertical-align: middle;
}

.gridLinkText.userRoleCol {
    padding-left: 0px;
}

.topActionsSearchFilter {
    float: left;
}

.adExceedStat {
    text-align: center;
    height: 20px
}

.asfLink {
    padding-right:6px;
    z-index: 2;
    text-align: right;
}

.adPopup_InvalidMsgArea {
    border: var(--border-default);
    background-color: #EBEBEB;
    padding: 7px 7px 7px 7px;
    margin-left: 0px;
}

.iconAdGroup24-2 {
    width: 24px;
    height: 24px;
    background-image: url(/img/views/users-roles/ad-group24-2.png);
}

/*Original VM folder item */
.originalVmFolderCustomSelectableLine {
    padding-top:  6px;
    padding-left: 7px;
}

/* Chat button */
.live-chat {
    display: flex;
    margin-left: auto;
    justify-content: center;
    align-items: center;
    width: 136px;
    height: 40px;
    margin-right: 29px;
    padding: 0 5px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #476E9A;
    font-weight: bold;
    text-transform: capitalize;
}

.live-chat:hover {
    border: 1px solid #C3D3E6;
    box-sizing: border-box;
    border-radius: 8px;
}

.live-chat .live-chat-icon {
    margin-right: 6px !important;
}

.live-chat a:hover {
    text-decoration: none;
}

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

.lvdEmptyListView {
    padding-right: 35%;
    min-height: calc(100% - 30px);
}

.lvdEmptyListView .lvEmpty .img-empty-item {
    width: auto;
    padding-top: 0;
}

.jvdListView {
    height: 100%;
}

.jvdjoItemIcon {
    display: flex;
}

.jvJobStateWaiting {
    background: url(/img/views/icons/icon-new/common-icons.svg#current-waiting-onSchedule) no-repeat -4px -4px;
}

.jvdListView .jvJobStateWaiting {
    width: 32px;
    height: 32px;
    background-position: 0 0;
}

.jvJobStateSkipped {
    width: 32px;
    height: 32px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-skipped) no-repeat 4px 4px;
}

/*Reboot Screen */
.rebootView {
    background-size: cover;
    background-position: center center;
    background-image: url(/c/branding/background.jpg) !important;
    font-weight: 900;
}


.rebootView .title {
    margin-bottom: 1em;
    text-align: center;
    color: white;
    font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
    font-size: 3.5vw;
    font-weight: 700;
    line-height: 80px;
    letter-spacing: -2px;
}

.rebootView .progressBox {
    margin-top: 1em;
    margin-bottom: 6em;
    height: 6em;
    line-height: 6em;
}
.rebootView .simplePb2ForH {
    font-size: 2.0vw;
    font-weight: bold;
}

.rebootView .msgCnt {
    font-weight: normal !important;
}

.rebootView .message {
    color: white;
    font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
    font-size: 14pt;
    float: left;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.rebootView .errorIcon {
    width: 32px;
    height: 32px;
    background: url(/img/ctrl/generic/generic-icons.svg#icon-error) 4px 4px;
    float: left;
    margin-bottom: 10em;
    margin-right: 0.5em;
}
.helpMsgCustom {
    border: none !important;
    background: none !important;
    word-break: break-word;
}
.moreButtonCustom {
    padding-top: 4px;
}
.eboxCustom {
    word-break: break-word;
}

/**NJM-25768: ellipse the short item name **/
.itemNameTitle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 70%;
}

/*Job type dropdown*/
.jobTypeDropdown {
    background: white;
    padding: 1px;
    border: var(--border-default);
}

.jobTypeDropdownItem {
    padding: 4px;
    position: relative;
}

.iconTrPool24 {
    width: 24px;
    height: 24px;
    background: url(/img/views/icons/icon-new/common-icons.svg#transporter-pool) no-repeat -4px -4px;
}

.transporterListItemView {
    padding: 5px;
    display: flex;
}

.poolActionLink {
    margin-left: 8px;
    display: inline-block;
    vertical-align: bottom;
}

/* Custom input date field */
.icon-show {
    background-position: right center;
    right: 0;
    top: 0;
}

.icon-show-visible {
    cursor: pointer;
    background-image: url(/img/ctrl/item-selector/d.png);
}

.icon-show-picker-visible {
    margin-right: 1px;
    cursor: pointer;
    background-image: url(/img/views/icons/icon-date-selector.svg);
    background-size: cover;
}

.icon-show, .icon-field-before {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    position: absolute;
}

.fieldDatePickerCls {
    width: 245px !important;
    padding-right: 22px;
    text-overflow: ellipsis;
    overflow: hidden;
}

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

.fieldCls {
    width: 210px !important;
}

.certificateDialog .ttBody {
    max-height: 490px !important;
    overflow-y: auto !important;
}

.certificateDialog .ttAnchorFill,
.certificateDialog .ttAnchorBorder {
    bottom: -8px;
}

.certificateDialogExpanded .ttAnchorFill,
.certificateDialogExpanded .ttAnchorBorder {
    display: none;
}

/* Style for policy view */
.policy-view {
    position: static !important;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    padding: 0 20px;
}

.policy-view .x-clear {
    display: none;
}

.policy-view .policy-condition {
    min-height: 36px;
}

.policy-view .header2 {
    margin-right: auto;
    font-weight: 700;
    font-size: 12pt;
}

.policy-map-source-wrapper {
    display: flex;
    height: 22px;
    align-items: center;
    column-gap: 12px;
}

.policy-map-source,
.policy-map-source > div {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
}

.ruleHeader .deleteIcon {
     visibility: hidden;
     cursor: pointer;
 }

.ruleHeader:hover .deleteIcon {
    visibility: visible;
}

.ttTitle.header2 ~ .ttInner .searchControlEmptyBorder.borderTop {
    border-top: none;
}

/* TODO [nhu.tran]: will remmoved after apply new UI */
.jobExecutionOptionView .iconSttInfo {
    left: 504px !important;
}

ul.tool-list li {
    list-style: disc;
}

/*Expert Localization: main view*/
.localizationView {
    --module-list-width: 300px;
}

/*Expert Localization: Localization view*/
.localizationModuleListContainer {
    margin-top: 15px;
    height: calc(100% - 35px);

    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
}
.localizationModuleList {
    width: 310px;
    padding: 5px 5px 5px 0;
}
.localizationModuleInfo {
    flex-grow: 1;
    padding: 5px;
}

/*Expert Localization: Localization module view*/
.localizationModuleView {
    width: var(--module-list-width);
    padding: 5px;
    border: 1px #d2d2d2 dashed;
    margin-bottom: 5px;
}

.localizationModuleViewTitleDefault {
    font-weight: bold;
}

.localizationModuleViewActions {
    margin-top: 2px;
    float: right;
}

/*Expert Localization: Localization module info view*/
.localizationModuleInfoView {
    padding: 5px;
}
.localizationModuleInfoRow {
    display: flex;
    flex-flow: row nowrap;
    width: 100%
}
.localizationModuleInfoProperty {
    display: flex;
    flex-flow: column;
    width: 150px;
    padding: 5px;
}
.localizationModuleInfoValue {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    padding: 5px;
}
.localizationModuleInfoFileTitle {
    margin: 5px;
}
.localizationModuleInfoFile {
    margin: 5px 5px 7px 5px;
    display: block;
}
.localizationModuleInfoFileName {
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}
.localizationModuleInfoFileLink {
    margin-left: 5px;
}

/*Expert Localization: file edit view*/
.localizationFileEditView {
    padding: 5px;
    width: calc(100% - var(--module-list-width) - 10px);
}
.localizationFileEditMenu {
    margin-left: 5px;
}
.localizationFileEditBlock {
    margin-top: 15px;
}
.localizationFileEditRow {
    margin: 5px;
}
.localizationFileEditIndex {
    display: inline-block;
    width: 50px;
}
.localizationFileEditKey {
    width: calc(30% - 50px);
    margin-right: 5px;
}
.localizationFileEditValue {
    width: calc(70% - 50px);
}

/*Expert Automation: Workflow view*/
.automationWorkflowView {
    display: inline-block;
    width: 300px;
    padding: 5px;
    border: 1px #d2d2d2 dashed;
    margin-right: 5px;
    margin-bottom: 5px;
}

.automationWorkflowViewActions {
    margin-top: 2px;
    float: right;
}

ul#nodes-memo > li {
    list-style-type: upper-roman;
}

.transporter-grid-custom .x-grid-cell-inner > div {
    display: flex;
}

.gridLinkText .noRightBorder {
    font-size: inherit;
}

.transporterViewTopActions {
    margin-left: 15px;
    padding: 10px 20px 20px 0;
    min-height: 65px;
}

.transporterAddNewPopup {
    width: 160px;
    height: 55px;
    margin: 15px;
    line-height: 2;
}

.transporter_centeredAbs {
    width: 100%;
    text-align: center;
    position: relative !important;
    margin-top: 20px;
}

/* Use installed vm agents */
.sourceName {
    width: 260px !important;
}

.certificateCol {
    left: 555px !important;
}

.credentialCol {
    left: 300px !important;
    width: 250px !important;
}

/*Storage type dropdown*/
.storageTypeDropdown {
    background: white;
    padding: 1px;
    border: var(--border-default);
}

.storageTypeDropdownItem {
    padding: 4px;
    position: relative;
}

/*Network mapping at VM Replication*/
.jwsStep .header-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 16px 0;
    color: #476E9A;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
}

.jwsStep .nmsList {
    height: calc(100% - 83px);
}

.jwsStep .stripedRow {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    align-items: center;
}
.jwsStep .stripedRow .column1_1 {
    width: 50%;
}

.jwsStep .stripedRow .column2
{
    padding-left: 20px;
}

.jwsStep .more-horizontal-btn button {
    -webkit-mask-position: 5px 3px;
}

.reIp-rule-short-view .column1_2 {
    width: 328px;
}

.networkMappingPopup {
    padding: 0 16px 16px 16px;
}

/*remove unnecessary scroll for maintain action popup*/
.messageMaintainContainer {
    overflow: hidden;
}

/*Progress bar for JobInfoPopup*/
.popupText .jobProgressBar {
    display: flex;
}

.jobProgressBar .simplePBContainer{
    display: flex;
    margin-left: 10px;
}


.jobProgressBarV2 .jobBoxStyle a,
.portalPanelGroup .jobProgressBarV2 .jvgiItem {
    display: flex;
    align-items: center;
}
.jobProgressBarV2 .jobBoxStyle .simplePBContainer {
    margin-left: 10px;
}

.jvstMiniChart:has(.colorStorageWarn) {
    border-color: #dbba00;
}

.jvstMiniChart:has(.colorStorageError) {
    border-color: #AB2222;
}

.jvdListView .stripedRow {
    min-height: 44px;
    display: flex;
    position: relative;
}

.jvdListView .stripedRow:nth-child(even) {
    background-color: #FAFCFF;
}

.jvdListView .stripedRow:hover, .jvdListView .stripedRow.selected {
    background-color: #E5F0FE;
}

.jvdListView .jvdListView {
    padding-top: 10px;
    min-height: 210px;
    height: calc(100% - 45px);
}

.jvdListView .x-item-flex {
    align-items: center;
    display: flex;
    padding: 5px 0;
    width: 100%;
}

.jvdListHeader .arrow {
    width: 14px;
    height: 16px;
    margin-left: auto;
}

.jvdListHeader .arrow.desc {
    background: url(/img/views/icons/icon-new/small-icons.svg#arrow-desc) no-repeat;
}

.jvdListHeader .arrow.asc {
    background: url(/img/views/icons/icon-new/small-icons.svg#arrow-asc) no-repeat;
}

.jvdListHeader {
    display: flex;
    align-items: center;
    padding: 10px 0 10px 0;
}

.jvdListHeader .title {
    width: 100%;
}

.jvdListView .x-item-flex {
    align-items: baseline;
    display: flex;
    padding: 5px 0;
    position: relative;
}


.jvdjoItemNameTitle {
    display: none
}

.jvdListView .jvdjoItemName:hover .jvdjoItemNameTitle {
    display: block;
    top: 83%;
    left: 50px;
    position: absolute;
    background: #fff;
    padding: 8px 12px;
    border-radius: 12px;
    text-wrap: wrap;
    max-width: 300px;
    z-index: 999;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    box-shadow: 0px 4px 16px 0px #6B668C33;
}

.jvdListView .stripedRow:nth-last-child(2) .jvdjoItemNameTitle {
    top: -54px;
}

.visibleScrollbar .jvdListHeader {
    margin-right: 10px;
}

.jvdListHeader .header-column {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    align-items: center;
    color: #476E9A;
    font-weight: bold;
    padding: 0 10px 0 20px;
    border-left: 1px solid #ccc;
}

.jvdListHeader .header-column:first-child {
    border: none;
}

.jvdListView .jvdjoItemName {
    padding: 8px 21px;
    text-align: left;
    text-decoration: none;
}
.jvdListView .jvdjoItemName a:hover {
    text-decoration: none;
}

.jvdListView .simplePBContainer .simplePbV2 {
    width: 100px;
}

.jvdListView.hasSearchHeaderPagination {
    height: calc(100% - 161px);
}

.jvdListView {
    height: calc(100% - 50px);
}
.progress-running.jvdjoItemName {
    display: flex;
    align-items: center;
}

.job-run-view:has(.lvEmpty:not([style*="display: none"])) .jvdListHeader {
    display: none;
}
    /*BMR*/
.bmr-logo-view {
    text-align: center;
    margin-top: 10px;
}

.bmr-local-container {
    display: flex;
    display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;           /* TWEENER - IE 10 */
    display: -webkit-flex;          /* NEW - Chrome */
    flex-direction: column;
    -moz-flex-direction: column;	/* OLD - Firefox 19- (doesn't work very well) */
    -webkit-flex-direction: column;	/* NEW - Chrome */
    -ms-flex-direction: column;		/* TWEENER - IE 10 */
    -webkit-box-orient: horizontal;	/* OLD - iOS 6-, Safari 3.1-6 */
    justify-content: center;
    flex-pack: center;			    /* OLD - Firefox 19- (doesn't work very well) */
    -webkit-box-pack: center;		/* OLD - iOS 6-, Safari 3.1-6 */
    -ms-flex-pack: center;		    /* TWEENER - IE 10 */
    -moz-flex-pack: center;		    /* OLD - Firefox 19- (doesn't work very well) */
    align-items: center;
    -webkit-box-align: center;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-align: center;		    /* OLD - Firefox 19- (doesn't work very well) */
    -webkit-align-items: center;	/* NEW - Chrome */
    -ms-flex-align: center;		    /* TWEENER - IE 10 */
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% + 160px);
    width: 100%;
}

.bmr-header {
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
    display: block;
    text-align: center;
}

.bmr-button-arrange {
    display: flex;
    display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
    display: -ms-flexbox;           /* TWEENER - IE 10 */
    display: -webkit-flex;          /* NEW - Chrome */
    flex-direction: row;
    justify-content: center;
    flex-pack: center;			    /* OLD - Firefox 19- (doesn't work very well) */
    -webkit-box-pack: center;		/* OLD - iOS 6-, Safari 3.1-6 */
    -ms-flex-pack: center;		    /* TWEENER - IE 10 */
    -moz-flex-pack: center;		    /* OLD - Firefox 19- (doesn't work very well) */
    align-items: center;
    -webkit-box-align: center;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-align: center;		    /* OLD - Firefox 19- (doesn't work very well) */
    -webkit-align-items: center;	/* NEW - Chrome */
    -ms-flex-align: center;		    /* TWEENER - IE 10 */
    margin-top: 15px;
}

.instructions {
    text-align: center;
    font-size: 12px;
    color: #ffffff;
    width: 800px;
}

.jobPopupInfoView .itemInfoTtLine:nth-child(even) {
    background-color: transparent;
}

.invisible {
    visibility: hidden !important;
}

.site-recovery-chk-cond-transporter {
    display: flex;
    align-items: center;
}

.x-trigger-noedit:disabled {
    pointer-events: none;
}

.hyphen {
    text-align: center;
}

.credentialGroupInputFields .x-form-radio-group {
    height: auto !important;
}

.radioGroupWithTooltip .x-form-radio-group {
    align-items: center;
    justify-content: space-between;
    display: grid;
    grid-template-columns: auto auto;
}

.radioGroupWithTooltip .iconSttInfo {
    margin-left: auto;
}

.progress-running.jvdjoItemName p {
    text-align: left;
}

.progress-running .detailState {
    display: none;
}

.tableDatePickerRecovery {
    padding-top: 76px;
}

.tableDatePickerRecovery .buttonLastRecovery {
    position: absolute;
    top: 20px;
    right: 66px;
}

.tableDatePickerRecovery .closeBtn {
    position: absolute;
    top: 30px;
    right: 28px;
}

.none-event {
    pointer-events: none !important;
}


.repositoryPickerView .pickerSelectionList {
    background-color: #E1EAF5;
}

.repositoryPickerView .repositorySelectedItem {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-bottom: var(--border-default);
    background: white;
    border-radius: 8px;
    margin-top: 16px;
    padding: 10px;
    overflow: hidden;
    height: 50px;
    font-size: 16px;
    color: #476E9A;
}

.hide {
    display: none !important;
}

.tapeCartridgeEraseDialog {
    line-height: 22px;
}

.create-support-btn {
    max-width: 238px;
}
.privacy-policy-request-support {
    max-width: 224px;
    max-width: 224px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
}

.two-column-a-row {
    align-items: center;
    display: grid;
    grid-template-columns: fit-content(400px) fit-content(300px) 1fr;
    margin-top: 3px;
}

.left-column-a-row {
    width: fit-content;
}

.right-column-a-row {
    display: grid;
    grid-template-columns: fit-content(100px) fit-content(200px);

}

.two-column-a-row .simple-checkbox {
    width: fit-content !important;
    margin-right: 20px;
    height: 22px;
    line-height: 22px;
}

.two-column-a-row .simple-number-field {
    flex-grow: 1;
    margin-right: 10px;
}

.container-middle-flex-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.container-middle-flex-box  .checkbox-container.x-form-item,
.container-middle-flex-box .check-box-v3-control .check-box-v3,
.container-middle-flex-box .check-box-v3-control .boxLabelCls {
    width: fit-content !important;
}