/*******************************************************************************************************************/ /************************************** THIS IS A SITEBUILDER SYSTEM FILE ******************************************/ /************************** OVERRIDING THESE STYLES MAY RESULT IN LOSS OF FUNCTIONALITY ****************************/ /************** ANY ISSUES RESULTING FROM OVERRIDING THESE STYLES ARE NOT COVERED BY ESSENT SUPPORT ****************/ /*******************************************************************************************************************/ body, div, span, p, ul, ol, li, a, blockquote, input, button, table, thead, tbody, tr, th, td, h1, h2, h3, h4, h5, h6,fieldset { margin:0; padding: 0; line-height:1.75em; border:none; } table, thead, tbody, tfoot, tr, th, td, table caption { font-size: inherit; font-family:inherit; line-height:inherit; color:inherit } :focus { outline-color:transparent; outline-style:none; } /* sticky header styles */ .headerZone.sticky { min-height:129px; } .headerZone.sticky .MenuBar, .headerZone.sticky + div .ReturnBar { position:fixed; top:0; left:0; right:0; z-index: 150; } [role=button] { cursor: pointer;} /****************************** PAGE/ZONE/BODY LAYOUT CONFIG *****************************************/ /* flexbox body*/ .FormControls { width:100%; } .colZoneContainer { min-height: calc(100vh - 162px); max-width:1550px; display:flex; justify-content:flex-start; align-items:stretch; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;} .leftColZone { min-width:240px; flex-basis:240px; flex-grow:0; } .contentZone { max-width: 1310px; flex-grow:6.4; } .rightColZone { display:none; } body.interstitial .colZoneContainer, body.portalLogin .colZoneContainer { min-height: unset; } .systemFooter { height: 45px; padding: 5px 15px; display: flex; align-items: center; box-sizing:border-box; justify-content: space-between; } @media only screen and (max-width:1024px) { .systemFooter { flex-direction: column; } } .ZoneBoxHolder { text-align: left; display:table; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; width:100% ; } @media only screen and (min-width:1441px) { .leftColZone { min-width:230px;} .dashboard .leftColZone { min-width:230px; flex-basis:230px; flex-grow:0; } .dashboard .contentZone { max-width:1020px; flex-grow:6.4; } .dashboard .rightColZone { max-width:370px; min-width:310px; flex-basis: 310px; flex-grow: 0; display:block} } /* Tablet/narrow desktop screens -- only force the 3rd column in on the homepage and hide it otherwise*/ @media only screen and (max-width:1440px) { .leftColZone { min-width:230px;} .dashboard .leftColZone { min-width:230px; flex-grow:0; } .dashboard .contentZone { max-width:1020px; flex-grow:6.4; } .dashboard .rightColZone { max-width:310px; min-width:240px; flex-basis: 240px; flex-grow: 0; display:block} } /* On small screens, the Zones should expand to 100% and stack vertically */ @media only screen and (max-width:1024px) { #FormControls .ZoneBoxHolder { width: 100% !important; overflow-x:hidden; } #FormControls .colZoneContainer { width:100% !important; display: block!important; } #FormControls .leftColZone, #FormControls .contentZone, #FormControls .rightColZone { display: block !important; width:100% !important; } #FormControls .headerZone, #FormControls .footerZone { display: block !important; width:100% !important; } .contentZone { max-width: 1024px; } } /* Presentations / ClientPortal layout for direct access via URL */ #FormControls.directAccessDocument > .ZoneBoxHolder .leftColZone { display:none; } #FormControls.directAccessDocument > .ZoneBoxHolder .contentZone { width:100%; max-width:1550px;} /* Approve/reject */ .quotePresentation .itemDetail .approval label::before, .LineItemDetails .ItemDetailWrapper .approval label::before{ display:none; } .quotePresentation .itemDetail .approval, .LineItemDetails .ItemDetailWrapper .approval{ text-align: left; margin-right: 0.6em; } .LineItemDetails .ItemDetailWrapper .approval { max-height: 1.8em; } .quotePresentation .itemDetail .approval label, .LineItemDetails .ItemDetailWrapper .approval label{ display:inline-block; height:70px; width:70px; text-indent:-30em; background-repeat:no-repeat; background-size:contain; background-position:center; overflow:hidden; cursor:pointer; } .LineItemDetails .ItemDetailWrapper .approval label { height: 27px; width: 27px; margin-left: 4px;} /****************************** END PAGE/ZONE/BODY LAYOUT CONFIG *****************************************/ .statusBanner {position:absolute; left:0; right:0; top: 0; text-align:center; line-height:1.2em; overflow:hidden; z-index: 30000; } .statusBanner > span { line-height: inherit; display:inline-block; font-weight:800; } .statusBanner + .statusBanner { top:1.2em; } .statusBanner + .ZoneBoxHolder { margin-top: 1.2em; } .statusBanner + .statusBanner + .ZoneBoxHolder { margin-top: 2.4em; } @media only screen and (min-width:1550px) { .statusBanner { padding-right: calc(100vw - 1550px); } .interstitial .statusBanner { padding-right: 0; } } .sidebarWrapper { position:fixed; right:0; bottom:0; top:0; width:270px; padding:0.8em 0.8em 0 0.8em; background-color:white; z-index: 103; } .sidebarWrapper .closeButton { position:fixed; right:-10px; width:24px; border-radius: 16px; z-index:103; } .sidebarWrapper .closeButton .ui-button-text { line-height:10px; } .sidebarWrapper > div { z-index:104; } .sidebarWrapper ul li.MultiSelect.SubItem { padding-left: 1.6em; } .sidebarWrapper ul li.MultiSelect.Header { padding-left: 0.2em; } @media only screen and (max-width:360px) { .sidebarWrapper { width:85vw; } } /* END FLYOUT FINDER STYLE */ /* Basic label styles */ .FormLabel { white-space: nowrap; } /* Pricing Styles */ .ListPriceOnSale{ color:inherit; text-decoration:line-through;} .SalePrice{ color:Red; text-decoration:none;} .PriceTable{ border-collapse:collapse; width:auto; } .costFactor{ overflow:auto;} /* System Headers */ .PanelHeader{ padding:0.2em; padding-left:0.4em; margin:0px; vertical-align:middle; } td.PanelHeader{ margin-top:3px; margin-bottom:3px;} /*Surveys*/ div.surveyContent > iframe { width:100%; box-sizing:border-box; } .OrderDetailSurvey .PanelFooter { display:none; } .radioWrapper { display:block; white-space:nowrap; } /*style for groups of radio buttons that use radio button list control */ .GroupedRadioList{ border-style:solid; border-width:1px;} .GroupedRadioList td{padding-left:7px;} /*new styles*/ div.QuestionDiv { border-bottom: 1px solid #CCCCCC; padding:0.2em; display:flex; } div.QuestionDiv.LastQuestion:last-child { border-bottom: none; } .QuestionDiv > span { flex-basis: 50%; } .radioWrapper { display:inline-block; white-space:nowrap; } .QuestionDiv .singleRadioCol .radioWrapper { display:block; } .QuestionDiv > .multiRadioCol { display:table; } .QuestionDiv > .multiRadioCol > span { display:table-row; } .QuestionDiv > .multiRadioCol .radioWrapper, .QuestionDiv > .multiRadioCol .spacer { display: table-cell; } .multiRadioCol[data-rowlength="2"] .radioWrapper, .multiRadioCol[data-rowlength="2"] .spacer { width:50%; } .multiRadioCol[data-rowlength="3"] .radioWrapper, .multiRadioCol[data-rowlength="3"] .spacer { width:33%; } .multiRadioCol[data-rowlength="4"] .radioWrapper, .multiRadioCol[data-rowlength="4"] .spacer { width:25%; } .multiRadioCol[data-rowlength="5"] .radioWrapper, .multiRadioCol[data-rowlength="5"] .spacer { width:20%; } .multiRadioCol[data-rowlength="6"] .radioWrapper, .multiRadioCol[data-rowlength="6"] .spacer { width:16.6%; } .multiRadioCol[data-rowlength="7"] .radioWrapper, .multiRadioCol[data-rowlength="7"] .spacer { width:14.25%; } .multiRadioCol[data-rowlength="8"] .radioWrapper, .multiRadioCol[data-rowlength="8"] .spacer { width:12.5%; } .multiRadioCol[data-rowlength="9"] .radioWrapper, .multiRadioCol[data-rowlength="9"] .spacer { width:11.1%; } .multiRadioCol[data-rowlength="10"] .radioWrapper, .multiRadioCol[data-rowlength="10"] .spacer { width:10%; } /* Checkbox Menu styles */ .checkBoxMenu{border:1px #CCCCCC inset;} .clearAll { clear:both; height:0px; overflow:hidden; } .validator.tooltipBox { padding:0.2em 0.5em; font-size:90%; font-weight:600; } .validator > button { margin-left:0.5em; padding:0; font-size:inherit; } a.externalLink[href]::after { content: ' '; display:inline-block; vertical-align:middle; height:16px; width:16px; background-position: -32px -80px;} .CellArrow .onHoldIcon { max-height: 25px; max-width: 25px; cursor:default; vertical-align: middle } .systemIcon { max-height: 25px; max-width:25px; vertical-align:middle} .systemIconSmall { max-height: 20px; max-width:20px; vertical-align:middle} .addItem::before, .newRow::before, .newButton::before, .addButton::before { content: ' '; display:inline-block; margin-right:0.5em; height:1.1em; width:1.1em; vertical-align:middle; } /*Cart and general grid styles*/ .CartTable{ border-collapse:collapse; border-width:1px; border-style:solid; width:100%; } .CartTable td{ overflow:hidden; padding:0.4em 0.3em; border-style:solid; border-width:1px; line-height:1.55em; } .CartTable th { padding:0 0.3em; font-weight:600; text-align:center; } .CartTable th:first-child { text-align:left; } .CartTable th, .CartTable thead{ color:#FFFFFF; background-color:#999999;} .CartTable caption{ background-color:#CCCCCC; color:#FFFFFF;} .CartTable td table td{ line-height:1.2em; border: none;} .CartTable .actionRow td{ border-top:none; text-align:right;} .CartTable .infoRow td{ border-bottom:none;} .CartTable td input[type=image] { margin-right: 0.25em;} .CartTable td input[type=image]:last-child { margin-right: 0;} .CartTable .constrainedCell { overflow:hidden; text-overflow: ellipsis; white-space: nowrap; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } /*language switcher*/ .availLangList.talkBubbleContent { list-style-type:none; cursor:pointer; min-width:10em; } .availLangList li { list-style-type:none; text-align:left} div.LanguageSelector { display:inline-block; } .tabHeader { display:flex; justify-content:space-between } /* Reset line height to keep size of finder dialogs under control */ .ui-dialog-content .CartTable tr td { line-height:1.6em; padding: 0.1em 0.2em; } /* Set the alignment of headers on finder grids*/ .ui-dialog-content .FinderResults th { text-align:left;} .ui-dialog-content .FinderResults th.numeric { text-align:right;} .FinderResults img.headshot {max-height:50px; max-width:50px; } /* used to denote numeric and currency columns - nowrap for locales where number/currency/date includes breakable chars */ .numeric, .currency, .date { text-align:right; white-space:nowrap; } th.numeric, th.currency, th.date { white-space:normal } /* used for less important information within a grid */ .CartTable td span.subsection {font-size:85%; font-weight:normal; } .trumbowyg-box, .trumbowyg-editor { box-sizing:border-box; } /* the grid cells should turn into stackable, rearrangeable block elements when on small screens */ @media only screen and (max-width:750px) { .CartTable { width:100%; } .CartTable, .CartTable tr, .CartTable td, .CartTable th, .CartTable tbody .CartTable thead { -webkit-box-sizing: border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: border-box; display: block; border-width:0px!important; float:left; } /* The TR element should still clear all preceding elements and start a new entry */ .CartTable tr, .CartTable thead, .CartTable tbody { clear:both; overflow-y:hidden; width:100%;} .CartTable th, .CartTable td { height: 1.8em; border-width:0px; } /*Surveys.*/ div.QuestionDiv { display:block; } div.QuestionDiv > span:first-child { display:block; width: auto; } div.QuestionDiv > span input[type=text], div.QuestionDiv > span select { width: 100%; } .QuestionDiv > .multiRadioCol, .QuestionDiv > .multiRadioCol > span { display: block; } div.QuestionDiv > .multiRadioCol .radioWrapper, div.QuestionDiv > .multiRadioCol .spacer { display: block; width:auto } } /* Adaptive table layout -- used for tables where cells must float relative to each other */ .CartTable.AdaptiveGrid, .CartTable.AdaptiveGrid tbody, .CartTable.AdaptiveGrid thead { -webkit-box-sizing: border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: border-box; display: block; border-width:0px!important; width: 100%; } /* left/right padding for whitespace */ .CartTable.AdaptiveGrid tbody, .CartTable.AdaptiveGrid thead { padding: 0 5%; } .FormBlock .CartTable.AdaptiveGrid tbody, .FormBlock .CartTable.AdaptiveGrid thead { padding: 0; } /*This widget uses a floating display style rather than a straight grid, so all cells now have a default height */ .CartTable.AdaptiveGrid td { height: 3.65em; border-width:0px; text-overflow:ellipsis; white-space:nowrap; line-height:1.55em; padding-top:2em; padding-bottom:0.1em; } .FormBlock .CartTable.AdaptiveGrid td { padding-top:0.7em; height:2.5em;} .FormBlock .CartTable.AdaptiveGrid tr { margin-bottom:0.3em;} /* This widget uses a floating display style rather than a straight grid, so break the cells out from it. */ .CartTable.AdaptiveGrid tr, .CartTable.AdaptiveGrid td, .CartTable.AdaptiveGrid th { -webkit-box-sizing: border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: border-box; display: block; } .CartTable.AdaptiveGrid td, .CartTable.AdaptiveGrid th{float:left; text-align:center} .CartTable.AdaptiveGrid td:first-child, .CartTable.AdaptiveGrid th:first-child { text-align:left; } /* The TR element should still clear all preceding elements and start a new entry */ .CartTable.AdaptiveGrid tr, .CartTable.AdaptiveGrid thead, .CartTable.AdaptiveGrid tbody { clear:both; overflow-y:hidden; width:100%;} .CartTable.AdaptiveGrid th { font-size:90%; padding:0.1em; height:2.4em; line-height:2.4em;} /* This class can be applied to cells that form the bottom of a 2-line row to reverse the padding */ .CartTable.AdaptiveGrid td.AdaptiveBottomCell { padding-top:0.1em; padding-bottom:0.2em; text-align:left;} /* This class can be applied to cells that span the full height of a 2-line row to set the height and padding */ .CartTable.AdaptiveGrid td.AdaptiveDoubleHeightCell { height:7.3em; padding-bottom:2em; vertical-align:middle;} .FormBlock .CartTable.AdaptiveGrid td.AdaptiveDoubleHeightCell { height:5.2em; padding-bottom:0.7em; } /* final override for no-results row (anything with a colspan in this grid is a no-results record) */ .CartTable.AdaptiveGrid td[colspan] { width: 100% !important; padding-bottom:2em; height:auto; } .AdaptiveGrid td .editIcon { height:34px; width:34px;} /* generic expander toggle for all collapsible sections */ .ui-button.expandToggle, .ui-button.expandToggle.ui-state-active { border:none; background-color:transparent; width:16px; } .SectionHeader .ui-button.expandToggle { float: right;margin-top:0.5em; margin-right:0.5em; margin-left:1em;} .SectionHeader > button, .SectionHeader .newButton { float:right; margin-bottom:0.3em;} .SectionHeader .deleteButton { float:right;} .SectionHeader h3, .SectionHeader h6, .SectionHeader h5 { display:inline-block; } /* Standard input widths + formatting */ select, input, textarea, option{font-family:inherit; font-size:1em; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; background-color:inherit; } select {border: 1px solid #565656; font-family:inherit; } .fieldBlock input[type=text], .fieldBlock .ui-selectmenu-button { height:2.2em; } .fieldBlock.selfLabeledInput input[type=text] { height:inherit; } .stdDropdown{width:150px} .stdText{width:150px} .fontText{width:125px} .fontDropdown{width:125px} .titleText{width:350px} .smallText{width:100px} .positionDropdown{width:50px} .tinyText{width:50px} .medText{width:80px} .addressText{width:375px} .cityText{width:200px} .passwordText{width:190px} .nameText{width:160px} .settingDropdown{width:250px} .settingText{width:250px} .largeText{width:300px} .largeDropdown{width:300px} .xlargeText{width:400px} .xlargeDropdown{width:400px} .compactInput{width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;} .formInput { padding: 0.2em; } .datePicker { background-image: url(../Images/show-calendar.gif); background-repeat:no-repeat; background-position: right center;} /* basic setup */ .alignRight, td.alignRight, th.alignRight, .GridTable td.alignRight, .GridTable th.alignRight {text-align:right;} .alignCenter, td.alignCenter, th.alignCenter, .GridTable td.alignCenter, .GridTable th.alignCenter { text-align:center; } .startHidden { display:none; } .addressDisplay { display:block; clear:both; line-height:1.4em } .AddressDefinition .SectionHeader img { height:15px; width:15px; vertical-align:middle; padding-bottom:7px; } .addressUses { position:absolute; bottom:0.75em; right:0.75em; } .addressUseLabel {display: block; padding: 0.15em 0.2em; font-size: 70%; width: 5.2em; text-align: center; margin: 0 0.2em; } .addressName { font-size: 75%; margin-right:auto; } .addressFooter img[role=button] { width:1.5em; height:1.5em; margin-left:0.5em; align-self:bottom; } .addressFooter { box-sizing:border-box; width:100%; display:flex; justify-content: flex-end; align-items:center; max-height:1.5em; } .destinationPhone {margin: 30px 0; display: flex; } .stdCombo { width:135px; padding:0.2em; border:none !important; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; vertical-align:middle; } .stdCombo + button { width:15px !important; border:none !important; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; vertical-align:middle} .PercentSlider { float:left; width: 70%; margin-left:3px; margin-right: 3px; margin-top:5px; } .PercentSlider + input { width: 20%; margin-left:0.1em; float:left; clear:right; } .fieldBlock > .internalFooterButton { margin-top:0.5em; float:right; } .fieldWithButton { display:flex; flex-direction: row; justify-content:space-between; } .displaySet .fieldBlock { margin-bottom:0.5em; } .dispField label { display:block; } div.fieldBlock.dispField { margin-bottom: 0.5em; padding:0.3em 0.5em; } .buttonWithText.bottomText { display:flex; flex-direction:column; padding: 0.2em; justify-content:space-around; align-items:center; } .buttonWithText.bottomText span { font-size: 75%; line-height:1em; text-align:center } .dispField .invalid { font-size: 85%; word-wrap: break-word; line-height: 1.1em; font-style: italic; display: inline-block; } .formCol .fieldBlock.centeredChecklist{ min-height: 9.2em; display:flex; flex-direction:column; align-items:center; justify-content:center; } .formCol .fieldBlock.centeredChecklist > div > div { display: flex; flex-direction: row; align-items: baseline; margin-bottom: 0.1em; } .centeredChecklist img { width: 1em; margin-right:0.3em; } /* Feature billboards */ aside.billboard { margin:15px 0 0 0; padding:15px; } aside.billboard h6 { font-weight:500; } aside.billboard a, aside.billboard a:link, aside.billboard a:active, aside.billboard a:hover, aside.billboard a:visited { display: inline-block; font-weight:600; padding: 0 0.5em; text-decoration:none; margin-top:0.5em; } aside.billboard a:after{ content: "»"; margin-left: 0.3em; } /* Adds consistent show password button for all browsers*/ .passwordWrapper .showPassword { position: absolute; right: 0; background-color: transparent; margin-top: 0.2em; display:none; } .FormSection .passwordWrapper .showPassword { margin-top: 0;} .passwordWrapper { position: relative; display: block; } .PasswordChange.PopupContainer { position: absolute; } .PasswordChange.PopupContainer .Popup { right: 0; top: 2em; } .PasswordChange .Popup > div:nth-child(2), .PasswordChange .Popup > div:nth-child(3) { display: none; } .PasswordChange .Popup .saveItem { display: none; } .deleteButton { float: left; height:15px; cursor:pointer;} .sendButton { height:15px; cursor:pointer; } .deleteButton[disabled] { cursor: not-allowed;} .sendButton[disabled], .sendButton[aria-disabled=true]{ cursor:not-allowed; } .deleteContainer {height: 15px;margin-right: 1em;} .FormBlock > .deleteButton { float:right; } input[type=image] { display: inline-block; } input[type=image][disabled], input[type=submit][disabled], input[type=button][disabled] { cursor: not-allowed; } .contentZone input[type=image] { max-height:1.5em; } /* custom radio buttons */ input[type="radio"], input[type="checkbox"] { display: none; } input[type="radio"] + label, input[type="checkbox"] + label { display:inline-flex; align-items:center; font-size: inherit; line-height: 1.7em; padding: 0 0 0 0.2em; } input[type="radio"] + label:before, input[type="checkbox"] + label:before { content: " "; height: 0.8em; margin-right: 0.4em; width: 0.8em;background: white; border: 2px solid white; display:inline-block; flex-grow:0; flex-shrink:0; } input[type="radio"]:checked + label:before, input[type="checkbox"]:checked + label:before { background-color: #000000; } input[type="radio"] + label:before { border-radius: 0.8em; } /* Handle labeled Checkboxes within tables */ .selectAllCell > input[type=checkbox] + label {width: 1.2em;overflow-x: hidden;white-space: nowrap; min-height: 1.3em;} /*buttonset*/ .checkboxradioTabs.flexTabs { display:flex; justify-content: space-between; margin-right:0px; padding: 0.4em 0; text-align:center;} .checkboxradioTabs.flexTabs label { margin:0; padding: 0; justify-content:center; height: 100%; flex: 1;} .checkboxradioTabs.flexTabs label::before { display: none} /*activity details*/ #chkActivityGenDays label { width: 14.2%; display: flex; } /* add padding to separate checkboxes or radio buttons butted right up against each other */ label + input + label { margin-left:1em; } /*float checkboxes in headers to the right */ .SectionHeader input+label, .SectionHeader input { float:right; } .SectionHeader .subInfo::before { content: ' - '; margin-right:0.5em; } /* On small screens, the inputs should pop out to 100% of the widths of their parent elements */ @media only screen and (max-width:750px) { .formInput, .stdDropdown, .stdText, .fontText, .fontDropdown, .titleText, .smallText, .positionDropdown, .tinyText, .medText, .addressText, .cityText, .passwordText, .nameText, .settingDropdown, .settingText, .largeText, .largeDropdown, .xLargeText, .xLargeDropdown { width:100%; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .formCol .fieldBlock.centeredChecklist{ min-height: 6em; padding-bottom: 0.1em !important; } } /* Tables used for positioning, especially form inputs */ @media only screen and (max-width:750px) { table.layout, table.layout tr, table.layout td { display:block; float:left; margin:0; padding:0.1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box; } table.layout td { width:50%; position:relative; } table.layout, table.layout tr { width:100%; } table.layout td img { position: absolute; right:0; } /*remove headers in rightmost column when stacking*/ .rightColZone .widgetHeader { display:none; } } /* Multi-column forms, especially those where columns need to be able to expand relative to each other on wide screens */ div.FormSection { padding: 0 5% 1em 5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box; } div.FormSection .CartTable { margin-top:1em; } div.FormBlock, div.formCol.FormBlock { margin-top: .5em; } div.FormBlock.collapsed .formSubsection { display:none; } div.FormBlock.collapsed {padding-bottom:1em;} div.FormBlock .twoColForm .twoColForm {padding:0;} /* styles for a finder submit button*/ .popUpFinderContent .finder .buttons { right: 0;} .popUpFinderContent .finder button { height: 2.3em} .popUpFinderContent .finder { margin-bottom: 0.5em;} /* styles for a detail block that can wrap around a FormBlock */ .itemDetail { padding:1em; border-bottom:1em solid white; background-color: #F5F5F5; clear:both; border-top:1em solid white; } .itemDetail .detailHeader > span { font-size: 13pt; color: #0082C6;} .itemDetail .detailHeader button, .itemDetail .detailHeader img { float:right; } .itemDetail .detailHeader .deleteButton { margin-left:1em; height: 17px; margin-top:0.4em; } .itemDetail textarea { width: 100%; border: none; resize: none} div.formCol { margin:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box; padding:1em 0.75em;} .shippingOverrideNoticeWrapper div.formCol.inlineNotice.noticeWrapper { padding: 0; margin-top: .5em; } .subCard div.formCol { padding-top:0; padding-bottom:0; } .subCard .subCardDesc, .subCardDesc{color:initial; font-weight:600; padding-left:0.5em;} .subCard:not(.collapsed) > .titleControl .subCardDesc{display:none} div.formCol:first-child, .SectionHeader + .formCol, div.formCol.singleColForm{ padding-left:1em;} div.formCol:nth-last-child(2), div.FormBlock.singleColForm , div.FormBlock .singleColForm{ padding-right:1em;} .sidebarFinder div.formCol:nth-last-child(2){padding-right: .75em; padding-left: 1em;} .SectionHeader ~ .formCol, .SectionHeader ~ .formSubsection { padding-top:0.75em; } .SectionHeader.filters { display: flex; flex-direction:row; justify-content:center; align-items:center} .SectionHeader.filters > span { text-align:right; white-space:nowrap; padding: 0 0.5em;} .SectionHeader.filters > span .FormLabel, .SectionHeader.filters > span label { font-weight:bold; vertical-align:middle;} .SectionHeader.filters > span .ui-selectmenu-button, .SectionHeader.filters > span .finder { width:60% !important; vertical-align:middle; min-width:10em; } /* subdivides form blocks with multiple column layouts; each columnset is in a form subsection*/ .formSubsection:first-child { padding-top:1em; } .formSubsection:last-child { padding-bottom:1em; } .formSubsection > .formCol { padding-top:0px; padding-bottom:0px;} div.twoColForm.formCol { width:50%; border-width:0px !important; float:left; } div.threeColForm.formCol { width:33.3%; border-width:0px !important; float:left; } div.threeColForm.formCol.doubleCol { width:66.6%;} div.fourColForm.formCol { width:25%; border-width:0px !important; float:left; } div.fourColForm.formCol.doubleCol { width:50%; } div.fourColForm.formCol.tripleCol { width:75%; } @media only screen and (max-width:750px) { div.twoColForm.formCol { padding-left: 0.75em; padding-right: 0.75em; } } /*two columns within two columns*/ div.formCol .TwoInnerCol { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 50%; float:left; } div.formCol .TwoInnerCol:first-child {padding-right:0.75em;} div.formCol .TwoInnerCol:nth-child(2) { padding-left: 0.75em } /*four columns within two*/ div.formCol .FourInnerCol { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 25%; float:left; padding-right:0.75em; } div.formCol .FourInnerCol:nth-child(4) { padding-left: 0.75em; padding-right:0; } /* get rid of two column styles for finders */ .sidebarFinder div.twoColForm.formCol .TwoInnerCol { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; float:none;} .sidebarFinder div.twoColForm.formCol .TwoInnerCol:first-child { padding: 0 0 .3em 0;} .sidebarFinder div.twoColForm.formCol .TwoInnerCol:nth-child(2) { padding: .3em 0 0 0; } #pnlExternalSalesTaxCodes div.twoColForm.formCol .TwoInnerCol:nth-child(2) { padding-top:1.75em;} #pnlExternalSalesTaxCodes div.twoColForm.formCol .TwoInnerCol:nth-child(2) label { padding-right:1em;} div.formCol .AutoWidthCol { display: flex;} div.formCol .AutoWidthCol .fieldBlock{flex-grow:1; flex-basis:10%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} div.formCol .AutoWidthCol .fieldBlock:not(:last-child){padding-right:0.75em;} div.formCol .AutoWidthCol.Linked .fieldBlock:not(:last-child){padding-right:0.35em;} .PaymentForm.FormBlock div.twoColForm.formCol .TwoInnerCol:first-child { width: 35% } .PaymentForm.FormBlock div.twoColForm.formCol .TwoInnerCol:first-child > span { float: right} .PaymentForm.FormBlock div.twoColForm.formCol .TwoInnerCol:nth-child(2) { width: 65% } .PaymentForm .CompanyInfo { overflow:hidden; text-overflow: ellipsis; } div.twoColForm.formCol.ItemAvailability { margin: 1em; width: 46% } .fieldBlock input + .DisplayLabel{ display:block; font-size:smaller; } div.formCol .singleColForm .fieldBlock.tripartiteCol { width:32% } div.formCol .singleColForm .fieldBlock.tripartiteCol:nth-child(n) { padding-left: 1% } /*handle payment card ui*/ .CardInfoForm { display:flex; flex-wrap:wrap; align-items:flex-end; } .CardInfoForm > div { padding:0.2em 0; box-sizing:border-box; } .CardInfoForm .payMethodName { width:100%; padding-top:0; } .CardInfoForm .payMethodAddress { width:70%; padding-right:0.2em; } .CardInfoForm .payMethodZip { width:30%; } .CardInfoForm .payMethodAddress + .CardInfoForm .payMethodZip { padding-left:0.2em; } #cardPop #ifrCardForm {width:100%;height:275px;display:block;margin:0.5em auto; border-style:none; box-sizing:border-box; } /* subsectioned columns -- datepickers sometimes have these */ div.formCol .fieldBlock.splitCol { width:50%; float:left; clear:none; } div.formCol .fieldBlock.splitCol:nth-child(2n+1) { clear: right; } #accessControlNotification .notification { text-align: left; } #accessControlNotification .notificationBubble { width: 30em; margin-left: -220px; } #accessControlNotification .notificationBubble::before { left: 52.5%; } div.formCol .fieldBlock.tripartiteCol .button{ display: block; border: none; width: 99%; text-align: center; font-size: 24px; cursor: pointer; position: relative; padding: 10px 0; } div.formCol .fieldBlock.tripartiteCol .button.selected:after{ position: absolute; bottom: 0; height: 0; width: 0; left: 49%; content: " "; display: block; } div.formCol .fieldBlock.tripartiteCol { width:33%; float:left; clear:none; } div.formCol .fieldBlock.tripartiteCol.leftTripartite, div.formCol .fieldBlock.tripartiteCol.centerTripartite { width:32%; float:left; clear:none; padding-right:2%; } div.formCol .fieldBlock.tripartiteCol.rightTripartite { width:32%; float:left; clear:none; } div.formCol .fieldBlock.tripartiteCol:nth-child(2n+1) { clear: right; } @media only screen and (max-width:600px) { div.threeColForm.formCol, div.threeColForm.formCol.doubleCol {width:100%; padding-left:1em; padding-right:1em;} div.threeColForm.formCol.expendable { display:none; } } .FormBlock { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; font:inherit !important; } div.FormBlock .SectionHeader { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%; font:inherit !important; padding: 0.75em 1em 0;} div.FormBlock.twoColForm .SectionHeader { padding-left: 0; } div.formSubsection .SectionHeader { padding:0 1em; } div.formSubsection + div.formSubsection .SectionHeader { padding-top:0.75em; border-top:0.3em solid white; } div.FormBlock.singleColForm .SectionHeader { padding:0;} div.FormBlock.singleColForm .SectionHeader .addItem, div.FormBlock.singleColForm .SectionHeader .newButton { position:relative; bottom:2em; right:2em;} div.FormBlock.LinkedForm { margin-top:0.3em;} .formCol .fieldBlock { padding: 0.3em 0; clear:both; min-height: 4em; vertical-align:bottom; } .formCol .fieldBlock.halfHeight { min-height:2em; vertical-align:bottom; } .formCol .fieldBlock.doubleHeight { min-height: 9.6em; overflow:hidden; } .formCol .fieldBlock.doubleHeight.address { overflow:visible; } .formCol .fieldBlock.noLabel { padding-top: 1.8em; } .imgBlock{text-align:center;} .imgBlock img {height:7em;vertical-align:middle;} .imgBlock .ProcessArrow {height:auto;} .imgBlock .Truck {position:relative;} .fieldBlock.singleCheckbox { padding-top:2.1em; text-align:right; min-height: 2.2em; } .FormBlock.formCol { width:inherit; } /* NOTE: 1.3 em font size DISABLED due to poor appearance on small screens */ /*.fieldBlock .FormLabel { font-size: 1.3em; }*/ /* for larger weights on checkboxes and radio buttons */ .fieldBlock .compactInput, .fieldBlock input + label { font-weight: 600; /*font-size: 1.3em;*/ } /* Checkbox blocks */ .fieldBlock.checkboxBlock { padding-top:1.7em; min-height:auto; } /*Clear Image*/ .clearImage, .clearFinder {float:right; bottom:0; left:0; right: 0 ; z-index:10;} /* password/headshot entry blocks */ .fieldBlock .thumbset { min-height: 6.2em; margin-top:1em; padding:0.5em;} .fieldBlock.password{ min-height:8.6em; } .fieldBlock .thumbset .headshot {display:inline-block; height:6.2em; position:relative; margin-right:0.5em; width:6.2em; line-height:6.2em; } .fieldBlock .thumbset .headshot img { max-height:6.2em; max-width: 6.2em; margin: 0 auto; } .fieldBlock .thumbset .headshot .msg { position:absolute; bottom:0; left:0; right: 0; opacity:0.7; font-size:80%; text-align:center; cursor:pointer; } .fieldBlock .thumbset > div { display:inline-block; vertical-align:middle; } /* flexible fieldset for displaying multiple controls as 1 line */ .flexFieldset{ display:flex;display:-webkit-flex;justify-content:space-between;align-items:flex-start; } .flexFieldset > div + div { padding-left:0.2em; -moz-box-sizing: border-box; } .flexFieldset .ui-selectmenu-button { width:100% !important; } .FormSection.PanelFooter { margin-top:0px;} .FormSection > :first-child { margin-top: 2em; } .FormSection.PanelFooter > :first-child { margin-top: 0.75em; } .FormBlock.singleColFormSection { width:49%; margin-right:1%; float:left;padding:0.75em 0.75em 0.75em 1em; } .FormBlock.singleColFormSection + .FormBlock.singleColFormSection { margin-right: 0; margin-left:1%; float:left; padding-left:0.75em; padding-right:1em; } @media only screen and (max-width:750px) { .FormBlock.singleColFormSection { width:100%; margin-left:0; margin-right:0; padding:0.75em 1em; } .FormBlock.singleColFormSection + .FormBlock.singleColFormSection { margin-left:0; margin-right:0;padding:0.75em 1em; } } /* phone number blocks */ .fieldBlock.phoneWithExt label, .fieldBlock.pairedLabeledTextInputs label { display: inline-block; width: 79%; } .fieldBlock.phoneWithExt label + label, .fieldBlock.pairedLabeledTextInputs label + label { width:19%; float:right; } .fieldBlock.phoneWithExt .compactInput, .fieldBlock.pairedLabeledTextInputs .compactInput { width: 79%; } .fieldBlock.phoneWithExt .compactInput + .compactInput, .fieldBlock.pairedLabeledTextInputs .compactInput + .compactInput { width: 19%; float:right; } .inlineCardData { display: inline-block; width:32.9%; } .inlineCardData label { display: block; } /* CC Exp blocks */ .fieldBlock.cardExp span { display:inline-block; width:19%; } .fieldBlock.cardExp span:first-child { width:59%; } .fieldBlock.cardExp .compactInput { width:19%; margin-left:59%; margin-right:0; text-align:right; } .fieldBlock.cardExp .compactInput + .compactInput { width:19%; margin-left:1%; margin-right:0} /* Address input */ .fieldBlock.address { width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box; min-height:8em; } .fieldBlock.address .FormLabel { padding-bottom:0.2em; } .fieldBlock.address .addressWrapper { font-weight: 600; line-height:1.3em; min-height:6em } .fieldBlock.address .addressWrapper span { padding:0.2em; margin-top:0.2em; } .fieldBlock.address .addressWrapper span:last-child { vertical-align:bottom; } .fieldBlock.address .addressWrapper { display: block; padding:0.75em; margin-top: 0; margin-right:1px; } .fieldBlock.address .addressWrapper .finderButton { float: right; cursor:pointer; } .fieldBlock.address .addressWrapper .finderButton.finderImage { height:20px; } .fieldBlock.address .addressWrapper .finderButton[disabled] { float: right; cursor:not-allowed; } .fieldBlock.address .addressWrapper span:not(.deleteConfirm) { display: inline-block; margin:0; padding:0; line-height:1.3em;} .fieldBlock.address .addressWrapper span.headshot { margin-right: 1em } .fieldBlock.address.overflowOverrideVisible { overflow:visible; } .addressWrapper, .addressWrapper span.headshot { border-radius:8px;} .addressWrapper, .addressWrapper span.headshot.customerLogo { border-radius:0px;} .addressWrapper .DisplayInfo { overflow: hidden; text-overflow: ellipsis; width: 60% } .addressWrapper .EditIcon { height:32px; position: absolute; top:0.75em; right:0.60em; cursor:pointer;} .addressWrapper .FormLabel { font-weight: initial; } /* Definitions */ aside.defBlock {padding: 0.75em; position:relative;} aside.defBlock p + p { margin-top:0.75em; } aside.defBlock strong:first-child::after { content: ' - ' } aside.defBlock::before { content: '*';font-family: Verdana,Helvetica,sans-serif;font-size: 3em;font-weight: bold; left: -0.25em; position: absolute; top: -0.1em; } aside.defBlock.Notice { display: flex; align-items:center; } aside.defBlock.Notice + aside.defBlock.Notice { margin-top:1em; } .FormBlock aside.defBlock.Notice > div { line-height:1.1em; font-size:10pt; } .FormBlock aside.defBlock.Notice > div span { line-height: inherit; } aside.defBlock.Notice::before { content: ' '; position: static; height: 25px; width: 25px; margin: 0 0.25em 0 0.1em; flex-shrink: 0; flex-grow: 0; top: 0em; } .sidebarWrapper aside.defBlock.Notice > div, .sidebarWrapper aside.defBlock.Notice .NoticeMsg { line-height:1.1em; font-size:9pt} aside.defBlock.OK::before { height: 20px; width: 26px; } .messageBlock { display:flex; padding:1em; } .messageBlock.Warn::before {content: ' '; background-repeat:no-repeat; background-size:contain; width:5em; height:3em; flex-grow:0; margin-right:1.5em; background-position:center; } aside.defBlock .NoticeBtn { margin: 0 .5em; } aside.defBlock .NoticeBtn .CancelButton { display: flex; } aside.defBlock .NoticeBtn.small button { font-size: 90%; white-space:nowrap} aside.defBlock a { line-height:inherit; } /*notifications + definitions in quickadd */ .sidebarWrapper aside.defBlock.Notice::before { margin: 0 0.1em; } /**************************** TIMELINE ****************************/ .timeline { border-left:1px solid black;} .timeline, .timeline ul { list-style-type: none; margin: 0; padding: 0; } .timeline { border-top:1px solid #999; border-bottom: 1px solid #999; } .timeline li { margin-left:0.7em; margin-top:0.6em; position:relative; } .timeline li::before { content: '\25CF'; position: absolute; left: -1.05em; color:inherit;} .timeline li > strong { display:inline-block; margin-left:0.7em; vertical-align:top;} .timeline li > ul { margin-left:-0.7em; color: #999 } .timeline > li > ul > li { margin-top:0.8em;} .timeline > li:last-child > ul > li:last-child { margin-bottom:0.8em;} .timeline p { margin: 0 0 0 1em; font-size:80%; line-height:1.3em;} .timelineContents { margin-right:1em; } .timelineContents, .timelineBody { margin-top:1em; } .timelineBody { margin-bottom:1em; } .timelineContents h5 { float: left; vertical-align:middle; width: 40%} .timelineContents .ui-selectmenu-button { float:right; vertical-align:middle; font-weight:500; max-width:55%;} .timelineContents .ui-selectmenu-button span.ui-selectmenu-text { padding: 0.2em 2.1em 0.2em 0.5em; } .timelineContents select { width:105px; } .timelineContents > div:first-child { margin: 2.7em 0 1.5em 0; } @media only screen and (max-width:750px) { /*rearrange timeline for mobile*/ .timelineContents { margin-left: 1em } } /********END TIMELINE *******/ /* EMPLOYEE FINDER */ .FinderButton { max-height:20px; } .employeeFinder, .labelFrame, .addressWrapper { position:relative; background-color:white; border-radius:0.35em; box-shadow: gray 1px 1px 0px; padding:0.75em; display:block; } .employeeFinder .headshot, .labelFrame .headshot, span.headshot {height:75px; width:75px; text-align:center; display:inline-block; margin-right:1em; overflow:hidden; float:left; vertical-align:middle; } .employeeFinder .headshot img, img.headshot, span.headshot img, div.headshot img { max-height:75px; max-width:75px; object-fit:cover; object-position: top; height:inherit; width: inherit; border-radius: 50%;} .labelFrame .headshot img {max-width: 75px; max-height: 75px;} .employeeFinder .FinderButton { position: absolute; right: 0.75em; top: 0.75em; cursor:pointer; max-width:20px;} .employeeFinder .deleteButton { position: absolute; right: 0.75em; bottom: 0.75em; cursor:pointer; } .employeeFinder .DisplayLabel:after {content: ' '; display:block; clear:both; height:0px; } .employeeFinder .ActionIcon { position: absolute; right: 2.5em; top: 0.75em; cursor:pointer; max-width:20px;} .employeeFinder .DisplayLabel > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*Wrap around FinderButton and ActionIcon*/ .iconsWrapper { position:absolute; top: 0.75em; right: 0.75em;} .iconsWrapper .ActionIcon, .iconsWrapper .FinderButton { position: static; width:1.5em; height: 1.5em} /* adds spacing to top of finder to match up if in the same row as a regular input */ .employeeFinder.addLabelSpace { margin-top:1.75em; } /*employee finder empty state w/plus symbol*/ .employeeFinder.empty::after { content: ' '; display: block; clear: both; } .employeeFinder.empty .headshot::before { display: block; content: '+'; height: 75px; width: 75px; font-size: 75px; line-height: 70px; } .employeeFinder.empty .DisplayLabel, .employeeFinder.empty > br {display:none;} .employeeFinder.empty .FormLabel { margin-top: 1.8em; float: none; display:inline-block; } /* Employee Team Finder */ .EmployeeTeamFinder .teamListEntry { width:13%; padding: 0em 1.0em 1.0em; float:left; text-align: center; } .EmployeeTeamFinder .headshot, .roundheadshot {height:75px; width:75px; text-align:center; margin:auto; overflow:hidden; vertical-align:middle; border-radius: 50px;} .EmployeeTeamFinder .FinderButton {height: 19px; float: right; cursor: pointer;} .EmployeeTeamFinder .ActionIcon {height: 19px; float: right; cursor: pointer;} .EmployeeTeamFinder .EmployeeTeamList {list-style-type: none;} .ui-dialog-content table.filters td:nth-child(odd) { padding-left:1em; } .pagination { text-align:center; } /* address list */ .labelFrame.address { line-height:1.35em; min-height:5.8em; } .labelFrame .EditIcon, .labelFrame .StatusIcon { height:22px; position: absolute; bottom:0.75em; right:0.60em; cursor:pointer;} .labelFrame .ActionIcon, .addressWrapper .FinderButton { height:22px; position: absolute; top:0.75em; right:0.75em; cursor:pointer;} .labelFrame .AddressVerification, .addressWrapper .AddressVerification { height:24px; position: absolute; top:0.75em; right:2.75em; cursor:pointer;} [disabled] .EditIcon, [disabled] .ActionIcon { cursor:not-allowed; } .StatusIcon[disabled] {cursor:default} /* address verification */ .AddressVerificationDetail .verificationButton, .AddressVerificationDetail .findVerifiedAddressesButton {display:flex;justify-content:center; } .AddressVerificationDetail .twoColCenteredHeader { display:flex;justify-content:center;} .AddressVerificationDetail .originalAddress, .AddressVerificationDetail ..VerifiedAddress { margin-bottom: 0.5em; } .notificationIndicator img { vertical-align: baseline; height: 1.7em; } .verifiedAddresses { overflow-y:auto; max-height:380px; padding-right:0.1em } .verifiedAddresses .addressWrapper { cursor:pointer; } .verifiedAddresses .addressWrapper.noVerifiedAddresses { display:flex; align-items:center; justify-content:center; } .verifiedAddresses .addressWrapper + .addressWrapper { margin-top: 0.5em; } .VerifiedAddress .addressWrapper { position:relative; } .addressWrapper[aria-checked=true]::after { content:' '; display:block; height:2em; width:2em; position:absolute; top:0.5em; right:0.5em; background-size:contain; background-repeat:no-repeat; background-position:center; } /* recipient list*/ .Recipient .labelFrame .ActionIcon,.Recipient .labelFrame .FinderButton { height:22px; position: absolute; top:0.75em; right:0.75em; cursor:pointer;} .Recipient .labelFrame .DeleteIcon { height:19px; position: absolute; top:65%; right:1em; cursor:pointer;} .CommissionDistribution {text-align:right; margin-right:3em;} .CommissionDistribution .SplitPercent{color:#0082C6;} .CommissionDistribution .SplitAmount,.CommissionDistribution .RebateAmount,.CommissionDistribution .DonationAmount{font-size: 2em; color:#000000;} /*Document Delivery*/ .labelFrame div.FormLabel { overflow:hidden; text-overflow: ellipsis; padding-right: 3em } @media only screen and (max-width:400px) { .labelFrame div.FormLabel{max-width:23em;} } /* confirmations */ .deleteConfirm, .linkConfirm, .actionConfirm, .statusConfirm { white-space:nowrap; display:inline-block; z-index:10 } .statusChangeConfirm { white-space:nowrap; display:inline-block; z-index:5; font-weight:bold; position: absolute; cursor: pointer; } .statusChangeConfirm.statusConfirmCircle { border-radius: 0 1.5em 1.5em 0em; } .statusConfirm { padding: 0.2em 0.5em 0.2em 0.7em; position: absolute; float: right; } /* this trick ensures that one-line formblocks align to the bottom without breaking IE10 */ div.FormBlock > *:first-child:last-child { margin-top: 1.79; } /* stack form columns vertically on narrow screens */ @media only screen and (max-width:750px) { div.FormSection { padding: 0 0.3em 1em 0.3em; width:100%; } div.formCol {width:100% !important; float:none; clear:both; } div.formCol.fourColForm { width:50% !important; float:left; clear:none; } div.formCol.fourColForm.doubleCol { width:100% !important; } .formCol .fieldBlock { padding: 0.3em 1em !important; } .formCol:first-child .fieldBlock:first-child, .formCol.fourColForm:nth-child(2) .fieldBlock:first-child { padding-top:1em !important; } .formCol:nth-last-child(2) .fieldBlock:last-child, .formCol.fourColForm:nth-last-child(3) .fieldBlock:last-child { padding-bottom:1em !important } } /* tabbed widget display */ .ControlBarHeader, .ControlBarNav { line-height: normal; clear:both;} .ControlBarNav { padding: 0 5%; height:2.7em; position:relative } .ControlBarNav.uneven > div { table-layout:auto;} .ControlBarNav > div { display:flex; } .ControlBarNav .tab { height:2.2em; padding: 0.2em 1em; line-height:normal; vertical-align:top; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-grow:1 } .ControlBarNav .tab.warning::after { display:inline-block; content:' '; height:1em; width:1em; overflow:hidden; vertical-align:middle; margin-left:0.5em; background-size:contain;} .ControlBarNav .tab[disabled] { cursor: default;} .ControlBarNav .tab.active { height:2.25em; position:relative; top:-0.2em; padding-top:0.4em;} @media only screen and (max-width:750px) { /*uneven is used for product add dialog navigation. currently the mobile version design is not available yet, exclude it*/ /*Alphabet is not used for column style, keep the original*/ div.ControlBarNav:not(.AlphabetNavigationBar):not(.uneven){padding:0; height:auto; border-bottom:0;} .ControlBarNav:not(.AlphabetNavigationBar):not(.uneven) > div{flex-direction:column} .ControlBarNav:not(.AlphabetNavigationBar):not(.uneven) .tab{padding:0.2em 0.5em; order:2; align-self:baseline; text-align:left} .ControlBarNav:not(.AlphabetNavigationBar):not(.uneven) .tab:not(.active){padding-left:1.5em; background-color:white; display:block;width:100%; box-sizing:border-box; height:3em; border-bottom:1px solid #ddd} .ControlBarNav:not(.AlphabetNavigationBar):not(.uneven) .tab.active{order:1; top:0em; margin-left:1em; padding:0 1em;} .ControlBarNav.close:not(.AlphabetNavigationBar):not(.uneven) .tab:not(.active){display:none !important; } .ControlBarNav.AlphabetNavigationBar {height:auto} /*menu bar arrow*/ .ControlBarNavMenuToggle{display:block; position:absolute; right:0; background-size:3em; background-repeat:no-repeat; height:2em;width:2em; background-position:center center; top:0.4em; padding-right:2em; cursor:pointer} } .ui-dialog .ControlBarNav {padding: 0em 1.5em; height:2em;} .ui-dialog .ControlBarNav .tab { text-align:center;} /* Please Wait message */ .PleaseWait{ background-color:#FFFFFF; border: solid 1px #000000; width:370px; padding:10px; color:#000000} .PleaseWait h1{ padding-right:15px;} /*styles for system error--these are locked colors*/ .errImage{ padding:5px 10px 5px 0; float:left; width:10%; } .errBlock{ padding:5px; border-color:Red; background-color:White; color:Black; border-width:thin; border-style:solid; overflow:auto; text-align:left; line-height:1em; margin:5px;} .errBlock p { margin:0.5em 0; line-height:1.4em; } .errBlock a, .errBlock a:active, .errBlock a:visited, .errBlock a:hover { color:Blue; text-decoration: underline;} /*General formatting overrides and special format classes*/ .link{cursor:pointer;} .spacer{padding:5px;} .HiddenField{ display: none;} td.DisplayOneLine{white-space:nowrap;} .helpIcon{float:right;} .PanelFooter { text-align: right; margin-top:0.5em; } .preFormattedText {white-space:pre-wrap;} /* Fix to prevent dragging textareas under columns in WebKit */ textarea{resize:vertical} /* Customer Finder & Supplier Finder*/ .customerFinder, .supplierFinder, .finder {margin:0; padding:0; position:relative; display:inline-block; width:100%; border-width:0;} td > .customerFinder, td > .supplierFinder { width: auto !important; } .customerFinder > img, .customerFinder > input[type=image], .customerFinder > input[type=button], .supplierFinder > img, .supplierFinder > input[type=image], .supplierFinder > input[type=button], .finder > img, .finder > input[type=image], .finder > input[type=button] { position: absolute; right: 0.4em; top:0.3em; cursor:pointer; width:20px;} .customerFinder .buttons, .supplierFinder .buttons, .finder .buttons { position: absolute; right: 0.4em; top:0em; padding:0; margin:0; text-align: right;} .customerFinder .buttons img, .customerFinder .buttons input, .supplierFinder .buttons img, .supplierFinder .buttons input, .finder .buttons img, .finder .buttons input { vertical-align:middle; cursor:pointer; height:20px; margin-top:0.2em; } .customerFinder .buttons img[disabled], .customerFinder .buttons input[disabled], .supplierFinder .buttons img[disabled], .supplierFinder .buttons input[disabled] { cursor:not-allowed; } .customerFinder input[type=text], .supplierFinder input[type=text], .finder input[type=text] { padding-right:21px !important; } .OrderDetailHeader .customerFinder, .finder {display:block;} /* customer finder dialog*/ .customerSelectInfo .imageHolder { width: 50px; height:50px; display:inline-block; margin-right:0.3em; text-align: center; background-color:White; vertical-align:top;} .dropdownCompanyInfo { vertical-align:top; display: inline-block; max-width: 130px;} .customerSelectInfo .imageHolder img { max-width:50px; max-height: 50px; } .companyInfoBlock { padding: 0.3em; } .clientActivator { display: none; } /* General Finder */ .finder {margin:0; padding:0; position:relative; display:inline-block; width:100%; border-width:0;} .finder input[type=text] { padding-right:21px !important; } img.ibtn { cursor: pointer; } button, input[type=button], input[type=image] { cursor: pointer; } /* Extended dropdown (dropdown + add button + optional delete button) */ .selectWithAdd { display: flex; } .selectWithAdd button { flex-grow: 0; width:2.5em } .selectWithAdd button span{ margin-left: -9999px; } .extDropdown { width: 100%; margin: 0; padding: 0; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box; overflow:hidden; } .extDropdown .compactInput { width: 92%; } .extDropdown .buttons { width:8%; text-align:right; float:right; } /* Adds the pointer to images acting as buttons */ .scriptButton { cursor:pointer; } .scriptButton[disabled]{ cursor: default; } /* general buttons */ a.newButton, a.updateButton, a.button { display: inline-block; vertical-align:middle; cursor:pointer } a.newButton:hover, a.updateButton:hover { text-decoration:none; } button,a.newButton, a.updateButton, a.button { padding:0.1em 1em; border:none; } button img { height:1.2em; display:inline-block; vertical-align:middle } /********************************* Pagination *********************************/ .Pagination { vertical-align: middle; text-align:left; margin:0; margin-top:0.2em; padding:0 5%; line-height:normal; } .Pagination a, .Pagination span { vertical-align:middle; display:inline-block; line-height:normal; } .PageLinks { margin: 5px; padding:5px } .Pagination .NextPage, .Pagination .PreviousPage { margin: 2px 5px; padding: 3px 5px } .PageLinks:first-child { margin-left: 0; } .Pagination a img { display: inline; vertical-align:middle; } .ResultStats { float:right; display:inline-block; padding: 5px 0; margin: 5px 0; } .Pagination::after { content: ' '; display:block; clear:both; height:0px; } .FormSection .Pagination { padding: 0% !important; } .FormSection .Pagination .ResultStats { padding-right: 5px;} /********************************* Headers *********************************/ .PanelHeader, .PanelHeaderPermanent { margin: 0.3em 0 0 0; padding: 0.2em 0.3em; } .PanelHeader a:link, .PanelHeader a:active, .PanelHeader a:hover, .PanelHeader a:visited, .PanelHeaderPermanent a:link, .PanelHeaderPermanent a:active, .PanelHeaderPermanent a:hover, .PanelHeaderPermanent a:visited { color:inherit !important; font-size: inherit !important; } /********************************* Site Masthead *********************************/ .Masthead .Logo { margin-left: .8em; margin-top:0.5em; height:32px; vertical-align:top; } .ClientPortalHeader .Masthead .Logo {margin-top:0; height:45px; } .MastheadContainer { display:table; border-width: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box; width: 100%; max-width:1550px;} .Masthead { display:table-row; border-width: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box; width: 100%;} .Masthead > div { display:table-cell; webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box; vertical-align:middle; padding:0.5em; width: 50%;} .ClientPortalHeader .Masthead .userRepInfo { display:inline-flex; vertical-align:top; margin-left:2em;} .ClientPortalHeader .Masthead .UserRepImage { height:45px; border:1px solid orange; margin-right:0.5em; } .ClientPortalHeader .MenuBar { text-align:center; font-weight:600; padding:0.5em; } .Masthead .UserControls { text-align:right; } .Masthead .UserInfo { display:flex; text-align:right; justify-content: flex-end; align-items: center;} .Masthead .UserInfo div { display:inline-block; vertical-align:top; padding-right:0.4em } .Masthead .UserInfo img {height:2em; width:2em; bottom:0.5em;margin-left:1em; } .Masthead .UserInfo .UserName, .Masthead .userRepInfo .RepName {font-size:larger; line-height:1.4em; display:block; } .Masthead .UserInfo .UserOrganization, .Masthead .userRepInfo .RepTitle { font-size: smaller; display:block; line-height:1em; } .Masthead .UserInfo .UserImage,.ProfileImage {cursor:pointer;width:45px; height: 45px; margin-left:0.3em; border:1px solid gray;} .Masthead .UserProfile{display:flex; padding-bottom:0.5em;} .Masthead .UserProfile > div{padding-right:1em;} .Masthead .UserProfile .SettingOptions {color:#0082c6; text-align:left; padding-top:0.3em;} .Masthead .UserProfile .SettingOptions div:not(:last-child) *:last-child{position:relative; bottom:0.3em;} .Masthead .UserProfile .SettingOptions input[type=image],.Masthead .UserProfile .SettingOptions img{height:1.5em; width:1.5em; padding-right:0.3em;} .Masthead .UserProfile .SettingOptions > a { display: flex; padding-bottom:0.3em; } .Masthead .UserProfile .SettingOptions > a[disabled]{text-decoration:none; cursor:default;} /********************************* CRM Navigation *********************************/ .MenuBar { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box; width: 100%; display:table; height:auto; vertical-align:middle; overflow-x:hidden;text-overflow:ellipsis; table-layout:fixed; } .MenuBar > div { display:table-row; } .MenuBar > div > div { display:table-cell; vertical-align:middle; } .MenuBar a.noHighlight { border-bottom:none !important; background-color:transparent !important} /*search input box, and its place holder*/ .CRMOrganizationFinder input::-ms-clear{display:none;} /*IE 11 - remove input default x button*/ .CRMOrganizationFinder input{height:4.1em; font-weight:bold; padding-left:1em;} /*search close button*/ .CRMOrganizationFinder .roundButton span,.CRMOrganizationFinder .roundButton:hover span { border:none;color:black; background-color:#0082c6; font-size:1em; margin:1.3em 1em 0 1em;} .CRMOrganizationFinder .roundButton { position:relative; float:right; top:0.1em; } /*search result*/ .ui-autocomplete.CRMClientOptions{ min-width:240px; max-height:inherit; overflow:hidden;} .ui-autocomplete.CRMClientOptions li.ui-menu-item{padding-left:1em} /*Header - CRM Organization Finder - Popular organization */ .OrganizationDropHolder{position:absolute;z-index:11; } .CRMOrganizationFinder .popularOrganization{min-width:240px; display:block;padding-bottom:1.2em;} .CRMOrganizationFinder .popularOrganization *{height:inherit; line-height:inherit;padding-left:1em; padding-top:0;} .CRMOrganizationFinder .popularOrganization li{cursor:pointer;} /*Header - CRM Organization Finder - Organization detail */ .HeaderOrganizationDetail {display:flex; min-width:240px; padding-top:0.5em; padding-bottom:1em; align-items:center; } .HeaderOrganizationDetail > div {padding-left:1em;} .HeaderOrganizationDetail span{display:block} .OrganizationDropHolder .HeaderOrganizationDetail .Logo { width: 4em; } .OrganizationDropHolder .HeaderOrganizationDetail .Logo img { max-width:100%; } .CRMOrganizationFinder .detailToggle{border-radius:50%;margin-top:-1.2em; position:absolute; left:7.5em; cursor:pointer; width:1.8em;height:1.8em; text-align:center;} .CRMOrganizationFinder .detailToggle img{height:0.3em;} /*customer selector */ .MenuBar .customerSelect { width: 238px; display:block; cursor:pointer; vertical-align:middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box; vertical-align:middle; } .orgFinderColumn { width:238px; } .MenuBar .customerSelect > span { cursor: pointer; display: inline-block; font-size: 12pt; max-width: 170px; overflow: hidden; padding: 0.3em 0 0 0.6em; text-overflow: ellipsis; white-space: nowrap;} .MenuBar .customDropdownTrigger { float:right; cursor:pointer; } /*header universal search*/ .UniversalSearch{float:left;display:flex; height:3em; width:98%; max-width:1310px; } .UniversalSearch .stdText,.UniversalSearch span.ui-selectmenu-button{border:0px} .UniversalSearch .stdText{flex:1; background-position:99% 50%; padding-left:1em; margin-right:-1.9em;} .UniversalSearch .ui-selectmenu-button span.ui-selectmenu-icon{ right: 0.5em; left: auto; margin-top: -8px; position: absolute; top: 50%; height: 16px; width: 16px;} .UniversalSearch ::-ms-clear { height:0; width:0; } .UniversalSearch .ui-selectmenu-button span.ui-selectmenu-text{line-height:2.25em; margin: 0; padding: 0.4em 2.1em 0.4em 0.3em; display:block; text-align:center; border:0px;} a.SearchIcon{background-repeat:no-repeat; width:1.3em; height:2.1em; background-position:center; position:relative; right:0.3em; top:0.4em; } .UniversalSearch a.SearchIcon:hover{text-decoration:none; border:none !important; cursor:pointer} .UniversalSearchTrigger{cursor:pointer} .UniversalSearchResults li a{display:block} li.ShowMore:hover{cursor:default;} li.ShowMore a {text-align:right;} .UniversalSearchResults.ui-autocomplete {max-height:14em; overflow:hidden} /* modules */ ul.systemModules { display:flex; justify-content:flex-start; align-items:center; max-width:1310px; list-style-type:none; margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box;} ul.systemModules li { padding: 0 1em; } ul.systemModules li:last-child { margin: auto 0 auto 0; } ul.systemModules li:nth-last-child(2) { margin: auto 0 auto auto; } .MenuBar .menuExpander { display: none; } .MenuBar img { height: 1.35em; margin-top: 0.3em; } /* Customer Dropdown */ .customerSelectInfo { display:none; padding-bottom: 0.8em;} .customerSelectInfo .dropdownCompanyInfo { display: inline-block; line-height:1.3em; } /* Handles styles for the expandable left-col menu dropdown on small screens */ @media only screen and (max-width:1024px) { /* hide the homelink - the logo will do */ .systemModules { z-index:120; width:100%; } ul.systemModules li:first-child { display:none; } ul.systemModules { display:block; } ul.systemModules li { padding: 0.6em 0; } ul.systemModules li > a { margin-left:1em; } /*rearrange the main masthead to fit on mobile devices*/ .Masthead > div:first-child { width:35%; } .Masthead .Logo {max-width:90%;} .Masthead .UserInfo> div{display:none} /*rearrange the menu into a hamburger menu*/ .MenuBar { height: 60px; font-size:10.5pt; } .MenuBar, .MenuBar > div { display:block; overflow:visible; } .MenuBar .menuExpander { display:inline-block; padding:1em; cursor:pointer; height:2em; width:2em; } /*make menu into flexbox layout */ .MenuBar > div { display: flex; flex-direction:row; justify-content:space-between; } .MenuBar > div .menuExpander { flex-grow: 0; order: 1; } .MenuBar > div .UniversalSearchTrigger { flex-grow: 0; border:1px solid cyan; order: 4; max-height:2em; max-width:2em } .MenuBar > div .QuickAddContainer { flex-grow: 0; max-height: 2em; max-width: 2em; order: 3; margin-top: 1.2em; } .orgFinderColumn { flex-grow: 1; order: 2; width:auto } .CRMOrganizationFinder { position:relative; } .CRMOrganizationFinder input { text-align:center; display:block; width:100%; margin: 0 auto; } .CRMOrganizationFinder a.roundButton { position:absolute; right: 1em; } .OrganizationDropHolder { width: 100%; } .CRMOrganizationFinder .detailToggle { left: 50%; transform: translateX(-50%); z-index:10; } .MenuBar .mainMenu { display:block; } .MenuBar ul.systemModules { display:none; position:relative; z-index: 55; } .MenuBar .mainMenu.active { order: 4; width:100%; } .MenuBar .active ul { display:block; } .MenuBar ul li { height: auto; padding: 0} .MenuBar ul.systemModules li > a, .MenuBar ul.systemModules li > a.selected { display:inline-block; margin: 0.65em 0.7em 0.3em; font-size: 110%; } /*style the universal search*/ .UniversalSearchTrigger { padding: 1em; } /* style the actionbar section */ .systemModules .ActionBar { display: block; } .systemModules .ActionBar a, .systemModules .ActionBar a:hover { font-size: 100%; border:none; } .systemModules .ActionBar a.Action { font-size: 85%; } .systemModules .ActionBar a img { height: 18px; width: 18px; } .systemModules .ActionBar .Action.Selected,.mainMenu .Group.Selected { background-image: none; width:auto; position:static; } .systemModules .Group.Selected{background-color:black;} .systemModules .Group:first-child{margin-top:0} .systemModules .Group .Action.Selected span:last-child { margin-right: 0.5em; } /*style the universal search*/ .UniversalSearch { margin: 0.6em 4%; width: 92%; } .UniversalSearchActive .orgFinderColumn { display:none; } .UniversalSearch > span.ui-selectmenu-button { font-size: 80%; width: 8em; } .UniversalSearch .ui-selectmenu-button span.ui-selectmenu-text { line-height:3em;} .UniversalSearchActive .mainMenu { width: 100%; } .UniversalSearchResults { left: 4% !important; right: 4% !important; height:auto!important; } .UniversalSearchResults a span { white-space:nowrap; width:60%; overflow:hidden; text-overflow:ellipsis; font-size: 90%; display:inline-block; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .UniversalSearchResults a span:nth-child(2) {text-align:right; width:40%; } .UniversalSearchResults li { border-bottom: 1px solid #CFCFCF; } .UniversalSearchResults .ui-state-hover { font-weight:normal !important } } /*shut off the regular header when active*/ .UniversalSearchActive ul, .UniversalSearchActive .UniversalSearchTrigger, .UniversalSearchActive .menuExpander, .UniversalSearchActive .QuickAddContainer { display:none } a.ActionLink{font-style:italic; font-size:1.3em; font-weight:600; float:right;} a.ActionLink:active, a.ActionLink:hover{text-decoration:none} a.ActionLink[disabled]{color:inherit} a.ActionLink:not([disabled]){cursor:pointer} a.ActionLink.LinkLeft{float:left} /* Sidebar */ .GroupHeader { padding: 0.7em 0.5em 0.7em 0.8em; vertical-align:middle; cursor:pointer; display:block;} .GroupHeader img, .GroupHeader a { vertical-align:middle; } .GroupHeader img {height:28px; width:28px; margin-right: .4em; margin-top: 0.2em; margin-bottom: 0.2em; } .Action { display:block; padding-left: 2em; background-image:none; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; -ms-box-sizing: border-box; box-sizing:border-box; cursor:pointer; min-height:2.3em;} .Action span:first-child { line-height: 2em; vertical-align:middle;} .Action span:last-child { float:right; display: block; width:3.5em; text-align:right; margin-right: 0.5em; padding: 0 0.2em; vertical-align:middle; line-height:1.4em; margin-top:0.2em; overflow:hidden; text-overflow: ellipsis; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box; } .Action span:last-child:first-child { float:none; display:inline; width: auto; text-align:left; margin:0; padding: 0; } .Group .Action.SubAction { padding-left: 2em; } /* styles for the Action Boxes (dialog bubbles with buttons inside) */ /*NOTE: absolute positioning is required or it shoves stuff around when positioned*/ .actionbox { background-color: white; padding:0.5em;display:inline-block; border:medium solid transparent; background-clip:padding-box; position:absolute; } /********************************* Sidebar Layout *********************************/ .ActionBar .Selected { width:105%; z-index:10; position:relative; padding-right:17px; } .ActionBar .Group.Selected {width:100%; padding-right:14px;} .ActionBar .Selected.Text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10%; } .Group .Action.Selected span:last-child { margin-right: 17px;} .Group .Action { line-height:2em; padding: 0.1em 0.2em 0.1em 1em; cursor:pointer; } .Group .Action span:last-child { line-height:1.6em; } .Copy .systemIcon {float:right; padding-right:1.5em; cursor:pointer; padding-top:0.3em;height:1.5em; } .Copy.Action {cursor:default} /********************************* Notification Queue *********************************/ .notificationQueue { margin: 0; padding: 0; display:none; width:auto; } .notificationQueue.sticky { top: 57px; position: fixed; left: 240px; z-index: 110; } .notificationQueue .notification { margin: 0; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing:border-box; padding:0.3em 5% 0.3em 0em; position:relative; } .notificationQueue .notificationWrapper {display:flex; justify-content:flex-start; } .notificationQueue .hasActions .notificationWrapper { justify-content:space-between; } .notificationQueue .notificationWrapper > div { padding-right: 0.3em; align-self:center; } .notificationQueue .messageText { line-height: 1.4em; } .notificationQueue .notificationActions:last-child { margin: 0 0 0 auto; text-align: right; } .notification .notificationActions { min-width: 5.5em; text-align: right; } .notification .notificationActions .expandToggle { width: 2.25em } .notificationViewToggleWrapper{ width:100%; position: absolute} .notificationViewToggle { background-size: 2.3em; width: 1.5em; height: 0.9em; border-bottom-left-radius: 1.5em; border-bottom-right-radius: 1.5em; position: relative; top: -0.2em; border-bottom: 1px solid #ddd; padding-right: 0.4em; margin: 0 auto; background-position:center top; z-index: 999; cursor: pointer; } .notificationGroupWrapper { list-style-position:inside; } .notificationGroupWrapper li { padding-left: 6em; } .notificationGroupWrapper .messageText { display: inline; } @media only screen and (max-width: 1024px) { .notification .notificationActions { min-width: 4.25em; } } @media only screen and (max-width: 1024px) { .notificationQueue.sticky { left: 0px; } .notification .notificationActions { min-width: 2em; }} /********************************* Notification Bubbles ********************************/ .notificationIndicator { height: 25px; width: 25px; padding: 0; margin: 0; } .notificationIndicator.Cost { height: 16px; width: 16px; } .LineItem .notifications { display:flex; justify-content: center; position: relative; } .notificationBubble { display: flex; position: absolute; flex-flow: column; left: 50%; margin-left: -90px; width: 180px; user-select: none; top: calc(100% + 13px); z-index:100; box-shadow: 0px 2px 6.65px 0.35px rgba(0, 0, 0, 0.3) } .notificationBubble .notification { align-content: center; display: flex; padding: 10px; flex-direction: column; text-align: center; } .notificationBubble .notificationMessage, .notificationBubble .notificationTitle, notificationBubble .notificationFootnote { align-self: center; line-height:1.4em; font-size:90%; font-weight: 600; } .notificationBubble .notificationFootnote { font-style:italic; line-height:1.4em; font-size:90%; } .notificationBubble .notificationAction { font-size: 7pt; border-radius: 65px; margin: 0 3px; } .notificationBubble .notificationActions { text-align: center; } .notifications .notificationIndicator { background-repeat:no-repeat; } .notificationBubble::before { content: " "; position: absolute; top: -10px; left: 50%; margin-left: -10px; width: 20px; height: 20px; transform: rotate(45deg); background-color:inherit; } .notificationBubble .costWrapper { display: none; flex-direction: column; padding: .25em 0;} .notificationBubble .costWrapper.HasCost { display: flex; } .notificationBubble .costWrapper span { line-height: 1.4em} .notificationBubble img.locked { height: 25px; padding-top:.25em} .groupSummary .notificationBubble .notification { padding-top:0; padding-bottom:0; } .groupSummary .notificationBubble .groupNotificationWrapper { padding-top:5px; padding-bottom:5px; } .infoNotification { display: inline-block; position: relative; } .infoNotification .notificationIndicator { height: 15px; width: 15px; } .MFAHeader #lbl2FA, .MFAHeader #accessControlNotification { vertical-align: middle; } /********************************* Form Fields *********************************/ /* Datepicker */ .datePicker { background-repeat:no-repeat; background-position: right center; } /* Logo Picker */ .logoField { background-color:white; height:13em;position:relative; text-align:center; line-height:13em; } .logoField img { max-width: 96%; max-height: 12em; vertical-align:middle } .ChargeDetail .logoField .clearImage { padding-top: 1em; } .ImageStat {text-align:center; padding-top:0.2em;} .ImageStat > span{display:block; font-size:90%; line-height:1.3em;} .ImageStat .Warning{width:1.3em; display:inline-block; margin-right:0.2em; cursor:pointer} .ImageStat .Warning + span{font-weight:700} .SubStandardImageSummary span{display:list-item; list-style-type:disc; list-style-position:inside} .SubStandardImageSummary div span:last-child{list-style-type:none; text-indent:2em; font-size:80%} /*selectmenu*/ .ui-selectmenu-button { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } .ui-selectmenu-menu.ui-front .ui-menu .ui-selectmenu-optgroup {text-transform:uppercase; font-size: 12px; height:15px; text-align:center; font-weight:500;} /* force selectmenus to not go past the outside of the column */ @media only screen and (max-width:750px) { .FormBlock .ui-selectmenu-button.ui-widget { width: 100%!important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box!important; } } /*looks like regular text but is actually a field for forms like order form matrix*/ .DisplayTextBox, input.DisplayTextBox[type="text"]{ border-style:none !important; border-width: 0px !important; background-color:Transparent !important; text-align:right !important; font-size:inherit !important; color:inherit !important; font-family: inherit !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; height: auto !important; -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important; } .SubTotalDisplayTextBox, input.SubTotalDisplayTextBox[type="text"]{ background-color:Transparent !important; text-align:right !important; font-size:inherit !important; color:inherit !important; border-top: solid 1px !important; border-left: none 0px !important; border-right: none 0px !important; border-bottom: none 0px !important; font-family:inherit !important; -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } /* input placeholders */ ::-webkit-input-placeholder { color:#CCC; font-style:italic; opacity:1; letter-spacing:0.1ex; font-weight:normal; } ::-moz-placeholder { color:#CCC; font-style:italic; opacity:1; letter-spacing:0.1ex; font-weight:normal; } :-ms-input-placeholder { color:#CCC; font-style:italic; opacity:1; letter-spacing:0.1ex; font-weight:normal; } /* Fields and Field Containers */ .compactInput, .stdText, .stdDropdown {padding:0.2em 0.3em 0.2em 0.5em; } body #Form1 #FormControls .ZoneBoxHolder .WPZone div.sbLock { position:fixed !important; top:0 !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:150000 !important; background-color: #C8C8C8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; -moz-opacity:0.4; -webkit-opacity:0.4; opacity:0.4; } body.sbLock { height:100% !important; overflow:hidden !important; } .svgbox { height:0px; overflow:hidden; } /************************************ KPI Gauges * ***********************************/ .ui-kpi-gauge canvas { display:block; z-index:5; } td.ui-kpi-gauge canvas { margin: 0 auto; } /********************************* Completion Status *********************************/ .completionIndicator canvas, .progressIndicator canvas { max-height: 100%; display:block; z-index:5; display:block; margin:0 auto} .progressIndicator span { font-size:8pt; font-weight:normal; z-index:22; } .progressIndicator .oversize { font-size:7pt; } /********************************* Pie Charts *********************************/ .piechart.keyed canvas { display: inline-block; vertical-align: top; } .piechart .chartKey { display: inline-block; vertical-align:top; margin: 1em 0 0 1em; font-size:90%; width:40%;} .piechart .chartKey li { margin-left: 1em; text-indent: -1.6em; list-style-type:none; } .piechart .chartKey div { width:1em; height:1em; margin-right:0.4em; } .chart.piechart { max-height:245px; text-align:center; } .chart.piechart canvas { max-height:100% !important; } @media only screen and (max-width:1100px) { .summaryWidget .chartKey { font-size: 90%; margin:2em 0 0 2em; } } div.formCol.statusList { padding: 0 1em 1em 1em; display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 1em; } div.formCol.statusList.short { padding: 0 1em 1em 1em; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1em; } div.doubleCol.statusList.wideBlocks { padding: 0 1em; grid-template-columns: repeat(2, 1fr); column-gap: 1em; row-gap: 1em; } div.formCol.statusList.doubleCol { grid-template-columns: repeat(4, 1fr); padding: 0 1em; } div.formCol.doubleCol.statusList.wideBlocks { grid-template-columns: repeat(2, 1fr); } div.formCol.statusList.alternateWide { grid-template-columns: 2fr 1fr 2fr 1fr; column-gap: 1em; } .ReadyToInvoice .statusList .statusBlockWide { grid-column-end: span 2; } div.formCol.statusList.pleaseWait { display: block; } .statusBlock, .statusBlock:link,.statusBlock:active, .statusBlock:hover, .statusBlock:visited { text-align:center; border-style:none; display:block; overflow:hidden; text-decoration:none; color:inherit; display: flex; flex-direction: column; justify-content: space-between; } @media only screen and (max-width:750px) { div.formCol.statusList, div.formCol.statusList.short { grid-template-columns: repeat(3, 1fr); row-gap: 1em; } div.formCol.statusList.alternateWide { grid-template-columns: 2fr 1fr; row-gap: 1em } } @media only screen and (max-width:350px) { div.formCol.statusList { grid-template-columns: repeat(2, 1fr); row-gap: 1em; } div.formCol.statusList.alternateWide, div.formCol.statusList.short { grid-template-columns: 1fr; row-gap: 1em } } .statusBlock span, .statusBlock label {white-space:normal; font-weight:normal; display:flex; align-items:center; justify-content:center; height:3em; padding: 0 4px 4px 4px; font-weight:600; } .statusBlock span > span { display:block; height:0; } .statusBlock .count { font-size: 300%; height:auto; padding: 6px 4px 6px 4px; overflow:hidden; text-overflow:ellipsis; } .statusBlock, .statusBlock span { line-height:1.2em } .summaryWidget .statusBlockSmall { width: 6em; } .statusBlockWide > span:first-child { overflow: hidden; text-overflow: ellipsis; } .summaryWidget span.summaryTotal { margin-top:0; } .summaryWidget.dynamicLoad .statusBlock { opacity:0; } .summaryWidget .twoColBlock > div.FormBlock.formCol {padding-right:1em;} .summaryWidget .FormBlock .statusBlock.dynBlock { opacity:1; transition: opacity 500ms ease-in; } .summaryWidget .FormBlock .statusBlock.dynBlock:first-child{ transition-delay:0;} .summaryWidget .FormBlock .statusBlock.dynBlock:nth-child(2){ transition-delay:250ms;} .summaryWidget .FormBlock .statusBlock.dynBlock:nth-child(3){ transition-delay:500ms;} .summaryWidget .FormBlock .statusBlock.dynBlock:nth-child(4){ transition-delay:750ms;} .summaryWidget .FormBlock .statusBlock.dynBlock:nth-child(5){ transition-delay:1000ms;} .summaryWidget .FormBlock .statusBlock.dynBlock:nth-child(6){ transition-delay:1250ms;} .lineSummary .FormBlock .statusBlock { min-width: 7.5em; } .lineSummary .extendedStatus .statusBlock .daysOld {display:block; height:1.3em; } /* Make Extended status blocks with aging line up with regular blocks */ .extendedStatus .statusBlock .count { line-height: 1.3em; } .extendedStatus .statusBlock .count + .summaryTransactions, .extendedStatus .statusBlock .count + .summaryTotal { margin-top:1.3em; } /********************************* Bar Charts *********************************/ .widgetHeader.dashboardHeader { padding: 0.6em 4%; margin-bottom: 0.5em; } .widgetHeader.dashboardHeader.headerRow { padding: 0.6em 4%; } .widgetHeader.dashboardHeader.headerRow > div > div:first-child { padding-left:4%; text-align:left; } .widgetHeader.dashboardHeader.headerRow > div > div:last-child { padding-right:4%; text-align:right; } .widgetHeader.dashboardHeader.dashDate { display: flex; align-items: center; } .WidgetBody.summaryWidget { padding: 0 4% 1em 4%; } .SiteHome .summaryWidget { padding: 0 4% 1em 4%; } .widgetHeader + .summaryWidget { padding-top: 2em; } .summaryWidget div.FormBlock{ margin-top:0; } div.summaryWidget .SectionHeader h2 { display:inline-block; } div.summaryWidget .SectionHeader + div.formCol { padding-top:0;} .summaryWidget .SectionHeader .ui-selectmenu-button { float:right; border-width:0; } .customerDashboard .contentZone .summaryWidget { padding: 0 4% 1em 8%; } .customerDashboard .rightColZone .summaryWidget { padding: 0 8% 1em 4%; } .barchart {min-height:250px; position:relative;} .barchart .loadscreen { display:flex; align-items:center; position:absolute; top:0; left:0; right:0; bottom:0; justify-content: center; width:100%; } .summaryWidget .Total .Value, .summaryWidget .NetIncome .Value { font-size: 300%; margin-top:0.1em;} .summaryWidget .Value { font-size: 230%; line-height:1.1em; display:block; margin-top:0.5em; font-weight:600;} .summaryWidget .fieldBlock .FormLabel { font-weight:600;} /* dashboards with large data sets*/ .summaryWidget.largeSet .fieldBlock { min-height:3em; } .summaryWidget.largeSet .Value { margin-top: 0em; font-size: 160%; } .summaryWidget .fieldBlock:first-child .Value, .summaryWidget .fieldBlock.primary .Value { font-size: 300%; margin-top:0;} /*rearrange summary widgets for mobile*/ @media only screen and (max-width:750px) { .widgetHeader.dashboardHeader { padding: 0.2em 4%; margin-bottom: 0.5em; min-height:0; font-size: 200%; } .widgetHeader.dashboardHeader h1 { font-size: 90%; } /* split header rearrangement*/ .widgetHeader.dashboardHeader.headerRow { padding: 0; display:block } .widgetHeader.dashboardHeader.headerRow > div { display:block; } .widgetHeader.dashboardHeader.headerRow > div > div { display:block; width:100%; } .widgetHeader.dashboardHeader.headerRow > div > div:first-child { width:100%; display:block; padding: 0.2em 4% 0 4%; } .widgetHeader.dashboardHeader.headerRow > div > div:last-child { width:100%; display:block; padding: 0 4% 0.2em 4%; } .widgetHeader.headerRow > div > div .ui-selectmenu-button.ui-widget { width:100% !important; box-sizing:border-box; margin:0; } /* first column of the summary widget needs to pivot and go below the chart*/ .summaryWidget .fieldBlock .Value, .summaryWidget .fieldBlock:first-child .Value { font-size: 150%; margin-top:0.1em;} .summaryWidget .formCol .fieldBlock { display:inline-block; } .summaryWidget .formCol:after { content: ''; display:block; height:0; clear:both; } } /********************************* Header layout *********************************/ .widgetHeader { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; min-height:80px;} .widgetHeader, .widgetHeader h1, .widgetHeader h2, .widgetHeader h3, .widgetHeader input { vertical-align:middle; } .widgetHeader input[type=text], .widgetHeader .ui-selectmenu-button { margin-left:0.5em; margin-bottom:0.3em; vertical-align:middle;} .widgetHeader .ui-selectmenu-button { line-height:0.9em;} .widgetHeader h1 input, h1.widgetHeader input { float:right; } h1.widgetHeader, .widgetHeader h1 { padding:0.6em 5%; line-height: 1.3em; } .widgetHeader.small{min-height:0px;} .widgetHeader.small h1 { margin-bottom: 0em; } .FilterSection { padding: 0.2em 5% 2em 5%; } @media only screen and (max-width:750px) { h1.widgetHeader, .widgetHeader H1, .widgetHeader H1 > * { line-height: 1.3em; } } /* Footer */ .WidgetFooter, .PanelFooter { padding: 0 5% 1em; text-align:right; } .FormSection .PanelFooter { padding: 0.5em 0 1em 0; } .WidgetFooter.Pagination, .PanelFooter.Pagination { text-align: left; } .ui-dialog-content .WidgetFooter, .ui-dialog-content .PanelFooter { padding: 1em 0 0 0; clear:both; } /********************************* Adaptive Grids *********************************/ .ControlBarHeader th {min-height:1.75em; line-height:2.1em; } .ControlBarNav .tab, .ControlBarNav th { line-height:2.1em;} .ui-dialog .ControlBarNav .tab { line-height:initial;} .fieldBlock .ui-button.ui-selectmenu-button, .filtersContainer .ui-button.ui-selectmenu-button { display: block; -moz-box-sizing: border-box; box-sizing: border-box; width:100% !important; border-width: 0px 3px 0px 0px; border-color:transparent; } .responsiveSelect { vertical-align:middle; } .responsiveSelect .ui-selectmenu-button { width: 100% !important; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; -ms-box-sizing: border-box; box-sizing:border-box; vertical-align:middle;} .fieldBlock .ui-selectmenu-button > .ui-selectmenu-text { padding: 0.2em 2.1em 0.2em 0.5em; /*font-size:1.3em;*/ font-size:10.5pt; font-weight:600; line-height: 1.75em; } .ui-menu { max-height: 15em; overflow-y:hidden; } /* Info block. */ .infoBlock { display:flex; width:100%; padding:1em; box-sizing:border-box; } .infoBlock > img { max-height: 1.75em; margin: 0 1em; align-self:center; } .infoBlock > div { margin-left: 1em; } .infoBlock strong::after { content: ' - '; } .button.cta { margin-top: 1em; float: right; } /********************************* Calendar-style date *********************************/ .Calendar {text-align:center;} .DateCalendar .datePrint { display:none; } .fieldBlock.calendar .FormLabel { display:block; } .DateCalendar { background-color:white; display: block; width: 5em; text-align: center; padding-bottom:0.3em; position:relative; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); background-image: -webkit-linear-gradient(bottom left, rgba(50,50,50,0.15), transparent 15%); background-image: -moz-linear-gradient(bottom left, rgba(50,50,50,0.15), transparent 15%); background-image: linear-gradient(bottom left, rgba(50,50,50,0.15), transparent 15%); z-index:1; border-bottom-left-radius:15px; border-bottom-left-radius:3px; cursor:pointer; } .Calendar[disabled] .DateCalendar { cursor: default;} .Calendar[disabled] .DateCalendar { background-color: #F5F5F5; color:gray;} .Calendar > .FormLabel { display:block; font-size:80%; text-align:center; margin-top: 0.2em; } .CalendarWrap {display: inline-block; position:relative; margin-top:0.3em; } .CalendarWrap:before, .CalendarWrap:after{ content:' '; background-color: transparent; display: inline-block; height: 1em; width:3em; position: absolute; left:0.2em; bottom:0.1em; -webkit-box-shadow: 0 0.2em 0.7em rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0.2em 0.7em rgba(0, 0, 0, 0.2); box-shadow: 0 0.2em 0.7em rgba(0, 0, 0, 0.2); -webkit-transform: skew(-5deg) rotate(-5deg); -moz-transform: skew(-5deg) rotate(-5deg); -ms-transform: skew(-5deg) rotate(-5deg); transform: skew(-5deg) rotate(-5deg); z-index:0; } .CalendarWrap:after{ left: auto; right: 0.2em; -webkit-transform: skew(5deg) rotate(5deg); -moz-transform: skew(5deg) rotate(5deg); -ms-transform: skew(5deg) rotate(5deg); transform: skew(5deg) rotate(5deg); } /* calendar rings */ .DateCalendar .header:before, .DateCalendar .header:after { content: ' '; display:block; height:1em; width:1em; position:absolute; top:-0.4em; left:0.4em; background-image: url(../Images/CRM/shadow/CalendarRing.svg); background-size: contain; } .DateCalendar .header:after { left:auto; right:0.4em;} .DateCalendar .header { background-color: #0082C6; color: white; display:block; text-transform: uppercase; padding-top:0.08em; border-top-left-radius:2px; border-top-right-radius:2px;} .Calendar[disabled] .DateCalendar .header { background-color:gray; color:silver;} .DateCalendar .header span { display:block; line-height:1.1em; } .DateCalendar .header span + span { font-size: 70%; line-height:1em; padding-bottom:0.3em;} .DateCalendar > span:last-child { font-size: 310%; font-weight:700; line-height:1.1em; } /*empty calendar display*/ .Calendar.empty .CalendarWrap .DateCalendar > span { visibility:hidden; } .Calendar.empty .CalendarWrap .DateCalendar { background-color: #fff; } .Calendar.empty .CalendarWrap .DateCalendar::after { content: "+"; display: block; color: #0082c6; font-size: 600%; position: absolute; text-align: center; top: 30%; width: 100%; } .Calendar.empty[disabled] .CalendarWrap .DateCalendar::after{color: gray;} @media print { .DateCalendar span { display:none; } .DateCalendar .datePrint { display:block; } .colZoneContainer > .leftColZone, .ControlBarNav, .headerZone { display:none ;} .HiddenField{ display:none; } .noPrint, .notificationQueue { display:none; } table.TopBorder { width: 100%; } table.TopBorder img { display: none; } table.TopBorder .topLeft { width: 0px; height:auto;} table.TopBorder .topCenter {height:auto; background-image:none;} table.TopBorder .topRight { width: 0px; height:auto;} div.skinBody { border:none; border-image: none; -moz-border-image: none; -webkit-border-image: none; -o-border-image: none; } .contentPrintReady .headerZone, .contentPrintReady .leftColZone, .contentPrintReady .rightColZone, .contentPrintReady .widgetHeader, .contentPrintReady .ReportControls, .contentPrintReady .widgetHeader.headerRow { display:none; } .contentPrintReady .colZoneContainer { display:block; } .contentPrintReady .ReportPage td, .contentPrintReady .ReportPage th { font-size: 8pt; } } /* Footer Bars */ .footerTools { margin:0 5% 1em; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .footerTools .icons { min-height:1.2em; padding:0.4em 1em} .footerTools .icons button { height:17px; width:17px; border-radius: 8px; display:block; border:none; background-color:white; -ms-transform: rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); transition: transform 750ms; cursor:pointer; padding: 0; } .footerTools .icons button.active { -ms-transform: rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); } .footerTools .options { padding: 1em 1em 0 1em; } .footerTools .options > div { display:flex; flex-wrap:wrap } .footerTools .options .optionGroup { flex-grow:1;} .footerTools .options .optionGroup > div { padding-bottom:1em; display:inline-block} .footerTools .options .optionGroup > .icon { vertical-align: middle; text-align:center; } .footerTools .options .optionGroup > .icon img { height:3em; width:3em;} .footerTools .options .optionGroup > .optionBlock { vertical-align:top; padding: 0 1em 1em 0.5em; font-size:80%} .footerTools .options .optionGroup > .optionBlock a { display:block; line-height:1.3em; cursor:pointer; padding:0.2em 0;} .footerTools .options .optionGroup > .optionBlock a:first-child {padding-top:0px;} .footerTools .options .optionGroup > .optionBlock a:last-child {padding-bottom:0px;} .footerTools .options .optionGroup > .optionBlock a[disabled] { cursor:default; } @media only screen and (max-width:750px) { .footerTools{margin:0;} } /* split header styles FLEX */ .widgetHeader.headerRow { padding:1em 5%; display:flex; flex-direction: row; align-items: stretch; justify-content:space-between; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .widgetHeader.headerRow h1 { padding: 0; min-height:1em; } .widgetHeader.headerRow h1 span.separator{padding:0 0.3em;} .widgetHeader h1.inline { display:inline-block; max-width:15em; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .widgetHeader.headerRow > div { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .widgetHeader.headerRow > div:last-child { margin-right:0; } .widgetHeader.headerRow > .detailHeaderLeft { display:flex; flex-direction:column; justify-content:center; flex-grow:5; flex-basis:50%; } .widgetHeader.headerRow > .detailHeaderLeft.multipart, .widgetHeader.headerRow > .detailHeaderRight.multipart{ display:flex; flex-direction:row; align-content:flex-start; justify-content:flex-start } .widgetHeader.headerRow > .detailHeaderRight.multipart{ justify-content:flex-end; } .widgetHeader.headerRow > .detailHeaderLeft.multipart > * { margin-right:1em; } .widgetHeader.headerRow > .detailHeaderRight.multipart > * { margin-left:1em; } .widgetHeader.headerRow > .detailHeaderLeft.wide { flex-grow: 7; flex-basis: 70%; } .widgetHeader .detailHeaderLeft input[type="text"] { margin: 0 0 1em 0; } .widgetHeader .detailHeaderLeft h1 { margin-bottom:0.4em; } .widgetHeader .detailHeaderLeft div.identifier h1 { margin:0 0.3em 0 0; display:inline-block; } .widgetHeader.headerRow > .detailHeaderLeft.narrow { flex-grow:3; flex-basis:35%; justify-content:flex-start; } .widgetHeader.headerRow > .detailHeaderLinkSummary { flex-grow:2; flex-basis:20%; } .detailHeaderLinkSummary > div{display:flex; justify-content:flex-start; align-items:flex-start; white-space: nowrap; align-items:center;} .detailHeaderStatus .detailHeaderLinkSummary > div { justify-content:flex-end; } .widgetHeader.headerRow > .detailHeaderRating {align-self: flex-end; flex-basis: 90rem; } .widgetHeader .Calendar { font-size:90%; } .detailHeaderRating .ProductRating { display: flex; height:25px; } .widgetHeader.headerRow > .detailHeaderRight { text-align:right; flex-grow: 5; flex-basis:50%; } .widgetHeader.headerRow > .detailHeaderLeft.wide + .detailHeaderRight { flex-grow:3; flex-basis:30%; } .widgetHeader.headerRow > .detailHeaderRight fieldset{ text-align:right; display:inline-block;} .widgetHeader.headerRow > .detailHeaderRight fieldset + fieldset { margin-left: 2em; } .widgetHeader.headerRow > .detailHeaderRight .Calendar { text-align:center; } .widgetHeader.headerRow .orderHeaderInfo { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; } .widgetHeader.headerRow > .detailHeaderStatus { text-align:right; flex-grow:3.5; flex-basis:35%; } .widgetHeader.headerRow > .detailHeaderStatus + .detailHeaderRight {flex-grow: 1.5;flex-basis: 15%;display: flex;justify-content: flex-end;} .detailHeaderStatus .OrderTotal {font-size: 2.5em; line-height:1em; } .statusIcons {margin-top:0.3em; text-align:right; } .statusIcons::after { content:' '; display:block; height:0; clear:both;} .statusIcons > * { display:inline-block; } .widgetHeader .detailHeaderStatus .statusIcons:first-child { margin-top:4em; } .widgetHeader .statusIcons img, .widgetHeader .statusIcons > div, .widgetHeader .statusIcons > span { margin: 0.3em 0.5em; height: 30px; } .headerInfo > span { font-size: 200%; font-weight: 600; margin-right:0.2em} .fixedTextHeight{height:1.75em;} .widgetHeader .UseBadge, .statusBadge {display: inline-block; padding: 0.3em 0.7em; line-height:1.1em; font-size:90%; text-align: center; margin: 0 0 0 0.3em; vertical-align:middle; } .widgetHeader .UseBadge { font-size: 70%; } .widgetHeader.headerRow > .detailHeaderRight.detailHeaderCurrency,.widgetHeader.dashboardHeader.headerRow > .detailHeaderRight, .widgetHeader.headerRow > .detailHeaderRight.input { display: flex;align-items: flex-end;flex-direction: column;justify-content: center; } /* dashboards with control in header */ .widgetHeader.dashboardHeader.headerRow > .dashboardControls { display: flex; flex-direction: row; align-content: center; flex-wrap: wrap; justify-content: flex-end;} .widgetHeader .buttons { display:inline-block; vertical-align:middle; height:25px; padding-bottom:0.6em; } .widgetHeader .buttons img {height:25px;width:25px;cursor:pointer;} .ItemDetail .widgetHeader.headerRow > .detailHeaderLeft > h1 { margin-bottom: 0.1em; white-space: nowrap; } .ItemDetail #pnlNameRating h3 { font-weight: initial; } /*header as block*/ .widgetHeader.headerRow.blockHeader{display:block;padding-bottom:0} .widgetHeader.headerRow.blockHeader input[type=text], .widgetHeader.headerRow.blockHeader .ui-selectmenu-button {margin-left:0} .widgetHeader.blockHeader .FormBlock{background-color:#DDD} .widgetHeader.blockHeader.flexHeader .FormBlock.LightGrey{background-color:#EEE} .widgetHeader.blockHeader .twoColForm {padding-top:0} .widgetHeader.blockHeader.flexHeader .twoColForm.LightGrey {background-color:#EEE; padding-left:1em} .widgetHeader.blockHeader .twoColForm:first-child{padding-left:0} .widgetHeader.blockHeader .twoColForm:nth-last-child(2){padding-right:0} .widgetHeader.headerRow.blockHeader.flexHeader{display:flex;flex-direction:column} .widgetHeader.headerRow .headerInlineToHeadline { padding:0; font-weight:600; font-size:13pt; } .widgetHeader.headerRow .headerInlineToHeadline .ui-button.ui-selectmenu-button { margin-left:0; } .widgetHeader .CalendarWrap {margin-top:0;} .SectionHeader .CountryCurrency { float: right; } /* add mobile rules for split headers */ @media only screen and (max-width:750px) { .widgetHeader.headerRow { padding: 1em 4%; position:relative; } .widgetHeader.headerRow > .detailHeaderLeft { width:auto !important; } .widgetHeader.headerRow > .detailHeaderStatus >div:after { content:""; clear:both; display:block } .widgetHeader.headerRow > .detailHeaderStatus > div > span{float:right;} .widgetHeader.headerRow > .detailHeaderStatus > div >.statusIcons{float:left} .widgetHeader .detailHeaderStatus .statusIcons:first-child { margin-top:1em; } .widgetHeader.headerRow > .detailHeaderStatus + .detailHeaderRight { position:absolute; right:0; top:0; padding-right:4%; padding-top:1em; display:flex; flex-direction:column } .widgetHeader.headerRow.mobileAdjusted h1 > * { display: inline-block } .widgetHeader.headerRow .DateCalendar {width:auto; background-image:none; padding:0; box-shadow:none} .widgetHeader.headerRow .DateCalendar span:not(.FormLabel),.widgetHeader.headerRow .Calendar.empty .CalendarWrap .DateCalendar::after, .widgetHeader.headerRow .CalendarWrap:before,.widgetHeader.headerRow .CalendarWrap:after{display:none} .widgetHeader.headerRow .DateCalendar input{display:block; margin:0em; text-align:right; padding:0; font-size:150%; width:7em;line-height:0} .widgetHeader.headerRow .Calendar .FormLabel {position:relative; text-align:right;bottom:4em;line-height:0} .widgetHeader.headerRow .Calendar .CalendarWrap{margin-top:1.2em;} } #divStatus, .currentStatus { text-align:center; } .FormBlock .orderStat[disabled] { cursor: default; } .FormBlock .orderStat, .currentStatus .orderStat { cursor: pointer; width:60px; height:46px; background-repeat:no-repeat; display: inline-block; text-align:center; text-transform:uppercase; padding-bottom:3px; border-bottom-width:5px; border-bottom-style: solid; padding: 30px 8px 11px 8px; vertical-align:middle; font-size:70%; line-height:1.2em; margin:0.5em 0; } .Required {float:right; padding-right:0.5em; color:#0082C6;border-right:3px solid #0082C6; line-height:1.25em;} .FormBlock.Expandable .SectionHeader .Required { margin-top: 0.25em; } .FormBlock .orderStat.canceled { margin-left:15px;} .orderStat + img { margin-top:20px; vertical-align:middle;} /* Label Lists -- used for addresses and contacts */ .labelList { padding: 1em 0; list-style-type:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .labelList > .noResultEntry, .finderResultList > .noResultEntry { text-align:center; padding:0 1em; } .labelListEntry { width:50%; padding:0.75em 1em; float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .labelListEntry .thumbnail img { max-height:75px; max-width:75px; object-fit:contain; object-position: center; height:inherit; width: inherit; } .labelListEntry .thumbnail { height: 75px; width: 75px; text-align: center; display: inline-block; margin-right: 1em; overflow: hidden; float: left; vertical-align: middle;} .labelListEntry:nth-of-type(even) { padding-left:0.75em; } .labelListEntry:nth-of-type(odd) { padding-right:0.75em; clear:left; } @media only screen and (max-width:750px) { .labelListEntry { width:100%; clear:both; } .labelListEntry:nth-child(2) {padding-top: 0.75em;} .labelListEntry:nth-child(even), .labelListEntry:nth-child(odd) { padding-left:1em; padding-right:1em; } .labelListEntry:nth-last-child(3) { padding-bottom:0.75em; } } /* three-col layout */ .threeColSection { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: table; margin-top:0.5em; } /* three-column layout rules */ .threeColSection > div { display: table-row; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .threeColSection > div > div { display: table-cell; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} .threeColSection > div > div { padding:1em 0.5em; vertical-align:top;} .threeColSection > div > div.singleSegment { width:33%; } .threeColSection > div > div.doubleSegment { width:67%; } .threeColSection > div > div:first-child { padding-left:1em;} .threeColSection > div > div:last-child { padding-right:1em;} .totalsSection .SegmentHeader{font-weight:bold;padding-bottom:1em} .totalsSection .SegmentFooter { padding-top: 1em } .totalsSection button.taxCalc { font-size:85%; padding: 0.1em 0.3em; line-height: 1.4em; } .threeColBlock > .formCol{width:32.66%; float:left;margin-right:1%} .threeColBlock > .formCol:nth-child(3n){margin-right:0} .fourColBlock > .formCol {width:23.5%; margin-right: 2%; float:left; margin-top: 0.5em !important;} .fourColBlock > .formCol:nth-child(4n) { margin-right: 0; } .fieldBlock .DateCalendar { margin:0 auto; } .formCol .mapInfo { width:100%; border: medium none; height: 32em;} /* layout rules for two separated columns */ .twoColBlock > .formCol { width: 50%; float: left; margin-top: 0.5em !important; } .twoColBlock > .formCol:nth-child(2n+1) { border-right: 0.25em solid transparent; background-clip: padding-box; padding: 1em 0.5em 1em 1em; } .twoColBlock > .formCol:nth-child(2n) { border-left: 0.25em solid transparent; background-clip: padding-box; clear:right; padding:1em 1em 1em 0.5em; } .twoColBlock > .formCol .SectionHeader { padding: 0; } /* subheader to hold top buttons and info at the top of a tab */ .subHeader {text-align:right; margin-bottom:1em;} .subHeader button { text-transform: uppercase; } /* structure for the totals sections on analysis and invoicing */ .totalCharts .chart { height: 2.35em; overflow:hidden; position:relative;} .totalCharts .chart div { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height:2.35em; position:absolute; left:0;} .totalCharts .chart + .chart { margin-top:0.6em; } .totalCharts .chart span { white-space:nowrap; display:inline-block; margin:0.3em 0.5em; position:absolute; left: 0; line-height:1.75em; font-weight:600; } .totalCharts .chart span + span {text-align:right; right:0; } .totals div span, .totals div strong { float: left; line-height:1.5em; } .totals div span + span, .totals div strong + strong {float:right;} .totals div::after{content: ' '; display: block; clear: both;} .totals div.amountDue span:last-child { font-size: 130%; font-weight:600; line-height:1.2em} .totals .Balance { font-weight: bold } /* uploader styles */ .uploadBox { background-color: white; padding: 1.6em; text-align:center; cursor: pointer; margin-top: 1em } .uploadBox.uploader{display:inline-block; margin-top:0em} .uploadBox .uploadImage { height: 2em; padding-right: 0.5em; vertical-align: text-bottom; } img.uploadThumb {max-width:100px; max-height:100px;} img.uploadThumb[src=""]{display:none;} .attachmentList .deleteButton { float:none; } .uploadBox .selectFilesText { text-decoration: underline; color: #0085d2; } /*Attachments*/ .attachmentList .fileName { width: 35%} .attachmentList .fileType { width: 15%} .attachmentList .documentDelivery, .attachmentList .POOnly { text-align:center} .attachmentList .delete {text-align:right} /* general grids for cards*/ .GridTable { width:100%; border-collapse:collapse; } .GridTable th { text-align:left; padding:0.5em 0.5em 0 0.5em; vertical-align:bottom; font-weight: 400; font-size:90%; line-height:1.3em; padding-bottom:0.2em; } .GridTable th.numeric { text-align:right; } .GridTable th.icon { text-align:center; } .GridTable td:last-child { padding:0.5em; padding-right:0.5em } .GridTable td:first-child { padding:0.5em; padding-left:0.5em } .GridTable td { padding:0.5em; line-height:1.3em;} .GridTable td.rowControls:last-child, .GridTable .centerAligned,.centerAligned { text-align: center;} .GridTable .rightAligned {text-align:right} .GridTable td.rowControls:last-child .deleteButton { float:none; } .GridTable td.rowControls:first-child { text-align: left;} .GridTable td.total { font-weight: 600 } .GridTable .NoResult { text-align: center; } .GridTable .selectAllCell { text-align: center; } .GridTable .truncate, .truncateLeft, .LineItemGroup .truncate, .divTable .truncate { text-overflow:ellipsis; overflow:hidden; max-width:0; white-space:nowrap; } .GridTable .truncate > * { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .GridTable .notificationIndicator { height: 1.1em; width: 1.1em; display: inline-block; vertical-align: middle; margin-left: 0.2em; cursor: pointer; } /*Grids built with div*/ .divTable { display: table; } .divTable .divTableHeader { display: table-header-group; } .divTable .divTableHeader > span { display: table-cell; padding: 0.5em 0.5em 0.2em 0.5em; font-size: 90%; line-height: 1.3em; vertical-align: bottom; } .divTable .divTableBody { display: table-row-group; } .divTable .divTableBody > div { display: table-row; } .divTable .divTableBody > div > span { display: table-cell; padding: 0.5em; line-height: 1.3em; } /* dropdowns in grids -- adjust padding */ .fieldBlock .GridTable .ui-selectmenu-button .ui-icon { right:0.1em;} /* grid thumbnails */ .fieldBlock .GridTable img.thumbnail { max-height:70px;max-width:70px;} .FormBlock .ui-selectmenu-button, .FormBlock .ui-selectmenu-button.ui-button.ui-widget { border-width:0;} /* Selectmenu item */ .ui-selectmenu-menu .ui-menu-item .ui-menu-item-wrapper { white-space: normal; width: 100%; word-break: break-all; } .GridTable .EditButton, .GridTable .InfoIcon { max-width: 20px; max-height: 20px; } /* find/autocomplete multiselect items */ .MultiSelectFinder .ui-menu-item.ParentItem { font-weight:800; } .MultiSelectFinder .ui-menu-item.SubItem > div { padding-left:1.1em; } /*Filters in managers + sidebar finders*/ .filtersContainer .ui-button.ui-selectmenu-button.ui-widget, .ui-widget-content .filtersContainer .ui-button.ui-selectmenu-button, .filtersContainer input, .filtersContainer .ui-button.ui-selectmenu-button.ui-widget:hover, .filtersContainer .customerFinder .tagBox, .filtersContainer .finder .tagBox { padding-left:0.4em;border-radius:0.7em; font-weight:600; width:24%; height:2.2em; border: none;} .filtersContainer .customerFinder .tagBox, .filtersContainer .finder .tagBox { display:block; box-sizing:border-box; } .filtersContainer .customerFinder .tagBox > span, .filtersContainer .finder .tagBox > span { display:inline-block; overflow: hidden; width: 100%; } .filtersContainer input {position:relative; line-height:1.8em; margin-bottom: 5px;} .filtersContainer input[disabled]{background-color:#e6e6e6} .filtersContainer input.inputDateIcon, .filtersContainer input.inputRangeIcon {cursor:pointer} .filtersContainer input.SearchIcon { background-position:97% 50%;background-repeat:no-repeat; background-size: 1.5em auto;} .filtersContainer input::-webkit-input-placeholder {color: black;font-weight:600; font-style:normal; } .filtersContainer input::-moz-placeholder {color: black;font-weight:600; font-style:normal; } .filtersContainer input:-ms-input-placeholder {color: black;font-weight:600; font-style:normal; } .filtersContainer .FormLabel { padding-left: 1em; display: flex; font-size: 8pt } .filtersContainer input[type=text].stdText, .filtersContainer input[type=text].compactInput, .filtersContainer input[type=text].ui-autocomplete-input, .filtersContainer .ui-selectmenu-button.ui-widget{width: 100%; padding-right:2em; padding-left:0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: none; height:2.2em; } .FormBlock .filtersContainer > div.buttons, .FormSection > .filtersContainer > div.buttons { display: inline-flex; min-height: 4.4em; align-items: flex-end; justify-content: flex-end; } .filtersContainer > div.buttons:nth-child(4n+1) { min-height: 3em; width:100%; } .filtersContainer > div.buttons:nth-child(4n) { width: 50%; } .filtersContainer > div.buttons:nth-child(4n+3) { width: 75%; } .filtersContainer .buttons [role=button] { width: 2em; height: 2em; margin-left: 0.2em; margin-bottom: 0.5em; } .filtersContainer .warning .compactInput { background-color:#ffffd9 } .filtersContainer .warning .FormLabel::before{ content:' '; display:inline-flex; height:13px; width:13px; align-self:center; background-image: url("../../Images/CRM/shadow/YellowWarningExclamation.svg"); background-repeat: no-repeat; } .FormBlock .filtersContainer > div, .FormSection > .filtersContainer > div { width: 25%; display: inline-block; vertical-align: top; padding: 0 0.3em; box-sizing: border-box; } .FormBlock .filtersContainer > div.fullWidthFilter { width: 100%; display:block } .filtersContainer .customerFinder .tagBox, .filtersContainer .finder .tagBox { display:block; width: 100%; padding-right:2em; padding-left:0.9em; white-space:nowrap; height:2.2em;} .filtersContainer .customerFinder > span, .filtersContainer .finder > span {width: 100%;overflow: hidden;display: block;} .filtersContainer .customerFinder .finderTag, .filtersContainer .finder .finderTag { margin-right:0.4em; display:inline-flex; justify-content: flex-start; align-items:center; max-width:80%; height:2.2em } .filtersContainer .customerFinder .finderTag:last-child, .filtersContainer .finder .finderTag:last-child { max-width:100%; } .finderTag > span { display: inline-block;max-width: 90%;text-overflow: ellipsis;overflow: hidden; margin-left: 0.2em; white-space: nowrap; } .filtersContainer .customerFinder .finderTag button, .filtersContainer .finder .finderTag button, .RecipientTag button { margin-left: 0.15em; height:12px; width:12px; border-radius: 15px; text-indent:-15em; padding:0; margin:0; overflow: hidden; flex-grow:0; flex-shrink:0; } .filtersContainer .customerFinder .tagBox.disabled .finderTag button, .filtersContainer .finder .tagBox.disabled .finderTag button, .filtersContainer .customerFinder .multiSelectDropdownBox.disabled .finderTag button, .filtersContainer .finder .multiSelectDropdownBox.disabled .finderTag button { background-image: url(../Images/CRM/shadow/PlusSignInCircle-Grey-WhiteCross.svg); } #divFilterWrapper { padding-top: 0.5em; } #divFilterWrapper .filtersContainer { margin-top: 0em; display:flex; flex-direction:row; justify-content:flex-start; flex-wrap:wrap; position:relative; } .filtersContainer::after { right: 0; bottom: 102%; border: solid transparent; content: " "; position: absolute; border-color: rgba(204, 255, 204, 0); border-bottom-color: #cccccc; border-width: 1em; } .sidebarWrapper .filtersContainer::after { display:none; } .filterActions { margin-top: 1em; text-align:right;} .filterActions > button { color: #0082C6; background-color: transparent; text-transform:capitalize; padding: 0.1em 0.5em} .filtersContainer + button.expandToggle { width: 100%; } .filtersContainer + button.expandToggle span { top: 10px; border-bottom-left-radius: 1.5em; border-bottom-right-radius: 1.5em; background-color: #d2d2d2; z-index: 1} table.tableToCard span.cardLabel { display:none; } /* On small screens, the filters should expand to 100% and stack vertically */ @media only screen and (max-width:750px) { .FormBlock .filtersContainer > div, .ManagerFilterWrapper .filtersContainer > div { width: 100% } /* Fix selectmenu item width size by screen to prevent screen overflow */ .ui-selectmenu-menu { width: calc(100% - 4.1em); } /* Override the inline width style calculated by jquery-ui */ .ui-selectmenu-menu .ui-menu { width: 100% !important; } .ui-selectmenu-menu.half-width { width: calc(50% - 2.8em); } /*convert tables with the tableToCard class to cards*/ .GridTable.tableToCard, table.tableToCard tbody { display:block; box-sizing:border-box; } .GridTable.tableToCard tr { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-end; width: 100%; margin-bottom: 0.5em; padding: 0.75em; box-sizing:border-box; } .GridTable.tableToCard tr > td {width: 50%; max-width:50%; display:block; box-sizing:border-box; padding:0.05em 0; line-height:1em; } .GridTable.tableToCard thead { display: none} .GridTable.tableToCard span.cardLabel { display:inline; margin-right: 0.5em;} .GridTable.tableToCard tr:last-child { margin-bottom:0; } /*Pop-in*/ .GridTable.tableToCard tr.detailRow { margin-bottom: 0; margin-top:0; padding:0; width:100%; } .GridTable.tableToCard tr.detailRow > td { width:100%; max-width:100%; padding:0; } table.GridTable.tableToCard tbody > tr.detailRow, .GridTable.tableToCard tbody > tr.detailRow + tr.spacingRow, .GridTable.tableToCard tbody > tr.spacingRow + tr.detailHolder{ border-width: 0; background-color:transparent; box-shadow:none; } } /* loading spinner */ @keyframes throbber { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .throbber { display:block; margin:1em auto; height:40px; width:40px; animation-name: throbber; animation-duration: 700ms; animation-iteration-count: infinite; animation-timing-function: linear; } .throbber.lockPage{position:fixed; top:50%; left:50%;} /* locking panel */ div.crmLock { background-color: rgba(255, 255, 255, 0.3); display:none; position:fixed; height:100%; width:100%; top:-1px; left:-1px; z-index:999; align-items:center; } /*save indicator*/ .saveBlock { position: fixed; bottom: 0; right: 5px; padding: 3px; min-width: 250px; border-radius:5px 5px 0 0; overflow:hidden; border-style:solid; border-width:1px 1px 0 1px; box-sizing:border-box; z-index: 5; } .saveBlock.init { height:0; overflow:hidden; } .saveBlock.active { transition: all ease 900ms; height:2.1em; opacity:1; } .saveBlock.idle { height: 0; overflow:hidden; opacity:0.8; transition: all ease-out 1200ms; padding:5px; cursor:pointer; } .saveBlock .saveIndicator { display:flex; justify-content:flex-start; align-items:center; font-size:95%; } .saveBlock.idle .saveIndicator { display:none; } .saveIndicator::before { content: ' '; display:inline-block; background-size:contain; height:1.5em; width:1.5em; background-position:center; margin-right:0.7em; background-repeat:no-repeat; } .saveIndicator button { margin-right:0; margin-left:auto; font-size:80%; border-radius:0.2em; cursor:pointer; } .saveIndicator button[disabled] { cursor: not-allowed; } .saveIndicator > span { cursor:default; margin-right: 0.5em; } .saveIndicator .SavedTime { display:none; } .saveIndicator.saved .SavedTime {font-size: 80%; margin: 0 0.5em; display:inline; } .saveIndicator.warn .ActionLabel { font-size: 80%; } .saveIndicator.saving::before { animation-name: throbber; animation-duration: 1000ms; animation-iteration-count: infinite; animation-timing-function: linear; } /* survey summary display */ .surveySummary { margin-top:0.5em; } .surveySummary h6 { display:inline-block; float:left;} .fieldBlock .surveySummary .deleteButton { float:none; } .surveySummary .question { clear:both; border-bottom-style:solid; border-bottom-width:1px; line-height:2.4em; } .surveySummary .question span { width:50%; text-align:left; display:inline-block; -moz-box-sizing:border-box; box-sizing:border-box; } .surveySummary .surveyControls {margin-top:1em; text-align:right} .surveySummary .surveyControls .EditIcon{cursor:pointer; vertical-align:initial} .surveySummary .surveyControls .chkCompleteMatrixSurvey{float:left;} /* general subcard display */ .subCard .controls { text-align:right; position:relative} .subCard .controls .expandToggle ~ .deleteButton { position:absolute; right: 9px; bottom: -30px; } .subCard .shipdate .controls .deleteButton, .subCard .shippingcharge .controls .deleteButton {bottom: -20px;} .subCard .controls .Completed{height:1em;width:2em;} .subCard .controls .Warning{width:1.3em;margin-right:0.8em; } .subCard .controls .Warning[data-warnmsg]{cursor:pointer} .subCard .controls .Warning, .subCard .controls .Completed{display:inline-block; } /* survey UI display*/ .QuestionDiv table {border-collapse:collapse;} .QuestionDiv table,.QuestionDiv table tbody, .QuestionDiv table tr, .QuestionDiv table tr td { display: block; margin:0; padding: 0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .QuestionDiv table tr td { padding:0.3em 0; display:inline-block; width:49.6%; white-space:normal; } .QuestionDiv table tr td .radioWrapper { width:50%; } /* speech bubble dialog */ .talkBubbleContent { display:inline-block; background-clip:padding-box; border:medium solid transparent; position:absolute; padding:0.5em; } .talkBubbleContent .PanelFooter{padding:0} .talkBubbleContent .FormBlock{margin:0} .talkBubbleContent .ActiveInfo span { color: black; } /*tooltip boxes -- used by validators*/ .tooltipBox { display: inline-block; padding: 5px; -moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; border-radius:6px; position: absolute;} .tooltipBox img {cursor:pointer;} .tooltipBox img.right { margin-left: 15px; } .tooltipBox img.left { margin-right: 15px; } /* flipclock structure */ .flip-input { height:0; width:0; margin:0; padding:0; border:none; } .flip-body { display: inline-block; overflow:hidden; vertical-align:middle; } .flip-display {font-size: 150%; cursor:pointer; position:relative; padding-right:1.9em; } .flip-display .flip-separator { padding: 0 0.1em; vertical-align:middle; display:inline-block; line-height:1.2em} .flip-display .digit { display:inline-block; margin-right:1px; font-size: 150%; text-align:center; position:relative; width:0.8em; padding:0 0.1em; border-radius:0.2em; vertical-align:middle; font-weight:600; line-height:1.2em; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .flip-display .digit::after { content: ' '; position:absolute; display:block; height:0.6em; bottom:0; left:0; width:100%; border-top:1px solid; background-image: -moz-linear-gradient(top, rgba(0,0,0,0.1), rgba(0,0,0,0)); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.1), rgba(0,0,0,0)); background-image: linear-gradient(top, rgba(0,0,0,0.1), rgba(0,0,0,0)); -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .flip-amset span, .flip-amset label { font-size:46% !important; border-radius:0.6em; text-align:center !important; padding: 0.12em 0 !important; font-weight:bold; cursor:pointer; } .flip-edit { display: none; padding-right:1.9em; } .flip-edit, .flip-edit input { font-size: 125%; position:relative; } .flip-edit input[type=text] { width:2.43em; border-radius:0.1em; text-align:right; border-style:none; padding: 0 0.2em; } .flip-edit .flip-separator { padding: 0 0.3em; } .flip-amset { display:inline-flex; flex-direction:column; width:1.6em; vertical-align:top; padding:0; margin-left:0.2em; justify-content:space-between; top:0; bottom:0; right: 2px; position:absolute; } .flip-amset input[type=radio] { position:absolute; top:-1em; left:-1em; display:inline; } .flip-amset input[type=radio]+label:before { display:none;} .flip-amset input+label { line-height:1.9em; margin-left:0 !important; justify-content: center; } /*Date/time sets for aligning the flipclock and calendar for date/time input*/ .dateTimeSet { text-align:center; } .dateTimeSet .Calendar { vertical-align:middle; display:inline; } .dateTimeSet .flip-body { margin-left:1em; } /*slider tickmarks*/ .completionSlider { text-align:center; } .completionSlider > span { display:inline-block; margin-bottom:0.6em; } .tickmarks { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; list-style-type:none; position:relative; } .tickmarks > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; list-style-type:none; width:10%; height:5px; float:left; border-left: 1px solid #5A5A5A; text-align:left; white-space:nowrap; } .tickmarks > li:first-child {height:15px; } .tickmarks > li:nth-child(6) { height:10px;} .tickmarks > li:last-child { height:15px; width:0%; position:absolute; right:0; } .tickmarks > li > span{ position: relative; top: 10px; font-size: 12px; font-weight: normal; display:inline-block; margin:0; padding:0; transform: translateX(-51%);} .tickmarks > li:first-child > span { transform: translateX(-1%); } .tickmarks > li:last-child > span { transform: translateX(-99%); } /* self-labeled input - label appears to be part of input */ .selfLabeledInput.fieldBlock { min-height: 1em; } .selfLabeledInput {display:flex; align-items:stretch; } .selfLabeledInput > span, .selfLabeledInput > label { flex-grow: 1; padding: 0 0 0 1em; text-align:right; width: 10%; } .selfLabeledInput > *:nth-child(2) { flex-grow:9; padding: 0 0.5em; } /*Document Mail Form*/ .mailformContainer { padding:15px 0; } .mailformContainer::before{ display:block; content: ' '; width:15px; height:15px; transform: rotate(45deg); position:relative; top:-22px; left:10em; } .EmailForm { max-width:750px;margin:0 auto; background-color:#f5f5f5; box-shadow: 1px 1px 5px #555, -1px -1px 5px #999;} .EmailForm .emailHeader > div { margin-bottom:10px; } .EmailForm .selfLabeledInput:last-child button { flex-basis: 15%; flex-grow: 0; flex-shrink: 0; } .EmailForm .selfLabeledInput > label { flex-basis: 25px; flex-grow: 0; flex-shrink: 0; text-align: left; text-transform: capitalize; align-self: center; } .EmailForm .selfLabeledInput.fieldBlock { min-height: 2.75em; align-content:center; } .EmailToRow { display: flex; align-items: flex-start; } .EmailToRow .selfLabeledInput { flex-grow: 1; } .EmailToRow > button { flex-grow: 0; flex-shrink: 0; flex-basis: 5%; padding: 0.1em 0; height: 3.2em; } .selfLabeledInput input { flex-grow: 1; padding: 0 0.5em; } .selfLabeledInput.EmailRecipient { flex-wrap: wrap; } .selfLabeledInput.EmailRecipient .RecipientTag { flex-grow: 0; padding: 0.25em 0em 0.25em 0.25em; border-radius: 2em; display: flex; } /*Recipient Tag*/ .RecipientTag { font-weight: 600; } .RecipientTag > span { align-self: center; } .RecipientTag .Thumbnail span { vertical-align: middle; } .RecipientTag > button { align-self: center; margin: 0 0.25em 0 0.5em; } @media (hover:hover) { .RecipientTag > button { visibility: hidden; } .RecipientTag:hover > button { visibility: visible; } .RecipientTag:hover { background-color: #EEE; } } .RecipientTag .Thumbnail { display: inline-block; width: 20px; height: 20px; overflow: hidden; border-radius: 15px; text-align: center; vertical-align: middle; margin-right: 0.25em; } .RecipientTag .Thumbnail img { object-fit: cover; width: 100%; height: 100%; vertical-align: middle; padding-bottom: 0.1em; } /* email form */ .emailDialog, .EmailOrderDialog { max-width:800px; position:absolute; left: -1000px; } .emailDialog.ui-dialog { padding: 0; left:0; } .emailDialog.ui-dialog .ui-dialog-content { padding: 0; position:relative; left:0; } .emailDialog .emailHeader.FormBlock { margin-top: 0; } .emailDialog .emailAttachment { text-align: left; background-color:transparent } .EmailForm .trumbowyg-box, .EmailForm .trumbowyg-editor { margin: 0 auto; border: none; min-height: 180px; } .EmailForm .trumbowyg-editor { padding: 5px 3em 0; } .EmailForm .trumbowyg-box.trumbowyg-disabled, .EmailForm #divEditorContent { cursor: not-allowed; } .EmailForm.readonly .trumbowyg-box.trumbowyg-disabled, .EmailForm.readonly #divEditorContent { cursor: initial; } .EmailForm .trumbowyg-box.trumbowyg-disabled .trumbowyg-button-pane { display: none; } .EmailForm .emailHeader { padding: 1.25em 1.7em 0; } .EmailForm #divEditorContent .buttons, .EmailForm .buttonRow .buttons { text-align: right; width: 4%; } .EmailForm #divEditorContent .recipientList { padding: 1em 0 2em 2.5em; width: 96%; } .EmailForm .buttonRow .buttons { text-align: right; width: 14%; } .EmailForm .buttonRow .buttons button { align-items: center; display: flex; padding: 0.1em 0.5em; } .EmailForm .buttonRow .attachmentList { padding-left: 1.5em; width: 86%; } .EmailForm #divEditorContent, .EmailForm .buttonRow { display: flex; } .EmailForm #divEditorContent img[role=button], .buttonRow img[role=button] { height:1.5em; width:1.5em; } .EmailForm #lbdEmailRecipients { text-align: center; } .trumbowyg-editor > * { margin: initial !important; padding: initial !important; } .trumbowyg-button-pane button { color: #000; text-transform:capitalize; } .expandAndDelete { float:right} .expandAndDelete .deleteButton { padding-right: 0.7em; padding-top: 0.2em} tr .EditIcon, .catalogContent .EditIcon, .ProductGroupList .EditIcon, .CustomSequenceList .EditIcon { width: 24.5px; height: 20px; cursor: pointer } .AdaptiveGrid tr .EditIcon { height: 30px; width: 29px; } .ViewSwitch { display:flex; padding:0.1em; width: 5.0em } .ViewSwitch.SafeView {width: 6.0em} .ViewSwitch span { padding: 0 0.3em; flex-grow: 1; line-height: initial; /*make the text unselectable*/ -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ } .ViewSwitch .Toggle { flex-grow:1; line-height:initial; width: 1.7em} .ViewSwitch.Active span { order: 2; } .ViewSwitch.Active .Toggle { order: 1;} .ViewSwitchContainer{display:flex; padding: 0.225em 0} .ViewSwitch ~ .ViewSwitchLabel {padding-right: 0; padding-left: 0.5em;} .ViewSwitchLabel{ padding-right: 0.5em; padding-left: 0} .SectionHeader .ViewSwitchContainer {float:right;} .SectionHeader .ViewSwitch{width:6em;} .SectionHeader img[role=button] { height:1.3em; width:1.3em; float:right; margin-left:0.2em } .ViewSwitch[disabled]{cursor:default;} .ViewSwitchContainer label:first-child { margin-right:0.5em; } .TwoInnerCol > .ViewSwitchContainer { margin-top: 1.5em; } .ViewSwitch.Large { width: 10em; height: 2em; } .ViewSwitch.Large span { align-self: center; font-size: 12pt; } /*CRM Address Manager*/ .addressManagerTools .compactInput { width: 75%} .addressManagerTools .addressSearchButton { height: 25px; width: 25px; position: relative; top: 0.5em} .AddressManagerListView .FormBlock {min-height: 150px} .AddressManagerListView .filters {justify-content: flex-start} .AddressManagerListView .finder { width: 25%} .AddressManagerListView .labelFrame .EditIcon {top: 0.75em} .AddressManagerListView .labelFrame .selectButton {position: absolute; bottom: 0.75em; right: 0.60em; cursor: pointer} .AddressManagerDialog .detailHeader .deleteConfirm { color: white} .emailDialog.ui-dialog .ui-dialog-titlebar { background-color: #eee; padding-left:1em; } /*auto complete*/ .ui-autocomplete { max-height: 100px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; } /* IE 6 doesn't support max-height * we use height instead, but this forces the menu to always be this tall */ * html .ui-autocomplete { height: 100px; } /*Receive Payment Dialog*/ .ReceivePayment img,.ReceivePayment button {background-repeat:no-repeat; background-size:contain; background-position:center center; margin:auto; } .PaymentSelector .PrevMethod,.PaymentSelector .NextMethod {width:5%;float:left;text-align:center; vertical-align:middle; line-height:100px; } .PaymentSelector .Methods {overflow:hidden; white-space:nowrap; width:90%; float:left;} .PaymentSelector .Methods div {padding:10px; position:relative; display:inline-block; text-align:center; cursor:pointer;} .PaymentSelector .Methods img {height:65px; width:65px; display:block} .PaymentAction button.ui-button {height:50px; width:50px; float:right; cursor:pointer; background-color:transparent;border:none; } .PaymentSelector .Methods div.active {border-bottom:2px solid #0085d2;} .PaymentSelector .Methods span{color:#0085d2} .PaymentSelector .Methods div[disabled] span{color:#6B6B6B} .PaymentDetail input.PaymentDate,.inputDateIcon {background-image:url("../Images/CRM/shadow/calendaricon-receivepayment.svg"); background-position:right center; background-repeat:no-repeat; background-size: 30px 30px;} .inputRangeIcon {background-image:url("../Images/CRM/shadow/GeneralJournal-BlueTag-Coding.svg"); background-position:right center; background-repeat:no-repeat; background-size: 25px 25px;} .postPayment{background-image:url("../Images/CRM/shadow/greencheckbutton.svg"); } .PaymentAction[disabled] .postPayment {background-image:url("../Images/CRM/shadow/greencheckbutton-gray.svg"); } .cancelPayment{background-image:url("../Images/CRM/shadow/yellowcancelbutton.svg"); } .PaymentAction[disabled] .cancelPayment {background-image:url("../Images/CRM/shadow/yellowcancelbutton-gray.svg"); } /*loading dialog*/ .noclose .ui-dialog-titlebar-close{display:none;} /*Document Delivery*/ .CarbonCopyTable .recipient {width: 20%} .CarbonCopyTable .method {width: 15%} .CarbonCopyTable .contact {width: 20%} .CarbonCopyTable .address {width: 32%} .CarbonCopyTable .edit {width: 8%; text-align:center} /*Cancel and delete buttons*/ .PanelFooter button.cancelItem, .PanelFooter button.saveItem{float:none} button.cancelItem, button.saveItem, button.resetItem, button.cancelPayment {background-repeat:no-repeat; background-size:contain; background-color:transparent; background-position:center; margin:auto; height:22px; width:22px; float:right; cursor:pointer; text-indent:-50em; overflow:hidden; } button.resetItem { float:left; } .fieldBlock .deleteButton { float: right; margin-right: 0.6em; } .CountryCurrency{border:1px solid gray; font-weight:bold; padding:0 10px 0 10px; display:inline-block;} .DisbursementRow{padding-bottom:5px;} /*for panel client finder*/ .ClientFinderWrapper {height:150px;display:flex; justify-content:center; position:relative;} .ClientFinderWrapper > * {align-self:center;} .ClientFinderWrapper .Logo img { width:7em; } .ClientSearch .LoadClientInfo { height:20px; cursor:pointer; top:0.5em; right:0.5em; position: absolute;} .ClientSearch .headshot {height: 98px; width: 98px;} .ClientSearch #imgClientLogo { max-height: 98px; max-width: 98px; height: 98px; width: 98px; object-fit: cover; padding: 0;} .ClientSearch .count { height: 39px;} .ClientFinderWrapper .Info {max-width:30%; text-wrap: normal; word-break: break-word;} .ClientFinderWrapper .Info span {display:block;} .ClientFinderWrapper > div {padding:0px 15px 0px 15px;} .ClientFinderWrapper .statusBlock{ margin:0; width: 5em; } .ClientFinderWrapper .statusBlock .count {padding:0.4em 0;} .ClientFinderWrapper .statusBlock > *:nth-child(2) {height:1.5em;} .ClientFinderWrapper .CalendarWrap .DateCalendar > span.header {visibility:visible;} .ClientFinderWrapper .DateCalendar::after {visibility:hidden;} .roundButton { display:inline-block; } .roundButton span {display:block;width:0.9em;height:0.9em;line-height:0.7em;border: 0.1em solid #f5f5f5;border-radius: 50%;color:#f5f5f5; text-align:center;text-decoration:none;background: #bbb;font-size:1.2em;position:absolute;top: 0.3em;right:0.3em;} .roundButton:hover span{color:#f5f5f5;background: #262626;cursor:pointer;text-decoration:none;} /*invoice generate*/ .holdIcon{max-height:20px; max-width:20px; vertical-align:middle;} tr:first-child td.CellProgram {color:#0082c6;} .InvoiceList th {color:gray} .InvoiceList th.SortingOption button { width: 1em } .SortingOption button { margin-left:0.2em; } .InvoiceTable tr.CellCustomer,.InvoiceTable td.CellCustomer {padding-left:0.6em;} .InvoiceTable th.CellOnHold {padding-left: 0.6em;} .InvoiceTable td.CellStatus {font-size:80%;} .InvoiceTable td.CellStatus img {max-height: 25px; max-width: 25px; vertical-align: middle;} .InvoiceTable .CellStatus {width:3%; text-align: center;} .InvoiceTable .CellCustomer {width:20%;} .InvoiceTable .CellSO {width:10%;} .InvoiceTable .CellDate {width:10%;} .InvoiceTable .CellBranch {width:10%;} .InvoiceTable .CellDeliver {width:5%;} .InvoiceTable .CellDraft {width:5%;} .InvoiceTable .CellOnHold {width:3%;} .InvoiceTable tbody tr:nth-child(2n+1){background-color:#f5f5f5} .InvoiceList .systemIcon {padding-left:0.7em} .InvoiceList .VoidIcon { width: 1em; vertical-align: middle } .ConsolidatedInvoiceTable td span.GroupSpace {padding-left:3em} .ConsolidatedInvoiceTable .InvoiceGroup {background-color:#f5f5f5} .ConsolidatedInvoiceTable .invoiceGroupSeparator{height: 15px;} .RecurringInvoiceTable.InvoiceTable .CellStatus { width: 5%; text-align: center; } .RecurringInvoiceTable.InvoiceTable .CellInvoiceID, .RecurringInvoiceTable.InvoiceTable .CellInvoiced { width: 10%; text-align: center; } .RecurringInvoiceTable.InvoiceTable .CellTitle { width: 18%; } .RecurringInvoiceTable.InvoiceTable .CellAmount { width: 10%; text-align: right; } .RecurringInvoiceTable.InvoiceTable .CellFrequency { width: 10%; } .RecurringInvoiceTable.InvoiceTable .CellDate { text-align: center; } /*sortable lists*/ .SortableList .SortingOption, .cardSortBar .SortingOption {cursor:pointer} .SortableList th { line-height:1.2em; padding-bottom:0.25em; } /*truncates on left (always use an inner element with this) */ .truncateLeft { text-align:left; direction:rtl; } .truncateLeft > * { direction:ltr; } .truncateLeft::after {content: '\200E'; } /*Past Due Notices*/ .SendPastDueNotices .GridTable .truncate { width:30%; } /*client payment credit table style*/ .CreditPaymentTable th {color:gray; padding-bottom:0.5em} .CreditPaymentTable .CellDate{width:11%;} .CreditPaymentTable .CellType{width:11%;} .CreditPaymentTable .CellNumber{width:7%;text-align:center} .CreditPaymentTable .CellAmount{width:11%} .CreditPaymentTable .CellDiscount{width:11%} .CreditPaymentTable .CellPrepaid{width:11%} .CreditPaymentTable .CellBalance{width:11%} .CellArrow{width:5%;text-align:center} .GridTable .CellApply{width:15%;padding-right:1em} .GridTable th.CellApply{width:15%;padding-right:1.5em} .CellArrow img{cursor:pointer} .CellArrow img.hold{cursor:default} td.CellDiscount{position:relative} td.CellDiscount img{position: absolute; right: .7em; top: .65em; cursor: pointer} th.CellDiscount{padding-bottom: .3em; padding-right: .75em; cursor: pointer} th.CellDiscount img{vertical-align: bottom} .CellDiscount.deactivate img {-moz-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV";} .CellDiscount input.hasTerms:disabled{background-color:#ffffff; text-align:left} #divActivityNotifications .EditIcon { top: 0.75em;} /* Finders in sidewrapper*/ .sidebarFinder, .sidebarFinder > .subForm { display: flex; flex-flow:column; height: 100% } .sidebarFinder .finderResult { overflow-y: scroll; margin: 0 -0.8em -0.8em -0.8em; flex-grow:1; height: max-content;} .sidebarFinder .formSubsection:last-child {padding-bottom: 0;} .sidebarFinder .finderResult.hasNewButton { margin-bottom: -0.5em; padding-bottom: 0em; } .sidebarFinder .finderResult.hasNewButton .finderResultListEntry:last-child { padding-bottom: 0.1em } .sidebarFinder .finderNewButton { margin: auto -0.8em 0 -0.8em; padding: 0.8em 0em 0.8em 0.8em; display: flex; align-items: flex-end; flex-grow:2;} .sidebarFinder .finderNewButton button.newRow { padding-left:0; } .sidebarFinder .finderAddMultiple { padding: 1.5em 1em 0em 0em; } .sidebarFinder.NoGroup ul li.MultiSelect.SubItem { padding-left: 0em; } /*Styling for search input*/ .sidebarFinder .SearchBox { margin-top: 0.5em; } .finderActions { margin-top: 1em; text-align:right} .finderActions > button { color: #0082C6; background-color: transparent; text-transform:capitalize; padding: 0.1em 0.5em} input.finderField { border-width: 0em; margin-top: 1em; padding-left:0.6em; font-weight: 600; color: black; font-size: 1em} input.finderField::-webkit-input-placeholder { font-size: 1em; font-weight: 600} input.finderField::-moz-placeholder { font-size: 1em; font-weight: 600} input.finderField:-ms-input-placeholder { font-size: 1em; font-weight: 600} input.finderField:-moz-placeholder { font-size: 1em; font-weight: 600} input.finderField::-webkit-inner-spin-button, input.finderField::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0} .finderFilters > div { margin-top: 0.5em} .finderFilters .ui-selectmenu-button { width: 100% !important; border-width: 0em } .ui-selectmenu-menu { z-index: 104 !important} .finderResult { margin: 0.5em -0.8em; padding: 0.8em; background-color: #eee} .finderResultList { list-style-type: none;} .finderResultListEntry { padding: 0.75em 0em; font-weight: 600} .finderResultListEntry img.linkIcon {position:absolute; height: 1.75em; bottom: 0.5em; right: 0.5em; cursor:pointer; z-index: 10} .finderResultListEntry .objectIdentifier { float:left } .finderResultListEntry .totalAmount { float: right; color: black} .finderResultListEntry div.selectOverlay { background-color:rgba(86,86,86,0.8); position:absolute; top: 0; left: 0; width:100%; height: 100%; border-radius: 0.35em } .finderResultListEntry .labelFrame .FormLabel:first-child, .labelFrame .content .FormLabel.OrganizationName, .widgetHeader .Organization, .labelFrame .content .FormLabel.ContactName { font-weight: 700; font-size: 120%; } .finderResultListEntry .labelFrame .FormLabel, .labelFrame .content .FormLabel { text-overflow: ellipsis; overflow:hidden; padding-right: 0em; display: block; line-height: 1.4em; } .finderResultListEntry .labelFrame .FormLabel:nth-child(n+2), .finderResultListEntry .labelFrame .FormLabel:nth-child(n+2) > * { line-height: 1.3em; } .finderResultListEntry .labelFrame .roundheadshot { display: inline-block; float:none; margin-top: 0.5em; margin-bottom: 0em; } .finderResultListEntry .labelFrame .roundheadshot + div { display: inline-block; vertical-align: top; width: 61% } .customerLogo .guestWrapper {position:relative; border-radius:50%; display:inline-block; overflow:hidden; } .customerLogo .guest { position: absolute; left: 0; bottom: 0; right: 0; text-align: center; line-height: 1.3em; font-size: 90%; padding: 0 0 0.2em 0; color: white; background: gray; } .customerLogo .customerAcronym { font-size: 2.1em; } .labelFrame .roundheadshot { float: left; margin-right: 0.5em; width: 65px; height: 65px; margin-bottom: 2em } .labelFrame .customerLogo { margin-right: 1em; max-width:75px; max-height:75px } .labelFrame .customerLogo img {width: 75px; height: 75px; object-fit: cover; object-position:top; } .contact .roundheadshot img, .labelFrame .roundheadshot img { width: 65px; height: 65px; object-fit: cover; object-position:top; } .finderResultListEntry .OrganizationName, .finderResultListEntry .ElementName { font-weight: bold } .finderResultListEntry .ReferenceName { margin-top: 0.5em; } /*flexbox-based frame layout*/ .labelFrame.flexFrame { display:flex; flex-direction:row; align-items:flex-start; align-content:flex-start } .FormBlock .SectionHeader .summary { display:none; } .FormBlock.collapsed .SectionHeader .summary { display:inline-block; } /*In mobile view, leave a space on the right edge in the sidebar finders for easy scrolling */ @media only screen and (max-width:750px) { .finderResultListEntry .labelFrame { margin-right: 1.5em; } } button.expandAll { display:none; } /* New Item form inside finder */ .sidebarFinder.addMode .searchItems { flex-grow:0; height:3em;} .sidebarFinder.addMode .searchItems .expandToggle { display: none; } .sidebarFinder.addMode .finderNewButton { padding-bottom: 0; } .sidebarFinder .TableDetailForm, .sidebarFinder .itemDetail.TableDetailForm .SectionHeader { border-width: 0;margin: 0; background-color:transparent; padding-top:0; text-align:left;} .sidebarFinder .TableDetailForm .FormBlock { background-color:transparent; padding:0; } .sidebarFinder .TableDetailForm { background-color:transparent; padding:0; margin-top:0; } .sidebarFinder .TableDetailForm .ActiveInfo { display:none; } .sidebarFinder .TableDetailForm::after { display:none; } .sidebarFinder .newItem.subForm { margin:0 -0.8em; overflow:auto; } .sidebarFinder .TableDetailForm div.twoColForm.formCol { width:100%; float:none; } .sidebarFinder .TableDetailForm .extField { display:none; } .sidebarFinder .AddressDetail .twoColForm:nth-child(2) .fieldBlock:first-child {margin-top: 10px; padding-top: 10px} .sidebarFinder .newItem.subForm .verificationButton .unverifiedAddressButton{margin:5px 0 25px 0;} .sidebarFinder .newItem.subForm .verificationButton .verifiedAddressButton{margin-top:5px;} .sidebarFinder .newItem.subForm .verificationNotes {margin-bottom: 20px;line-height: 1em;font-size: 10pt;} .sidebarFinder .newItem.subForm .verificationNotes span {line-height: 1em;} /*New Address Form specifics*/ .sidebarFinder .TableDetailForm.AddressBlock .AddressReferences .formSubsection:last-child{padding-bottom:0} .sidebarFinder .TableDetailForm.AddressBlock .AddressReferences .SectionHeader ~ .formSubsection{padding-top: 0;} .sidebarFinder .TableDetailForm.AddressBlock .AddressReferences .References .formCol:nth-child(1), .sidebarFinder .TableDetailForm.AddressBlock .AddressReferences .SectionHeader {display: none} .sidebarFinder .TableDetailForm.AddressBlock .AddressSalesTax { display:none; } .sidebarFinder .expandAllWrapper{width: 100%; position: absolute; text-align: center; margin-top: 15px;} .sidebarFinder button.expandAll { background-size: 2.3em; width: 1.5em; height: 0.9em; border-bottom-left-radius: 1.5em; border-bottom-right-radius: 1.5em; position: relative; top: -0.5em; padding-right: 0.4em; margin: 0 auto; background-position:center top; background-repeat: no-repeat;} /*End new item sidebar*/ /*Filter dropdown lists in Contacts section in Supplier Detail*/ .Contacts .filter .ui-selectmenu-button { width: 24% !important} /*New Row button*/ .newRow.ui-button, .addMultiple.ui-button, .newRow { background-color: transparent; color: #0082C6; text-transform:capitalize; font-style:italic; border:none } .newRow.ui-button .ui-icon, .addMultiple.ui-button .ui-icon { background-image:url("../Images/jQueryUI/ui-icons_0085D2_256x240.png") } .newRowIcon { background-image: url("../Images/CRM/shadow/PlusSignInCircle-Blue.svg"); height: 13px; width: 13px; left: 50%; top: 50%; display: inline-block; margin-right: 5px } .GridTable tr+tr.newRecord:nth-child(2n) td, .GridTable tr+tr.controlsRow:nth-child(2n) td {padding-bottom:0;} .newRow.ui-button .ui-button-text, .addMultiple.ui-button .ui-button-text { padding-top:0.1em; padding-bottom:0.1em; } /*Action bubbles for supplier and client addresses*/ .AddressActionBubble, .ContactActionBubble { display: none; } .ActionBubbleButtons { display: flex; } .bubbleButtonContainer { font-size: 0.8em; padding-left: 6px; padding-right: 6px; } .AddressActionBubble img, .ContactActionBubble img { display: block; height:20px; cursor:pointer; float: none; margin: 0 auto; } /*Last update info section*/ .lastUpdated { padding: 2% 5% 0; display: flex; justify-content: space-between; } .lastUpdated > * { display:inline-block; } /* Phantom Row */ .RecordDetail { position: relative; margin-top: 2em !important; margin-bottom: 2em } .RecordDetail:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(246, 246, 246, 0); border-bottom-color: #f6f6f6; border-width: 1.5em; margin-left: -1.5em; } /*Supplier Manager*/ .AlphabetNavigationBar .tab { padding: 0.2em 0.5em } .SupplierManagerList .labelFrame { color: inherit; min-height:7.3em;} .SupplierManagerList .labelFrame div { display: inline-block; max-width: 60%; line-height:1.5em;} .SupplierManagerList .objectIdentifier {font-size: 120%; font-weight:700; } .SupplierManagerList .labelFrame img:nth-child(3) { position: absolute; top: 0.5em; right: 0.5em; width: 2em } .SupplierManagerList .labelFrame img:nth-child(4) { position: absolute; top: 2.5em; right: 0.5em; width: 2em } /*Style for new widget header*/ .inline { display: inline-block} .widgetHeader .detailHeaderLeft h2,.widgetHeader .detailHeaderLeft h3 { max-width: 45em; text-overflow: ellipsis; overflow:hidden; white-space:nowrap } /*Check*/ .ManualAddress{border:0 none; border-radius:0.35em;box-shadow:1px 1px 0 gray; min-height:7em; width:100%; margin:0.3em 0 0.6em 0} .check.FormBlock, .PaymentForm.FormBlock {color:black; padding:0.7em 1em; border:1px solid gray} .check.FormBlock { box-shadow: 1px 3px 4px rgba(0,0,0,0.2); } .check.FormBlock + .FormBlock { margin-top: 1em; } .check.FormBlock #CompanyAddress, .PaymentForm.FormBlock .CompanyInfo {line-height:initial} .check.FormBlock .spacer{padding:3px;} .check.FormBlock .formSubsection, .PaymentForm.FormBlock .formSubsection {padding-top:0.7em;} .check.FormBlock .ManualAddress{width:52%} .check.FormBlock .twoColForm:nth-child(1){width:70%; display:flex;} .check.FormBlock .twoColForm:nth-child(2){width:25%; margin-left:5%;} .check.FormBlock .twoColForm:nth-child(2) > *, .check.FormBlock #lblBalance {float:right;} .check.FormBlock .twoColForm .finder, .check.FormBlock .twoColForm:nth-child(2) input{width:90%; text-align:right;} .check.FormBlock .fieldBlock.address .addressWrapper{width:50%} .check.FormBlock .checkMemo{display:flex} .check.FormBlock .checkMemo span{padding-right:0.5em;} .check.FormBlock input#checkNumber::-webkit-input-placeholder {text-align:right; font-size:0.9em} .check.FormBlock input::-moz-placeholder {text-align:right; font-size:0.9em} .check.FormBlock input:-ms-input-placeholder {text-align:right; font-size:0.9em} .check.FormBlock .CurrencyInWords > div, .PaymentForm.FormBlock .bottomLine > div {border-bottom:1px solid gray} /*Custom styles for Payment Detail*/ .PaymentForm.FormBlock .CompanyInfo { display:inherit } .PaymentForm.FormBlock .twoColForm:nth-child(2), .PaymentForm.FormBlock .PaymentDate { text-align: right} .PaymentForm.FormBlock .formSubsection.PaymentDate { padding-top: 0em } .PaymentForm.FormBlock .formSubsection.ElectronicInfo { padding-top: 1.5em; } .PaymentForm.FormBlock #lblContact { margin-right: 0.5em } .PaymentForm.FormBlock .PaymentTransactions { min-height: 6em; text-align: initial !important } .PaymentActions > div { display: inline-block; margin-right: 2em; } .PaymentActions img { vertical-align: middle; cursor:pointer } .PaymentActions span { margin-left: 0.25em } .PaymentActions .PrintIcon { width: 2.5em; } .PaymentActions .CreatePDFIcon { width: 1.75em; } .PaymentActions .ExpireIcon, .PaymentActions .VoidIcon { width: 2em; } .FormBlock .InfoLabel { font-weight: bold } /*posting summary section */ .PostingGeneralInfo { display:flex; padding:0.75em 0em 0.75em 1em; align-items:center; } .formSubsection .PostingGeneralInfo {padding-left:0em;} .PostingGeneralInfo .roundheadshot{margin:0 2em 0 2.5em;} .PostingGeneralInfo .roundheadshot img{height:75px; width:75px;} .PostingGeneralInfo > div:last-child { text-align: left; } .PostingGeneralInfo .Calendar {font-size: 80%;} #tblPostingSummary th.debit,#tblPostingSummary th.credit{text-align:right} .PostingSummary .systemIconSmall{padding-left:0.5em; cursor:pointer} #tblPostingSummary td.debit,#tblPostingSummary td.credit{position:relative; right:0; min-width:6em} .ReverseSummaryTotal, .SummaryTotal{font-weight:700} .GridTable .PostingEntryDetail, .GridTable .PostingEntryDetail.CodingDetail.edit {margin: 1em 0} .GridTable .PostingEntryDetail.CodingDetail {margin: 0} .GridTable .PostingEntryDetail td { padding: 1em 0 0.5em 0 } .GridTable .PostingEntryDetail div{padding:0.5em; position:relative; width: auto;} .codingTag:hover, .codingTag:active {text-decoration:none; border-radius: 0.2em 0 0 0.2em; } .codingTag span { padding:0.5em; font-size: 85%; } .codingTag { border-bottom-left-radius: 0.25em; border-top-left-radius: 0.25em; } .GridTable .PostingEntryDetail div:after {bottom: 100%;border: solid transparent;content: " ";position: absolute; border-color: rgba(204, 255, 204, 0);border-width: 1em;} .GridTable .PostingEntryDetail.CodingDetail div:after {left: 57.5%;} .GridTable .PostingEntryDetail.SourcingDetail div:after {left: 35.5%;} .codingTag { border-bottom-left-radius: 0.25em; border-top-left-radius: 0.25em; margin: 0 0.5em; } .codingTag:first-child { margin-left:0; } .GridTable .CodingDetail div:after {bottom: 100%;left: 57%;border: solid transparent;content: " ";position: absolute; border-color: rgba(204, 255, 204, 0);border-bottom-color: #ccffcc;border-width: 1em;} .PostingSummary .GridTable tr td:first-child{width: 56%} .GridTable .CodingDetail { margin-top: 1em; } /*Attach coding detail to tag icon in mobile view*/ @media only screen and (max-width: 750px) { .GridTable .PostingEntryDetail.CodingDetail {margin: -0.5em 0} .GridTable .PostingEntryDetail.SourcingDetail div:after {left: 5.2%;} } /* General Journal Detail */ .linkedTransaction { float:right; } .linkedTransaction .linkedIcon { height: 2em; margin-left: 0.5em} .linkedTransaction span { vertical-align: middle; } .linkedTransaction { cursor: pointer; } .CommandHeader { padding: 0.75em 0; font-size: 1.1em; } .CommandHeader img { height: 30px; vertical-align: middle; } .CommandHeader div { display: inline-block; padding-right: 2em; cursor: pointer; } .CommandHeader .formLabel { height: 100%; vertical-align: middle; } .PostingSummary th.credit, .PostingSummary th.debit, .PostingSummary th.source, .PostingSummary th.coding, .PostingSummary td.source, .PostingSummary td.coding {text-align:center} .PostingSummary td.credit, .PostingSummary td.debit{ right:1.5em;} .PostingSummary td.sourcing { text-align: center; } .PostingSummary .codingIcon, .PostingSummary .sourcingIcon { cursor: pointer; max-height: 2em; max-width:2em; vertical-align: middle; } /*Created active and inactive switches*/ /*Active Switch*/ .detailHeaderRight .switchSection { border-spacing: 0.5em; margin-right: -0.5em; display:inline-block; } .switchSection > div { display:table-cell; font-size: 0.9em; cursor:pointer; height: 3.8em; text-align:left; width: 33% } .switchSection span { display:inline-block; vertical-align: middle } .switchSection span:first-child { width: 2em; height: 100%; text-align: center} .switchSection span:nth-child(2) { width: 70%; line-height: 1.25em} .switchSection img { width: 1.25em; position: relative} .switchSection .ActiveSwitch { background-color: #2db200} .switchSection .ActiveSwitch img { top: 10% } .switchSection .InactiveSwitch { background-color: #b20000} .switchSection .InactiveSwitch img { top: 60% }s /*Document Delivery*/ .FormBlock.DocumentDeliveryOption { padding: 1em 0em } /*line items*/ .LineItems > .subHeader { padding-top: 0.75em;} .GroupSequence.SequenceSpacer{display:inline-block; text-align:center} .LineItemGroup .footerTools { margin:0.5em 1em; } .LineItemGroup > .contents{ display:flex } .LineItemGroup > .contents .GroupItems{width:96%;} /*group header*/ .LineItemGroupHeader {display:flex; align-items:center} .LineItemGroupHeader .GroupTitle{width:67%; font-size:120%; display:inherit} .LineItemGroupHeader .notifications { width: 10%; display: flex; justify-content: center; position:relative; } .LineItemGroup.Draggable[data-state='closed'] .GroupTitle input{padding-left:0} .LineItemGroup.Draggable[data-state='closed'] .GroupTitle::before, .LineItemGroup[data-state='open'] .LineItem.Draggable .ItemSequence::before{content: ' '; background-repeat:no-repeat; width:1em; height:1.5em; cursor:move } .LineItemGroup[data-state='open'] .LineItem.Draggable .ItemSequence{display:inherit} .LineItemGroup[data-state='open'] .LineItem.Draggable .ItemSequence::before{padding-right:0.2em;} .LineItemGroupHeader .GroupTitle input{height:1.75em;} .LineItemGroupHeader .GroupSum {font-size:120%;width:16%; text-align:right;color:black; font-weight:600; font-size:1.2em; padding-right:0.8em; box-sizing:border-box} .LineItemGroupHeader .expandRightToggle,.LineItemGroupHeader .expandRightOptions{display:flex } .expandRightToggle, .expandRightOptions{background-color:#ccc; display:flex} .expandRightToggle {border-radius:50%;height:2em;width:2em; position:absolute; margin-left:0.8em; border:none; z-index:2; cursor:pointer;background-position:center; background-repeat:no-repeat; background-size:0.35em } .expandRightOptions { position:absolute; height:2.7em; margin-left:1.8em; padding-right:0.7em;} .expandRightOptions img{margin-left:0.5em; cursor:pointer; height:1.2em; margin-top:0.8em; z-index:2} .expandRightOptions img:first-child{margin-left:0.8em;} /*mobile view of fly out menu*/ @media only screen and (max-width:750px) { .LineItemGroupHeader, .LineItemSummary, .expandRightToggle,.expandRightOptions{position:relative} div.LineItemGroupHeader > .optionContainer, div.LineItemSummary > div.optionContainer{position:absolute; right:0; width:auto;} .contents .LineItemSummary .optionContainer{ padding-right:0em; top:0.3em; } .optionContainer{display:flex;justify-content:flex-end; } .optionContainer.open .expandRightToggle{left:2.7em;} .optionContainer.close .expandRightToggle{border-radius:1em 0 0 1em; width:1em; background-position:center right; } } .stub { display:table; width:100%;} .LineItemGroup .GroupSequence .ui-button.expandToggle { display:block;margin:0 auto; margin-bottom:1em;} .LineItemGroup{width:100%; padding-top:0.5em;} .LineItemGroup a:hover{text-decoration:none} .LineItemGroup .GroupToggle, .LineItemDetailToggle, .DashboardToggle{background-repeat:no-repeat; height:1.325em; width:4%; background-position:center top; cursor:pointer; border-bottom-left-radius:2.65em; border-bottom-right-radius:2.65em } .LineItemGroup .GroupToggle{background-size:3em;} .LineItemDetailToggle, .DashboardToggle{background-size:2.3em; width:1.5em; height:0.9em; border-bottom-left-radius:1.5em; border-bottom-right-radius:1.5em; position:relative; top:-0.2em; border-bottom:1px solid #ddd;padding-right:0.4em; } .LineItemDetailToggleContainer, .DashboardToggleContainer{width:100%;} .LineItemGroup[data-state='closed'] .LineItemDetailToggleContainer{display:none} .LineItemDetailToggle, .DashboardToggle{margin:0 auto;} .LineItemsHeader{margin-top:1em;} .LineItemsHeader, .LineItemGroup div.LineItemSummary{display:flex; align-items:center} .GroupItems > div{margin:0.2em 0 0 0.2em;} .LineItemSummary {min-height:3.2em; } .subCard { margin:0.5em 1em; padding:0.5em; } .subCard .titleControl {display:flex; align-items:center; cursor: pointer; } .subCard .titleControl .controls{margin-left:auto} .subCard .subCard{margin:0 0 0.5em 0} .subCard .subCard .FormBlock{background-color:inherit} .subCard .subCard .Calendar{margin-top:1em;} .subCard .subCard .rush{padding-right:0.3em;} .LineItemGroup .delete .deleteButton{ float:right;} .LineItemGroup .noCardBG { background-color:transparent; } .LineItemGroup .productDetailCard .customThumb img { max-width: 100px; float:left; margin-right:1em; } .LineItemGroup .productDetailCard p::after { content:' '; clear:both; height:0px; display:block; } .LineItemsHeader > span:last-child, .LineItemSummary > div:last-child{padding-right:0.5em;} .LineItemsHeader:before{content:""; width:4%;} .GroupSequence a, .LineItemSummary a {cursor: pointer;} .LineItemSummary .finderBlock input[type=text] { padding-right: .75em; } .LineItemsHeader > span, .LineItemSummary > div{width:9.4%; box-sizing:border-box; padding:0.5em 0 0.5em 1em; flex-grow:1; } .LineItemsHeader > .PriceBreakTable, .LineItemSummary > div.PriceBreakTable { width: 3%; padding-left:0; position: relative } .LineItemGroup .SequenceSpacer{width:4%; } .LineItemsHeader > span.optionContainer,.LineItemSummary > div.optionContainer{width:3%; padding:0;} .LineItemSummary > div.optionContainer,.LineItemGroupHeader > div.optionContainer{ display:flex; align-items:center} .LineItemsHeader > .ItemSequence, .LineItemSummary > .ItemSequence{width:6%;padding-left:0.5em; text-align:center} .LineItemsHeader > .ItemName, .LineItemSummary > .ItemName {width:27%;} .LineItemSummary > .ItemName span,.LineItemSummary > .Code a{ display:block; line-height:1.2em; overflow-wrap:break-word; } .LineItemSummary > .CostNotification, .LineItemsHeader > .CostNotification { width: 1.5%; padding: 0; position:relative; } .LineItemsHeader > .notifications, .LineItemSummary > .notifications {width:3%; padding: 0;} .LineItemSummary > .Margin, .LineItemsHeader > .Margin { padding-right: 1em; } .LineItemSummary > .Cost, .LineItemsHeader > .Cost { padding: 0 0.3em; } /*line item price allocation*/ .LineItemsHeader > .Code, .LineItemSummary > .Code{width:11.4%; word-break:break-word;} .LineItemsHeader > .PriceAllocation, .LineItemSummary > .PriceAllocation { width:2%; text-align:center; position:relative; position:relative; display:flex; padding-left: 0.5em;} .LineItemSummary .PriceAllocation span{ color:#666666;cursor:pointer} .LineItemSummary[data-ispriceallocated="1"] .Price input, .LineItemSummary[data-ispriceallocated="1"] .Price span{text-decoration:line-through} .LineItemsHeader > .QuantitySync, .LineItemSummary > .QuantitySync { width:3.1%; text-align:center; position:relative; display:flex; padding-left: 0.5em; } .LineItemSummary > .QuantitySync img { vertical-align: middle; width: 1.25em; height: 1.25em; } /*mobile view line item section*/ @media only screen and (max-width:750px) { .LineItemGroup div.LineItemSummary{height:auto;} .LineItemGroup .SequenceSpacer{width:7%; } .LineItemGroupHeader .GroupSum {width:19%;} .LineItemGroup:not(.POHeader) .contents .SequenceSpacer{width:1%} .LineItemGroup:not(.POHeader) .contents .GroupItems{width:99%;} .GroupItems > div{margin:inherit} /*show the header inline*/ .LineItemSummary > div::before{content:attr(data-header);display:block; font-weight:normal} .LineItemsHeader{display:none} .LineItemSummary{border-top:0.2em solid white} /*mobile view line item summary*/ .LineItemSummary > div {padding-bottom:0em; } .LineItemSummary > div, .LineItemSummary > div input.compactInput{font-weight:600; color:#000} .LineItemGroup div.LineItemSummary{flex-wrap:wrap; padding-bottom:0.6em;} .LineItemSummary > .ItemSequence{width:4%} .LineItemSummary > .Code{width:20%} .LineItemsHeader > .PriceAllocation, .LineItemSummary > .PriceAllocation {left:0.5em;} .LineItemSummary > .ItemName{width:74%;font-weight:normal; color:inherit} .LineItemSummary > .Total,.LineItemSummary > .extPrice{width:100%;text-align:right;} .LineItemSummary > .PriceAllocation:empty{display:none} .LineItemSummary .MobileEndLine{padding-right:0.5em} .LineItemSummary .MobileBeginLine{padding-left:4%} .LineItemSummary .MobileNoHeader{padding-top:2em;} .GroupOption{text-align:center} .LineItemsHeader > .QuantitySync, .LineItemSummary > .QuantitySync { width:8%; flex-grow: 0; align-self: flex-end; margin-bottom: 0.25em; } } .LineItemDetails:not(:last-child) .footerTools{padding-bottom:0.5em;} .PriceAllocationDetail{min-width:6em;} /*Add Item to Order Dialog*/ .LineItemAddDialog .ProductSearch > div { padding: 1em 2%; display: flex; max-width: 1020px; align-items:center; } .ProductSearch input {flex-grow:1} .ProductSearch button{padding:0em 0.3em;} .ViewMode span{ height:1.8em; width:1.8em; margin-left:0.8em; cursor:pointer; background-repeat:no-repeat; display:inline-block } .ViewMode span.ListView, .ViewMode span.CardView {width:2.5em;} .tabContent { margin:0; } .ui-dialog .LineItemAddDialog.ui-dialog-content .tabContent{ padding:2em 1em 1em 1em;} .catalogSidebar { width:25%; display:inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; overflow:auto; margin:0; border:none; vertical-align:top; padding:1em; margin-bottom: 0.5em;} .catalogContent { width:75%; display:inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin:0; border:none; vertical-align:top;float:right;} .CategoryBorder {overflow:hidden;} .catalogContent .breadcrumb { height:1.8em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 1em 0em; } .catalogContent .breadcrumb > span { cursor: pointer; } .ReturnBar { padding: 0.5em 2%; } .ReturnBar > div { vertical-align: middle; cursor:pointer; } .ReturnBar span { display:inline-block; vertical-align: middle; } .ReturnBar button.ui-button-icon-only { width: 1em; } .ProductSearch > div > span { font-weight: bold; margin-right: 1em; } .ProductSearch > div > div { display: flex; flex-grow: 1; height: 2em; align-items: stretch; } .LineItemAddDialog .ViewMode { text-align: right; padding: 1em 2% 0em 2%; max-width: 1020px; height: 2em; } .ProductAddDialog .ControlBarNav, .LineItemAddDialog .tabContent { padding: 0 2%; } .ProductAddDialog .ControlBarNav > div, .LineItemAddDialog .tabContent { max-width: 1020px; } .ZoneBoxHolder.AddItemDialog .MenuBar, .ZoneBoxHolder.AddItemDialog .leftColZone, .ZoneBoxHolder.AddItemDialog .OrderDetailBody, .ZoneBoxHolder.AddItemDialog .rightColZone, .ZoneBoxHolder.AddItemDialog .ManualInvoice, .ZoneBoxHolder.AddItemDialog .CustomerReturnDetail, .ZoneBoxHolder.AddItemDialog .PODetailBody, .ZoneBoxHolder.AddItemDialog .RecurringInvoice { display: none; } .ZoneBoxHolder.AddItemDialog .colZoneContainer { max-width: 100%; } .ZoneBoxHolder.AddItemDialog .contentZone { max-width: 100%; } .tabContent .PanelFooter, .snapshotContent .PanelFooter { padding-left: 0em; padding-right: 0.9em; } @media only screen and (min-width: 1500px) { .ZoneBoxHolder.AddItemDialog .contentZone { max-width: 100%; } } @media only screen and (max-width: 750px) { .LineItemAddDialog .ProductSearch > div { display: block; } .ProductSearch > div > span { display: block; } .ProductAddDialog .tabContent { padding: 0em 0.3em; } .catalogSidebar { width: 100%; } .catalogContent { width: 100%; } } .Matrix + #AddStockProductDetail > .FormBlock:first-child { margin-top: 0.5em; } /*default grid view*/ .catalogContent table, .snapshotContent table { width:100%; border-collapse: collapse; } .catalogContent .options{ display:flex; flex-wrap:wrap; justify-content:flex-start; } .catalogContent .options > div, .catalogContent .options > a {width:15%; text-align:center;padding:1.5em 0; box-sizing:border-box;font-size:85%; cursor:pointer; margin-right:13.3%; } .catalogContent .options > div:nth-child(4n), .catalogContent .options > a:nth-child(4n) { margin-right:0; } .catalogContent .options > a[disabled]{ color: inherit; cursor: default; text-decoration: none; pointer-events: none; } .catalogContent .options.Large > div {width:33%;} .catalogContent .options > div span, .catalogContent .options > a span{display:block;line-height:1.2em; padding-bottom:0.2em;overflow:hidden;text-overflow:ellipsis; } .catalogContent .options > div span.supplierName, .catalogContent .options > div span.ItemSKU, .catalogContent .options > a span.ItemSKU { font-weight:700;font-size:90%; } .catalogContent .options > div span.ItemName, .catalogContent .options > a span.ItemName { overflow-wrap: break-word; font-size:0.9em } .catalogContent .options > div span.ItemCost, .catalogContent .options > a span.ItemCost { font-weight:800; color:black; line-height: 2em; } .catalogContent .options > div span.thumbnail, .catalogContent .options > a span.thumbnail { height:110px; width:110px; margin:auto; } .catalogContent .options > div img, .catalogContent .options > a img{ max-width:110px; max-height:110px; } .catalogContent .options.Large > div span.thumbnail { height:150px; width:150px; } .catalogContent .options.Large > div img{ max-width:150px; max-height:150px; } .catalogContent .options > div span.ItemDescription, .catalogContent .options > div span.ItemName, .catalogContent .options > a span.ItemDescription, .catalogContent .options > a span.ItemName {display:-webkit-box; -webkit-box-orient:vertical; } .catalogContent .options > div span.ItemName, .catalogContent .options > a span.ItemName {height:2em;-webkit-line-clamp:2;} .catalogContent .options > div span.supplierName, .catalogContent .options > div span.ItemSKU, .catalogContent .options > a span.ItemSKU {white-space:nowrap; min-height:1em;} .catalogContent .options:not(.ListView) > div span.ItemDescription{display:none} .catalogContent .options > div span.ItemSKU, .catalogContent .options > a span.ItemSKU { padding-top: 0.5em; padding-bottom: 0em; } .catalogContent .options > div span.ItemSKU a { line-height: 1em; } .snapshotContent { padding: 2em 5%;} /*In mobile view, display only 2 catelog items per row*/ @media only screen and (max-width:375px) { .catalogContent .options > div, .catalogContent .options > a { width: 50%; } } /*list view*/ .catalogContent .options.ListView {display:block} .catalogContent .options.ListView > div {width:100%; text-align:left; display:flex} .catalogContent .options.ListView > div span.thumbnail{margin:0; text-align:center} .catalogContent .options.ListView > div span.ItemCost{text-align:center;width:10%;} .catalogContent .options.ListView > div > .ListInfo {flex-grow:1; padding:0em 1em; width:0; display:flex; flex-direction:column} .catalogContent .options.ListView > div span.ItemSKU{display:inline} .catalogContent .options.ListView > div span.ItemSKU::before{content:" - "} .catalogContent .options.ListView > div span.ItemName{order:1; font-weight:700; height:1em;} .catalogContent .options.ListView > div div.ItemSKUSupplier{order:3; font-weight:700} .catalogContent .options.ListView > div span.supplierName{ float:left; padding-top:0.4em;} .catalogContent .options.ListView > div span.ItemDescription{order:2; display:-webkit-box;max-height:4.5em; -webkit-line-clamp:4;} .CatalogTab .catalogContent { width: 100%; } .CatalogTab .ItemSKU::before { content: ""; } /* Catalog panel */ .catalogPanel { display: flex; } .catalogSidebar ul li {cursor: pointer; } .PanelFooter div{float:left;} .LineItemDialog .contentTable {display:table; width:100%;} .LineItemDialog .ContentRow {display:table-row;} .LineItemDialog .ContentRow > div { display:table-cell; vertical-align:top; padding: 10px 10px 10px 5px; } .LineItemDialog .ContentRow > div:first-child { width:200px; padding: 10px 5px 10px 0; } .LineItemDialog .SelectedProductImage { max-width: 200px; max-height: 200px; } .LineItemDialog .threeColForm input.formInput { width: 100%; } .LineItemDialog #orderQty { padding: 0.1em 0.2em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /* Stock Product Pricing */ .LineItemDialog .Pricing, .LineItemDialog .ProcessingMethod { display: flex; min-height: initial; } .LineItemDialog .Pricing .FormLabel, .LineItemDialog .ProcessingMethod .FormLabel { flex-grow: 1; align-self: center; margin-right: .5em; } .LineItemDialog .Pricing .BadgeWrapper, .LineItemDialog .ProcessingMethod .BadgeWrapper { margin-right: .5em; } .LineItemDialog .Pricing #selPricingType-button { flex-grow: 1; width: 50% !important; margin-right: .5em; } .LineItemDialog table.ListPrice tr td { color: initial; padding: initial;font-size:85%; font-weight:normal } .LineItemDialog table.ListPrice tr td.FormLabel { text-align: left; } .LineItemDialog .ListPrice { padding-right: 0.75em; cursor: initial; } .LineItemDialog .OrderForm.FormBlock {padding: 0.25em 0.5em;} .LineItemDialog .OrderForm.FormBlock#AddMatrixProductTable {padding: 0.25em 0 0.25em 0.5em;} .LineItemDialog div.FormBlock:first-child { margin-top: initial; } .LineItemDialog .OrderForm.FormBlock .twoColForm { padding-top: 0em; } /*Product Inventory Locations */ .LineItemDialog th.availableInventory, th.inventorySource { text-align: center; } .LineItemDialog .StockDescription { padding: 0.5em 0.5em; height: 100%; overflow-wrap: break-word; } .LineItemDialog .StockDescription h1 { line-height: 1.1em; margin-bottom:0.3em; } .LineItemDialog .StockDescription h1 + div { margin-bottom: 0.5em; } .LineItemDialog .StockDescription > div:nth-child(2) { text-align: center; } .LineItemDialog .InventoryLocations th, .InventoryLocations td, .LineItemDialog .LinkedServices th, .LineItemDialog .LinkedServices td { width: 17%; } .LineItemDialog .InventoryLocations th, .LineItemDialog .InventoryLocations .SupplierSourceHeader, .LineItemDialog .LinkedServices th { font-weight:normal; font-size: 0.9em; padding: initial; } .LineItemDialog .InventoryLocations td, .LineItemDialog .LinkedServices td { cursor: default; font-size: 85%; padding: 0em; } .LineItemDialog .InventoryLocations th:last-child, .LineItemDialog .InventoryLocations td:last-child, .LineItemDialog .LinkedServices th:last-child, .LineItemDialog .LinkedServices td:last-child { padding-right: 0em; text-align: center; } .LineItemDialog .InventoryLocations th:first-child, .LineItemDialog .InventoryLocations td:first-child { width: 49%; padding-left: 0em; text-align: left; } .LineItemDialog .LinkedServices th:first-child, .LineItemDialog .LinkedServices td:first-child { width: 14%; padding-left: 0em; text-align: left; } .LineItemDialog .LinkedServices th:nth-child(2), .LineItemDialog .LinkedServices td:nth-child(2), .LineItemDialog .LinkedServices th:nth-child(3), .LineItemDialog .LinkedServices td:nth-child(3) { width: 35%; } .LineItemDialog .InventoryLocations input + label { vertical-align: middle; } .LineItemDialog .InventoryLocations tr.checkSupplier td { cursor: pointer; text-align: right; } .InventoryLocationFooter { display: flex; justify-content: space-between; align-items: baseline; font-size: 85%; padding: 1em 0em; } .InventoryLocationFooter .TransparentButton, .LineItemDialog .LinkedServices .TransparentButton { font-size: 9pt; } .InventoryLocationFooter img { width: 20px; height: 20px; vertical-align: middle; margin-right: 0.5em; cursor: pointer; } .InventoryLocationFooter .WIPInventoryInfo { position: relative; } .LineItemDialog .ServiceSyncFooter img { width: 15px; height: 15px; margin-right: .3em; cursor: pointer; } .LineItemDialog .ServiceSyncFooter { display: flex; } .LineItemDialog .ServiceSyncFooter .AddServiceBtn, .LineItemDialog .ServiceSyncFooter .ServiceSyncInfo { width: 40%; } .LineItemDialog .ServiceSyncFooter .ServiceSyncInfo { display: flex; justify-content: right; align-items: center; } .LineItemDialog .ServiceSyncFooter .ServiceSyncInfo.HiddenField { display: none; } .InventoryLocationFooter .WIPInventoryInfoPopup { display:none; position: absolute; z-index: 100; padding: 0.75em; margin-top: 1em; left: -0.6em; } .InventoryLocationFooter .WIPInventoryInfoPopup.Show { display: block; } .InventoryLocationFooter .WIPInventoryInfoPopup > span:first-child { display: block; font-weight: 600; } .InventoryLocationFooter .WIPInventoryInfoPopup::before { bottom: 100%; left: 8px; border: solid transparent; content: " "; position: absolute; border-width: 10px; } /*product add, bill of materials*/ .LineItemDialog .BillOfMaterials th:nth-child(1) {width: 5%;} .LineItemDialog .BillOfMaterials th:nth-child(2) {width: 35%;} .LineItemDialog .BillOfMaterials th:nth-child(3) {width: 50%;} .LineItemDialog .BillOfMaterials th:nth-child(4) {width: 5%;} .LineItemDialog .BillOfMaterials th:nth-child(5) {width: 5%;} .LineItemDialog .BillOfMaterials td:nth-child(4) {text-align: center;} .LineItemDialog .BillOfMaterials td:nth-child(5) {text-align: center;} /*activity grid*/ .ActivityGrid td:nth-child(7n+1), .ActivityGrid th:nth-child(7n+1) {width:30%;} .ActivityGrid td:nth-child(7n+2), .ActivityGrid th:nth-child(7n+2) {width:19%;} .ActivityGrid td:nth-child(7n+3), .ActivityGrid th:nth-child(7n+3) {width:14%;} .ActivityGrid td:nth-child(7n+4), .ActivityGrid th:nth-child(7n+4) {width:13%;} .ActivityGrid td:nth-child(7n+5), .ActivityGrid th:nth-child(7n+5) {float: right;width: 7%;} .ActivityGrid td:nth-child(7n+6), .ActivityGrid th:nth-child(7n+6) {float: right;width:15%;} .ActivityGrid td:nth-child(7n) {width: 76%;} .ActivityGrid td:nth-child(7n+5) a {display: inline-block;margin-top: 10px;} .ActivityGrid th:nth-child(7n) {display: none;} /*preview tab*/ .FormSection.preview{padding:0 6% 5em;} .preview .PreviewHeader .twoColForm.formCol{padding-left:0; padding-right:0} .preview .wrapper, .ReportPage{padding:0.15in; border:1px solid gray; box-shadow: 1px 3px 4px rgba(0,0,0,0.2); } .preview .branchLogo{display:block; height:6em; max-width: 100%; } .preview .branchLogoBox { display:block; max-width:100%; } .preview .branchLogoBox > img.branchLogo { width:auto; height:auto; max-width:100%; max-height:6em; } .preview .BranchAddress{padding-left:2em; margin-top: 1em; } .preview .FormBlock {background-color:#f5f5f5} .preview .addressWrapper{box-shadow:none} .preview .GroupSequence a, .GroupSequence a[disabled]{color:black; cursor:default; text-decoration:none} .preview .ItemSequence a,.ItemSequence a[disabled]{color:inherit; cursor:default; text-decoration:none} .preview .Code a, .Code a[disabled]{ color: inherit; cursor: default; text-decoration: none; pointer-events: none; } .invoicePreviewHeaderInfo > span{font-weight:600; display:block; text-align:right; font-size:1.2em} .invoicePreviewHeaderInfo > div{display:flex; float:right} .invoicePreviewHeaderInfo > div > div:first-child span{float:right} .preview .totalsSection .singleSegment:first-child{background-color:white;width:65%} .preview .totalsSection .singleSegment:nth-child(2){width:45%} .preview .totalsSection .singleSegment div{display:flex} .preview .totalsSection .singleSegment span, .PaymentBalance .totalsSection .singleSegment div *, .opportunityTotalsSection .singleSegment div * {width:50%; text-align:right} .preview .totalsSection .singleSegment span:nth-child(2){padding-right:0.5em} .preview .BalanceDue {background-color:black} .preview .GridTable.Payments th:first-child, .preview .GridTable.Payments td:first-child{width:15%} .preview .GridTable.Payments th:nth-child(2), .preview .GridTable.Payments td:nth-child(2){width:20%} .preview .GridTable.Payments th:nth-child(3), .preview .GridTable.Payments td:nth-child(3){width:25%} .preview .GridTable.Payments th:nth-child(4), .preview .GridTable.Payments td:nth-child(4){width:15%} .preview .GridTable.Payments th:nth-child(5), .preview .GridTable.Payments td:nth-child(5){width:10%} .preview .GridTable.Payments th:nth-child(6), .preview .GridTable.Payments td:nth-child(6){width:15%} @media print { /*hide the preview borders when printing a document*/ .preview .wrapper, .ReportPage{padding:0; border:none; box-shadow: none; } body.contentPrintReady, div.ZoneBoxHolder { background-color:none; } } /*UDF table*/ .UDFTable img, .UDFTable button{float:right;} .UDFTable input{width:100%} .UDFTable th:first-child, .UDFTable td:first-child{width:20%} .UDFTable th:nth-child(2), .UDFTable td:nth-child(2){width:20%} .UDFTable th:nth-child(3), .UDFTable td:nth-child(3){width:30%} .UDFTable th:nth-child(4), .UDFTable td:nth-child(4){width:15%} /*income statement and hierarchical dashboards*/ .summaryWidget.hierarchicalDashInfo .Value { margin-top: 0em; font-size: 130%; } .summaryWidget.hierarchicalDashInfo .FormLabel { font-size: 90%; } .summaryWidget.hierarchicalDashInfo .fieldBlock { min-height:3em; padding:0.1em 0 0.1em 1em; } .summaryWidget.hierarchicalDashInfo .fieldBlock:first-child { padding-left:0; } .summaryWidget.hierarchicalDashInfo .fieldBlock:first-child .Value { font-size: 250%; } /*Payment Detail - Transaction tags*/ .PaymentTransactionTag { padding: 0.25em 1.5em; white-space:nowrap; display:inline-block; z-index:10;} .PaymentTransactionTag:before, .PaymentTransactionTag:after { display:block; position:absolute; width: 8px; height: 8px; bottom:-8px; right: 0; content: ""; box-sizing:border-box; } .PaymentTransactionTag:before { border-top: solid 4px transparent; border-right: solid 4px transparent; border-left: solid 4px transparent; border-bottom: solid 4px transparent; } .PaymentTransactionTag:after { border-bottom: solid 4px transparent; border-right: solid 4px transparent; } .IconBeforeLabelButton::before { content: ' '; display: inline-block; vertical-align: top; margin: 0 0.5em 0 0; background-size: cover; } .BoldText { font-weight: bold } /*submitted by header*/ .submittedBy > div:first-child{float:left} .submittedBy > div:nth-child(2){text-align:right} .submittedBy > div:nth-child(2) span{padding-right:0.5em} .submittedBy img{cursor:pointer} /*Period Status header*/ .periodStatus > div:first-child{float:left} .periodStatus > div:nth-child(2){text-align:right} .periodStatus > div:nth-child(2) span{padding-right:0.5em} .periodStatus img{cursor:pointer} /*Linked SO Summary*/ .detailHeaderLinkSummary { padding-top:0.4em; } .detailHeaderLinkSummary .linkedIcon, .LinkedSOSummary .linkedIcon { margin-right: 0.5em; width:2em; height:2em; vertical-align:baseline; } .detailHeaderLinkSummary > div { margin-top:0.2em } .detailHeaderLinkSummary > div:first-child { margin-top:0 } .detailHeaderLinkSummary a, .detailHeaderLinkSummary span{font-size:1.1em; font-weight:600; } .voidImage {width: 8em;} /* order detail analysis tab */ .AnalysisGrid { width: 100%; border-collapse:collapse; } .AnalysisGrid th { font-weight:600; } .AnalysisGrid th, .AnalysisGrid td { text-align:right; padding:0.3em; font-size:90%; } .AnalysisGrid tr:last-child td { padding-bottom:0.9em; } .AnalysisGrid tr:first-child td { padding-top:0.8em; } .AnalysisGrid tr.SubtotalRow td { border-top:1px solid; font-weight: 600; font-size:100%; } .AnalysisGrid tr.SubtotalRow td:first-child, .AnalysisGrid tr.SubtotalRow td:last-child { border-top: none; width: 0.5em; } .AnalysisGrid tbody {background-clip:content-box; border-bottom-width:1.3em; border-bottom-style:solid; } .ExpandCost{cursor:pointer;color:#0085d2;} .AnalysisGrid tbody td.CostExpanded{background-color:#EBEBEB;} a:hover.ExpandCost{text-decoration: none;} /*Order balance pie chart*/ .OrderBalancePieChart .totalsSection > div:first-child{width:50%;background-color:white;} .OrderBalancePieChart .totalsSection > div:nth-child(2){width:17%; } .OrderBalancePieChart .totalsSection > div:nth-child(3){width:33%;} .OrderBalancePieChart .totalsSection .balanceChart {margin:0 auto;width:80px;} /*Order total summary*/ .OrderTotalSummary .totalCharts {vertical-align:top} div.twoColForm.formCol .ThirdWidthCol, div.twoColForm.formCol .TwoThirdWidthCol { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float:left; } div.twoColForm.formCol .ThirdWidthCol {width:33.3%; padding-right: 0.75em; } div.twoColForm.formCol .ThirdWidthCol:nth-child(3) { padding-right: 0; } div.twoColForm.formCol .TwoThirdWidthCol {width:66.6%; padding-left: 0.75em } /*Transparent buttons used in AR Payment Detail, Gift Certificate, and Invoice Detail*/ .TransparentButton { background-color: transparent; height: 2em; display:inline-flex; align-items:center; padding-left:0; padding-right:0; } .TransparentButton > * {float:left;} .TransparentButton.rightAligned {float:right;} .TransparentButton img { height: 1.75em; margin-right: 0.5em } .fieldBlock .TransparentButton { height:1.75em; font-weight:500; } .fieldBlock .TransparentButton img { height: 1.5em; } /*ACH Batch*/ #divACHBatchDetail .TransparentButton { width: 14em } /* generic progress bar - not editable */ .progress { background-color: gray; color: #FFFFFF; height:1.5em; overflow:hidden; position:relative;} .progress > div:first-child { display:block; height: 1.5em; margin: 0 auto 0 0; } .progress.countdown > div:first-child{margin: 0 0 0 auto; } .progress > .info {position:relative; top:-1.6em; line-height:1.5em; } /* View Mode */ .ViewMode { display: flex; padding: 20px 8% 0 8%; justify-content: flex-end; } /* Object Cards */ .objectList, .cardSortBar > div { margin: 0 5%; } .FormBlock .objectList{margin:0} .FormBlock .objectSummaryCard{margin-bottom:0.5em;} .objectSummaryCard { padding:1em 0 0 0; display:block; box-sizing:border-box; } .cardSortBar > div { padding:0.5em 0; } .cardSortBar span { font-size:85%; } .objectSummaryCard::after, .cardSortBar > div::after { content: ' '; clear:both; display:block; height: 0; } .objectSummaryCard .primaryInfo, .cardSortBar .primaryInfo { width: 50%; margin:0; padding:0; float:left; box-sizing:border-box; } .objectSummaryCard .primaryInfo { margin-bottom:1em; } .objectSummaryCard .expandCard { display:none; } .objectSummaryCard .infoLayout { width:100%; box-sizing:border-box; display:flex; } .cardSortBar .primaryInfo > span { display:inline-block; text-align:center; margin-right:1em; float:left; } .objectSummaryCard .infoLayout > div:first-child { width:20%; flex-grow: 0; box-sizing:border-box; align-self:center; padding:0 0.5em 0 0; } .objectSummaryCard .infoLayout > div:nth-child(2) { width:60%; flex-grow: 0; box-sizing:border-box; margin-left:0.3em; } .objectSummaryCard .infoLayout > div:nth-child(3) { width:20%; flex-grow: 0; box-sizing:border-box; margin-left:0.3em; } .cardSortBar .primaryInfo > span:first-child { width: 20%; margin-right:0; } .objectSummaryCard .infoLayout > div:first-child .FormLabel { display:block; text-align:center; } /*universal card rules*/ .objectSummaryCard .primaryInfo .status img { max-height: 35px; max-width:35px; margin: 0.4em auto 0 auto; display:block; } .objectSummaryCard .primaryInfo .status .errorIcon::before { content:'!'; font-weight:700; } .objectSummaryCard .primaryInfo .status .errorIcon { height:35px; width:35px;font-size:27px;line-height:35px;text-align:center;display:block; margin: 0.4em auto 0 auto; border-radius:5px;} .objectSummaryCard .primaryInfo .infoLayout .objectIdentifier { font-size: 120%; font-weight:700; width:auto; line-height:1em; } .objectSummaryCard .primaryInfo .infoLayout .objectIdentifier.inline{display:inline} .objectSummaryCard .primaryInfo .infoLayout .total { float:right; font-size:120%; font-weight:700; width:auto; display:inline; padding-right: 0.5em; } .objectSummaryCard .infoLayout > div:nth-child(2) > span, .objectSummaryCard .infoLayout > div:nth-child(2) > a { display: block; line-height: 1.3em; min-height: 1.3em; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; width: 95%;} .objectSummaryCard .minorInfo { width:70%; font-size:90%; } .objectSummaryCard .Calendar { font-size: 77%; } .objectSummaryCard .DateCalendar > span:last-child { font-size: 240%; } .objectSummaryCard .FormLabel { white-space:normal; line-height:1.2em; margin-top: 0.5em; } .lazyLogo { width:5em; height:5em; display:inline-block; } /*holds*/ .objectSummaryCard .primaryInfo .Holds { display:block; margin:0.2em auto 0 auto; height:35px; width:35px; font-size:135%;} .objectSummaryCard .HoldsDetail { box-sizing:border-box; width:100%; padding: 1.5%; border: none; margin-top:0.7em;} .objectSummaryCard .HoldsDetail::before { left: 3.5%; content: ' '; display: block; height: 25px; width: 25px; background-color: inherit; transform: rotate(45deg); padding: 0; margin: 0; box-sizing: border-box; position: absolute; top: -10px;} /*contacts in summary card stats*/ .objectSummaryCard .objectStats .contact .roundheadshot { height: 5.5em; width:5.5em; margin-bottom:0.1em; } .objectSummaryCard .objectStats .contact { font-size: 80%; line-height:1.2em ;} /* statusblocks in summary cards */ .objectSummaryCard .statusBlock { margin: 0 0.5em; float:none; width:auto; display:block; } .objectSummaryCard .statusBlock .count { font-size: 200%; } .objectSummaryCard .statusBlock .count + span, .objectSummaryCard .statusBlock .count + label { height: 1.3em; text-transform:uppercase; padding:4px 1em; } /* sort rules for card managers*/ .cardSortBar .objectStats span { display:block; } .objectSummaryCard .objectStats, .cardSortBar .objectStats { width: 50%; margin:0; padding:0; float:right; display:inline-flex; flex-direction:row; justify-content:space-between; box-sizing:border-box; max-height:5.5em; transition: all ease 500ms; } .objectSummaryCard.expanded .objectStats { max-height: 5.5em; transition: all ease 500ms; } .objectSummaryCard .objectStats > div, .cardSortBar .objectStats > span { flex-grow: 1; text-align:center; } .objectSummaryCard .objectStats > div { margin-bottom: 1em; } .objectSummaryCard .FormLabel { font-size: 80%; } .objectSummaryCard .completionIndicator, .objectSummaryCard .ui-kpi-gauge { display:block; height:3.5em; text-align:center; } .objectSummaryCard .ui-kpi-gauge canvas { margin: 0 auto; display:block; } /* item after due date is the priority/description and should be wide*/ .objectSummaryCard.activitySummary .objectStats .dueDate + span { width: 80%; flex-grow: 4; padding-left: 1em; overflow: hidden; } .objectSummaryCard.activitySummary .objectStats .dueDate + span > span { display:block; } .objectSummaryCard.activitySummary .objectStats .dueDate + span > span:first-child { font-size: 120%; font-weight:600} .objectSummaryCard.activitySummary .objectStats .dueDate + span > span:last-child { font-size: 90%; max-height: 3.2em; overflow:hidden; line-height:1.5em; text-overflow:ellipsis; } .objectSummaryCard.activitySummary .objectStats .dueDate, .cardSortBar .objectStats #lblDueDate {width: 20%; flex-grow: 1;} .objectSummaryCard.setEmpty{text-align:center} .cardSortBar .objectStats #lblActPriority { width:20%; flex-grow: 1; } .cardSortBar .objectStats #lblDesc { width:60%; flex-grow: 3; } .cardSortBar .primaryInfo .rightEndDisplay { width: 20%; float: right; margin: 0; } /*PO Manager*/ .POManager .cardSortBar .primaryInfo > span:last-child { float:right; margin-right:0; } .POManager .objectSummaryCard.orderSummary .objectStats > div, .POManager .cardSortBar .objectStats > span { width:20%; } .POManager .objectSummaryCard .primaryInfo .status img { margin-top: 0.5em; } /* Status message footers for summary cards */ .objectSummaryCard.statusBlockActive .objectStats { margin-bottom: 1em; } .objectSummaryCard .statusInfoMessage { width:100%; clear:both; padding:0.5em; text-align:center; position:relative; margin-top:1em; font-size:85%; font-weight: 600; box-sizing: border-box } .objectSummaryCard .statusInfoMessage::before { content: ' '; display: block; position: absolute; background: inherit; width: 1em; height: 1em; transform: rotate(45deg); left: 50%; top: -0.5em; } .objectSummaryCard .statusInfoMessage::before { left: calc(63.5% - 1.2em); } /*break on cards is at 700px so the full card can be seen on large mobile devices in landscape mode*/ @media only screen and (max-width:700px) { .objectSummaryCard .primaryInfo, .cardSortBar .primaryInfo { width: auto; float:none; margin:0; } .objectSummaryCard .objectStats, .cardSortBar .objectStats { width: auto; float:none; display:flex; max-height:0; overflow:hidden; } .objectSummaryCard .expandCard { display:inline-block; float:right; } .objectSummaryCard .HoldsDetail::before { left: 7%; } } /*keep card margin break at 750*/ @media only screen and (max-width:750px) { .objectList, .cardSortBar > div { margin: 0 4%; } } .TransparentButton > span { vertical-align: middle } .newButton.TransparentButton, .updateButton.TransparentButton{background-color: transparent; color:inherit; text-transform:none; font-weight:700; line-height:2em;} .newButton.TransparentButton:before, .updateButton.TransparentButton:before{vertical-align:middle; margin-top:initial;} /*Draw a circle with a div*/ .ACHTransactionsTable .Circle { display: inline-block; width: 1em; height: 1em; margin:auto; vertical-align: middle; border-width: 0.25em; border-style: solid; border-radius: 2em; } .ACHTransactionsTable .ACHBatchStatus span { vertical-align: middle } .ACHTransactionsTable .ACHBatchStatus img { width: 1.5em; vertical-align: middle } /*Detail Form inside GridTable*/ .TableDetailForm { position: absolute; border-top:1.5em solid white; border-bottom:1em solid white; margin-top: 0em; z-index:102; text-align:left; } .TableDetailForm:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 1.25em; margin-left: -1.25em; } .TableDetailForm.left:after { left:25%; } .TableDetailForm.right:after { left: 75% } .TableDetailForm.editForm:after, .DetailForm.editForm:after { left: 96%; } .detailRow .TableDetailForm.newForm:after, .detailRow .DetailForm.newForm:after { left: 10% } .TableDetailForm .tableForm { margin: 0em 1em } .TableDetailForm .tableForm .SectionHeader { padding-top: 1em } .detailButtons { margin: 1em 1em 0em 1em } .TableDetailForm .detailButtons .TransparentButton img { height: 1.5em } .loadPanel{background-color:white; padding: 1em 0; } #divScheduledLiabilityDetail.TableDetailForm:after { left: 12% } .StatusIcon { max-height: 20px; max-width: 20px; vertical-align: middle } .deleteButton + .StatusIcon {float:right; max-height:15px; max-width:15px; padding-right:0.8em; } .ActiveInfo { display: inline-block; margin-top: 0.25em } .ActiveInfo img { height: 25px; width: 25px; vertical-align: middle; margin-right: 0.5em; cursor:pointer } .ActiveInfo.disabled img { cursor:default; } .detailButtons img.deleteButton { float: right; margin-right: 0.75em; height: 22px } .TableDetailForm.New:after { left: 98% } .TableDetailForm .uploadBox img{max-height:6em;} .TableDetailForm .saveItem, .DetailForm .saveItem { margin-left: 0.4em; } .TableDetailForm.OneQuarter:after{left:25%} .TableDetailForm.ThreeQuarter:after{left:75%} .itemDetail.TableDetailForm .SectionHeader { padding: 0.75em 1em 0; } .itemDetail.DocumentDeliveryDetail { margin-left: 1em; margin-right: 1em; } .itemDetail.DocumentDeliveryDetail td:last-child .deleteButton { height: 20px; width: 20px; padding-right: 0.3em; } .itemDetail.DocumentDeliveryDetail .edit { text-align: right; } .ActiveInfo span >span.startdate, .ActiveInfo span >span.expirationdate{cursor:pointer; text-decoration:underline; line-height: 1em } .ActiveInfo.disabled span > span { cursor:default; text-decoration:none; } .ActiveInfo .datepicker{width:0} .TableDetailForm .detailHeaderWithLink { display: flex; justify-content: space-between; align-items: baseline; } @media only screen and (max-width:768px) { .detailButtons .ActiveInfo { width: 70%; } .detailButtons .ActiveInfo #lbdActiveInfo { display:inline-block; width: 80%; vertical-align: middle; white-space: normal; line-height: 1em; } .detailButtons .ActiveInfo #lbdActiveInfo > * { line-height:1em; } } .TableDetailForm.AddressBlock { position: relative; } .PostingButton.DeleteButton { float: left } /*Detail Form inside GridTable*/ .DetailForm { position: relative; border-top:1.5em solid #EEEEEE; border-bottom:1em solid #006699; margin-top: 0em } .DetailForm:after { bottom: 100%; left: 95%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 1.25em; margin-left: -1.25em; } .DetailForm.New:after { left: 90% } /*Payment Authorizations table*/ .PaymentAuthorizations th:nth-child(1), .PaymentAuthorizations td:nth-child(1){ width:8% } .PaymentAuthorizations th:nth-child(2), .PaymentAuthorizations td:nth-child(2){ width:10% } .PaymentAuthorizations th:nth-child(3), .PaymentAuthorizations td:nth-child(3){ width:10% } .PaymentAuthorizations th:nth-child(4), .PaymentAuthorizations td:nth-child(4){ width:12% } .PaymentAuthorizations th:nth-child(5), .PaymentAuthorizations td:nth-child(5){ width:24% } .PaymentAuthorizations th:nth-child(6), .PaymentAuthorizations td:nth-child(6){ width:15%; white-space:nowrap; } .PaymentAuthorizations th:nth-child(7), .PaymentAuthorizations td:nth-child(7){ width:9% } .PaymentAuthorizations th:nth-child(8), .PaymentAuthorizations td:nth-child(8){ width:12% } .PaymentAuthorizations .VoidIcon { width: 1em; vertical-align:middle } #tblScheduledLiabilities td:nth-child(1), #tblScheduledLiabilities td:nth-child(2) { width:30% } #tblScheduledLiabilities td:nth-child(8) { width:20% } /* AP and AR Aging */ .AgingTable {width:100%; border-collapse:collapse; } .AgingTable td:first-child, .AgingTable th:first-child { width:30% } .AgingTable td, .APAging table th { width: 14%;} /*Status Block*/ div.FormBlock.formCol.singleColForm.StatusBlock { text-align: center; padding-left: 0em; padding-right: 0em } .StatusBlock .fieldBlock > div { display: inline-block; flex: 1; vertical-align: top; text-align: center; flex-basis: 10%; flex-grow: 1; flex-shrink: 1; width: 10%; display: flex; flex-direction: column; justify-content: flex-start; position: relative;} .POStatus .StatusBlock .fieldBlock > div {width:inherit;} .StatusBlock .fieldBlock > img { vertical-align: middle; width: 3em; height: 3em } .StatusBlock .fieldBlock > div > img { width: 35px } .StatusBlock .fieldBlock > div > span { display:block; line-height: 1.2em; margin-bottom: 0.3em; } @media only screen and (max-width:750px) {.StatusBlock .fieldBlock > div > span { display:block; line-height: 1.2em; margin: 0.3em; white-space: pre-line; }} .StatusBlock .fieldBlock > div > span:nth-child(2) { font-weight: 600; white-space: normal; } .StatusBlock .fieldBlock > div > span:nth-child(3), .StatusBlock .fieldBlock > div > :nth-child(4), .StatusBlock .fieldBlock > div > :nth-child(5) { font-size: 80%; line-height: 1.2em; display: block; } .StatusBlock .fieldBlock .clickable { cursor:pointer } .ActivityStatus.StatusBlock .fieldBlock > div { width:50% } @media only screen and (max-width:750px) {.ActivityStatus.StatusBlock .fieldBlock > div { width:11% }} .StatusBlock .fieldBlock > div[aria-selected=true]::after { content: ' '; height: 0; width: 100%; border-bottom: 5px solid black; display: block; position: absolute; bottom: -1em; } .Circle { border-radius: 2em;} .Square.lockedWIP img { visibility: visible } .Circle, .Square { width: 2em; height: 2em; margin:0 auto; border: 0.2em solid; cursor:default; } .Circle > span, .Square > span { font-size:90%; } .Circle.DisabledStatusBorder.checked { width:2.35em; height:2.35em; border: 0em; } .Circle.canceled { width:2.25em; height:2.25em; border: 0em; } .Circle.canceledGray { width:2.25em; height:2.25em; border: 0em; } .StatusBlock .Cart { background-repeat: no-repeat; background-position: center; background-size:contain; width:2.35em; height:2.35em; margin:0 auto; } .WIPShipmentStatus span { line-height: 1.2em; } .Holds { background-image: url('../Images/CRM/shadow/Octagon.svg'); text-align:center; background-repeat:no-repeat; background-position:center; cursor:pointer; height:34px; width:34px; position: relative; display: inline-flex; flex-direction: column; align-content: center; justify-content: center; } .Holds span { vertical-align: baseline; font-weight: 600; font-size: 1.2em; line-height: 35px; } .Holds::after, .Health::after, .RecurrencePauseBtn::after { content: " "; height: 1.3em; width: 1.3em; position: absolute; pointer-events: none; transform: rotate(45deg); bottom: -3.2em; left: 0.5em; border-top: 1px solid; border-left: 1px solid; z-index: 1; display: none; } .Holds.active::after, .Health.active::after, .RecurrencePauseBtn.active::after { display: block; } .RecurrencePauseBtn { text-align:center; background-repeat:no-repeat; background-position:center; cursor:pointer; height:23px; width:23px; position: relative; } /*Commission Due widget*/ div.twoColForm.formCol.CommissionDueDates { display: flex; justify-content: space-around; padding-top: 1.5em } .FormBlock.CommissionDueTotals .twoColForm { width: 50%; float: right;} .FormBlock.CommissionDueTotals .twoColForm > div { line-height: 2em } .FormBlock.CommissionDueTotals span:nth-child(2) { float: right; margin-top: 0.1em } .FormBlock.CommissionDueTotals .Balance { font-weight: bold } .FormBlock.CommissionDueTotals input[type=text] { width: 30%; float: right; font-weight: bold } .CommissionDue .itemDetail .PostingButton { float: right; } .CommissionDue .itemDetail .CancelButton { float: right; margin-right: 0.5em; } /*Bill Detail - Analysis section*/ .BillAnalysis .totalsSection .singleSegment span { width: 50%; text-align: right } .BillAnalysis .AnalysisGrid tr:not(:first-child):not(:last-child) td:not(:first-child):not(:last-child) { border-top: 1px solid #dfdfd0; width: 18% } .BillAnalysis .totalCharts { vertical-align: middle } .BillAnalysis .AnalysisGrid td:nth-child(2) { text-align: left; width: 28% } .BillAnalysis .AnalysisGrid .SubtotalRow td { border-top: none } /*holds detail*/ .HoldsDetail, .OrderStatusSummary, .CreditHoldDetail, .InventoryMovementSummary, .RecurrenceSummary, .widgetHeader + .subHeader { position:relative; border-top-width:0.1em; border-top-style:solid; padding:1em 5%; background: #ccc; border-top-color: #b3aba6; border-spacing: 0.3em; clear:both; } .CreditHoldDetail:before, .InventoryMovementSummary::before, .subHeader::before { content: " "; height: 1.3em; width: 1.3em; position: absolute; pointer-events: none; transform: rotate(45deg); top:-0.7em; background-color: #ccc; border-top:1px solid #b3aba6; border-left:1px solid #b3aba6; z-index:1;} .HoldsDetail:before, .OrderStatusSummary:before, .subHeader::before {left: 79%;} .CreditHoldDetail:before {left: 92%;} .HoldsDetail, .CreditHoldDetail {display:flex;} .HoldsDetail > div, .CreditHoldDetail > div#CreditHold {width: 12.5%; font-size: 0.8em; cursor:pointer; display:flex; margin-left:0.2em; z-index:2;} .HoldsDetail > div, .CreditHoldDetail > #CreditHoldReason {font-size: 0.75em; display:flex; margin-left:0.2em; z-index:2;} .HoldsDetail > div > span, .CreditHoldDetail > div#CreditHold > span { display: inline-block; vertical-align: middle} .HoldsDetail > div > span:first-child, .CreditHoldDetail > div#CreditHold > span:first-child { width: 2em; height: 100%; text-align:center; padding:0.2em 0; height: 3.8em;} .HoldsDetail > div > span:nth-child(2), .CreditHoldDetail > div#CreditHold > span:nth-child(2) { width: 70%; line-height: 1.25em; padding-left:0.5em; padding-right:0.5em; margin:auto; flex-grow:1; word-spacing:7em;} .HoldsDetail #CreditHold, .CreditHoldDetail #CreditHold { z-index:3; } .HoldsDetail > div img, .CreditHoldDetail > div#CreditHold img { width: 1.25em; position:relative} .HoldsDetail .NotOnHold img, .CreditHoldDetail .NotOnHold img { top:10%} .HoldsDetail .OnHold img, .CreditHoldDetail .OnHold img { top:60%} @media only screen and (max-width:750px) { .HoldsDetail, .CreditHoldDetail {flex-flow:wrap} .HoldsDetail > div, .CreditHoldDetail > div#CreditHold {width:24%; margin-top:0.2em;} } .ReleaseHoldDetail{ width:auto; position:absolute; height:4.2em; z-index:1; border-right:2px solid #ccc; padding:0 1em;} .ReleaseHoldDetail select {width:10em;} .ReleaseHoldDetail >span{width:auto} .ReleaseHoldDetail .ui-selectmenu-button{height:1.5em;} .ReleaseHoldDetail .ui-selectmenu-button span.ui-selectmenu-text{padding:0em 0.4em; font-size:90%;} .ReleaseHoldDetail .ui-selectmenu-button span.ui-selectmenu-icon{top: .15em; right: .2em;} /*control panel*/ .ControlPanel.home img{height:2em; padding:0.6em 1em;} .Component {cursor:pointer} .ComponentSwitch.talkBubbleContent a{display:block; text-align:left} .ControlPanel .Group:first-child{margin-top:0.5em;} .ControlPanel .GroupHeader{font-size:12pt; padding:0.5em 0.5em 0.5em 0.8em;} .RootImage img{height:2.5em; width:2.5em;} .RootBlock div {float:left; padding-right:1em;} .RootLinks *{display:block; font-weight:600} .RootLinks h2 { padding:0.3em 0 0.5em 0; font-weight:bold; font-size: 10.5pt; } /*AR Generate Statements*/ .SendStatements #txtMinimumAccountBalance { margin-top: 1em } .SendStatements #txtMinimumDaysPastDue { margin-top: 1.25em } .SendStatements #divReceiptOptions { padding-top: 1em } .SendStatements table th:nth-child(5n+1), .SendStatements table td:nth-child(5n+1) { width: 20% } .SendStatements table th:nth-child(5n+2), .SendStatements table td:nth-child(5n+2) { width: 20% } .SendStatements table th:nth-child(5n+3), .SendStatements table td:nth-child(5n+3) { width: 20% } .SendStatements table th:nth-child(5n+4), .SendStatements table td:nth-child(5n+4) { width: 15% } .SendStatements table th:nth-child(5n+5), .SendStatements table td:nth-child(5n+5) { width: 20% } @media only screen and (max-width:375px) { .SendStatements table th:nth-child(3), .SendStatements table td:nth-child(3) { display: none; } } .ui-autocomplete.sidebarFinderFilter { z-index: 110 } #tblTerritories th:first-child, #tblTerritories td:first-child{width:30%} #tblTerritories th:nth-child(2), #tblTerritories td:nth-child(2){width:30%} #tblTerritories th:nth-child(3), #tblTerritories td:nth-child(3){width:20%} /*alphabet nav bar inside the formblock */ .FormBlock .ControlBarNav {border:0;} .FormBlock .ControlBarNav .tab{line-height:normal; font-weight:600; } .FormBlock .ControlBarNav .tab.active{height:initial; top:0; padding-top:0.2em} .FormBlock .ControlBarNav .tab:hover, .FormBlock .ControlBarNav .tab.active{border-radius:25%} .FormBlock .ControlBarNav.AlphabetNavigationBar {height:auto} .ControlBarNav.AlphabetNavigationBar > div {flex-wrap:wrap; flex-direction:row;} .ControlBarNav.AlphabetNavigationBar .tab{width:auto; order:1} .FormBlock .ControlBarNav.AlphabetNavigationBar .tab{height:1.5em; } .FormBlock .ControlBarNav.AlphabetNavigationBar a:not([disabled]){cursor:pointer} /*Activity Detail*/ .lastUpdated .deleteButton { margin-top: 0.25em } .ActivityStatus .fieldBlock { display:flex; justify-content:space-between; padding-left:1em; padding-right:1em; margin-top:2em } .ActivityStatus .fieldBlock > div { text-align: center; } .ActivityStatus .fieldBlock .Status + span { font-weight:bold; margin-top: 0.5em } .ActivityStatus .fieldBlock > div > span { display: block; line-height:1.5em; font-size:90% } .ActivityStatus .fieldBlock > img { width: 3em; height: 3em } .ActivityStatus .Status:not([disabled]) { cursor: pointer } .ActivityCompletion { min-height: 7em } /*Activity Detail - Link Tag*/ .linkTag { display:inline-block; width: 80%; border-radius: 0.25em 0em 0em 0.25em; padding-left: 0.5em; position: relative; line-height: 100% } a:link.linkTag, a:visited.linkTag { text-decoration:none; } .linkTag > span { width:80%; display:inline-block; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; vertical-align: middle } .linkTag::before { content: ""; display:inline-block; height: 1em; width: 1em; vertical-align:middle; margin-right: 0.5em; } .linkTag::after { content: ""; display:inline-block; width:0.98em; height: 100%; position: absolute; right:-1em; vertical-align: middle; } .deleteObjectLink { margin-top: 0.4em } /*Reminder*/ .ReminderSnoozeOptions span { cursor: pointer; } /*Control Panel - Payment Terms*/ .PaymentTerms td:nth-child(4n+1), .PaymentTerms th:nth-child(4n+1) {width: 30%;} .PaymentTerms td:nth-child(4n+2), .PaymentTerms th:nth-child(4n+2) {width: 25%;} .PaymentTerms td:nth-child(4n+3), .PaymentTerms th:nth-child(4n+3) {width: 25%;} .PaymentTerms td:nth-child(4n+4), .PaymentTerms th:nth-child(4n+4) {width: 20%;} @media only screen and (max-width:750px) { .PaymentTerms .placeholder { display:none; } } /*Control Panel - Payment Methods*/ .PaymentMethods td:nth-child(3n+1), .PaymentMethods th:nth-child(3n+1) {width: 50%;} .PaymentMethods td:nth-child(3n+2), .PaymentMethods th:nth-child(3n+2) {width: 25%;} .PaymentMethods td:nth-child(3n+3), .PaymentMethods th:nth-child(3n+3) {width: 25%;} .PaymentMethods .clearImage { position:absolute; top: 0.75em; right: 0em } .PaymentMethods .TwoInnerCol > div { overflow:hidden; text-overflow: ellipsis; } .PaymentMethods .TwoInnerCol input[type=checkbox] + label { display: inline; } .PaymentMethodIcon { background: white; height: 8em; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; } .PaymentMethodIcon #imgIcon { max-height: 6em; } /*Location Detail*/ .LocationDetail .compactInput.halfWidth { width: 50%; } .LocationDetail .TableDetailForm:after { left: 75% } .LocationDetail #divInfo .formSubsection:nth-child(n+2) { padding-top: 0em; } /*Control Panel - Locations */ .LocationManager th:nth-child(4n+1), .LocationManager td:nth-child(4n+1) { width: 25% } .LocationManager th:nth-child(4n+2), .LocationManager td:nth-child(4n+2) { width: 25% } .LocationManager th:nth-child(4n+3), .LocationManager td:nth-child(4n+3) { width: 40% } /*Control Panel - Distribution Centers*/ #tblCenters th:nth-child(4n+1), #tblCenters td:nth-child(4n+1) { width: 35% } #tblCenters th:nth-child(4n+2), #tblCenters td:nth-child(4n+2) { width: 35% } #tblCenters th:nth-child(4n+3), #tblCenters td:nth-child(4n+3) { width: 20% } /*Control Panel - Branch Manager*/ .BranchManager th:nth-child(5n+1), .BranchManager td:nth-child(5n+1) { width: 20% } .BranchManager th:nth-child(5n+3), .BranchManager td:nth-child(5n+3) { width: 15% } .BranchManager th:nth-child(5n+4), .BranchManager td:nth-child(5n+4) { width: 15% } .BranchManager th:nth-child(5n+5), .BranchManager td:nth-child(5n+5) { width: 10% } /*Control Panel - Branch Manager*/ .OrderClassManager th:nth-child(5n+1), .OrderClassManager td:nth-child(5n+1) { width: 8% } .OrderClassManager th:nth-child(5n+2), .OrderClassManager td:nth-child(5n+2) { width: 8% } .OrderClassManager th:nth-child(5n+3), .OrderClassManager td:nth-child(5n+3) { width: 23% } .OrderClassManager th:nth-child(5n+4), .OrderClassManager td:nth-child(5n+4) { width: 15% } .OrderClassManager th:nth-child(5n+5), .OrderClassManager td:nth-child(5n+5) { width: 23% } .OrderClassManager th:nth-child(5n+6), .OrderClassManager td:nth-child(5n+6) { width: 15% } .OrderClassManager th:nth-child(5n+7), .OrderClassManager td:nth-child(5n+7) { width: 8% } .OrderClassManager #imgIcon, .ColorSquare{ max-width: 2.5em; max-height: 2.5em; } .ColorSquare{ width: 2.5em; height: 2.5em; } /*password Strength Meter*/ .passMeter {position:relative; display:block;} .passMeter input[type=password] { padding-bottom: 0.3em; } .StrengthMeter {line-height:0; position:absolute; bottom:0.2em; width:100%;} .StrengthMeter span{display:inline-block;height:0.2em; width:24%; margin: 0 0.1em 0 0.1em; } .StrengthMeterInfo{position:absolute; right:0.2em; cursor:pointer; } .StrengthMeterInfo span::after {content: "i"; font-style:italic; display:none; margin-left:0.3em; height:1.1em; width:1.1em; line-height:1.2em; text-align:center; border-radius:0.7em; font-size:80%; text-indent:-0.1em; } .StrengthMeterInfo span.poor::after, .StrengthMeterInfo span.ok::after { display:inline-block; vertical-align:baseline; } .StrengthMeterFeedback.talkBubbleContent {width:23em; font-size: 85%; } .StrengthMeterFeedback ol { padding-left:1em; } /*Weekday Selector*/ .WeekDaysSelector { display: flex; flex-wrap: nowrap; justify-content: space-between } .WeekDaysSelector input[type="checkbox"] + label { display:inline-block; margin-left: 0em; padding-left: 0em; line-height: 2.2em; width: 15%; cursor:pointer; text-align: center } .WeekDaysSelector input[type="checkbox"] + label:before { content: none; } .RootContent ul { list-style-type:disc; margin-left: 1.5em; line-height: 1.7em; } .RootContent ul li { margin:0.5em 0; } .RootContent .credits { display:block; padding:0.5em; float:none;} .RootContent .credits a { float:right; margin-left:1em; } .RootContent .credits:nth-child(even) { background-color: #dddddd; } .RootBlock .RootContent, .RootContent div { display:block; float:none; } .RootContent div.license { white-space:pre-wrap; font-family:monospace; background-color:white; color:black; margin:1em 0; padding:1em; display:none; } /*Branch Detail*/ .BranchDetail #infoSummary {margin-left: 0.5em;} .BranchDetail #divMerchantAccount { margin-top: 0em } .BranchDetail #divMerchantAccount .twoColForm.formCol { padding-top: 0em } .BranchDetail .DocumentHeaderLogo { width: 200px; height: 75px; object-fit:contain; } .BranchDetail .clearImage { top: 1em } .BranchDetail .itemDetail.BranchAddress::after { left: 25%; } .BranchDetail .itemDetail.RemitToAddress::after { left: 75%; } /*Completion*/ .Incomplete, .Complete {text-align: center;font-weight: bold;} /*Bank Account Reconciliations*/ #tblBankAccountReconciliations th:nth-child(6n+1), #tblBankAccountReconciliations td:nth-child(6n+1) { width: 8% } #tblBankAccountReconciliations th:nth-child(6n+2), #tblBankAccountReconciliations td:nth-child(6n+2) { width: 33% } #tblBankAccountReconciliations th:nth-child(6n+3), #tblBankAccountReconciliations td:nth-child(6n+3) { width: 15% } #tblBankAccountReconciliations th:nth-child(6n+4), #tblBankAccountReconciliations td:nth-child(6n+4) { width: 18% } #tblBankAccountReconciliations th:nth-child(6n+5), #tblBankAccountReconciliations td:nth-child(6n+5) { width: 18% } #tblBankAccountReconciliations th:nth-child(6n+6), #tblBankAccountReconciliations td:nth-child(6n+6) { width: 8% } #tblBankAccountReconciliations .systemIcon { width:1.4em; height:1.4em; } /*Control Panel Employee Department*/ #tblDepartments th:first-child, #tblDepartments td:first-child{width:40%} #tblDepartments th:nth-child(2), #tblDepartments td:nth-child(2){width:40%} #tblDepartments th:nth-child(3), #tblDepartments td:nth-child(3){width:10%} .address .addressWrapper .OrganizationSummary { width: 65%; } @media only screen and (max-width: 750px) { .address .addressWrapper .OrganizationSummary { width: 55%; } } .fieldBlock.address .addressWrapper .OrganizationSummary span { display:block; line-height: 1.25em; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; } /*Dunning Messages*/ .DunningMessages th:nth-child(5n+1), .DunningMessages td:nth-child(5n+1) { width: 25% } .DunningMessages th:nth-child(5n+2), .DunningMessages td:nth-child(5n+2) { width: 20% } .DunningMessages th:nth-child(5n+3), .DunningMessages td:nth-child(5n+3) { width: 20% } .DunningMessages th:nth-child(5n+4), .DunningMessages td:nth-child(5n+4) { width: 20% } .FullWidthLabel{display:block} /*Regions & Territories*/ .RegionsTerritories th:nth-child(3n+1), .RegionsTerritories td:nth-child(3n+1) { width: 45% } .RegionsTerritories th:nth-child(3n+2), .RegionsTerritories td:nth-child(3n+2) { width: 45% } /*Control Panel Customer Attachment Classes*/ #tblAttachmentClasses th:nth-child(2), #tblAttachmentClasses td:nth-child(2){width:10%} /*Control Panel Customer Permission Groups*/ #tblPermissionGroups th:nth-child(2), #tblPermissionGroups td:nth-child(2){width:10%} #tblCustomerGroupPermission th:nth-child(2), #tblCustomerGroupPermission td:nth-child(2){width:10%} .UnderLabelText { font-size: 0.8em; } .actionTrigger { cursor: pointer; } .hasClearButton { position: relative } /* Sales Order Status Summary */ .OrderHealthImage { cursor:pointer} .OrderHealthImage .Warning{position:relative; right:10px; bottom:9px; width:1.3em; height:1.3em; font-size:90%} .OrderHealthImage .Holds{float:right;border-radius: 50%; width:16px; height:16px;background-color:#990000; font-weight:600; font-size:90%; line-height:16px; position:relative; left:7px; bottom:4px;text-align:center; vertical-align:middle; color:white; } .widgetHeader .orderIcons > div, .widgetHeader .orderIcons > span{ width:34px; float:right; position:relative; } .OrderStatusSummary:before { left: 73% !important; } .OrderStatusSummary .progressIndicator { height:3.5em; width:3.5em; margin: 0 auto} .OrderStatusSummary .progressBlock { text-align: center; width: 10%; display: inline-block; } .OrderStatusSummary .FormLabel { font-size: 80%} .OrderStatusSummary img { height: 2.5em } @media only screen and (max-width: 750px) { .OrderStatusSummary .progressBlock { padding-right: 5% } } /*Line Item Status Charts*/ .LineItemStatus .chart { height: 1.7em; position:relative; width:4em; margin: 0.2em 0em; text-align:center} .LineItemStatus .chart div { height: 1.7em; position: absolute; left: 0 } .LineItemStatus .chart span {white-space:nowrap; position:relative; color: white} .Warning { text-align:center; height:1.5em; margin-top:0.3em} .Warning > span { vertical-align:middle} .inputTimeIcon { background-position:right center; background-repeat:no-repeat; background-size: 30px 25px; } /*Control Panel Customer Classes*/ #tblCustomerClasses th:nth-child(3), #tblCustomerClasses td:nth-child(3){width:10%} #divCustomerClassDetail textarea{resize: vertical} /*Deliver AR Documents*/ .DeliverARDocs th:nth-child(1), .DeliverARDocs td:nth-child(1) { width: 12% } .DeliverARDocs th:nth-child(2), .DeliverARDocs td:nth-child(2) { width: 12% } .DeliverARDocs th:nth-child(3), .DeliverARDocs td:nth-child(3) { width: 12% } .DeliverARDocs th:nth-child(5), .DeliverARDocs td:nth-child(5) { width: 15% } .DeliverARDocs th:nth-child(6), .DeliverARDocs td:nth-child(6) { width: 10% } .DeliverARDocs .totals div > span:first-child { width: 80%; text-overflow: ellipsis; overflow: hidden; } @media only screen and (max-width: 375px) { .DeliverARDocs th:nth-child(4), .DeliverARDocs td:nth-child(4) { display: none; } } /*Code-Name-Active table*/ .CodeNameActive th:nth-child(1), .CodeNameActive td:nth-child(1) { width: 45%; } .CodeNameActive th:nth-child(2), .CodeNameActive td:nth-child(2) { width: 45%; } .CodeNameActive th:nth-child(3), .CodeNameActive td:nth-child(3) { width: 5%; } /*Opportunity Type*/ .OpportunityType th:nth-child(1), .OpportunityType td:nth-child(1) { width: 31%; } .OpportunityType th:nth-child(2), .OpportunityType td:nth-child(2) { width: 31%; } .OpportunityType th:nth-child(3), .OpportunityType td:nth-child(3) { width: 31%; } .OpportunityType th:nth-child(4), .OpportunityType td:nth-child(4) { width: 7%; } /*Source Code*/ .SourceCode th:nth-child(1), .SourceCode td:nth-child(1) { width: 20%; } .SourceCode th:nth-child(2), .SourceCode td:nth-child(2) { width: 20%; } .SourceCode th:nth-child(3), .SourceCode td:nth-child(3) { width: 20%; } .SourceCode th:nth-child(4), .SourceCode td:nth-child(4) { width: 17%; } .SourceCode th:nth-child(5), .SourceCode td:nth-child(5) { width: 17%; } .SourceCode th:nth-child(6), .SourceCode td:nth-child(6) { width: 5%; } /*Print Checks*/ .PrintChecks th:nth-child(1), .PrintChecks td:nth-child(1) { width: 10%; } .PrintChecks th:nth-child(2), .PrintChecks td:nth-child(2) { width: 13%; } .PrintChecks th:nth-child(3), .PrintChecks td:nth-child(3) { width: 13%; } .PrintChecks th:nth-child(4), .PrintChecks td:nth-child(4) { width: 22%; } .PrintChecks th:nth-child(5), .PrintChecks td:nth-child(5) { width: 22%; } .PrintChecks th:nth-child(6), .PrintChecks td:nth-child(6) { width: 15%; } .PrintChecks th:nth-child(7), .PrintChecks td:nth-child(7) { width: 5%; } @media only screen and (max-width: 375px) { .PrintChecks th:nth-child(4), .PrintChecks td:nth-child(4), .PrintChecks th:nth-child(5), .PrintChecks td:nth-child(5) { display: none } } /*Control Panel Crew Types*/ #tblCrewTypes th:nth-child(2), #tblCrewTypes td:nth-child(2){width:20%} #tblCrewTypes th:nth-child(3), #tblCrewTypes td:nth-child(3){width:20%} #tblCrewTypes th:nth-child(4), #tblCrewTypes td:nth-child(4){width:10%} .pnlPriceRange input { padding: 0em 0.5em 0em 0.5em; } .SkillRating .Star{display:inline-block; height:1.5em; width:1.5em; padding-right:0.2em;} .SkillRating.Edit .Star{cursor:pointer} /*Properties*/ .PropertyTable th:nth-child(1), .PropertyTable td:nth-child(1) { width: 3%; } .PropertyTable th:nth-child(2), .PropertyTable td:nth-child(2) { width: 45%; } .PropertyTable th:nth-child(3), .PropertyTable td:nth-child(3) { width: 30%; } .PropertyTable th:nth-child(4), .PropertyTable td:nth-child(4) { width: 10%; } .PropertyTable th:nth-child(5), .PropertyTable td:nth-child(5) { width: 12%; } .ActionButtons { text-align: right; } .ActionButtons .deleteButton { height: 22px;} #divPropertyDetail .propertyUpload { text-align: center; } .SortableTable { border-collapse: separate; border-spacing: 0em 0.3em; } img.tableThumbnail { max-width: 60px; max-height: 30px } /*Order Status Line*/ .singleColForm.formCol.StatusBlock { padding-left: 4em; padding-right: 4em } .StatusBlock .fieldBlock { display: flex; justify-content:space-between; margin: 0 auto; align-items: stretch; } .StatusBlock .fieldBlock > div.Line { height: 1px; margin-top: 1.15em; margin-left: -2.5em; margin-right: -2.5em; border-top-width: 3px; border-top-style: dotted; flex-grow: 2; align-self: flex-start; } @media only screen and (max-width: 1024px) {.StatusBlock .fieldBlock > div.Line { margin-left: -1.9em; margin-right: -1.9em; }} @media only screen and (max-width: 750px) {.StatusBlock .fieldBlock > div.Line { margin-left: -2.2em; margin-right: -2.2em; }} @media only screen and (max-width: 375px) { .StatusBlock .fieldBlock > div > span { display:block; overflow: hidden; text-overflow: ellipsis; white-space: pre-line; } .singleColForm.formCol.StatusBlock { padding-left: .5em; padding-right: .5em } } .StatusBlock .fieldBlock > div.Line.Complete { border-top-style: solid; } .StatusBlock .fieldBlock > div.Line { border-top-color: black; } .FormBlock .orderStatus[disabled] { cursor: default; } .FormBlock .orderStatus, .currentStatus .orderStatus { z-index:2; } .FormBlock .orderStatus:nth-child(1) > div { z-index: 100; } .FormBlock .orderStatus:nth-child(2) > div { z-index: 95; } .FormBlock .orderStatus:nth-child(3) > div { z-index: 90; } .FormBlock .orderStatus:nth-child(4) > div { z-index: 85; } .FormBlock .orderStatus:nth-child(5) > div { z-index: 80; } .FormBlock .orderStatus:nth-child(6) > div { z-index: 75; } .FormBlock .orderStatus:nth-child(7) > div { z-index: 70; } .FormBlock .orderStatus:nth-child(8) > div { z-index: 65; } .FormBlock .orderStatus:nth-child(9) > div { z-index: 60; } .FormBlock .orderStatus:nth-child(10) > div { z-index: 55; } .FormBlock .orderStatus:nth-child(11) > div { z-index: 50; } .FormBlock .orderStatus:nth-child(12) > div { z-index: 45; } .FormBlock .orderStatus:nth-child(13) > div { z-index: 40; } .FormBlock .orderStatus:nth-child(14) > div { z-index: 35; } .FormBlock .orderStatus:nth-child(15) > div { z-index: 30; } .FormBlock .orderStatus:nth-child(16) > div { z-index: 25; } .FormBlock .orderStatus:nth-child(17) > div { z-index: 20; } .FormBlock .orderStatus:nth-child(18) > div { z-index: 15; } .FormBlock .orderStatus:nth-child(19) > div { z-index: 10; } .FormBlock .orderStatus:nth-child(20) > div { z-index: 5; } .FormBlock .billStatus[disabled] { cursor: default; } .FormBlock .billStatus, .currentStatus .billStatus { z-index:2; } .WIPShipmentStatus.talkBubbleContent {font-weight:bold;} .WIPShipmentStatus #lblPendingShipmentID{font-weight:bold;} .FormSection .StatusBlock .fieldBlock > div:nth-child(odd) { z-index: 2; } .FormSection .StatusBlock .fieldBlock > div.Line { z-index: 0; } .offscreen{position: absolute; left:-999em;} .orderStatus span { white-space: nowrap; } .ui-sortable > tr:not(.controlsRow):not(.detailRow):not(.catalogRow), .ui-sortable li {cursor:move} /*Media table*/ #tblMedia th:nth-child(1), #tblMedia td:nth-child(1){width:5%} #tblMedia th:nth-child(2), #tblMedia td:nth-child(2){width:40%} #tblMedia th:nth-child(3), #tblMedia td:nth-child(3){width:45%} #tblMedia th:nth-child(4), #tblMedia td:nth-child(4){width:10%} /*Price table*/ .PricingTablePricing input{text-align:right} .PricingTablePricing input[disabled]{text-align:right; background-color:inherit} .PricingTablePricing label { display: none;} /*Payment Gateway Merchant Accounts*/ #tblMerchantAccounts th:nth-child(5n+1), #tblMerchantAccounts td:nth-child(5n+1) { width: 25% } #tblMerchantAccounts th:nth-child(5n+2), #tblMerchantAccounts td:nth-child(5n+2) { width: 25% } #tblMerchantAccounts th:nth-child(5n+3), #tblMerchantAccounts td:nth-child(5n+3) { width: 30% } #tblMerchantAccounts th:nth-child(5n+4), #tblMerchantAccounts td:nth-child(5n+4) { width: 10% } #tblMerchantAccounts th:nth-child(5n+5), #tblMerchantAccounts td:nth-child(5n+5) { width: 10% } /*Header thumbnail image in Item Detail*/ .ItemThumbnail { margin: auto; height: 100px; width: 100px; position: relative; } .ItemThumbnail img { max-width:100px;max-height:100px; position:absolute; top:50%; left:50%;transform:translate(-50%,-50%) } .ChargeDetail #tblSuppliers th:nth-child(1), .ChargeDetail #tblSuppliers td:nth-child(1) { width: 25% } .ChargeDetail #tblSuppliers th:nth-child(2), .ChargeDetail #tblSuppliers td:nth-child(2) { width: 20% } .ChargeDetail #tblSuppliers th:nth-child(3), .ChargeDetail #tblSuppliers td:nth-child(3) { width: 25% } .ChargeDetail #tblSuppliers th:nth-child(4), .ChargeDetail #tblSuppliers td:nth-child(4) { width: 20% } .ChargeDetail #tblSuppliers th:nth-child(5), .ChargeDetail #tblSuppliers td:nth-child(5) { width: 10% } .ChargeDetail #tblSuppliers th:nth-child(6), .ChargeDetail #tblSuppliers td:nth-child(6) { width: 10% } /*sales tax*/ .Tax th:nth-child(1), .Tax td:nth-child(1){width:50%} .Tax th:nth-child(2), .Tax td:nth-child(2){width:40%; text-align:center} .Tax th:nth-child(3), .Tax td:nth-child(3){width:5%} /* Survey table */ .ServiceDetail #pnlSurveys th:nth-child(1), .ServiceDetail #pnlSurveys th:nth-child(1) { width: 3%; } .ServiceDetail #pnlSurveys th:nth-child(3), .ServiceDetail #pnlSurveys th:nth-child(3) { width: 5%; } .ServiceDetail #tblSuppliers th:nth-child(1), .ServiceDetail #tblSuppliers td:nth-child(1) { width: 20% } .ServiceDetail #tblSuppliers th:nth-child(2), .ServiceDetail #tblSuppliers td:nth-child(2) { width: 20% } .ServiceDetail #tblSuppliers th:nth-child(3), .ServiceDetail #tblSuppliers td:nth-child(3) { width: 10% } .ServiceDetail #tblSuppliers th:nth-child(4), .ServiceDetail #tblSuppliers td:nth-child(4) { width: 20% } .ServiceDetail #tblSuppliers th:nth-child(5), .ServiceDetail #tblSuppliers td:nth-child(5) { width: 10% } .ServiceDetail #tblSuppliers th:nth-child(6), .ServiceDetail #tblSuppliers td:nth-child(6) { width: 20% } #divSchedulingColor { border-width: 0.1em; margin: 0em; } #divSchedulingColor { border-color: #729ebb; } /* Service Detail - Color picker */ .EssentOneColorPicker input[type=button] { padding: 0em 0.3em; } .EssentOneColorPicker input[type=button]:first-child { margin-right: 1em; } .EssentOneColorPicker input[type=button] { background-color: #0082C6; color: white; font-weight: bold; } /******************************* TUTORIALS *******************************/ .welcomeMat { font-size: 16pt; width: 700px; display:none; padding: 20px; position:absolute; z-index:501; align-items:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;} .welcomeMat > div:first-child { width: 65%; display:inline-block; } .welcomeMat > div + div { width:35%; text-align:center; display:inline-block; } .welcomeMat .imageBorder { height: 200px; width: 200px; margin:0 auto; border-radius: 200px; background-size: 210px 210px; background-position:center; } .welcomeMat h3 { font-weight:400; font-size: 20pt; margin-bottom:10px; } .welcomeMat footer button { border-radius: 2em; padding:0.1em 1em; font-size:inherit; font-weight: 400; min-width: 6.5em; } .welcomeMat button + button { margin-left: 1em; } .welcomeMat footer { text-align:center; margin-top:20px; } .welcomeMat ul { padding-left: 1.2em; } .welcomeMat .closeButton { height:30px; width:30px; background-size: 18px; background-repeat:no-repeat; background-position:center; border-radius:15px; margin:0; padding:0; position:absolute; top:-10px; right:-10px; } .overlay { position:fixed; top:0; left:0; bottom:0; right:0; z-index:500; } .stepBox { width:320px; padding:10px; font-size:9pt; margin-top:10px; z-index:60; position:absolute; display:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;} .stepBox div, .stepBox p { line-height:1.5em; margin-bottom:0.7em } .stepBox::before { content: " "; display: block; height: 22px; width: 22px; transform: rotate(45deg); position: absolute; top: -7px; z-index:50; } .stepBox.right::before{ right: 5px; } .stepBox.left::before{ left: 5px; } .stepBox.center::before { right:149px; } .stepBox button { border-radius:1.2em; float:right; font-size:9pt; } .stepBox::after { display: block; content: ' '; clear: both; height: 0px; } @media only screen and (max-width: 415px) { .welcomeMat { width: 300px; font-size: 11pt; padding:15px; } .welcomeMat > div + div { width:0; } .welcomeMat > div:first-child { width: auto; } .welcomeMat .imageBorder { display:none;} .stepBox { width: 280px; } } /* Slide Table */ .finderResultListEntry .SlideTable button.ui-button, .finderResultListEntry .SlideTable .ui-button[disabled] { background-color: initial; border: none; vertical-align: initial; width:1em; } .finderResultListEntry .SlideTableColumns { overflow: hidden; white-space: nowrap; width: 15em; display: inline-block; float: left; } .finderResultListEntry .PrevColumnButton, .finderResultListEntry .NextColumnButton { float: left; display: inline-block; position: inherit; padding: 0; } .finderResultListEntry .options .SlideTableColumns td,.finderResultListEntry .options .SlideTableLegend td { vertical-align: top; } .finderResultListEntry .SlideTableColumns tr { line-height: initial; } .finderResultListEntry .SlideTableColumns > table { position: relative; } .SlideTableLegend tr, .SlideTableColumns tr:first-child { vertical-align: top; padding: 0.25em; } .finderResultListEntry .PriceTable .SlideTableColumns td { cursor: pointer; max-width:3.1em; min-width:3.1em } .finderResultListEntry .PriceTable .SlideTableColumns td div:first-child { text-align: center; } .finderResultListEntry .SlideTable {text-align: inherit;} /*structure for pricing table*/ .finderResultListEntry .SlideTable.PriceTable{display:inline-flex; width: 17em; } .finderResultListEntry .SlideTableColumns{width:inherit;} #ulPriceTableFinderOrganizations .finderResultListEntry .labelFrame { cursor:pointer; } #ulPriceTableFinderOrganizations .finderResultListEntry .FormLabel { float:left; clear:left; } #ulPriceTableFinderOrganizations .finderResultListEntry .CountryCurrency, .PricingTablePricing img.PriceBreak.OpenButton { float: right; } #ulPriceTableFinderOrganizations .finderResultListEntry .priceDetails{ width:20%; } .Coded.Price, .wholesale.DiscountCode, .PricingTablePricing .Delete{ border-left: 4px solid } .PricingTablePricing .GridTable th { padding: 5px 0 ; margin: 0px;} .PricingTablePricing .GridTable th, .PricingTablePricing .GridTable th .ui-widget.ui-selectmenu-button .ui-selectmenu-text { font-size: 10.5pt; font-weight:initial;} .PricingTablePricing tr:not(.codedPricingOutlineRow) th { padding-right: 0.9em} .PricingTablePricing th.codedPricingWrapper { font-size: 13.5pt; font-weight:initial; } .PricingTablePricing th .ui-selectmenu-button.ui-button .ui-selectmenu-text { text-align: center; line-height: 1em; padding: 0.2em 0em 0.3em 0.4em;} .PricingTablePricing th .ui-selectmenu-button.ui-button.ui-widget { height:1.5em; border: 1px solid; width: 75% !important; margin-left: auto; border-width:thin; } .PricingTablePricing td.DiscountCode span.ui-selectmenu-button.ui-button { border-width:thin; } .PricingTablePricing th .ui-selectmenu-button .ui-selectmenu-icon { top: 0.2em } img.PriceBreaks { cursor: pointer; height: 1.5em; padding-left: .75em; padding-right: 0.25em; } img.PriceBreaks.OpenButton { padding-right: 0; float:right; } td.PriceBreaks.OpenButton { position:relative; } /* Support autocomplete for textboxes */ .FinderAutocomplete .ui-button.ui-state-active{ margin: 0;} .FinderAutocomplete .newItem.ui-menu-icons .ui-menu-item { padding-top: 0em; padding-bottom: 0em; } .ui-autocomplete.FinderAutocomplete { z-index:104; } .ProductRating img{height:1.5em; width:1.5em; padding-right:0.2em; vertical-align: middle;} /*Offerings sidebar*/ .OfferingsContent ul { list-style-type:none; box-sizing: border-box; } .OfferingsContent ul li { box-sizing: border-box } .OfferingsContent li { display: flex; align-items: center; justify-content:flex-start; padding-left:2em; box-sizing:border-box; } .OfferingsContent ul ul li { padding-left: 4em; } .OfferingsContent li > span:first-child { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .OfferingsContent li > span:last-child { margin-left:0.3em } .OfferingsContent li a.selected { line-height: 2em; min-height: 2.3em; padding-top: 0.1em; box-sizing:border-box; } .OfferingsContent li span.itemAction { padding-left:6em } .OfferingsContent .categoryList { max-height: 0; overflow-y: hidden; opacity: 0; transition: opacity 1s, max-height 10s ease-out; } .OfferingsContent .categoryList.showAll{ max-height: 1000em; opacity:1; overflow-y: visible } @media only screen and (max-width: 1024px) { .OfferingsContent ul li:first-child { display: block; } .OfferingsContent ul li, .OfferingsAdvanced { font-size: 85%; line-height: 2em; } } /* Inventory/Purchasing/Fulfillment Dashboards */ .summaryWidget.noPieChart .twoColBlock .statusBlock { width: 30.8%; } .summaryWidget.noPieChart .statusBlock:last-of-type { margin-right: 0em; } .summaryWidget .twoColBlock .singleColForm { padding: 0 !important; } .summaryWidget .twoColBlock > .formCol:nth-child(2n) { padding:1em 0.5em 1em 1em; } /*Quick Add*/ .FormBlock.QuickAddDialog .twoColForm { width: 100%; } .FormBlock.QuickAddDialog a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .FormBlock.QuickAddDialog a:before { display: inline-block; margin-right: 0.5em; position: relative; top: 0.15em; } .QuickAddContainer { position: relative; } .QuickAddContainer .QuickAddTrigger { width: 22px; height: 22px; margin-top: 0.4em; } /*Style + Animation of the pointing arrow*/ .QuickAddContainer::after { content: ""; position: absolute; top: 130%; left: 50%; margin-left: -15px; border-width: 0px 15px 0px 15px; border-style: solid; z-index: 8; transition: border-top-width 750ms; } .QuickAddContainer.active::after { border-top-width: 10px; } /*Style + Animation of the Quick Add dialog*/ .QuickAddContainer .QuickAddDialog { position: absolute; width: 400px; right: -20px; z-index: 8; margin-top: 0em; top: 132%; overflow-y: hidden; max-height: 0px; transition: max-height 750ms; -webkit-transform:translateZ(0); } .QuickAddContainer.active .QuickAddDialog { max-height: 400px; } @media only screen and (max-width: 1024px) { .QuickAddContainer .QuickAddTrigger { margin-top: 0.1em; } .QuickAddContainer .QuickAddDialog { top: 153%; } .QuickAddContainer.active::after { top: 150%; } } @media only screen and (max-width: 750px) { .QuickAddContainer .QuickAddDialog { position: fixed; left: 0px; width: 100%; margin-top: 0.75em; top: auto; } .QuickAddContainer.active::after { top: 140%; } } .roundToggleButton { transition: transform 750ms; cursor:pointer; } .roundToggleButton.active, .QuickAddContainer.active .roundToggleButton { -ms-transform: rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); } /*RMA Credit*/ .RMACredit th, .RMACredit td { width: 20%; } .RMACredit th:nth-child(3), .RMACredit td:nth-child(3) { width: 30%; } .RMACredit th:nth-child(5), .RMACredit td:nth-child(5) { width: 10%; } .ContactDetailForm { position:relative; } .left.ContactDetailForm:after { left:25%; } .right.ContactDetailForm:after { left:75%; } .totalCharts .FormLabel span:last-child { float:right; } /*Credit info*/ .CreditSection .FormLabel .CreditUsed { float:left} .CreditSection .FormLabel .CreditAvailable { float:right} .CreditSection .chart { clear:both} /*Budget info*/ .BudgetSection .FormLabel .BudgetUsed { float:left} .BudgetSection .FormLabel .BudgetAvailable { float:right} .BudgetSection .chart { clear:both} /*Full Page Dialog*/ .ZoneBoxHolder.FullPageDialogView .MenuBar, .ZoneBoxHolder.FullPageDialogView .leftColZone, .ZoneBoxHolder.FullPageDialogView .rightColZone, .ZoneBoxHolder.FullPageDialogView .contentZone .WidgetBody { display: none; } .ZoneBoxHolder.FullPageDialogView .FullPageDialog { display: block; } .ZoneBoxHolder.FullPageDialogView .contentZone { max-width: 100%; } .ZoneBoxHolder.FullPageDialogView .contentZone .WidgetBody .FullPageDialog { display: block; } .FullPageDialog .ContentPanel { max-width: 1020px; } .FullPageDialog { display: none; } .FullPageDialog .HeaderPanel > div { max-width: 1020px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .FullPageDialog .HeaderPanel .Return { padding: 0.5em 5%; } /*Catalog Detail*/ .AliasTable th, .AliasTable td { width: 47.5%; } .AliasTable th:last-child, .AliasTable td:last-child { width: 5%; } .DescriptionTable th, .DescriptionTable td { width: 33% } .DescriptionTable th:last-child, .DescriptionTable td:last-child { width: 5%; } .logoField .clearImage { padding-top:1em; } .ProductGroupList ul { margin-left: 2em; } .ProductGroupList:first-child { position: relative; } .ProductGroupList li { list-style-type: none; } .ProductGroupList div > span { display: inline-block; width: 1.5em; } .ProductGroupList div > span:nth-last-child(2), .ProductGroupList div > span:nth-child(3) { width: auto; } .ProductGroupList div > span:nth-last-child(2) { margin-right: 2em; } .ProductGroupList div > span:nth-last-child(2), .ProductGroupList div > span:nth-last-child(3) { float: right; } .ProductGroupList .EditIcon { vertical-align: middle; } .ProductGroupList li > div { padding: 0.75em 0.5em; border-bottom: 3px solid #eee; } .ProductGroupList .ui-state-highlight { height: 3em; line-height: 3em; border: 1px dashed #dddddd; margin-bottom: 3px; } .ProductGroupList.sorting ul { min-height: 1em; } .ProductGroupList .ui-sortable-helper { position: absolute; } .TableDetailOverlay{ position:fixed; width:100%; height:100%; top:0px; left:0px; z-index:101; cursor: not-allowed; } .Unselectable { pointer-events:none; cursor: not-allowed; } .Focused { position: relative; z-index: 102; } /*Arrow in Merge Form*/ .MergeFrom span { vertical-align: middle; } .MergeFrom img { height: 18px; float: right; margin: 0.4em 0em; } /*Charting*/ .ChartLegend { display:flex; justify-content:space-around; } .ChartLegendLabel { padding-left:0.5em; } .ChartLegendColor { display:inline-block; height:10px; width: 10px; border-radius: 50%; background-color:black; } /*Transaction History Log*/ .TransactionDate{ text-align:center; z-index:1; position: relative; padding:1%; } .TransactionLog { min-height:3em; margin-bottom: 1em; } .TransactionLog::after { content: ' '; clear:both; display:block; height:0;} .TransactionsInDate .headshot { display:inline-block; height: 30px; width: 30px; float:left; text-align:center; } .TransactionsInDate .roundheadshot { display:inline-block; height: 30px; width: 30px; float:left; text-align:center; } .TransactionsInDate .roundheadshot img { max-width:30px; max-height:30px; width: inherit; height: inherit; object-fit:cover; object-position:top;} .TransactionsInDate { float:left; width: 46%;} .TransactionsInDate .TransactionStatement { float: left; justify-content: flex-start; display:flex; flex-wrap:wrap; margin:0em 0em 0em 1em; max-width:60%; } .TransactionsInDate.left .TransactionTime { float: right; } .TransactionsInDate .TransactionName { margin-right:.5em; } .TransactionsInDate .TransactionLog .TransactionImage { content: ''; position: absolute; width: 30px; height: 25px; right: 48.7%; z-index: 1; transform:translate(2%); } .TransactionNotes { display:block; width:100%; line-height:1.1em; font-size:80%; font-style:italic; } /* Fix the structures for the right */ .TransactionsInDate.right .TransactionLog .TransactionImage { left: calc(50% - 15px); } .TransactionsInDate.right { float:right; } .TransactionsInDate.right .TransactionStatement { float: right; justify-content: flex-end; margin: 0em 1em 0em 0em; } .TransactionsInDate.right .TransactionTime { float: left; } .TransactionsInDate.right .roundheadshot { float: right; } .TransactionsInDate.right .TransactionName { margin-right:0em; text-align:right; } .TransactionsInDate.right .TransactionAction { margin-left:.5em; } .TransactionsInDate.right .TransactionNotes { text-align:right; } .Timeline { position: relative; max-width: 1200px; margin: 0 4em 6em 4em; } /* The actual timeline (the vertical ruler) */ .Timeline::after { content: ''; position: absolute; width: 3px; top: 0; bottom: 0; left: 50%; margin-left: -3px; z-index: 0; } @media only screen and (max-width: 1024px){ .Timeline{ margin:0 auto; } .Timeline::after{ left:20px; } .TransactionDate{ text-align:left; padding-left:1em; } .TransactionsInDate{ width:92%; float:right; padding-right:4%; } .TransactionsInDate .TransactionTime { float:left; padding-left:20px; } /*fix the styles for the left when in mobile*/ .TransactionsInDate.left .TransactionLog .TransactionImage, .TransactionsInDate.right .TransactionLog .TransactionImage { left: 5px; } .TransactionsInDate.left .TransactionStatement{ float:right; justify-content: flex-end; margin: 0em 1em 0em 0em; } .TransactionsInDate.left .TransactionTime { float:left; } .TransactionsInDate.left .roundheadshot { float:right; } .TransactionsInDate.left .TransactionName { margin-right:0em; text-align:right; } } .PaymentsTable .PaymentsStatus img{ width: 1.5em; vertical-align:middle; } .PaymentsTable th:nth-child(1), .PaymentsTable td:nth-child(1) { width: 7%; } .PaymentsTable th:nth-child(2), .PaymentsTable td:nth-child(2) { width: 10%; } .PaymentsTable th:nth-child(3), .PaymentsTable td:nth-child(3) { width: 10%; } .PaymentsTable th:nth-child(4), .PaymentsTable td:nth-child(4) { width: 15%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} .PaymentsTable th:nth-child(5), .PaymentsTable td:nth-child(5) { width: 23%; } .PaymentsTable th:nth-child(6), .PaymentsTable td:nth-child(6) { width: 15%; } .PaymentsTable th:nth-child(7), .PaymentsTable td:nth-child(7) { width: 10%; } .PaymentsTable th:nth-child(8), .PaymentsTable td:nth-child(8) { width: 10%; } .CustomSequenceList ul li { margin-left: 2em; } .CustomSequenceList:first-child { position: relative; } .CustomSequenceList li { list-style-type: none; } .CustomSequenceList li > div { padding: 0.75em 0.5em; border-bottom: 3px solid white; } .CustomSequenceList li .actionIcon { width: 1.5em; } .CustomSequenceList .Name { width: 60%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; margin: 0 1em;} .CustomSequenceList .EditIconContainer { float: right; } .CustomSequenceList .StatusIcon { float: right; margin-right: 1em; margin-top:.1em} .CustomSequenceList .EditIcon { vertical-align: middle; } .CustomSequenceList .ui-state-highlight { height: 3em; line-height: 3em; border: 1px dashed #dddddd; margin-bottom: 3px; } .CustomSequenceList.sorting ul { min-height: 1em; } .CustomSequenceList .ui-sortable-helper { position: absolute; } .PaymentsTable th:nth-child(8), .PaymentsTable td:nth-child(8) { width: 10%; } /*Chat */ .clientChat { list-style-type:none; padding: 25px 80px 25px 25px; } .FormBlock .clientChat { padding:0 55px 0 1em; } .clientChat li { margin-bottom:15px; display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start; } .clientChat li:last-child { margin-bottom:0; } .clientChat li.new { display:none; } .clientChat .attribution { font-style:italic; font-size:95%; align-self:center;} .clientChat .userImage { width: 25px; border-radius: 25px; height: 25px; margin-right: 10px; flex-grow:0; flex-shrink:0; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; } .clientChat .message { flex-grow: 1; line-height:1.2em; display:flex;} .clientChat label { display:none; } .clientChat .message textarea { width: 100%; height: 2em; padding: 0.2em 0.3em; border-radius: 0.2em; border: none; line-height: 1.4em; overflow-y:hidden; } .clientChat .MessageText { font-size:95%; white-space:pre-wrap; word-wrap:break-word; overflow:hidden; text-overflow:ellipsis; align-self:center; } .clientChat .userImage > img, .clientChat .message img { max-width: 24px; max-height: 25px; border-radius:25px; } .clientChat .ChatSubmit { flex-grow:0; margin-left:0.2em; } .ItemDetailWrapper .presentationStatus { padding: 1em; margin: 0.5em 1em; display:flex; align-items: center; justify-content: center; } .ItemDetailWrapper .presentationStatus strong::after { content: ' - '; } /*jquery update*/ /*selectmenu*/ span.ui-selectmenu-button {padding:0; } .ui-widget.ui-selectmenu-button .ui-selectmenu-text{padding: 0.2em 2.1em 0.2em 0.5em; } /*datepicker*/ .ui-datepicker .ui-icon{top: 0; left: 0;} .ui-icon.ui-icon-closethick{margin-top:0; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span, .ui-button-icon.ui-icon { left: 50%; top: 50%; height: 16px; width: 16px;} .ui-datepicker .ui-icon.ui-icon-trash{top: 0; left: 0;} .closeButton.ui-button{padding: 0; } /*product add*/ .AddStockToOrderBtn .ui-button-icon.ui-icon{left: 0;} /*ui button icons*/ .ui-button .ui-button-icon{position: static;} .ui-selectmenu-icon.ui-icon.ui-icon-triangle-1-s{position: absolute; height: 16px; width: 16px; right: .5em; top: .5em;} /*EssentOne Document / sidebar subitems */ .DocumentSectionHeader { padding: 0.5em; margin-top: 1.5em; } .sidebarDocument.Action, .sidebarHistory.Action, .sidebarInvoices.Action, .sidebarTransactions.Action { padding-left: 2em; box-sizing: border-box; cursor: pointer; } .sidebarDocument::before, .subDocument.presentation .Action::before{width: 1.2em; height: 1.2em; margin-bottom: 0.3em; } .sidebarHistory.Action::before, .sidebarTransactions.Action::before, .merge.Action::before {width: 1.5em; height: 1.5em;margin-bottom: 0.1em; } .sidebarInvoices::before { width: 1.2em; height: 1.625em; margin-bottom: 0.1em; } .sidebarDocument::before, .sidebarHistory.Action::before, .subDocument.presentation .Action::before, .sidebarInvoices.Action::before, .sidebarTransactions.Action::before, .merge.Action.itemAction::before { content: " "; display: inline-block; margin-right: 0.5em; vertical-align: middle; background-size:contain; background-position:center; background-repeat:no-repeat; } /*Styles of detail form matching latest standard*/ .detailRow .TableDetailForm { position: relative; border: none; margin: 1.5em 0em; } .PropertyTable .detailRow .TableDetailForm { margin: 0em; } .GridTable .detailRow > td { padding: 0; } .detailRow .itemDetail .FormBlock .SectionHeader { padding: 0.75em 1em 0; } .detailRow .TableDetailForm.newDetail::after { left: 8%; } .PropertyTable .detailRow .TableDetailForm.newDetail::after { left: 2em; } .detailRow .TableDetailForm::after { left: 97% } /*Lock/Unlock other sections of the page except the detail form*/ #Form1.Lock { cursor: not-allowed; } #FormControls.Lock { pointer-events: none; } #FormControls.Lock .itemDetail { pointer-events: auto; cursor: auto; } /*Permission Groups table*/ .PermissionGroups td, .PermissionGroups th { width: 45% } .PermissionGroups td:nth-child(3), .PermissionGroups th:nth-child(3) { width: 5% } .PermissionGroups td:nth-child(4), .PermissionGroups th:nth-child(4) { width: 5% } .PermissionGroups .GroupPermissions td, .PermissionGroups .GroupPermissions th { width: 95% } .PermissionGroups .GroupEmployees td, .PermissionGroups .GroupEmployees th { width: 47.5% } .PermissionGroups .itemDetail td:last-child, .PermissionGroups .itemDetail thlast-child { width: 5% } .subHeader + .TableDetailForm, .TableDetailForm{ position: relative; top: 10px; margin-bottom: 1.5em; border: none; } .subHeader + .TableDetailForm::after { left: 90% } .subHeader + .TableDetailForm.PropertyDetail::after { left:95% } input.SearchIcon { background-position:97% 50%;background-repeat:no-repeat; background-size: 1.5em auto;} .systemIconSmall.Draggable { cursor: all-scroll; } /*selectmenu textbox combo*/ .textboxSelectMenu{display:flex} .textboxSelectMenu .ui-selectmenu-button{max-width: 7em;} .textboxSelectMenu .ui-widget.ui-selectmenu-button .ui-selectmenu-text{ padding:0.2em 1em 0.2em 0.5em } /* Order Classes Shipping Charge Calc */ .OrderClassShippingChargeCalc > .formCol { padding-top: 0em } input + label.hideText { overflow: hidden; width: 1.5em; } /* Status Block */ .StatusBlock .fieldBlock { position: relative; } .StatusBlock .fieldBlock > div { z-index: 2; } .StatusBlock .fieldBlock .progressLine { position: absolute; border-top-width: 3px; border-top-style: dotted; width: 100%; z-index: 0 !important; left: 0; right: 0; margin: 0 auto; top: 1.5em; } .StatusBlock .fieldBlock .progressLine div { position: absolute; top: -3px; border-top-width: 3px; border-top-style: solid; } @media only screen and (max-width: 750px) { .StatusBlock .fieldBlock .progressLine { top: 2em; } } /*Style for transparent buttons in tables. This should be used to replace jqueryui button widget calls*/ .tableButton { display: inline-block; position: relative; line-height: normal; cursor: pointer; vertical-align: middle; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: visible; } /*Multiselect dropdown box*/ .multiSelectDropdownBox { position: absolute; margin-top: 0.25em; padding: 0.25em 0.5em 0.5em 0.5em; border-radius: 0.5em; width: 190%; left: 0.5em; z-index: 1; } .multiSelectDropdownBox button { display: block; padding: 0em; } .filtersContainer .customerFinder .multiSelectDropdownBox .finderTag, .filtersContainer .finder .multiSelectDropdownBox .finderTag { height: 1.5em; } /* Customer Portal Login*/ .portalLogin .leftColZone, .portalLogin .rightColZone, .portalPasswordReset .leftColZone, .portalPasswordReset .rightColZone { display:none; } .portalLogin .ZoneBoxHolder, .portalPasswordReset .ZoneBoxHolder, .portalLogin .statusBanner + .ZoneBoxHolder { width:95%; max-width: 400px; margin: 10vh auto 10px; } .portalLogin .footerZone footer { text-align:center; padding:0.5em; } .portalLogin .footer, .portalPasswordReset .footer { text-align:right; } .portalLogin img.Logo { max-width: 200px; max-height: 200px; display: block; margin: 0 auto 1.5em auto; } @media only screen and (max-width:750px) { .portalLogin .footer, .portalPasswordReset .footer { padding: 0.3em 1em !important; } } /*dashboard*/ .OneClientPortal.customerDashboard .contentZone, .OneClientPortal.customerDashboard .rightColZone { max-width:655px; flex-grow:3.2; display:block; min-width:240px; flex-basis:310px;} .OneClientPortal div.summaryWidget .SectionHeader { margin-bottom: 0.5em; } .OneClientPortal.customerDashboard .dashboardHeader { min-height: 90px; margin-bottom: 1.5em; } .OneClientPortal.customerDashboard .dashboardHeader.timeSelector { display: flex; align-items:center; justify-content:flex-end; } .TotalOrdersDashboard .formCol, .TotalSalesDashboard .formCol, .AverageOrderValueDashboard .formCol, .SiteTotalOrdersDashboard .formCol, .SiteTotalSalesDashboard .formCol, .SiteAverageOrderValueDashboard .formCol { min-height: 280px; } .TopProductsDashboard .formCol, .TopRegionsDashboard .formCol { min-height: 455px; } .clientSales.formStats { display: flex; flex-direction: column; justify-content: flex-start; } .clientSales.formStats .change { justify-self:flex-end; margin-top:auto; margin-bottom:0 } .summaryWidget .clientSales.formStats .fieldBlock:first-child .Value{ font-size: 200%; } .summaryWidget .clientSales.formStats .fieldBlock:nth-child(2) .Value{ font-size: 150%; } .summaryWidget .clientSales.formStats .change .Value { font-size: 150%; } /*Site Manager*/ .portalSiteSummary .objectStats { width: 60%; } .portalSiteSummary .objectStats > span { width: 22%; } .portalSiteSummary .objectStats > span.Status { width:10%; } .portalSiteSummary .objectStats .statusBlock .count { font-size:180%; padding: 4px 4px 0 4px; } .portalSiteSummary .objectStats .statusBlock .count + span { height:1.6em; font-size:90%; line-height: 1em; } .portalSiteSummary .primaryInfo { width: 40%; } .portalSiteSummary .primaryInfo .infoLayout .title.objectIdentifier {font-size:120%; font-weight:600; width:95%; } .portalSiteSummary .primaryInfo .infoLayout .homeLink { font-size:120%; } .portalSiteSummary .infoLayout > div:nth-child(2) > span.homeLink { width:95%; } .portalSiteSummary .SiteLogo { text-align:center; } .portalSiteSummary .SiteLogo > img { max-height:70px; max-width:100%; } @media only screen and (max-width: 750px) { .portalSiteSummary .objectStats .statusBlock .count { font-size:120%; padding: 12px 4px 8px 4px; } .portalSiteSummary .objectStats .statusBlock .count + span { height:1.6em; font-size:70%; line-height: 1em; } .OneClientPortal.customerDashboard .contentZone, .OneClientPortal.customerDashboard .rightColZone { width:100%; } .OneClientPortal .formCol.formStats { min-height:auto; flex-direction:row; } } /*Portal HTTP errors*/ .httpStatusErr { position:absolute; top:0; bottom:0; left:0; right:0; } .httpStatusErr > div { background-color:white; color:black; max-width: 400px; width:95%; margin:10% auto; border-radius:0.2em; padding: 30px 15px 15px 15px; position:relative; } .httpStatusErr > div::before { content: ' '; display:block; height:70px; width:80px; background-size:cover; position:absolute; left: calc(50% - 40px); top:-37px; background-image: url(../Images/CRM/essent-logo-web.png); } .httpStatusErr > div > * { text-align:center; } /*Shippers*/ .Shippers th, .Shippers td { width: 47.5%; } .Shippers th:last-child, .Shippers td:last-child { width: 5%; } .Shippers input[type=checkbox] + label { margin-top: 1em; } /*Customer Groups*/ .CustomSequenceList li > .TableDetailForm { position: relative; cursor: default; } .CustomerGroups .CustomSequenceList li > .TableDetailForm:after { left: initial; right: 0.75em; } .CustomerGroups .CustomSequenceList li > .TableDetailForm.AddSubgroup:after { left: initial; right: 18.5em; } .CustomerGroups .EditIconContainer { width: 60px; margin-right: 0em; position: relative; } .CustomerGroups .EditIconContainer .roundToggleButton { width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; } .addButtonContainer { position: absolute; width: 0px; top: 0px; right: 65px; overflow: hidden; white-space: nowrap; transition: width 750ms; } .roundToggleButton.active + .addButtonContainer { width: 265px; } .SectionHeader .deleteConfirmation { height: 22px; margin-right: 0.5em; vertical-align: middle; } .CustomerGroups .subHeader + .TableDetailForm:after { left: initial; right: 2.5em; } .ListExpandToggle { padding: 0.5em 0em; } .ListExpandToggle button { font-size: 0.8em; padding: 0 0.25em; } .ListExpandToggle button:last-child, .ListExpandToggle.Expanded button:first-child { pointer-events: none; } .ListExpandToggle.Expanded button:last-child { pointer-events: initial; } .subHeader + .ListExpandToggle { margin-top:-1.5em; } .ShipVias .CustomSequenceList li > .TableDetailForm:after { left: initial; right: 0.5em; } @media only screen and (max-width:750px) { .CustomerGroups .CustomSequenceList li > .TableDetailForm.AddSubgroup:after { right: 21.5em; } } @media only screen and (max-width:650px) { .roundToggleButton.active + .addButtonContainer { width: 230px; } .CustomerGroups .CustomSequenceList li > .TableDetailForm.AddSubgroup:after { right: 19.5em; } } /*Commission Recipients*/ .CommissionRecipients th, .CommissionRecipients th { width: 47%; } .CommissionRecipients th:nth-child(3), .CommissionRecipients td:nth-child(3), .CommissionRecipients th:nth-child(4), .CommissionRecipients td:nth-child(4) { width: 3%; } .CommissionRecipients .detailRow .TableDetailForm::after { left: 5%; } /*Shipping Accounts*/ .ShippingAccounts th, .ShippingAccounts th { width: 29%; } .ShippingAccounts th:nth-child(4), .ShippingAccounts td:nth-child(4), .ShippingAccounts th:nth-child(5), .ShippingAccounts td:nth-child(5), .ShippingAccounts th:nth-child(6), .ShippingAccounts td:nth-child(6) { width: 4%; } .ShippingAccounts input[type=checkbox] + label { margin-top: 2em; } .ShippingAccounts .detailRow .TableDetailForm::after { left: initial; right: 0.5em; } /* PDF Print Preview */ .PrintPreview { display:none; } .PrintPreview .PrintControls { display: flex; padding: 1em 1% 1em; justify-content:space-between; } .PrintPreview .PrintControls .availLangList { display:none; } .PrintPreview .pdfGenerate { width: 98%; margin: 0 1% 0 1%; box-sizing: border-box;} .PrintPreview iframe { height:80vh; display:block; box-sizing:border-box; width:100%; } .PrintPreview .PanelFooter { padding-left:2%; padding-right:2%; } .documentBox{display:block; height: 2em; width: 100%; border: solid 1px; } @media only screen and (max-width:650px) { .PrintPreview iframe { height: 70vh; } } /*PDF / document generation lockscreens */ .pdfGenerate { position:relative; } .ReportLoadMessage, .pdfGenerate .LoadMessage { position:absolute; top:0; left:0; right: 0; bottom:0; font-size: 20pt; text-align:center; padding:2vh; overflow:hidden; } .ReportLoadMessage > span, .pdfGenerate .LoadMessage > span { display:block; text-align:center; } .PrintComplete { display:none; padding: 8%; height:85vh; } .PrintComplete .dialogContents {border: 1px solid; display:flex; padding:1em; align-items:center; justify-content:space-around; } .PrintComplete .dialogContents .followUpIcon { width: 20%; border-radius:50%; font-size: 400%; font-weight:600; text-align:center; width:1.5em; height:1.5em; line-height:1.5em; } .PrintComplete .dialogContents > div:last-child { display:flex; flex-direction:column; width:70%; } .PrintComplete .dialogContents > div:last-child input[type=text] { width:7em; } .PrintComplete .PanelFooter { padding-left:0; padding-right:0; } .hiddenTestFrame { z-index: -100; position: absolute; top: 0; left: -200px; } /*sidebar settings*/ .sidebarSettings .actionButton, .sidebarSettings .detailActions { padding: 0.3em 0; clear:both; } .sidebarSettings .detailActions::after { content: ' '; display:block; height:0; clear:both; } .sidebarSettings .PrintButton { width:100%; text-align:center; } .ShippingAccounts .detailRow .TableDetailForm::after { left: initial; right: 0.5em; } /*Control Panel Genders Table*/ #pnlGenders .GridTable th:first-child, #pnlGenders .GridTable td:first-child{ width:90%; } #pnlGenders .GridTable th:nth-child(2), #pnlGenders .GridTable td:nth-child(2){ width:5%; } #pnlGenders .GridTable th:nth-child(3), #pnlGenders .GridTable td:nth-child(3){ width:5%; } .SectionHeader .systemIcon { max-height: 15px; max-width: 15px; vertical-align: middle; padding-left: 1em; cursor: pointer; } /*Payment Detail*/ .PaymentVoidForm { display: flex; padding: 1em; justify-content: space-between; text-align: left; position: relative; } .ARPayment > .PaymentVoidForm { padding: 1em 6%; } .PaymentVoidForm > div { flex-basis: 33%; } .PaymentVoidForm > div:last-child { display: flex; align-items:flex-end; justify-content: flex-end; } .PaymentVoidForm .CheckButton { margin-left: 1em; } .PaymentVoidForm:after { bottom: 100%; right: 10%; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border: solid transparent; border-width: 10px; } .PaymentVoidForm.UnapplyPrepayment > div:first-child { flex-basis: 66%; } @media only screen and (max-width:800px) { .PaymentVoidForm { flex-direction: column; } .PaymentVoidForm > div { margin: 0.5em 0em; } } .ARPayment .PaymentApplicationControls { vertical-align: bottom; } .ARPayment .PaymentApplications th, .ARPayment .PaymentApplications td { width: 12.5%; } .ARPayment .PaymentApplications th:last-child, .ARPayment .PaymentApplications td:last-child { display: none; text-align: right; } .ARPayment .PaymentApplications td.NoResults, .ARPayment .PaymentApplications .ApplyRow td:last-child, .ARPayment .PaymentApplications .loadRow td:last-child { display: table-cell; text-align: center; } .ARPayment .PaymentApplications.Unapply th:last-child, .ARPayment .PaymentApplications.Unapply td:last-child { display: table-cell; } .ARPayment .detailRow td { padding: 1em 0em; } .ARPayment .AppliedTo .ApplyBalance { margin: 0.5em 0em; } .ARPayment .VoidButton { float: right; } .PaymentApplications .PaymentVoidForm:after { right: 10px; } .ARPayment .ApplyBalanceBlock { padding: 1em; } .ARPayment .AppliedTo .PostingSummary { padding: 1em; } .ARPayment .AppliedTo .NoticeContainer { margin-top: 0.5em; } .ARPayment .ApplyBalanceBlock .pagination { float:left; } .ARPayment .ApplyBalanceBlock .total { float:right; } .DepositHeaderSummary th, .DepositHeaderSummary td { width: 25%; } tr .InfoIcon { width: 24.5px; height: 20px; cursor: pointer; } .detailRow .NoticeContainer { padding: 1em; text-align: left; } .PaymentBalance .Highlight { font-weight: bold; } .CreditPaymentTable th {color:gray; padding-bottom:0.5em} .CreditPaymentTable .Date{width:11%;} .CreditPaymentTable .Type{width:11%;} .CreditPaymentTable .Number{width:7%;text-align:center} .CreditPaymentTable .Amount{width:11%} .CreditPaymentTable .Discount{width:11%} .CreditPaymentTable .Prepaid{width:11%} .CreditPaymentTable .Balance{width:11%} .CreditPaymentTable .Arrow{width:5%;text-align:center} .CreditPaymentTable .GridTable .Apply{width:15%;padding-right:1em} .CreditPaymentTable .GridTable th.Apply{width:15%;padding-right:1.5em} .CreditPaymentTable .Arrow img{cursor:pointer} .CreditPaymentTable .Arrow img.hold{cursor:default} .CreditPaymentTable td.Discount{position:relative} .CreditPaymentTable td.Discount img{position: absolute; right: .7em; top: .65em; cursor: pointer} .CreditPaymentTable th.Discount{padding-bottom: .3em; padding-right: .75em; cursor: pointer} .CreditPaymentTable th.Discount img{vertical-align: bottom} .CreditPaymentTable .Discount.deactivate img {-moz-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV";} .CreditPaymentTable .Discount input.hasTerms:disabled{background-color:#ffffff; text-align:left} /*General style for info popup*/ .PopupContainer { display: inline-block; vertical-align: middle; position: relative; } .PopupContainer .PopupTrigger { cursor: pointer; } .PopupContainer img.PopupTrigger { width: 20px; height: 20px; cursor: pointer; } .PopupContainer .Active + .Popup { position: absolute; display: block; } .PopupContainer .Popup { display: none; position: absolute; z-index: 100; padding: 0.75em; margin-top: 1em; right: -0.6em; width: 300px; } .PopupContainer .Popup::before { bottom: 100%; right: 8px; border: solid transparent; content: " "; position: absolute; border-width: 10px; } /*Input textboxes disabled by default, but editable with inline modal view*/ .LockedField { position: relative; display:block; } .LockedField .FieldEditIcon { position: absolute; right: 0.4em; top: 0.2em; cursor: pointer; width: 15px; height: 22px; } .LockedField.Unlocked .FieldEditIcon { display: none; } .LockedField > .cancelItem, .LockedField > .saveItem { position: absolute; top: 0.3em; display: none; } .LockedField.Unlocked > .cancelItem, .LockedField.Unlocked > .saveItem { display: block; } .LockedField > .cancelItem { right: 2.2em; } .LockedField > .saveItem { right: 0.1em; } /*Receive Payment*/ .NewPayment .nextButtonContainer { text-align: right; padding-top: 1em; } .NewPayment .FormSection { padding-top: 2.3em; } .NewPayment .FormSection > div.FormBlock:first-child { margin-top: 0em; } .NewPayment .CompleteCheck { height: 1.5em; float: right; display: none; } .NewPayment .BlockComplete .CompleteCheck { display: block; } .NewPayment .SectionHeader .ui-button.expandToggle { margin-left: 0.5em; } .NewPayment .StepCount { display: inline-block; width: 1.75em; text-align: center; border-radius: 1em; } .NewPayment .SummaryBlock .formSubsection { padding-top: 0em; } .NewPayment .threeColSection { margin-top: 0em; } .NewPayment .BlockSummary { display: inline-block; margin-left: 0.5em; font-weight: 600; } .CostCenterTypes .detailRow .NoticeContainer { background-color: transparent; padding: 1em 0em 0em 0em; } .FormBlock .FormLabel + .DisplayLabel:last-child{display:block;} .CostCenterTypes .detailRow .NoticeContainer { background-color: transparent; padding: 1em 0em 0em 0em; } .NewPayment .BlockSummary { display: inline-block; margin-left: 0.5em; font-weight: 600; } .flexWrapper { display:flex; } .flexWrapper.flexLeft { justify-content: flex-start; } .flexWrapper.flexRight{ justify-content: flex-end; } .flexWrapper.flexGrow { flex-grow: 1; } /*Badges*/ .Badge { border: 1px solid; padding: 0.2em 0.75em; line-height: 1.25em; font-size: 90%; font-weight: bold; user-select: none; } .BadgeWrapper { display:flex; justify-content:center; align-items: center; cursor:default; } /* Pricing Slide Table */ .SlideTable button.ui-button, .SlideTable .ui-button[disabled] { background-color: initial; border: none; vertical-align: initial; width: 100%; padding: 0; margin: 0; height: 100%; } .SlideTableColumns { overflow: hidden; white-space: nowrap; width: calc(95% - 55px); display: inline-block; float: left; } .LineItemDialog .SlideTableLegend td { line-height: 27px; white-space: normal; text-align: left; font-size: inherit; font-weight: inherit; max-width: 7em; cursor: initial; vertical-align: initial; user-select: none;} .LineItemDialog .SlideTableLegend { font-size: 0.75em; font-weight: bold; max-width: 5%; min-width: 5%; white-space: normal; float: left; } .PriceLevelDetail.LineItemDialog .SlideTableLegend { max-width: 5%; min-width: 5%; } .PrevColumnButton, .NextColumnButton { float: left; display: inline-flex; width: 18px; height: 18px; flex-wrap:nowrap; flex-direction: column; } .options .SlideTableColumns td, .options .SlideTableLegend td { vertical-align: top; } .LineItemDialog .SlideTableColumns th, .LineItemDialog .SlideTableColumns td { box-sizing:border-box; font-size: 0.75em; font-weight: initial; min-width: 64px; } .LineItemDialog .SlideTableColumns th { white-space: initial; padding: 0 0.25em; text-align: center; vertical-align: middle; } .SlideTableColumns tr { line-height: initial; } .SlideTableColumns > table { position: relative; } .LineItemDialog .MatrixTable td { cursor: initial; text-align: right; color: #0082c6; } .PriceTable .SlideTableColumns td { cursor: pointer; max-width:4.8em; min-width:4.8em; } .PriceTable .SlideTableColumns td div:first-child, .PriceTable .PriceLevelCost, .PriceTable .PriceLevelPrice { text-align: center; line-height: 28px; font-weight: bold; } .LineItemDialog .SlideTableColumns td > div { user-select: none; } .LineItemDialog .PriceTable .PriceLevelCost { font-weight: initial } .PriceLevelDetail .LineItemDialog .PriceTable .PriceLevelPrice { font-weight: 600; } .LineItemDialog .PriceTable .PriceLevelPrice { font-weight: 700; } .LineItemDialog .SlideTableLegend .MatrixColumnHeader td { line-height: initial; } .PriceLevelDetail .closeButton { height: 1.6em; width: 1.6em; align-self: center; cursor: pointer; } .PriceLevelDetail .SlideTableColumns .SlideTableColumn { width: 15% } .PriceLevelDetail .PriceTable .SlideTableColumns td, .PriceLevelDetail.LineItemDialog .SlideTableLegend td { font-size: 14px; } .PriceLevelDetail.LineItemDialog .Pricing .FormLabel { width: 5%; } .PriceLevelDetail.LineItemDialog .Pricing #selPricingType-button { width: 25% !important; } .PriceBreakTable img { cursor: pointer; } .PriceBreakTable { display: flex; } .PriceBreak.tailControl::after { content: " "; position: absolute; top: 18px; left: 68%; margin-left: -67%; border-width: 15px; border-style: solid; } /*Discount Codes*/ #tblDiscountCodes td:first-child { width:25%; } #tblDiscountCodes td:last-child { position:relative; } #tblDiscountCodes td:last-child img.EditIcon { float:right; } #tblDebitDisbursements td:first-child { width:80%; } #tblDebitDisbursements td:last-child { position:relative; } /* Cost Center Finder */ .CostCenterFinderRecord > div:first-child { float: left; width: 50% } .CostCenterFinderRecord > div:nth-child(2) { float: right; width: 50%; text-align: right; } /*About Header*/ .AboutHeader .widgetHeader { padding-bottom: 0px; padding-top: 3em; } .CheckNumberDetail{ width: auto; position: absolute; z-index: 1; border-right: 2px solid #ccc; padding: 0 1em;} .CheckNumberWrapper{ display: flex; } #divPaymentForm .EditIcon { width: 24.5px; height: 20px; cursor: pointer } #divPaymentForm div.checkNumberWrapper{ padding-right: 0; } .CheckLink { cursor:pointer; } .CheckLink:hover { text-decoration: underline; } .ViewMode .FullCardView { width: 2.5em; } /*Activities*/ .ActivityTable .editIcon { height: 1.5em; width: 1.5em;} .ActivityRecord { margin: 1em 0em; padding: 0.5em 0em; display: flex; align-items: center; } .ActivityRecord > div { box-sizing: border-box; } .ActivityRecord .Priority { padding: 0em 1em; text-align: center; } .ActivityRecord .Priority div { text-align: center; width: 5em; height: 2em; border-radius: 3px; line-height: 2em; display: inline-block; } .ActivityRecord .Info { flex-grow: 1; align-self: flex-start; width: 35%; } .ActivityRecord .Info > span { display: block; line-height: 1.25em; font-size: 1em; } .ActivityRecord .Info > h4 { font-size: 1.25em; } .ActivityRecord .EntityImage { text-align: center; width: 8%; align-self: stretch; padding: 0em 1em; } .ActivityRecord .EntityImage span { display: block; line-height: 1em; } .ActivityRecord .EntityImage img { max-height: 3.5em; width: 3.5em; } .ActivityRecord .Status { padding: 0em 0.5em; align-self: stretch; display:flex; align-items: center; } .ActivityRecord .Reminder { padding: 0em 0.5em; width: 4%; align-self: stretch; display: flex; align-items: center; } .ActivityRecord .Status img, .ActivityRecord .Reminder img { height: 1.5em; width: 1.5em; margin: 0px 5px; } .ActivityRecord .Progress { width: 13%; padding: 0px 5px; } .ActivityRecord .Progress > div { width: 100%; height: 1.5em; border-radius: 10px; } .ActivityRecord .Progress > div > div { height: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; margin-left: -1px; } .ActivityRecord .Progress .Complete { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .ActivityRecord .DueDate { width: 8%; padding: 0px 5px; } .ActivityRecord .Edit { width: 3%; padding-right: 1em; } @media only screen and (max-width: 1025px) { .fieldBlock.ActivityTable { padding: 0em; } .ActivityRecord { flex-flow: wrap; padding: 0.5em; } .ActivityRecord .Info { order: 1; width: 50%; } .ActivityRecord .Info > span:first-child { display: none; } .ActivityRecord .EntityImage { margin-bottom: 0.5em; } .ActivityRecord .AssignedToEmployee { order: 2; width: 16.66%; border: none; } .ActivityRecord .Customer { order: 3; width: 16.66%; border: none; } .ActivityRecord .Supplier { order: 4; width: 16.66%; border: none; } .ActivityRecord .Priority { order: 5; width: auto; padding: 0em; } .ActivityRecord .Status { order: 6; border: none; width: auto;} .ActivityRecord .Reminder { order: 7; border: none; width: auto; padding-left: 0em; } .ActivityRecord .Reminder img { margin-left: 0em; } .ActivityRecord .Progress { order: 8; width: auto; flex-grow: 2; } .ActivityRecord .DueDate { order: 9; width: auto; text-align: right; } .ActivityRecord .Edit { order: 10; display: none; } } /*Contacts*/ .contactImageInitials, .customerAcronym { display: inline-block; height: 75px; width: 75px; text-align: center; vertical-align: middle; line-height: 75px; border-radius: 50%; } /*Contact Merge*/ .ContactMerge .StatusBlock .fieldBlock { width: 800px; } .ContactMerge .StatusBlock .fieldBlock .progressLine { width: 60%; } .ContactMerge .twoColForm.formCol .SectionHeader { padding: 0em; } .ContactMerge .Confirmation .employeeFinder { max-width: 560px; margin: auto; box-sizing: border-box; } .ContactMerge .StatusBlock .fieldBlock span::after { content: "\00a0"; } .ContactMerge .StatusBlock .fieldBlock { justify-content: space-evenly; } .ContactMerge .StatusBlock .fieldBlock > div { flex: 0; flex-basis: 20%; } .ContactMerge .singleColForm.StatusBlock { padding-bottom: 0em; } /*purchase restrictions*/ #pnlPurchrestriction .SectionHeader::after { content: ' '; display: block; height: 0; clear: both; } #pnlPurchrestriction .SectionHeader { display: flex; align-items: center; } #pnlPurchrestriction .SectionHeader .ViewSwitchContainer {margin-left: 1em;} /*hide all except basic default PO behavior if purch restrictions are off*/ #pnlPurchrestriction.inactive .twoColForm.formCol:nth-child(2), #pnlPurchrestriction.inactive #divUpperPORules { display:none; transition: all ease 500ms; } #pnlPurchrestriction .twoColForm.formCol:nth-child(2), #pnlPurchrestriction #divUpperPORules { transition: all ease 500ms; } #pnlPurchrestriction.inactive div.formCol:nth-last-child(2) {padding-left:1em;} /*hide all except basic default PO behavior if purch restrictions are off and a notice is present*/ .withNotice #pnlPurchrestriction.inactive .twoColForm.formCol:nth-child(3), .withNotice #pnlPurchrestriction.inactive #divUpperPORules { display: none; transition: all ease 500ms; } .withNotice #pnlPurchrestriction .twoColForm.formCol:nth-child(3), .withNotice #pnlPurchrestriction #divUpperPORules { transition: all ease 500ms; } .withNotice #pnlPurchrestriction.inactive div.formCol:nth-last-child(3) {padding-left:1em;} .CheckLink:hover { text-decoration: underline; } .assignedOrdersFilters .ViewSwitchContainer{ display: flex; justify-content:space-between;} /* label with dropdown */ .fieldBlock.labelWithDropdown {padding: 0 0; min-height: 1.5em; display:flex; justify-content:space-between; } .fieldBlock.labelWithDropdown .ui-selectmenu-button { width:42% !important; margin-top: -.75em; } /* Contact Summary Card */ .labelFrame.ContactSummaryCard { display: flex; } .ContactSummaryCard label, .ContactSummaryCard .ContactName, .ContactSummaryCard .ContactTitle { display: block; line-height: 1.25em; } .ContactSummaryCard label { font-weight: bold; font-size: 90%; } .ContactSummaryCard .ContactName { font-weight: bold; } .ContactSummaryCard .deleteButton { position: absolute; right: 0.75em; bottom: 0.75em; } .ContactSummaryCard .finderButton { position: absolute; right: 0.75em; top: 0.75em; cursor: pointer; max-width: 20px; } .ContactSummaryCard .ContactSummaryInfo { display: flex; flex-direction: column; justify-content: center; } .SectionHeader .displayBadge {float: right;}