/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/*Z index main plan :

 - Mask : 20000
 - Notification : 1500
 - Popup : 1000
 - rightOverlayV2 : 1000

*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

:root{
    --color-red-darker:rgb(122, 0, 0);
    --color-red:rgb(189, 0, 0);
    --color-red-lighter:rgb(234, 174, 174);

    --color-green-darker: rgb(40, 127, 6);
    --color-green: rgb(80, 198, 16);
    --color-green-light: rgb(143, 218, 103);
    --color-green-lighter: rgb(198, 236, 177);
    --color-green-lightest: rgb(225, 245, 214);

    --color-orange-darker: rgb(209, 91, 0);
    --color-orange: rgb(255, 140, 0);
    --color-orange-lighter: rgb(255, 218, 173);
    --color-yellow-lightest: rgb(254, 244, 215);

    --color-slate-dark: rgb(20, 28, 31);
    --color-slate: rgb(31, 42, 46);
    --color-slate-lightest:rgb(80, 107, 119);

    --color-gray: rgb(154, 178, 188);
    --color-gray-light: rgb(203, 215, 220);
    --color-gray-lighter: rgb(230, 236, 239);
    --color-gray-lightest: rgb(239, 243, 245);

    --color-blue-lightest: rgb(214, 242, 255);

    --color-odd-row-color: white;
    --color-even-row-color: #f7fbfc;
    --color-hover-row-color: #D6F2FF;
    --color-grid-border: #ececec;

}

/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/*PAGE STRUCTURE ELEMENTS*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/* Default behaviors */
*, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }  /* A comment would be appreciated here about why box-sizing would not be enough. It seems supported by all browsers. */
* {margin:0px; padding:0px; border:0px; border-color:var(--color-grid-border); font-family: 'Open Sans',Helvetica, Arial, sans-serif;}
html {height: 100%; }
body {margin:0px; font-size:12px; height: 100%; line-height: 17px; background-color: #F1F4F6;}
ul {padding-left:20px;}
em {color:var(--main-color);}
option {padding-left:2px; }
pre { white-space: pre-wrap; word-wrap: break-word; }
a {text-decoration:none;color:black;}

/* Should be explained here (or fixed) where h2/h3/h4 are supposed to be used, why it doesn't start with h1, why colors here are not picked from the above variables, ...  Or maybe this belongs to the "pageStructure" section and not the "default behaviors" */
h2 {padding-left:15px; color:#192226; font-size:16px; line-height: 59px; width: 100%; font-weight: normal; border-bottom:var(--color-gray-light) solid 1px; background: white; white-space: nowrap;display: flex;}
h2 > i {text-overflow: ellipsis;white-space: nowrap;overflow: hidden; padding-right: 2px; max-width: 400px;}
h3 {text-align: left; margin:0px; padding:10px 20px; color:#1E1E1E; font-size:14px; width: 100%; font-weight: 600; line-height:20px; border-bottom: var(--color-gray-light) solid 1px;}
h4 {text-align: left; margin:0px; padding:10px 10px; color:#1E1E1E; font-size:16px; width: 100%; font-weight: 600; line-height:20px;}

/* Useful standard classes, that can be used by everybody. */
.centered { display:block; margin:0px auto 0px auto;}
.hidden {display:none;}


/*Page top*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#topBarZone{border: 1px solid var(--color-gray-light);}
#topBarZone {height:60px;display: flex;flex-direction: row;font-size:18px;position:relative;line-height:27px;padding:10px;vertical-align: middle;background-color: white;border-bottom: var(--color-gray-light) solid 1px;}

#topBarZone .left {float: left; top:0px; left:0px; padding:0px 5px 0px 40px;}
#topBarZone .right {float: right;display: flex;flex-direction: row;justify-content: flex-end;width: 50%; position:relative;}
#topBarZone .ui-effects-wrapper {display:inline-block;}
#topBarZone img {max-height: 40px;}
#topBarZone .right .submenu {width: auto;}/*IE 11 COMPATIBILITY: because IE doesn't understand width: max-content*/
#topBarZone .right .submenu {flex-direction:column; position:absolute; right:10px;}
#topBarZone #logoZone {display: flex; flex-direction: row; align-items: center; width: 50%;}

/*Test banner */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#testBannerZone {height:27px; color:var(--color-orange-darker); font-size:12px; line-height:27px; background-color:var(--color-orange-lighter); width:100%;}
#testBannerZone .testicon {display:inline-block;padding: 0px 10px 0px 20px;font-size: 18px;}

#ie11BannerZone {height:28px; color:var(--color-orange-darker); font-size:12px; line-height:27px; background-color:var(--color-orange-lighter); width:100%;}
#ie11BannerZone .testicon {display:inline-block;padding: 4px 10px 0px 20px;font-size: 18px;}

/*Hub selector*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#hubSelectorContainer { cursor: pointer;  font-size: 14px; font-weight: 600; position: relative; }

/*Help selector*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#helpSelector div {padding:0px 10px 0px 10px; color:#333333;}
#helpSelector div:hover {color:var(--color-gray-light);}

/*Tabs*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.tabs {background: white;height: 40px;width: 100%; border-radius: 5px;}
.tabs a {margin-left: 20px;height: 20px;width: 51px;color: #506C78;font-size: 14px;font-weight: 600;line-height: 40px;padding-left: 5px;padding-right: 5px; cursor: pointer;}
.tabs a.active {color: #192226;border-bottom: 2px solid #192226;padding: 0px 5px 10px 5px;}
.tabs .error a {color: var(--color-red); text-decoration:none;}
.tabs .error a.active {border-color: var(--color-red);}
.line {height: 50px;margin: 0px 20px;width: 1px;border-left: 1px dashed var(--color-gray-light);}


/*Level 1 and 2 menus (specific to landing page structure) */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.level1menu{border-bottom:1px var(--color-gray-light) solid;}
.level1menu .submenu {margin-left:50%;}

.level2menu {border-bottom:1px var(--color-gray-light) solid;}
.level2menu .submenu {margin-left:50%;}
#httpFlowDetailZone .level2menu{min-width: 680px}

.multiHubModeButton{ margin-left: 20px;}

#topRightZone {font-size: 14px;vertical-align: middle;line-height: 40px;float: right;display: flex;flex-direction: row;align-items: center;height: 100%;  margin-left: auto;order: 2;}
#topRightZone .actionLink {margin:10px 15px 6px 0px;}
#topRightZone .menuicon {display:inline-block;padding: 0px 10px 0px 20px;font-size: 18px;}
#topRightZone .menuicon.noLeftPadding {padding-left: 0px;}
#topRightZone a:hover{cursor: pointer;}


/* "drop down menus" - for hub selector, admin menu, document and component menus*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.dropdownmenu {display: inline-block;position: relative;}
.submenu a {line-height:20px;margin-left: 0px}
.submenu a.active{border:0px; padding:0px;}
.submenu {width: auto;}/*IE 11 COMPATIBILITY: because IE doesn't understand width: max-content*/
.submenu, #topBarZone .right .submenu{
    padding: 15px 20px;
    width:max-content;
    border: 1px solid var(--color-gray-light);
    background-color: white;
    border-radius:5px;
    box-shadow: 0 5px 10px 0 rgba(88,124,141,0.1);
    line-height: 20px;
    position: absolute;
    z-index: 50;
}
.submenu p{ padding:5px 0px;}


/*alerts menu*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.alert-counter{ background: Tomato; border-radius: 1em; color: white; height: 1.5em; line-height: 1; max-width: 5em; min-width: 1.5em; overflow: hidden; font-size: 9px; padding: .25em; width: 20px; text-overflow: ellipsis; top: -5px; right: -10px; display: inline-block; position: absolute; text-align: center;}
.homeMessage  {border-bottom: 1px solid #d3d3d3;padding: 20px 0px 20px 0px;color: #0071b4;}
.homeMessage a {text-decoration: underline; color: #0071b4;}

/*admin menu*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#adminmenu .adminlinks {padding:5px 0px;margin: 5px 0px;border-top: 2px solid var(--color-gray-light);border-bottom: 2px solid var(--color-gray-light);color: #648897;font-size: 12px;font-weight: 600;line-height: 20px;}
#adminmenu #topAdminLogout {color: #192226;}
.ui-state-default a.label,a.label, #hubSelector.admin .hubSelectorIntro{font-size: 12px;font-weight: 600;color: #648897;}
.ui-state-default a.label:hover, a.label:hover, #hubSelector.admin .hubSelectorIntro:hover{color: var(--main-color);}


/*Specific to full page structure*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

h2 #topRightZone .submenu{top:32px;}
h2 .line  { height: 50px; display: inline-block; margin-top: 5px; position: relative; left:10px} /* (used to be position:fixed in a display:block layout) because it is in a h2, position fixed is the only way to get the 50px height. This implies the useage of the margin anf the padding-left on the next element (41 = 20+20+1)*/
h2 #hubSelectorContainer { display: inline-block; padding-left: 21px}


/*Page background*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.backdrop{margin: 15px;position:relative;border: 1px solid var(--color-gray-light);border-radius: 5px;box-shadow: 0 5px 10px 0 rgba(88,124,141,0.1); background-color:white;}


/* Top Page Info Ribbons*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.infoRibbon {
    border-bottom:1px solid var(--color-gray-light);
    color:black;
    background-color:var(--color-blue-lightest);
    display:block;
    padding:10px 5px 10px 20px;
    font-size: 14px;
}

.infoRibbon .relatedItem{
    text-decoration: underline;
}

.infoRibbon .closer {right:10px; cursor:pointer; font-size: 18px; height: 30px; width: 30px;padding-left: 10px;float: right}

.warningRibbon {
    color:black;
    background-color:var(--color-orange-lighter);
    display:block;
    padding:10px 5px 10px 20px;
    font-size: 14px;
}

/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/*Right panel V2 */

/* Make right overlay work. */
.rightOverlayV2 { position:fixed; right:0px; top: 0px; height: 100%; min-width:300px; max-width:50%; z-index: 1000; display: flex; flex-direction: column; background-color: white;
    box-shadow: -5px -5px 11px -4px rgba(0,0,0,0.33);  animation-name: slideRight; animation-duration: 1s; }
.rightOverlayV2>.title { line-height: 60px; text-transform: uppercase; height : 60px; border-bottom: var(--color-gray-light) solid 1px;}
.rightOverlayV2>.title>h2{ display:block; padding-left: 20px; text-overflow: ellipsis; overflow: hidden; max-height: 60px; white-space: nowrap; padding-right: 30px; background-color: white; border: 0px;}
.rightOverlayV2>.content { flex-grow: 1; overflow-y: auto; height: calc(100% - 4px);}
.rightOverlayV2>.resize { display:block; position: absolute; top:0; left:-5px; z-index: 10001; cursor: col-resize; height:100%; width: 5px; }
.rightOverlayV2>.resize:hover { background-color: var(--main-color) }
.rightOverlayV2>.actions { width: 100%; padding: 10px 20px; background-color: white; border-top: var(--color-gray-light) solid 1px;}

.rightOverlayV2>.actions.disabled { pointer-events: none; opacity: 0.5; }

/* Adapt other components when they are in right overlays. */
.rightOverlayV2>.actions button, .rightOverlayV2>.actions a.actionLink { width: 100%; float: initial; padding-left: 0px; padding-right: 0px; margin: 10px auto auto auto; display: block; max-width: 320px; }
.rightOverlayV2 .parametersSection {min-width:100%;max-width: 100%;width:100%;}
.rightOverlayV2 .pickerBlock {margin:10px 20px 10px 20px;}
.rightOverlayV2 .picker input, .rightOverlayV2 .picker textarea, .rightOverlayV2 .picker select, .rightOverlayV2 .currentFile, .rightOverlayV2 div.picker .selectWithAside, .rightOverlayV2 div.picker.selectWithAside, .rightOverlayV2 .picker.FileInfo { width:100%; text-overflow: ellipsis;}
.rightOverlayV2 .formTable>tbody>tr>td:first-child {padding: 5px 0px 5px 16px; width: 170px;}



/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* Notifications */
.notifications { position:fixed; width:380px; left:calc(50vw - 190px); top:100px; display:flex; flex-flow: column nowrap; align-items: center; z-index: 1500; }
.notifications .notification { position:relative; background-color: white; border : solid 1px lightgrey; border-radius: 5px; font-size: 14px; line-height: 20px; width: 100%; padding:30px; }
.notifications .notification .text {text-align: center;overflow-wrap: break-word;}
.notifications .notification .text li{ text-align: start; }
.notifications .notification .icon { font-size: 30px; display:flex; flex-flow: column nowrap; align-items: center; padding-bottom: 20px; }
.notifications .notification .close { position: absolute; right:10px; top:10px; cursor: pointer;}
.notifications .notification.success .icon { color: var(--color-green); }
.notifications .notification.info .icon { color: var(--main-color); }
.notifications .notification.warning .icon { color: var(--color-orange); }
.notifications .notification.error .icon { color: var(--color-red); }

/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/*selfServicePopups*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.selfServicePopupBase {position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 1200;display:none;}
.selfServicePopupBase.mask {background-color: rgba(25,34,38,0.8);}
.selfServicePopup {position: relative; background-color: white; border : solid 1px lightgrey; border-radius: 5px; line-height: 20px; overflow: auto; min-width: 380px;max-height: 700px;z-index: 1201; opacity: 1;margin: auto;top:100px;padding-bottom: 20px; display: flex;flex-direction: column;}
.selfServicePopup .icon{ padding: 0px 40px 00px 40px; margin-bottom: 0px; text-align: center; position: relative; background-color: white; }
.selfServicePopup.withGrid{padding-bottom: 0}
.selfServicePopup .icon.empty{ padding: 0; }
.selfServicePopup.passive .icon { margin-top: 10px; }
.selfServicePopup .icon.info	    { color: var(--main-color); }
.selfServicePopup .icon.success     { color: var(--color-green); }
.selfServicePopup .icon.warning     { color: var(--color-orange); }
.selfServicePopup .icon.error       { color: var(--color-red); }
.selfServicePopup .selfServicePopupTitle{font-size: 14px;line-height: 20px;text-align: center;margin-top: 10px;}

.selfServicePopup.largeA4 .selfServicePopupScrollContainer{ max-height: 75vh !important; }
.selfServicePopup .selfServicePopupScrollContainer { margin-top: 30px; text-align: center; position: relative; overflow-wrap: break-word; padding: 0 40px 20px; overflow-y: auto; }
.selfServicePopup .selfServicePopupScrollContainer:last-child { padding-bottom: 0px; }
.selfServicePopup .selfServicePopupScrollContainer ul li { text-align: left; }
.selfServicePopup .selfServicePopupScrollContainer+.selfServicePopup.buttons { padding-top: 0; }
.selfServicePopup .selfServicePopupScrollContainer .pickerBlock{ margin: 0 0 0 0 ; }
.selfServicePopup .selfServicePopupScrollContainer .pickerBlock .pickerDescription.needDisplayFlex{ display: block; }
.selfServicePopup.withGrid .selfServicePopupScrollContainer{padding: 0}
.selfServicePopup .picker input, .selfServicePopup .picker textarea, .selfServicePopup .picker select { width:100%; }
.selfServicePopup .selfServicePopupAction{ display: flex; height: 30px;flex-direction: row-reverse;}
.selfServicePopup .selfServicePopupAction .removeIcon { position: absolute; right:10px; cursor: pointer;}
.selfServicePopup:hover .selfServicePopupAction .removeIcon {visibility: visible}
.selfServicePopup .selfServicePopupAction .removeIcon {visibility: hidden}
.selfServicePopup .buttons{ padding-left: 40px; padding-right: 40px; display: flex;flex-direction: column; align-items: center;}
.selfServicePopup .buttons button{min-width: 150px}
.selfServicePopup .buttons button.actionLink{ margin: 0; display: block;align-self: center; }
.selfServicePopup .buttons button.actionLink:not(:first-of-type){ margin-top: 10px; }
.selfServicePopup:not(.small):not(.medium):not(.large):not(.largeA4){ max-width: 380px; }
.selfServicePopup.small:not(.passive){ width:auto; min-width: 570px; max-width: 570px;}
.selfServicePopup.medium:not(.passive){ width:auto; min-width: 760px; max-width: 760px;}
.selfServicePopup.large:not(.passive){ width:auto; min-width: 1140px; max-width: 1140px; }
.selfServicePopup.largeA4:not(.passive){ width:auto; min-width: 1293px; max-width: 1293px; }
.selfServicePopup.passive { padding:0px 40px 0px 40px;  height: 80px; min-height: unset; overflow: hidden; margin-top: 0px; }
.selfServicePopup.passive > div  { overflow: hidden; margin-top: 5px; }

/* Calendar in popup adjustments */
.selfServicePopup #maxCreationDateDisplayPlaceholder, .selfServicePopup #maxCreationMomentDisplayPlaceholder, .selfServicePopup #minCreationDateDisplayPlaceholder, .selfServicePopup #minCreationMomentDisplayPlaceholder { position: fixed; z-index:100;}
.selfServicePopup #maxCreationDateDisplayPlaceholder .tempus-dominus-widget, .selfServicePopup #maxCreationMomentDisplayPlaceholder .tempus-dominus-widget, .selfServicePopup #minCreationDateDisplayPlaceholder .tempus-dominus-widget, .selfServicePopup #minCreationMomentDisplayPlaceholder .tempus-dominus-widget { position: fixed; z-index:101;}

/* Specific global search */
.selfServicePopup.globalSearchPopup .selfServicePopupScrollContainer{
    overflow: hidden;
}
.selfServicePopup.globalSearchPopup .selfServicePopupScrollContainer{
    overflow: hidden;
}
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/*user messages */
.userMessage { color: white;border: 1px solid; margin: 10px 0px 10px 0px; padding:10px 10px 10px 50px; background-repeat: no-repeat; background-position: 15px 8px;  }
.userMessage.error {color: var(--color-red);}
.userMessage.info {color: var(--main-color);}
.userMessage.warning {color: var(--color-orange);}

/*Cards*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/*Cards - when putting a cardContent block inside a cardContainer block it centers one within the other with a TS card styling*/
.cardContainer {
    text-align:center;
}
.cardContent {
    margin:20px;
    border: 1px solid var(--color-gray-light);
    border-radius:5px;
    box-shadow: 0 5px 10px 0 rgba(88,124,141,0.1);
    display:inline-block;
    text-align:left;
    background: white;
    width: calc(100% - 40px);
}
.cardContent.callCard{
    margin:0px;
}

.cardContent .expandableGroup{
    color: #192226;
    font-size: 14px;
    font-weight: 600;
    line-height: 40px;
}

.expandableTitle {
    padding-left:10px;
    display:inline-block;
}

.expandableGroup div.icon {
    display:inline-block;
}

.expandableGroup .cropped.icon, .expandableGroup .expanded.icon{
    float:right;
    padding:13px;
}

.expandableGroup .expanded.content {
    display:block;
    width: 100%;
    border-top: 1px #CCD8DD solid;
}

.smallCardContent {
    margin:4px;
    border: 1px solid var(--color-gray-light);
    border-radius:5px;
    box-shadow: 0 5px 10px 0 rgba(88,124,141,0.1);
    display:inline-block;
    text-align:left;
    width: calc(100% - 5px);
}

.smallCardContentAside .columnItem{
    margin: 0px;
    width: 100%;
}

.smallCardContentAside {
    margin:10px;
    border: 1px solid var(--color-gray-light);
    border-radius:5px;
    box-shadow: 0 5px 10px 0 rgba(88,124,141,0.1);
    display:inline-block;
    text-align:left;
    width: calc(100% - 20px);
    background-color: white;
}

.smallCardContentAsideEdit {
    margin:10px;
    border: 1px solid var(--color-gray-light);
    border-radius:5px;
    box-shadow: 0 5px 10px 0 rgba(88,124,141,0.1);
    display:inline-block;
    text-align:left;
    width: calc(100% - 20px);
    background-color: white;
}

.smallCardContentAside .information .infoicon{
    display:inline-block;
    padding: 0px 10px 0px 20px;
    font-size: 18px;
    color:#00B0FF;
}

.smallCardContentAsideEdit .information .infoicon{
    display:inline-block;
    padding: 0px 10px 0px 20px;
    font-size: 18px;
    color:#00B0FF;
}

div.softPanel {
    width: auto;
}
.softPanel {
    width: calc(100% - 8px);
    margin: 4px;
    background-color: white;
    border-bottom: lightgrey;
    border-bottom-width: thin;
    border-bottom-style: dot-dash;
    table-layout: fixed;
    word-break: break-all;
}

.softPanel .actionLinks{
    margin:auto;
    display: flex;
    flex-direction:column;
    align-items: center;
    width: 270px;
}

.softPanel .actionLinks button{
    margin:10px;
}

.softPickerLabel { text-align: left; padding:4px 7px 3px 7px; font-size:10px; line-height:25px; font-weight:800; text-transform: uppercase; }
.softPickerValue { text-align: left; padding:4px 7px 3px 7px; font-size:10px; }


/*Split Panel*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/*Used in related items and message detail page. Note that not independent requires specific CSS on parent div, put a .splitPanel parent? */

div.leftPanel{float:left;width:50%;margin-top: 10px;margin-bottom: 10px}
div.leftPanel h4{margin: 20px 0px 0px 20px; padding: 0px;}
div.rightPanel{border-left: 1px solid;border-color: var(--color-grid-border);margin-top: 10px;margin-bottom: 10px;width: 50%; overflow: hidden;}
div.rightPanel h4{margin: 20px 0px 0px 20px; padding: 0px;}

div.leftPanelMessageDetail{float:left;width:50%;}
div.rightPanelMessageDetail{width: 50%; overflow: hidden;}





/*PAGE ELEMENTS*/

/*Channel steps bar*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/


.smallHline {width: 30px;border-bottom: 1px solid #829FAB;margin: 0px 10px;display: inline-block;/* line-height: 0px; */margin-bottom: 4px;}


.fa-circle {
    color: #bbb;
}

.active .fa-circle {
    color: var(--main-color);
}

:not(.active) .stepTitle:hover span:not(.stepText), :not(.active) .stepTitle:hover .fa-circle{
    color: var(--main-color);
}

.dot {
    height: 30px;
    width: 30px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

.active .dot {
    background-color: var(--main-color);
    margin: auto;
}

.stepTitle {
    position:relative;
    margin-left: 10px;
}

.channelSteps {
    padding:13px 20px;
    font-size: 14px;
    background-color: #F1F4F6;
    display: flex;
    flex-direction: row;
}

.channelStep {
    display: flex;
    align-items: center;
    vertical-align:middle;
    height:40px;
    line-height: 20px;
}

.channelStep .inlineLink.level6 {
    font-size: 12px;
}

.channelStepsBar {
    height: 65px;
}

.channelStep .dot:before{
    font-family: "Font Awesome 6 Pro";
    font-size: 1.25em;
    width: 1.25em;
    font-weight: 300;
    color: white;
    position: absolute;
    top: 65px;
    padding-left: 7px;
}

.channelStep.add .dot:before{
    content: "\f067";
    top: 64px;
}

.channelStep.refresh .dot:before{
    content: "\f021";
    top: 65px;
    padding-left: 6px;
}

.channelStep.okIcon .dot:before{
    content: "\f00c";
}

.channelStep.inError .dot:before{
    content: "\f071";
    padding-left: 5px;
    top: 63px;
}

.channelStep.inRedErrorDot .dot:before{
    content: "\f00d";
    padding-left: 9.5px;
    top:64.5px;
}

.inRedErrorDot .dot {
    background-color: var(--color-red);
}

.inRedError {
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
}

.channelStep.messageDetail .dot:before{
    top:24px;
}

/*Used in channel status tag. Check if still actively used.*/
.deployAction {padding: 0px 10px 0px 20px; line-height: 40px;}
.deployAction a {text-decoration: underline;color: var(--main-color);cursor: pointer;}
.deployAction a.inactive{color: #bbbbbb;}
.deployAction.tooltip .tooltiptext, .channelStatusSlider.tooltip .tooltiptext{left: -50%; top: 35px; min-width: 150px; max-width: 150px;}

/* Check if still used - don't think H2 still used*/
h2.channelDetail{border-style: none;}


/*Grids*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/*Used for Channel and Connector status column*/
.fa-circle.active{color:var(--color-green);}
.fa-circle.inactive{color:var(--color-red);}

/*Used for column status on messages list page*/
.messageStatus{
    vertical-align: inherit;
}
.ui-jqgrid {
    height: 100%;
}

.ui-jqgrid tbody tr.ui-row-ltr.ui-state-hover td .inlineLink {color:black; text-decoration:underline;} /* Lookuptable */


/* To remove the 2px of padding at the bottom of "Showing 1-x..." in the pager of a list */
div.ui-jqgrid-pager div table.ui-pg-table{
    padding-bottom: 0;
}


/* Purpose was to force a highlight on the row whose detail is presented in a right panel*/
.ui-jqgrid tbody tr:nth-child(even).ui-row-ltr {background-color: var(--color-even-row-color) !important ;}
.ui-jqgrid tbody tr:nth-child(even).ui-row-ltr.ui-state-hover, .ui-jqgrid .ui-row-ltr.ui-state-hover, .ui-jqgrid .ui-row-ltr.ui-state-highlight, .ui-jqgrid tbody tr:nth-child(even).ui-row-ltr.ui-state-highlight{
    background-color: var(--color-hover-row-color) !important;
}

.fadedGrid {opacity:.5}
.ui-jqgrid tr.jqgrow td{
    height: 40px;
    padding: 10px;
}

.ui-jqgrid .ui-jqgrid-htable .ui-sortable th, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column{
    padding: 0px 10px 0px 12px;
    height: 30px;
}

.ui-jqgrid .ui-jqgrid-htable .ui-search-toolbar th {
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.ui-jqgrid tr.jqgfirstrow td {
    padding-left: 10px;
    padding-right: 10px;
}

.columnItem { height: 38px; cursor: pointer; margin:1px 10px 0px 10px; padding: 7px; overflow: hidden; text-overflow : ellipsis; white-space: nowrap; font-size: 12px;
    font-weight: 600; line-height: 20px; border-radius: 3px; width: calc(100% - 20px); }
.columnItem:hover { background-color: var(--main-color); color: white; }




/*https://tradeshift.atlassian.net/browse/BABELWAY-7865*/
@-moz-document url-prefix() {
    .ui-jqgrid .ui-jqgrid-htable th div {
        overflow: visible !important;
    }
}



/*Loading and spinners*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.loading {text-align:center; padding:15%}
.loading .message {font-size:14px;  line-height: 17px;  text-align:center; margin-top:15px;}
.loading .spinner .fa-circle-notch {color: var(--main-color);    height:80px;    font-weight: 400;    font-size:80px; text-align:center;}



/*Links*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/* Actions Link.
Actions are just a text in a span surrounded by a button or a <a> tag.
	The outer button has the following classes :
	- actionLink
	- level1, level2, level4, level5 or level6
	- active or inactive
	- A class that tells the action ('add', 'cancel', 'delete', ...).
	The clickable effect is made with an onclick on the outer button or the <a> tag.
 */

.actionLink {background-color: grey;} /*IE 11 COMPATIBILITY*/


.actionLink {
    border: none;
    font-size: 14px;
    margin:0px 0px 0px 10px;
    text-align: center;
    font-weight: 400;
    box-sizing:content-box;
    float: right;
    border-radius: 20px;
    user-select: none;
    height: 20px;
    min-width: 40px;
    max-width: 100%;
    padding: 9px 10px;
    position: relative;
    display: inline-block;
    cursor:pointer;
}

.actionLink:focus {outline: 0;}

.actionLink>span {
    background-repeat:no-repeat;
    background-position:left center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 600;

    text-overflow: ellipsis;
    padding: 0 10px;
    line-height: 20px;
    margin-top: -2px;
    white-space: nowrap;
    word-wrap: normal;
    position: relative;
    overflow: hidden;
    outline:none;
}
.actionLink.loading>span {background-image: url("../images/common/actions/loader.gif") !important;}
.inlineLink.loading>span {background-image: url("../images/common/actions/loader.gif"); background-repeat: no-repeat}
.inlineLink.loading {padding: 0px; }


.actionLink.level1 { background-color:var(--main-color); color: white; border: 1px solid var(--main-color);}
.actionLink.level1.active:hover { opacity: 0.7; }
.actionLink.level1.active:focus { border-color:var(--main-color) }
.actionLink.level1.active:focus:before {filter: brightness(85%);}
.actionLink.level1.inactive{background-color:  var(--color-gray-light);border: 1px solid var(--color-gray-light);opacity: .5;cursor: not-allowed;}


.actionLink.level2 { background-color:rgba(255, 255, 255, 0.5); color: rgb(15, 21, 25); border: 1px solid var(--color-gray-light);outline:none;}
.actionLink.level2.active:focus:before{ border-color:var(--main-color) }
.actionLink.level2:hover { background-color: hsla(198,20%,83%,.5); }
.actionLink.level2.inactive{background-color:  var(--color-gray-light);border: 1px solid var(--color-gray-light);opacity: .5;cursor: not-allowed;}

.inlineLink.level4{
    height: 20px;
    max-width: 200px;
    background-color: var(--main-color);
    color:white;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border: 0px;
    outline: none;
    cursor: pointer;
}
.inlineLink.level4.active{color: white;}
.inlineLink.level4.active:hover{color:white;opacity: 0.7;}
.inlineLink.level4.inactive{background-color:  var(--color-gray-light);}

.inlineLink.level5{padding-left: 10px;padding-right: 10px;border-radius: 20px;font-size: 11px;font-weight: 600;text-transform: uppercase;}
.inlineLink.level5.active{color: black;background-color: white;border: 1px solid var(--color-gray-light);outline: none;}
.inlineLink.level5.active.focus{outline:none;}
.inlineLink.level5.active:hover{color: black;text-decoration: none;background-color: hsla(198,20%,83%,.5);cursor:pointer;}
.inlineLink.level5.inactive{color:  #c6c6c6;}
.inlineLink.level5.expandAll { margin-right: 8px;}

button.level6{outline: none;}
.inlineLink.level6{white-space:nowrap;background-color:transparent;font-size: 14px;line-height: 20px;}
.inlineLink.level6.active{color: var(--main-color);}
.inlineLink.level6.active:hover{color:var(--main-color);text-decoration:underline;cursor:pointer;}
.inlineLink.level6.inactive{color:  #c6c6c6;}

.actionBar {
    margin-top: 20px;
    padding: 10px;
    background-color: #F1F4F6;
    height: 60px;
    border-top:1px solid #ccd7dd;
    border-radius: 0 0 3px 3px;
    width: 100%;
    text-align: right;
    position: sticky;
    right: 0;
    bottom: 0;
    z-index: 45;
}
#channels_channelDetailRouting .actionBar{
    position: static;
}

/* To not have 20px of margin top on the action bar if it's a jqgrid above that actionbar*/
.ui-jqgrid ~ .actionBar, #changeLogGrid ~ .actionBar, #statisticGrid ~ .actionBar, #tree ~ .actionBar, #pdfMDTree ~ .actionBar{margin-top: 0;}

.linkcentered {
    float: initial;
}

.linkright {
    float: right;
    margin-top: 2px;
}



/*Tooltips*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.no-display {display: none;} /*only seems to be used with tooltip and .hidden already exists for "general purposes"*/

.tooltip-container {
    transform: translateZ(0);
    position: absolute;
    opacity: 1;
    z-index: 20000;
    max-width: 300px;
    min-width: 50px;
    max-height: 500px;
    background-color: black;
    color: white;
    font-weight: normal;
    border-radius: 6px;
    padding: 5px;
    font-size: 13px;
    text-transform: none;
    text-align: left;
    line-height: 20px;
    word-break: break-word;
    border-style: solid;

    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tooltip-container::after {
    position: absolute;
    display: block;
    content: "";
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltiptext {
    visibility: hidden;
    max-width: 300px;
    min-width: 250px;
    max-height: 400px;
    background-color: black;
    color: white;
    font-weight: normal;
    border-radius: 6px;
    padding: 10px;
    font-size: 13px;
    position: absolute;
    z-index: 1;
    text-transform: none;
    top: -5px;
    left: 105%;
    text-align: left;
    overflow: auto;
    line-height: 20px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

#messageShortDetailContent .tooltip .tooltiptext {
    top: 30px;
    left: 0px;
}

.oneline {
    overflow: hidden;
    text-overflow: ellipsis;
}


/*Forms*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/* Nothing clear here : what is a formTable, a pickerBlock or a parametersSection. Same goal ? . */

/*check if still useful - check for colors (vars)*/
/* FormDiv. When you have to display things like in formTable, but in only one zone. */
.formDiv {border:1px solid var(--color-grid-border);background-color: #FDEAB3;display:block;padding: 10px 10px 10px 20px;color: #192226;font-size: 14px;line-height: 20px;}

/*parametersSection */
.parametersSection,.parametersSubSection {position:relative;margin-top:10px;min-width:500px;}
.parametersSection legend,.parametersSubSection legend, .metaData legend, .rightOverlayV2 .legendMetaData,#httpFlowDetailZone legend {text-align: left; color:#192226; font-size:16px;line-height:20px; font-weight:600;display: inline-flex;white-space: nowrap;width: calc(100% - 40px);margin:0 10px 10px 20px;padding: 10px;}
#httpFlowDetailZone legend{font-size: 14px;}
.parametersSection legend:before, .parametersSection legend:after, .metaData legend:before, .metaData legend:after, .rightOverlayV2 .legendMetaData:after, .rightOverlayV2 .legendMetaData:before, #httpFlowDetailZone legend:before,#httpFlowDetailZone legend:after{border-top: 1px solid var(--color-gray-light);content: '';display: table-cell;position: relative;top: 10px;}
.parametersSection legend:before, .metaData legend:before, .rightOverlayV2 .legendMetaData:before,#httpFlowDetailZone legend:before{right: 10px;width: 20px;}
.parametersSection legend:after, .metaData legend:after,#httpFlowDetailZone legend:after {left: 10px;width:100%;}
.parametersSection legend div, .metaData legend div, .rightOverlayV2 .legendMetaData,#httpFlowDetailZone legend div {background-color:white; color: var(--main-color);}

.parametersSubSection {margin-top:15px;}
.parametersSubSection legend:before, .parametersSubSection legend:after {border-top: none}
.parametersSubSection legend:before{width: 0px}
.parametersSubSection legend div{background-color:white; color: #4f6b77;}

.requiredStar {color:var(--color-red);}

.pickerBlock.secondaryParam{ margin-left: 40px; }

/**
 - PickerBlock is a container (div) which reserve a specific space in a form or in a simple info page
This was create to be used with 2 div inside (even if it's not mandatory, you can just use as it) as a top/bottom view :
    - PickerLabel on the top, which define the title of the info/picker
    - PickerDescription below the Label, which is the picker itself OR the information

The name picker is because in a first time it was only for picker, but finally, we use it in multiple place to have the same design everywhere
 */

.pickerBlock {line-height: 60px; margin:10px 10px 0px 20px;}
.pickerDescription.needDisplayFlex{display: flex;align-items: baseline;}
.pickerDescription.needDisplayFlex button.reuseAndSaveTime{margin-left: 10px}
.pickerLabel { text-align: left; padding:4px 0px 3px 0px; color:#192226; font-size:12px;line-height:20px; font-weight:600; text-transform: uppercase; overflow-wrap: break-word; }
.pickerDescription { text-align: left; padding:4px 0px 6px 0px; color:#192226; font-size:12px;line-height:20px;word-break:break-word;}

/** Intermediate texts added before or between pickerBlocks */
form > p  {margin:10px 10px 0px 20px;}

.formTable tr>td:first-child input[type='text'] {width:170px;} /* Should only happen for add of properties. */


/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/* PICKERS */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/* Main rule in the code is that all pickers must have an enclosing html tag for all the code of the picker, and that this tag must
  have the classes "picker" and one class with the type of the picker (must be short class name of Java type picker by the picker. Ex : String, EmailAddress, Integer, ...).
  Also, all "input" elements (input, textarea, select, checkbox) will be marked with the class 'inError' if the analyzed value there has been analyzed as wrong.
  This one is not on the enclosing class because a picker can write multiple "input", and we want to know which precisely are or are not ok.
*/

/* Generic things for all pickers. */
input[type='text'],input[type='number'],textarea[type='text'],input[type='password'], select {padding:5px 10px 5px 10px; border:1px solid #ccd7dd;}
input[type='number'].picker {width:40px;}
input[type='file'].picker {background-color:white; }
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input:focus,select:focus{border: 1px solid var(--main-color); outline: none; box-shadow: 0 0 0 1px var(--main-color-lighter);}

.picker input, .picker textarea, .picker select { border:1px solid #ccd7dd; text-align: left; padding:5px 10px 5px 10px; color:#192226; font-size:12px; border-radius:3px; width:590px;}

.picker input:hover,.picker textarea:hover,.picker select:hover { border:1px solid var(--main-color);box-shadow: 0 0 0 1px var(--main-color-lighter);}
.picker input:focus,.picker textarea:focus,.picker select:focus { border:1px solid var(--main-color);box-shadow: 0 0 0 1px var(--main-color-lighter);}
.picker textarea {min-height:70px;}
.picker select{min-height: 30px; background-color: white; }
.picker select option {padding-left:5px; }
.picker .inError { border:1px solid var(--color-red);box-shadow: 0 0 0 1px var(--color-red-lighter);}
.picker .inError:hover { border:1px solid var(--color-red);box-shadow: 0 0 0 1px var(--color-red-lighter);}
.picker .inError:focus { border:1px solid var(--main-color);box-shadow: 0 0 0 1px var(--main-color-lighter);}

.errorMark{font-family: "Font Awesome 6 Pro"; align-self:center;font-size: 12px; color:var(--color-red); }
.picker .errorMark { margin-top: 5px;}
.picker .inputValid { border-color : var(--color-red); }
.picker .inputError { border-color: var(--color-green); }

/* Specific to selectWithAside, meaning single or multi-selects that opens a right overlay to show and select the values.
    The expected structure for a div selectWithAside is an inner div that displays the value, a span that draws the icons, and a hidden input for storing the value (and nothing else).
*/
div.selectWithAside { display:flex; border:1px solid #ccd7dd; text-align: left; padding:5px 10px 5px 10px; color:#192226; font-size:12px; border-radius:3px; width:590px;}
div.selectWithAside:hover { border:1px solid var(--main-color);box-shadow: 0 0 0 1px var(--main-color-lighter);}
div.selectWithAside>div { overflow: hidden; text-overflow: ellipsis; line-height: 17px; height: 17px; width: calc(100% - 17px); }
div.selectWithAside>span {float:right; padding: 4px 0px 0px 0px }
div.selectWithAside:hover>span { color: var(--main-color);}
#selectAsideOptions .content>.search { padding: 10px; }
#selectAsideOptions .content>.values { padding: 10px; }
#selectAsideOptions .content>.values .selectAsideOption { height: 38px; width:100%; margin: 2px 0px; padding: 6px; cursor: pointer; font-size: 12px; font-weight: 600; line-height: 20px;
    border-radius: 3px; overflow: hidden; text-overflow : ellipsis; white-space: nowrap; border : 1px solid transparent; }
#selectAsideOptions .content>.values .selectAsideOption.selected { background-color: var(--main-color); color: white; }
#selectAsideOptions .content>.values .selectAsideOption.disabled { color: var(--color-gray-light); }
#selectAsideOptions .content>.values .selectAsideOption:hover, #selectAsideOptions .content>.values .selectAsideOption.hovered { border:1px solid var(--ts-color-blue-dark); }
.compactView #selectAsideOptions .content>.values .selectAsideOption {height: 26px; padding-top:2px; padding-bottom:2px; }
#selectAsideOptions .content>.values>.moreItems { background-color: lightgrey; text-align: center; border-radius: 3px; }
#selectAsideOptions .content>.values>.noItems { color: lightgrey; text-align: center;  }
#selectAsideOptions .content>.values>fieldset { border-top: 1px solid var(--color-gray-light); font-size: 9px; margin-top: 12px; line-height: 10px; }
#selectAsideOptions .content>.values>fieldset>legend { margin: 0px 20px; padding: 0px 5px;}
#selectAsideOptions .toggleSelected { width:100%; display: flex; justify-content: center; margin: 2px 0px 6px 0px; }
#selectAsideOptions .content:focus { outline: none;}
/* Following is related to specific pickers that use selectWithAside. */
/* MessageRecordExportFieldArrayWTH. */
#selectAsideOptions .content>.values .selectAsideOption input { padding : 0px 5px; border : none; outline:none; box-shadow:none; font-size: 12px;}


/* Specific to one-field pickers of a given type. */
.picker.Date input[type='text'] {width:140px;}
.picker.SmtpUserName input[type='text'] {width:200px;}
.picker.BigDecimal input {text-align: right;}
.picker input[name="workPrefix"]{ width: 100px; margin-right:3px; margin-left: 0px;}
.picker input[name="workSuffix"]{ width: 100px;  margin-right:0px; margin-left: 3px;}
.picker textarea[name="supportText"]{min-height: 300px;}


/* Composite pickers (multiple fields on one line). */
.NemHandelParticipantIdentifier {display: inline-flex; align-items: baseline;}
.NemHandelParticipantIdentifierArray.picker > .errorMark {display: none;} /* At the end, I'm not sure if we want to hide at ArrayWebTypeHandler instead. */
.NemHandelParticipantIdentifier .picker input, .NemHandelParticipantIdentifier .picker textarea, .NemHandelParticipantIdentifier .picker select, .NemHandelParticipantIdentifier .currentFile, .NemHandelParticipantIdentifier .picker.NemHandelIdentificationScheme.selectWithAside, .NemHandelParticipantIdentifier .picker.FileInfo {width:150px;}
.emailElement {margin-bottom: 5px;}
.setMetadatas .AWTHElement .picker.NameValueDefinition,.validate .picker.NameValueDefinition,.variables .AWTHElement .picker.NameValueDefinition,.postExtraParameters .AWTHElement .picker.NameValueDefinition,.metadataFromLoginResponse .AWTHElement .picker.NameValueDefinition{max-width: 614px;width: 100%;}
.variables .AWTHElement .picker.NameValueDefinition .name,.postExtraParameters .AWTHElement .picker.NameValueDefinition .name,.metadataFromLoginResponse .AWTHElement .picker.NameValueDefinition .name{ max-width: 590px}
.variables .AWTHElement .picker.NameValueDefinition ~ .removeIcon,.postExtraParameters .AWTHElement .picker.NameValueDefinition ~ .removeIcon,.metadataFromLoginResponse .AWTHElement .picker.NameValueDefinition ~ .removeIcon {margin-left: -16px;}
.picker.NameValueDefinition input[type='text'] {width:100%;}
.picker.NameValueDefinition{ display: inline-flex; width: 590px}
.picker.NameValueDefinition.topDownDisplay{ display: block; }
.picker.NameValueDefinition ~ .removeIcon {margin-top: 36px;}
.picker .NameValueDefinitionItem { width: 50%; min-height: 60px;margin-right: 10px;}
.picker .NameValueDefinitionItem.topDownDisplay { width: 100%;margin-right: 0px;}
.picker .NameValueDefinitionItem .intro {line-height: 30px;}
.picker .NameValueDefinitionItem .selectWithAside {width:100%;}
.picker .NameValueDefinitionItem.threeItem{ width: 33%;}
.picker.UnwrapAttachmentDefinition input[type='text'] {width:155px;}
.picker.WrapAttachmentDefinition input[type='text'] {width:155px;}
.picker.ExtractMetadataRegexParameters input[type='text'] {width:150px;}
.picker.EncodingWithMetadata {display: flex; width: 590px; gap:10px; }
.picker.EncodingWithMetadata input {width:350px;}
.rightOverlayV2 .picker.PartnerIdentifier { display: grid}
.rightOverlayV2 .picker.PartnerIdentifier .separator { display: none}
.rightOverlayV2 .picker.PartnerIdentifier .picker.String {width:236px; margin-top: 5px}
.picker.PartnerIdentifier { display: inline-flex}
.picker.PartnerIdentifier .picker.Enum {width:100px;}
.picker.PartnerIdentifier .separator{margin: 5px 3px 5px 3px;}
.picker.PartnerIdentifier .picker.String {width:481px;}
.picker.PartnerIdentifier .picker.String input {width:100%;}
.picker.PartnerContact {display:inline-block; padding-bottom:8px; }
.picker.PartnerContact .intro {display:inline-block; width:75px; }
.picker.PartnerContact .intro, .PartnerContact input {margin-top: 5px;}
.picker.PeppolParticipantIdentifier select {width:140px;}
.picker.PeppolParticipantIdentifier input {width:140px;height: 30px;}
.picker.PdpParticipantArray input {width:120px;height: 30px;}
.picker.PartnerDataAccess {display: flex; justify-content: space-between; gap: 10px;line-height: normal;}
.picker .partnerDataAccessField {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1; /* Allows fields to grow and fill available space */
    flex-basis: 0; /* Makes fields flexible to distribute space equally */
}
.picker .partnerDataAccessField .label {margin-bottom: 8px;}
.picker .partnerDataAccessField select {width: 100%;padding: 8px;box-sizing: border-box;min-width: 200px;}
.picker .partnerDataAccessField input[type="checkbox"] {padding: 8px;box-sizing: border-box;width: auto; /* Ensure checkbox remains compact */}



.picker.HubElementCondition .HubElementSelector {display:flex; align-items:center; margin-top: 3px;}
.picker.HubElementCondition .HubElementSelector>.type {width: 230px; margin-right: 10px; }
.picker.HubElementCondition .HubElementSelector>.value {width: 350px;}
.picker.HubElementCondition .HubElementSelector>.value>* {width: 100%;}
.picker.HubElementCondition .HubElementSelector .removeRule {margin-left: 5px; color: var(--color-gray-light);}
.picker.HubElementCondition .actions {width: 590px; margin-top: 10px;}
.picker.HubElementCondition.reduced .title, .picker.HubElementCondition.reduced .actions.negative {display:none;}
.picker.HubElementCondition.expanded .actions.positive>.preview,.picker.HubElementCondition.expanded .actions.positive>.previewTitle, .picker.HubElementCondition.expanded .actions.positive .addException {display:none;}
.picker.HubElementCondition .actions .buttons{margin-bottom: 10px;}

.picker.MessageRecordCondition .MessageRecordConditionRule {display:flex; align-items:center; margin-top: 3px;}
.picker.MessageRecordCondition .MessageRecordConditionRule>.type {width: 280px; margin-right: 10px; }
.picker.MessageRecordCondition .MessageRecordConditionRule>.value {width: 300px;}
.picker.MessageRecordCondition .MessageRecordConditionRule>.value>* {width: 100%;}
.picker.MessageRecordCondition .MessageRecordConditionRule .removeRule {margin-left: 5px; color: var(--color-gray-light);}
.picker.MessageRecordCondition .actions {width: 590px; margin-top: 10px;}
.picker.MessageRecordCondition.reduced .title, .picker.MessageRecordCondition.reduced .actions.negative {display:none;}
.picker.MessageRecordCondition.expanded .actions.positive>.preview,.picker.MessageRecordCondition.expanded .actions.positive>.previewTitle, .picker.MessageRecordCondition.expanded .actions.positive .addException {display:none;}
.picker.MessageRecordCondition .actions .buttons{margin-bottom: 10px;}

    /*File Picker. Last 2 lines should also be scoped, but currently, this part is outside of the enclsoing div. To be fixed. */
.picker.FileInfo { border:1px solid #ccd7dd; text-align: left; padding:5px 10px 5px 10px; color:#192226; font-size:12px; border-radius:3px; width:590px; }
.picker.FileInfo { position: relative; display: flex; align-items: center; justify-content: space-between; background-color: white; cursor: pointer; height: 30px; overflow: hidden; }
.picker.FileInfo:hover { border:1px solid var(--main-color); }
.picker.FileInfo > span { background-color: var(--main-color); color: white; cursor: pointer; font-size: 12px; letter-spacing: 0.5px; display: unset; }
.picker.FileInfo label { margin-right: unset; }
.picker.FileInfo input { cursor: pointer; font-size: 100px; left: 0px; opacity: 0; position: absolute; top: 0px; width: 100%; }
div.mainAsideContent .picker.FileInfo {width: 100%;}
.downloadPatternFile{ margin-left:20px; }
.currentFile{width:590px; margin-top: 10px;}

/* Array pickers. */
.AWTHElement{ margin-bottom: 10px; display: flex;}
.AWTHElement.removeIcon{ margin-top: 3px;margin-left: 0}
.pickerArray.FieldDescription, .pickerArray.FieldDescriptionArray {border:none; line-height: 30px;}
.pickerArray.FieldDescription .name {width:220px; display:inline-block; vertical-align:top;}
.pickerArray.FieldDescription .name input {width:210px; }
.pickerArray.FieldDescription .type {width:345px; display:inline-block; vertical-align:top; }
.pickerArray.FieldDescription .type .selectWithAside { width:100%;}
.pickerArray.FieldDescription .type input {width:345px; }
.pickerArray.FieldDescription .type .DocumentType {width:285px; }
.removeIcon{font-family: "Font Awesome 6 Pro";font-size: 16px;color:var(--color-slate-lightest);margin-top: 7px;margin-left: 10px;cursor: pointer;vertical-align: top;height: 16px}
.removeIcon:hover{opacity: 0.7;}
#Arrayrecipients .removeIcon{margin-top: 0px;}
.checkboxContainer {display: block;position: relative;padding-left: 35px;margin-bottom: 30px;cursor: pointer;font-size: 12px;user-select: none;}
.checkboxContainer input {  position: absolute;  opacity: 0;  cursor: pointer;  height: 0;  width: 0;}
.checkmark { border:1px solid #ccd7dd;  position: absolute;  top: 0;  left: 0;  height: 19px;  width: 19px;  background-color: white;}
.checkboxContainer:hover input ~ .checkmark {  background-color: #eee;}
.checkboxContainer input:checked ~ .checkmark {  background-color: var(--main-color);}
.checkmark:after {  content: "";  border:1px solid #ccd7dd;  position: absolute;  display: none;}
.checkboxContainer input:checked ~ .checkmark:after {  display: block;}
.checkboxContainer input:checked ~ .checkmark {   border:1px solid var(--main-color);}
.checkboxContainer .checkmark:after { left: 6px; top: 2px; width: 7px; height: 12px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}
.checkBoxContainer {padding-right:8px;}
.checkBoxContainer label {padding-left:2px;}

/* FileMaps. */
.picker.FileMap input[type='text'].picker {width:155px;}
.picker.FileMap .justAdd {margin-top: 5px;}
.picker.FileMap .fileMapKey, .FileMap .fileMapFile{display: inline-block}
.picker.FileMap .fileMapKey .keyLabel, .FileMap .fileMapFile .fileLabel{line-height: 30px;}
.picker.FileMap .fileMapFile{margin-left: 10px;}
.picker.FileMap .FMWTHElement {min-height: 60px;}
.picker.FileMap .FMWTHElement .labelKey {padding:2px 0px 2px 3px; margin:2px 10px 2px 0px; width: 150px; }

/* MetadataMap picker. Should be scoped. */
input[type='text'].metadataKey {width:295px; margin-right:0px;}
input[type='text'].metadataValue {width:185px;}

/* Used for addMetadata right overlay, called from OFWTH. Should be migrated to V2 overlays. */
.metaData .metadataOption { height: 38px; width:100%; margin: 2px 0px; padding: 6px; cursor: pointer; font-size: 12px; font-weight: 600; line-height: 20px;
    border-radius: 3px; overflow: hidden; text-overflow : ellipsis; white-space: nowrap; border : 1px solid transparent; }
.metaData .metadataOption:hover { border:1px solid var(--ts-color-blue-dark); }
.compactView .metaData .metadataOption {height: 26px; padding-top:2px; padding-bottom:2px; }


/* LookupTablevalueSelector. Should be scoped. */
div.lookupTableValueSelector{ padding: 8px; margin: 3px;}
div.lookupTableValueSelector div.title{ font-weight: bold;}

/* Suspicious things, at least in this section. Is this really related to WebTypeHandlers ? To be sorted and scoped. */
.checkbox {position:absolute;left:-9999px;}
.checkbox {cursor: pointer;}
.checkbox + span:before { font-family: "Font Awesome 6 Pro"; content: "\f0c8"; font-weight: 300; font-size: 20px; color:#ccd7dd ; }
.checkbox:checked + span:before { font-family: "Font Awesome 6 Pro"; content: "\f14a"; font-size: 20px; font-weight: 900; color: var(--main-color);}
.ui-autocomplete{ background-color: white; }
.ui-autocomplete.ui-front{ border : 1px solid var(--color-gray-light);}
.ui-widget-content .ui-menu-item-wrapper.ui-state-active{ background-color: var(--main-color); }

/*Expression picker*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/
.expression{
    display: inline-flex;
    max-width: 590px;
    width: 100%;
    min-width: 590px;
}
.expression .ExpressionType{
    width: 95px;
    min-width: 95px;
    max-width: 95px;
}
.expression .picker.String{
    width: 100%;
    margin-left: 5px;
    display: inline-flex;
}
.expression.basic .picker.String{
    width: 100%;
    margin-left: 0px;
    display: inline-flex;
}
.expression.basic.metadataExpression .picker.String{
    min-width: 590px;
}
.expression.basic.constantExpression .picker.String{
    max-width: 590px;
}
.expression .picker.String input{
    height: 31px;
    width: 100%;
}
.expression .picker.String i{
    margin-top: 7px;
    cursor: pointer;
}
.expression .picker.String i:hover{
    opacity: 0.7;
}


/*Calendar*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/


.ui_tpicker_hour_slider, .ui_tpicker_minute_slider, .ui_tpicker_second_slider{
    background-color:var(--color-gray-light);
}

.ui-slider .ui-slider-handle.ui-state-default {
    background-color:var(--color-slate-lightest);
}

.calendarIcon{
    position:relative;
}

.calendarIcon i{
    position: absolute;
    top: 0px;
    left: -23px;
    font-size: 15px
}


/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/*                                                            SPECIFIC COMPONENTS                                                            */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/


/*Mapping*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/* Mask used to disable mapping changes while saving a transformation or when deploying connector*/
.blockingMask {background-color: #BBBBBB; height: 100%; left: 0; top:0; opacity: 0.7; position: fixed; width: 100%; z-index: 20000; }
.blockingMaskParams {background-color: #BBBBBB; height: 100%; left: 0; top:0; opacity: 0.4; position: fixed; width: 100%; z-index: 998; display: none}
.blockingText {position:fixed; left: 43%; top:45%; background: no-repeat scroll 5px 5px #EEEEEE; z-index: 20001; padding:5px 5px 5px 30px; border:2px solid #AAAAAA; }
.blockingHtml {position:fixed; left: 43%; top:45%; z-index: 20001; padding:5px 5px 5px 30px; }

#mappingFunction{
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 20px;
    padding: 4px;
}

#mappingFunction{
    color:#007AB4;
    border: 2px solid #007AB4;
}

#mappingFunction.highlighted{
    color: var(--main-color);
    border: 2px solid var(--main-color);
}

.trasformNextPreviousArrow{
    width: 24px;
    height: 24px;
    color: #9AB1BB;
}

/* Mapping tool. */
#Mapping {padding:10px 20px 0 20px;}
#mappingTool {position:relative; width:100%;}
#mappingToolStructure {width:100%; border:none; display: inline-flex; position:relative;}
#mappingTool .mappingMdZoneActions {height:52px; background-color:white; position:relative; }
#mappingTool .mappingMdZoneActions .mappingIterator {position:absolute; right:12px; margin: 7px 0px;padding: 10px 0px;}
#mappingTool .mappingMdZoneTree { width:calc(50% - 10px); position:relative; z-index:0; border: 1px solid var(--color-gray-light);border-radius: 3px;box-shadow: 0 5px 10px 0 rgba(88,124,141,0.1); }
#mappingTool .mappingMdZoneTree>div { width:100%; overflow-y:auto; vertical-align:top; position:relative;}
#mappingTool .searchInput {width: 300px; border: 1px solid var(--color-gray-light);border-radius: 3px; margin: 10px 19px;line-height: 20px;	font-size: 12px;color: var(--color-gray-light);padding: 5px 40px 5px 10px;}
#mappingTool li.mapped>a {font-weight:bold; }
.mappingDropActive { color: var(--color-green); background-color: #C8F2BF; border-radius: 2px;}
#mappingTool #linesContainer { height:calc(100% - 47px); width: 100%; overflow:hidden; position:absolute; top:47px; left:0; pointer-events:none; z-index:40;}
#mappingTool #dragSvg { height:100%; width:100%; position:fixed; top:0; left:0; pointer-events:none; z-index:75;}

#mappingTool #mappingFunction {position:absolute; z-index:51; pointer-events:auto; cursor:pointer;}

/* Formula bar */
#formulaZone {background-color:white; box-shadow: 0 5px 10px 0 rgba(88,124,141,0.1);display: inline-flex;align-items: start; width: 100%; height:38px;}
#formulaZone.big {height:94px;}
#formulaZone .whenEmpty {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;color:#A9A9A9; padding:10px;border:1px solid var(--color-gray-light); border-radius: 2px; margin-bottom: 10px; width: 100%; height: 100%;}
#formulaZone .whenNotEmpty { position:relative;border:1px solid var(--color-gray-light); border-radius: 2px; margin-bottom: 10px; width: 100%;display: inline-flex; height: 100%;}
#formulaZone.highlighted .whenNotEmpty {border:1px solid var(--main-color);border-radius: 2px;white-space:nowrap; position:relative;}
#formulaZone #formulaTargetNode {background-color:#9AB1BB; 	color: #192226; white-space:nowrap; display:flex; align-items: center; padding:10px; line-height: 18px;}
#formulaZone #formulaTargetNode .operationIndication {font-size:8px; line-height:8px; background-color:#ccc; border-radius:1px; color:#666; text-transform: uppercase; font-weight:bold; padding:3px; margin:0px 7px; }

/* Formula bar - input zone */
#formulaZone #formulaInput  {padding: 8px;overflow-y:auto;width: 100%;min-width: 500px; word-break: break-all;}
#formulaZone.big #formulaInput {margin:auto;max-height: 92px;}
#formulaZone #formulaInput:focus {outline-width: 0; }

/* Formula bar - Toggle formula height */
#formulaZone .formulaBarSwitch {display:none;}
#formulaZone .whenNotEmpty .formulaBarSwitch .fa-expand-alt {display:inline-block;}
#formulaZone .whenNotEmpty .formulaBarSwitch .fa-compress-alt {display:none;}
#formulaZone.big .whenNotEmpty .formulaBarSwitch .fa-compress-alt {display:inline-block;}
#formulaZone.big .whenNotEmpty .formulaBarSwitch .fa-expand-alt {display:none;}
#formulaZone #forSize {font-size:12px;}
#formulaZone input::-ms-clear { display: none; }

/* Add not to formula*/
#addNotePanel textArea{ margin:15px; width: calc(100% - 30px); }

/* To know if you plan some change :
 - If formulaElements were display:inline-block, the span would have a height and there would be no pixels between the spans. It would be super-useful
 to avoid that clicks can be outside of any formulaElements... but word-break: break-all; would not work anymore, and long constants would imply a lot of empty space at the end of your lines.
 - Using a display:flex on formulaInput could look attracting for some reasons, but this adds a \n between all the children texts in case of copy-paste.
 */
.formulaElement {font-size:12px; white-space: break-spaces; line-height: 18px;} /* line-height to match cursor height which is tallest formulaElement */
.formulaElement.nodeSummary { padding:0px 10px 0px 10px; background-color:#EEE; margin:0px; white-space:nowrap;}
.formulaElement.constant {color:#0000FF; border:none;}
.formulaElement.text {border:none; }
.formulaElement.parenthesis.highlightedParenthesis{color: red;font-weight: bold;  } /* use default red instead of var(Color-red) as an exception because it is more visible */
.formulaElement.functionName {color:#0080FF; font-style:italic; white-space:nowrap;}
.formulaElement.subFormula { padding:0px 10px 0px 10px; background-color:#EEE; margin:0px ; white-space:nowrap; color:#B200FF; }
.formulaElement.cursor {border:none; width:1px; padding:0px;}
.formulaElement.cursor:focus {outline-width: 0; box-shadow: none;}
.formulaElement.subFormula:before {content : "\f661  "; font-weight: 300; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.nodeSummary.element:before {content : "\f0c8  "; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.nodeSummary.option:before {content : "\f356  "; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.nodeSummary.elementStatic:before {content : "\f0c8  "; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--color-green-lighter);}
.nodeSummary.elementStructure:before {content : "\f0c8  "; font-weight: 300; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.nodeSummary.attribute:before {content : "\f151  "; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.nodeSummary.attributeStatic:before {content : "\f151  "; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--color-green-lighter);}
.nodeSummary.loop:before {content : "\f363  "; font-weight: 300; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.tooltip-container .formulaElement {background-color: inherit; color:white; }

#suggestionsDiv .content {padding: 0px 10px; }
#suggestionsDiv .confidence { color:var(--main-color);}
#suggestionsDiv .suggestion { height: 38px; width:100%; margin: 2px 0px; padding: 6px; cursor: pointer; font-size: 12px; font-weight: 600; line-height: 20px;
    border-radius: 3px; overflow: hidden; text-overflow : ellipsis; white-space: nowrap; border : 1px solid transparent; }
#suggestionsDiv .suggestion.selected { background-color: var(--main-color); color: white; }
#suggestionsDiv .suggestion:hover, .suggestion.hovered { border:1px solid var(--ts-color-blue-dark); }
.compactView #suggestionsDiv .suggestion {height: 26px; padding-top:2px; padding-bottom:2px; }
#suggestionsDiv .suggestion.selected .confidence { color:white;}
#suggestionsDiv .suggestion.selected .formulaElement { background-color:inherit; color:white;}
#suggestionsDiv .suggestion.selected .formulaElement.nodeSummary { border: 1px solid white; }
#suggestionsDiv .suggestion.selected .nodeSummary.element:before, #suggestionsDiv .suggestion.selected .nodeSummary.loop:before, #suggestionsDiv .suggestion.selected .nodeSummary.elementStructure:before, #suggestionsDiv .suggestion.selected .nodeSummary.attribute:before { color:white;}
#suggestionsDiv .noSuggestion {padding: 15px; font-size: 14px; }
#suggestionsDiv .content .actions span { display: inline-block; color:var(--main-color); padding: 10px; border-radius: 4px; cursor: pointer; font-size: 14px; }
#suggestionsDiv .content .actions {text-align: right; width: 100%; padding-right: 12px; }

#mappingTool #formulaZone #formulaInputActions {display: inline-flex;align-self: flex-start;margin: auto 0px auto 10px;cursor:pointer;vertical-align: top;line-height: 18px;justify-content: right;font-size:18px;} /* Min-width is larger than necessary to allow for the formula bar input not to resize when some of the icons appear and disappear as one moves from formular to formula where*/
#mappingTool #formulaZone #formulaEditorOpener {align-self: flex-start;right:0;padding: 0px 10px;color: #192226;font-weight: 600;font-size: 11px;border: 1px solid #E1E1E1;border-radius: 10px;margin: auto 10px auto 0px;}
#mappingTool #formulaZone #formulaEditorOpener>span { cursor:pointer;  padding:0px 5px; white-space:nowrap;text-transform: uppercase; }
#mappingTool #formulaZone.highlighted #formulaEditorOpener { background-color:var(--main-color); color:white;border:1px solid var(--main-color);} /* When hovering over a mapping line which is displayed in formula bar, the formula input is highlighted. */
#mappingTool #formulaHelp {padding:5px; position:absolute; right:0px; width:700px; background-color:white; border: 1px solid #dddddd; opacity:0.9; display:none; z-index:60;}
#mappingTool #formulaHelp .dataHelp {padding-left:20px; color:#006699;}
#mappingTool div.functionProposal.selected { background-color:var(--main-color); color: white;}

.functionNameSummary {color:#0080FF; cursor:pointer;}
#formulaInputActions span{
    margin-right: 9px;
}

#mappingTool #mask {background-color: #BBBBBB; height: 100%; left: 0; top:0; opacity: 0.6; position: fixed; width: 100%; z-index: 200; }
#mappingTool #formulaEditor {border:1px solid var(--main-color);border-radius: 2px;position:absolute;right: -1px;top: 100%;width:600px;z-index:70;background-color:var(--color-gray-lightest);color:var(--color-slate-dark);padding:10px;box-shadow: -2px 2px 5px 0px var(--main-color-lighter);white-space:normal;line-height:20px;}
#mappingTool .whenNotEmpty.long.mid #formulaEditor {top:48px;}
#mappingTool .whenNotEmpty.long.max #formulaEditor {top:66px;}

#formulaEditor.editFunction{border:1px solid var(--color-gray-light);padding: 10px;}
#formulaEditor .closer {position:absolute; right:10px; top:10px; cursor:pointer; font-size: 18px}
#formulaEditor .steps {color:#999999; padding-top:2px; padding-bottom:10px; display:block;}
#formulaEditor .search {padding-bottom:10px;}
#formulaEditor .notFound {padding-top:10px;}
#formulaEditor .steps span { text-transform:uppercase; font-size:13px;}
#formulaEditor .steps span:nth-child(1) {padding-right:8px;}
#formulaEditor .steps span:nth-child(2) {padding-left:8px;}
#formulaEditor .steps span.active {color:#333333; font-weight:bold; }
#formulaEditor .steps span.clickable {cursor:pointer;}
#formulaEditor .step1 td {padding:6px; }
#formulaEditor .step1 #formulaEditorSearch {padding-left:5px;}
#formulaEditor .step1 #formulaEditorChoices { width:100%; max-height:300px; overflow-x:hidden; overflow-y:auto; }
#formulaEditor .step1 .functionProposal {height: 60px;line-height: 60px;padding: 10px;background-color: white;cursor:pointer; white-space:nowrap;color:var(--color-slate-dark);}
#formulaEditor .step1 .functionProposal:hover { background-color:var(--main-color); color: white;}
#formulaEditor .step1 .functionProposal .functionName {line-height:20px;font-size:12px;font-weight: bold; }
#formulaEditor .step1 .functionProposal .functionDescription{line-height:20px;font-size:12px;font-weight: normal}

#formulaEditor .step1 .link {cursor:pointer; text-decoration:underline;}
#formulaEditor .inError { background-color:#FFBABA; background-image:none;}
#formulaEditor .step2>div {padding: 5px 0px; }
#formulaEditor .step2 #formulaEditorStep2Pattern .functionName{font-style:italic; color:var(--main-color);font-size: 12px; }
#formulaEditor .step2 #formulaEditorStep2Lib { position: absolute; right:10px; top:30px;}
#formulaEditor .step2 #formulaEditorStep2Description {font-size:12px;line-height:20px;color:var(--color-slate);font-weight: normal; }
#formulaEditor .step2 #formulaEditorStep2Returns {font-size:12px;line-height:20px;color:var(--color-slate);font-weight: normal; }
#formulaEditor #formulaEditorStep2Params span.formulaElement.text{font-size:12px;line-height:100%;font-weight: normal}
#formulaEditor .step2 #formulaEditorStep2Params td:nth-child(1) {width:120px;height: 30px;line-height: 26px;}
#formulaEditor .step2 #formulaEditorStep2Params td:nth-child(1)>div {overflow-x:hidden; height: 30px; }
#formulaEditor .step2 #formulaEditorStep2Params td:nth-child(2) {width:220px; padding:0px;}
#formulaEditor .step2 #formulaEditorStep2Params td:nth-child(3) {width:235px; padding:0px 5px 0px 10px; vertical-align:top;}
#formulaEditor .step2 #formulaEditorStep2Params td:nth-child(3)>div {padding:0px; width:220px; position:absolute; word-wrap:break-word;}
#formulaEditor .step2 #formulaEditorStep2Examples { font-size:12px;line-height:20px;color:var(--color-slate); font-weight: normal; overflow-wrap: break-word;}
#formulaEditor .step2 #formulaEditorStep2AdditionalInfos { font-size:12px;line-height:20px;color:var(--color-slate); font-weight: normal; overflow-wrap: break-word;}
#formulaEditor .step2 #formulaEditorStep2Params .editableParamDiv {border:1px solid var(--color-gray-light);border-radius: 3px; width:210px; overflow-x:hidden; overflow-y: hidden; white-space: nowrap; padding: 5px 10px 5px 10px; height:30px; margin-bottom:4px;background-color: white;}
#formulaEditor .step2 #formulaEditorStep2Params .editableParamDiv .placeholder {font-size:12px;line-height:100%;font-weight: normal;color:var(--color-gray-light); }
#formulaEditor .step2 #formulaEditorStep2Params .editableParamDiv input{border: none;}
#formulaEditor .step2 #formulaEditorStep2Params .editableParamDiv .formulaElement {white-space: pre;}
#formulaEditor .step2 #formulaEditorStep2ParamTooltipContent {background-color:#EBF2FC; color:#1483BB; position:relative; width:100%; border:1px solid #A8CBE2; padding:6px; white-space:normal; line-height:14px;}
#formulaEditor .step2 #formulaEditorStep2ParamTooltipArrow {position:absolute;  margin-left:-10px; z-index:71;}
#formulaEditor .stepEditFunction .title {font-size:14px; color:#02618a; padding-bottom:5px;}
#formulaEditor .stepEditFunction #EditFunctionDescription, #mappingTool #formulaEditor .stepEditFunction #EditFunctionXpath {width:480px; }
#formulaEditor .stepEditFunction td {vertical-align:top; padding:5px 3px 5px 3px; }
#formulaEditor .stepEditFunction input[type="text"] {padding:1px;}
#formulaEditor .stepEditFunction select {width:120px;}
#formulaEditor .stepEditFunction #EditFunctionsParameters td {vertical-align:top; padding:0px 5px 5px 0px; }
#formulaEditor .actionButton {display:inline-block; line-height:20px; vertical-align:top; background-color:var(--main-color); color:white; cursor:pointer;padding-left: 10px;padding-right: 10px;border-radius: 20px; }
#formulaEditor #formulaEditorStep1Cancel.actionButton, #formulaEditor #formulaEditorStep2Cancel.actionButton {background-color:white; color:black;border:1px solid var(--color-gray-light);}
#formulaEditor .actionButton:hover{opacity: 0.7}
select { color:black;}
select.empty { color:#aaa; }
select option { color:black; }
select option.empty { color:#aaa; }

.mappingActions .actionLink { margin-top:0px;}
.mappingActions select {width:auto;}






/*Tree*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#pdfMDTree{
    display: inline-flex;
    width: 100%
}
#pdfMDTree .channelMDTree{
    width: 80%
}

/* Http Flow */
#flow{padding: 10px;}
#httpFlow {position:relative; min-height:500px;display: inline-flex;width: 100%;}
#httpFlowZone{width: calc(30% - 5px);min-width: 350px;}
#httpClientFlowContainer {width: 100%;height: 100% ;overflow-y: auto;border: 1px solid var(--color-gray-light);border-radius: 0px 0px 3px 3px;background-color: white;box-shadow: 0 5px 10px 0 rgba(88, 124, 141, 0.1);}
#httpFlowDetailZone {width:calc(70% - 5px);min-width: 520px; height:100%; background-color: white; border: 1px solid var(--color-gray-light); border-radius: 3px; overflow-y: auto;box-shadow: 0 5px 10px 0 rgba(88,124,141,0.1);}
#httpClientFlowContainer .nodesContainer{position: relative; height: 100%;padding: 10px;overflow: hidden;}
#httpClientFlowContainer .tools {position: absolute;font-size: 20px;z-index: 10;display: flex;flex-direction: column;gap: 6px; padding-left: 10px; padding-top: 10px;}
#httpClientFlowContainer .nodesContainer .node { position: absolute; width: 240px; height: 50px; display: flex; justify-content: center; align-items: center; box-shadow: 2px 2px 4px grey; padding: 5px; border: black 1px solid; border-radius: 5px; flex-direction: column }
#httpClientFlowContainer .nodesContainer .node .icons {    display: flex;justify-content: end; align-items: center; flex-direction: row; width: inherit; position: absolute; top: 28px}
#httpClientFlowContainer .nodesContainer .node .icons i {padding-right: 5px;padding-top: 5px;}
#httpClientFlowContainer .nodesContainer .node.call { cursor: pointer;}
#httpClientFlowContainer .nodesContainer .node:hover, #httpClientFlowContainer .nodesContainer .node.call.active:hover{ border-color: var(--ts-color-orange); color: var(--ts-color-orange);box-shadow: 2px 2px 4px var(--ts-color-orange-light);}
#httpClientFlowContainer .nodesContainer .node.call.active,#httpClientFlowContainer .nodesContainer .node.call.active.error { border-color: var(--ts-color-blue); color: var(--ts-color-blue);box-shadow: 2px 2px 4px var(--ts-color-blue-light);}
#httpClientFlowContainer .nodesContainer .node.call.error { border-color: var(--color-red); color: var(--color-red);box-shadow: 2px 2px 4px var(--ts-color-red-light);}
#httpClientFlowContainer .nodesContainer .node.routing { width: 30px; height:30px; max-width: 30px; max-height:30px;}
#httpClientFlowContainer .nodesContainer .node.selected { border: 3px solid orange; }
#httpClientFlowContainer .nodesContainer .node span {display:inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* Compact mode. */
#httpClientFlowContainer .nodesContainer.compactRows .node { height:34px; padding: 1px; font-size:11px; line-height: 13px;}
#httpClientFlowContainer .nodesContainer.compactColumns .node { width: 200px;}

#httpClientFlowContainer .nodesContainer.compactRows .node.routing, #httpClientFlowContainer .nodesContainer.compactColumns .node.routing { width: 24px; height:24px; max-width: 24px; max-height:24px;}
#httpClientFlowContainer .linesSvg polyline { fill:none; stroke-width: 1px; stroke: #A8CBE2; }
#httpClientFlowContainer .linesSvg polyline.normal {  marker-end: url(#markerArrow); }
#httpClientFlowContainer .linesSvg polyline.highlighted {stroke: orange; z-index: 100; marker-end: url(#markerArrowHighlighted); }
#httpClientFlowContainer .tools i{cursor: pointer;}
#httpClientFlowContainer .tools i.removeCall{align-self: center;margin-top: 8px;}
#httpClientFlowContainer .tools i.addCall{align-self: center;margin-top: 8px;}
#httpClientFlowContainer .tools i.globalAuth.empty:not(.active):not(.error):not(:hover), #httpFlowDetailZone .configureGlobalAuth i.empty:not(.active):not(.error):not(:hover){color: var(--color-gray)}
#httpClientFlowContainer .tools i:hover, #httpFlowDetailZone .configureGlobalAuth i:hover{color: var(--ts-color-blue);}
#httpClientFlowContainer .tools i.active, #httpFlowDetailZone .configureGlobalAuth i.active{color: var(--ts-color-blue)}
#httpClientFlowContainer .tools i.error, #httpFlowDetailZone .configureGlobalAuth i.error{color: var(--color-red)}
#httpClientFlowContainer .infoRibbon{font-size: 12px;background-color: var(--color-red-lighter);color: var(--color-red);}


#httpFlowDetailZone .title { line-height: 40px; height : 40px; border-bottom: var(--color-gray-light) solid 1px; display: inline-flex; width: 100%;}
#httpFlowDetailZone .title:has(.errorMark){ height : 60px;}
#httpFlowDetailZone .title .subtitle { border-right: var(--color-gray-light) solid 1px; color: var(--ts-color-blue); padding-left: 10px; padding-right: 10px;text-wrap-mode: nowrap; white-space: nowrap; align-content: center;}
#httpFlowDetailZone .title>h3{ display:block; padding-left: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-right: 30px; background-color: white; border: 0px; align-content: center;}
#httpFlowDetailZone .title h3 div{height: 20px;}
#httpFlowDetailZone .title h3 input{height: 100%; width: 100%; border: none; padding-left: 0}

/*161 = call name height + tab height + actionbar height + actionbar margin top*/
#httpFlowDetailZone .content:has(.actionBar){height: calc(100% - 161px)}
#httpFlowDetailZone:has(.tabs) .content:has(.blockingMask) {min-height: calc(100% - 81px);}
#httpFlowDetailZone:not(:has(.tabs)) .content:has(.blockingMask) {min-height: calc(100% - 40px);}
#httpFlowDetailZone .content {position: relative;}
#httpFlowDetailZone .content .blockingMask {position: absolute; z-index: 20;}
#httpFlowDetailZone .content:has(.blockingMask) .pickerBlock:first-of-type {margin-top: 0;}

#httpFlowDetailZone .menu .tabs a{cursor: pointer;}
#httpFlowDetailZone .menu .tabs a.error {color: var(--color-red); text-decoration:none;}
#httpFlowDetailZone .menu .tabs a.active.error {border-color: var(--color-red);}

#httpFlowDetailZone .nameValueArray { margin-bottom: 10px;display: inline-flex;width: 590px;}
#httpFlowDetailZone .nameValueArray .name, #httpFlowDetailZone .nameValueArrayLine .name  {width: calc(30% - 5px); margin-right: 5px;}
#httpFlowDetailZone .nameValueArray .value, #httpFlowDetailZone .nameValueArrayLine .value {width: 70%}
#httpFlowDetailZone .nameValueArrayLine {display: inline-flex;width: 590px;height: 30px;margin-bottom: 5px;}
#httpFlowDetailZone .nameValueArrayLine .name .picker.String {width: 100%;}

#httpFlowDetailZone .pickerBlock.nameValueExpressionsExpression .nameValueArray .name, #httpFlowDetailZone .pickerBlock.nameValueExpressionsExpression .nameValueArrayLine .name  {width: calc(50% - 5px); margin-right: 5px;}
#httpFlowDetailZone .pickerBlock.nameValueExpressionsExpression .nameValueArray .value, #httpFlowDetailZone .pickerBlock.nameValueExpressionsExpression .nameValueArrayLine .value {width: 50%;}

#httpFlowDetailZone .nameValueArrayLine input {width: 100%; height: 100%;}
#httpFlowDetailZone .nameValueArrayLine .expression {width: 100%;max-width: 100%;min-width: 100%;height: 100%}

#httpFlowDetailZone .picker .errorMark{margin-top: 0; margin-bottom: 5px}

#channels\.gatewayDetailHttpflow .tooltip-container .fa-li {top: 4px;}
#channels\.gatewayDetailHttpflow .tooltip-container{max-width: 500px}
#channels\.gatewayDetailHttpflow .tooltip-container .fa-ul {margin-left: var(--fa-li-margin,1.5em);}
#channels\.gatewayDetailHttpflow .tooltip-container .fa-ul>li {padding-left: 2px}
#channels\.gatewayDetailHttpflow .tooltip-container{max-width: 500px;}

    /* Tools. */
#GATEWAY_HTTP_API_flow .tooltip-container .fa-li {top: 4px;}
#GATEWAY_HTTP_API_flow .tooltip-container{max-width: 500px}
#GATEWAY_HTTP_API_flow .tooltip-container .fa-ul {margin-left: var(--fa-li-margin,1.5em);}
#GATEWAY_HTTP_API_flow .tooltip-container .fa-ul>li {padding-left: 2px}
#GATEWAY_HTTP_API_flow .tooltip-container{max-width: 500px;}


/* New message definition tree. */
/* Sizes of main zones are adapted dynamically in Javascript.*/
#tree{padding: 10px;}
#mdTree {position:relative; min-height:500px;display: inline-flex;width: 100%;}
.treePdf #mdTree { margin:0; height:100%;}
.treePdf { height: calc(100% - 2px); }

#mdTreeMessageZone{width: calc(65% - 5px);min-width: 520px;}
#mdTreeZoneActions {top:0px; left:0px; height:50px; background-color:white; width:100%; box-shadow: 0 0 10px 0 rgba(88,124,141,0.1); border-top:1px solid var(--color-gray-light); border-left:1px solid var(--color-gray-light); border-right:1px solid var(--color-gray-light); padding: 10px 20px 10px 20px;border-radius: 3px 3px 0px 0px ;}
#mdTreeZoneActions .inlineLink.level5.expandAll { margin-right: 8px;}
#mdTreeSearch {border:1px solid #ccd7dd; text-align: left; padding:5px 10px 5px 10px; color:#192226; font-size:12px; border-radius:3px; width: 310px;}
#mdTreeZoneContainer {width:100%; height:calc(100% - 50px); resizable:true; overflow-y:auto; top:50px; border-bottom:1px solid var(--color-gray-light); border-left:1px solid var(--color-gray-light); border-right:1px solid var(--color-gray-light);border-radius: 0px 0px 3px 3px;background-color: white;box-shadow: 0 5px 10px 0 rgba(88,124,141,0.1);}
#mdTreeZone {position: relative;}
#mdTreeZone li.inError>a:after{content: " \f06a"; font-family: "Font Awesome 6 Pro";color: var(--color-red); margin-left: 5px;font-weight: 400;}
#mdTreeZone li.withValidation>a:after{content:"  \f2f7"; font-family: "Font Awesome 6 Pro"; color: var(--main-color); margin-left: 5px;font-weight: 400;}
#mdTreeZone li.withValidation.inError>a:after{content: "\f2f7 \00a0 \00a0 \f06a"; color: var(--color-red); font-family: "Font Awesome 6 Pro";margin-left: 5px;font-weight: 400;}
#mdTreeZone li.hidden a:before {position:absolute; content: " " url(../images/channels/messageDefinition/transparent.png) }
#mdTreeNodeZone {width:calc(35% - 5px);min-width: 250px; height:100%; background-color: white; border: 1px solid var(--color-gray-light); border-radius: 3px; overflow-y: hidden;box-shadow: 0 5px 10px 0 rgba(88,124,141,0.1);}
#mdTreeNodeZone .editor{height: 100%; position: relative;}
#mdTreeNodeZone .scrollableArea{overflow-y: auto; height: 100%; overflow-x: hidden; position: relative;}
#mdTreeNodeZone .stickyBottomAction{position: absolute; bottom:0px; background-color: #F1F4F6; width:100%; border-top:1px solid var(--color-gray-light); padding-left: 20px;height: 60px; display: flex; justify-content: flex-start; align-content: center; flex-wrap: wrap;}
#mdTreeNodeZone .stickyBottomAction #notForRootNode{line-height: normal;margin-top: auto; margin-bottom: auto;}
#mdTreeNodeZone .stickyBottomAction span:not(:first-child):before { content: " | "; color:#5c97a5;}
#mdTreeNodeZone .stickyBottomAction button:not(:first-child):before { content: " | "; color:#5c97a5;}
#mdTreeNodeZone .editorIcon {position:absolute; right:10px; top : 3px; height:24px; width:24px;}
#mdTreeNodeZone .editorTitle {color: #1E1E1E; font-size:14px; font-weight: 600; padding:10px 0px 10px 20px;border-bottom: 1px solid var(--color-gray-light);line-height: 20px;}
#mdTreeNodeZone .formTable>tbody>tr>td:first-child {width:115px; }
#mdTreeNodeZone .picker input[type='text'], #mdTreeNodeZone .picker input[type='password'], #mdTreeNodeZone .picker select { width:100%;  }
#mdTreeNodeZone .picker textarea{ width:100%; height:30px; }
#mdTreeNodeZone select{ width:100%; height:30px; }
#mdTreeNodeZone .withPrefixes input[type='text'] {width:265px;height:30px;margin-left: 2px;padding-top: 7px;}
#mdTreeNodeZone .withPrefixes select {width:64px; margin-right:0px;}
#mdTreeNodeZone input#elementNodeMinLength, #mdTreeNodeZone input#elementNodeMaxLength { width:50px;  margin:0px;}
#mdTreeNodeZone input#elementNodeMinNumberValue, #mdTreeNodeZone input#elementNodeMaxNumberValue { width:90px;  margin:0px;}
#mdTreeNodeZone input#elementNodeMinDecimalValue, #mdTreeNodeZone input#elementNodeMaxDecimalValue { width:90px;  margin:0px;}
#mdTreeNodeZone input#loopNodeMinOccurences, #mdTreeNodeZone input#loopNodeMaxOccurences { width:50px;  margin:0px;}
#mdTreeNodeZone .customValidation input[type='text']{ margin-right:2px; margin-bottom: 5px;}
#mdTreeNodeZone .error { background-color:var(--color-red-lighter); background-image:none;}
.treeSave .actionLink { margin:2px 8px 2px 0px; }
#edifactOverlay select {width:100%;}
#xmlOverlay select {width:100%;}
#mdTreeNodeZone .pickerBlock{margin: 10px 20px 10px 20px}
#mdTreeNodeZone .parametersSection{min-width: auto}

#mdTreeNodeZone #elementNodeEditor #elementNodeCustom .customValidation{display: inline-flex;width: 100%;}

.md_element::before { content : "\f0c8"; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.md_elementStatic::before { content : "\f0c8"; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--color-green-lighter);}
.md_elementStructure::before { content : "\f0c8"; font-weight: 300; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.md_loop::before { content : "\f363"; font-weight: 300; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.md_attribute::before { content : "\f151"; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.md_attributeStatic::before { content : "\f151"; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--color-green-lighter);}
.md_choices::before { content : "\f074"; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.md_option::before { content : "\f356"; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.md_subFormula::before { content : "\f661"; font-weight: 300; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.md_subFormulaSpecial::before { content : "\f661"; font-weight: 300; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.md_metadata::before { content : "\f02b"; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}
.md_metadataSpecial::before { content : "\f02b"; font-weight: 600; font-family: "Font Awesome 6 Pro"; font-style: normal; color:var(--main-color);}


/*PDF Message definition template list*/
/* Pdf Template list Panel in Message definition channel tab */
#templateListPanel{
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 20%;
    min-width: 180px;
    margin: 10px 0 10px 10px;
}

#templateSearchBar{
    position: absolute;
    display: inline-flex;
    top: 0;
    left: 0;
    height: 50px;
    background-color: white;
    width: 100%;
    box-shadow: 0 0 10px 0 rgba(88,124,141,0.1);
    border-top:1px solid var(--color-gray-light);
    border-left:1px solid var(--color-gray-light);
    border-right:1px solid var(--color-gray-light);
    padding: 10px 10px 10px 20px;
    border-radius: 3px 3px 0px 0px ;
}

.templateSearchBarAddButton{
    margin-left: 10px;
}

#templateSearchBar input{
    border:1px solid #ccd7dd; text-align: left; padding:5px 10px 5px 10px; color:#192226; font-size:12px; border-radius:3px; width: 100%;
}

#templateSearchBar #addTemplateBar{
    position: absolute;
    right: 6px;
    top:4px;
    cursor: pointer;
    color: var(--main-color);
}

#templateListContent{
    position: absolute;
    width: 100%;
    overflow: auto;
    padding: 10px;
    height:calc(100% - 50px);
    top:50px;
    border-bottom:1px solid var(--color-gray-light);
    border-left:1px solid var(--color-gray-light);
    border-right:1px solid var(--color-gray-light);
    border-radius: 0px 0px 3px 3px;
    background-color: white;
    box-shadow: 0 5px 10px 0 rgba(88,124,141,0.1);
}
.templateBoxComplete{
    margin-bottom: 10px;
    width: 100%;
    border: 1px solid var(--color-gray-light);
    border-radius: 3px;
    height: 50px;
}


.templateBox{
    width: 100%;
    position: relative;
    display: inline-block;
}


.templateBoxComplete:hover{
    border: 1px solid var(--main-color);
    box-shadow: 0 0 0 1px var(--main-color-lighter);
}

.templateRemove:hover{
    cursor: pointer;
    color: var(--main-color);
}

.templateRemove{
    font-size: 14px;
    color: var(--color-slate-lightest);
    font-weight: 900;
    margin-top: auto;
    margin-bottom: auto;
}

.templateRemoveText{
    cursor: pointer;
    color: var(--main-color);
}
.templateEdit{
    cursor: pointer;
    color: var(--main-color);
}

.templateRename{
    cursor: pointer;
    color: var(--main-color);
}


.templateControls{
    display: none;
    position: absolute;
    top:25px;
    left: 45px;
}

.templateThumbnail{
    position: absolute;
    max-width: 30px;
    max-height: 40px;
    top:5px;
    left: 5px;
    border: 1px solid rgba(206, 206, 206, 0.52);
}

.templateName{
    position: absolute;
    font-weight: 600;
    width: 85%;
    top:6px;
    left: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdfExample{
    max-width: 500px;
    text-overflow: ellipsis;
    border-radius: 3px;
    background-color: #F1F4F6;
    padding: 0px 5px;
    margin-left: 10px;
    display: inline-block;
    cursor: pointer;
}

.pdfExampleLink{
    color: var(--main-color);
}





/*Connector adjustments*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/*Perhaps this section should be scoped to (a) specific page(s)*/

.pickerDescription>#gatewayParameters {
    margin-left: -20px;
}
.pickerDescription>#gatewayParameters>.actionBar {
    visibility: hidden;
}

/* Views */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/
.viewContainer {
    display: flex;justify-content: space-between;
}
.viewName {
    width: 300px;
}

.viewEditSpan {
    margin:1px 10px 0px 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}


table.manageViews{ table-layout:auto;}
table.manageViews tr>td:last-child {
    width: 10%;
    white-space: nowrap;
}
table.manageViews tr>td:nth-child(1) {
    width: 350px;
    padding: 0px 0px 0px 15px;
}
table.manageViews tr>th:nth-child(1) {
    padding-left: 15px;
}
table.manageViews tr>td>.radioButtonContainer:last-child{
    margin-bottom: 0px;
}

table.manageViews tr>td>.renamable:hover:before {display: none;}

.rightOverlayV2>.content>p.viewsText {padding-left: 5px;}

/*Reuse and save time*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.reuseAndSaveTime {
    margin-top: 4px;
    margin-bottom: 4px;
}

.information {
    line-height: 30px;

}

.simpleText {
    line-height: 20px;
    padding: 10px;
    color: #565656;
    font-size: 12px;
}

.shareOrCopyElementName {color: #02618a; }
.shareOrCopyChannel {color: #02618a; cursor:pointer; }








/* HistoricalData (tab in md, gw and transforms). */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#historicalData .formTable { margin-top:0px; height: 100%;}

/* show log popup - not sure it's related to historical data, check*/
.log pre { font-family:monospace; font-size:10px;}




/*Related items*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/*IMPORTANT??*/
/* Titles. Titles are just h2 tags. */
/* If the link is black, choose the side menu active link color color1 */
.relatedItem {color:var(--main-color) !important;text-decoration:underline; cursor:pointer;}
.relatedItemBlue {color:var(--main-color) !important;text-decoration:underline; cursor:pointer;}

/* Clickable field. */
.clickMe:hover:before { position: absolute; top: 102%; left: 50%; z-index:100; margin-top: 5px; margin-left:-40px; padding: 3px 3px 3px 3px; font-style:normal; white-space:nowrap; background-color: black; background-color: hsla(0, 0%, 20%, 0.9); color: white; content: attr(data-content); text-align: center; font-size: 11px; line-height: 1.2;}
.clickMe:hover:after { position: absolute; top: 102%; left: 50%; z-index:100; margin-left: -5px; width: 0; border-bottom: 5px solid black; border-bottom: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0;}
.clickMe {position:relative; cursor:pointer; font-style:italic; padding:2px 3px 2px 1px; margin:0px;}

.ui-widget-content a.relatedItem {color:#02618a; text-decoration:underline; cursor:pointer; }
.ui-widget-content.ui-state-hover a.relatedItem {color:white !important;}





/* Renamable field (ex: Gateway name etc) */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.renamable {position:relative; cursor:pointer; font-style:italic; padding:2px 3px 2px 1px; margin:0px;}
.renamable:hover {background-color:white; }
.renamable:hover:before { position: absolute; top: 102%; left: 50%; z-index:100; margin-top: 5px; margin-left:-40px; width:80px; padding: 3px 0px 3px 0px; font-style:normal; white-space:nowrap; background-color: black; background-color: hsla(0, 0%, 20%, 0.9); color: white; content: 'Rename me'; text-align: center; font-size: 11px; line-height: 1.2;}
.renamable:hover:after { position: absolute; top: 102%; left: 50%; z-index:100; margin-left: -5px; width: 0; border-bottom: 5px solid black; border-bottom: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0;}
.renamableInput {width:300px;}
td .renamableInput {width:80%;}


/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/*PAGES*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/*Create channel page*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#channels_createChannel .backdrop {margin: 0px;position:relative;border: 0px;background-color: inherit;box-shadow: none}
#buildCustomChannel{padding:20px;display:flex;width: auto;margin-left: 150px; margin-right: 150px; min-width: 686px;} /*686 to have a proper view in the prebuild channel with exactly 2 channel/connector box */
#buildCustomChannel .title{display: block; margin-right: 20px;}
#buildCustomChannel button{width: auto;min-width: auto; margin-left: auto; margin-right: 0px;}

#prebuildChannel{padding:20px;display:block;width: auto;margin-left: 150px; margin-right: 150px; min-width: 686px;} /*686 to have a proper view in the prebuild channel with exactly 2 channel/connector box */
#prebuildChannel .search{display:flex;}
#prebuildChannel .title{display: block; margin-right: 20px;}
#prebuildChannel .searchOrCopy{width: auto;min-width: auto; margin-left: auto; margin-right: 0px;}
#prebuildChannel .searchOrCopy button{margin-top: 10px; margin-left: 25px}

/*Transformation detail parameters*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#channels_transformationDetail_parameters  .dropdownAside{
    width:350px
}

/*Short message detail*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.messageDetailAsideLeftAlign div.crop{
    min-width: 170px;
}
.messageDetailAsideRightAlign div.crop{
    width: auto;
}
.messageDetailAsideLeftAlign,.messageDetailAsideRightAlign{
    font-family:'Open Sans',Helvetica, Arial, sans-serif;
    color:#192226;
    font-size:10px;
    line-height:20px;
    text-transform: uppercase;
    min-width: 110px;
    padding-left: 7px;
    text-align: left;
}
.messageDetailAsideLeftAlign {
    text-align: left;
    min-width: 177px;
}

.softPanelRightAlign {
    text-align: right;
    font-family:'Open Sans',Helvetica, Arial, sans-serif;
    padding:4px 7px 3px 0px;
    color:#192226;
    font-size:10px;
    line-height:20px;
    font-weight:800;
    text-transform: uppercase;
}

.crop {width:130px;overflow:hidden;height:20px;line-height:20px;text-overflow: clip;word-break: break-all;}


/*Channel detail routing*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#channels.channelDetailRouting .actionBar {margin-top: 0px;}


/*Billing invoicing data*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.creditCardButtons{padding-top: 10px}
.smallLeftRightMargin {
    margin-left: 1px;
    margin-right: 1px;
}


/*Notification detail email tag*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/*Component was rewritten into an aside. But seems still to be used in a single tag!*/

.metaData input {border: 1px solid #ccd7dd;
    text-align: left;
    padding: 5px 10px 5px 10px;
    color: #192226;
    font-size: 12px;
    border-radius: 3px;
    width: 350px;
}
.metadataItem {width:150px;}
.metadataGroup {display: flex; flex-flow: row wrap; align-content: flex-end;}


/*Empty page tag (when no connetor, messages or channels)*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.emptyPageTitle {text-align:center; font-size:24px; font-weight:bold; margin-top:60px;}
.emptyPageText {text-align:center; margin-top:20px; font-size:14px;}
.emptyPageMainButton { background-color:var(--color-orange); width:200px; padding:10px 0px; font-size:14px; font-weight:bold; color:white; display:inline-block; text-align:center; vertical-align:middle; margin:5px 20px; cursor:pointer;}
.emptyPageMainButton:hover { background-color:var(--color-orange); }
.emptyPageSecondButton { background-color:#EFEFEF; width:200px; padding:10px 0px; font-size:14px; font-weight:bold; color:var(--color-orange); display:inline-block; text-align:center; vertical-align:middle; margin:5px 20px; cursor:pointer;}
.emptyPageSecondButton:hover {color:var(--color-orange); }
.emptyPageButtons { display:block; margin:20px auto 0px auto; width:500px; }

/*Single slide walkthrough - tom&co & delhaize only*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.single-slide {
    position: relative;
    display: none;
    z-index: 9002;
    text-align: center;
    line-height: 23px;
    font-size: 19px;
}

/* Login pages. (also applied on some error pages) */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.loginPage #loginBox,.loginPage #registerBox{ width: 404px;margin: 44px auto 0 auto;border: 1px solid #efefef;border-radius: 3px;padding: 12px 22px 22px 22px;background-color: white;height: fit-content;}
.loginPage .picker:not(.checkbox) {width: 100%}
.loginPage .picker input:not(.checkbox){width: 100%}
.loginPage .pickerBlock{margin: 10px 0 0 0}
.loginPage .pickerLabel{font-size: 11px}
.loginPage .boxTitle{font-size: 18px;font-weight: bold;line-height: 31px;margin: 10px 0 10px 0; overflow: hidden; text-overflow: ellipsis;}
.loginPage .loginPageBtnContinue{width: 100%; margin: 0;padding: 11px;border-radius: 22px;height: 44px; margin-top: 22px;background-color: var(--main-color); color: white;
    font-weight: 300;text-transform: uppercase;cursor: pointer;}
.loginPage .loginPageBtnContinue:hover{opacity: 0.7}
.loginPage .connectionProblem{ display:block;text-decoration: none;font-weight: 300;font-size: 14px;text-transform: none;color: var(--main-color);vertical-align: middle;text-align: right;margin: 11px 0 0 0;}
.loginPage .loginSignup,.loginPage .registerSignin{padding-bottom: 44px;margin-top: 11px;text-align: center;display: block}
.loginPage .loginSignup .login ,.loginPage .registerSignin .register{color: #353535;}
.loginPage .loginSignup a ,.loginPage .registerSignin a{color: var(--main-color);line-height: 22px;font-size: 14px;}

.loginPage #registerBox,.loginPage .registerSignin{display: none;}
.loginPage .registerTooltip{line-height:22px}
.loginPage .registerTooltip span{color: #afafaf;font-weight: 700;font-size: 12px;display: flex;}
.loginPage .registerTooltip span:before{font-family:"Font Awesome 6 Pro";content:"\f05a";color: #afafaf;font-size: 16px;margin-right: 5px}
.loginPage .agreeConditionsProtocol{margin-top: 22px;font-size: 14px;}
.loginPage .agreeConditionsProtocol label{color: #1e1e1e;margin-top: 11px;vertical-align: middle;}
.loginPage .agreeConditionsProtocol label a{color: var(--main-color);line-height: 22px; text-decoration: underline;}
.loginPage #topBarZoneLogin {height:60px;font-size:18px;position:relative;line-height:27px;padding:5px 10px 5px 10px;vertical-align: middle;background-color: white;border-bottom: var(--color-gray-light) solid 1px; display:flex;}
.loginPage #topBarZoneLogin #logoZone {display: flex; flex-direction: row; align-items: center; width: 50%;}




/* Monitoring */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#exploitation_messagesStats .formTable { margin-bottom:20px;}
.monitoringIcons {
    vertical-align: middle;
    padding-right: 9px;
    font-size: 16px;
}





/* Routings */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.routingTitleHelp { font-style:italic; color:#aaaaaa; padding:0px 5px 0px 5px;}
#routingList tbody tr:nth-child(even).ui-row-ltr td{background-color: inherit;} /*BABELWAY*/

#routingList tr:not(.ui-state-hover)>td.grayIfEmpty:empty { background-color:#e0e0e0; }
#routingList tr:not(.ui-state-hover)>td.grayIfEmpty.routingActiveStep { background-color:#cccccc; }
.routingRulesTable input[value=""] {border-color: var(--color-red);}
.routingRulesTable input[value=""] {border-color: var(--color-red);}
.gridPicker { border:1px solid var(--color-grid-border); color:#192226; font-size:12px;}  /* Should be scoped, but only related to displayRoutingTag */



/* Billing */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#admin_buyUnitsStep1 input {width:200px;}

#admin_billing .pricePlanDescription {padding-top:8px;}
#admin_billing .negativeBalance {color:var(--color-red); }

#admin_billing_chargesGraph #chartdiv {margin: 20px;}

#admin_billing_billingDataPerEnv #BillingDataPerEnvForm {position:relative;}
#admin_billing_billingDataPerEnv #BillingDataPerEnvForm .download { position:absolute; right:12px; bottom:8px; font-size: 14px; }

/* Users */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#admin_usersInvitationForm textarea.picker { height:180px; }

/* Account stats */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#admin_accountStats_stats #chartdiv { margin:20px; width:calc(100% - 40px); }

/* Partners */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#channels_partnerDetail_relatedItems .relatedItemsTable { border-collapse:collapse; border:1px solid #DCEDF5; color:#333333;background-color:#f8f8f8; padding: 0px 16px 10px 16px; width:100%}
#channels_partnerDetail_relatedItems .relatedItemsTable tr.newCategory td {padding-top:10px;font-size: 14px;line-height: 20px}
#channels_partnerDetail_relatedItems .relatedItemsTable td {padding:0px 30px 0px 4px; vertical-align:top; width:33%}

/* Notifications */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#emailsTable input[type='text'].picker { width:calc(100% - 28px); margin: 2px 5px 2px 0px;}





/*Send acknowledgement wizard*/
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.shareOrCopyBox {border:1px solid #bcd7e9; display:inline-block; margin:25px; padding:5px; width:270px; text-align:center; min-height: 180px; position:relative;}
.shareOrCopyBox .text {position:absolute; top:10px;}
.shareOrCopyBox .action {position:absolute; bottom:15px; width:260px;}


/* horizontalRule. ????  */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/
.horizontalRule {width: 100%; height: 7px; margin: 30px 0; border-bottom: 2px solid lightgray; text-align: center;}
.horizontalRule span {font-size: 20px; font-weight:bold; background-color: white; padding: 0 10px;}




/* Delhaize and tom&co support pages */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

div.support {padding: 30px;font-size: 14px;line-height: 40px;}
div.support ol.l1 {list-style-type: lower-latin;}
div.support ol.l2 {list-style-type: lower-roman; padding: 5px 0px 15px 30px;}




/* Admin/Environment/Partners */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.userFieldsTable {padding-left:16px;}
.userFieldsTable td {vertical-align:top;}
.userFieldsTable td:nth-child(1) {line-height:22px;  }
.userFieldsTable td:nth-child(2) .picker.String {width:200px; }
.userFieldsTable td:nth-child(3) .picker.CVDType {width:220px; }
.userFieldsTable td:nth-child(3) .picker.String {width:250px; }





/* Admin/Billing/Invoices */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.billingTable {width:100%; border-collapse:collapse; border:1px solid #DCEDF5; margin-top:20px;}
.billingTable tr.main {  color:#333333; font-size:12px; height:25px; border-top:1px solid #DCEDF5;}
.billingTable tr.detail { color: #6e6e6e; font-size:11px; height:22px;}
.billingTable tr.odd { background-color:#f8f8f8; }
.billingTable tr.even { background-color:white; }
.billingTable td {padding : 0px 12px 0px 12px; }
.billingTable tr>td:nth-child(1) { width:100px; padding : 0px 0px 0px 4px;  }
.billingTable tr>td:nth-child(2) { width:210px;  }
.billingTable tr>td:nth-child(3) { width:120px; text-align:right; }
.billingTable tr>td:nth-child(4) { width:200px; overflow-x:hidden; white-space: nowrap;  }
.pricePlanDetailOverlay { display:none; position:fixed; background-color:#eeeeee; border:1px solid #02618a; padding:2px 5px 2px 5px; margin:20px; white-space:normal; max-width:500px; z-index:2000; color:#02618a;}





/* Mhs Host */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.mhsHostTable {width:100%; border-collapse:collapse; border:1px solid #DCEDF5; margin-top:20px;}
.mhsHostTable tr.main {  color:#333333; font-size:12px; height:25px; border-top:1px solid #DCEDF5;}
.mhsHostTable tr.detail { color: #6e6e6e; font-size:11px; height:22px;}
.mhsHostTable tr.odd { background-color:#f8f8f8; }
.mhsHostTable tr.even { background-color:white; }
.mhsHostTable tr:hover {cursor: pointer;}
.mhsHostTable td {padding : 0px 12px 0px 12px; }
.mhsHostTable tr>td:nth-child(1) { width:400px;  }
.mhsHostTable tr>td:nth-child(2) { width:150px; text-align:right; }





/* Admin/Billing/Invoices */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.invoicesTable {width:100%; border-collapse:collapse; margin-top:20px; border:1px solid #E4E4E4;}
.invoicesTable thead {background-color:#f8f8f8; color:#8D8D8D; font-weight:normal; text-align:left;}
.invoicesTable tr {font-size:12px; height:25px;}
.invoicesTable tr:nth-child(even) { border:1px solid #DCEDF5; color:#333333; background-color:#f8f8f8; }
.invoicesTable td {padding : 0px 8px 0px 8px; }
.invoicesTable th {padding : 0px 8px 0px 8px; border:1px solid #E4E4E4;}





/* User rights */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#bwAdmin_hubDetail_rights .checkBoxContainer, #admin_users .checkBoxContainer {display:block;}


/* Admin environment s */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#admin_environment_documentTypes textarea {height:30px;}

#admin_environment_partners .userFieldsTable .picker.String input {width:210px;}
#admin_environment_partners .userFieldsTable .picker.pickerWithAside {width:345px;}

#admin_personalData_preferences #exportSample { font-family: 'Courier New'; border : 1px solid var(--color-gray); background-color: var(--color-gray-lighter);padding : 5px; width:590px; }

/* BWAdmin */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#bwAdmin_hubDetail_pricePlan #changePricePlanOverlay {z-index: 999; } /* This overlay contains select pickers that will open overlays that must be on top of this one. */
#bwadmin_UserDetailRights #AddMEDAdminRightOverlay, #bwadmin_UserDetailRights #AddAccountAdminRightOverlay, #bwadmin_UserDetailRights #AddHubAccessLevelRightOverlay {z-index: 999; }
#bwadmin_UserDetailRights #EditMEDAccessLevelOverlay, #bwadmin_UserDetailRights #EditHubAccessLevelOverlay {z-index: 999; }

/* Fedict */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

#monitoring_fedict_newInvoice .caretIcon{margin:0 5px;}
#monitoring_fedict_newInvoice #partnersZone .pickerBlock {line-height:29px;}
#monitoring_fedict_newInvoice #partnersZone .pickerBlock .ui-autocomplete-input {height:30px;}
#monitoring_fedict_newInvoice .ui-widget {background-color:white;}
#monitoring_fedict_newInvoice .partnerInfoZone {font-size:12px; }
#monitoring_fedict_newInvoice .parametersSection {padding: 20px 0px;}
#monitoring_fedict_newInvoice .picker input,#monitoring_fedict_newInvoice .picker textarea,#monitoring_fedict_newInvoice .picker.selectWithAside { max-width:100%; }
#monitoring_fedict_newInvoice .partnerInfoZone .picker.PostalCode > input{ width:70px; min-width:70px; max-width: calc(100% - 515px) }
#monitoring_fedict_newInvoice .partnerInfoZone .picker.City > input { width: calc(590px - 70px);  max-width: calc(100% - 70px); }
#monitoring_fedict_newInvoice #invoiceLines .parametersSection > .inlineLink.level5 {margin-left:20px;}
#monitoring_fedict_newInvoice .FedictInvoiceLineHeader, .FedictInvoiceLine {padding-left:20px;}
#monitoring_fedict_newInvoice #invoiceLines span.itemName .errorMark {display:none;}
#monitoring_fedict_newInvoice #invoiceLines .FedictInvoiceLineHeader span , #monitoring_fedict_newInvoice #invoiceLines .FedictInvoiceLine span  {display:inline-block;width:82px;}
#monitoring_fedict_newInvoice #invoiceLines span.itemRef, #monitoring_fedict_newInvoice #invoiceLines span.itemRef .picker {width:102px;}
#monitoring_fedict_newInvoice #invoiceLines span.itemName, #monitoring_fedict_newInvoice #invoiceLines span.itemName .picker {width:292px;}
#monitoring_fedict_newInvoice #invoiceLines span.itemtaxRate, #monitoring_fedict_newInvoice #invoiceLines span.itemtaxRate .picker {width:90px; }
#monitoring_fedict_newInvoice #invoiceLines span.total, #monitoring_fedict_newInvoice #invoiceLines span.total .picker {width:90px; text-align:right;}
#monitoring_fedict_newInvoice #invoiceLines span.totalWithTaxes, #monitoring_fedict_newInvoice #invoiceLines span.totalWithTaxes .picker {width:90px;text-align:right;margin-left: 10px;}
#monitoring_fedict_newInvoice .FedictInvoiceLine .picker input[type="text"], .FedictInvoiceLine .picker select {width:80px; margin:1px;}
#monitoring_fedict_newInvoice .FedictInvoiceLine span.itemRef .picker input[type="text"], .FedictInvoiceLine span.itemRef .picker select {width:77px; }
#monitoring_fedict_newInvoice .FedictInvoiceLine span.itemName .picker input[type="text"], .FedictInvoiceLine span.itemName .picker select {width:267px; }
#monitoring_fedict_newInvoice .FedictInvoiceLineHeader span .requiredStar {padding-left: 2px; width:8px;}
#monitoring_fedict_newInvoice .FedictInvoiceLineHeader > span {vertical-align: top;line-height: normal;}
#monitoring_fedict_newInvoice .FedictInvoiceLine span.itemtaxRate{ vertical-align: top; }
#monitoring_fedict_newInvoice #invoiceLines .parametersSection div div.AWTHElement:nth-child(1){ margin-top: 10px; }
#monitoring_fedict_newInvoice #invoiceLines .parametersSection div div.AWTHElement:nth-child(1){ margin-top: 10px; }
#monitoring_fedict_newInvoice #plusinvoiceLines {margin-left: 20px;}

/* FAQ */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.faqQuestion {	margin: 10px 0px 0px 0px; padding: 4px 20px 0px 16px; color:#02618a !important;text-decoration:underline; cursor:pointer; font-weight: bold; }
.faqAnswerContainer { margin: 0px 0px 10px 0px; padding: 4px 20px 0px 16px; height: 0px; overflow: hidden;}
.faqAnswerContainer img{ display: block; margin: 0 auto;}
.faqAnswerContainer p{ padding-top: 10px; padding-bottom: 10px}
.faqAnswerContainer .important{color: var(--main-color);}


/* UsersList */
#list .picker.HubAccessLevel {width: 100%;  }
.openRightOverlayImg {width: 14px; height: 14px; color: #66aad2}
.infoIcon{min-width: 14px; min-height: 14px; margin-right: 10px;}
#EditHubAccessLevelForm {padding-bottom: 10px}

#pageMask{position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 999;background-color: rgba(25,34,38,0.8); display:none;}
.pageMaskParam{position: fixed;width: 100%;height: 100%;top: 60px;left: 0;z-index: 999;background-color: rgba(25,34,38,0.2);}
#edifactOverlay{display: none;text-align: left;}
#xmlOverlay{display: none;text-align: left;}
body.noOverflow{overflow: hidden;} /*When page mask is set, no scroll on body*/

.ui-dialog > div > form {margin: 5px 0px 5px 0px}
.ui-dialog > div > form > span > input {margin: 5px 0px 5px 0px}


@keyframes slideRight {
    0%   {right:-320px;}
    /*20%   {right:-300px; top:0px;}*/
    100% {right:0px; top:0px;}
}

.closeOverlay{
    font-size:19px;
    font-weight: normal;
    color: black;
    padding: 20px 0px;
    position: absolute;
    right: 20px;
    cursor: pointer;
}


#tabDetailsBody {margin-left: 10px; padding-right: 10px; flex-grow: 1;}
.smallCardContentAside .pickerDescription {max-height: 28px; text-overflow: clip; overflow: hidden;}
.smallCardContentAsideEdit .pickerDescription {}



/* User management */
.rightPanelTable th {height:35px; text-transform:uppercase; color:#3d3d3d;}
.rightPanelTable td {height:40px;}
.rightPanelTable th, .rightPanelTable tr, .rightPanelTable td {padding: 10px 5px 10px 5px;border-bottom: 1px solid rgb(236,236,236);text-align:start;}
#SaveDeployableItemsForm{padding-left: 10px; margin-right: 10px;}
#SaveDeployableItemsForm .rightPanelTable tr:not(.hide) {border-bottom: 1px solid rgb(236,236,236);}
#SaveDeployableItemsForm .rightPanelTable th, #SaveDeployableItemsForm .rightPanelTable tr, #SaveDeployableItemsForm .rightPanelTable td {padding: 10px 5px 10px 5px;border-top: 1px solid rgb(236,236,236);text-align:start;
    border-bottom: none;}
#SaveDeployableItemsForm .rightPanelTable tr.deployPendingTitle, #SaveDeployableItemsForm .rightPanelTable tr.deployPendingTitle th{border: none;border-left: 1px solid white;}
#SaveDeployableItemsForm .rightPanelTable th.deployPendingSelectAll{width: 20px}
#SaveDeployableItemsForm .rightPanelTable th.deployPendingType{width: 100px}
#SaveDeployableItemsForm .rightPanelTable th.deployPendingAction{width: 70px}
#SaveDeployableItemsForm .rightPanelTable th.deployPendingLastUpdate{width: 140px}
#SaveDeployableItemsForm .rightPanelTable th.deployPendingDetails{width: 63px;text-align: center}
#SaveDeployableItemsForm .rightPanelTable th.deployPendingUsedIn{width: 65px}
#SaveDeployableItemsForm .rightPanelTable tr.main td.deployPendingDetails{text-align: center}
#SaveDeployableItemsForm .rightPanelTable tr.main td.deployPendingDetails span{padding-right: 0}
.rightPanelTable {width:100%;border-collapse:collapse;margin-top:20px;}
.rightPanelTable tr.main.noborder { border-bottom: 0px;}
#SaveDeployableItemsForm .rightPanelTable tr.main.relatedItemsOpen ,#SaveDeployableItemsForm .rightPanelTable tr.main.relatedItemsOpen td{
    border-top:var(--main-color) 1px solid;
}
#SaveDeployableItemsForm .rightPanelTable tr.main.relatedItemsOpen {
    border: var(--main-color) 1px solid;
    border-bottom: none;
    font-weight: bold;
}
#SaveDeployableItemsForm .rightPanelTable tr.relatedItems {
    border-left: var(--main-color) 1px solid;
    border-right: var(--main-color) 1px solid;
}
#SaveDeployableItemsForm .rightPanelTable tr.relatedItems.last, #SaveDeployableItemsForm .rightPanelTable tr.relatedItems.last td,#SaveDeployableItemsForm .rightPanelTable tr.main.last.relatedItemsOpen, #SaveDeployableItemsForm .rightPanelTable tr.main.last.relatedItemsOpen td {
    border-bottom: var(--main-color) 1px solid;
}
#SaveDeployableItemsForm .fa.details{ color: var(--main-color); font-weight: 300; font-size: 14px;}
.rightPanelTable tr.detail { color: #6e6e6e; font-size:11px; height:22px;}
.rightPanelTable .partnerName { padding-right: 20px; }
.rightPanelTable .openPartnerListIcon {  position: absolute;margin-top: 2px;color: var(--color-slate-lightest);}
.rightPanelTable span { padding-right: 10px;}
.rightPanelTable td{
    padding-right: 5px;
}

.inlineform{
    padding:0px 50px 0px 0px;
    display:inline;
}
.CertDropdownDiv {padding-right: 5px;}
.hide{ display:none; }
tr.show{ display:table-row; }

/* Dep V2 Channel */
#channelStatusComponent span.deployAction {
    vertical-align:middle;
}
.channelStatusToggleSwitch {
    position: relative;
    display: inline-block;
    width: 40px;
    margin-right: 20px;
    height: 20px;
    vertical-align: middle;
    top: 0;
}

.channelStatusToggleSwitch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.channelStatusSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E5EBEE;
    -webkit-transition: .4s;
    transition: .4s;
}

.channelStatusSlider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 0px;
    bottom: 0px;
    -webkit-transition: .4s;
    background-color:#9AB1BB;
    transition: .4s;
}

input:checked + .channelStatusSlider:before {
    background-color: var(--color-green);
    left:8px;
}

input:checked + .channelStatusSlider {
    background-color: #C6ECB2;
}

input:focus + .channelStatusSlider {
    box-shadow: 0 0 1px var(--main-color);
}

input:checked + .channelStatusSlider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}

/* Rounded sliders */
.channelStatusSlider.channelStatusRound {
    border-radius: 20px;
}

.channelStatusSlider.channelStatusRound:before {
    border-radius: 50%;
}

/* popover */
.popover.bottom {
    margin-top: 10px;
}

.fade.in {
    opacity: 1;
}
.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 150px;
    padding: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    line-break: auto;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    font-size: 12px;
    background-color: var(--main-color);
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.popover.bottom>.arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: rgba(0,0,0,.25);
}
.popover.bottom>.arrow:after {
    top: 1px;
    margin-left: -10px;
    content: " ";
    border-top-width: 0;
    border-bottom-color: var(--main-color);
}
.popover>.arrow, .popover>.arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.popover>.arrow {
    border-width: 11px;
}
.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 12px;
    background-color: var(--main-color);
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
    color: white;
    text-align: center;
}
.popover-content {
    color: white;
    padding: 9px 14px;
    text-align: center;
}
.popover>.arrow:after {
    content: "";
    border-width: 10px;
}
.imgUpdateChannelBtn {
    padding-left:5px;
    padding-right:10px;
    vertical-align: text-top;
}

/*Client Pagination*/
.clt-pagination-parent{background-color:white;}
.clt-pagination-parent .clt-pagination-control{text-align:center}
.clt-pagination-parent .clt-pagination-body{padding-top:10px ;clear:both}
.clt-pagination-parent .clt-pagination-control>*{margin:0 2px}
.clt-pagination-parent .clt-pagination-control button{background-color:transparent;padding:3px}
.clt-pagination-parent .clt-pagination-control button:not(:disabled){cursor:pointer}
.clt-pagination-parent .clt-pagination-control button:disabled{cursor:not-allowed}
.clt-pagination-parent .clt-pagination-control input[type="number"]{width:75px;text-align:center}
.clt-pagination-parent .clt-pagination-filter .buttons{float:right}
.clt-pagination-parent .clt-pagination-filter .buttons [type="button"]{margin-top:0;margin-bottom:0}
.clt-pagination-parent .required-invalid{opacity:0}
.clt-pagination-parent.submitted [required]:invalid+.required-invalid,.clt-pagination-parent [required].invalid+.required-invalid{opacity:1}
.clt-pagination-parent .picker+img[src="../images/pickers/error.png"]{margin-left:-5px;margin-right:5px}

.findValueChoice {
    margin-bottom: 10px;
}

.flex-container {
    display: flex;
}

.flex-grow-fixed {
    flex-grow: 1;
}

/*Compact "mode" specific CSS*/
.compactView .ui-jqgrid tr.jqgrow td {height: 25px;}
.compactView .pickerBlock {margin: 10px 10px 10px 20px;}
.compactView .pickerDescription {padding: 0px;}
.compactView .pickerLabel {padding: 0px;}
.compactView .parametersSection legend {padding:0px;}
.columnItem {height: auto;padding: 4px;padding-left: 5px;} /*leaving both padding instructions because otherwise the default padding-left instruction gets picked up*/
.compactView .smallCardContentAside .pickerDescription{max-height: 18px;}

.explanatoryText{
    font-size: 14px;
    line-height: 20px;
}
.mainText{
    font-size: 24px;
    line-height: 30px;
}

/* The container */
.radioButtonContainer {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height:20px;
}

/* Hide the browser's default radio button */
.radioButtonContainer input {
    position: absolute;
    opacity: 0;
    left:-3px;
}

.radioButtonContainer.radioButtonDisabled {
    cursor: default;
    opacity: 0.2;
}

/* Create a custom radio button */
.radioButton {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: white;
    border-radius: 50%;
    border: 1px solid #ccc;
}

/* When the radio button is checked, add a blue background */
.radioButtonContainer input:checked ~ .radioButton {
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radioButton:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.radioButtonContainer input:checked ~ .radioButton:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radioButtonContainer .radioButton:after {
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
}
#crossEnvRightsTable .radioButton {
    height: 16px;
    width: 16px;
}
#crossEnvRightsTable .radioButtonContainer{padding-left: 20px}

#crossEnvRightsTable .radioButtonContainer .radioButton:after {
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
}

#changeLogGrid, #statisticGrid{
    vertical-align:top;
    width: 100%;
    height: 100%;
}


.confirmButton {
    width: calc(51%);
    margin-top: 15px;
    float: unset;
}

.popup {
    display: flex;
    margin: 10px;
    align-items: center;
}

#sopt_menu{
    z-index: 8001;
}

.SPWTH div{
    margin-top: 11px;
}

#bwAdmin_systemStatus .pickerBlock:not(:first-of-type){
    border-top: 1px dashed gray
}

/*used for metadata*/
.fa-plus-circle, .fa-minus-circle{
    margin-left: 10px;
    font-size: 16px
}

.dropdownAside .pickerDescription .justAdd{
    margin-top: 6px;
}
#chartdiv{
    min-height:500px;
    min-width: 800px;
    width:80%;
}

.actionBarInitialPosition{
    position : initial;
}

/* Global Search*/
#globalSearch{
    overflow: hidden;
}

#globalSearch #reuseSearch{
    overflow: hidden;
}
#globalSearch #reuseSearchResult{
    overflow: hidden;
}

#globalSearch #reuseSearchResult #globalSearchTabs{
    width: 100%;
    display: inline-flex;
}

#globalSearch #reuseSearchResult #globalSearchTabs .goToResults{
    height: 40px;
    line-height: 40px;
    width: 130px;
}

#globalSearch #reuseSearchResult #globalSearchTabs .goToResults a{
    height: 20px;
    line-height: 40px;
    width: 100%;
    color: var(--main-color);
    cursor: pointer;
}
#globalSearch #reuseSearchResult #globalSearchTabs .goToResults a i{
    padding-left: 10px;
}

#globalSearch #reuseSearchResult #globalSearchTabs{
    text-align: left;
    border-bottom: 1px solid var(--color-gray-lighter);
    border-radius: 0;
}
#globalSearch #reuseSearchResult #globalSearchTabs .tabs a{
    cursor: pointer;
    margin-left: 10px;
}
#globalSearch #reuseSearchResult #globalSearchTabs .tabs a span.count{
    background-color: var(--color-gray-lighter);
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 5px;
}
#globalSearch #reuseSearchResult #globalSearchTabs .tabs a.active span.count{
    background-color: #192226;
    color: white;
}
#globalSearch #reuseSearchResult #globalSearchTabsResults{
    margin-top: 5px;
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
}
#globalSearch #reuseSearchResult #globalSearchTabsResults div{
    width: 100%;
    overflow-y: hidden;
}
#globalSearch #reuseSearchResult #globalSearchTabsResults div.loading{
    width: auto;
}
#globalSearch #reuseSearchResult #globalSearchTabsResults table{
    width: 100%;
    border-collapse: collapse;
    text-indent: initial;
    text-align: left;
    table-layout: auto;
}
#globalSearch #reuseSearchResult #globalSearchTabsResults table tbody tr{
    cursor: pointer;
}
#globalSearch #reuseSearchResult #globalSearchTabsResults table tbody tr:hover,#globalSearch #reuseSearchResult #globalSearchTabsResults table tbody tr:nth-child(odd):hover{
    background-color: var(--color-hover-row-color);
}
#globalSearch #reuseSearchResult #globalSearchTabsResults table th{
    text-transform: uppercase;
    color: #3d3d3d;
    font-weight: 600;
    padding: 2px 5px 2px 9px;
    font-size: 12px;
    white-space: nowrap;
}
#globalSearch #reuseSearchResult #globalSearchTabsResults table tbody tr:nth-child(odd){
    background-color: var(--color-even-row-color);
}

#globalSearch #reuseSearchResult #globalSearchTabsResults table tbody td{
    border-right: 1px solid var(--color-grid-border);
    padding: 2px 5px 2px 9px;
    white-space: nowrap;
    overflow-wrap: break-word;
    text-overflow : ellipsis;
    max-width: 200px;
    overflow: hidden;
}
#globalSearch #reuseSearchResult #globalSearchTabsResults table tbody td em{
    font-style: normal;
}
#globalSearch #reuseSearchResult #globalSearchTabsResults table tbody td:last-child{
    border: none;
}
#globalSearch #reuseSearchResult #globalSearchTabsResults table tbody td.gwProperty{
    max-width: 450px;
}

#globalSearch #reuseSearchResult #globalSearchTabsResults table tbody td.gwProperty button.view{
    display: none;
} /* Hide the view button for SimplePassword fields */

#globalSearch #reuseSearchResult #globalSearchTabsResults table td{
    font-size: 12px;
    line-height: 20px;
}
#globalSearchInLevel2Menu{
    min-width: 260px;
    max-width: 260px;
    line-height: 40px;
    padding-left: 10px;
    border-left: 1px var(--color-gray-light) solid;
    font-size: 14px;
    vertical-align: middle;
    float: right;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}
#globalSearchInLevel2MenuInput{
    width: 230px;
    height: 40px;
    border: none;
    padding-left: 10px;
}
#globalSearchInLevel2MenuInput:focus {
    outline: none;
    box-shadow: none;
}


/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/* Very specific gateway css */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/
#httpClientCalls{
    padding:20px 10px 10px 10px;
}

#httpClientCalls.readonly .pickerBlock.calls .pickerDescription table{
    width: 100%;
}
.pickerBlock.oauth2Implicit, .pickerBlock.oauth2Configuration{
    margin-left: 0;
}
.pickerBlock.oauth2Status.error .pickerDescription{
    color: var(--color-red);
}

.oauth2Configuration.oauth2Connector .parametersSection.oauth2Connector .pickerBlock{
    margin-left: 0px;
}
.oauth2Configuration.oauth2Connector, .oauth2Configuration.oauth2Connector .parametersSection.oauth2Connector, .oauth2Configuration.oauth2Connector .parametersSection.oauth2Connector .pickerBlock.oauth2Connector{
    margin-top: 0px;
}
.pickerBlock.oauth2Status div.pickerDescription span.warning{
    color:var(--color-orange)
}
.actionLink.oauth2ConnectionButton>img{
    height:20px;
    width:20px;
}
.actionLink.oauth2ConnectionButton{
    margin:0px;
    float: none;
}
.actionLink.oauth2ConnectionButton>span{
    text-transform: none;
    vertical-align: top;
}

#httpClientFlow_session_authentication_authentication{
    margin-bottom: 8px;
}


/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/* PDF TEMPLATE EDITOR V2 */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/* Global structure. The screen is divided into 6 main zones, that may never overlap (and neither expand and take more place that what is defined here */
.pdfTemplateEditor { height: 100%; width: 100%; display:grid; row-gap: 1px; background-color: var(--color-gray-light);
    grid-template-rows: 59px auto 59px;
    grid-template-columns: 18% 47% 28% 7%;
    grid-template-areas:
            'samplesZone samplesZone samplesZone topRightActionsZone'
            'pdfViewerZone pdfViewerZone extractorsEditorZone extractorsEditorZone'
            'templateSelectorZone bottomRightActionsZone bottomRightActionsZone bottomRightActionsZone';
}
.pdfTemplateEditor>div { overflow: auto; } /* None of the 6 main zones may expand. If too much content, they must scroll, but not take more place and break split of the screen defined here. */
.pdfTemplateEditor .samplesZone { grid-area: samplesZone; }
.pdfTemplateEditor .topRightActionsZone { grid-area: topRightActionsZone; }
.pdfTemplateEditor .pdfViewerZone { grid-area: pdfViewerZone; }
.pdfTemplateEditor .extractorsEditorZone { grid-area: extractorsEditorZone; padding: 15px 15px 0px 15px; background-color: var(--color-gray-lightest);}
.pdfTemplateEditor .templateSelectorZone { grid-area: templateSelectorZone; background-color: white; }
.pdfTemplateEditor .bottomRightActionsZone { grid-area: bottomRightActionsZone; }

/* Samples zone. */
.pdfTemplateEditor .samplesZone { background-color: white; display:flex; align-items: center; padding: 10px; line-height: 30px; }
.pdfTemplateEditor .samplesZone .title { font-weight: 600; }
.pdfTemplateEditor .samplesZone .sample { max-width: 500px;  text-overflow: ellipsis; border-radius: 3px; background-color: #F1F4F6; padding : 0px 5px; margin-left:10px; display:inline-block; cursor: pointer; }
.pdfTemplateEditor .samplesZone .sample.selected { color: var(--main-color); }
.pdfTemplateEditor .samplesZone .sample i {margin-left: 4px; color: var(--ts-color-gray);}  /* Delete icon */
.pdfTemplateEditor .samplesZone .addSample { padding-left: 10px; cursor:pointer;}
.pdfTemplateEditor>.samplesZone>.addSampleMask {position:fixed; top:0px; left:0px; width:100vw; height:100vh; z-index:1; background-color:#666666; opacity:0.9; }
.pdfTemplateEditor>.samplesZone>.addSampleZone {position:fixed; top:20vh; left:20vw; width:60vw; height:60vh; z-index:2; background-color:white; border: 4px dashed var(--color-gray-light);
    display:flex; flex-direction:column; justify-content: space-around; align-items: center; color: var(--color-gray); font-size: 24px;}
.pdfTemplateEditor>.samplesZone>.addSampleZone>span:nth-child(2) {font-size: 16px;}
.pdfTemplateEditor>.samplesZone>.addSampleZone>.stopAddSample { position: absolute; top: 8px; right: 8px; cursor: pointer;}

/* PdfViewer zone. */
.pdfTemplateEditor>.pdfViewerZone, .pdfErrorEditor>.pdfViewerZone  { padding: 15px 15px 0px 15px; background-color: var(--color-gray-lightest);}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer, .pdfErrorEditor>.pdfViewerZone>.pdfViewer { width:100%; height:100%; border:1px solid var(--color-gray-light); border-radius: 3px; background-color: white; }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.loadingPdfViewer, .pdfErrorEditor>.pdfViewerZone>.pdfViewer>.loadingPdfViewer {width:100%; height:100%; display:flex; flex-direction: column; justify-content: center; align-items: center;
    font-size: 14px; color: var(--color-gray); pointer-events: none; animation: blink-animation 3s infinite; }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.loadingPdfViewer>i, .pdfErrorEditor>.pdfViewerZone>.pdfViewer>.loadingPdfViewer>i {font-size: 45px; margin: 3px;}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer, .pdfErrorEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer {width:100%; border-bottom: 5px solid var(--color-gray); position:relative; }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>img, .pdfErrorEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>img {width:100%;}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.pdfFields>.pdfField, .pdfErrorEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.pdfFields>.pdfField{position:absolute; background-color: #0a6aa1; opacity:0.12; cursor:pointer; }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.pdfLabel, .pdfErrorEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.pdfLabel {position:absolute; background-color: var(--main-color); opacity:0.5;}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.highlightedExtractor, .pdfErrorEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.highlightedExtractor {position:absolute; background-color: var(--zone-color); opacity:0.5;}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.highlightedExtractor.success, .pdfErrorEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.highlightedExtractor.success { --zone-color:var(--color-green); }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.highlightedExtractor.warning, .pdfErrorEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.highlightedExtractor.warning { --zone-color:var(--color-orange); }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.highlightedExtractor.error, .pdfErrorEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.highlightedExtractor.error{ --zone-color:var(--color-red); }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.matchingConditionField{position:absolute; background-color: var(--main-color); opacity:0.5;}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.matchingConditionField:before{ content: '\f13d'; font-family: "Font Awesome 6 Pro"; font-size: 16px; color:var(--main-color); position: absolute; top:-20px; left:0px;}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.splitterField{position:absolute; background-color: var(--main-color); opacity:0.5;}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.splitterField:before{ content: '\f0c4'; font-family: "Font Awesome 6 Pro"; font-size: 16px; color:var(--main-color); position: absolute; top:0px; left:-20px;}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.tableLimit { position: absolute; width: 100%; height: 2px; background-color: var(--main-color); }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.outOfTableLimit { position: absolute; width: 100%; background-color:#666666; opacity:0.2; }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.tableLimitSelector { position:absolute; width:100%; height: 2px; background-color: var(--color-red);}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.tableRow {position:absolute; border-top: 1px dashed var(--main-color); border-bottom: 1px dashed var(--main-color);}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.tableRow ~ .tableRow {border-top : none;}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.tableRowTriggeringElement {position:absolute; border: 3px solid var(--main-color); }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.tableField{ --zone-color:var(--color-green); position:absolute; background-color: var(--zone-color); opacity:0.5; }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.tableField.warning{ --zone-color:var(--color-orange); }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.tableField.highlighted {--zone-color:var(--color-green-darker); opacity:0.6;}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.tableField.warning.highlighted {--zone-color:var(--color-orange-darker); }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.skipZone{position:absolute; background-color: #a1004e; opacity: 0.12;  }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.resizableZone{ cursor:move;}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.resizableZone>div{ position:absolute; width:6px; height: 6px; background-color: white; border-width: 1px; border-style: solid; border-color: var(--zone-color); }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.resizableZone>div.topRightHandle{ top: -4px; right: -4px; cursor: nesw-resize; }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.resizableZone>div.topLeftHandle{ top: -4px; left: -4px; cursor: nwse-resize; }
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.resizableZone>div.bottomLeftHandle{ bottom: -4px; left: -4px; cursor: nesw-resize;}
.pdfTemplateEditor>.pdfViewerZone>.pdfViewer>.pdfPageContainer>.extractors>.resizableZone>div.bottomRightHandle{ bottom: -4px; right: -4px; cursor: nwse-resize; }

/* Process of selecting an item on the pdf. */
.pdfTemplateEditor>.selectOnPdfHelp {position:fixed; padding: 10px; background-color: #deb544; border-radius: 15px; color: #464429; font-size: 12px; z-index:3;}
.pdfTemplateEditor .aboveMask {z-index: 2;}
.pdfTemplateEditor .forbiddenClick { pointer-events: none; }

/* Editor zone (available to all states) */
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection { padding:15px; border-bottom: 1px solid var(--color-gray-light); }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection>.summary { display:flex; justify-content: space-between; align-items: center; }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection>.details {margin-top: 10px;}
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection .value { font-weight: bold; word-break:break-word; }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection.success { background-color: var(--color-green-lightest); }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection.success i.icon { color:var(--color-green); }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection.warning { background-color: var(--color-yellow-lightest); }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection.warning i { color:var(--color-orange); }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection.warning li { color:var(--color-orange); }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection.error { background-color: var(--color-red-lighter); }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection.error i { color:var(--color-red); }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection.error li { color:var(--color-red); }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection.info { background-color: var(--color-blue-lightest); }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection.info i { color:var(--main-color); }
.pdfTemplateEditor>.extractorsEditorZone .liveDataSection.info li { color:var(--main-color); }
.pdfTemplateEditor>.extractorsEditorZone input.operand {line-height: 20px; margin: 0px 0px 5px 5px; }
.pdfTemplateEditor>.extractorsEditorZone select[name="strategy"] { margin-bottom: 5px; }
.pdfTemplateEditor>.extractorsEditorZone .actions { height: 60px; background-color: var(--color-gray-lightest); display:flex; align-items: center; justify-content: flex-end; padding:15px; }
.pdfTemplateEditor>.extractorsEditorZone .helpZone {padding: 15px;}
.pdfTemplateEditor>.extractorsEditorZone .helpText {background-color: var(--color-blue-lightest); padding:10px;}
.pdfTemplateEditor>.extractorsEditorZone .helpImage {border: 3px solid rgba(106, 106, 106, 0.4); opacity: .8; width: 100%; margin-top:10px; }
.pdfTemplateEditor>.extractorsEditorZone .editOnPdf {cursor: pointer; font-size:16px;}
.pdfTemplateEditor>.extractorsEditorZone i {cursor: pointer; margin-left: 10px; font-size: 16px; }


/* extractorsList */
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList { width:100%; border:1px solid var(--color-gray-light); border-radius: 3px; background-color: white; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList .title {font-size: 18px; padding:20px; display:flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-gray-light);}
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList table {width:100%; border-collapse: collapse; table-layout: fixed;}
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList table thead td { text-transform: uppercase; font-size: 13px; font-weight: bold; border: 0px; text-align: center; height:50px;}
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList table tr:not(.listTitle) {cursor: pointer;  }
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList table tr:not(.listTitle):hover {background-color: var(--main-color); color:white;  }
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList .clickOnPdfToMap { color: var(--main-color); cursor:pointer;}
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList .clickOnPdfToMap:hover { color:white;}
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList table td {border:1px solid var(--color-gray-light); height:40px; font-size: 14px; vertical-align: middle; text-overflow: ellipsis; overflow: hidden; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList table td:nth-child(1) { border-left: none; width:50%; padding: 5px 10px; } /* Name */
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList table td:nth-child(2) { border-right: none; padding: 5px 0px 5px 10px; }  /* Live data. */
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList table tr.mandatory td:nth-child(1)::after { content:"*"; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList table tr.tableHeader>td {text-align: center; vertical-align:bottom; height:60px; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList .liveData {  width:100%; display:block; overflow: hidden; white-space:nowrap; text-overflow: ellipsis; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList .liveData.empty { color: var(--color-gray-lighter);}
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList .liveData.calculating { color: var(--color-gray-lighter);}
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList .liveData.error i { color: var(--color-red);}
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList .liveData.warning i { color: var(--color-orange);}
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList .liveData i { float:right; margin:0px 5px; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorsList .liveDataHeader.error i { color: var(--color-red);}

/* extractorDetail (common to field and table) */
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail { width:100%; border:1px solid var(--color-gray-light); border-radius: 3px; background-color: white; font-size: 14px;}
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail>.title {font-size: 18px; padding:20px; border-bottom: 1px solid var(--color-gray-light); width:100%; display: flex; align-items: center; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail>.title>span {white-space: nowrap; display: inline-block;}
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail>.title>input {font-size: 18px; padding: 5px; font-style: italic; min-width:0; width:100px; flex-grow: 1; margin-left: 5px;}
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail>.title>.name {font-size: 18px; font-style: italic;  margin-left: 5px;}
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail>.title>.nameError i {color:red; margin-left: 5px; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail>.title>i.withValidations {color:var(--main-color); }
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail .transformer {border: 1px solid var(--color-gray-light); background-color: var(--color-gray-lightest); color: var(--main-color);
    width:100%; font-size: 12px; margin: 6px 0px;}
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail .transformer>.summary {display:flex; justify-content: space-between; align-items: center; padding: 8px; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail .transformer>.summary>span:first-child i {margin: 0px 8px 0px 0px; cursor: default; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail .transformer>.summary>span:last-child i {cursor: pointer; margin: 0px 0px 0px 10px; font-size: 14px; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail .transformer>.transformerDetails { border-top: 1px solid var(--color-gray-light); padding: 8px; color: var(--color-slate-dark);}
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail .transformer>.transformerDetails>div { margin-bottom: 8px;}

/* fieldExtractorDetail */
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail.field>div {padding: 15px; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail.field .liveDataSection .valueIntro { text-transform: uppercase; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail.field .sectionTitle { font-size: 14px; margin:10px 0px 5px 0px; text-transform: uppercase;}
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail.field .extractionRules>.radioButtonContainer {margin: 10px 0px 3px 0px; width:fit-content; }
.pdfTemplateEditor>.extractorsEditorZone>.extractorDetail.field .extractionRules>.radioButtonContainer i {color:var(--color-gray);}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.field .extractionRules > .extractionRuleDetail { padding-left: 30px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.field .extractionRules > .extractionRuleDetail > .multipleKeyLabels { margin: 5px 0px 3px 0px;}
.pdfTemplateEditor > #addAutomaticConversionMask { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: 1; background-color: #666666; opacity: 0.9;}
.pdfTemplateEditor > #addAutomaticConversionPopup { z-index: 2; background-color: white; width: 400px; position: fixed; top: 20vh; left: calc(50vw - 200px); border-radius: 3px; padding: 10px 10px 20px 10px; font-size: 14px;}
.pdfTemplateEditor > #addAutomaticConversionPopup .title { font-size: 14px; padding: 10px;}
.pdfTemplateEditor > #addAutomaticConversionPopup .title > .value { font-weight: bold;}
.pdfTemplateEditor > #addAutomaticConversionPopup .option { width: 100%; padding: 5px 10px; cursor: pointer;}
.pdfTemplateEditor > #addAutomaticConversionPopup .option:hover { background-color: var(--main-color); color: white;}

/* tableExtractorDetail */
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .stepsZone { padding: 15px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step { font-size: 14px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step .iconbar { margin-right: 6px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step > .title { display: flex; align-items: center; cursor: pointer; height: 28px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step > .title > .iconbar > i { font-size: 21px; margin: 0px; position: relative;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step > .title > .iconbar > i > span { font-size: 15px; color: white; position: absolute; left: 6px; top: 3px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step > .title > .iconbar > i.ok { color: var(--main-color);}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step > .title > .iconbar > i.todo { color: var(--color-gray);}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step > .title > .iconbar > i.empty { color: var(--color-gray-light);}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step > .title > .content > span { text-transform: uppercase;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step > .details { display: flex;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step > .details > .content { flex-grow: 1;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step > .details > .iconbar { border-left: 1px solid var(--color-gray-lighter); width: 20px; position: relative; left: 10px; min-height: 6px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step.fields > .details > .iconbar { border-left: none;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step.delimiter > .details > .content > .value { margin: 2px 0px 6px 0px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step.fields .field { border: 1px solid var(--color-gray-light); background-color: var(--color-gray-lightest); padding: 6px; margin-bottom: 6px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step.fields .field.beingChosenOnPdf { background-color: var(--main-color);}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step.fields .field > .fieldHeader { display: flex; justify-content: space-between; align-items: center;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step.fields .field > .fieldHeader i { margin-left: 8px; font-size: 15px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step.fields .field > .fieldHeader > .mode { margin: 0px 6px 0px 0px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step.fields .field > .fieldHeader > input { width: 100px; flex-grow: 1;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .step.fields .field > .constant { border: 1px solid var(--color-gray-light); padding: 8px; font-size: 12px; margin-top: 8px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .expandOrCollapse { float: right; color: var(--color-gray-light);}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .liveDataSection .changeRow { cursor: pointer; margin: 0px 3px;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .liveDataSection .colName { color: var(--color-gray);}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .liveDataSection .colValue { font-weight: bold;}
.pdfTemplateEditor > .extractorsEditorZone > .extractorDetail.table .liveDataSection .colValue.warning { color: var(--color-orange);}

/* settings (matchingCondition and splitter) */
.pdfTemplateEditor > .extractorsEditorZone > .pdfTemplateSettings { width: 100%; border: 1px solid var(--color-gray-light); border-radius: 3px; background-color: white;}
.pdfTemplateEditor > .extractorsEditorZone > .pdfTemplateSettings > .title { font-size: 18px; padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-gray-light);}
.pdfTemplateEditor > .extractorsEditorZone > .pdfTemplateSettings > .section { padding: 20px;}
.pdfTemplateEditor > .extractorsEditorZone > .pdfTemplateSettings > .section > .title { margin-bottom: 5px; text-transform: uppercase;}
.pdfTemplateEditor > .extractorsEditorZone > .pdfTemplateSettings > .section > .helpText { font-size: 12px; margin-bottom: 5px;}

/* Actions zones. */
.pdfTemplateEditor .bottomRightActionsZone { display: flex; align-items: center; justify-content: flex-end; padding: 0px 10px; background-color: var(--color-gray-lightest);}
.pdfTemplateEditor .topRightActionsZone { display: flex; align-items: center; justify-content: flex-end; padding-right: 15px; background-color: white; font-size: 19px;}
.pdfTemplateEditor .topRightActionsZone > * { display: inline-block; margin: 5px; cursor: pointer;}
.pdfTemplateEditor .topRightActionsZone .settingsStatus { position: relative; bottom: 8px; left: -7px; font-size: 12px;}
.pdfTemplateEditor .topRightActionsZone .settingsStatus > i.error { color: red;}
.pdfTemplateEditor .topRightActionsZone .settingsStatus > i.warning { color: darkorange;}
.pdfTemplateEditor .templateSelectorZone > select { width: calc(100% - 24px); height: 100%; border: none;}
.pdfTemplateEditor .templateSelectorZone > input { width: calc(100% - 36px); height: 100%; border: none;}
.pdfTemplateEditor .templateSelectorZone > input:focus, .pdfTemplateEditor .templateSelectorZone > select:focus { outline: none; box-shadow: none;}
.pdfTemplateEditor .templateSelectorZone i { cursor: pointer; font-size: 16px; margin-left: 5px;}

/* Dialogs (field or table, table field extraction mode). */
.pdfTemplateEditor > .dialogContainer { position: absolute; width: 100%; height: 100%; background-color: rgba(125, 125, 125, 0.7); display: flex; justify-content: center; align-items: center;}
.pdfTemplateEditor .dialog { width: 800px; background-color: white; border: 1px solid var(--color-gray-light); opacity: 1;}
.pdfTemplateEditor .dialog > .title { line-height: 40px; font-size: 14px; letter-spacing: 1px; border-bottom: 1px solid var(--color-gray-light); padding: 0px 10px; display: flex; justify-content: space-between; align-items: center;}
.pdfTemplateEditor .dialog > .title > i { cursor: pointer;}
.pdfTemplateEditor .dialog > .choice { border: 1px solid var(--color-gray-light); padding: 10px; margin: 20px; width: calc(100% - 40px); cursor: pointer;}
.pdfTemplateEditor .dialog > .choice .choiceTitle { font-size: 16px;}
.pdfTemplateEditor .dialog > .choice .choiceTitle > i { margin: 0px 8px 0px 2px;}
.pdfTemplateEditor .dialog > .choice .choiceDescription { margin: 5px 0px 0px 30px;}
.pdfTemplateEditor .dialog.columnMode > .choice { display: flex; align-items: center; justify-content: flex-start;}
.pdfTemplateEditor .dialog.columnMode > .choice .choiceDescription { margin-left: 0px;}
.pdfTemplateEditor .dialog.columnMode input[type="radio"] { margin-right: 20px;}
.pdfTemplateEditor .dialog.columnMode > .choice.active {background-color:var(--color-gray-lightest)}

/*Reuse PDF template */
#reuseExistingPdfMdsPanel {
    position: relative;
    width: 100%;
    background-color: white;
    text-align: left;
    padding: 10px;
    display: none;
}

#reuseExistingPdfMdsPanel p{
    margin-bottom: 10px;
}

#reuseExistingPdfMdsPanel input {
    position: inherit;
    width: 100%;
    display: block;
    height: 40px;
    padding: 10px;
    border: 1px solid var(--color-gray-light);
}
#reuseExistingPdfMdsPanel input:hover { border:1px solid var(--main-color);box-shadow: 0 0 0 1px var(--main-color-lighter);}
#reuseExistingPdfMdsPanel input:focus { border:1px solid var(--main-color);box-shadow: 0 0 0 1px var(--main-color-lighter);}

.mdresult {
    border-bottom: 1px solid var(--color-gray-light);
    width: 100%;
    position: relative;
    padding: 10px;
    display: inline-flex;
}

.mdresult:last-child {
    border-bottom: none;
}

.mdresult span {
    overflow: hidden;
    text-overflow: ellipsis;
    margin: auto;
    padding-right: 10px;
    display: block;
    white-space: nowrap;
    color: black;
}

.mdresult .useit {
    position: relative;
    right: 0px;
    border: 1px solid var(--main-color);
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--main-color);
    cursor: pointer;
    white-space: nowrap;
}
.mdresult .useit:hover {
    background-color: var(--main-color);
    color: white;
}

/*--------------------------------------------------------------------------------------------------------------------------------------------*/
/* PDF ERROR EDITOR V2 */
/*--------------------------------------------------------------------------------------------------------------------------------------------*/

/* Global structure. The screen is divided into 6 main zones, that may never overlap (and neither expand and take more place that what is defined here */
.pdfErrorEditor {
    height: 100%;
    width: 100%;
    display: grid;
    row-gap: 1px;
    background-color: var(--color-gray-light);
    grid-template-rows: auto 59px;
    grid-template-columns: 65% 35%;
    grid-template-areas:
            'pdfViewerZone extractorsEditorZone'
            'bottomRightActionsZone bottomRightActionsZone';
}

.pdfErrorEditor > div {
    overflow: auto;
} /* None of the 3 main zones may expand. If too much content, they must scroll, but not take more place and break split of the screen defined here. */
.pdfErrorEditor .pdfViewerZone { grid-area: pdfViewerZone; }

.pdfErrorEditor>.mdFieldsZone>.mdFields { width:100%; border:1px solid var(--color-gray-light); border-radius: 3px; background-color: white; }
.pdfErrorEditor>.mdFieldsZone>.mdFields .title {font-size: 18px; padding:20px; display:flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-gray-light);}
.pdfErrorEditor>.mdFieldsZone>.mdFields table {width:100%; border-collapse: collapse; table-layout: fixed;}
.pdfErrorEditor>.mdFieldsZone>.mdFields table thead td { text-transform: uppercase; font-size: 13px; font-weight: bold; border: 0px; text-align: center; height:50px;}
.pdfErrorEditor>.mdFieldsZone>.mdFields table td {border:1px solid var(--color-gray-light); height:40px; font-size: 14px; vertical-align: middle; text-overflow: ellipsis; overflow: hidden; }
.pdfErrorEditor>.mdFieldsZone>.mdFields table td:nth-child(1) { border-left: none; width:50%; padding: 5px 10px; } /* Name */
.pdfErrorEditor>.mdFieldsZone>.mdFields table td:nth-child(2) { border-right: none; padding: 5px 0px 5px 10px; }  /* Live data. */
.pdfErrorEditor>.mdFieldsZone>.mdFields table tr.mandatory td:nth-child(1)::after { content:"*"; }
.pdfErrorEditor>.mdFieldsZone>.mdFields table tr.tableHeader>td {text-align: center; vertical-align:bottom; height:60px; }

.pdfErrorEditor>.mdFieldsZone { grid-area: extractorsEditorZone; padding: 15px 15px 0px 15px; background-color: var(--color-gray-lightest);}
.pdfErrorEditor>.mdFieldsZone i.hidden {display: none }
.pdfErrorEditor>.mdFieldsZone>.mdFields .clickOnPdfToMap:hover { color:var(--color-gray-light);}
.pdfErrorEditor>.mdFieldsZone>.mdFields .addLine { text-align: center; }
.pdfErrorEditor>.mdFieldsZone>.mdFields .addLine span{ cursor: pointer}
.pdfErrorEditor>.mdFieldsZone>.mdFields .fa-trash { cursor: pointer}
.pdfErrorEditor>.mdFieldsZone>.mdFields .alreadyExtracted { background-color: var(--color-gray-lighter); color: var(--color-slate-lightest);}
.pdfErrorEditor>.mdFieldsZone>.mdFields input { width: 90%; height: 100%;background-color: inherit; border:0px; box-shadow: none; padding-right: 5px} /*the padding right is to leave some space for the icon */
.pdfErrorEditor>.mdFieldsZone>.mdFields .error td:nth-child(1) { background-color: var(--color-red); color: white;}
.pdfErrorEditor>.mdFieldsZone>.mdFields .successfullyMapped  { background-color: var(--color-green);color: white;}
.pdfErrorEditor>.mdFieldsZone>.mdFields .error  i{ color: var(--color-red);}
.pdfErrorEditor>.mdFieldsZone>.mdFields .clickOnPdfToMap:hover { background-color: var(--main-color); cursor:pointer;}
.pdfErrorEditor>.mdFieldsZone>.mdFields .clickOnPdfToMap.emptyValue input { color: var(--main-color); }
.pdfErrorEditor>.mdFieldsZone>.mdFields .clickOnPdfToMap input{ cursor:pointer;}
.pdfErrorEditor>.mdFieldsZone>.mdFields .clickOnPdfToMap:hover input{ color:white;}
.pdfErrorEditor>.mdFieldsZone>.mdFields .clickOnPdfToMap.focused{ background-color: var(--main-color);}
.pdfErrorEditor>.mdFieldsZone>.mdFields .clickOnPdfToMap.focused input{ color: white;}
.pdfErrorEditor>.mdFieldsZone>.mdFields .clickOnPdfToMap div{ width: 100% ; height: 100%;}
.pdfErrorEditor>.mdFieldsZone>.mdFields table tr.tableHeader {cursor: auto;  }

.pdfErrorEditor .bottomRightActionsZone { grid-area: bottomRightActionsZone; }
.pdfErrorEditor .bottomRightActionsZone { display:flex; align-items: center; justify-content: flex-end; padding: 0px 10px; background-color: var(--color-gray-lightest); }
.pdfErrorEditor .bottomRightActionsZone .errorsRemaining { background-color: var(--color-red); border-color: var(--color-red); text-transform: uppercase; cursor: auto}

/*Channel flow  */
.channelFlowContainer{ position: relative; height: calc(100vh - 100px); width:100%; border:1px solid orange; overflow:auto; }
.channelFlowContainer .nodesContainer { position: relative; }
.channelFlowContainer .nodesContainer .node { position: absolute; width: 200px; height: 50px; display: flex; justify-content: center; align-items: center; box-shadow: 4px 4px 4px grey; padding: 5px; border: black 1px solid; border-radius: 5px; cursor:move; }
.channelFlowContainer .nodesContainer.compactRows .node { height:30px;}
.channelFlowContainer .nodesContainer.compactColumns .node { width: 150px;}
.channelFlowContainer .nodesContainer .node.channel.external { background-color: var(--color-blue-lightest);}
.channelFlowContainer .nodesContainer .node.routing { width: max-content; height:max-content;}
.channelFlowContainer .nodesContainer .node.channels { box-shadow:4px 4px 0px -1px white, 4px 4px 0px 0px black, 8px 8px 0px -1px white, 8px 8px 0px 0px black, 12px 12px 4px 0px grey; }
.channelFlowContainer .nodesContainer .node a{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:inline; cursor: pointer; }
.channelFlowContainer .nodesContainer .node.channels a{ cursor: default; }
.channelFlowContainer .linesSvg polyline { fill:none; stroke-width: 1px; }
.channelFlowContainer .linesSvg polyline.normal { stroke: #A8CBE2; marker-end: url(#markerArrow);}
.channelFlowContainer .linesSvg polyline.back { stroke: lightgray; marker-end: url(#markerArrow);}
.channelFlowContainer .linesSvg polyline.farRight { stroke: darkgray; marker-end: url(#markerArrow);}
.channelFlowContainer .linesSvg polyline.highlighted {stroke: orange; z-index: 100; marker-end: url(#markerArrowHighlighted); }
.channelFlowContainer .legend.fa-info-circle{ position: absolute;left: 10px;top: 10px;font-size: 20px;z-index: 10; } /*the z index is needed to trigger the mouse over for the tooltip, check https://stackoverflow.com/questions/21733391/css-hover-will-not-work-on-position-absolute */
.legendList .fa-rectangle.blue.externalChannel{background-color: var(--color-blue-lightest);color: var(--color-blue-lightest);}
.legendList .fa-rectangle.white.internalChannel{background-color: white;color: white;}
.channelDetailsContainer .channelDetail {  position: relative; height:55px; display: flex; flex-direction: row; align-items: center; vertical-align: middle; padding: 0px 20px;}
.channelDetailsContainer .channelDetail .channelElement { height: 36px; line-height: 18px; display: flex; flex-direction: row; font-size: 13px; align-items: center; vertical-align: middle;}
.channelDetailsContainer .channelDetail .channelElement .elementTitle span{ display: block; width: 200px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer}
.channelDetailsContainer .channelDetail .channelElement .elementTitle .elementType {font-size: 11px; line-height: 12px;}
.channelDetailsContainer .channelDetail .dot {position: relative; margin-right: 8px; width: 26px; height: 26px;}
.channelDetailsContainer .channelDetail .dot i{font-size: 16px;left: 17px;top: 17px;position: absolute;}
.channelDetailsContainer .channelDetail .dot span { color: white; font-size: 18px; position: absolute; top: 5px; left: 8px; }
.channelDetailsContainer .channelDetail .fa-times{ position: absolute; right: 20px; top: 18px; }
.legend {display: flex;flex-direction: column; row-gap: 5px;}
.legendContainer {display: flex;flex-direction: row}
#channels_channelDetail_channelFlow .tooltip-container .fa-ul {margin-left: var(--fa-li-margin,1.5em);}
#channels_channelDetail_channelFlow .tooltip-container .fa-li {top: 4px;}
#channels_channelDetail_channelFlow .tooltip-container .fa-ul>li {padding-left: 2px}
#channels_channelDetail_channelFlow .tooltip-container{max-width: 500px;}


/* Message flow. */
.messageFlowContainer{ position: relative; height: calc(100vh - 100px); width:100%; border:1px solid orange; overflow:auto; }
.messageFlowContainer .nodesContainer { position: relative; }
.messageFlowContainer .nodesContainer .node { position: absolute; width: 245px; height: 50px; display: flex; justify-content: center; align-items: center; flex-direction: column;
    box-shadow: 4px 4px 4px grey; padding: 3px; border: black 1px solid; border-radius: 5px; }
.messageFlowContainer .nodesContainer .node.message { cursor: pointer;}
.messageFlowContainer .nodesContainer .node.group { box-shadow:4px 4px 0px -1px white, 4px 4px 0px 0px black, 8px 8px 0px -1px white, 8px 8px 0px 0px black, 12px 12px 4px 0px grey; }
.messageFlowContainer .nodesContainer .node.selected { border: 3px solid orange; }
.messageFlowContainer .nodesContainer .node span {display:inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#exploitation_messageDetail_flow .tooltip-container{max-width: 500px}
#exploitation_messageDetail_flow .tooltip-container .fa-ul {margin-left: var(--fa-li-margin,1.5em);}
#exploitation_messageDetail_flow .tooltip-container .fa-li {top: 4px;}
#exploitation_messageDetail_flow .tooltip-container .fa-ul>li {padding-left: 2px}
#exploitation_messageDetail_flow .tooltip-container{max-width: 500px;}
/* Statuses */
.messageFlowContainer .nodesContainer .node.success {background-color: var(--color-green-lightest);}
.messageFlowContainer .nodesContainer .node.error {background-color: var(--ts-color-red-lighter);}
.messageFlowContainer .nodesContainer .node.processing {background-color: var(--color-gray-lighter);}
.legendTooltip .success {color: var(--color-green-lightest);}
.legendTooltip .error {color: var(--ts-color-red-lighter);}
.legendTooltip .processing {color: var(--color-gray-lighter);}
/* Compact mode. */
.messageFlowContainer .nodesContainer.compactRows .node { height:34px; padding: 1px; font-size:11px; line-height: 13px;}
.messageFlowContainer .nodesContainer.compactColumns .node { width: 150px;}
.messageFlowContainer .linesSvg polyline { fill:none; stroke-width: 1px; stroke: #A8CBE2; }
.messageFlowContainer .linesSvg polyline.normal {  marker-end: url(#markerArrow); }
.messageFlowContainer .linesSvg polyline.highlighted {stroke: orange; z-index: 100; marker-end: url(#markerArrowHighlighted); }
/* Tools. */
.messageFlowContainer .tools { position: absolute;left: 10px;top: 10px;font-size: 20px;z-index: 10; display: flex; flex-direction: column; gap:6px; }
#exploitation_messageDetail_flow #selectAsideOptions .intro {background-color: var(--color-gray-lightest); padding: 10px; border-bottom: 1px solid var(--color-gray-light);}

/* PDF Upload - EasyPDF */
#pdfUpload .logoTitle {
    padding-left: 10px;
}
/* When the app cannot be used because for example we do not have any OAuth1 token - z-index a bit lower than the one of notification class */
#pdfUpload .blockingMask {background-color: #BBBBBB; height: 100%; left: 0; top:0; opacity: 0.7; position: fixed; width: 100%; z-index: 999; }

#pdfUpload .infoRibbon {
    background: #057AC0;
    padding: 100px;
}

#pdfUpload .uploadBox {
    background-color: white;
    border : solid 1px lightgrey;
    border-radius: 5px;
    font-size: 14px;
    line-height: 20px;
    min-height: 160px;
    text-align: center;
    overflow: auto;
    min-width: 380px;
    width: 500px;
    margin: -125px auto auto;
}

#pdfUpload .mainText {
    font-size: 16px;
    font-weight: bold;
    padding: 20px;
}

#pdfUpload .uploadLabel {
    text-align: left;
    font-size: 14px;
    padding: 20px;
    margin-top: 60px;
}

#pdfUpload .FileInfo {
    width: 400px;
    margin-top: 20px;
}

.easyPdfMessagesTable {margin-left: auto;margin-right: auto;margin-top:70px;background: white;border-radius: 5px;border: solid 1px lightgrey;}
.easyPdfMessagesTable caption { text-align: left; margin:0px; padding:10px 10px; font-size:16px; width: 100%; font-weight: 600; line-height:20px;}
.easyPdfMessagesTable thead th{text-transform:uppercase;text-align:left;padding:10px;font-weight:normal;background-color:white; border-color: var(--color-grid-border);}
.easyPdfMessagesTable tr {height:40px; border:0px; margin:0px;background-color: var(--color-even-row-color);}
.easyPdfMessagesTable tr:nth-child(even) {background-color: var(--color-odd-row-color);}
.easyPdfMessagesTable tr:hover {background-color: var(--color-hover-row-color);}

.easyPdfMessagesTable tr>td {text-align: left; height:25px; padding:0px 10px 0px 10px;}
.easyPdfMessagesTable tr>td.receiveMoment { width:200px; }
.easyPdfMessagesTable tr>td.inFileName { width:300px; }
.easyPdfMessagesTable tr>td.inFileName>div { width:300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.easyPdfMessagesTable tr>td.status { width:150px;}
.easyPdfMessagesTable tr>td.status.ERROR, .easyPdfMessagesTable tr>td.status.ERROR_CLOSED { cursor:pointer;}
.easyPdfMessagesTable tr>td.linkToTradeshiftDocument { width:300px;}

.echarts-tooltip-bbw {inline-size: 230px; }

/* httpClientFlow */
.httpClientFlowContainer{ position: relative; height: calc(100vh - 100px); width:100%; border:1px solid orange; overflow:auto; }
.httpClientFlowContainer .nodesContainer { position: relative; }
.httpClientFlowContainer .nodesContainer .node { position: absolute; width: 240px; height: 50px; display: flex; justify-content: center; align-items: center; box-shadow: 4px 4px 4px grey; padding: 5px; border: black 1px solid; border-radius: 5px; flex-direction: column }
.httpClientFlowContainer .nodesContainer .node .icons {    display: flex;justify-content: end; align-items: center; flex-direction: row; width: inherit; position: absolute; top: 28px}
.httpClientFlowContainer .nodesContainer .node .icons i {padding-right: 5px;padding-top: 5px;}
.httpClientFlowContainer .nodesContainer .node.call { cursor: pointer;}
.httpClientFlowContainer .nodesContainer .node.routing { width: 30px; height:30px; max-width: 30px; max-height:30px;}
.httpClientFlowContainer .nodesContainer .node.selected { border: 3px solid orange; }
.httpClientFlowContainer .nodesContainer .node span {display:inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* Compact mode. */
.httpClientFlowContainer .nodesContainer.compactRows .node { height:34px; padding: 1px; font-size:11px; line-height: 13px;}
.httpClientFlowContainer .nodesContainer.compactColumns .node { width: 200px;}

.httpClientFlowContainer .nodesContainer.compactRows .node.routing, .httpClientFlowContainer .nodesContainer.compactColumns .node.routing { width: 24px; height:24px; max-width: 24px; max-height:24px;}
.httpClientFlowContainer .linesSvg polyline { fill:none; stroke-width: 1px; stroke: #A8CBE2; }
.httpClientFlowContainer .linesSvg polyline.normal {  marker-end: url(#markerArrow); }
.httpClientFlowContainer .linesSvg polyline.highlighted {stroke: orange; z-index: 100; marker-end: url(#markerArrowHighlighted); }
/* Tools. */
.httpClientFlowContainer .tools { position: absolute;left: 10px;top: 10px;font-size: 20px;z-index: 10; display: flex; flex-direction: column; gap:6px; }
#httpFlowDetailZone .configureGlobalAuth i{font-size: 20px; margin-right: 10px;cursor: pointer;}
#httpFlowDetailZone .configureGlobalAuth a{font-size: 14px; color: var(--main-color);cursor: pointer;}

#GATEWAY_HTTP_API_flow .tooltip-container{max-width: 500px}
#GATEWAY_HTTP_API_flow .tooltip-container .fa-ul {margin-left: var(--fa-li-margin,1.5em);}
#GATEWAY_HTTP_API_flow .tooltip-container .fa-li {top: 4px;}
#GATEWAY_HTTP_API_flow .tooltip-container .fa-ul>li {padding-left: 2px}
#GATEWAY_HTTP_API_flow .tooltip-container{max-width: 500px;}

#GATEWAY_HTTP_API_flow #selectAsideOptions .intro {background-color: var(--color-gray-lightest); padding: 10px; border-bottom: 1px solid var(--color-gray-light);}

/* --------------------------------------------------------------------------------------------------------------------------------------- */
/* Notification V2 */

.recipientItem  { display: block; line-height: 20px; width:100%;}
.recipientItem > span:first-child {display: inline-block;max-width: calc(100% - 25px);white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}
.removeButton { display: none; position:absolute; }
.removeButton > .removeIcon { margin-top: -1px; }
.recipientItem:hover > .removeButton { display: inline; margin-top: 3px; margin-left: 0; }
#selectedUsers{ margin-bottom: 10px; }
#selectedRecipientLists { margin-bottom: 10px; }
#selectedEmails { margin-bottom: 10px; }
#selectedExternalMedias { margin-bottom: 10px; }
.notificationRecipientsList div {display:block; width:100%; overflow: hidden; text-overflow : ellipsis; white-space: nowrap;}

/* Notification details aside */
.notificationDetailAside {background-color: var(--color-gray-lightest); height: 100%}
.notificationDetailsLabel { text-align: left; padding:4px 7px 0px 7px; font-size:11px; line-height:25px; font-weight:800; text-transform: uppercase; }
.notificationDetailsValue { text-align: left; padding:0px 7px 7px 7px; font-size:11px; word-break: break-word;}
.notificationDetailsValue .icon.info i{ color: var(--main-color); }
.notificationDetailsValue .icon.warning i{ color: var(--color-orange); }
.notificationDetailsValue .icon.critical i{ color: var(--color-red); }

/* Notification Agent Short details aside */
.notificationAgentDetailAside {background-color: var(--color-gray-lightest); height: 100%}
.recipientListFormAside {background-color: var(--color-gray-lightest); padding: 10px; border-bottom: 1px solid var(--color-gray-light);height:100%}
.agentDetailsLabel { text-align: left; padding:4px 7px 0px 7px; font-size:11px; line-height:25px; font-weight:800; text-transform: uppercase; }
.agentDetailsValue { text-align: left; padding:0px 7px 7px 7px; font-size:11px; }

.createExternalMediaAsideContent {background-color: var(--color-gray-lightest); padding: 10px; height: 100% }

/* Notification agent current status. */
.currentAgentStatus { padding: 20px; vertical-align: center;}
.currentAgentStatus>.summary { display:flex; justify-content: flex-start; align-items: center; padding-bottom: 10px; }
.currentAgentStatus>.summary>i { font-size: 20px; margin-right: 10px; }
.currentAgentStatus>.summary>i.success {  color: var(--color-green); }
.currentAgentStatus>.summary>i.error { color: var(--color-red); }
.currentAgentStatus>.summary>i.info { color: var(--main-color); }
.currentAgentStatus>.summary>span { font-size: 14px; }

#matchingElements .content>.search { padding: 10px; }
#matchingElements .content>.values { padding: 10px; }
#matchingElements .content>.values .matchingElement { height: 38px; width:100%; margin: 2px 0px; padding: 6px; font-size: 12px; font-weight: 600; line-height: 20px;
    border-radius: 3px; overflow: hidden; text-overflow : ellipsis; white-space: nowrap; border : 1px solid transparent; }
.compactView #matchingElements .content>.values .matchingElement {height: 26px; padding-top:2px; padding-bottom:2px; }
#matchingElements .content>.noItems { color: lightgrey; text-align: center;  }

/* ChannelCondition and GatewayCondition picker preview */
.pickerLabel:has(span.conditionPreview) {
    display: flex;
    width: 590px;
}
.pickerLabel span.conditionPreview {
    margin-right: 0;
    margin-left: auto;
    font-weight: 400;
}

/* --------------------------------------------------------------------------------------------------------------------------------------- */

/* TS Search input by Babelway */
.searchInputContainer{
    align-items: center;
    background-color: white;
    border: 1px solid var(--color-gray-light);
    border-radius: 40px;
    display: flex;
    height: 40px;
}
.searchInputContainer:focus-within{
    border: 1px solid var(--main-color);
}
.searchInputContainer input{
    border: 0;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    font-size: 14px;
    line-height: 20px;
    box-sizing: border-box;
    padding: 0;
}
.searchInputContainer input:focus{
    border: 0;
    outline: none;
    box-shadow: none;
}
.searchInputContainer .icon-container {
    align-items: center;
    display: flex;
    height: 40px;
    margin: 0;
    width: 40px;
    box-sizing: border-box;
    color: var(--color-slate-lightest);
}
.searchInputContainer .icon-container i{
    margin: 0 auto;
    color: var(--color-slate-lightest);
}
.searchInputContainer .icon-container.close-icon{
    cursor: pointer;
}

#progressbar{
    width: 100%;
    overflow:auto;
    border:1px solid #cccccc;
    margin-bottom: 20px;
    color: var(--main-color);
}
#progressbar::-moz-progress-bar { background: var(--main-color); }
#progressbar::-webkit-progress-value { background: var(--main-color); }
#progressbar::-webkit-progress-bar { background: white;}

/*--------------------------------- AUTOCOMPLETE ---------------------------------*/
.autocomplete-items {
    position: relative;
}
.autocomplete-items {
    position: absolute;
    border: 1px solid var(--color-gray-light);
    border-bottom: 1px solid var(--color-gray-light);
    z-index: 99999;
    overflow-y: auto;
    height: auto;
    max-height: 300px;
}
.autocomplete-items div {
    padding: 5px 10px;
    cursor: pointer;
    background-color: white;
    border-bottom: 1px solid var(--color-gray-light);
}
.autocomplete-items div:last-child {
    border-bottom: none;
}
.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: var(--main-color);
    color: white;
}
.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: var(--main-color) !important;
    color: white;
}

/*--------------------------------------------------------------------------------*/
/* Change Log  */

.pickerBlock.updated .pickerDescription {color: #fcbb40; font-weight: bold;}
.inserted { background-color: #BEE6BE;}
.removed { background-color: #FFDCE0; text-decoration: line-through;}
.compareContent {text-align: left; white-space: pre-wrap; line-height: 16px; }
.parametersSection.inserted legend div, .parametersSection.removed legend div {background-color: transparent;}
.compareMode {cursor: pointer;}