/* * Styles for X-Sign. * * @prefix X-Sign. * @scope X-Sign. * * $Id$ */ @import "bootstrap.css"; @import "../resources/fonts/font-awesome/css/all.css"; @import "dijit.less"; @import "common-widgets.less"; @import "signing-method.less"; @import "variables.less"; // Heading fonts h1, h2, h3, h4, h5, h6 { font-family: Ubuntu; font-weight: 400; word-break: break-word; } html { scroll-padding: 5rem 0 5rem 0; } body { font-family: OpenSans !important; font-weight: normal; overflow-x: hidden; font-size: 1rem; background: @light-grey; } .ofDoc-body { padding-top: 70px; input { width: 100%; } } a { color:@link-color; text-decoration: none; cursor: pointer; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; &:hover { color: darken(@custom-color, 5%); text-decoration: underline; } &:focus { //outline: none; color: @custom-color; } } /* Hide emails (.ofDoc-sigerEmail class) that are not in the class `.clerk-view` */ body:not(.clerk-view) { .ofDoc-signingWrapper { .ofDoc-signerWrapper { .ofDoc-signerName { padding-bottom: 1em; } .ofDoc-signerEmail, .ofDoc-signerPhone, .signer-status, .update-signer, .ofDoc-signerSSN { display: none; } } } .thankYouNavigation { display: none; } } .clerk-view { .ofDoc-mainSigning { padding: 15px; margin-top: auto; } } .dijitButton { .dijitButtonNode { border: none; line-height: normal; } .dijitButtonContents { background: @custom-color; color: @pure-white; padding: 10px 20px; min-width: 200px; border-radius: 4px; border: 1px solid @custom-color; text-align: center; box-shadow: 0 3px 3px @shadow-color; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; &:hover, &:focus { box-shadow: none; background: @pure-white; color: darken(@custom-color, 5%); } } } .ofDoc-button { border: none; line-height: normal; background: @custom-color; color: @pure-white; padding: 10px 20px; min-width: 200px; border-radius: 4px; text-align: center; box-shadow: 0 3px 3px @shadow-color; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; &:hover { box-shadow: none; background: darken(@custom-color, 5%); } } /* Buttons: ofDoc-primaryButton, ofDoc-altPrimaryButton, ofDoc-secondaryButton */ #adLoginBtn { background: none; color: @custom-color; border: 1px solid @custom-color; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; &:hover { box-shadow: none; background: darken(white, 5%); } } .ofDoc-primaryButton { .dijitButtonContents { color: @pure-white; background: @custom-color; border: 1px solid @custom-color; &.dijitHover, &:hover, &:focus-within, &:focus-within { color: @custom-color; background: @pure-white; border: 1px solid @custom-color; } } } .ofDoc-button { &.ofDoc-primaryButton { color: @pure-white; background: @custom-color; border: 1px solid @custom-color; &.dijitHover, &:hover, &:focus-within, &:focus-within { color: @custom-color; background: @pure-white; border: 1px solid @custom-color; } } &.ofDoc-primaryButton-outline { background: @pure-white; color: @custom-color; border: 1px solid @custom-color; &:hover, &:focus, &:focus-within { color: @custom-color; background: @pure-white; border: 1px solid @custom-color; } } &.ofDoc-altPrimaryButton { color: @custom-color; background: @pure-white; border: 1px solid @custom-color; } } .ofDoc-primaryButton-outline { &.dijitButtonFocused { color: @pure-white; background: @custom-color; border: 1px solid @custom-color; } .dijitButtonContents { background: @pure-white; color: @custom-color; border: 1px solid @custom-color; &:hover, &:focus, &:focus-within { color: @pure-white; background: @custom-color; border: 1px solid @custom-color; } } } .ofDoc-altPrimaryButton { .dijitButtonContents { color: @custom-color; background: @pure-white; border: 1px solid @custom-color; } } .alt-primary { .dijitButtonContents { color: @custom-color; background-color: @pure-white; border: 1px solid @custom-color; &:hover, &:focus-within, &:hover:focus { background-color: @custom-color; color: @pure-white; } } } .ofDoc-secondaryButton { .dijitButtonContents { color: @light-black; background: @pure-white; border: 1px solid @light-black; &:hover, &:focus, &:focus-within { background-color: @dark-grey; color: @pure-white; } } } .ofDoc-button.ofDoc-secondaryButton { color: @light-black; background: @pure-white; border: 1px solid @light-black; } .ofDoc-button.ofDoc-secondaryButton:hover { background: @light-grey; } /* Divider */ .ofDoc-divider { border-top: 1px solid rgba(0, 0, 0, 0.1); } /* Warning message */ .ofDoc-warning { text-align: center; color: @error-red; } /* Login dialog */ input.dijitOffScreen { display: none!important; } .dijitButtonContents .dijitIcon{ position: absolute; left: 11.5rem; top: 11.35rem; width: 40px; height: 40px; padding: 0; line-height: 40px; font-size: 30px; color: @nero-black !important; } .ofDoc-loginDialog { padding: 0; text-align: center; overflow-y: scroll; .login-container { min-height: calc(100% - 70px - 3rem); } .title { &.dijitAlignTop { position: relative !important; top: auto !important; left: auto !important; margin: auto; padding-top: 1rem; padding-bottom: 1rem; } } .form-wrapper { max-width: 400px !important; height: auto !important; position: relative !important; margin: auto; } .dijitAlignCenter { position: relative !important; left: auto !important; top: auto !important; margin: auto; width: 100% !important; .dijitButton { .dijitButtonNode { width: 100%; } .dijitButtonContents { width: 100%; } } } .language-select { -ms-flex-pack: center !important; justify-content: center !important; } @media (max-width: 575.98px) { width: 100%; } .dijitDialogTitleBar { background: @custom-color; min-height: 50px; padding: 10px 0; .dijitDialogTitle { color: @pure-white; font-size: 1.2rem; } } label { margin: 0; } .dijitTextBox { border: none; } .dijitInputInner { padding: 10px 12px; border: 1px solid @custom-color; border-radius: 4px; width: 100%; } } /* Header */ .ofDoc-navBar { box-shadow: 0 0 15px @shadow-color; -webkit-box-shadow: 0 0 15px @shadow-color; padding: 0; .container-fluid { padding: 0 1rem; background-color: @pure-white; } } .ofDoc-navBar-logo { padding: 20px 0; a.ofDoc-logo { height: 40px; display: block; background-image: url(@logoURL); background-repeat: no-repeat; background-size: contain; } } .ofDoc-navBar-btnRight { background: @custom-color; color: @pure-white; height: 70px; padding: 15px 25px; display: flex; flex-direction: row; align-items: center; } .ofDoc-userInfo { display: flex; flex-direction: row; align-items: center; height: 40px; } .ofDoc-userDetails { margin-right: 45px; display: inline-block; } .ofDoc-userIcon { height: 40px; width: 40px; border: 1px solid @pure-white; //background: @mid-grey; border-radius: 50%; display: inline-block; margin-right: 15px; text-align: center; overflow: hidden; i { font-size: 40px; position: relative; bottom: -5px; } } .ofDoc-userRole { font-size: 14px; color: @pure-white; } a:focus, a:hover { .ofDoc-logout-btn { background: none; color: @pure-white; } } .ofDoc-logout-btn { height: 30px; width: 30px; background: @pure-white; border-radius: 50%; display: inline-block; i { font-size: 20px; padding: 5px; margin-left: 2px; } } /* Main content */ .ofDoc-main { min-height: calc(100vh - 102px); } .ofDoc-mainContainer { padding: 35px 0 50px; } h2.sectionTitle { text-align: center; font-size: 28px; margin: 40px 0; } .ofDoc-formBtnContainer { margin-bottom: 35px; } .ofDoc-formBtn { display: inline-block; background: @pure-white; height: 80px; width: 80px; border-radius: 50%; padding: 12px; z-index: 1; } .ofDoc-formBtn > div { display: inline-block; border: 1px solid @custom-color; border-radius: 50%; height: 56px; width: 56px; cursor: pointer; box-shadow: 0 3px 3px @shadow-color; font-size: 20px; &:hover { box-shadow: none; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; border-color: darken(@custom-color, 5%); } } .ofDoc-formBtn > button { display: inline-block; border: 1px solid @custom-color; border-radius: 50%; height: 56px; width: 56px; cursor: pointer; box-shadow: 0 3px 3px @shadow-color; font-size: 20px; &:hover { box-shadow: none; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; border-color: darken(@custom-color, 5%); } } .ofDoc-formBtnNew { background: @custom-color; color: @pure-white; &:hover { background: darken(@custom-color, 5%); } } .ofDoc-formBtnSearch { background: @pure-white; color: @custom-color; &:hover { color: darken(@custom-color, 5%); } } .form-selector { padding: 0.75rem; h2 { font-size: 1.25rem; } } .ofDoc-formBtn > div i { line-height: 56px; } .ofDoc-formCaption { min-width: 290px; //min-width: 250px; padding: 8px 23px; background: @pure-white; color: @custom-color; display: inline-block; margin: 17px -10px; font-size: 18px; font-weight: 600; @media only screen and (max-width: 600px) { background-color: transparent; } } .ofDoc-formLabel { width: 250px; padding: 8px; background: @pure-white; display: inline-block; margin: 0 -10px; font-size: 18px; font-weight: 600; .caption { color: @custom-color; text-decoration: none; cursor: pointer; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (max-width: 575.98px) { display: block; margin: -10px auto; border-radius: 10px; } } .ofDoc-mainForm, .ofDoc-mainSearch { min-height: calc(100vh - 102px); padding: 15px 0; } .ofDoc-mainSigning { min-height: calc(100vh - 140px); padding-top: 5rem; } .ofDoc-formWrapper { .dijitTabPaneWrapper { position: inherit !important; width: 100% !important; } //This is added later to remove additional space on the new FormViewer .dijitTabContainer.dijitTabContainerTop.dijitContainer.dijitLayoutContainer.tabStrip-disabled + div { display: none; } div[style*="z-index: -999; overflow: hidden; left: 0px; top: 0px"] { display: none; } .fm-locked-content { border-color: @light-grey !important; } } .ofDoc-breadcrumb { font-size: 14px; } a.ofDoc-breadcrumbLink { color:@custom-color !important; &:hover { color: darken(@custom-color, 5%)!important; text-decoration: underline !important; } } /* For the bootstrap breadcrumb-item link */ .breadcrumb { background: none; } .breadcrumb-item { color:@custom-color; &:hover { color: darken(@custom-color, 5%); text-decoration: underline; } } .breadcrumb-item.active { color: #6c757d; text-decoration: none !important; &:hover { text-decoration: none; } } .ofDoc-documents { padding-bottom: 1.5rem; .fm-group-body { .fm-group-caption { background: none; color: @dark-grey; font-weight: bold; border: none; } .ofdoc-required { .fm-elem-caption { display: none; } } .fm-repeater-group-row { .fm-group-body { margin-bottom: auto; } } } table { border: none; table-layout: fixed; } td.fm-repeater-group-row { padding: 0; } .ofDoc-uploadArea { &.fm-elem-container { padding: 0; .file-input { position: absolute; } } button { &.at-fileName, &.at-fileDownloadLink { background: none; border: none; text-align: left; color: @link-color; &:hover { text-decoration: underline; } .fa-file-pdf { color: @light-black; text-decoration: none; margin-right: 5px; } } &.disabled { pointer-events: none; cursor: not-allowed; -webkit-box-shadow: none; box-shadow: none; color: @nero-black; } &.at-hashIcon { display: none !important; } } //padding: 0; div[data-dojo-attach-point*="infoNode"] { display: none !important; } .at-uploadArea { margin: 15px 0; padding: 30px; border: 1px dashed @mid-grey; border-radius: 4px; text-align: center; i, span { display: none; } a { display: block; padding: 10px 20px; border-radius: 4px; border: 1px solid @custom-color; max-width: 200px; line-height: 1.25rem; text-decoration: none; margin: auto; &:before { content: "\f093"; font-family: "Font Awesome 5 free"; font-weight: 900; margin-right: 10px; } &:hover { background:@light-grey; border: 1px solid darken(@custom-color, 5%); } } } } .fm-repeater-add-control-locked, .fm-repeater-row-control-locked { display: none; } /* Error message color for invalid pdf file names */ .at-uploadError{ .at-fileDownloadLink, .fa { color: @error-red !important; } .dijitButton.at-tokenButton.dijitButtonDisabled.dijitDisabled.at-hidden{ display: none !important; } } .fa-key:before { content: "\f084"; font-family: "Font Awesome 5 Free"; font-weight: 900; } @media (min-width: 768px) { float: left; } } .messageToSigners .fm-elem-controlNode { display: block !important; } .ofDoc-extras { .fm-elem-caption, .fm-elem-controlNode, .fm-help-link{ display: inline-block; width: auto; font-weight: 400; } .ofDoc-contactPerson .fm-elem-controlNode { display: block; } @media (min-width: 768px) { float: left; } } .ofDoc-dateField { .dijitTextBox input { float: inherit; } .fm-elem-controlNode { display: contents; } .dijitDateTextBox { margin: 0; border: 1px solid @custom-color; border-radius: 4px; width: auto; .dijitDownArrowButton { input { width: 2.1rem; height: 2.1rem; background: @custom-color; color: @custom-color; margin: -1px; border-radius: 0 4px 4px 0; text-indent: -1rem; } &:before{ content: "\f073"; font-family: "Font Awesome 5 Free"; font-weight: 900; line-height: 20px; font-size: 1.1rem; background: @custom-color; color: @pure-white; position: relative; left: 1.5rem; top: 0.4rem; } } .dijitInputField { padding: 4px 10px; width: 7.5rem; } } } .ofDoc-signerWrapper { .fm-elem-container { &.signer-status { padding-top: 0; } } .d-lg-inline-flex { .fm-elem-container { &.signer-status { padding: 15px 0; } } } .done { .signer-status{ &:before { content: "\f00c"; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 0.375rem; color: green; } } } .waiting-others { .signer-status{ &:before { content: "\f141"; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 0.375rem; color: @orange-80; } } } table { display: flex; flex-wrap: wrap; tr { flex: 0 50%; position: sticky; //height: 190px; @media (max-width: 767.98px) { flex: 100%; } td { width: 100%; display: block; padding: 15px; &.fm-repeater-row-control { background: none; position: absolute; top: 20px; left: calc(100% - 3rem); width: 34px; padding: 0; vertical-align: middle; button { background: none; border: none; } .fa-minus-square { &:before { content: "\f00d"; } &.at-red { color: @pure-white !important; &:hover { color: @pure-white !important; } } } } } } } .fm-repeater-add-control { width: calc(100% - 1.125rem); padding: 1.125rem; margin: auto auto 30px; background: none; display: block; text-align: center; color: @custom-color; border: 1px solid @custom-color; i { vertical-align: middle; } ::before { padding: 20px; cursor: pointer; font-size: 2.5rem; content: "\f055"; } } &.ofDoc-deleteNoBtn .fm-repeater-row-control, .fm-repeater-add-control-locked, .fm-repeater-row-control-locked { display: none; } .ofDoc-signerName { padding-bottom: 0; } .ofDoc-signerPhone { padding-top: 0; } // The .ofDoc-signerEmail is removed here so that it works for all validation messages. .at-fieldValidationMessage { padding: 8px 20px; background: @pure-white; color: @dark-grey; border-radius: 20px; border: 1px solid @error-red; i { color: @error-red; } } } // Fix validation message in process name field (not part of ofDoc-signerWrapper) .ofDoc-inputWrapper{ .at-fieldValidationMessage { padding: 8px 20px; background: @pure-white; color: @dark-grey; border-radius: 20px; border: 1px solid @error-red; i { color: @error-red; } } } .ofDoc-thankYou { .ofDoc-thankYouTitle { font-size: 1.375rem; font-weight: 600; color: @custom-color; text-align: center; } } .tableLimitSelect { .dijitArrowButton { display: none; } .dijitInputField { padding-right: 1rem; } } @media (max-width: 767.98px) { .tableLimitMedia { width: 100% !important; } } .ofDoc-searchWrapper { .input-group > .form-control, .input-group > .form-control-plaintext, .input-group > .custom-select, .input-group > .custom-file { padding-left: 1em; border: 1px solid @custom-color; } .input-group { .search-bar { border-left: none; } .input-group-prepend { &.search-icon { border: 1px solid @custom-color; border-right: none; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } } } .input-group-text { background: none !important; border: none !important; } .custom-select::before { content: "\f078"; font-family: "Font Awesome 5 free"; font-weight: 900; line-height: 1.25rem; font-size: 1.125rem; color: @pure-white; background: @custom-color; width: 2.125rem; padding: 0.5rem; float: right; border-top-left-radius: 0; border-bottom-left-radius: 0; } .ofDoc-searchFilters { margin-bottom: 25px; .ofDoc-filtersDropDown, .ofDoc-searchBar { width: 300px; border: 1px solid @custom-color; border-radius: 4px; height: 35px; margin-top: 25px; @media (max-width: 767.98px) { width: 100%; } } .ofDoc-filtersDropDown { float: right; position: relative; @media (max-width: 767.98px) { float: left; } &:before { content: "\f078"; font-family: "Font Awesome 5 free"; font-weight: 900; line-height: 20px; font-size: 18px; color: @pure-white; background: @custom-color; width: 34px; height: 34px; display: inline-block; padding: 8px; float: right; border-radius: 0 4px 4px 0; } } .ofDoc-filtersDropDownTable { border: none; height: 35px; //outline: none; position: absolute; top: 0; width: 100%; .dijitSelectLabel{ padding-left: 10px; } } .ofdoc-btn.btn-primary { height: 35px; padding: 10px; margin-top: 25px; background: @custom-color; border: @custom-color; } .ofDoc-searchBar { &:before { content: "\f002"; font-family: "Font Awesome 5 free"; font-weight: 900; line-height: 20px; font-size: 18px; color: @pure-white; background: @custom-color; width: 34px; height: 34px; display: inline-block; padding: 8px; float: right; border-radius: 0 4px 4px 0; } .dijitInputContainer { line-height: 35px; padding-left: 10px; } } } .tableLimit{ max-width: 230px; } .table { caption { caption-side: top; text-transform: uppercase; span { text-transform: none; } } thead { th { vertical-align: middle; .btn { font-weight: bold; color: @pure-white; text-align: left; &.btn-block { display: inline-flex; align-items: center; padding: 0; &:hover, &:focus, &:focus-within { span { border: 1px solid @pure-white; } } span { border: 1px solid transparent; border-radius: 4px; padding: 3px 6px; text-align: center; display: inline-block; margin-left: 2px; .fa, .fas { &.text-transparent { opacity: 0; } &.sort-asc{ margin-right: -0.875rem; } } } } } } } .thead-primary { background: @custom-color; color: @pure-white; } &.table-hover { tbody { tr { &:hover, &:focus, &:focus-within { color: @neutral-90; background-color: @greyish-background; } } } } } .ofDoc-pageControls { text-align: center; //margin: 15px 0; button { min-width: 2.1875rem; height: 2.1875rem; margin: 0.3125rem; padding: 0.5rem; border-radius: 4px; line-height: 1.125rem; color: @custom-color; background: @pure-white; border: 1px solid @custom-color; display: inline-block; &.at-searchCurrentPageLink { background: @custom-color; color: @pure-white; &:hover { background: darken(@custom-color, 5%); border: 1px solid darken(@custom-color, 5%); color: @pure-white; } } &:hover { background: @light-grey; border: 1px solid darken(@custom-color, 5%); color: @custom-color; } &.at-disabled { display: none; } } } } .ofDoc-signingWrapper { .dijitTabPaneWrapper { position: inherit !important; width: 100% !important; } div[style*="z-index: -999; overflow: hidden; left: 0px; top: 0px"] { display: none; } .dijitContentPane { overflow: hidden; } .fm-repeater-group-row{ border: none; padding: 0; } .ofDoc-contactName { font-weight: 600; } .ofDoc-signerWrapper { .fm-repeater-group-row{ max-width: 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; display: inline-grid; @media (max-width: 767.98px) { max-width: 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } .ofDoc-signerName { padding-bottom: 0; } .ofDoc-signerEmail { width: auto; } } } .ofDoc-signatureWidget { overflow: hidden; .fm-group-body { margin:0; } table.at-xdssSignatureInfo-unverified { width: 100%; tr { display: flex; align-items: center; td { width: 3.125rem; } td:not(.at-xdssSignatureInfoCell) { min-width: calc(100% - 50px); } .at-xdssSignatureFields td.at-xdssSignatureCell { width: 100%; input { //outline: none; background: none; border: none; } } } } td.at-xdssSignatureInfoCell { padding: 0 1.25rem 0 0; button { display: inline-block; height: 2.19rem; width: 2.19rem; padding: 0; background: @pure-white !important; border-radius: 50%; border: 2px solid @custom-color; i { color: @custom-color; &.at-red { color: @error-red; } } &:focus, &:hover { border-radius: 5px !important; -moz-box-shadow: 0 0 5px 5px @blue-shadow; -webkit-box-shadow: 0 0 5px 5px @blue-shadow; box-shadow: 0 0 5px 5px @blue-shadow; } } } table.at-xdssSignatureFields { margin-bottom: 0; display: block; tbody { display: block; } tr { display: flex; flex-direction: column; justify-content: start; width: 100%; .at-xdssSignatureCell { text-align: left; margin: 5px; font-weight: 300; .at-xdssSignatureCaption { font-weight: 600; } } } } .ofDoc-signatureWidgetCol { .fm-group-body { display: flex; flex-wrap: wrap; align-items: center; > div:not(.fm-group-bookend) { max-width: 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 0 15px; &:nth-child(odd) > div { margin: 25px 0; } .fm-elem-container:not(:nth-child(1)):not(:nth-child(2)) { border-top: 1px solid @mid-grey; } &:nth-child(even) { border-left: 1px solid @mid-grey; margin: 25px 0; } @media (max-width: 767.98px) { max-width: 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; margin-bottom: 0; &:nth-child(even) { border-left: none; } &:not(:first-of-type) .fm-elem-container { border-top: 1px solid @mid-grey; padding-top: 25px; } } } } } } .ofDoc-signingButtons { .fm-group-body { padding-top: 25px; border-top: 1px solid @dark-grey; } } .at-fileSize, .at-xdssSignatureControls td.at-xdssSignatureInfoCell { display: none; } .ofDoc-extras .fm-elem-caption { display: inline-block; font-weight: 300; } .fm-elem-container { &.ofDoc-caseTitle { .fm-elem-controlNode { text-align: center; font-size: 1.75rem; font-weight: 400; line-height: 1.2; } } } .ofDoc-extras .ofDoc-creatorField{ .fm-elem-caption { display: none; } td.fm-itemSubContainer div { height: 24px !important; width: 18px; text-align: center; margin-left: -4px; i { line-height: 24px; padding: 0; font-size: 18px; } .fa.fa-check-square-o:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: @custom-color; } .fa.fa-square-o:before { content: "\f0c8"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: @mid-grey; } } } .ofDoc-decliningReasonWrapper{ .fm-group-body { border: none; padding: 0; } .at-fieldValidationMessage { margin-top:8px; } } .ofDoc-decliningReason { border: 1px solid @dark-grey; .fm-elem-container { padding: 0; margin-top: -1px; } .fm-caption-content { background: @dark-grey; color: @pure-white; padding: 0.3125rem 0.625rem; width: 100%; display: block; text-align: center; } .fm-elem-controlNode { padding: 15px 15px 0 15px; textarea { margin: 0; border: 1px solid @dark-grey; color: @grey-neutral-80; } } .fm-textarea-character-count { padding: 0 15px; font-size: 0.75rem; color: @grey-neutral-80; } .ofDoc-decliningReasonButtons .fm-group-body { display: flex; flex-wrap: wrap; align-items: center; > div { max-width: 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; @media (max-width: 767.98px) { max-width: 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; margin-bottom: 0; } } } } } a.ofDoc-signedDocumentName:not([href]):not([tabindex]), .ofDoc-signedAttachmentName { text-decoration: underline; color: @custom-color; cursor: pointer; padding: 5px 0; &:hover { color: darken(@custom-color, 5%); } } h2.fm-form-name { text-align: center; font-size: 28px; margin-top: 40px; margin-bottom: 60px; } /* .ofDoc-caseTitle { margin-bottom: 25px; } */ //Responsive cancel_reason_info_group .cancel_reason_info_group { .fm-textarea-character-count { display: none; } @media (max-width: 767.98px) { .fm-group-body > div { width: 100% !important; border: none; } } } .fm-group-caption { background: @dark-grey; color: @pure-white; font-size: 1rem; padding: 5px 10px; } // Removed 'display: none' style to make accessible labels .new-process { .ofDoc-noCaption { .fm-elem-caption{ label { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .fm-required-star { display: none !important; } } } } .ofDoc-mainSigning { .ofDoc-noCaption { .fm-elem-caption{ display: none; } } } .fm-repeater-row-control-locked, .ofDoc-documents .fm-repeater-add-control { display: none; } /** Style for multiple signers container **/ .columns-sm-6 .fm-group-body.fm-group-border-no { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; div.fm-repeater-group-row { -ms-flex: 0 0 50%; flex: 0 0 50%; .fm-group-body.fm-group-border-no { width: 100%; div:not(.fm-group-bookend) { width: 100%; max-width: 100%; flex: 100%; } } } /* Small devices (phones, 800px and down) */ @media only screen and (max-width: 800px) { div.fm-repeater-group-row { -ms-flex: 100%; flex: 100%; .fm-group-body.fm-group-border-no { width: 100%; div:not(.fm-group-bookend) { width: 100%; max-width: 100%; flex: 100%; } } } } .ofdocBtn-primary-small .fm-elem-controlNode{ margin-bottom: 0; } } .columns-sm-4 .fm-group-body.fm-group-border-no { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; div.fm-repeater-group-row { -ms-flex: 0 0 50%; flex: 0 0 50%; .fm-group-body.fm-group-border-no { width: 100%; div:not(.fm-group-bookend) { width: 100%; max-width: 100%; flex: 100%; } } } /* Small devices (phones, 800px and down) */ @media only screen and (max-width: 800px) { div.fm-repeater-group-row { -ms-flex: 100%; flex: 100%; .fm-group-body.fm-group-border-no { width: 100%; div:not(.fm-group-bookend) { width: 100%; max-width: 100%; flex: 100%; } } } } .ofdocBtn-primary-small .fm-elem-controlNode{ margin-bottom: 0; } } .ofDoc-statusIcon { line-height: 1.5625rem; height: 1.5625rem; font-size: 1.25rem; } //ofDoc color classes .ofDoc-red { color: @error-red; } .ofDoc-green { //color: @green; color: @custom-color; } .ofDoc-cyan { color: @cyan; } .ofDoc-orange-80{ color: @orange-80; } .ofDoc-neutral-90{ color: @neutral-90; } .ofDoc-neutral-90{ color: @neutral-90; &:hover { color: darken(@neutral-90, 10%); } } a.ofDoc-link-custom{ color: @custom-color; text-decoration: underline; } a.ofDoc-link-custom{ color: darken(@custom-color, 10%); &:hover { text-decoration: underline; } &:focus { text-decoration: underline; } } //Custom buttons for thank you page .gr_thank_you_navigation .fm-group-body { display: flex; max-width: fit-content; margin-left: auto; margin-right: auto; @media (max-width: 768px) { flex-direction: column; .fm-elem-container { padding: 0; } } } .thankYouNavigation { &.dijitButtonHover, &.dijitButtonFocused { .dijitButtonContents { .dijitButtonText { text-decoration: underline; } } } .dijitButtonContents { background: transparent; border: none; box-shadow: none; color: #006ACA; .custom-icon{ padding-right: 1rem; &:before { font-size: 1.5rem; } } } } .goHomeButton { .custom-icon:before { content: "\f015"; } } .goListViewButton { .custom-icon:before { content: "\f0ca"; } } .goCreateNewButton { .dijitButton { border-right: 1px solid #dee2e6; border-left: 1px solid #dee2e6; @media (max-width: 768px) { border-right: none; border-left: none; } } .custom-icon:before { content: "\f055"; } } //Overriding some of bootstrap classes and styles .navbar { padding: 0; height: 4.4rem; &.fixed-top { box-shadow: @navbar-shadow; -webkit-box-shadow: @navbar-shadow; z-index: 999; } .container-fluid { background-color: @pure-white; max-height: 70px; .nav-item { padding: 0.5rem 1rem !important; &.user-details { .fa-user-circle { color: @custom-color }; .user-name { font-weight: bold } } button { svg { margin-bottom: 0.15rem; } } } } } .navbar-brand { padding: 15px 0; } .bg-primary { background-color: @custom-color !important; } .text-primary { color: @custom-color !important; } table { tr { &[role=button]{ cursor: pointer; } } } .table-even-striped tbody tr:nth-of-type(even) { background-color: @table-stripes-color; } .table th, .table td { border-top: none; } .card { border: transparent; background: @pure-white; box-shadow: @card-shadow; border-radius: 20px; opacity: 1; .card-header { background: none; border-top: none; } .list-group-item { background: none; border-bottom: none; a { text-decoration: none; } } } .jumbotron { background-color: transparent; border: none; padding: 4rem 0 0 0; } .modal { .btn-outline-primary { color: @link-color; border-color: @link-color; &:not(:disabled) { &:hover, &:active { color: @pure-white; background-color: @link-color; } } } } .modal-open { .modal { &.fade { background: @shadow-color; } } } .notification { &.sticky-top { top: 4.4rem; // height of the navbar z-index: 998; } } .alert-dismissible .close { opacity: 1 !important; height: 100%; } .table { &.caption-top { caption { caption-side: top; font-weight: bold; text-align: center; } } } button { &:focus { outline: 1px solid @custom-color; outline: 5px auto -webkit-focus-ring-color; } } a { &:focus { outline: 1px solid @custom-color; outline: 5px auto -webkit-focus-ring-color; } } .btn-success { background: @custom-color; color: @pure-white; &:hover { color: @custom-color; background: @pure-white; } &:focus { color: @custom-color; background: @pure-white; } &:active { color: @custom-color; background: @pure-white; } } .btn-outline-success { color: @custom-color; border-color: @custom-color; &:hover { background-color: @custom-color; } &:focus{ box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } &:active{ box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } } .ofdoc-confirm { .dijitDialogCloseIcon { display: none !important; } } .ofdocBtn-primary-small { .dijitButton { margin: 0; .dijitButtonContents { min-width: 100%; padding: .375rem .75rem; border-radius: .25rem; border: 1px solid @custom-color; box-shadow: none; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; &:hover { color: @custom-color; background-color: transparent; } &:focus{ color: @custom-color; background-color: transparent; } &:active{ color: @custom-color; background-color: transparent; } } } } .button-link { .dijitButton { &.poke-signer { margin: 0; .dijitButtonContents { min-width: 1px; padding: 0; border: none; box-shadow: none; color: @link-color; background-color: transparent; .custom-icon:before { margin-right: 0.375rem; vertical-align: middle; content: "\f0e0"; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1.25em; } } } &.dijitButtonHover, &.dijitButtonFocused { .dijitButtonContents { .dijitButtonText { text-decoration: underline; } } } } } .button-link { .dijitButton { &.update-signer { margin: 0; .dijitButtonContents { min-width: 1px; padding: 0; border: none; box-shadow: none; color: @link-color; background-color: transparent; .custom-icon:before { margin-right: 0.375rem; vertical-align: middle; content: "\f044"; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1.25em; } } } &.dijitButtonHover, &.dijitButtonFocused { .dijitButtonContents { .dijitButtonText { text-decoration: underline; } } } } } .success { background-color: @custom-color; } .breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; color: @custom-color; content: "\f054"; font-weight: 900; font-family: 'Font Awesome 5 Free'; } /* .dijitTooltip { position: absolute !important; } */ .caption-bold .fm-caption-content { font-weight: bold; } /* language/locale selector styles */ .language-select { .btn-link { color: @link-color; } .btn-mute { color: @dark-grey; } } /** styles for signer-portal --- copied from sign/css/style.css **/ @media (max-width: 992px) { .container { max-width: fit-content; } } .auth-method { a { &.auth-link { min-height: 230px; &:hover { box-shadow: 0 3px 3px @shadow-color; opacity: 0.5; outline: 2px solid; } &:focus { box-shadow: 0 3px 3px @shadow-color; opacity: 0.5; outline: 2px solid; } img { vertical-align: middle; margin: auto; } } } } footer{ position: relative; bottom: 0; &.cust-footer { background: @custom-color; color: @pure-white; } } /** Overriding the UserDesktop.css styles **/ .dijitDialog { &:not(.ofDoc-loginDialog) { z-index: 1030 !important; } label { font-weight: initial; text-align: initial; width: 100%; } } /** signer portal loading icon style **/ .at-clickblockNotice{ background: none; } .poke-signer, .edit-email { padding-top: 0; } .updateSignerInfoButtons .fm-group-body { width: fit-content; } .confirmChangeButton { padding: 0 7px 7px !important; .dijitButton { margin: 0 !important; } .dijitButtonContents { padding: 5px 10px !important; min-width: auto !important; } } //Hides small loading icon in clerk view. .fm-manager-loader { display: none !important; } @media screen and (min-width: 992px) { .fm-repeater-group-row { .d-lg-inline-flex { // This can be removed if creates a problem (not used ATM) &.float-lg-left { max-width: 65% } &.float-lg-right { max-width: 35% } .fm-elem-container { &.poke-signer, &.edit-email { padding: 0; margin-left: auto; margin-right: auto; margin-bottom: 20px; } } } } } @media screen and (min-width: 768px) { .container .jumbotron, .container-fluid .jumbotron { padding-right: 0; padding-left: 0; h1 { font-size: 2.5rem; } } //Extra float left for bootstrap col-md-6 .col-md-6 { float: left; } } /* Medium devices (ipads and tablets, 991px and down) */ @media only screen and (max-width: 991px) { .navbar { .container-fluid { .collapse{ &.show { margin: auto -1rem; box-shadow: 0 0.5rem 0.5rem -0.5rem @shadow-color; -webkit-box-shadow: 0 0.75rem 0.5rem -0.5rem @shadow-color; border-top: 1px solid @light-grey; .navbar-nav { padding: 0 1rem; border-top: 1px solid @light-grey; } } } } } } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { .language-select.btn-group{ display: inline-grid; padding: 0.5rem; .btn { padding: 0; } .border-left, .border-right{ border: none !important;; } } .form-selector{ .row { margin: auto; } } } /* Try to remove the issue with the overlapping error message */ .at-fieldValidationMessage { position: inherit; display: inline-block; } /** Fix overlapping attachments and other adjustments to the file size and remove button placements. Probably not optimized. */ .at-fileControls{ position:relative!important; } .input-group{ flex-wrap: nowrap; } .new-process .at-fileToken .at-fileInfo .at-fileDownloadLink { width: calc(100% - 40px) } .at-fileToken .at-fileInfo { width: calc(100% - 10px); } .at-fileToken { padding:0; margin:0; } .ofDoc-displayNone{ display: none; } .dijitTooltip{ z-index:1500; } /** This will be set to document.body when showing send reminder dialog */ .ofDoc-disableScroll{ overflow: hidden; } .ofDoc-hotfixTooltip .dijitTooltip.dijitTooltipBelow.dijitTooltipABLeft { display:none; } /** Kiosk form styling */ .kioskFormName { font-weight: 400; text-align: center; font-family: Ubuntu; } .kiosk-documents .fm-group-caption { margin-bottom: 1rem; } .KioskClerk { display: none; } .kioskForm { padding-top: 65px; .fm-repeater-row-control { bottom: 180px !important; } .at-fileSize { display: none; } .at-deleteIcon { display: none !important; } } .kiosk-attachment .at-deleteIcon { display: block !important; } /** Styling for required fields error message. */ span.fm-failed-check-link{ cursor:pointer; color:@link-color; &:hover{ text-decoration: underline; } &:focus{ text-decoration: underline; } &:focus-within{ text-decoration: underline; } &:active{ text-decoration: underline; } } /** Styling corrections for expired, cancelled views after 'resend' functionality added. */ .processNamePassive { .dijitTextBox { border-bottom: none !important; } .dijitInputInner { text-align: center; font-size: 1.75rem; } } .signersGroupResize { .fm-repeater-group-row { max-width: 100% !important; padding: 15px; } .ofDoc-signerEmail { display: block !important; } } /** MeetingMinutes related */ .signerRole { display: contents; .dijitSelect { height: 1.6rem; border: 1px solid @dark-grey !important; border-radius: 0 !important; display: block; } .dijitSelect:focus-visible { outline: none; } .dijitSelect { &:hover, &:focus, &:focus-within { -moz-box-shadow: 0 0 5px 5px @blue-shadow; -webkit-box-shadow: 0 0 5px 5px @blue-shadow; box-shadow: 0 0 5px 5px @blue-shadow; } } .dijitSelect::before { background: @dark-grey !important; padding: 0 !important; height: 1.55rem; } } /** NDA related */ .agreementCheckbox { .fm-itemSubContainer { display: inline-flex; align-items: center; } .dijitCheckBox { margin-right: 0.5rem; margin-bottom: 0; } } /** Signer update buttons positioning */ .pb-03 { padding-bottom: 0.3rem; } .statusNode { display: flex; justify-content: space-between; } /** List of processes responsive styling */ @media (max-width: 1199.98px) { .largeViewHidden { display: none; } } @media (max-width: 991.98px) { .mediumViewHidden { display: none; } } @media (max-width: 767.98px) { .smallViewHidden { display: none; } } @media (max-width: 575.98px) { .x-smallViewHidden { display: none; } } //Additional caption for sequential process .additionalCaption .fm-elem-controlNode { display: none; } body:not(.clerk-view) { .additionalCaption { display: none; } }