/* cyrillic-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/online/javax.faces.resource/fonts/montserrat-v26-cyrillic-ext.woff2.xhtml") format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/online/javax.faces.resource/fonts/montserrat-v26-cyrillic.woff2.xhtml") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/online/javax.faces.resource/fonts/montserrat-v26-vietnamese.woff2.xhtml") format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/online/javax.faces.resource/fonts/montserrat-v26-latin-ext.woff2.xhtml") format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
    src: url("/online/javax.faces.resource/fonts/montserrat-v26-latin.woff2.xhtml") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*****************************************************************************************************************/
/*                                                  MAIN ELEMENTS                                                */
/*****************************************************************************************************************/

/* ========================== COMMON ============================== */
:root {--header-height: 148px}

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

/* html */
html { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; height: 100%}

/* body */
body {margin: 0; background: var(--gray-100)}
body.mainPage {margin: 0 auto; min-width: 360px; max-width: 1440px}

/* main */
.main {margin-left: 240px}

.headerContainer {padding: 24px 16px 8px 16px; position: sticky; top: 0; z-index: 1; background: var(--gray-100)}

/* top header */
.topHeader {display: flex; justify-content: space-between}
.topHeader .pageTitle {font-size: 18px; line-height: 32px; color: var(--gray-800); font-weight: 600; flex-grow: 1; white-space: nowrap; margin-right: 12px}
.topHeader .pageTitle:has(.pageTitleTrim) {flex-shrink: 1; overflow: hidden; text-overflow: ellipsis}

/* main header */
.mainHeader .pageControlsAndFilters {display: flex; justify-content: space-between; margin-top: 20px; gap: 12px 8px}
.mainHeader .pageSubtitle {line-height: 24px; color: var(--gray-600)}

/* page filter indicators */
.mainHeader .pageFilterIndicators {line-height: 24px}
.mainHeader .folderPath + .pageFilterIndicators {margin-top: 6px}

/* block for buttons in page header */
.mainHeader .pageControls {display: flex; max-width: 100%; overflow: hidden; align-items: center}
.mainHeader .pageControls .createFolderButton {flex-shrink: 0}
.mainHeader .pageControls .headerButton {overflow: hidden}
.mainHeader .pageControls .headerButton .ui-button-text {overflow: hidden; text-overflow: ellipsis; white-space: nowrap}

/* block for filters in page header (search field, date range) */
.mainHeader .pageFilters {display: flex; gap: 8px; align-items: flex-start; position: relative}

/* main content */
.mainContent {background: var(--gray-100); padding: 0 16px 24px 16px}

/* prevent Chrome outline */
*:focus {outline-color: var(--blue-400)}

/* please wait message */
.pleaseWaitMessage {left: calc(50% - 60px);  top: 0; z-index: 10000; position: fixed; border-radius: 0 0 2px 2px; font-weight: 500; padding: 3px 16px; box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.247), 0 3px 5px rgba(0, 0, 0, 0.247); white-space: nowrap; visibility: hidden; background-color: #fff1a8; color: var(--gray-600)}

/* search field */
.ui-inputfield.searchField:not(:placeholder-shown) + .search-icon {display: none}

/* section */
.sectionHeader {display: block; font-weight: 600; color: var(--gray-800); font-size: 14px; line-height: 24px; margin-bottom: 12px}
.sectionPanel {margin-bottom: 24px}
.sectionPanel.last {margin-bottom: 0}

/* input */
.inputGroup {display: block; margin-bottom: 12px}
.inputGroup.last {margin-bottom: 0}
.inputGroup .ui-chkbox {line-height: 20px}
.inputText {width: 100%}
.inputLabel, .ui-widget.inputLabel {display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; line-height: 20px; color: var(--gray-800); text-transform: uppercase}
.textGroup {display: block; margin-bottom: 12px; line-height: 20px}
.textGroup.last {margin-bottom: 0}
.expandedButton {width: 100%}

/* fix drive.js issue with wrong tour popover positioning */
body.driver-active {overflow: hidden}

/* ========================== NAVIGATION ============================== */

.navigation {position: fixed; top: 0; width: 240px; min-height: 100vh; min-height: 100dvh; height: 100%; background: white; flex-shrink: 0; overflow-y: auto; transition: transform .4s cubic-bezier(0.05, 0.74, 0.2, 0.99); z-index: 2}
.navigationActions.ui-panel {width: 100%; padding: 24px 24px 0; box-shadow: none}
.navigationActions.ui-panel .ui-panel-titlebar-icon {display: none}
.navigationActions.ui-panel .ui-panel-titlebar-icon .ui-icon-closethick {font-size: 12px}
.navigationMenuOpenButton {display: none}

/* logo */
.navigationLogo a {text-decoration: none; line-height: 1; display: block}
.navigationLogo a > img {height: 26px}
.navigationLogo a > span {vertical-align: top; color: var(--orange-600); font-weight: bold; padding-left: 6px}

/* links */
.navigationLinks {margin-top: 28px}
.navigationLinks > div {margin: 16px 0}
.navigationLinks .link {line-height: 24px; display: block; color: var(--gray-600)}
.navigationLinks .link.header .icon {margin-left: 2px; margin-right: 10px; width: 20px; height: 16px; padding: 0; vertical-align: baseline; line-height: normal}
.navigationLinks .link.header .icon:after {content: "\00a0"}
.navigationLinks .link.active {color: var(--blue-600)}
.navigationLinks .link.active .icon {background-color: var(--blue-600)}
.navigationLinks .link .link-text {line-height: 24px}
.navigationLinks .subLinks .link {margin: 4px 0; padding-left: 36px}

/* separator */
.navigation .separator {border-bottom-style: solid; border-bottom-width: 1px; margin: 50px 20px 7px 20px; width: 180px}


/* ========================== USER MENU ============================== */
.userMenu .userActionsMenu {margin-left: 8px}
.userMenu .userActionsMenuButton.ui-button:before {content: ''; display: inline-block; mask: url("/online/javax.faces.resource/user.svg.xhtml?ln=icons") no-repeat center; width: 20px; height: 16px; background-color: var(--gray-600); position: absolute; top: 7px; left: 10px}
.userMenu .userActionsMenuButton.ui-button:hover:before {background-color: var(--blue-400)}
.userMenu .userActionsMenuButton.ui-button .ui-button-text {padding-left: 39px}

/* ======================== FILE UPLOAD ============================ */

.navigationActions .uploadDocumentButton .ui-fileupload-buttonbar .ui-button {width: 100%; margin-top: 18px}
.navigationActions .freeUploadTemplateButton {width: 100%; margin-top: 20px} /* upload template button for free accounts, needs 2px more height */

.inviteSignersDialog .uploadDocumentButton {display: inline-block; vertical-align: top}


/* ======================== IMPORT FROM CLOUD ============================ */

.importFromCloud {margin-top: 12px}
.importFromCloud .importFromCloudButton,
.importFromCloud .importFromCloudButton .ui-button {width: 100%}


/* ======================== DIALOG ============================ */

/* subject and message panel */
.ui-dialog .emailSubjectAndMessagePanel .emailText {resize: vertical}

/* advanced panel */
.ui-dialog .advancedPanel  {border: 1px solid var(--gray-200); border-radius: var(--border-radius)}
.ui-dialog .advancedPanel .ui-accordion-content {padding: 8px 16px 16px}

/* saved emails panel */
.ui-dialog .savedEmailsPanel:not(:last-child) {margin-top: 12px; clear: both}
.ui-dialog .savedEmailsSelect {width: 276px; display: block; margin-bottom: 12px}
.ui-dialog .savedEmailsSelect .ui-selectonemenu {width: 276px !important; min-width: 276px !important}
.ui-dialog .savedEmailsSelect .ui-selectonemenu .ui-corner-all {border-radius: 0px} /* fixes bug in FF: long strings not displayed */
.ui-dialog .savedEmailsButton {margin: 0 8px 0 0; overflow: hidden; white-space: nowrap}
.ui-dialog .savedEmailsSaveButton {min-width: 130px}
.ui-dialog .savedEmailsDeleteButton {min-width: 130px}

.ui-dialog .ui-datatable .ui-paginator.ui-paginator-bottom {padding-bottom: 0}

/* ======================== INPUT PANEL ============================ */

/* divs for vertical align (see https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) */
.verticalAlignOuter {position: absolute; display: flex; height: 100%; width: 100%}
.verticalAlignInner {padding: 20px 10px; margin: auto; flex: 1}

.inputPanel.defaultWidth {width: 100%; max-width: 400px}
.inputPanel {margin: 24px auto 0}
.inputPanel .panelTitle {display: block; font-size: 18px; font-weight: 600; line-height: 32px; margin-bottom: 24px; text-align: center}
.inputPanel .message {display: block; font-size: 18px; font-weight: 600; margin-bottom: 24px; text-align: center}
.inputPanel .textGroup {width: 100%; margin-bottom: 24px}
.inputPanel .inputGroup {margin-bottom: 24px}
.inputPanel .inputText {padding: 12px 16px}
.inputPanel .formMessage {margin: 0 0 24px}

/*****************************************************************************************************************/
/*                                                    PAGES                                                      */
/*****************************************************************************************************************/

/* ================== LOG IN / SIGN UP / RESET PASSWORD ======================= */
/* log in  */
.inputPanel .forgotPasswordLink {margin-top: 4px; text-align: right; line-height: 20px}
.inputPanel .noAccountLink {text-align:center; margin-top: 24px; line-height: 20px}

/* sign up */
.inputPanel .haveAccountAlreadyLink {text-align: center; margin-top: 24px; ; line-height: 20px}

/* google button */
.googleButtonDiv {margin: 24px 40px 0 40px; text-align: center}
.googleButton {text-decoration: none; display: inline-block; border-radius: var(--border-radius); border: 1px solid #4285f4;
    background-color: #4285f4; color: #fff; width: 100%; max-width: 320px; padding: 11px}
.googleButton:hover {background-color: #5C9FFF}
.googleButton:active {background-color: #296CDB}
.googleButton .icon {vertical-align: middle; width: 16px; height: 16px}
.googleButton .text {vertical-align: middle; margin-left: 10px; line-height: 24px}


/* ================== SETTINGS ======================= */

/* header settings */
header:has(> .mainHeader > .settings) {padding-bottom: 0}
.pageControls.settings {background-color: white; border-bottom: 1px solid var(--gray-200); padding: 0 24px; margin-top: 20px; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); overflow-x: auto}
.settings .settingsHeader {text-decoration: none; text-transform: uppercase; color: var(--gray-800); display: inline-block; padding: 16px 0}
.settings .settingsHeaderActive {color: var(--blue-600); box-shadow: inset 0 -2px 0 var(--blue-600);}
.settings .settingsHeaderSpacer {flex-basis: 75px; flex-grow: 0; min-width: 24px}

/* content */
.settingsContent {padding: 24px; background: white; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); overflow: auto}
.settingsContent .settingsPanel {width: 600px; max-width: 100%}
.settingsContent .settingsCustomSizeText {margin-bottom: 5px}
.settingsContent .defaultHint {display:block; margin-bottom: 5px; font-size: 10px; color: var(--gray-500)}
.settingsContent .settingsDoubleText {width: calc(50% - 10px); margin-right: 20px}
.settingsContent .settingsDoubleText.last {margin-right: 0}
.settingsContent .hiddenPassword {position: absolute; height: 0; overflow: hidden}
.settingsContent .checkbox {vertical-align: middle}
.settingsContent .topSaveButton {margin-bottom: 24px}
.settingsContent .errorForCustomText {margin-top: 5px}

/* remind signers */
.settingsContent .remindSignersGroup {display: flex; align-items: center}
.settingsContent .remindDays {width: 100px; margin: -7px 12px}
.settingsContent .remindDaysMessage {width: 380px; margin: 12px 0 0}

/* signature appearance */
.settingsContent .signatureType {display: grid; grid-template-columns: repeat(3, min-content); align-items: center; row-gap: 12px}
.settingsContent .radioButtonGroup {display: flex}
.settingsContent .radioButtonLabel {width: 106px}
.settingsContent .signatureImage {vertical-align: middle; padding-right: 10px}
.settingsContent .signatureExtension {font-family: Arial, serif; font-size: 13px; line-height: 14.4px; border-spacing: 0}

/* logo */
.settingsContent .logoImageGroup {display: flex; align-items: center; gap: 32px; padding: 20px 0}
.settingsContent .logoImageGroup .logoImageContainer {width: 150px}
.settingsContent .logoImageGroup .logoImageContainer .logoImage {max-height: 80px; max-width: 100%; display: block}
.settingsContent .uploadLogoButton {margin-top: 8px}
.settingsContent .acceptedSignatureTypes {margin-bottom: 24px}

/* email footer text */
.settingsContent .emailFooterText {width: 100%; line-height: 1.2; resize: vertical}

/* signature types */
.settingsContent .signatureTypesCheckboxPanel {margin-bottom: 12px}
.settingsContent .signatureTypesCheckbox tbody td {padding: 0; white-space: nowrap}
.settingsContent .signatureTypesCheckbox tbody td:not(:last-child) {padding-right: 50px}
.settingsContent .signatureTypesCheckbox.ui-selectmanycheckbox label {padding-left: 8px; margin: 0}

/* integrations settings */
.settingsContent .integrationImageGroup > img {display: block}
.settingsContent .integrationTextGroup {margin-top: 6px; display: flex; align-items: center; gap: 12px; justify-content: space-between; line-height: 20px}
.settingsContent .integrationGoogleTextGroup {margin-bottom: 50px}

/* API settings */
.purchaseApiCreditsPanel {display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 22px; gap: 12px}
.purchaseApiCreditsPanel .purchaseApiCreditsButton {flex-shrink: 0}
.settingsContent .settingsApiMode {margin-right: 1px; font-weight: 600}
.settingsContent .creditCountInput {margin-right: 10px}
.settingsContent .creditCountInput .ui-inputfield {width: 100px}
.settingsContent .creditCountMessage {margin-top: 5px}

.radioButtonsBlock .ui-g [role="radio"] label {line-height: 20px}
.radioButtonsBlock .ui-g [role="radio"] {padding: 0 0 12px 0}
.radioButtonsBlock .ui-g:last-child [role="radio"] {padding: 0}


/* ================== CONTACTS  ======================= */

.ui-button.addContactButton {margin: 0 12px 10px 0}

.contactList {margin-top: 10px}
.contactList tbody tr {height: 48px}
.contactList thead th {background: none; text-align: left; border-bottom: 2px solid}
.contactList .contactEmail {overflow-wrap: break-word}

/* table footer */
.contactList.ui-datatable .ui-paginator {padding: 20px 0 0}

/* contact table columns */
.contactList .contactActions {width: 76px; text-align: center}


/* ================== DOCUMENTS ======================= */

/* reset filters */
.pageFilterIndicators .resetFiltersLink {text-decoration: none}
.pageFilterIndicators .pageFilterItem {color: var(--gray-600)}
.pageFilterIndicators .pageFilterItem::after {padding: 0 7px; content: "|"}

/* header buttons */
.pageControls .headerButton {margin-right: 8px}
.pageControls .documentCheckbox {margin: 0 20px 0 20px; vertical-align: middle}

.headerMoreMenu .sendBundleForSigningMenuItem {display: none}

/* document time range select menu */
.pageFilters .documentDateRangeSelect.ui-selectonemenu {width: 200px; background: white}
/* clearable search field, copied from http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text */
.pageFilters .documentSearch {width: 200px; vertical-align: middle}
.pageFilters .documentNameFilter {width: 100%; vertical-align: middle}
.pageFilters .ui-button.resetSearch {position: absolute; right: 0}
.pageFilters .ui-button.resetSearch .ui-icon {font-size: 1rem}

/* separator */
/*.documentList {border-top-width: 2px; border-top-style: solid}*/

/* data grid customization */
.documentList .documentListItemWrapper .folderRow {border-radius: var(--border-radius); padding: 8px 12px 8px 20px; position: relative}
.documentList .documentListItemWrapper > .folderRow {background: white; padding: 0}
.documentList .documentListItemWrapper .folderRow.highlighted {background: #AED0EA}
.documentList .documentListItemWrapper > .documentRow {display: flex; flex-direction: row; background: white; border-radius: var(--border-radius); padding: 8px 12px 8px 20px; position: relative}
.documentList .documentListItemWrapper:not(:last-child) > .documentRow {margin-bottom: 8px}

/* document and folder draggable handler */
.draggableHandler > .custom-icon {height: 32px; width: 20px; padding: 8px 0}
.documentList .documentListItemWrapper .folderRow .draggableHandler,
.documentList .documentListItemWrapper .documentRow .draggableHandler {display: none; position: absolute; left: 0; image-rendering: pixelated; cursor: move}
.documentList .documentListItemWrapper .documentRow .draggableHandler {top: 0}
.documentList .documentListItemWrapper .folderRow:hover .draggableHandler,
.documentList .documentListItemWrapper .documentRow:hover .draggableHandler,
.documentList .documentListItemWrapper .folderRow.ui-draggable-dragging .draggableHandler,
.documentList .documentListItemWrapper .documentRow.ui-draggable-dragging .draggableHandler {display: block}

/* document choice */
.documentChoice {line-height: 1}

/* document choice */
.documentImageContainer {margin: 0 20px}
.documentImage img {display: block; border: 1px solid var(--gray-400); border-radius: var(--border-radius); padding: 1px; box-sizing: content-box; background: white}
.documentImage.set {position: relative}
.documentImage.set img {margin-top: 6px; position: relative}
.documentImage.set .documentSet {position: absolute; width: 64px; height: 80px; border: 1px solid var(--gray-400); border-radius: var(--border-radius); background: white}
.documentImage.set .documentSet:nth-child(1) {top: 0; left: 8px}
.documentImage.set .documentSet:nth-child(2) {top: 3px; left: 4px}

/* document data */
.documentData {flex: 1 100%; overflow: hidden}
.documentDetails {padding-right: 10px; flex: 1 100%}
.documentDetailsWithButtons {width: 100%; display: flex}
.documentDetailsWithButtons .documentStatus {line-height: 20px}
.documentStatusMessage {margin: 6px 8px 0 0; padding: 0 6px; border-radius: var(--border-radius); color: var(--gray-600); background-color: var(--gray-100); display: inline-block}
.documentStatusMessage:last-child {margin-right: 0}
.documentStatusMessage.signed {color: var(--green-700); background-color: var(--green-100)}
.documentStatusMessage.template {color: var(--blue-600); background-color: var(--blue-100)}
.documentListItem {
    display: inline-block; /* required for word breaking */
    word-break: break-word;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 20px;
    color: var(--gray-800) !important;
    text-decoration: none;
}
.folderRow .areaForDocuments {display: flex; flex-direction: row; align-items: center}
.folderRow .folderImage {padding: 6px 16px; margin: 0 20px; vertical-align: top; position: relative; background-color: var(--gray-100); border-radius: var(--border-radius)}
.folderRow .folderImage img {display: block}
.folderRow .documentButtons {width: 32px} /* prevent width from increasing during page load */
.folderRow .documentMoreButton:not(:last-child) {margin-left: 0; margin-right: 12px}
.documentUpdated {display: inline-block; white-space: nowrap; color: var(--gray-600); margin: 6px 8px 0 0}
.dateTime {letter-spacing: 0.5px}
.documentHiddenDate {display: none}
.documentAreaTop {padding-bottom: 8px}
.documentAreaBottom {padding-bottom: 7px}

/* buttons */
.documentButtons {white-space: nowrap; text-align: right; flex-shrink: 0}
.documentButton:not(:last-child) {margin-left: 0; margin-right: 8px}

/* list of invitations */
.documentInvitations {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px}
.documentInvitation {flex-basis: 310px; display: inline-block; text-overflow: ellipsis; white-space: nowrap}
.documentInvitation {--iconWidth: 14px;--offset: 10px}
.documentInvitation:not(.withMenuButton) .documentInvitationEmail {line-height: 24px}
.documentInvitation.withMenuButton .documentInvitationImage {margin-left: var(--offset); margin-right: calc(0px - var(--offset) - var(--iconWidth))}
.documentInvitation.withMenuButton > span:hover .documentInvitationImage {background-color: var(--blue-400)}
.documentInvitationImage {margin-right: 9px}
.documentInvitationImage.custom-icon {width: var(--iconWidth); height: var(--iconWidth); padding: 0}
.documentInvitationEmail {vertical-align: middle; line-height: 1; color: var(--gray-600)}
.documentInvitationActions {vertical-align: middle; max-width: 100%}
.documentInvitationActions .ui-button {max-width: 100%; vertical-align: middle}
.documentInvitationActions .ui-button .ui-button-text {overflow: hidden; text-overflow: ellipsis}

/* button in list of invitation actions */
.ui-menu .ui-menuitem-link.invitationActionMenuItem {padding: 3px}

/* empty document list */
div:has(>.ui-datagrid-content-empty, >.ui-datalist-empty-message) {width: 100%; line-height: calc((100dvh - var(--header-height) - 24px) / 2 + 88px); background: url(/online/javax.faces.resource/mini-illustrations/docs-magnifying.svg.xhtml?ln=images) no-repeat center calc(100% - 40px) !important}
.ui-datagrid-content-empty, .ui-datalist-empty-message {font-size: 20px; color: var(--gray-800); text-align: center; line-height: 1; user-select: none; padding: 0 !important; vertical-align: bottom; display: inline-block; width: 100%}

/* document separator */
.separator {border-width: 1px; border-style: solid; border-style: none none solid; margin: 7px 0px 7px 0px}

/* folder sort area */
.folderSortArea {border-spacing: 0px;}
.folderSortArea td {padding: 0px; vertical-align: middle}

.folderSortAreaTop, .folderSortAreaBottom {height: 9px}
.folderSortAreaMiddle {height: 8px;}

.folderSeparatorMiddle {
    border: 3px solid transparent;
    width: 100%;
}

.highlighted .folderSeparatorTop, .highlighted .folderSeparatorMiddle, .highlighted .folderSeparatorBottom {
    background-clip: padding-box;
    background-color: #828282;
    border: 3px solid #828282;
    border-bottom-color: transparent;
    border-radius: 0;
    border-top-color: transparent;
    box-sizing: border-box;
    content: '';
    height: 8px;
    margin: 0;
    width: 100%;
}

/* search occurrence highlighting */
.highlightedSearchOccurrence {background-color: #fcff7f}


/* ================== VERIFY EMAIL FOR TEMPLATE LINK ======================= */

.verifyEmailForTemplateLink .sentVerificationLinkMessage {line-height: 20px}
.verifyEmailForTemplateLink .sentVerificationLinkMessage .email {font-weight: 600}


/* ================== BULK SEND LIST ======================= */

.newBulkSendPanel.pageControls {flex-wrap: wrap; gap: 12px}
.newBulkSendPanel .availableCredits {color: var(--gray-600)}
.newBulkSendPanel .availableCredits .availableCreditsSeparator {padding: 0 7px}

.bulkSendList tbody tr {height: 48px}

/* bulk send table columns */
.bulkSendList .title {width: 35%; overflow-wrap: break-word}
.bulkSendList .actions {width: 76px; text-align: center}
.bulkSendList .bulkSendHiddenDate {visibility: hidden; display: inline-block; width: 0}


/* ================== TEAM ======================= */

.newTeamMemberPanel.pageControls {flex-wrap: wrap; gap: 12px}
.newTeamMemberPanel .availableSeats {color: var(--gray-600)}
.newTeamMemberPanel .availableSeats .availableSeatsSeparator {padding: 0 7px}

.teamList tbody tr {height: 48px}
.teamList thead th {background: none; text-align: left; vertical-align: top; padding-bottom: 10px; border-bottom-width: 2px; border-bottom-style: solid}

/* team document table header */
.teamDocumentList thead th.teamActions,
.teamDocumentList thead th.teamDocumentModified,
.teamDocumentList thead th.teamDocumentStatus {vertical-align: top}

/* team document table columns */
.teamList .email {max-width: 180px; overflow-wrap: break-word}
.teamList .assignSeatLink {text-decoration: none}
.teamList .teamActions, .teamDocumentList .teamActions {width: 76px; text-align: center}
.teamList .seatStatusNotAssigned {color: var(--red-500)}

.teamDocumentList .teamDocumentModified {width: 150px}
.teamDocumentList .teamDocumentStatus {width: 145px}
.teamDocumentList .teamDocumentStatus .documentStatusMessage {margin-left: 0; margin-bottom: 6px; line-height: 20px}
.teamDocumentList .teamDocumentStatus .documentStatusMessage:last-child {margin-bottom: 0}
.teamDocumentList .teamDocumentName,
.teamDocumentList .teamDocumentOwner {word-break: break-word; overflow-wrap: break-word; padding: 0 0 7px}
.teamDocumentList .teamDocumentHiddenDate {visibility: hidden; display: inline-block; width: 0}

/* filter fields */
.teamDocumentList .authorEmailFilter {min-width: calc(100% - 20px) !important; width: calc(100% - 20px)}
.teamDocumentList .authorEmailFilter.ui-selectonemenu .ui-selectonemenu-label {text-transform: none; text-overflow: ellipsis}
.teamDocumentList .teamDocumentNameFilter {width: 100%}
.teamDocumentList .teamDocumentName .ui-column-customfilter {position: relative; margin-right: 20px}
.teamDocumentList .ui-button.resetSearch {position: absolute; right: 0}
.teamDocumentList .ui-button.resetSearch .ui-icon {font-size: 1rem}


/* ================== SUBSCRIPTIONS ======================= */

.purchaseSubscription {text-align: center; overflow: auto; margin: 16px 0 32px 0}
.purchaseSubscription .purchasePanelContainer {display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 80px; margin-top: 24px}
.purchaseSubscription .purchasePanel {width: 272px; padding: 24px; background-color: #FFFFFF; border-radius: var(--border-radius); box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.05)}
.purchaseSubscription .purchasePanel .newSubscriptionButton {width: 100%}
.purchaseSubscription .subscriptionType {font-size: 16px; font-weight: 600; margin-bottom: 16px; line-height: 28px}
.purchaseSubscription .subscriptionCount {margin: 16px 0 28px}
.purchaseSubscription .subscriptionCountInput {margin-left: 5px; margin-right: 10px}
.purchaseSubscription .subscriptionCountInput .ui-inputfield {width: 70px}
.purchaseSubscription .subscriptionCurrency {font-size: 16px; font-weight: 600; color: var(--gray-400); line-height: 1; vertical-align: top}
.purchaseSubscription .subscriptionPrice {font-size: 32px; font-weight: 600; padding: 0 4px}
.purchaseSubscription .pricePerSubscription {font-weight: 600; margin-top: 4px; color: var(--gray-400)}
.purchaseSubscription .subscriptionPeriod {font-size: 13px; font-weight: 600; color: var(--gray-400)}
.purchaseSubscription .subscriptionAdditionalInfo {color: var(--gray-500)}
.purchaseSubscription .subscriptionAdditionalInfo.yourCurrentPlan {padding: 17px}
.purchaseSubscription .annualSpecialOffer {display: inline-block; margin-top: 10px; background-color: #FFFF9B}
.purchaseSubscription .monthlySpecialOffer {display: inline-block; margin-top: 10px; color: #F4F4F4; background-color: #F4F4F4}
.purchaseSubscription .subscriptionBenefits {text-align: left; display: grid; gap: 10px; margin: 16px 0 28px}
.purchaseSubscription .subscriptionBenefits .subscriptionBenefit {line-height: 24px}
.purchaseSubscription .subscriptionBenefits .subscriptionBenefit.benefitUnavailable {color: var(--gray-500)}
.purchaseSubscription .subscriptionBenefits .pi {font-size: 13px; font-weight: 600; width: 24px; margin-right: 12px; text-align: center}
.purchaseSubscription .subscriptionBenefits .pi.pi-check {color: var(--green-600)}
.purchaseSubscription .subscriptionBenefits .pi.pi-times {color: var(--red-600); font-size: 12px}

.subscriptionList tbody tr {height: 48px}

/* table footer */
.subscriptionList.ui-datatable .ui-paginator {padding: 20px 0 0}

/* subscriptions table columns */
.subscriptionList .email {width: 40%; overflow-wrap: break-word}
.subscriptionList .subscriptionActions {width: 150px}

.subscriptionList .hiddenDate {visibility: hidden; display: inline-block; width: 0}


/* ================== PAYMENTS ======================= */

/* header */
.paymentPage {display: flex; flex-direction: column; min-height: 100%}
.paymentPageHeader {margin: 80px 0 16px}
.paymentPageHeader img {display: block; margin: 0 auto}
.paymentAvangatePanel {margin: 0 auto; padding: 0 20px}
.paymentAvangatePanel .upgradeMessage {margin-bottom: 16px; text-align: center; font-size: 18px; font-weight: 600; line-height: 32px; color: var(--gray-800)}
.paymentAvangatePanel .paymentMethods {display: block}
.paymentMethodsGroup {display: flex; flex-wrap: wrap; justify-content: center; gap: 12px}

/* purchase subscriptions */
.paymentAvangatePanel .purchaseSubscription {margin: 60px 0 80px}

/* purchase credits */
.purchaseCredits {text-align: center; width: 272px; margin: 60px auto 80px; padding: 24px; background-color: #FFFFFF; border-radius: var(--border-radius); box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.05)}
.purchaseCredits .creditCount {margin-top: 16px}
.purchaseCredits .creditCountInput {margin-right: 12px}
.purchaseCredits .creditCountInput .ui-inputfield {width: 80px}
.purchaseCredits .creditCountMainInput {margin-left: 12px}
.purchaseCredits .creditCurrency {font-size: 16px; font-weight: 600; color: var(--gray-400); line-height: 1; vertical-align: top}
.purchaseCredits .creditPrice {font-size: 32px; font-weight: 600; padding-left: 4px}
.purchaseCredits .pricePerCredit {font-weight: 600; margin-top: 4px; color: var(--gray-400)}
.purchaseCredits .purchaseNowButton {width: 100%; margin-top: 28px}

.purchaseCredits .autoPurchasePanel {margin-top: 16px; line-height: 24px}
.purchaseCredits .autoPurchaseItemPanelText {margin-top: 16px; margin-bottom: 12px}
.purchaseCredits .message {text-align: left}
.purchaseCredits .autoPurchaseMessagePanel {display: block; margin-bottom: 30px}

/* need more seats? */
.paymentAvangatePanel .needMoreSeatsPanel {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 40px; margin-top: 44px}
.paymentAvangatePanel .needMoreSeatsPanel .message {font-size: 18px; font-weight: 600}

/* questions */
.priceQuestionsContainer {background-color: #ffffff}
.priceQuestions {margin: 0 auto; padding: 80px 20px; width: 100%; max-width: 1080px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 60px 120px}
.priceQuestions .priceQuestionBlock {display: flex; flex: 1 270px; gap: 32px; align-items: flex-start}
.priceQuestions .priceQuestion {margin-bottom: 4px; font-size: 18px; font-weight: 600; line-height: 24px}
.priceQuestions .priceAnswer {line-height: 20px}
@media (max-width: 640px) {.priceQuestions {column-gap: 60px}}

/* additional spacer to fill rest of the page after priceQuestions */
.pageSpacer {background: white; flex-grow: 1}


/* ================== FEATURE LIST ======================= */

.featureListBody {padding: 24px}
.featureListPanel {max-width: 640px}
.featureListPanel.ui-panel .ui-panel-content {padding: 24px}
.featureListPanel .buttonPanel {text-align: right}
.featureListPanel .featureItem {margin-top: 40px}
.featureListPanel .featureHeader {display: flex; align-items: baseline; margin-bottom: 12px}
.featureListPanel .sectionHeader {flex: 1; word-break: break-word; padding-right: 12px; margin-bottom: 0}
.featureListPanel .featureDescription {word-break: break-word; line-height: 20px; white-space-collapse: preserve}
.featureListPanel .ui-button.featureVoteButton .ui-icon {margin-top: -5px; font-size: 10px}
.featureListPanel.inputPanel .inputText {padding: 4px 10px}
.featureListPanel.inputPanel .inputGroup:not(.last) {margin-bottom: 12px}


/* ================== REPORT ABUSE ======================= */

.reportAbuse {width: 100%; max-width: 520px}


/* ================== SIGNING SUCCESS ======================= */

.signingSuccessPanel .inputPanel {width: 100%; max-width: 370px}
.signingSuccessPanel .inputPanel .panelTitle {font-size: 16px; line-height: 24px; margin-bottom: 16px}
.signingSuccessPanel .inputPanel .inputText {padding: 4px 10px}
.signingSuccessPanel .inputPanel .inputGroup {margin-bottom: 16px}
.signingSuccessPanel .ui-panel .ui-panel-content {padding: 24px}
.signingSuccessPanel .downloadDocumentPanel {width: fit-content; margin: 28px auto 40px auto}
.signingSuccessPanel .logoImage {max-height: 75px; max-width: 180px}
.signingSuccessPanel .activateAccountButton {background-color: #000;}


/* ========= INFO PAGES (PAYMENT SUCCESS, INVITATION DELETED) ========= */

.infoPageHeader {margin-bottom: 24px}
.infoPageHeader img {display: block; margin: 0 auto}

.infoPanel {max-width: 750px; margin-left: auto; margin-right: auto; text-align: center}
.infoPanel .ui-panel-content {padding-top: 25px; padding-bottom: 25px}
.infoPanel .messageIllustration {display: block; margin: auto; padding-bottom: 16px}
.infoPanel .message {display: block; font-size: 18px; font-weight: 600; line-height: 28px; padding: 2px 0}
.infoPanel .submessage {display: block; font-size: 13px; line-height: 20px; margin-top: 4px}
.infoPanel .submessage:not(.ui-link) {color: var(--gray-600)}
.infoPanel .actionButton {margin-top: 16px}


/*****************************************************************************************************************/
/*                                                     DIALOGS                                                   */
/*****************************************************************************************************************/

/* ================== INVITE SIGNERS DIALOG ======================= */

.inviteSignersDialog .setSignOrderPanel {line-height: 24px; height: 24px; margin-bottom: 12px}

/* signers table */
.inviteSignersDialog table.signersTable {table-layout: auto}
.inviteSignersDialog table.signersTable thead {display: none}
.inviteSignersDialog table.signersTable tr > td {padding: 0 0 12px 0}

/* add signer button */
.inviteSignersDialog .addSignerButton {margin: 0 8px 0 0}

/* CC emails */
.inviteSignersDialog .ccEmailsPanel {margin-top: 12px}
.inviteSignersDialog .ccEmailsGrid {display: flex; gap: 12px}
.inviteSignersDialog .ccEmailsGrid + .ui-message.ui-message-error {margin: 12px 0 0}
.inviteSignersDialog .ccEmails {flex-grow: 1}

/* "prepare for signing" header */
.inviteSignersDialog .sectionHeader.prepareForSending {display: inline-block}
.inviteSignersDialog .sectionHeader.optional {display: inline-block; padding-left: 5px; color: var(--gray-400)}

/* document name and button */
.inviteSignersDialog .documentName {display: block; margin-bottom: 12px; line-height: 24px}
.inviteSignersDialog .prepareDocumentButton {margin-right: 8px}
.inviteSignersDialog .ui-commandlink {display: inline-block; line-height: 32px;}

/* attachments */
.inviteSignersDialog .attachmentsPanel {margin: 12px 0; padding: 8px 12px; border: 1px solid var(--gray-200); border-radius: var(--border-radius); display: flex; flex-wrap: wrap; gap: 10px 20px}
.inviteSignersDialog .attachmentsPanel .deleteAttachmentButton {width: 24px; margin-left: 2px; vertical-align: middle}
.inviteSignersDialog .attachmentsPanel .deleteAttachmentButton .ui-button-text {padding: 3px 0}
.inviteSignersDialog .attachmentPanel .attachmentNamePanel {display: inline-block; text-overflow: ellipsis; overflow: hidden; max-width: 290px; white-space: nowrap; vertical-align: middle}
.inviteSignersDialog .attachmentPanel .deleteButtonImage {padding-left: 4px; width: 18px; height: 18px; vertical-align: middle}

/* remind days */
.inviteSignersDialog .advancedPanel .remindSignersPanel {width: 276px; float: left}
.inviteSignersDialog .advancedPanel .remindDays {width: 100px; margin-right: 8px}

/* valid till */
.inviteSignersDialog .advancedPanel .validTillPanel {width: 276px; float: right}
.inviteSignersDialog .advancedPanel .validTillDays {width: 50px; margin-right: 8px}


/* ================== START BULK SEND DIALOG ======================= */

/* select file */
.startBulkSendDialog .fileGrid .deleteButtonDocumentsColumn {margin-right: 12px}
.startBulkSendDialog .validTillDays {width: 50px; margin-right: 8px;}


/* ================== CREATE DOCUMENT SET DIALOG ======================= */

/* documents table */
.createDocumentSetDialog .documentsTable tbody tr {height: 44px} /* fixes placeholder height when row sorting */
.createDocumentSetDialog .documentsTable tbody tr > td {padding: 0 0 12px 0}
.createDocumentSetDialog .documentsTable tbody tr:last-child {height: 32px}
.createDocumentSetDialog .documentsTable tbody tr:last-child > td {padding: 0}

/* documents table columns */
/* styles for table that lives only while drag and drop row for sorting */
.ui-datatable tbody td.dragHandleDocumentsColumn {padding-right: 4px !important}
.ui-datatable tbody td.nameDocumentColumn {width: 100%}
.ui-datatable tbody td.openButtonDocumentsColumn {padding-right: 0; border: none; width: 1%; white-space: nowrap}


/* ================== SAVED EMAIL DIALOG ======================= */

.savedEmailDialog .savedEmailDialogMessage {margin-bottom: 12px}


/* =============== SETTINGS CONFIRMATION DIALOG ==================== */

.confirmSettingsDialog .hiddenPassword {visibility: hidden; position: absolute; left:-99999px}


/* ================== IMPORT CONTACTS DIALOG ======================= */

.importContactDialog .contactFieldLabel {display: block; margin-bottom: 12px}
.importContactDialog .uploadContactButton {display: inline-block}


/* ================== DOCUMENT LINK DIALOG ======================= */

.documentLinkDialog .linkText {width: calc(100% - 44px)}
.documentLinkDialog .copyToClipboardButton {margin-left: 12px}


/* ================== TEMPLATE LINK DIALOG ======================= */

.templateLinkDialog .linkText {width: calc(100% - 44px)}
.templateLinkDialog .copyToClipboardButton {margin-left: 12px}


/* =============== REPLACE TEMPLATE FORM DIALOG ==================== */

.replaceTemplateFormDialog .dialogSecondaryButton {vertical-align: middle}

/* select file for upload button */
.replaceTemplateFormDialog form {display: inline-block}


/* ================== APPLY TEMPLATE DIALOG ======================= */

.applyTemplateDialog .noTemplatesMessage {display: block; font-weight: 500; text-align: center; margin-top: 35px; margin-bottom: 15px}

.applyTemplateList.ui-datatable table {table-layout: auto}
.applyTemplateList tbody tr {height: 48px}

/* table columns */
.applyTemplateList .templateName {overflow-wrap: break-word}
.applyTemplateList .templateType {width: 80px}
.applyTemplateList .templateActions {width: 76px}

/* ================== MOVE TO FOLDER DIALOG ======================= */

.moveToFolderDialog {min-width: 500px}
.moveToFolderDialog .folderTree .ui-tree-toggler {font-size: 12px}
.folderIcon {background: center/contain no-repeat url("/online/javax.faces.resource/folder-solid.svg.xhtml?ln=icons");width: 20px;height:20px}


/* ================== AUDIT DIALOG ======================= */

.auditEvents thead tr {text-transform: uppercase; font-size: 11px}
.auditEvents tbody tr {height: 48px}


/* =============== ADD TEXT TO FIELDS DIALOG ==================== */

.addTextToFieldsDialog .ui-dialog-content {max-height: calc(100dvh - 178px)}


/* =============== STATUS DIALOG ==================== */

.ui-dialog.statusDialog {box-shadow: none; position: fixed}
.ui-dialog.statusDialog .ui-dialog-titlebar {display: none}
.ui-dialog.statusDialog .ui-dialog-content {background-color: transparent}

.center-container {display: flex; justify-content: center; align-items: center}
.spinner-message {color: white; font-size: 12px}
.p-progress-spinner {position: absolute; inset: 0}
.p-progress-spinner-svg {animation: p-progress-spinner-rotate 2s linear infinite; width: 125px; height: 125px; transform-origin: center center; position: absolute}
.p-progress-spinner-circle {stroke-dasharray: 89,200; stroke-dashoffset: 0; stroke: var(--blue-400); animation: p-progress-spinner-dash 1.5s ease-in-out infinite}
@keyframes p-progress-spinner-rotate {to{transform: rotate(360deg)}}
@keyframes p-progress-spinner-dash {0%{stroke-dasharray: 1,200; stroke-dashoffset: 0} 50%{stroke-dasharray: 89,200; stroke-dashoffset: -35px} to{stroke-dasharray: 89,200; stroke-dashoffset: -124px}}


/* =============== CUSTOM SVG ICONS ==================== */

.custom-icon {background-color: var(--gray-600);width:24px;height:24px;padding:4px 2px;
    -webkit-mask-position: center;mask-position: center;
    -webkit-mask-origin: content;mask-origin: content-box;
    -webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;mask-size: 100% 100%;
    display: inline-block;vertical-align: middle}
.custom-icon:hover {background-color: var(--blue-400)}
.ui-link:hover .custom-icon {background-color: var(--blue-400)}
.custom-icon.ci-red {background-color: var(--red-500)}
.custom-icon.ci-green {background-color: var(--green-700)}

.custom-icon.ci-envelope {-webkit-mask-image: url("/online/javax.faces.resource/envelope.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/envelope.svg.xhtml?ln=icons")}
.custom-icon.ci-envelope-open {-webkit-mask-image: url("/online/javax.faces.resource/envelope-open.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/envelope-open.svg.xhtml?ln=icons")}
.custom-icon.ci-envelopes {-webkit-mask-image: url("/online/javax.faces.resource/envelopes.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/envelopes.svg.xhtml?ln=icons")}
.custom-icon.ci-ban {-webkit-mask-image: url("/online/javax.faces.resource/ban.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/ban.svg.xhtml?ln=icons")}
.custom-icon.ci-circle-check {-webkit-mask-image: url("/online/javax.faces.resource/circle-check.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/circle-check.svg.xhtml?ln=icons")}
body .ui-message.ui-message-info .ui-message-info-icon,
body .ui-growl .ui-growl-item-container.ui-growl-info .ui-growl-image,
.custom-icon.ci-circle-check-solid {-webkit-mask-image: url("/online/javax.faces.resource/circle-check-solid.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/circle-check-solid.svg.xhtml?ln=icons")}
body .ui-message.ui-message-error .ui-message-error-icon,
body .ui-growl .ui-growl-item-container.ui-growl-error .ui-growl-image,
.custom-icon.ci-circle-xmark-solid {-webkit-mask-image: url("/online/javax.faces.resource/circle-xmark-solid.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/circle-xmark-solid.svg.xhtml?ln=icons")}
.custom-icon.ci-folder {-webkit-mask-image: url("/online/javax.faces.resource/folder.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/folder.svg.xhtml?ln=icons")}
.custom-icon.ci-folder-tree {-webkit-mask-image: url("/online/javax.faces.resource/folder-tree.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/folder-tree.svg.xhtml?ln=icons")}
.custom-icon.ci-file-lines {-webkit-mask-image: url("/online/javax.faces.resource/file-lines.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/file-lines.svg.xhtml?ln=icons")}
.custom-icon.ci-user-plus {-webkit-mask-image: url("/online/javax.faces.resource/user-plus.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/user-plus.svg.xhtml?ln=icons")}
.custom-icon.ci-user-minus {-webkit-mask-image: url("/online/javax.faces.resource/user-minus.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/user-minus.svg.xhtml?ln=icons")}
.custom-icon.ci-pen-to-square {-webkit-mask-image: url("/online/javax.faces.resource/pen-to-square.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/pen-to-square.svg.xhtml?ln=icons")}
.custom-icon.ci-layer-group {-webkit-mask-image: url("/online/javax.faces.resource/layer-group.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/layer-group.svg.xhtml?ln=icons")}
.custom-icon.ci-user-group {-webkit-mask-image: url("/online/javax.faces.resource/user-group.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/user-group.svg.xhtml?ln=icons")}
.custom-icon.ci-gear {-webkit-mask-image: url("/online/javax.faces.resource/gear.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/gear.svg.xhtml?ln=icons")}
.custom-icon.ci-comment-check {-webkit-mask-image: url("/online/javax.faces.resource/comment-check.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/comment-check.svg.xhtml?ln=icons")}
.custom-icon.ci-arrow-right-from-bracket {-webkit-mask-image: url("/online/javax.faces.resource/arrow-right-from-bracket.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/arrow-right-from-bracket.svg.xhtml?ln=icons")}
.custom-icon.ci-file-import {-webkit-mask-image: url("/online/javax.faces.resource/file-import.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/file-import.svg.xhtml?ln=icons")}
.custom-icon.ci-trash-can {-webkit-mask-image: url("/online/javax.faces.resource/trash-can.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/trash-can.svg.xhtml?ln=icons")}
.custom-icon.ci-cloud-arrow-down {-webkit-mask-image: url("/online/javax.faces.resource/cloud-arrow-down.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/cloud-arrow-down.svg.xhtml?ln=icons")}
.custom-icon.ci-layer-plus {-webkit-mask-image: url("/online/javax.faces.resource/layer-plus.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/layer-plus.svg.xhtml?ln=icons")}
.custom-icon.ci-pen-field {-webkit-mask-image: url("/online/javax.faces.resource/pen-field.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/pen-field.svg.xhtml?ln=icons")}
.custom-icon.ci-pen {-webkit-mask-image: url("/online/javax.faces.resource/pen.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/pen.svg.xhtml?ln=icons")}
.custom-icon.ci-share {-webkit-mask-image: url("/online/javax.faces.resource/share.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/share.svg.xhtml?ln=icons")}
.custom-icon.ci-clock {-webkit-mask-image: url("/online/javax.faces.resource/clock.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/clock.svg.xhtml?ln=icons")}
.custom-icon.ci-clock-rotate-left {-webkit-mask-image: url("/online/javax.faces.resource/clock-rotate-left.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/clock-rotate-left.svg.xhtml?ln=icons")}
.custom-icon.ci-user-check {-webkit-mask-image: url("/online/javax.faces.resource/user-check.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/user-check.svg.xhtml?ln=icons")}
.custom-icon.ci-user-xmark {-webkit-mask-image: url("/online/javax.faces.resource/user-xmark.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/user-xmark.svg.xhtml?ln=icons")}
.custom-icon.ci-magnifying-glass {-webkit-mask-image: url("/online/javax.faces.resource/magnifying-glass.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/magnifying-glass.svg.xhtml?ln=icons")}
.custom-icon.ci-lock-regular {-webkit-mask-image: url("/online/javax.faces.resource/lock-regular.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/lock-regular.svg.xhtml?ln=icons")}
.custom-icon.ci-lock-solid {-webkit-mask-image: url("/online/javax.faces.resource/lock-solid.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/lock-solid.svg.xhtml?ln=icons")}
.custom-icon.ci-floppy-disk {-webkit-mask-image: url("/online/javax.faces.resource/floppy-disk.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/floppy-disk.svg.xhtml?ln=icons")}
.custom-icon.ci-clone {-webkit-mask-image: url("/online/javax.faces.resource/clone.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/clone.svg.xhtml?ln=icons")}
.custom-icon.ci-copy {-webkit-mask-image: url("/online/javax.faces.resource/copy.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/copy.svg.xhtml?ln=icons")}
.custom-icon.ci-chevrons-up {-webkit-mask-image: url("/online/javax.faces.resource/chevrons-up.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/chevrons-up.svg.xhtml?ln=icons")}
.custom-icon.ci-chevrons-down {-webkit-mask-image: url("/online/javax.faces.resource/chevrons-down.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/chevrons-down.svg.xhtml?ln=icons")}
.custom-icon.ci-arrow-up-right-from-square {-webkit-mask-image: url("/online/javax.faces.resource/arrow-up-right-from-square.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/arrow-up-right-from-square.svg.xhtml?ln=icons")}
.custom-icon.ci-file-slash {-webkit-mask-image: url("/online/javax.faces.resource/file-slash.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/file-slash.svg.xhtml?ln=icons")}
.custom-icon.ci-rotate {-webkit-mask-image: url("/online/javax.faces.resource/rotate.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/rotate.svg.xhtml?ln=icons")}
.custom-icon.ci-message-lines {-webkit-mask-image: url("/online/javax.faces.resource/message-lines.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/message-lines.svg.xhtml?ln=icons")}
.custom-icon.ci-paperclip {-webkit-mask-image: url("/online/javax.faces.resource/paperclip.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/paperclip.svg.xhtml?ln=icons")}
.custom-icon.ci-bars {-webkit-mask-image: url("/online/javax.faces.resource/bars.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/bars.svg.xhtml?ln=icons")}
.custom-icon.ci-ellipsis-vertical {-webkit-mask-image: url("/online/javax.faces.resource/ellipsis-vertical.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/ellipsis-vertical.svg.xhtml?ln=icons")}
.custom-icon.ci-grip-dots-vertical {-webkit-mask-image: url("/online/javax.faces.resource/grip-dots-vertical.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/grip-dots-vertical.svg.xhtml?ln=icons")}

body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check,
.custom-icon.ci-checkmark {-webkit-mask-image: url("/online/javax.faces.resource/checkmark.svg.xhtml?ln=icons");mask-image: url("/online/javax.faces.resource/checkmark.svg.xhtml?ln=icons")}
.custom-icon.ci-google-drive {background: url("/online/javax.faces.resource/google-drive.svg.xhtml?ln=icons") no-repeat;background-size: contain}
.custom-icon.ci-dropbox {background: url("/online/javax.faces.resource/dropbox.svg.xhtml?ln=icons") no-repeat;background-size: contain}

body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon .ui-icon-extlink {background: url("/online/javax.faces.resource/arrow-up-right-and-arrow-down-left-from-center.svg.xhtml?ln=icons") no-repeat center;width: 12px}
body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon .ui-icon-newwin {background: url("/online/javax.faces.resource/arrow-down-left-and-arrow-up-right-to-center.svg.xhtml?ln=icons") no-repeat center;width: 12px}


/* =============== MOBILE DESIGN ==================== */

@media screen and (max-width: 900px) {
    .navigation {top: 0; z-index: 999; height: 100%; transform: translateX(-100%)}
    .navigation.active {transform: translateX(0)}
    .navigationActions.ui-panel .ui-panel-titlebar-icon {display: block; margin-top: -9px !important; margin-right: -9px !important}
    .userMenu {display: flex; max-width: calc(100% - 52px); overflow: hidden; flex-shrink: 2; min-width: 141px}
    .userMenu .toolbarNeedMoreSeatsButton,
    .userMenu .toolbarUpgradeButton {overflow: hidden}
    .userMenu .toolbarNeedMoreSeatsButton .ui-button-text,
    .userMenu .toolbarUpgradeButton .ui-button-text {overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
    .userMenu .userActionsMenu {overflow: hidden; line-height: 0}
    .userMenu .userActionsMenuButton {max-width: 100%}
    .userMenu .userActionsMenuButton.ui-button .ui-button-text {overflow: hidden; text-overflow: ellipsis}
    .mainHeader {margin-top: 8px}
    .mainHeader .pageSubtitle {display: none}
    .mainHeader .pageFilters {max-width: 100%; width: min-content}
    .navigationMenuOpenButton.ui-button.ui-button-icon-only {display: inline-block; width: 46px; flex-shrink: 0; margin-left: -16px}
    .main {margin-left: 0}
    .navigationLayoutMask {background-color: rgba(0, 0, 0, .1)}
    .navigationLayoutMask.active {z-index: 998; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, .4); transition: background-color .2s}
    .ui-datatable table {table-layout: auto}
    .teamDocumentList .teamDocumentName {width: 18%}
    .teamDocumentList .teamDocumentOwner {max-width: 110px}
    .teamDocumentList .teamDocumentName .ui-column-customfilter {margin-right: 12px}
    .teamDocumentList .authorEmailFilter {width: 100%}
    .teamDocumentList table {min-width: 500px}
    .contactList .contactEmail {max-width: 180px}
    .contactList .contactName {max-width: 180px}
    .settingsContent {padding: 16px}
    .pageControls.settings {padding: 0 16px}
    body .ui-paginator {display: flex; flex-wrap: wrap; justify-content: center; row-gap: 8px}
    body .ui-paginator .ui-paginator-pages {margin: 0}
    body .ui-paginator .ui-paginator-rpp-options {field-sizing: content}
    body .ui-datatable.datatable-panel .ui-datatable-tablewrapper {padding: 16px}
    body .ui-datatable thead th {padding: 0 8px 7px 8px}
    body .ui-datatable .ui-datatable-data > tr > td {padding: 7.5px 8px}
}

/* hide paginator elements to fit into narrow screen */
@media screen and (max-width: 390px) {
    body .ui-paginator .ui-paginator-prev {margin-left: 0}
    body .ui-paginator .ui-paginator-first,
    body .ui-paginator .ui-paginator-last {display: none}
}

/* hide email for user menu button if there is not enough space for other buttons */
@media screen and (max-width: 550px) {
    .userMenu .userActionsMenu {flex-shrink: 0}
    .userMenu .userActionsMenuButton.ui-button .ui-button-text {visibility: hidden; width: 0; padding-left: 30px}
}

/* place pageFilters above pageControls when they did not fit into one line */
@media screen and (max-width: 800px), screen and (min-width: 901px) and (max-width: 1050px) {
    .mainHeader .pageControlsAndFilters.documentListControlsAndFilters {flex-direction: column-reverse}
    .documentInvitation {overflow: hidden}

    :root {--header-height: 192px}
}

/* shift the document and folder buttons to the following line */
@media screen and (max-width: 650px) {
    .documentList .documentListItemWrapper > .documentRow {padding-bottom: 56px}
    .documentList .documentListItemWrapper > .documentRow .documentDetails {padding-right: 0}
    .documentList .documentListItemWrapper > .documentRow .documentButtons {position: absolute; left: 0; bottom: 0; width: calc(100% - 28px); padding: 6px 0; margin-left: 16px; border-top: solid 1px var(--gray-200)}
}

@media screen and (max-width: 600px) {
    .mainHeader .pageControlsAndFilters.templateListControlsAndFilters {flex-direction: column-reverse}

    :root {--header-height: 192px}
}

/* show the images for the standard and extended signatures on the following line when they did not fit into one line */
@media screen and (max-width: 500px) {
    .settingsContent .signatureType {grid-template-columns: repeat(2, min-content)}
    .settingsContent .radioButtonGroup {grid-column-start: 1; grid-column-end: 3}
}

@media screen and (max-height: 400px) {
    div:has(>.ui-datagrid-content-empty, >.ui-datalist-empty-message) {line-height: calc(100dvh - var(--header-height) - 24px); background: none !important}
    .ui-datagrid-content-empty, .ui-datalist-empty-message {vertical-align: middle}
}