/***********************************************************************************************************************
 * Header
 **********************************************************************************************************************/
#header #logo {
  /* BEGIN For Internet Explorer support, because IE does not support CSS3 Variables */
  background-size: 100%;
  /* END For Internet Explorer support*/
  background: left no-repeat;
  background-size: var(--company-logo-size);
  float: left;
  height: 58px;
  image-rendering: -webkit-optimize-contrast;
  margin-left: 30px;
  max-width: 260px;
}

#header #logo.kofax-logo {
  background-image: url(images/header/tungstenautomation-e-invoice-connect-logo-cropped.svg);
  width: 260px;
}

#logo.wl-company-logo {
  background-image: var(--company-logo);
}

/*
#header .logo_sv, #header .logo_nb, #header .logo_da {
  background: url('images/header/kofax-invoiceportal-logo.png') left no-repeat !important;
  background-size: 200px !important;
  width: 300px !important;
}
*/

/***********************************************************************************************************************
 * Common classes
 **********************************************************************************************************************/

.floatRight {
  float: right;
}

/***********************************************************************************************************************
 * Content
 **********************************************************************************************************************/
#content-container.help-visible > div {
  display: table-cell;
  vertical-align: top;
}

#content-container.help-visible #content-content {
  overflow: hidden;
}

#content-content {
  position: relative;
  min-width: 980px;
}

#help-content {
  width: 100%;
  border-left: 7px solid #EFEFEF;
}

#help-iframe {
  width: 100%;
  height: 100%;
  min-height: 600px;
}

#help-container {
  padding-bottom: 10px;
}
#help-button {
  position: absolute;
  right: 0px;
  padding-top: 5px;
  z-index: 9999999;
}
#help-link {
  color: #1C64B4;
  font-weight: bold;
  font-size: 20px;
  float: left;
  padding-top: 5px;
}
#help-icon {
  width: 31px;
  height: 31px;
  float: left;
  padding-right: 10px;
}
#help-icon.closed {
  background: url('images/header/help_open.png') center no-repeat !important;
}
#help-icon.open {
  background: url('images/header/help_close.png') center no-repeat !important;
}

/***********************************************************************************************************************
 * Menu
 **********************************************************************************************************************/
.menu-icon.new {background: url('images/top-menu/create.png');}
.menu-icon.draft {background: url('images/top-menu/draft.png');}
.menu-icon.sent {background: url('images/top-menu/sent.png');}
.menu-icon.recvd {background: url('images/top-menu/received.png');}
.menu-icon.rejected {background: url('images/top-menu/rejected.png');}
.menu-icon.queued {background: url('images/top-menu/queued.png');}

/***********************************************************************************************************************
 * Footer
 **********************************************************************************************************************/
#footer #serviceImg {
  padding-top: 8px;
}

#footer #footerRightPadding {
  margin-right: 15px; 
}

.notificationAlert {
  color: #FF0000 !important;
}

@keyframes textPulse {
  0% {
    transform: scale(1);
    color: #FFD700;
    text-shadow: 0 0 0 rgba(255, 215, 0, 0.7);
  }
  70% {
    transform: scale(1.2);
    color: #FFD700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
  }
  100% {
    transform: scale(1);
    color: #FFD700;
    text-shadow: 0 0 0 rgba(255, 215, 0, 0.7);
  }
}

.notification-count-pulse {
  animation: textPulse 1.5s infinite;
  display: inline-block;
  font-weight: bold;
}

/***********************************************************************************************************************
 * Summary
 **********************************************************************************************************************/
#summary {
  background-color: #F8F7F7;
  padding-left: 42px;
  position: relative;
  border-top: 1px solid #EFEFEF;
  border-bottom: 1px solid #EFEFEF;
  height: auto;
  min-height: 50px;
  margin-top: 40px;
}

#summary-title {
  width: 100px;
  position: absolute !important;
}

#summary-table {
  padding: 15px 30px 10px 0;
  margin-left: 100px;
  position: relative !important;
}

.totals-label {
  width: 99%;
  font-size: 11px;
  font-weight: bold;
  text-align: right;
  padding-right: 4px;
  height: 20px;
  vertical-align: middle;
}

.totals-label div {
  display: inline-block;
}

.totals-table .helpDiv {
  display: inline-block;
  float: none;
}

.totals-table.horizontal .totals-label {
  padding-right: 6px !important;
}

#summary .totals-input-row {
  height: 30px;
}

#summary .totals-input-row div {
  width: 100%;
}

#summary .totals-input-row div.inputWrapper {
  width: auto;
}

.totals-value {
  width: 1%;
  min-width: 50px;
  font-size: 12px;
  vertical-align: middle;
  text-align: right;
  padding: 0 6px;
  height: 16px;
}

.totals-label.left, .totals-value.left{
  text-align: left;
}

.totals-extra-value {
  font-size: 12px;
  font-weight: normal;
  margin-right: 20px;
}

.totals-value-wrapper {
  position: relative !important;
  margin-right:5px;
}

/***********************************************************************************************************************
 * Login
 **********************************************************************************************************************/
.loginGrid {
  /* BEGIN For Internet Explorer support, because IE does not support CSS3 Variables */
  background: transparent;
  color: #32323c;
  /* END For Internet Explorer support*/
  background: var(--login-bg-color);
  color: var(--login-base-text-color);
}

.loginGrid h1 {
  /* BEGIN For Internet Explorer support, because IE does not support CSS3 Variables */
  color: #32323c;
  /* END For Internet Explorer support*/
  color: var(--login-h1-text-color);
}

.loginGrid .leftBorder {
  border-left: 1px solid;
}

.loginGrid .topBorder {
  border-top: 1px solid;
}

.loginGrid .leftBorder,
.loginGrid .topBorder {
  /* BEGIN For Internet Explorer support, because IE does not support CSS3 Variables */
  border-color: #EFEFEF;
  /* END For Internet Explorer support*/
  border-color: var(--login-border-color);
}

.loginGrid .link {
  /* BEGIN For Internet Explorer support, because IE does not support CSS3 Variables */
  color: #505050;
  /* END For Internet Explorer support*/
  color: var(--login-link-color);
}

.loginGrid td{width:33%;}
.leftBorder{border-left:1px solid #EFEFEF;}
.leftBorder #heading{padding-left: 32px;}
.loginGrid #heading{padding-right:10px;border:none;}
#login #loginFields, .loginGrid .operator{width:250px;}
#login .operationButtons{width:250px;}
#login #links,#login #register,#login #recover{float:right;}
#login #recover #recover-link{padding-top:5px;}
.loginGrid .register{text-align:center;vertical-align:middle;}
.halfColumn{width:50%;float:left;}
#userName,#password,#recover,#twoFactorCode{margin-right:10px;}
.loginRow2{text-align:left !important;padding-left:32px;vertical-align:top !important;}
.register.loginRow2{padding-top:10px;}

.login-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
  width: 250px;
}

#accept .operationButtons{padding-left:0px !important;}
#login{padding-bottom:20px !important;}

/***********************************************************************************************************************
 * Two-factor auth component
 **********************************************************************************************************************/
.recovery-codes-row {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 15px;
}
.recovery-codes-row * {
  font-family: Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
.recovery-codes-area {
  background: rgba(239, 239, 239, 0.3);
  border: 1px solid #efefef;
  padding: 10px 20px;
}
.recovery-codes-area > *:not(:last-child) {
  padding-bottom: 5px;
}
.two-factor-setup-step {
  margin-bottom: 0.5em;
}

/***********************************************************************************************************************
 * Home (Dashboard)
 **********************************************************************************************************************/
#dashboard .leftCol{width:700px;}
#dashboard #market{width:500px;}
#dashboard #readyToGo{width:500px;}
#dashboard #notReadyToGo{width:500px;}
#dashboard .text{color:#777777;font-size:14px;width:200px;}
#dashboard .row{display:inline-block;width:100%;}
#dashboard .section{padding-bottom:20px !important;}
#dashboard .acceptInvitationsRow p{padding-bottom:0px !important;}
#dashboard .invoiceInfoRow {padding-left:15px;}
#dashboard .invoiceInfoRow .col{text-align:center;width:13%;}
#dashboard .invoiceInfoRow .col.queued{width:15%;}
#dashboard .invoiceInfoRow .col.negative_response{width:17%;}
#dashboard .invoiceInfoRow a{text-decoration: none;}
#dashboard .levelRow{display:inline-block;width:100%;}
#dashboard .levelRow .col{text-align:center;}
#dashboard .infoRow{display:inline-block;width:100%;padding-bottom:40px !important;}
#dashboard .infoRow .col{width:48%;text-align:center;}
#dashboard .rowImg{width:80px;height:80px;display:inline-block;}
#dashboard .smallRowImg{width:24px;height:24px;display:inline-block;}
#dashboard .svcLevelImg_Free{background: url('images/misc/priceplan_free_large.png') center no-repeat;}
#dashboard .validateImg{background: url('images/misc/completed-tick-inactive.png') center no-repeat;}
#dashboard .svcLevelImg_Basic{background: url('images/misc/priceplan_basic_large.png') center no-repeat;}
#dashboard .svcLevelImg_Plus{background: url('images/misc/priceplan_plus_large.png') center no-repeat;}
#dashboard .svcLevelImg_Premium{background: url('images/misc/priceplan_premium_large.png') center no-repeat;}
#dashboard .svcLevelImg_ReadSoft{background: url('images/misc/priceplan_readsoft_large.png') center no-repeat;}
#dashboard .svcLevelImg_Unlimited{background: url('images/misc/priceplan_unlimited_large.png') center no-repeat;}
#dashboard .newImg{background: url('images/misc/create.png') center no-repeat;}
#dashboard .draftImg{background: url('images/misc/draft.png') center no-repeat;}
#dashboard .sentImg{background: url('images/misc/sent.png') center no-repeat;}
#dashboard .receivedImg{background: url('images/misc/received.png') center no-repeat;}
#dashboard .queuedImg{background: url('images/misc/queued.png') center no-repeat;}
#dashboard .rejectedImg{background: url('images/misc/rejected.png') center no-repeat;}
#dashboard .usedImg{background: url('images/misc/percentage_icon.png') center no-repeat;}
#dashboard .settingsImg{background: url('images/misc/plus_services_icon.png') center no-repeat;}
#dashboard h2{padding:0px;}
#dashboard .iconCount{color:#777777;font-size:20px;/*line-height:18px;*/}
#dashboard .rowValue{color:#32323C !important;font-weight:bold;font-size:20px;line-height:26px;}
#dashboard .centered{width:100% !important;}
#dashboard .warningText{color:#777777;font-size:14px;}
#dashboard .warningSection{padding-top:15px;padding-bottom:20px;padding-left:50px; !important;}
#dashboard .warningSection>*{display:inline-block;float:inherit;vertical-align:middle;}
#dashboard .warningIcon{margin-left:90px;margin-right:10px;width:50px;height:42px;background: url('images/misc/warning_sign_red.png') center no-repeat;}
#dashboard .invoiceInfoRow div.col {margin-right:0px;padding-left:12px;padding-right:12px;}
#dashboard div.received {border-left: 2px solid #E7E7E7; }
#dashboard #sentFailedCount, #dashboard #pendingRejectCount {color: #FFAA00 !important;}

/***********************************************************************************************************************
 * Choose member
 **********************************************************************************************************************/
#chooseMember{padding-top:10px;}
.expandedIds {margin-top: -5px;float: right;}
.expandedIds thead{display: none;}
.identifierColumn{width: 100px;}
.identifierColumnPlus{width:105px;}
.expandedIds td.mediumPlus{width: 135px;}
.expandedIds td.firstCell{padding-left: 40px !important;}

/***********************************************************************************************************************
 * Invoice edit
 **********************************************************************************************************************/
.helpDivIcon{width:16px;height:16px;background:url('javax.faces.resource/images/forms/help-icon-med-grey.png.jsf') no-repeat scroll 0 0 transparent;display:inline-block;}
#invoice-lines .lineNoCol,#invoice-lines td.lineNoCol .ui-dt-c{width:40px;overflow:visible;}
#invoice-lines .descriptionCol,#invoice-lines td.descriptionCol .ui-dt-c{width:250px;}
#invoice-lines .articleNoCol{width:100px;}
#invoice-lines .quantityCol{width:60px;}
#invoice-lines .quantityCol.hasFeedback{width:84px;}
#invoice-lines .unitCol{width:60px;}
#invoice-lines .priceCol{width:60px;}
#invoice-lines .priceCol.hasFeedback{width:84px;}
#invoice-lines .discountPercentCol{width:60px;}
#invoice-lines .discountPercentCol.hasFeedback{width:84px;}
#invoice-lines .amountCol{width:60px;}
#invoice-lines .amountCol.hasFeedback{width:84px;}
#invoice-lines .vatPercentCol{width:100px;}
#invoice-lines .taxCategoryCol{width:140px;}

#invoice-lines .addDetailsDiv {font-style: italic;color:#505050;font-size:13px;padding:3px;width:1px;white-space:nowrap;}
#invoice-lines .addDetailsDiv span.plus{background: url('images/misc/plus-blue.png') center no-repeat !important;width: 16px;height: 16px;display: inline-block;}
#invoice-allowances-charges .addDetailsDiv{color:#505050;font-size:10px;padding-right:3px;width:1px;white-space:nowrap;}
#invoice-lines .addDetailsDiv span,#invoice-allowances-charges .addDetailsDiv span{cursor:pointer;white-space:nowrap;}
#invoice-allowances-charges .addDetailsDiv span>span{color: #32323C!important;}

#invoice-lines .addAllowanceChargeDiv a,#invoice-lines .addAllowanceChargeDiv>span{color:#32323C !important;font-size:10px !important;padding-right:3px;width:1px;white-space:nowrap;text-decoration:none;}
#invoice-lines .addAllowanceChargeDiv span>span{color: #32323C !important;}
#invoice-lines .allowanceChargeDiv .ui-datatable{width:900px;}
#invoice-lines .allowanceChargeDiv.leftPadded .ui-datatable{width:878px;}
#invoice-lines .allowanceChargeDiv .alcTaxExemptionTextCol .inputTextareaControl{height:74px;}
#invoice-lines .title{font-size:14px;white-space:nowrap;padding-bottom:3px;font-weight:bold;}
#invoice-lines .alcTypeCol{width:90px;}
#invoice-lines .alc-reason-code-col{width:80px;}
/* Narrowed from 280px to make room for alc-reason-code-col within the fixed 878px table width above */
#invoice-lines .alcReasonCol{width:200px;}
#invoice-lines .alcBaseAmountCol{width:100px;}
#invoice-lines .alcPercentCol{width:100px;}
#invoice-lines .alcAmountCol{width:120px;}
#invoice-lines .alc-unit-col{width:90px;}
#invoice-lines .lineText{width:300px;}
#invoice-lines .taxExemptionText{width:230px;}
#invoice-lines .row>*:not(:last-child){margin-right:10px;}
#invoice-lines .mediumPlusHelp{width:145px;}

#invoice-lines .detailsDiv{margin-left:48px;width:865px;margin-top:5px;}
#invoice-lines .inputTextareaDiv, #invoice-allowances-charges .inputTextareaDiv,#invoice-lines .inputTextareaControl, #invoice-allowances-charges .inputTextareaControl{height:74px;}
#invoice-lines .wide, #invoice-allowances-charges .wide{width:250px;}
#invoice-lines .medium{width:145px;}

#invoice-header .reorderCol,#invoice-header td.reorderCol .ui-dt-c{width:10px;overflow:visible;margin-top:3px;}
#invoice-header .alcDetailsDiv,#invoice-allowances-charges .alcDetailsDiv{margin-left:48px;width:865px;margin-top:5px;}
/* The head-level allowance/charge table is auto-sized: the #invoice-allowances-charges rules below never match,
   because that section is nested in composite naming containers and its DOM id is
   invoice-header:invoiceHeaderFields:invoice-allowances-charges. Constrain the reason code column through
   #invoice-header, which does match, so that the free-text reason column keeps its width. */
#invoice-header .alc-reason-code-col{width:80px;}
#invoice-allowances-charges .alcTypeCol{width:90px;}
#invoice-allowances-charges .alc-reason-code-col{width:80px;}
#invoice-allowances-charges .alcReasonCol{width:300px;}
#invoice-allowances-charges .alcBaseAmountCol{width:60px;}
#invoice-allowances-charges .alcPercentCol{width:100px;}
#invoice-allowances-charges .alcAmountCol{width:60px;}
#invoice-allowances-charges .alcVatPercentCol{width:60px;}
#invoice-allowances-charges .alcTaxCategoryCol{width:140px;}
#invoice-allowances-charges .alc-unit-col{width:90px;}


.reorderButtons{height:31px;}

#attachments .ui-datatable-empty-message td {border:0 !important;}

#additionalReferences .referenceCol,#additionalReferences td.referenceCol .ui-dt-c{width:200px;overflow:visible;}
#additionalReferences .issueDateCol {width:100px;}
#additionalReferences .referenceTypeCol {width:160px;}
#additionalReferences .referenceTypeTextCol {width:150px;}
#additionalReferences .documentTypeCol {width:145px;}
#additionalReferences .documentTypeCodeCol {width:130px;}
#additionalReferences .urlCol {width:140px;}

#totals .roundOffBtn{line-height:14px;}

#invoice-header #greetingText {border-bottom:1px solid #EFEFEF;border-top:1px solid #EFEFEF;padding-left:42px;padding-top:15px;padding-bottom:15px;font-size:11px;}
#invoice-header #greetingText .title {font-weight:bold;}
.breakWords {word-break: break-word;}

#invoice-goods-section .packagingInput, td.packagingInput {width:90px;}

#cashDiscountInformation .cashDiscountInput, td.cashDiscountInput{width:90px;}
#cashDiscountInformation .cashVatPercentCol{width:100px;}
#cashDiscountInformation .cashTaxCategoryCol{width:140px;}
#invoice-header .cashDiscountDetailsDiv, #cashDiscountInformation .cashDiscountDetailsDiv{margin-left:48px;width:1000px;margin-top:5px;}
#invoice-header .cashDiscountDetailsInnerDiv{width:865px;margin-top:5px;}

#invoice-header .transportIdCol, #invoice-header td.transportIdCol .ui-dt-c{width:250px;overflow:visible;}
#invoice-header .transportDetailsDiv,#invoice-transports-section .transportDetailsDiv{margin-left:48px;width:865px;margin-top:5px;}

/***********************************************************************************************************************
 * Invoice list
 **********************************************************************************************************************/
#invoice-filtering-options .colRecipient, #logFiltering .colRecipient{width:175px;}
#invoice-filtering-options .colDate, #logFiltering .colDate{width:105px;}

#invoice-invoices .colRightAlign .ui-dt-c, .invoice-invoices .colRightAlign .ui-dt-c{float:right}
#invoice-invoices td.colRightAlign, .invoice-invoices td.colRightAlign{text-align:right; padding-right:12px;}
#invoice-invoices th.colRightAlign .ui-dt-title, .invoice-invoices th.colRightAlign .ui-dt-title{width:90%; text-align:right;}
.invoice-invoices th.pages .ui-dt-title{width:100% !important;}

div.senderStatus{height:16px;width:18px;}
div.senderStatus.Failed{background: url('javax.faces.resource/images/theme/ui-icons_cd0a0a_256x240.png.jsf') no-repeat 1px -144px;}

.toolsButtonOutside{float:none;display:inline-block;vertical-align:middle;}
.toolsButtonOutside .toolsButton>div{display:none;}
.toolsButtonWrap{width:24px;height:24px;float:left;}
div.sentBy{color: #32323C;font-size: 16px;height:16px;width:18px;float:left;margin-right: 3px;line-height:16px;}
div.sentBy.printed{background: url('images/misc/letter_blue.png') center no-repeat !important; font-size:0px;}
div.sentBy.PDF{background: url('images/misc/email_blue.png') left no-repeat !important; padding-left:19px;}
tr.FailedCorrected, tr.FailedCorrected+tr.ui-expanded-row-content { text-decoration: line-through; }
tr.Trashed, tr.Trashed+tr.ui-expanded-row-content {-webkit-filter: opacity(50%) grayscale(100%); filter: opacity(50%) grayscale(100%);}
#invoice-filtering-options\:filterSendType\:input_panel li[enc-value="email"],#filtering-options\:filterSendType\:input_panel li[enc-value="email"] {background: url('images/misc/email_blue.png') left no-repeat !important; margin-left:4px; text-indent: 20px;}
#invoice-filtering-options\:filterSendType\:input_panel li[enc-value="print"],#filtering-options\:filterSendType\:input_panel li[enc-value="mail"] {background: url('images/misc/letter_blue.png') left no-repeat !important; margin-left:4px; text-indent: 20px;}
#invoice-invoices th.toolsCol{white-space: normal;}
#sentList #summary {margin-top: 0px;}
#forFactoring {margin-top: -20px;}
th.forFactoring {overflow: visible !important;}
#main\:totalToBeSent {max-width: 650px; text-align: left;}
.recipientSearchTable .expandedIds {float: left; padding-left: 150px;}
.toolsButton.response{background-size: 18px 18px;background-repeat: no-repeat;background-position: center;}
.response.Send.Error{background-image: url('images/misc/Send_red.png');}
.response.Send.OK{background-image: url('images/misc/Send_blue.png');}
.response.Send.Expected{background-image: url('images/misc/Send_gray.png');}
.response.Content.Error{background-image: url('images/misc/Content_red.png');}
.response.Content.OK{background-image: url('images/misc/Content_blue.png');}
.response.Content.Expected{background-image: url('images/misc/Content_gray.png');}
.response.Delivery.Error{background-image: url('images/misc/Receive_red.png');}
.response.Delivery.OK{background-image: url('images/misc/Receive_blue.png');}
.response.Delivery.Expected{background-image: url('images/misc/Receive_gray.png');}
.response.InvoiceStatus.Error{background-image: url('images/misc/Workflow_red.png');}
.response.InvoiceStatus.OK{background-image: url('images/misc/Workflow_blue.png');}
.response.InboundValidation.Error{background-image: url('images/misc/Content_red.png');}
.response.InboundValidation.OK{background-image: url('images/misc/Content_blue.png');}
.response.Clearance.Error:before{
  content: "\eac2";
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}
.response.Clearance.Error:after{
  content: "\ebac";
  margin-left: -1em;
  color: #c4202f;
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}
.response.Clearance.OK:before{
  content: "\e9dd";
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}
.response.Clearance.OK:after{
  content: "\ea75";
  margin-left: -1em;
  color: #00c425;
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}
.response.Clearance.Expected:before{
  content: "\e9fe";
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}
.response.Clearance.Expected:after{
  content: "\ea92";
  margin-left: -1em;
  color: #159be5;
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}
.response.Reporting.Error:before{
  content: "\eac2";
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}
.response.Reporting.Error:after{
  content: "\ebac";
  margin-left: -1em;
  color: #c4202f;
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}
.response.Reporting.OK:before{
  content: "\e9dd";
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}
.response.Reporting.OK:after{
  content: "\ea75";
  margin-left: -1em;
  color: #00c425;
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}
.response.Reporting.Expected:before{
  content: "\e9fe";
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}
.response.Reporting.Expected:after{
  content: "\ea92";
  margin-left: -1em;
  color: #159be5;
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}

.responseReport {max-width: 850px;max-height: 400px;overflow: auto;}
.responseReport td {vertical-align: top;white-space: normal;}
.responseReport table {width: 800px;}
.responseReport .red-background {background-color: #FFEFEF;}
.responseReport .green-background {background-color: #EFFFEF;}
.responseReport .responseGroup {margin-top: 4px;}
.responseReport .responseGroupNested {padding-left: 1em;}
.responseReport .responseGroupItem {padding-left: 1em;}

.toolsButton.status{background-size: 18px 18px;background-repeat: no-repeat;background-position: center;}
.status.Verified{background-image: url('images/misc/Content_blue.png');}
.status.Approved{background-image: url('images/misc/completed-tick-active.png');}
.status.Declined{background-image: url('images/misc/declined.png');}
.status.Retrieved:before{
  content: "\e8b0";
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}
.status.Retrieved:after{
  content: "\e8b1";
  margin-left: -1em;
  color: #6ec3f2;
  font-size: 24px;
  font-family: 'kofax-Action-Icons-colored';
}

.statusReport {max-width: 450px;max-height: 400px;overflow: auto;}
.statusReport td {vertical-align: top;white-space: normal;}
.statusReport table {width: 400px;}
.statusReport .red-background {background-color: #FFEFEF;}
.statusReport .green-background {background-color: #EFFFEF;}

.rejectType {width:12px;height:12px;background-size: 12px 12px;background-repeat: no-repeat;background-position: center;}
.rejectType.toBeManagedByRecipient {background-image: url('images/misc/exclamation_yellow.png');}
.rejectType.rejectedToSender {background-image: url('images/misc/arrow_left_black.png');}
.rejectType.failedRetrievedPending {background-image: url('images/misc/exclamation_red.png');}

#invoice-filtering-options\:filterSendType\:input_panel li[enc-value="email"],#filtering-options\:filterSendType\:input_panel li[enc-value="email"] {background: url('images/misc/email_blue.png') left no-repeat !important; margin-left:4px; text-indent: 20px;}
#invoice-filtering-options\:filterSendType\:input_panel li[enc-value="print"],#filtering-options\:filterSendType\:input_panel li[enc-value="mail"] {background: url('images/misc/letter_blue.png') left no-repeat !important; margin-left:4px; text-indent: 20px;}

#invoice-filtering-options\:rejectStatus\:input_panel li[enc-value="ActionRequired"] {background-size:12px 12px;background-image:url('images/misc/exclamation_yellow.png');background-position:left;background-repeat:no-repeat; margin-left:4px; text-indent: 20px;}
#invoice-filtering-options\:rejectStatus\:input_panel li[enc-value="Rejected"] {background-size:12px 12px;background-image:url('images/misc/arrow_left_black.png');background-position:left;background-repeat:no-repeat; margin-left:4px; text-indent: 20px;}

.rejectedListExpansion {padding-left: 60px;}
.autoRejected{font-style: italic}

.decline-input {
  width: 480px;
  height: 300px;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 7px;
  margin: 3px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

/***********************************************************************************************************************
 * Supplier invite summary
 **********************************************************************************************************************/
#inviteSummaryForm a.button span.label{width:123px;}
#inviteSummaryForm a.button{margin-bottom: 2px;}
#inviteSummaryForm .operationButtonsIntegration span.label{width:436px !important;}
#checkSuppliers div a.button span.label, #checkCustomers div a.button span.label{min-width:123px;width:auto}
#inviteSummaryForm #heading{padding-bottom:20px;}
#inviteSummaryForm .section{border:none;padding-bottom:10px !important;}
#inviteSummaryForm .section h2{padding-bottom:5px;padding-left:0px;}
#inviteSummaryForm .leftCol{width:470px;padding-left:5px;border-right:1px solid #EFEFEF;padding-right:5px;margin-right:5px;}
#inviteSummaryForm .operationButtons{padding-left:0px;}
#inviteSummaryForm .operationButtons>*{padding-right:1px;}
#inviteSummaryForm .row{padding-bottom:42px;}
#inviteSummaryForm .savings{font-size:11px;}

#inviteSummaryForm #almostThere, #inviteSummaryForm #done {float:left;}
.hasSentInvoiceButton {padding-left: 19px;}
.almostThereAndDone {padding-top: 0px;}
#inviteSummaryForm #almostThere {width:324px;} 
#inviteSummaryForm #done {width:150px;}


/***********************************************************************************************************************
 * Supplier invite upload and mapping
 **********************************************************************************************************************/
.supplierInviteGuideTitle h2, .customerInviteGuideTitle h2{color:#777;padding:0px 0px 9px 0px;}
.supplierInviteGuideContent, .customerInviteGuideContent {color:#777;padding-left:30px;}
#mapping-table {color:#777;padding:20px 0px 10px 0px;}
#mapping-table th.headerExcelCol {width:220px;}
#mapping-table th.headerArrowCol {width:80px;}
#mapping-table td {vertical-align:middle;}
#mapping-table td.arrowRight {background: url('images/arrow_right.png') center no-repeat !important;}
#mapping-table .bodyHeaders th {padding-bottom:9px;}
#suppplierInviteUploadFile {padding-top:15px;padding-bottom:15px;}
#supplierUpload .leftSide, #customerUpload .leftSide {float:left;width:620px;}
#supplierUpload .rightSide, #customerUpload .rightSide {float:right;border: 1px solid #777;width:250px;padding:5px;}
div.supplierFileUploadBtn, div.customerFileUploadBtn {padding-top:10px;}
#supplierUpload, #customerUpload {padding-left:10px;}
.supplierInviteHeadingText, .customerInviteHeadingText {color:#777;}
#supplierUpload .ui-messages, #customerUpload .ui-messages {padding-left: 0px !important;}

/***********************************************************************************************************************
 * Add suppliers 
 **********************************************************************************************************************/
.editSupplier .r1 .col{width:120px;margin-right:34px;}
.editSupplier .r2 .col1{width:240px;}
.editSupplier .r2 .col2{width:240px;}
.editSupplier .r2 .col3{width:125px;}
.editSupplier .r2 .col5{width:150px;}
.editSupplier .r2 .email{width:182px;}
.editSupplier .r3 .col1{width:240px;}
.editSupplier .r3 .col2{width:80px;}
.editSupplier .r3 .col3{width:145px;}
.editSupplier .r0 .text{width:510px;}
.editSupplier .r0{padding-bottom:50px;}
.editSupplier .comment{width:360px;}
.editSupplier .rightFloated{float: right !important;margin:0px;}
.editSupplier .leftFloated{float: left !important;margin-right:15px !important; width:140px !important;}
#editRecord .expandedIds {float: left;padding-left: 169px;}

/***********************************************************************************************************************
 * Edit invitation text 
 **********************************************************************************************************************/
#invitationPage div.invitationTypeImg{background: url('images/misc/invitationType.png') center no-repeat;}
#invitationPage div.rowImg{width: 90px;height: 100px;margin:0 auto;}
#invitationPage .ui-radiobutton-box.ui-state-active{margin-top:2px;}
#invitationPage .invitationType div.col{width:22%; padding-left:15px;float: left;text-align: center;}
#invitationPage .invitationType div.col label{font-size:12px;font-weight:bold;color:#505050;cursor:pointer}
#invitationPage .invitationType .ui-radiobutton-box{background: url('images/misc/invitationType.png') center no-repeat;width: 90px !important;height: 100px !important;}
#invitationPage .invitationType .ui-radiobutton-box.ui-state-active{background: url('images/misc/invitationType_active.png') center no-repeat;}
#invitationPage .invitationType .ui-radiobutton-box .ui-radiobutton-icon{display:none;}
#invitationPage div.invitation{margin:15px 30px;border:1px solid #EFEFEF;padding:15px;}
#invitationPage .invitationText{height:120px;}
#invitationPage .languageOption{float:left; padding-right: 30px;width: 200px;}
#invitationPage .languageOption label{line-height:24px;padding-left:15px;}
#cke_invitationPage\:invitationText{width:100% !important;}
#invitationPage .inputComment{color:#666;font-size:12px;}
#invitationPage .inputComment strong{font-weight:bold;}
#invitationPage .inputComment em{font-style:italic;}
#invitationPage .ui-radiobutton{display:block !important;float:none;}
/* Same as e-mail template */
#invitationPage #invitationHeader h1{font-size: 33px; color: #000000;}
#invitationPage #invitationHeader h2{font-size: 16px; color: #000000;}
#invitationPage #invitationHeader div{border: solid #000000 1px; padding: 2px 5px;}

/***********************************************************************************************************************
 * Check suppliers page
 **********************************************************************************************************************/
#search .searchInputDescr{float:left;padding-right:20px;text-align:middle;}
#search .searchInputStyle{float:left;;width:200px;padding-right:20px;}
#search label{float:left;font-size:12px;line-height:30px;}
#partyRecordLogTooltip {display:none;position:absolute;background-color:white;z-index:1000;}
#partyRecordLogTooltip .text {border-radius:0px;border:2px solid #E7E7E7;padding:3px 5px;font-size:11px;}
.width55{min-width:55px}
.width70{min-width:70px}
.width80{min-width:80px}
.width95{min-width:95px}
.width105{min-width:105px;}
.checkSuppliersMain .noInvitation span.ui-dt-title, .checkCustomersMain .noInvitation span.ui-dt-title{width:25px;white-space:normal;}
.checkSuppliersMain .sendBy span.ui-dt-title, .checkCustomersMain .sendBy span.ui-dt-title{width:25px;white-space:normal;}
.checkSuppliersMain .invoicesPerYear span.ui-dt-title, .checkCustomersMain .invoicesPerYear span.ui-dt-title{width:40px;white-space:normal;}

/***********************************************************************************************************************
 * Supplier lists
 **********************************************************************************************************************/
.typeOfSending{height:16px;width:18px;float:left;margin-right: 3px;}
.typeOfSending.none{background: url('javax.faces.resource/images/theme/ui-icons_cd0a0a_256x240.png.jsf') no-repeat 1px -144px !important;}
.typeOfSending.mail{background: url('images/misc/letter_blue.png') center no-repeat !important;}
.typeOfSending.email{background: url('images/misc/email_blue.png') center no-repeat !important;}
.eInvoicingStatus{height:16px;width:18px;background: url('images/misc/list_check_blue.png') center no-repeat !important;}
.defaultDeadline{width:140px;display:inline-block;position:relative;top:-7px;}
div.fixedHeight{height: 46px;}

/***********************************************************************************************************************
 * Party record log page
 **********************************************************************************************************************/
td.logDate{width:70px;}
td.logDateTime{width:130px;}
.showLog{width:140px;display:inline-block;}
#logType .ui-radiobutton{padding-left:42px;}
.logInformationColumn{word-wrap:break-word;max-width:700px;}

/***********************************************************************************************************************
 * Member VAT numbers
 **********************************************************************************************************************/
#vatData{width:265px;}

/***********************************************************************************************************************
 * Member Integration Type Radio Button
 **********************************************************************************************************************/
/* Fix vertical alignment for integration type radio buttons */
table.integration-type-radio.ui-selectoneradio,
table#integration-type.ui-selectoneradio {
  border-spacing: 0;
  border-collapse: collapse;
}
table.integration-type-radio.ui-selectoneradio td,
table#integration-type.ui-selectoneradio td {
  vertical-align: middle !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-right: 0px;
}
table.integration-type-radio.ui-selectoneradio label,
table.integration-type-radio.ui-selectoneradio .ui-radiobutton-label,
table#integration-type.ui-selectoneradio label,
table#integration-type.ui-selectoneradio .ui-radiobutton-label {
  vertical-align: middle !important;
  line-height: 28px !important;
  padding-left: 0px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  display: inline-block;
}
table.integration-type-radio.ui-selectoneradio .ui-radiobutton,
table#integration-type.ui-selectoneradio .ui-radiobutton {
  vertical-align: middle !important;
  margin-right: 0px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: inline-block;
}
table.integration-type-radio.ui-selectoneradio .ui-radiobutton-box,
table#integration-type.ui-selectoneradio .ui-radiobutton-box {
  vertical-align: middle !important;
}
table.integration-type-radio.ui-selectoneradio .ui-radiobutton-label,
table#integration-type.ui-selectoneradio .ui-radiobutton-label {
  vertical-align: middle !important;
  line-height: 28px !important;
}

/***********************************************************************************************************************
 * Member Settings
 **********************************************************************************************************************/
#logotype .logotype{display:inline-block;padding-right:26px;position:relative;}
#logotype .toolsButton{position:absolute;right:0;top:0;}
.noLabel label{display:none;}
.labelBeforeInput{float:left;font-size:12px;line-height:30px;}
#invoiceCreationSettings\:allowGettingNextInvoiceNumber{padding-top:18px;}
.keys-set .row{
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
}
.keys-set .row .tool-btn{
  align-items: flex-end;
  display: flex;
  padding-bottom: 3px;
}
.blue-highlighted-text{
  color: blue;
  font-weight: bold;
  opacity: 1;
  transition: opacity 2s ease-in-out;
}
.red-highlighted-text{
  color:red;
  font-weight: bold;
  opacity: 1;
  transition: opacity 2s ease-in-out;
}

/***********************************************************************************************************************
 * Member address
 **********************************************************************************************************************/
#editAddress .leftMargin .ui-chkbox{margin-left:20px;}
 
/***********************************************************************************************************************
 * Search and pick suppliers
 **********************************************************************************************************************/
.deadline{width:140px;display:inline-block;}

/***********************************************************************************************************************
 * Message Log list
 **********************************************************************************************************************/
.messageLogErrors{
  background-color: #ffffff;
  width: 600px;
  min-height: 100px;
  max-height: 350px;
  overflow:scroll;
  padding: 15px;
}
.searchIds{width: 100px;}
#logFiltering\:onlyErrors, #logFiltering\:similar-invoice-numbers {padding-top: 18px;}

/***********************************************************************************************************************
* System log list
***********************************************************************************************************************/
.wideSid{width: 190px;}
.wideInternalFilename{width: 800px;}


/***********************************************************************************************************************
 * Accept invitation
 **********************************************************************************************************************/
.invitationCode{width:140px;display:inline-block;position:relative;}
.operator{width:300px;display:inline-block;position:relative;}
#acceptInvitationOrRegister{font-size: 14px;padding-top:3px;padding-left:3px;}
#acceptInvitationOrRegister .register{padding-left:5px;}
#acceptInvitationConfirmation .paddedBottom{padding-bottom:10px;}

/***********************************************************************************************************************
 * Application versions
 **********************************************************************************************************************/
#version-filtering-options .r1 .colVersionId {width:60px;}
#version-filtering-options .r1 .colVersionName {width:150px;}
#applicationVersion .ruleLabel{position:relative;width:150px;height:30px;font-weight:bold;color:#777;text-align:right;margin-top:16px;font-size:13px;}
#applicationVersion .marginTop{margin-top: 19px}
.largeTextarea{height:120px;}
#versions td.checkboxCol {padding-left:72px !important;width:50px;}
#versions td.checkboxCol div.inputCheckbox {margin-left:-30px;}
#applicationVersion tr.identifierFamily td {font-weight: bold;}
.customRules {
  width:100%;
  height: 100%;
  overflow-wrap: inherit;
  overflow: auto auto;
  resize: none;
  white-space: pre;
}

.panelGridBorder.ui-panelgrid>*>tr,
.panelGridBorder.ui-panelgrid .ui-panelgrid-cell {
  padding:0 0; border: none;
}

.panelGridBorder2 {
  width: 100%;
  height: 100%;
  padding:0 0;
  border: none;
}

.panelGridBorder2 .ui-panel .ui-panel-content {
  height: 100%;
  padding: 0 0.2em;
  vertical-align: baseline;
}

/***********************************************************************************************************************
 * DIBS acceptUrl
 **********************************************************************************************************************/
#dibsAcceptUrlSection #receiptInfo.div {padding-left:50px;border-bottom:1px solid #EFEFEF;padding-bottom:15px;}
#dibsAcceptUrlSection #receiptInfo .title, #dibsAcceptUrlSection #receiptInfo .rowTitle {font-weight:bold;color:#666}
#dibsAcceptUrlSection #receiptInfo table {font-size:12px; padding-left:10px; padding-top:10px; padding-bottom:20px; color: #666}
#dibsAcceptUrlSection #receiptInfo table td {width:200px;padding-top:10px;}
#dibsAcceptUrlSection #receiptInfo #receiptAddressTable td {width:auto;}
#dibsAcceptUrlSection #totalAmount table {font-size:12px;color:#666}
#dibsAcceptUrlSection #totalAmount table td {width:200px;font-weight:bold;}

/***********************************************************************************************************************
 * Ready invited by postal
 **********************************************************************************************************************/
.paymentFormStyle {display:inline-block;}

/***********************************************************************************************************************
 * Already invited
 **********************************************************************************************************************/
#main\:sendingTotalsMail, #main\:sendingTotalsEmail, #main\:sendingTotals {width:490px;}

/***********************************************************************************************************************
 * Register page
 **********************************************************************************************************************/
.serviceLevelSection .serviceLevel ul{list-style-image:url('images/misc/list_check_blue.png');padding-left:25px}
.serviceLevelSection .serviceLevel ul li{padding:15px 0px}
.serviceLevelSection .serviceLevel td{padding:5px 15px 5px 0;width:20%;}
.serviceLevelSection .serviceLevel h2, .serviceLevelSection .subHeading{padding:5px 15px 5px 0;color:#32323C;}
#organizationSection .vatNoRow .inputCheckbox{padding-top:18px;}
#confirmRegistration h2 {padding-bottom:12px;}
#confirmRegistration .section {padding-top:30px;}

/***********************************************************************************************************************
 * Accept send invitation
 **********************************************************************************************************************/
.clarifyAcceptInvitation {padding-top:10px;font-weight:bold;font-size:11px;}
#main\:accept\:operator{margin-top:5px;}
#acceptChooseMember{width:600px;}
#acceptUserSection{margin-bottom:15px;}
.acceptIdentifierExpansion{float:left;margin-top: -5px;padding-left: 117px;}

/***********************************************************************************************************************
 * Varningsinfo page
 **********************************************************************************************************************/
#varningsinfoForm #data{width:400px;}

/***********************************************************************************************************************
 * Recipient settings page
 **********************************************************************************************************************/
#validation .validationLists td{padding-right:5px;padding-bottom:5px;}
#editReferences .expandedIds {float: left; padding-left: 174px;}

/***********************************************************************************************************************
 * Notifications page
 **********************************************************************************************************************/
#notifications .readStatus span.ui-dt-title {width:25px;white-space:normal;}
#notifications td.notificationUnread {font-weight: bold; }
#notifications td a {white-space: normal;display:block;}
div.notificationReadStatus {height:16px;width:18px;}
div.notificationReadStatus.notificationUnread{background: url('javax.faces.resource/images/16by16/sprites-black.png.jsf') no-repeat 0 -272px !important;}
/* div.notificationReadStatus.notificationRead{background: url('images/16by16/sprites-black.png') no-repeat 0 -256px !important;} */

/***********************************************************************************************************************
 * Edit party invitation templates page
 **********************************************************************************************************************/
#editPartyInvitationTemplatesEditor span.cke_skin_kama {width:880px !important;}
#editPartyInvitationTemplatesEditor .warning {color:red;}

/***********************************************************************************************************************
 * Edit member page
 **********************************************************************************************************************/
#editMember #member>div>div {padding-top:4px;}
#editMember #member>div>div.topPadded {padding-top:15px;}
#editMember .serviceLevelSection>div {padding-left:0px !important;}
#editMember #members div.expandedIds {
  padding-right: 140px;
}
/***********************************************************************************************************************
 * Member statistics page
 **********************************************************************************************************************/
#memberStatistics #filter\:varyingFilters .medium {width:160px;}
.textareaMaxHeight{height:120px;}
#members div.expandedIds {
  padding-right: 280px;
}

/***********************************************************************************************************************
 * Edit member page
 **********************************************************************************************************************/
 #editUser div.expandedIds {
  margin-right: 390px;
}

/***********************************************************************************************************************
 * Send (transfer) settings page
 **********************************************************************************************************************/
#paymentData .bankNameCol,#paymentData td.bankNameCol .ui-dt-c{width:166px;overflow:visible;}
#paymentData .bankTransferTypeDiv{width:400px;margin-top:5px;}
#paymentData .bankTransferTypeDiv div.inputCheckbox {margin-left:5px;}

/***********************************************************************************************************************
 * Invoice information transfer settings page
 **********************************************************************************************************************/
.transferInfoSettingsTable tr td, .transferInfoSettingsTable tr th{
  padding: 5px;
  padding-right: 15px;
  vertical-align: middle;
}

/***********************************************************************************************************************
 * Message count admin page
/**********************************************************************************************************************/

#messageCount {font-size: 20px; font-weight: bold;}
#messageCount table {margin-left: auto; margin-right: auto;}
#messageCount td {border: 1px solid #666; text-align: center; padding: 10px;}
#messageCount td.large {font-size: 60px; font-weight: bold;}

/***********************************************************************************************************************
 * Partners pages
/**********************************************************************************************************************/

.text-area-wide {
  height: 300px;
  max-height: 100%;
  max-width: 70%;
  min-width: 50%;
}

.left-padded > div {
  padding-left: 42px;
}

/***********************************************************************************************************************
 * Invoice throughput admin page
/**********************************************************************************************************************/

.invoiceThroughputTable {margin-left: auto; margin-right: auto;}
.invoiceThroughputTable td {border: 1px solid #666; padding: 10px; text-align: center;}
.invoiceThroughputTable th {border: 1px solid #666; padding: 10px;}

.notifyjs-termnotification-base {
  width: auto;
  background-color: #EFEFEF;
  padding: 5px;
  border-radius: 3px;
  border: solid 1px;
  border-color:#CACACD;
}

.notifyjs-termnotification-base .title {
  font-size:20px;
  font-family:TPHero;
  margin: 10px 0 10px 0;
  text-align: center;
  color: #32323C;
}

.notifyjs-termnotification-base .agreement .termsLink {
  font-size:16px;
  font-family:TPHero;
  margin: 10px;
  text-align: center;
  color: #32323C;
}

.notifyjs-termnotification-base .buttons {
  text-align: center;
  margin: 10px 0 5px 0;
}

.notifyjs-termnotification-base .termsBtn {
  font-size: 14px;
  font-family:TPHero;
  top: 50%;
  padding: 5px;
  width: 100px;
}

/* Support page */
ol.support-page {
  list-style: disc outside none;
  padding-left: 40px;
}

.support-link {;
  color: #505050;
  font-size: 100%;
  font-weight: bold;
}

.support-link:hover, .supportLink:focus {
  color: #1C64B4;
}

/* Party identifier for invoice view page */
.id-country {
  width: 40px;
}

/***********************************************************************************************************************
 * Change membership level page
/**********************************************************************************************************************/

.service-level-section-readonly .serviceLevel h2,
.service-level-section-readonly .subHeading,
.service-level-section-readonly {
  color: #adadad;
}

/* Reject to sender notification template page */
#reject-to-sender-settings-form .section h2{padding-bottom:5px;padding-left:0px;}

/* User settings page */
#main-users th.setting-col .ui-dt-title,#main-users .ui-datatable thead th {width: 80px; white-space: normal;}

.tungstenTokenUploadDescription{font-style: italic;font-size:10px;}

/***********************************************************************************************************************
 * Statistic and report business group page
/**********************************************************************************************************************/
#partner-stats-form h2{padding:0px;}
#partner-stats-form .row{display:inline-block;}
#partner-stats-form .col{text-align:center;}
#partner-stats-form .text{color:#777777;font-size:14px;width:200px;}
#partner-stats-form .rowValue{color:#32323C !important;font-weight:bold;font-size:20px;line-height:26px;}
#partner-stats-form .rowValueYellow{color:#eeb111 !important;font-weight:bold;font-size:20px;line-height:26px;}
#partner-stats-form .rowValueRed{color:#c4202f !important;font-weight:bold;font-size:20px;line-height:26px;}
#partner-stats-form .rowImg{width:80px;height:80px;display:inline-block;}
#partner-stats-form .usedImg{background: url('images/misc/percentage_icon.png') center no-repeat;}
#partner-stats-form .contractImg_NoLimit{background: url('images/misc/priceplan_premium_large.png') center no-repeat;}

/***********************************************************************************************************************
 * Configure members for business group page
/**********************************************************************************************************************/
#configure-partner-member .row{display:inline-block;}
#configure-partner-member .col{text-align:left;}

/***********************************************************************************************************************
 * Fapiao list page
/**********************************************************************************************************************/

#fapiao-list-form .errorMessage {
  color: #c4202f;
}

.qr-edit-dialog {
  max-width: 380px;
  padding: 12px;
}

.qr-edit-content {
  padding: 12px 16px 18px 16px !important;
}

.qr-heading h1 {
  font-size: 22px;
  line-height: 26px;
  margin: 0 0 4px 0;
}

.qr-intro {
  font-size: 13px;
  padding: 12px 0 12px 0;
  border-bottom: 1px solid #efefef;
}

.qr-section {
  padding-bottom: 12px !important;
}

.qr-section > h2,
.qr-section .sectionTitle,
.qr-section .ui-panel-title {
  font-size: 18px !important;
  line-height: 22px;
  margin: 8px 0 8px 0;
  padding-left: 0 !important;
  padding: 0;
}

.qr-form .wide,
.qr-form .medium {
  width: 100% !important;
  box-sizing: border-box;
}

.qr-grid {
  display: grid;
  grid-template-columns: 160px 160px;
  gap: 10px 16px;
  margin: 6px 0 4px 0;
}

.qr-actions {
  display: flex;
  justify-content: flex-end;
}

.qr-error {
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 16px;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}

/***********************************************************************************************************************
 * Fapiao receiving settings page
/**********************************************************************************************************************/
.halfWidth {
  width: 50%;
  vertical-align: top;
}

.rightPadded {
  padding-right: 1.5rem;
}

.transport-settings-panel {
  border-bottom: 1px solid #EFEFEF !important;
}

.transport-heading h1 {
  font-size: 18px;
  padding: 18px 0 18px 42px;
}

#fapiaoSettings .fapiao-grid .ui-panelgrid-cell {
  margin-top: 5px !important;
  border: 0 !important;
  padding: 0;
}

#fapiaoTwoCol .ui-panelgrid-cell:first-child {
  border-right: 1px solid #EFEFEF !important;
  padding-right: 2.5rem;
}
#fapiaoTwoCol .ui-panelgrid-cell:last-child {
  padding-left: 2.5rem;
}

#fapiaoTransportSettingsPanel .section {
  border-bottom: 0 !important;
  margin-bottom: 0;
  padding-bottom: 0;
}

#fapiaoTransportSettingsPanel .section h2{
  font-size: 15px;
  padding-top: 4px !important;
}

/***********************************************************************************************************************
 * Deactivation page
/**********************************************************************************************************************/
.deactivation-header-grid {
  display: grid;
  grid-template-columns: 1fr 40%;
  gap: 15px;
}
.deactivation-header-right-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
}
.deactivation-header-left-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
}
.deactivation-header-left-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.searchModeSelect.ui-selectonemenu {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  background: #ffffff;
  height: 24px;
  width: auto !important;
}
.searchModeSelect.ui-selectonemenu .ui-selectonemenu-trigger {
  border-left: 1px solid #e0e0e0;
}
.searchRecipientInput {
  min-width: 148px;
}

/***********************************************************************************************************************
 * French OBD onboarding status banners
 **********************************************************************************************************************/
/* Icon span inside the banner divs (ui-messages-warn-icon, ui-messages-info-icon).
   Overrides PrimeFaces defaults that float and misalign the icon. */
.tungsten-banner-icon {
  padding-right: 10px;
  vertical-align: middle !important;
  float: none !important;
  display: inline-block !important;
}
/* Summary span inside the banner divs — removes the left-margin PrimeFaces adds by default. */
.tungsten-banner-text {
  margin-left: 0 !important;
}

/* KYC status badge coloring (memberTungstenOnboarding.xhtml) — reuses the same red/green/blue
   palette already used for Clearance/Reporting response icons above (#c4202f/#00c425/#159be5). */
.tungsten-kyc-status-failed {
  color: #c4202f;
  font-weight: bold;
}
.tungsten-kyc-status-in-progress {
  color: #159be5;
  font-weight: bold;
}
.tungsten-kyc-status-completed {
  color: #00c425;
  font-weight: bold;
}

.description-text-container {
  font-style: italic;
  font-size:10px;
}

/* Manual endpoint publishing: requested (draft / not-yet-confirmed) validity + status values are
   shown alongside the confirmed value and must be visually distinct using NON-colour cues (italic +
   the "(draft)" suffix added in the markup) so colour-blind users can still tell them apart. */
.tungsten-endpoint-draft {
  font-style: italic;
  font-weight: bold;
}

/* TeN request UUID displayed in request log — monospaced for readability, smaller to fit column */
.tungstenRequestId {
  font-family: monospace;
  font-size: 0.85em;
  word-break: break-all;
}

/* Superscript asterisk displayed immediately after a cell value that is pending.
   Always rendered in the DOM (as a <span>) so JavaScript can toggle visibility without
   inserting/removing elements. Server-side JSF sets tungsten-marker-hidden for non-draft cells;
   obd-endpoint-slots.js removes/adds that class on user interaction. */
.tungsten-draft-marker {
  font-weight: bold;
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 1px;
}

.tungsten-marker-hidden {
  display: none;
}

/* Indent the endpoint slot table from the left edge of the row expansion so it doesn't
   sit flush against the outer datatable's border. Applied via tungsten-endpoint-expansion
   (the class on the inner slot datatable) so the indent travels with the composite to any
   page that uses endpointSlotTable.xhtml. */
.tungsten-endpoint-expansion {
  margin-left: 18px;
}

/* PrimeFaces p:selectBooleanCheckbox renders .ui-chkbox and .ui-chkbox-box as block elements,
   and a global stylesheet sets display:block !important on them. Override with !important
   scoped to the slot table cells so the * draft-marker span appears to the right of the
   checkbox rather than below it. Does not affect checkboxes anywhere else in the project. */
.tungsten-endpoint-expansion td .ui-chkbox,
.tungsten-endpoint-expansion td .ui-chkbox-box {
  display: inline-block !important;
  vertical-align: middle;
}

/* Head-office SIREN/SIRET lock indicators (endpointSlotTable.xhtml, slot.headOfficeLevel rows
   only): the dynamic lock icon (.tungsten-lock-icon, toggled instantly client-side — see
   obd-endpoint-slots.js) and the "locked" comp:helpIcon both sit inline immediately after the
   intent checkbox / draft marker, aligned to the top of the cell rather than the middle/bottom —
   they annotate the field as a whole. Both are hidden (via .tungsten-marker-hidden or JSF
   rendered=false) whenever the row isn't actually locked. */
.tungsten-endpoint-expansion td .ui-icon-locked,
.tungsten-endpoint-expansion td .tungsten-lock-icon {
  display: inline-block;
  vertical-align: top;
  margin-left: 4px;
}

/* Without this, .tungsten-marker-hidden (1 class) loses the specificity fight against the
   inline-block rule above (2 classes + element), so the lock icon would stay visible even
   when the server/JS marks it hidden. Matches the icon's own two classes to win regardless
   of source order. */
.tungsten-endpoint-expansion td .tungsten-lock-icon.tungsten-marker-hidden {
  display: none;
}

/* .ui-icon-locked is a background-position-only sprite offset (theme.css) — it relies on the
   base .ui-icon class (16x16, background-image) for its actual size/image. The dynamic lock
   icon span carries both classes; give it a pointer cursor since clicking it opens the same
   styled tooltip box comp:helpIcon uses (showHeadOfficeLockTooltip in obd-endpoint-slots.js). */
.tungsten-endpoint-expansion td .tungsten-lock-icon {
  cursor: pointer;
}

/* Visual "disabled" look applied INSTANTLY by JS (setCheckboxLocked in obd-endpoint-slots.js) to
   a checkbox whose head-office counterpart is currently checked/intended. The actual blocking of
   interaction is enforced by a capture-phase click guard in the same file — PrimeFaces' own
   widget caches its `disabled` option at initial render and does not react to attribute changes
   made afterwards, so the visual and the guard are applied independently of it. */
.tungsten-endpoint-expansion td .ui-chkbox-box.tungsten-checkbox-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Slot-table calendar wrapper: the inputControl div that replicates the comp:inputCalendar
   structure (inputControl > inputDiv > text-l/text-r/calendar-icon + p:calendar) is given this
   class so it sits inline beside the * draft marker. */
.tungsten-endpoint-expansion td .tungsten-calendar-slot {
  display: inline-block;
  width: 110px;
  vertical-align: middle;
}

/* NOT_PUBLISHED slot rows: block mouse interaction on date calendars so the user cannot
   edit dates before confirming publish intent via the checkbox. Applied server-side via
   rowStyleClass and toggled client-side by obd-endpoint-slots.js on checkbox change.
   Uses pointer-events rather than the PrimeFaces disabled attribute to avoid widget-state
   conflicts and AJAX re-render concurrency issues. */
.slot-calendar-disabled .calendarInput,
.slot-calendar-disabled .calendar {
  pointer-events: none;
  opacity: 0.45;
}

/* Expand / Collapse all toggle button — a CSS-drawn right-pointing triangle is placed
   inside the button label via ::before. It rotates 90° when the obd-expanded class is
   present, matching the visual behaviour of p:rowToggler without any extra DOM element. */
.obd-toggle-btn .label::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent currentColor;
  vertical-align: middle;
  margin-right: 5px;
  position: relative;
  top: -1px;
  transition: transform 0.15s ease;
}
.obd-toggle-btn.obd-expanded .label::before {
  transform: rotate(90deg);
}

/* The TeN-confirmed (live) validity date shown below the pending-change calendar in a slot row.
   Smaller and de-emphasised so the editable (pending) value is visually primary. */
.tungsten-endpoint-confirmed-date {
  font-size: 0.85em;
  color: #666;
  margin-top: 2px;
}

/* Targeted readability for the nested slot table in the OBD establishment row expansion — the
   inner datatable headers are otherwise hard to distinguish from the value rows. Scoped to the
   French OBD endpoint slot tables only; does NOT change global PrimeFaces table styling. */
.tungsten-endpoint-expansion .ui-datatable-thead > tr > th {
  background: #eef2f7;
  border-bottom: 1px solid #c5d0db;
  font-weight: bold;
}

/* The jQuery-UI datepicker popup is appended to <body>; raise its z-index so it is not clipped by
   a nested datatable row-expansion when editing endpoint validity inline. */
#ui-datepicker-div {
  z-index: 1200 !important;
}

/* Inside a modal overlay PrimeFaces cancels key and mouse events whose target computes to a
   z-index below the mask (the mask sits one below the dialog, and dialogs start at 1001).
   The themed textarea sits at 99, which makes it impossible to type into or click into once
   a dialog is modal, so lift it the way the theme already lifts single-line inputs. Scoped to
   dialogs because outside one the low value keeps the surrounding border sprites layered. */
.ui-dialog .inputTextareaDiv textarea {
  z-index: 999999;
}

/* Line hierarchy styles */
.lineTypeIcon{display:inline-block;min-width:16px;padding:1px 3px;margin-right:3px;border-radius:3px;font-size:10px;font-weight:bold;vertical-align:middle;text-align:center;}
.lineTypeIcon.groupIcon{background:#d0e8ff;color:#1a5fa8;}
.lineTypeIcon.infoIcon{background:#e8e8e8;color:#555;}
tr.groupLine td{background:#f0f6ff !important;}
tr.infoLine td{background:#f7f7f7 !important;color:#777;}
tr.childLine .lineNoCol{padding-left:22px;}
.groupCol{text-align:left;white-space:nowrap;}
.parentRef{font-size:11px;color:#666;}
.groupSubtotalCell{display:block;text-align:right;font-weight:bold;}

/* Grouped supplemental data on the status update form: the group tree is one flat table, so the
   nesting level is shown by indenting the group column. */
.supplementalIndent1{padding-left:0;}
.supplementalIndent2{padding-left:1.5em;}
.supplementalIndent3{padding-left:3em;}