/*****************************************************************************************************************/
/*                                                PRIME FACES                                                    */
/*****************************************************************************************************************/

/* ============================ COMMON ===================== */

/* font */
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600);
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {font-family: 'Open Sans',sans-serif}
.ui-widget {font-size: 90%}

/* input fields */
.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/* file upload */
.ui-fileupload-content {display: none}
.ui-fileupload-buttonbar {background: none; border: none; padding: 0px; margin-top: 0px}
.ui-fileupload-buttonbar.ui-widget-header {background: none}
.ui-fileupload-buttonbar .ui-button .ui-icon {display: none}
.ui-fileupload-buttonbar .ui-button-text-icon-left .ui-button-text {padding-left: 1em}

/* headers and content of dialogs and other widgets */
.ui-widget-header {text-transform: uppercase; font-weight: 500}
.ui-column-title {text-transform: uppercase; font-weight: 500}

/* padding in dialog */
.ui-dialog .ui-dialog-content {padding: 1em 1.5em}

/* corners */
.ui-corner-all {-webkit-border-radius: 2px; border-radius: 2px}
.ui-corner-top {-webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px}
.ui-corner-left {-webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px}
.ui-corner-right {-webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px}

/* growl */
.ui-growl {width: 400px; left: 20px; top: 50px}
.ui-growl .ui-growl-message {float: none; max-width: 310px; width: 100%; margin-left: 50px}

/* background behind modal dialog */
.ui-widget-overlay {
    opacity: .4;
    filter: Alpha(Opacity=40);
}

/* message icons */
.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
    margin-top: 1px;
}

/* empty data table */
.ui-datatable-empty-message {font-weight: 500; text-align: center; line-height: 100px}

/* hover pointer for tree */
.ui-tree .ui-tree-container .ui-treenode .ui-treenode-content .ui-treenode-label {cursor: pointer}

/* placeholder text in fields */
::placeholder {color: #A0A0A0; opacity: 1}  /* Chrome, Firefox, Opera, Safari 10.1+ */
:-ms-input-placeholder {color: #A0A0A0}     /* Internet Explorer 10-11 */
::-ms-input-placeholder {color: #A0A0A0}    /* Microsoft Edge */

/* break word */
.break-word {
    -ms-word-break: break-all; /* old IE support */
    word-break: break-all; /* for IE and FF */
    word-break: break-word; /* for Chrome */
}


/* ========================== BUTTONS ============================== */

/* buttons */
.ui-button .ui-button-text {line-height: 1.4; text-transform: uppercase; white-space: nowrap; font-weight: 500}
.ui-menubutton .ui-button .ui-button-text {line-height: 1.4; text-transform: inherit; font-weight: 500}

/* buttons in all select boxes */
.ui-menu {width: auto; padding: 0px 10px 10px 10px}
.ui-menu .ui-menuitem {margin: 10px 0px 0px 0px; white-space: nowrap}  /* nowrap because of Safari */
.ui-menu .ui-menuitem button {width: 100%}
.ui-menu .ui-menuitem-link {width: 100%; padding: 0px}
.ui-menu .ui-menuitem-link .ui-menuitem-text {width: 100%}


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

/* ========================== COMMON ============================== */

/* body */
body {margin: 0px}

/* content */
.content {width: 100%; max-width: 1220px; margin: 0 auto; clear: both}

/* main */
.main {width: calc(100% - 227px); max-width: 1000px; min-width: 761px;
    margin-left: calc(220px); margin-right: 5px; padding-top: 15px;
    border-style: solid; border-width: 0 1px 1px 1px}

/* main header */
.mainHeader {padding: 0 0 12px 17px}
.mainHeader .pageHeader {display: flex; flex-direction: column}
.mainHeader .pageTitleAndControls {display: flex; justify-content: space-between}

/* page title and subtitle */
.mainHeader .pageTitle {font-size: 2em}
.mainHeader .pageSubtitle {padding-left: 3px; padding-top: 2px}

/* page filter indicators */
.mainHeader .pageFilterIndicators {padding-left: 3px; padding-top: 2px}

/* block for buttons in page header */
.mainHeader .pageControls {overflow: hidden}
.mainHeader .pageControls .paddingBetweenTitleAndControls {height: 20px}

/* block for filters in page header (search field, date range) */
.mainHeader .pageFilters {display: flex; flex-direction: column; justify-content: flex-end}

/* prevent Chrome outline */
*:focus {outline: 0}

/* 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}

/* search field */
.ui-inputfield.searchField {
    background: #fff url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) no-repeat right -10px center;
}
.ui-inputfield.searchField.x  {background-position: right 5px center}  /* (jQ) Show icon */
.ui-inputfield.searchField.onX {cursor: pointer}                        /* (jQ) hover cursor style */
.ui-inputfield.searchField::-ms-clear {display: none; width: 0; height: 0} /* Remove IE default X */


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

.navigation {float: left; width: 220px}
.navigationActions {float: right; width: 100%}

/* links */
.navigationLinks {margin-top: 30px}
.navigationLinks .templateLinks, .navigationLinks .bulkSendLinks, .navigationLinks .teamLinks {margin-top: 20px}
.navigationLinks .link {padding: 3px 0px 3px 20px; margin: 0px 0px; text-decoration: none; display: block}
.navigationLinks .link.header {font-weight: 500}
.navigationLinks .subLinks .link {padding-left: 30px}

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


/* ========================== TOOLBAR ============================== */

.toolbar {width: 100%; min-width: 985px; border-style: solid; border-width: 0 0 1px}
.toolbar .ui-menubutton .ui-button {min-width: 130px} /* width of the user menu (with email address) */
.toolbarContent {width: 100%; max-width: 1220px; min-width: 980px; margin: 0px auto}
.toolbarLogo {float: left; margin-left: 20px; height: 36px}
.toolbarButtons {float: right; margin-right: 5px}
.toolbarUpgrade {float: right; margin-right: 6px}
.upgradeButton {border-width: 1px; border-style: solid}


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

.navigationActions .uploadDocumentButton {margin-top: 29px}
.navigationActions .uploadDocumentButton .ui-fileupload-buttonbar .ui-button {width: 175px; height: 32px; margin-left: 20px; padding: 0px; border-width: 1px; border-style: solid}
.navigationActions .uploadDocumentButton .ui-fileupload-buttonbar .ui-button-text-icon-left .ui-button-text {padding: 0 0.5em 0 0.5em; display: inherit}
.navigationActions .uploadDocumentButton .ui-fileupload-buttonbar .ui-button-text {line-height: 32px}
.navigationActions .uploadDocumentButton .ui-fileupload-buttonbar .freeUploadTemplateButton {height: 34px} /* upload template button for free accounts, needs 2px more height */


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

.importFromCloud {margin-top: 15px}
.importFromCloud .importFromCloudButton.ui-button,
.importFromCloud .importFromCloudButton .ui-button {width: 177px; height: 34px; margin-left: 20px; text-transform: uppercase}

.cloudItem {display: inline-block; width: 145px; padding-left: 10px}
.cloudItem .cloudLink {display: inline-block; text-decoration: none; font-weight: normal; width: 100%}
.cloudItem .cloudImage {vertical-align: middle; width: 18px; height: 18px}
.cloudItem .cloudText {vertical-align: middle; margin-left: 20px; text-decoration: none}

/* link with this class is auto generated by prime faces, we absolutely don't need it */
.ui-menu .ui-menuitem-link.cloudLinkMenuItem {display: none}


/* ======================== SECTIONS ============================ */

.sectionHeader {display: block; text-transform: uppercase}
.sectionHeaderUnderline {border-width: 1px; border-style: solid; border-style: none none solid; margin: 5px 0px 15px 0px}


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

/* main */
.dialog {margin-top: 5px; margin-bottom: 5px}

/* panel */
.dialog .dialogPanel {width: 100%; padding-top: 5px}

/* section */
.dialog .dialogSectionPanel {display: block; margin-bottom: 20px }

/* grid */
.dialog .dialogGrid {border-collapse: collapse}

/* input */
.dialog .dialogInputPanel {display: block; margin-bottom: 10px}
.dialog .dialogInput {width: 98%; margin-bottom: 5px}
.dialog .dialogInputText {width: calc(100% - 10px); margin-bottom: 10px}
.dialog .dialogInputTextarea {width: calc(100% - 10px); margin-bottom: 5px; line-height: 1.2}
.dialog .dialogLabel {display: block; margin-bottom: 10px}

/* message */
.dialog .dialogMessagePanel {display: block; padding-top: 5px; padding-bottom: 5px; margin-bottom: 10px}

/* buttons */
.dialog .dialogButtonPanel {display: block; text-align: right}
.dialog .dialogSecondaryButton {margin-right: 8px}
.dialog .dialogButtonImage {vertical-align: middle; width: 18px; height: 18px}

/* subject and message panel */
.dialog .emailSubjectAndMessagePanel {display: block}
.dialog .emailSubjectAndMessagePanel .emailText {margin-top: 10px}

/* advanced panel */
.dialog .advancedPanel  {margin-bottom: 10px}
.dialog .advancedPanel .ui-accordion-header {border: none; text-transform: uppercase; padding-left: 1.2em; font-weight: 500}
.dialog .advancedPanel .ui-accordion-header .ui-icon {left: -0.3em}
.dialog .advancedPanel .ui-accordion-content {padding: 5px 17px}
.dialog .advancedPanel .ui-accordion-header {background: #fff; color: #2779AA}
.dialog .advancedPanel .ui-accordion-header.ui-state-active .ui-icon {background: url("/online/javax.faces.resource/blue_triangle.png.xhtml?ln=images")}

/* remind days */
.dialog .advancedPanel .remindSignersPanel {display: block; margin-bottom: 10px;}
.dialog .advancedPanel .remindSignersLabel {display: inline-block; margin-right: 8px}
.dialog .advancedPanel .remindDays {width: 100px; padding-left: 8px; padding-right: 8px; margin-right: 8px}
.dialog .advancedPanel .remindDaysMessage {margin-top: 5px; width: 365px}

/* valid till */
.dialog .advancedPanel .validTillPanel {display: block; margin-bottom: 10px}
.dialog .advancedPanel .validTillLabel {display: inline-block; margin-right: 8px}
.dialog .advancedPanel .validTillDays {width: 25px; padding-left: 8px; padding-right: 8px; margin-bottom: 5px}
.dialog .advancedPanel .validTillDaysMessage {width: 365px}

/* saved emails panel */
.dialog .savedEmailsPanel {display: block}
.dialog .savedEmailsPanel td {vertical-align: top}
.dialog .savedEmailsSelect {width: 246px}
.dialog .savedEmailsSelect .ui-selectonemenu {width: 246px !important; min-width: 246px !important}
.dialog .savedEmailsSelect .ui-selectonemenu .ui-corner-all {border-radius: 0px} /* fixes bug in FF: long strings not displayed */
.dialog .savedEmailsButton {margin: 0 0 0 4px; overflow: hidden; white-space: nowrap}
.dialog .savedEmailsSaveButton {min-width: 86px}
.dialog .savedEmailsDeleteButton {min-width: 94px}


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

/* ================== LOG IN / SIGN UP / RESET PASSWORD ======================= */

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

/* common */
.inputPanel {max-width: 420px; margin-left: auto; margin-right: auto; text-align: center}
.inputPanel .ui-panel-content {padding: 10px 20px}
.inputPanel .grid {text-align: left; margin: 0 auto; width: 100%}
.inputPanel .message {display: block; font-size: 1.8em; margin: 10px 0; text-align: center}
.inputPanel .formGrid {text-align: left; margin: 0 auto; width: 100%}
.inputPanel .inputText {width: calc(100% - 10px)}

/* log in  */
.inputPanel .buttonPanel {display: block; margin-top: 10px}
.inputPanel .logInButton {width: 140px; float: right}
.inputPanel .forgotPasswordLink {display: block; float: left; margin-top: 5px}
.inputPanel .noAccountLink {display: block; text-align:center; margin-top: 10px}

/* sign up */
.inputPanel .haveAccountAlreadyLink {display: block; text-align: center; margin-top: 10px}
.inputPanel .subscribeCheckbox {vertical-align: middle; width: 14px; height: 14px}
.inputPanel .subscribeLabel {font-size: 13px; vertical-align: middle}

/* expanded button */
.inputPanel .expandedButton {width: 100%; margin-top: 10px}

/* download document */
.downloadDocumentPanel .downloadDocumentButton {width: 100%; margin-top: 10px; margin-bottom: 6px}

/* google button */
.googleButtonDiv {margin: 30px auto 0px auto; text-align: center}
.googleButton {font-family: Roboto, Open Sans, sans-serif; font-weight: 500; line-height: 1.65; text-decoration: none; display: inline-block; cursor: pointer; border-radius: 3px; border-width: 1px; border-style: solid}
.googleButton .iconBackground {width: 18px; height: 18px; float: left; padding: 11px; border-radius: 2px}
.googleButton .iconBackground .icon {max-height: 18px; vertical-align: inherit; max-width: 100%; height: auto; font-style: italic; border-style: none}
.googleButton .iconBackground .icon.img {vertical-align: bottom}
.googleButton .text {margin-left: 40px; padding: 8px}


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

/* header settings */
.settings .settingsHeader {text-decoration: none; text-transform: uppercase}
.settings .settingsHeaderFirst {margin-left: 8px}
.settings .settingsHeaderNext {margin-left: 95px}
.settings .settingsHeaderLast {margin-left: 110px}
.settings .settingsHeaderActive {font-weight: 500}

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

/* content */
.settingsContent {margin: 20px 25px 30px 25px}
.settingsContent .settingsPanel {width: 550px; border-collapse: collapse}
.settingsContent .settingsGroupPanel {width: 100%; margin-bottom: 10px}
.settingsContent .settingsGroupItemPanel {display: block; margin-bottom: 10px}
.settingsContent .settingsItemPanel {display: block; margin-bottom: 20px}
.settingsContent .settingsLabel {display: block; margin-bottom: 10px}
.settingsContent .settingsText {width: 98%; margin-bottom: 5px}
.settingsContent .settingsCustomSizeText {display: block; margin-bottom: 5px}
.settingsContent .defaultHint {display:block; margin-bottom: 5px; margin-left: 3px; font-size: 0.8em; color: #909090}
.settingsContent .settingsDoubleText {width: calc(50% - 20px); margin-bottom: 5px;  margin-right: 20px}
.settingsContent .settingsDoubleText.last {margin-right: 0px}
.settingsContent .hiddenPassword {position: absolute; height: 0px; overflow: hidden}
.settingsContent .checkbox {vertical-align: middle}
.settingsContent .checkboxMessage {margin-left: 8px}
.settingsContent .radioButtonsBlock {border-collapse: separate; border-spacing: 8px}
.settingsContent .radioButtonsBlock label {margin-left: 8px}
.settingsContent .topSaveButton {margin-top: 30px; margin-bottom: 20px}
.settingsContent .errorForCustomText {margin-top: 5px}

/* remind signers */
.settingsContent .remindDays {width: 100px; margin-left: 8px}
.settingsContent .remindDaysMessage {width: 380px; margin-top: 5px}

/* signature appearance */
.settingsContent .radioButtonColumn {width: 130px}
.settingsContent .radioButtonColumn label {margin-left: 8px; vertical-align: middle}
.settingsContent .signatureImage {vertical-align: middle; padding-right: 10px}
.settingsContent .signatureExtended {border-spacing: 0px}
.settingsContent .signatureExtended td {padding: 0px}
.settingsContent .signatureExtension {font-family:Arial; font-size: 0.9em; line-height: 1em; border-spacing: 0px}

/* logo */
.settingsContent .logoPanel.top {margin-bottom: 20px}
.settingsContent .logoPanel.bottom {margin-bottom: 30px}
.settingsContent .logoPanel {margin-bottom: 20px}
.settingsContent .labelColumn {width: 150px}
.settingsContent .imageColumn {width: 175px}
.settingsContent .logoImage {max-height: 75px; max-width: 125px}

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

/* signature types */
.settingsContent .signatureTypesCheckboxPanel {display: block; margin-bottom: 12px}
.settingsContent .signatureTypesCheckbox {border-spacing: 8px; border-collapse: separate}
.settingsContent .signatureTypesCheckbox.ui-selectmanycheckbox label {margin: 0px 50px 0px 5px}

/* integrations settings */
.settingsContent .integrationGroupPanel {width: 100%;}
.settingsContent .integrationLabel {display: block; margin-right: 140px}
.settingsContent .integrationItemPanel {display: block; width:100%; margin-bottom: 50px}
.settingsContent .integrationButton {top: 35px; float: right}

/* API settings */
.purchaseApiCreditsPanel {margin: 25px 0px 20px 0px}
.purchaseApiCreditsPanel .availableCredits {margin-left: 5px}
.settingsContent .settingsApiMode {margin-left: 3px; margin-right: 1px; font-weight: 500}
.settingsContent .upgradeAccountLink {text-decoration: none}
.settingsContent .creditCountInput {margin-right: 10px}
.settingsContent .creditCountInput .ui-inputfield {width: 80px}
.settingsContent .creditCountMessage {margin-top: 5px}


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

.addContactButton {margin: 30px 0 0 15px}

.contactList {margin: 5px 15px 30px 15px}
.contactList tbody tr, .contactList thead tr {height: 47px}
.contactList thead th {background: none; text-align: left; border-bottom: 2px solid}

/* table footer */
.contactList .ui-widget-header {border: none; margin-top: 20px; margin-bottom: 25px}

/* contact table columns */
.contactList .contactActions {width: 130px}
.contactList .actionsButton .ui-button .ui-button-text {text-transform: uppercase}


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

/* folder path */
.folderPath {margin-bottom: 0px;
    display: inline-block; /* required for word breaking */
    -ms-word-break: break-all; /* old IE support */
    word-break: break-all; /* for IE and FF */
    word-break: break-word; /* for Chrome */
}
.folderPath .folderSeparator {margin: 0 7px; font-size: 1.2em}
.folderPath .folderLink {text-decoration: none}

/* reset filters */
.pageFilterIndicators .resetFiltersLink {text-decoration: none}

/* header buttons */
.pageControls .headerButton {margin-right: 10px}
.pageControls .documentCheckbox {margin-right: 11px; vertical-align: middle}
.pageControls .headerMoreButton {margin-right: 10px}
.pageControls .headerMoreButton .ui-button .ui-button-text {text-transform: uppercase}

/* document time range select menu */
.pageFilters .documentDateRangeSelect {margin-right: 16px; margin-bottom: 10px}
.pageFilters .documentDateRangeSelect .ui-selectonemenu-label {height: 21px}
.pageFilters .documentDateRangeSelect .ui-selectonemenu-trigger {padding-right: 4px}
.pageFilters .documentDateRangeSelect .ui-selectonemenu-trigger .ui-icon {margin-top: 6px}
/* clearable search field, copied from http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text */
.pageFilters .documentNameFilter {width: 200px; height: 21px; float: right; margin-right: 16px; padding-right: 18px}

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

/* data grid customization */
.documentList .ui-datagrid-header {display: none} /* table header */
.documentList .ui-datagrid-data {border-spacing: 0px}
.documentList .ui-datagrid-column {padding-top: 0px; padding-bottom: 0px;}
.documentList .ui-widget-content {border: none} /* table content */
.documentList .ui-widget-header {border: none; margin-top: 15px; margin-bottom: 25px} /* table footer */

/* document choice */
.documentChoice {vertical-align: top}
.documentChoice .documentCheckbox {padding-left: 11px; padding-top: 2px}

/* document choice */
.documentImage {padding-top: 3px; padding-left: 8px; padding-right: 15px; vertical-align: top; position: relative}
.documentImage img {border-width: 1px; border-style: solid; border-radius: 1px}
.documentImage img.set {margin-top: 6px}
.childDocument {position: absolute; width: 60px; height: 76px; border-width: 1px; border-style: solid; border-radius: 1px}
.first.childDocument {top: 5px; left: 14px}
.second.childDocument {top: 7px; left: 11px}

/* document data */
.documentData {width: 100%; vertical-align: top}
.documentDetailsWithButtons {width: 100%; border-collapse: collapse}
.documentDetailsWithButtons table {border-collapse: collapse}
.documentDetailsWithButtons td {padding: 0; line-height: 1.4em}
.documentDetailsWithButtons td.documentDetails {padding-right: 10px}
.documentName {
    display: inline-block; /* required for word breaking */
    margin-bottom: 2px;
    -ms-word-break: break-all; /* old IE support */
    word-break: break-all; /* for IE and FF */
    word-break: break-word; /* for Chrome */
}
.documentName, .ui-widget.documentName {font-weight: 500; text-decoration: none}
.folderRow {border-spacing: 0px}
.folderRow .areaForDocuments {padding: 0px}
.folderRow .documentChoice .documentCheckbox {padding-top: 7px; padding-left: 13px}
.folderRow .folderImage {padding-top: 3px; padding-left: 10px; padding-right: 8px; vertical-align: top; position: relative}
.folderRow .documentName {padding-top: 2px} /* we need to vertically center folder name in relation to folder image */
.folderRow .documentData {padding-top: 2px}
.folderRow .documentMoreButton {margin-left: 0px; margin-right: 12px}
.documentUpdated {white-space: nowrap}
.documentHiddenDate {visibility: hidden; display: inline-block; width: 0px}
.documentAreaTop {padding-bottom: 8px}
.documentAreaBottom {padding-bottom: 7px}

/* buttons */
.documentButtons {white-space: nowrap; vertical-align: top; text-align: right}
.documentButton {margin-left: 0; margin-right: 6px}
.documentMoreButton {margin-left: 0px; margin-right: 10px}
.documentMoreButton .ui-button .ui-button-text {text-transform: uppercase}

/* list of invitations */
.documentInvitations {margin-top: 7px}
.documentInvitation {min-width: 265px; display: inline-block; margin: 3px 8px 3px 2px; white-space: nowrap}
.documentInvitationImage {vertical-align: middle; margin-left: 2px; margin-right: 5px}
.documentInvitationEmail {vertical-align: middle}
.documentInvitationActions {vertical-align: middle}
.documentInvitationActions .ui-button {border-width: 1px; border-style: solid; font-weight: normal; outline: none; margin-left: -1.9em}
.documentInvitationActions .ui-button-text {padding: 0.2em 1.8em 0.2em 1.8em}
.documentInvitationActions .ui-button .ui-icon {background: url("/online/javax.faces.resource/grey_triangle.png.xhtml?ln=images")}

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

/* empty document list */
.ui-datagrid-content-empty {font-weight: 500; text-align: center; vertical-align: middle; line-height: 160px}

/* 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: 17px;}

.folderSeparatorMiddle {
    border-color: #E5E5E5;
    border-width: 1px;
    border-style: solid;
    border-style: none none solid;
    margin: 0px 0px 0px 0px;
    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: 9px;
    margin: 0px;
    width: 100%;
}


/* ================== PROVIDE DETAILS FOR TEMPLATE LINK ======================= */

.provideDetailsForTemplateLinkPanel .personalDetailsPanel {display: block; margin-bottom: 10px}
.provideDetailsForTemplateLinkPanel .signerDetailsPanel {display: block; margin-bottom: 10px}
.provideDetailsForTemplateLinkPanel .message {display: block; margin-bottom: 20px}

/* signers table */
.provideDetailsForTemplateLinkPanel .signersTable thead {display: none}
.provideDetailsForTemplateLinkPanel .signersTable tbody tr {height: 42px}
.ui-datatable tbody td.signerDetails {padding: 0px}

.provideDetailsForTemplateLinkPanel .label {display: block; margin-bottom: 10px}
.provideDetailsForTemplateLinkPanel .inputText {width: calc(100% - 10px); margin-bottom: 10px}
.provideDetailsForTemplateLinkPanel .expandedButton {margin-top: 0px}


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

.newBulkSendPanel {margin: 10px 0px 10px 20px}
.newBulkSendPanel .availableCredits {margin-left: 5px}
.newBulkSendPanel .purchaseMoreLink {text-decoration: none}

.bulkSendList {margin: 5px 15px 30px 15px}
.bulkSendList tbody tr, .teamList thead tr {height: 47px}
.bulkSendList thead th {background: none; text-align: left; vertical-align: top; padding-bottom: 10px; border-bottom-width: 2px; border-bottom-style: solid}

/* table footer */
.bulkSendList .ui-widget-header {border: none; margin-top: 20px; margin-bottom: 25px}

/* bulk send table columns */
.bulkSendList .title {
    width: 35%;
    -ms-word-break: break-all; /* old IE support */
    word-break: break-all; /* for IE and FF */
    word-break: break-word; /* for Chrome */
}
.bulkSendList .titleLink {text-decoration: none}
.bulkSendList .actions {width: 130px}
.bulkSendList .actionsButton .ui-button .ui-button-text {text-transform: uppercase}
.bulkSendList .bulkSendHiddenDate {visibility: hidden; display: inline-block; width: 0}


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

.newTeamMemberPanel {margin: 10px 0px 10px 20px}
.newTeamMemberPanel .availableSeats {margin-left: 5px}
.newTeamMemberPanel .purchaseMoreLink {text-decoration: none}

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

/* table footer */
.teamList .ui-widget-header {border: none; margin-top: 20px; margin-bottom: 25px}

/* team document table header */
.teamList thead th.teamActions, .teamList thead th.teamDocumentModified, .teamList thead th.teamDocumentStatus {padding-bottom: 18px; vertical-align: bottom}

/* team document table columns */
.teamList .email {
    width: 40%;
    -ms-word-break: break-all; /* old IE support */
    word-break: break-all; /* for IE and FF */
    word-break: break-word; /* for Chrome */
}
.teamList .assignSeatLink {text-decoration: none}
.teamList .teamActions {width: 130px}
.teamList .actionsButton .ui-button .ui-button-text {text-transform: uppercase}
.teamList .teamDocumentModified {width: 150px}
.teamList .teamDocumentStatus {width: 140px}
.teamList .teamDocumentName, .teamList .teamDocumentOwner {
    -ms-word-break: break-all; /* old IE support */
    word-break: break-all; /* for IE and FF */
    word-break: break-word; /* for Chrome */
}
.teamList .teamDocumentName a {text-decoration: none}
.teamList .teamDocumentHiddenDate {visibility: hidden; display: inline-block; width: 0}

/* filter fields */
.teamList .authorEmailFilter {min-width: calc(100% - 40px) !important; width: calc(100% - 40px) !important; margin: 10px 0px 0px -5px}
.teamList .authorEmailFilter .ui-selectonemenu-trigger {padding-right: 4px}
.teamList .authorEmailFilter .ui-selectonemenu-trigger .ui-icon {margin-top: 5px}
.teamList .teamDocumentNameFilter {width: calc(100% - 20px); margin: 10px 0px 0px -5px}


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

.purchaseSubscription {text-align: center; overflow: auto; margin: 25px 55px 30px 55px;}
.purchaseSubscription .purchasePanel {width: 42%; border-style: solid; border-width: 1px; padding: 30px 20px}
.purchaseSubscription .purchasePanel.annually {float: left}
.purchaseSubscription .purchasePanel.monthly {float: right}
.purchaseSubscription .subscriptionType {font-size: 1.3em; font-weight: bold}
.purchaseSubscription .subscriptionCount {margin-top: 20px}
.purchaseSubscription .subscriptionCountInput {margin-left: 5px; margin-right: 10px}
.purchaseSubscription .subscriptionCountInput .ui-inputfield {width: 50px}
.purchaseSubscription .subscriptionPrice {margin-top: 20px; font-size: 1.3em; font-weight: bold}
.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 .subscriptionPricePerUser {margin-top: 2px}
.purchaseSubscription .newSubscriptionButton {width: 200px; height: 40px; line-height: 32px; margin-top: 25px; font-size: 1.3em}
.purchaseSubscription .newSubscriptionButton .ui-button-text {padding: 0 0.5em 0 0.5em}

.subscriptionList {margin: 5px 15px 30px 15px; clear: both}
.subscriptionList tbody tr, .subscriptionList thead tr {height: 47px}
.subscriptionList thead th {background: none; text-align: left; border-bottom-width: 2px; border-bottom-style: solid}

/* table footer */
.subscriptionList .ui-widget-header {border: none; margin-top: 20px; margin-bottom: 25px}

/* subscriptions table columns */
.subscriptionList .email {
    width: 40%;
    -ms-word-break: break-all; /* old IE support */
    word-break: break-all; /* for IE and FF */
    word-break: break-word; /* for Chrome */
}
.subscriptionList .subscriptionActions {width: 150px}

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


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

/* header */
.paymentAvangatePanel {width: 890px; margin: 30px auto; background: none}
.paymentAvangatePanel .upgradeMessage {margin: 20px auto 10px auto; text-align: center; font-size: 2.5em}
.paymentAvangatePanel .paymentMethods {display: block; margin: 0px auto}

/* purchase subscriptions */
.paymentAvangatePanel .purchaseSubscription {margin: 55px 55px 45px 55px}

/* purchase credits */
.purchaseCredits {text-align: center; width: 350px; border-style: solid; border-width: 1px; margin: 55px auto 45px auto; padding: 30px 20px}
.purchaseCredits .selectNumberOfCredits {font-size: 1.3em; font-weight: bold}
.purchaseCredits .creditCount {margin-top: 20px}
.purchaseCredits .creditCountMessages {margin-top: 5px}
.purchaseCredits .creditCountInput {margin-right: 10px}
.purchaseCredits .creditCountInput .ui-inputfield {width: 80px}
.purchaseCredits .creditPrice {margin-top: 20px; font-size: 1.3em; font-weight: bold}
.purchaseCredits .pricePerCredit {margin-top: 2px}
.purchaseCredits .purchaseNowButton {width: 200px; height: 40px; line-height: 32px; margin-top: 25px; font-size: 1.3em}
.purchaseCredits .purchaseNowButton .ui-button-text {padding: 0 0.5em 0 0.5em}

.purchaseCredits .apiSettingsLink {text-decoration: none}
.purchaseCredits .autoPurchasePanel {margin-top: 20px}
.purchaseCredits .autoPurchaseItemPanel {margin-top: 10px}
.purchaseCredits .message {text-align: left; margin-top: 5px}
.purchaseCredits .autoPurchaseMessagePanel {display: block; margin-bottom: 30px}

.cannotEnableApiAutoPurchaseDialog .dialogMessagePanel {text-align: center; margin-bottom: 20px}

/* need more seats? */
.paymentAvangatePanel .needMoreSeatsPanel {clear: both; padding-top: 45px; text-align: center}
.paymentAvangatePanel .needMoreSeatsPanel .message {font-size: 1.3em; font-weight: bold}
.paymentAvangatePanel .needMoreSeatsPanel .newSubscriptionButton {margin-left: 20px; margin-top: 0px}

/* plans */
.paymentAvangatePanel .ourPlansMessage {margin: 50px auto 20px auto; text-align: center; font-size: 2.5em}
.ui-panelgrid.priceTable {margin: 20px auto; width: 820px; font-size: 1.2em}
.priceTable .plan {font-weight: bold}
.priceTable .feature {padding: 15px 20px}
.priceTable .value {text-align: center; padding: 15px 20px; width: 240px}

/* questions */
.priceQuestions {margin: 40px auto 20px auto; width: 820px; font-size: 1.2em}
.priceQuestions .question {width: 50%; padding: 20px 20px; vertical-align: top}
.priceQuestions p {margin: 15px 0px; font-size: 1.4em}


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

.featureListPanel {width: 700px; margin: 30px auto; background: none}

.featureListPanel .pageTitle {margin: 20px auto 10px auto; text-align: center; font-size: 2em}
.featureListPanel .requestFeaturePanel {width: 100%; margin-top: 10px}
.featureListPanel .requestFeaturePanel .featureTitleInput {width: calc(100% - 10px)}
.featureListPanel .requestFeaturePanel .featureDescriptionInput {width: calc(100% - 10px)}
.featureListPanel .requestFeaturePanel .buttonPanel {display: block; text-align: right}
.featureListPanel .sendRequestButton {border-color: #FFFFFF}
.featureListPanel .sendRequestButton.ui-state-hover {border-color: #FFCAB5}

.featureListPanel .ui-widget-content {border: none}
.featureListPanel .featureHeader {width: 100%; margin-top: 60px; margin-bottom: 5px}
.featureListPanel .featureTitleColumn {word-break: break-word; font-weight: 500; padding-right: 15px}
.featureListPanel .featureVoteColumn {white-space: nowrap; text-align: right; vertical-align: top}
.featureListPanel .featureTitle {line-height: 1.5em}
.featureListPanel .featureDescription {width: 100%; word-break: break-word; line-height: 1.5em; white-space: pre-wrap}

.featureListPanel .featureVoteButton.ui-button-text-icon-right .ui-button-text {padding-right: 1.5em}
.featureListPanel .featureVoteButton .ui-icon.arrow {background: url("/online/javax.faces.resource/arrow.png.xhtml?ln=images")}


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

.reportAbuse {width: 890px; margin: 30px auto; background: none}
.reportAbuse .pageTitle {text-align: center; margin-top: 20px; font-size: 2em}
.reportAbuse .form {text-align: left; width: 430px; margin: 50px auto 20px auto;}
.reportAbuse .reasonHeader {font-size: 1.3em; font-weight: bold}
.reportAbuse .reasonOptions {margin-top: 10px}
.reportAbuse .commentHeader {margin-top: 30px; font-size: 1.3em; font-weight: bold}
.reportAbuse .commentTextarea {width: calc(100% - 10px); margin: 10px 0; line-height: 1.2}
.reportAbuse .sendReportAbuseAction {width: 100%; text-align: center}
.reportAbuse .sendReportAbuseButton {width: 320px; height: 40px; line-height: 32px; margin-top: 20px; font-size: 1.3em}
.reportAbuse .sendReportAbuseButton .ui-button-text {padding: 0 0.5em 0 0.5em}
.reportAbuse .radioButtonsBlock tbody td {display: flex; align-items: center}
.reportAbuse .radioButtonsBlock label {margin: 0 0 0 8px}


/* ================== RESULT PAGE (SIGNING OR FORWARDING SUCCESS/FAILURE) ======================= */

.resultMessagePanel {max-width: 500px; margin: 0 auto; text-align: center}
.resultMessagePanel .resultMessage {font-size: 2.5em}
.resultMessagePanel .explanationMessage {display: block; font-size: 1.7em; margin-top: 15px; margin-left: 10px}
.resultMessagePanel img {vertical-align: bottom; margin-right: 15px}
.resultMessagePanel a {font-size: 1.7em; margin-left: 10px}

.resultPanel .downloadDocumentPanel {width: 100%; max-width: 470px; margin: 20px auto 0 auto; text-align: center}
.resultPanel .downloadDocumentPanel .downloadDocumentButton {width: 100%}

.resultPanel .inputPanel {max-width: 520px; margin-top: 50px}
.resultPanel .email {width: 98%}
.resultPanel .activateAccountButton {margin-top: 10px; width: 100%}
.resultPanel .subMessage {display: block; text-align: center; margin-top: 5px; margin-bottom: 10px; color: #909090}
.resultPanel .logoPanel {margin-top: 35px; text-align: center}
.resultPanel .logoImage {max-height: 75px; max-width: 180px}


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

.infoPage.toolbar {min-width: initial}
.infoPage.toolbarContent {min-width: initial}
.infoPanel {max-width: 750px; margin-left: auto; margin-right: auto; text-align: center}
.infoPanel .ui-panel-content {padding-top: 25px; padding-bottom: 25px}
.infoPanel .message {font-size: 2.5em}
.infoPanel .submessage {display: block; font-size: 1.5em; margin-top: 30px}


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

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

/* sign order */
.inviteSignersDialog {position: absolute}
.inviteSignersDialog .setSignOrderPanel {display: block; padding-top: 3px; padding-bottom: 3px}
.inviteSignersDialog .setSignOrderMessage {margin-left: 8px}

/* signers table */
.inviteSignersDialog .signersTable table {width: initial; width: auto} /* auto for IE */
.inviteSignersDialog .signersTable tbody tr {height: 42px}
.inviteSignersDialog .signersTable thead {display: none}
.inviteSignersDialog .signersTable .ui-datatable-empty-message {font-weight: initial; text-align: initial; line-height: initial}
.inviteSignersDialog .signersTable .ui-datatable-empty-message td {padding: 0px}

/* signers table columns */
.ui-datatable tbody td.dragHandleSignersColumn {padding-left: 2px; padding-right: 14px}
.ui-datatable tbody td.orderSignersColumn {padding-left: 0px; padding-right: 12px}
.ui-datatable tbody td.orderSignersColumn .signerOrder {width: 16px; padding-left: 8px; padding-right: 8px}

.ui-datatable tbody td.nameSignersColumn {padding-left: 0px; width: 200px; min-width: 200px}
.ui-datatable tbody td.nameSignersColumn .signerName {width: calc(100% - 10px)}

.ui-datatable tbody td.emailSignersColumn {padding-left: 0px; padding-right: 0px; width: 100%}
.ui-datatable tbody td.emailSignersColumn .signerEmail {width: calc(100% - 10px)}
.ui-datatable tbody td.emailSignersColumn .signerEmail input {width: 100%}

.ui-datatable tbody td.accessCodeSignersColumn {padding-left: 10px; padding-right: 2px}
.ui-datatable tbody td.deleteButtonSignersColumn {padding-left: 6px; padding-right: 2px}
.ui-datatable tbody td.handle {cursor: move}

/* signers table images */
.dragHandleSignersColumn .dragHandleImage {vertical-align: middle}
.accessCodeSignersColumn .accessCodeImage {vertical-align: middle; width: 18px; height: 18px}
.deleteButtonSignersColumn .deleteButtonImage, .deleteCcEmailsButtonColumn .deleteButtonImage {vertical-align: middle; width: 18px; height: 18px}

/* add signer button */
.inviteSignersDialog .addSignerButton {margin-top: 10px; margin-right: 20px}

/* add CC emails button */
.inviteSignersDialog .addCcEmailsButton {display: inline-block; margin-top: 10px; text-transform: uppercase; text-decoration: none; font-weight: 500}

/* CC emails */
.inviteSignersDialog .ccEmailsPanel {display: block; margin-top: 15px}
.inviteSignersDialog .ccEmailsGrid {border-collapse: collapse; margin-bottom: 5px}
.inviteSignersDialog .ccEmailsColumn {padding-left: 0px; padding-right: 0px; width: 100%}
.inviteSignersDialog .ccEmailsColumn .ccEmails {width: calc(100% - 10px)}
.inviteSignersDialog .deleteCcEmailsButtonColumn {padding-left: 10px; padding-right: 2px}

/* "prepare for signing" header */
.inviteSignersDialog .sectionHeader.prepareForSending {display: inline-block; text-transform: uppercase}
.inviteSignersDialog .sectionHeader.optional {display: inline-block; text-transform: inherit; font-style: italic; padding-left: 5px}

/* document name and button */
.inviteSignersDialog .infoMessage {display: block; margin-bottom: 10px}
.inviteSignersDialog .documentGrid {border-spacing: 0px}

/* attachments */
.inviteSignersDialog .attachmentsPanel {display: inline-block; margin-top: 15px}
.inviteSignersDialog .attachmentPanel {display: inline-block; padding-right: 12px; padding-left: 0px; white-space: nowrap}
.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}
.inviteSignersDialog .addAttachmentButton {display: block; margin-top: 10px}


/* ================== RESEND INVITATION DIALOG ======================= */

.resendInvitationDialog {position: absolute}


/* ================== RESEND INVITATION DIALOG ======================= */

.sendEmailDialog {position: absolute}


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

.startBulkSendDialog {position: absolute}

/* select file */
.startBulkSendDialog .selectFileButton {margin-bottom: 10px}
.startBulkSendDialog .fileGrid {margin-bottom: 10px}
.startBulkSendDialog .fileGrid .nameDocumentColumn {padding-left: 0px}
.startBulkSendDialog .fileGrid .openButtonDocumentsColumn {padding-left: 10px; padding-right: 0px}
.startBulkSendDialog .fileGrid .deleteButtonDocumentsColumn {padding-left: 6px; padding-right: 2px}


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

.createDocumentSetDialog {margin-top: 5px; margin-bottom: 5px; position: absolute}

.createDocumentSetPanel {width: 100%; padding-top: 5px}

/* documents panel */
.createDocumentSetPanel .documentsPanel {display: block; margin-bottom: 20px}

/* document set name */
.createDocumentSetPanel .documentSetNamePanel {display: block; margin-bottom: 10px}
.createDocumentSetPanel .documentSetNameLabel {display: block; margin-bottom: 10px}
.createDocumentSetPanel .documentSetName {width: 98%; margin-bottom: 5px}

/* documents table */
.createDocumentSetPanel .documentsTable table {width: initial; width: auto} /* auto for IE */
.createDocumentSetPanel .documentsTable tbody tr {height: 42px}
.createDocumentSetPanel .documentsTable thead {display: none}

/* documents table columns */
.ui-datatable tbody td.dragHandleDocumentsColumn {padding-left: 2px; padding-right: 14px}
.ui-datatable tbody td.nameDocumentColumn {padding-left: 0px; width: 100%}
.ui-datatable tbody td.openButtonDocumentsColumn {text-align: right; padding-left: 10px; padding-right: 0px}

/* document table images */
.dragHandleDocumentsColumn .dragHandleImage {vertical-align: middle}

/* buttons */
.createDocumentSetPanel .buttonPanel {display: block; text-align: right}
.createDocumentSetPanel .cancelButton {margin-right: 8px}


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

.savedEmailDialogPanel .savedEmailDialogMessage {display: block; margin-bottom: 10px}
.savedEmailDialogPanel .savedEmailNamePanel {display: block; margin-bottom: 10px; width: 100%}
.savedEmailDialogPanel .savedEmailNameLabel {display: block; margin-bottom: 10px}
.savedEmailDialogPanel .savedEmailName {display: block; width: 98%; margin-bottom: 10px}
.savedEmailDialogPanel .defaultSavedEmailCheckbox {vertical-align: middle}
.savedEmailDialogPanel .defaultSavedEmailMessage {margin-left: 6px}
.savedEmailDialogPanel .buttonPanel {display: block; text-align: right}
.savedEmailDialogPanel .closeButton {margin-right: 8px}


/* =============== ERROR DIALOGS (CANNOT INVITE FOR SET, CANNOT APPLY TEMPLATE) ==================== */

.errorDialogPanel .messagePanel {display: block; margin: 10px 0px 15px 0px; text-align: center}
.errorDialogPanel .buttonPanel {display: block; text-align: right; margin-bottom: 5px}


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

.confirmSettingsDialog .confirmSettingsPanel {text-align: left; width: 100%}
.confirmSettingsDialog .changeEmailText {display: block; margin-bottom: 20px}
.confirmSettingsDialog .hiddenPassword {visibility: hidden; position: absolute; left:-99999px}
.confirmSettingsDialog .currentPassword {width: 98%}
.confirmSettingsDialog .buttonPanel {display: block; text-align: right}
.confirmSettingsDialog .closeButton {margin-right: 8px}


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

.importContactPanel .contactFieldLabel {display: block; margin-bottom: 5px}
.importContactPanel .buttonPanel {display: block; text-align: right; margin-top: 10px}
.importContactPanel .uploadContactButton {display: inline-block}
.importContactPanel .cancelButton {margin-right: 8px; vertical-align: middle}


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

.documentLinkPanel {width: 100%}
.documentLinkPanel .linkMessage {display: block}
.documentLinkPanel .linkPanel {display: block; margin-bottom: 10px}
.documentLinkPanel .linkLabel {display: block; margin-top: 10px; margin-bottom: 5px}
.documentLinkPanel .linkText {width: calc(100% - 38px); margin-bottom: 5px}
.documentLinkPanel .copyToClipboardButton {padding-left: 10px}
.documentLinkPanel .copyToClipboardButtonImage {vertical-align: middle; width: 18px; height: 18px}

/* buttons */
.documentLinkPanel .buttonPanel {display: block; text-align: right; margin-top: 5px}


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

.templateLinkPanel {width: 100%}
.templateLinkPanel .linkPanel {display: block; margin-bottom: 15px}
.templateLinkPanel .linkLabel {display: block; margin-bottom: 10px}
.templateLinkPanel .linkText {width: calc(100% - 38px); margin-bottom: 5px}
.templateLinkPanel .copyToClipboardButton {padding-left: 10px}
.templateLinkPanel .copyToClipboardButtonImage {vertical-align: middle; width: 18px; height: 18px}
.templateLinkPanel .buttonPanel {display: block; text-align: right}
.templateLinkPanel .closeButton {margin-right: 8px}

.templateLinkPanel .checkboxBlockPanel {display: block; margin-bottom: 20px}
.templateLinkPanel .checkboxBlockLabel {display: block; margin-bottom: 10px}
.templateLinkPanel .checkboxPanel {margin: 10px 0px 0px 10px}
.templateLinkPanel .checkbox {vertical-align: middle}
.templateLinkPanel .checkboxMessage {margin-left: 6px}

.templateLinkPanel .leftButton {margin-right: 6px}


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

.replaceTemplateFormDialog .dialogSecondaryButton {vertical-align: middle}

/* select file for upload button */
.replaceTemplateFormDialog form {display: inline-block}
.replaceTemplateFormDialog .uploadDocumentButton .ui-fileupload-buttonbar .ui-button {margin: 0px 0px 0px 8px; padding: 0px}
.replaceTemplateFormDialog .uploadDocumentButton .ui-fileupload-buttonbar .ui-button-text-icon-left .ui-button-text {display: inherit}
.replaceTemplateFormDialog .uploadDocumentButton .ui-fileupload-buttonbar .ui-fileupload-choose input {font-size: 20px}


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

.applyTemplateDialog {margin-top: 5px; margin-bottom: 5px; position: absolute}

.applyTemplateDialog.ui-dialog .ui-dialog-content {padding-left: 1em; padding-right: 1em}

.applyTemplatePanel {width: 100%}
.applyTemplatePanel .infoMessage {display: block; margin-top: 5px; margin-left: 5px}
.applyTemplatePanel .noTemplatesMessage {display: block; font-weight: 500; text-align: center; margin-top: 35px; margin-bottom: 15px}

.applyTemplateList {margin: 5px 0px 15px 0px}
.applyTemplateList tbody tr, .applyTemplateList thead tr {height: 47px}
.applyTemplateList thead th.ui-state-default {background: none; text-align: left; border-bottom: 2px solid}

/* table footer */
.applyTemplateList .ui-widget-header {border: none; margin-top: 25px}

/* table columns */
.applyTemplateList .actionsButton .ui-button .ui-button-text {text-transform: uppercase}
.applyTemplateList .templateType {width: 80px}
.applyTemplateList .templateActions {width: 110px}
.applyTemplateList .templateName {
    -ms-word-break: break-all; /* old IE support */
    word-break: break-all; /* for IE and FF */
    word-break: break-word; /* for Chrome */
}
.applyTemplateList .applyButton {width: 100%}

.applyTemplatePanel .buttonPanel {display: block; text-align: right}


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

.moveToFolderDialog {position: absolute}
.moveToFolderPanel {width: 100%; min-width: 350px}
.moveToFolderPanel .folderTreeLabel {display: block; margin-bottom: 5px}
.moveToFolderPanel .folderTree {width: 100%}
.moveToFolderPanel .folderTree .ui-treenode-content {padding: 2px 0px}
.moveToFolderPanel .folderTree .ui-tree-toggler {margin: 0px; vertical-align: middle}
.moveToFolderPanel .folderTree .ui-treenode-icon {margin: 4px 0px 0px 0px; vertical-align: middle}
.moveToFolderPanel .folderTree .ui-treenode-label {margin: 0px 2px; vertical-align: middle}
.moveToFolderPanel .buttonPanel {display: block; text-align: right; margin-top: 10px}
.moveToFolderPanel .cancelButton {margin-right: 8px}

.folderIcon {background: transparent url("/online/javax.faces.resource/horizontal_folder_icon.png.xhtml?ln=images") no-repeat top !important}


/* ================== DELETE ELEMENT DIALOG ======================= */

.deleteElementsDialog .ui-dialog-content {padding: 0}
.deleteElementsPanel .deleteElementsTextPanel {display: block; margin-top: 22px; margin-bottom: 13px}
.deleteElementsPanel .confirmationMessage {font-weight: 500; font-size: 1em; text-align: center; display: block; margin: 0px 25px; vertical-align: middle}
.deleteElementsPanel .buttonPanel {display: block; text-align: right; margin-top: 10px; border-top-color: #ddd; border-top: 1px solid #ddd; padding: 10px}
.deleteElementsPanel .cancelButton {margin-right: 8px}


/* ================== DELETE BULK SEND DIALOG ======================= */

.deleteBulkSendDialog .ui-dialog-content {padding: 0}
.deleteBulkSendDialog .messageWithCheckBoxPanel {margin-top: 25px; margin-bottom: 10px}
.deleteBulkSendDialog .confirmationMessage {font-weight: 500; font-size: 1em; text-align: center; display: block; margin: 0px 25px; vertical-align: middle}
.deleteBulkSendDialog .checkboxPanel {display: block; text-align: center; margin: 15px auto 0px auto}
.deleteBulkSendDialog .checkbox {vertical-align: middle}
.deleteBulkSendDialog .checkboxMessage {margin-left: 8px}
.deleteBulkSendDialog .buttonPanel {margin-top: 10px; border-top-color: #ddd; border-top: 1px solid #ddd; padding: 10px}


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

.auditDialogPanel {max-height: 550px; border: none}
.auditButtonPanel {display: block; text-align: right; margin-top: 15px}


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

.upgradeDialogPanel {text-align: right}
.upgradeDialogPanel .closeButton {min-width: 100px}


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

.confirmDialog .ui-dialog-content span {font-weight: 500; font-size: 1em; text-decoration: none}
.confirmDialog .ui-confirm-dialog-severity {display: none}
.confirmDialog .ui-dialog-content {text-align: center; margin-top: 0.5em}
.confirmDialog .ui-dialog-buttonpane {padding: 0em 0.4em 0em 0.4em; text-align: center}
.confirmDialog .ui-dialog-buttonpane button {margin: 10px 5px}


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

.feedbackDialogPanel {width: 100%}
.feedbackDialogPanel .feedbackDialogLabel {display: block; margin-bottom: 10px}
.feedbackDialogPanel .feedbackDialogName {width: 98%; margin-bottom: 20px}
.feedbackDialogPanel .feedbackDialogText {width: 98%; margin-bottom: 10px;}
.feedbackDialogPanel .buttonPanel {display: block; text-align: right}
.feedbackDialogPanel .cancelButton {margin-right: 8px}


/* ================== INCLUDE PDF FIELDS DIALOG ======================= */

.includePdfFieldsDialogPanel {width: 100%}
.includePdfFieldsDialogPanel .infoMessage {display: block; margin-bottom: 10px}
.includePdfFieldsDialogPanel .rememberCheckboxPanel {display: block; margin-bottom: 10px}
.includePdfFieldsDialogPanel .checkbox {vertical-align: middle}
.includePdfFieldsDialogPanel .checkboxMessage {margin-left: 8px}
.includePdfFieldsDialogPanel .buttonPanel {display: block; text-align: right}
.includePdfFieldsDialogPanel .leftButton {margin-right: 8px}


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

.addTextToFieldsDialog {position: absolute}
.addTextToFieldsDialog .scrollPanel {max-height: 550px;  margin-bottom: 10px; border: none}
.addTextToFieldsDialog .infoMessage {display: block; margin-bottom: 20px}
.addTextToFieldsDialog .fieldsTable {margin-top: 10px}
.addTextToFieldsDialog .fieldsTable thead {display: none}
.addTextToFieldsDialog .fieldsTable tbody tr {height: 42px}
.ui-datatable tbody td.field {padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px}


/* =============== SIGNER(S) ALREADY INVITED DIALOG ==================== */

.signerAlreadyInvitedDialog .dialogSecondaryButton {width: 230px}
.signerAlreadyInvitedDialog .blue {width: 230px}


/*****************************************************************************************************************/
/*                                                COLOR SCHEME                                                   */
/*****************************************************************************************************************/

/* ================== FONT ======================= */

/* font color */
.ui-widget-header, .ui-widget-content a {color: #4E4E4E}


/* ================== COMMON ======================= */

/* body */
.withBackground {background: #EAEAEA}

/* main */
.main {background: #FFF; border-color: #D5D5D5}
.mainHeader .pageSubtitle {color: #909090}

/* overlay color (blackout behind opened dialog) */
.ui-widget-overlay {background: #444444}

/* please wait message */
.pleaseWaitMessage {background-color: #fff1a8; color: #4E4E4E}

/* no borders in datatable (used in invite signers dialog) */
.ui-datatable tbody td {border-color: transparent}

/* tooltip shadow */
.ui-tooltip .ui-tooltip-text.ui-shadow {box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5)}

/* tooltip background and text color */
.ui-tooltip .ui-tooltip-text {background-color: #FFF1A8; color: #4E4E4E}

/* tooltip arrow color */
.ui-tooltip-right .ui-tooltip-arrow {border-right-color: #AAAAAA}
.ui-tooltip-left .ui-tooltip-arrow {border-left-color: #AAAAAA}
.ui-tooltip-top .ui-tooltip-arrow {border-top-color: #AAAAAA}
.ui-tooltip-bottom .ui-tooltip-arrow {border-bottom-color: #AAAAAA}


/* ================== WIDGETS ======================= */

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: #EDF5F9; color: #2779AA;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover {
    background: #FFF; color: #2779AA
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: #3BAAE3; color: #FFF
}


/* ================== BUTTONS ======================= */

/* blue button */
.ui-button.blue, .ui-widget-content .ui-button.blue, .ui-widget-header .ui-button.blue {
    background: #3BAAE3; color: #FFF
}
.ui-button.blue.ui-state-hover, .ui-widget-content .ui-button.blue.ui-state-hover, .ui-widget-header .ui-button.blue.ui-state-hover {
    background: #FFF; color: #2779AA
}
.ui-button.blue.ui-state-active, .ui-widget-content .ui-button.blue.ui-state-active, .ui-widget-header .ui-button.blue.ui-state-active {
    background: #3BAAE3; color: #FFF
}

/* orange button */
.ui-button.orange, .ui-widget-content .ui-button.orange, .ui-widget-header .ui-button.orange {
    background: #FF6923; color: #FFF
}
.ui-button.orange.ui-state-hover, .ui-widget-content .ui-button.orange.ui-state-hover, .ui-widget-header .ui-button.orange.ui-state-hover {
    background: #FFF; color: #FF6923;
}
.ui-button.orange.ui-state-active, .ui-widget-content .ui-button.orange.ui-state-active, .ui-widget-header .ui-button.orange.ui-state-active {
    background: #FF6923; color: #FFF
}

/* grey button */
.ui-button.grey, .ui-widget-content .ui-button.grey, .ui-widget-header .ui-button.grey {
    background: #F0F0F0; color: #656565; border-color: #B5B5B5
}
.ui-button.grey.ui-state-hover, .ui-widget-content .ui-button.grey.ui-state-hover, .ui-widget-header .ui-button.grey.ui-state-hover {
    background: #FDFDFD; color: #656565; border-color: #B5B5B5
}
.ui-button.grey.ui-state-active, .ui-widget-content .ui-button.grey.ui-state-active, .ui-widget-header .ui-button.grey.ui-state-active {
    background: #D5D5D5; color: #404040; border-color: #B5B5B5
}

/* white button */
.ui-button.white, .ui-widget-content .ui-button.white, .ui-widget-header .ui-button.white {
    background: #FFF; color: #2779AA; border-color: #FFF
}
.ui-button.white.ui-state-hover, .ui-widget-content .ui-button.white.ui-state-hover, .ui-widget-header .ui-button.white.ui-state-hover {
    background: #FFF; color: #2779AA; border-color: #FFF
}
.ui-button.white.ui-state-active, .ui-widget-content .ui-button.white.ui-state-active, .ui-widget-header .ui-button.white.ui-state-active {
    background: #FFF; color: #2779AA; border-color: #FFF
}

/* upgrade button */
.upgradeButton {border-color: #2694E8}

/* file upload orange button */
.uploadDocumentButton.orange .ui-fileupload-buttonbar .ui-button {color: #FFF; background: #FF6923;  border-color: #DCDCDC}
.uploadDocumentButton.orange .ui-fileupload-buttonbar .ui-button.ui-state-active {color: #FFF; background: #FF6923}
.uploadDocumentButton.orange .ui-fileupload-buttonbar .ui-button.ui-state-hover {color: #FF6923; background: #FFF; border-color: #FFCAB5}

/* file upload blue button */
.uploadDocumentButton.blue .ui-fileupload-buttonbar .ui-button {color: #FFF; background: #3BAAE3}
.uploadDocumentButton.blue .ui-fileupload-buttonbar .ui-button.ui-state-active {color: #FFF; background: #3BAAE3}
.uploadDocumentButton.blue .ui-fileupload-buttonbar .ui-button.ui-state-hover {color: #2779AA; background: #FFF}

/* file upload white button */
.uploadDocumentButton.white .ui-fileupload-buttonbar .ui-button {background: #FFF; color: #2779AA; border-color: #FFF}
.uploadDocumentButton.white .ui-fileupload-buttonbar .ui-button.ui-state-active {background: #FFF; color: #2779AA; border-color: #FFF}
.uploadDocumentButton.white .ui-fileupload-buttonbar .ui-button.ui-state-hover {background: #FFF; color: #2779AA; border-color: #FFF}
.uploadDocumentButton.white .ui-fileupload-buttonbar .ui-button-text {padding-left: 0; padding: 0}


/* ================== INPUT FIELDS ======================= */

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    background: #FFF;
    color: #362B36;
}


/* ================== DIALOGS ======================= */

/* headers and content of dialogs and other widgets */
.ui-widget-content {background: #FFF}
.ui-widget-header {background: #EDF5F9}

/* highlighting of menu items */
.ui-state-hover.ui-menuitem, .ui-state-hover.ui-selectonemenu-item {
    background: #EDF5F9;
}

/* empty place color when we reorder table rows */
.ui-datatable-data .ui-datatable-rowordering.ui-state-active {
    background: #FFF;
}


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

/* navigation link */
.navigationLinks .link {color: #4E4E4E}
.navigationLinks .link:hover {background: #DFDFDF}
.navigationLinks .link.active {background: #DFDFDF}

/* navigation separator */
.navigation .separator {border-bottom-color: #D5D5D5}


/* ================== TOOLBAR ======================= */

/* toolbar */
.toolbar {color: #FFF; background-color: #3BAAE3; border-color: #2694E8}
.toolbar {height: 41px}
.toolbarContent {padding-top: 5px}
.toolbarButtons .userActionsMenu .ui-button {border-color: #2694E8}


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

.importFromCloud .importFromCloudButton.ui-button, .importFromCloud .importFromCloudButton .ui-button {background: #FFF; color: #FF6923; border-color: #FFCAB5}
.importFromCloud .importFromCloudButton .ui-button .ui-icon {background: url("/online/javax.faces.resource/orange_triangle.png.xhtml?ln=images")}
.ui-icon-orange-triangle {background-image: url("/online/javax.faces.resource/images/orange_triangle.png.xhtml") !important} /* icon for button in FREE mode */
.cloudItem .cloudLink {color: #3A89D3}


/* ======================== SECTIONS ============================ */

.sectionHeader {color: #909090}
.sectionHeaderUnderline {border-color: #EAEAEA; color: #fff; background-color: #fff}


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

/* header settings */
.settings .settingsHeader {color: #3A89D3}
.settings .settingsHeaderActive {color: #4E4E4E}

/* separator */
.settingsSeparator {border-top-color: #E5E5E5}

/* API settings */
.purchaseApiCreditsPanel .purchaseApiCreditsButton {border-color: #FFFFFF}
.purchaseApiCreditsPanel .purchaseApiCreditsButton.ui-state-hover {border-color: #FFCAB5}
.settingsContent .upgradeAccountLink {color: #3A89D3}


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

.addContactButton {border-color: #DCDCDC}

.importContactButton {border-color: #DCDCDC; margin-left: 8px}

.contactList thead th, .contactList tbody td {color: inherit; border-color: transparent; border-bottom-color: #E5E5E5}
.contactList td.odd {background-color: #F4F4F4; border-left-color: #F4F4F4; border-right-color: #F4F4F4}
.contactList .ui-widget-header {background: #fff} /* table footer */


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

/* folder path */
.folderPath .folderLink {color: #3A89D3}

/* reset filters */
.pageFilterIndicators .resetFiltersLink {color: #3A89D3}

/* header more button */
.pageControls .headerMoreButton .ui-button {background: #F0F0F0; color: #656565; border-color: #B5B5B5}
.pageControls .headerMoreButton .ui-button.ui-state-hover {background: #FDFDFD; color: #656565; border-color: #B5B5B5}
.pageControls .headerMoreButton .ui-button.ui-state-active {background: #D5D5D5; color: #404040; border-color: #B5B5B5}
.pageControls .headerMoreButton .ui-button .ui-icon {background: url("/online/javax.faces.resource/grey_triangle.png.xhtml?ln=images")}

/* date range select */
.pageFilters .documentDateRangeSelect {border-color: #B5B5B5; background: #FFFFFF}
.pageFilters .documentDateRangeSelect.ui-state-hover {border-color: #656565}
.pageFilters .documentDateRangeSelect.ui-state-focus {border-color: #656565}
.pageFilters .documentDateRangeSelect .ui-selectonemenu-trigger {background: #F0F0F0}
.pageFilters .documentDateRangeSelect .ui-selectonemenu-trigger {border-color: #B5B5B5}
.pageFilters .documentDateRangeSelect .ui-selectonemenu-trigger.ui-state-hover {border-color: #656565}
.pageFilters .documentDateRangeSelect .ui-selectonemenu-trigger.ui-state-focus {border-color: #656565}
.pageFilters .documentDateRangeSelect .ui-selectonemenu-trigger .ui-icon {background: url("/online/javax.faces.resource/grey_triangle.png.xhtml?ln=images")}

/* search field */
.pageFilters .documentNameFilter {border-color: #B5B5B5}
.pageFilters .documentNameFilter.ui-state-hover {border-color: #656565}
.pageFilters .documentNameFilter.ui-state-focus {border-color: #656565}

/* separator */
.documentList {border-top-color: #E5E5E5}

/* document grid */
.documentList .ui-widget-content {background: #fff} /* table content */
.documentList .ui-widget-header {background: #fff} /* table footer */

/* document check box */
.documentCheckbox .ui-chkbox-box.ui-state-default {border-color: #A5A5A5; background: #F0F0F0}
.documentCheckbox .ui-chkbox-box.ui-state-active {background-color: #3BAAE3; color: #FFF; border-color: #2694E8}

/* document data */
.documentImage img {border-color: #C5C5C5; box-shadow: 1px 1px 3px 0px rgba(136,136,136,1)}
.documentImage img.set {box-shadow: 0px 1px 3px 0px rgba(136,136,136,1)}
.childDocument {background-color: #FFF; border-color: #C5C5C5}
.first.childDocument {box-shadow: 1px 1px 3px 0px rgba(136,136,136,1)}
.second.childDocument {box-shadow: 0px 1px 3px 0px rgba(136,136,136,1)}

/* highlighted folder */
.folderRow.highlighted {background: #AED0EA}

/* list of invitations */
.documentInvitationEmail {color: #828282}
.documentInvitationActions .ui-button {color: #828282; border-color: #DBDBDB; background-color: rgba(200, 200, 200, 0.14)}
.documentInvitationActions .ui-button:hover {color: #656565; background-color: transparent}

/* button in list of invitation actions */
.ui-menu .ui-menuitem-link.invitationActionMenuItem.ui-state-hover {background: #EDF5F9}

/* document separator */
.separator {border-color: #E5E5E5; color: #fff; background-color: #fff}

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


/* ================== PROVIDE DETAILS FOR TEMPLATE LINK ======================= */

/* signers table */
.provideDetailsForTemplateLinkPanel .signersTable tbody tr {background: #F2F5F7}


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

.newBulkSendPanel .startNewBulkSendButton {border-color: #FFFFFF}
.newBulkSendPanel .startNewBulkSendButton.ui-state-hover {border-color: #FFCAB5}
.newBulkSendPanel .purchaseMoreLink {color: #3A89D3}

.bulkSendList thead th, .bulkSendList tbody td {color: inherit; border-color: transparent; border-bottom-color: #E5E5E5}
.bulkSendList td.odd {background-color: #F4F4F4; border-left-color: #F4F4F4; border-right-color: #F4F4F4}
.bulkSendList .ui-widget-header {background: #fff} /* table footer */
.bulkSendList .titleLink {color: #3A89D3}


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

.newTeamMemberButton {border-color: #FFFFFF}
.newTeamMemberButton.ui-state-hover {border-color: #FFCAB5}
.newTeamMemberPanel .purchaseMoreLink {color: #3A89D3}

.teamList thead th, .teamList tbody td {color: inherit; border-color: transparent; border-bottom-color: #E5E5E5}
.teamList tbody td .red {color: red}
.teamList td.odd {background-color: #F4F4F4; border-left-color: #F4F4F4; border-right-color: #F4F4F4}
.teamList tbody .teamDocumentName a {color: #3A89D3}
.teamList .assignSeatLink {color: #3A89D3}
.teamList .ui-widget-header {background: #fff} /* table footer */

/* document name filter */
.teamList .teamDocumentNameFilter  {border-color: #B5B5B5}
.teamList .teamDocumentNameFilter.ui-state-hover {border-color: #656565}
.teamList .teamDocumentNameFilter.ui-state-focus {border-color: #656565}

/* author email filter */
.teamList .authorEmailFilter {border-color: #B5B5B5}
.teamList .authorEmailFilter.ui-state-hover {border-color: #656565}
.teamList .authorEmailFilter.ui-state-focus {border-color: #656565}
.teamList .authorEmailFilter .ui-selectonemenu-trigger {background: #F0F0F0}
.teamList .authorEmailFilter .ui-selectonemenu-trigger {border-color: #B5B5B5}
.teamList .authorEmailFilter .ui-selectonemenu-trigger.ui-state-hover {border-color: #656565}
.teamList .authorEmailFilter .ui-selectonemenu-trigger.ui-state-focus {border-color: #656565}
.teamList .authorEmailFilter .ui-selectonemenu-trigger .ui-icon {background: url("/online/javax.faces.resource/grey_triangle.png.xhtml?ln=images")}


/* ================== SUBSCRIPTION ======================= */

.purchaseSubscription .purchasePanel {border-color: #DDDDDD; background-color: #F4F4F4}
.purchaseSubscription .subscriptionPricePerUser {color: #757575}
.purchaseSubscription .newSubscriptionButton {border-color: #FFFFFF}
.purchaseSubscription .newSubscriptionButton.ui-state-hover {border-color: #FFCAB5}

.subscriptionList thead th, .subscriptionList tbody td {color: inherit; border-color: transparent; border-bottom-color: #E5E5E5}
.subscriptionList td.odd {background-color: #F4F4F4; border-left-color: #F4F4F4; border-right-color: #F4F4F4}
.subscriptionList .ui-widget-header {background: #fff} /* table footer */


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

.paymentAvangatePanel {background-color: #FFF}
.paymentAvangatePanel .planPanel {background-color: #EAEAEA}
.paymentAvangatePanel .priceText.highlight {background-color: #FFFF7C}
.paymentAvangatePanel .upgradeButton {background: #FF5400; border-color: #E7E7E8}
.paymentAvangatePanel .upgradeButton a {color: #fff}

/* purchase credits */
.purchaseCredits {border-color: #DDDDDD; background-color: #F4F4F4}
.purchaseCredits .pricePerCredit {color: #757575}
.purchaseCredits .apiSettingsLink {color: #3A89D3}
.purchaseCredits .purchaseNowButton {border-color: #FFFFFF}
.purchaseCredits .purchaseNowButton.ui-state-hover {border-color: #FFCAB5}


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

.featureListPanel .sendRequestButton {border-color: #FFFFFF}
.featureListPanel .sendRequestButton.ui-state-hover {border-color: #FFCAB5}

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

.reportAbuse .sendReportAbuseButton {border-color: #FFFFFF}
.reportAbuse .sendReportAbuseButton.ui-state-hover {border-color: #FFCAB5}

/* ============= LOG IN / SIGN UP / RESET PASSWORD ================= */

/* input panel */
.inputPanel {background: #F2F5F7; border-color: #AED0EA}

/* link in info message e.g. "request password reset" link */
.inputPanel .ui-message a {color: #3A89D3}

/* log in */
.inputPanel .forgotPasswordLink {color: #3A89D3}
.inputPanel .noAccountLink {color: #3A89D3}

/* sign up */
.inputPanel .haveAccountAlreadyLink {color: #3A89D3}
.inputPanel .subscribeLabel {color: #929AA5}

/* download document */
.downloadDocumentLink {color: #3A89D3}

/* sent verification link message */
.inputPanel .sentVerificationLinkMessage .email {color: #3A89D3}

/* google button */
.googleButton {background-color: #3f72da; border-color: #3f72da; color: #fff}
.googleButton .iconBackground {background: #fff}


/* ================== RESULT PAGE (SIGNING OR FORWARDING SUCCESS/FAILURE) ======================= */

.resultPanel a {color: #3A89D3}


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

.infoPanel {background: #fff}
.infoPanel a.submessage {color: rgb(58,137,211)}


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

.applyTemplateList thead th.ui-state-default, .applyTemplateList tbody td {color: inherit; border-color: transparent; border-bottom-color: #E5E5E5}
.applyTemplateList td.odd {background-color: #F4F4F4; border-left-color: #F4F4F4; border-right-color: #F4F4F4}
.applyTemplateList .ui-widget-header {background: #fff} /* table footer */


/* ================== SEND EMAIL DIALOG ======================= */

.sendEmailDialogPanel .advancedPanel .ui-accordion-header {background: #fff; color: #2779AA}
.sendEmailDialogPanel .advancedPanel .ui-accordion-header.ui-state-active .ui-icon {background: url("/online/javax.faces.resource/blue_triangle.png.xhtml?ln=images")}


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

/* signer autocomplete */
.ui-autocomplete-panel .ui-autocomplete-item {border-color: #fff}
.ui-autocomplete-panel .ui-autocomplete-item.ui-state-highlight td {color: #2779AA; background: #EDF5F9}

.inviteSignersDialog .addCcEmailsButton {color: #2779AA}


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

/* here we define the border color because by default our data tables have transparent border color */
.auditEvents.ui-datatable tbody td {
    border-color: inherit;
}


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

.moveToFolderPanel .folderTree {background-color: #F7FCFF; border-color: #AED0EA; padding: 3px 0px 5px 0px}
.moveToFolderPanel .folderTree .ui-treenode-content.ui-state-highlight {background: #AED0EA}


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

.confirmDialog .ui-dialog-content span {color: #4E4E4E}