/* DOmedia Start Stylesheet | AjZ / 10.16 */ html,body {width:100%; height:100%; margin:0; padding:0; text-rendering:optimizeLegibility;} div,form,img,table,p,ul,hr,label,option,iframe {margin:0;padding:0;border:0;box-sizing:border-box;} p,fieldset,table,pre,label,ul,ol {padding-bottom:1.5em;} img {-moz-backface-visibility:hidden;} /* type */ a {outline:hidden;} a.noStyle {text-decoration:none!important;} .hBorder {border-bottom:1px dotted var(--border-color);} .normal {font-weight:normal; font-style:none;} strong, .bold {font-weight:bold;} em, .italic {font-style:italic;} .red, .req {color:var(--danger) !important;} .black {color:var(--text-black) !important;} .gray1, .disabled {color:var(--gray-400) !important;} .gray2 {color:var(--gray-500) !important;} .gray3 {color:var(--text-gray) !important;} .gray4 {color:var(--gray-800) !important;} .white {color:#FFF !important;} .green {color: var(--success)} .impBorder {color:var(--warning-dark);} .infoBorder {color:var(--info);} .shadow {text-shadow:1px 1px 0 var(--gray-400);} .shadowW {text-shadow:1px 1px 0 #FFF;} .noShadow {text-shadow:none;} sup, .sup {vertical-align:super; line-height:.75em;} sub, .sub {vertical-align:sub;} /* lists */ ul,ol {list-style-type:none; margin:0 0 0 .5em; line-height:1.5em;} ol {margin-left:-1em;} ol li {list-style:decimal outside;} /* List bullet: a 4px --secondary dot. A background-image, so the banner and alert bullets can replace it. */ ul li {padding:0 0 0 14px; background:transparent radial-gradient(circle 2px at center, var(--secondary) 1.5px, transparent 2px) 1px .6em / 4px 4px no-repeat;} ul ul {margin:.3em .75em; padding:0;} /* Nested-list bullet: a 2px square in a lighter --secondary. */ ul ul li {padding-left:13px; background:transparent linear-gradient(color-mix(in srgb, var(--secondary) 70%, white), color-mix(in srgb, var(--secondary) 70%, white)) 4px .6em / 2px 2px no-repeat;} p+ul {margin-top:-.5em;} ul.fa-ul li {background:none!important; padding-left:.25em;} ul.no-indent li { background:none!important; margin-left: 0; padding-left: 0; list-style: none; } /* forms */ label {float:left; width:auto;} label+label {margin-left:1em;} label+label.clear {margin-left:0;} /* RM#18521: Bootstrap form markup (.form-group) lays its labels out the Bootstrap way, as on the Vue pages, which do not load this file. The float above let a following panel paint over the labels. Its 1.5em bottom padding comes from the p/label/ul rule further up. */ .form-group label {float:none; padding-bottom:0;} .form-group label+label {margin-left:0;} .form-group input, .form-group select, .form-group textarea {float:none;} /* A field on the line below its label text sits 8px under the label's line, Bootstrap's label margin (.5rem), as on the Vue forms. A select2's own select is hidden, so the gap goes on the select2 box that follows it. */ label > br + input:not([type=hidden]):not([type=checkbox]):not([type=radio]), label > br + textarea, label > br + select:not(.select2-hidden-accessible), label > br + select.select2-hidden-accessible + .select2-container, label > br + textarea + div.cke {margin-top:8px;} /* CKEditor's box is a block, so the
after it is an empty 21px line; drop it when a field error follows so the error sits 4px under the editor like under any field. */ label > div.cke + br:has(+ span.error) {display:none;} /* Stacked radio / checkbox options (label.clear, one per line) inside a field's label are 24px rows (Bootstrap's stacked .form-check), not spaced like whole fields; the field's own label still spaces the group from the next field. Side-by-side options don't carry .clear and keep their own spacing classes. */ label > label.clear:has(> input[type=radio]:first-child), label > label.clear:has(> input[type=checkbox]:first-child) {padding-bottom:3px; margin-bottom:0;} .stack {float:left;} .stack label {clear:both; margin:0 1.5em 0 0!important; padding-bottom:.5em;} /* Fields' corners match the text inputs and buttons (6px, the site-wide $border-radius). */ textarea,select {background:white; appearance:none;border-radius:6px;} .select2-container--default .select2-selection--multiple {border-radius:6px;} textarea {height:auto;min-height:200px;padding:.6em .5em!important;box-sizing:border-box;display:inline;} /* select */ select { min-width:300px; height:2.5em!important; padding:.4em 3px!important; box-sizing:border-box; text-transform:none; border:none; display:inline-block; float:left; } select option {line-height:1.5em; padding:.4em 3px; color:var(--text-gray);font-weight: 400;} option:checked {border:0; outline:hidden; text-shadow:none;} @-moz-document url-prefix() {/* firefox fix */ .select2-container--focus,select:-moz-focusring,select::-moz-focus-inner { color:transparent!important; border:0!important; } } /* other input */ #autocomplete,input[type="color"],input[type="date"],input[type="datetime-local"],input[type="email"],input[type="month"],input[type="number"],input[type="password"],input[type="range"],input[type="search"],input[type="tel"],input[type="text"],input[type="time"],input[type="url"],input[type="week"] { width:300px; /*height:2.5em!important;*/ padding:8px 15px !important; box-sizing:border-box; } input[type="range"] {padding:0!important; border:0!important;} input[type="range"]::-moz-focus-outer {border:0;}/* firefox fix */ input[type="checkbox"],input[type="file"],input[type="image"],input[type="radio"],input[type="reset"],input[type="submit"] { background:white; height:auto; border:none; box-sizing:border-box; } input[type="file"] {min-width:auto!important;width:auto!important;height:auto!important;border:0!important;padding:.25em .5em .25em 0!important;box-shadow:none;background:none;box-sizing:border-box;} input[type="hidden"] {display:none;} input[type="image"] {background:transparent; border:none; padding:0;} [disabled],.disabled span:after,.disabled .select2-container--default .select2-selection--single .select2-selection__rendered {color:var(--gray-400)!important; text-shadow:none!important;-webkit-opacity:1;} /* RM#18521: submit inputs too (input.button / type=submit), which two export dialogs styled for themselves. */ button.disabled, button:disabled, input.button:disabled, input[type=submit]:disabled { opacity: 0.65; color: #ffffff !important; } select[disabled='disabled'] {margin-right:0;} select[disabled='disabled']::-ms-value {color:var(--gray-400)!important;}/* disabled IE */ .disabled:hover,.disabled:hover div {cursor:auto;} input[type="search"] {-webkit-appearance:textfield!important;appearance:textfield!important;} /* checkbox / radio */ p label {width:auto!important;} input[type=checkbox],input[type=radio] {margin-right:.5em; cursor:pointer;} /* A checkbox or radio sits on the text baseline, so its 13px box rose ~4px above the capital letters of the 11-14px text beside it and looked higher than its label. Lower it so its middle meets the middle of the capitals (Open Sans capitals are 0.714em tall): about -2.2px beside 12px text, -1.5px beside 14px. Bootstrap's .form-check-input and .custom-control-input are absolutely positioned, so they are unaffected; a class that sets vertical-align wins. */ input[type=checkbox],input[type=radio] {vertical-align:calc(.357em - 6.5px);} /* A field's help pop-up (the form field tags' toolTip): a Light circle-question icon in the muted grey, centred on its heading's line, with the help text in its title. It was a raised red "?" at the heading's full 14px. */ /* RM#18521: help icon + tooltip. The icon is util:help (JSP) and FieldHelpInfo.vue (Vue); the JSP tooltip is js/domedia/DoHelp.js, the Vue one is the b-tooltip block in conquerorVue.scss - keep the two cards matching. */ .do-help {position:relative; display:inline-block; margin-left:3px; vertical-align:4px; color:var(--primary); font-size:12px; font-weight:400; line-height:1; cursor:default;} .do-help:hover {color:var(--primary-light);} a.do-help {cursor:pointer;} /* a help icon that also opens something, e.g. the DO Image lightbox */ .do-help:focus {outline:none;} .do-help:focus-visible {outline:2px solid var(--primary); outline-offset:2px; border-radius:50%;} .do-help::after {content:""; position:absolute; inset:-6px;} /* 12px to look at, 24px to hover or tap */ .do-help--inline {margin-left:0; vertical-align:baseline; font-size:inherit;} /* an icon that IS the content, e.g. a table cell image preview */ body .ui-tooltip.do-help-tip {--tip-border:rgba(0,0,0,.175); max-width:320px; padding:8px 12px; border:1px solid var(--tip-border); border-radius:6px; background:#fff; color:var(--text-color); box-shadow:0 .5rem 1rem rgba(0,0,0,.15); font-family:inherit; font-size:13px; font-weight:400; line-height:1.45; text-align:left; z-index:10000000;} body .ui-tooltip.do-help-tip:has(.do-help-tip__image) {max-width:none; padding:4px;} /* Help text is plain text (DoHelp.js sets it as text); a line break in a message ("\n") shows as one. */ body .ui-tooltip.do-help-tip {white-space:pre-line;} .do-help-tip__heading {display:block; font-weight:600; margin-bottom:2px;} .do-help-tip__image {display:block; width:260px; height:auto; border:1px solid var(--gray-300); border-radius:4px;} /* the border: a white image still reads as an image */ /* the arrow: ::before is the outline, ::after the fill; DoHelp.js sets --arrow-x as it places the bubble */ body .ui-tooltip.do-help-tip::before, body .ui-tooltip.do-help-tip::after {content:""; position:absolute; left:var(--arrow-x, 50%); width:0; height:0; margin-left:-6px; border:6px solid transparent;} body .ui-tooltip.do-help-tip::before {top:100%; border-top-color:var(--tip-border);} body .ui-tooltip.do-help-tip::after {top:calc(100% - 1px); border-top-color:#fff;} body .ui-tooltip.do-help-tip.do-help-tip--below::before {top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--tip-border);} body .ui-tooltip.do-help-tip.do-help-tip--below::after {top:auto; bottom:calc(100% - 1px); border-top-color:transparent; border-bottom-color:#fff;} .FAinput input[type=checkbox],.FAinput input[type=radio] {display:none;} .FAinput input[type=checkbox]+label,.FAinput input[type=radio]+label {width:auto;display:inline-block;margin:0 1em 0 0;min-height:1.4em;white-space:nowrap;} .FAinput input[type=checkbox]+label:before,.FAinput input[type=checkbox]+label:disabled,.FAinput input[type=radio]+label:before,.FAinput input[type=radio]+label:disabled {font-family:"Font Awesome 7 Pro"; font-weight:300;display:inline-block;letter-spacing:5px;} input+label {cursor:pointer;} input:disabled+label {cursor:default;} /* form sizes */ label.small,label.med,label.large {box-sizing:border-box; width:75px!important;} label.med {width:150px!important;} label.large {width:49%!important;} .small input,.med input,.large input {width:100%!important;} /* multi-select */ #multi {float:left; width:600px; margin-right:1.5em;} #multi p { width:100%; height:auto; max-height:142px; overflow:auto; background:#FFF; margin:.1em 1.5em 1.5em 0; padding:1px 0 0; float:left; clear:both; box-sizing:border-box; } #multi label {margin:0; padding:0 0 0 2px; line-height:1.4em;} #multi p label {clear:both; margin:0; padding:2px 2px 1px 2px;} /* 2-sided select */ .tsmsselect {float:left; margin-right:1em;} /* its first box (the filter, or the list when there is none) sits 8px under the Available / Selected line, like a field under its label */ .tsmsselect > input:not([type=hidden]):first-child, .tsmsselect > select:first-child {margin-top:8px;} .tsmsselect select {width:100%; height:160px!important; box-sizing:border-box;} .tsmsselect select option {height:1.9em;} .tsmsoptions {float:left; display:inline; padding:calc(1.5em + 8px) 0 1.5em;} /* top: the Available text line + the 8px above the first box */ .tsmsselect,.tsmsoptions {width:36%; margin:0 0 1.5em 0; float:left; text-decoration:none; box-sizing:border-box;} .tsmsoptions {width:24%; margin:0 2%;} .tsmsoptions p {padding-bottom:.5em;} .tsmsoptions .button {width:100%; font-size:15px; box-sizing:border-box;} .tsmsoptions p.RemoveOne a.button:before, .tsmsoptions p.RemoveOne button:before, .tsmsoptions p.RemoveAll a.button:before, .tsmsoptions p.RemoveAll button:before, .tsmsoptions p.AddOne a.button:after, .tsmsoptions p.AddOne button:after, .tsmsoptions p.AddAll a.button:after, .tsmsoptions p.AddAll button:after, .tsmsoptions p.AddAllPreferred a.button:after, .tsmsoptions p.AddAllPreferred button:after { /* 400 = Regular: a caret beside a button label, like every other labelled-button icon (see the `.btn > i.fa-light` rule above and components/util/FontAwesomeIcon.js). */ font-family:"Font Awesome 7 Pro"; font-weight:400; font-size:14px; } .tsmsoptions p.RemoveOne a.button:before, .tsmsoptions p.RemoveOne button:before { content:'\F104\ '; } .tsmsoptions p.RemoveAll a.button:before, .tsmsoptions p.RemoveAll button:before { content: '\F100\ '; } .tsmsoptions p.AddOne a.button:after, .tsmsoptions p.AddOne button:after { content:' \F105'; } .tsmsoptions p.AddAll a.button:after, .tsmsoptions p.AddAll button:after, .tsmsoptions p.AddAllPreferred a.button:after, .tsmsoptions p.AddAllPreferred button:after { content:' \F101'; } .tsmsoptions a.button:before,.tsmsoptions a.button:after {color:rgba(255,255,255,.75);} /* filterable checkbox lists (field:checkboxlist filterable="true", and Search Assets' COMMB Markets lists): a Filter Options box sitting flush on a scrolling list, sharing the fields' 6px corners as one box. Filtering and the checked-row highlight are in master.js. */ .filterable-checkboxlist { display: flex; flex-flow: column nowrap; height: 300px; width: 317px; padding-top: 8px; /* matches the rows' 8px bottom margin, so the first row isn't flush on the filter box */ overflow-y: scroll; border: 1px solid var(--border-color); border-radius: 0 0 6px 6px; } .filterable-checkboxlist--filter { width: 317px !important; margin-right: 0; border-radius: 6px 6px 0 0; } /* 8px under the list's heading, like a field under its label */ .filterable-checkboxlist--header + .filterable-checkboxlist--filter { margin-top: 8px; } .filterable-checkboxlist--header { display: flex; flex-flow: nowrap; justify-content: space-between; font-weight: 600; } .filterable-checkboxlist label { padding-bottom: 0; padding-left: 1em; font-weight: normal; } .filterable-checkboxlist label + label { margin-left: 0; } .filterable-checkboxlist label.highlight { background-color: var(--gray-300); } /* tables */ table { width:100%; font-size:inherit; margin-bottom:1em; background:#FFF; } table img {margin:2px 0;} tr,td {vertical-align:top; white-space:normal;} td,th {border-right:1px solid var(--gray-300); padding:7px 9px;} td>ul {margin-top:1em;} th {color:#FFF;} #investmentSummaryTypeSelect {color:#FFF; background-color: var(--link-color)} th,tfoot td {border-top:1px solid var(--gray-300); border-bottom:1px solid var(--gray-300); font-weight:bold; white-space:nowrap; line-height:2em; text-shadow:none;} th a,th a:link,th a:visited,th a:active {color:rgba(255,255,255,0.75);} th a:hover {color:rgba(255,255,255,1.0);} /* table specific */ tbody tr:nth-child(odd),table.noShade tbody tr, table.dataTable tr.odd {background-color:#FFF!important;} .shaded,tr.shaded,table.tablesorter tbody tr.even td,tbody tr:nth-child(even), table.dataTable tr.even {background-color:var(--gray-fill)!important;} /*table.noShade,table.noShade td {border:none!important;}*//* not sure if I want this */ table.noShade tbody tr {background-color:#FFF!important;} .noBorder,.noBorder td {border:none!important; background:none;} .topLine,tr.topLine {border-top:1px solid var(--gray-300);} .bothLines {border-top:1px solid var(--gray-300); border-bottom:1px solid var(--gray-300);} .botLine {border-bottom:1px solid var(--gray-300);} .force1-4 {width:25%;} .dropTable {margin:0; border-top:1px solid var(--gray-300); border-bottom:1px solid var(--gray-300); padding:1em;} .dropTable table {margin:0;} table.padB td {padding:.25em 5px;} table label {padding:0;} /* scrolling table */ #scrollTable {margin:0 0 .5em -1px; overflow:visible; table-layout:auto;} #scrollTable td {white-space:nowrap;} #scrollTable input {margin:0;} #noScroll1 {float:left; clear:both; width:auto;} #scroll2 {width:auto; margin:0 0 1.5em 0; overflow-x:scroll; white-space:nowrap;} /* sorting table */ table.dataTable thead th { position: relative; background-image: none !important; /* Remove the DataTables bootstrap integration styling */ padding-right: 20px; } table.dataTable thead th.sorting:after, table.dataTable thead th.sorting_asc:after, table.dataTable thead th.sorting_desc:after { position: absolute; top: 6px; right: 8px; display: block; /* Solid, not Light: the sort carets are filled triangles and the meaning IS the fill. The Light \f0dc/\f0dd/\f0de are outline triangles -- on a 13px header at 0.8em that is a ~0.65px stroke. */ font-family:"Font Awesome 7 Pro"!important; font-weight:900!important; } table.dataTable thead th.sorting:after { content: "\f0dc"; /* #ddd was ~1.25:1 on white -- below any contrast floor for a control that tells you the column is sortable. #8f8f8f clears 3:1 while staying visibly quieter than the active asc/desc caret. */ color: var(--gray-600); font-size: 0.8em; padding-top: 0.12em; } table.dataTable thead th.sorting_asc:after { content: "\f0de"; } table.dataTable thead th.sorting_desc:after { content: "\f0dd"; } div.dataTables_scrollBody table.dataTable thead th.sorting:after, div.dataTables_scrollBody table.dataTable thead th.sorting_asc:after, div.dataTables_scrollBody table.dataTable thead th.sorting_desc:after { content: ""; } /* total table */ .totalTable tfoot {background-color:#FFF!important; border-top:2px solid var(--gray-300);} /* data table overrides */ table.dataTable {table-layout:auto;} table.dataTable thead th,table.dataTable tfoot th {text-align:left;} table.dataTable thead th {border-bottom:var(--gray-300);} table.dataTable tfoot th {border-top:var(--gray-300);} .dataTables_length select {width:auto!important;} .dataTables_filter {float:right; clear:right;} .dataTables_length select,.dataTables_filter label {margin-right:0!important;} .dataTables_length label,.dataTables_filter label {margin-right:0!important; padding-bottom:0;} .dataTables_length label,.dataTables_length label select,.dataTables_length label select option,.dataTables_filter input {max-width: 150px; min-width: 150px;} .dataTables_info {display:block; clear:both!important; margin-top:.5em;} /* RM#18521: the table starts below the floated "Show entries" / search controls. This is DataTables' own default (jquery.dataTables.min.css, which no layout loads); without it a table narrow enough to fit beside the floated label sat next to it, as in the full-width Rate Insights Details popup. */ table.dataTable {clear:both;} /* data table paginate */ .dataTables_paginate {margin:-1.7em 0 1.5em 0; float:right; text-shadow:1px 1px 1px #FFF;} .dataTables_paginate a {margin:0; padding:0 5px; cursor:pointer;} .dataTables_paginate a:hover {text-decoration:none;} a.paginate_button:hover,a.current {margin:0;} a.paginate_button,a.previous,a.previous:hover,a.next,a.next:hover {border:1px solid transparent;} .previous:before,.next:after {text-decoration:none!important;} /* Angles (\f104/\f105), not carets -- same call as the pagination pair in start.css, which this overrides. A stroke-drawn glyph survives Light; the caret family's Light face is a hollow outline. */ .dataTables_paginate .previous:before,.dataTables_paginate .next:after {font-family:"Font Awesome 7 Pro"!important; font-weight:300!important;content:'\f104\ ';margin:0;} .dataTables_paginate .next:after {content:' \f105';} .dataTables_paginate .previous:hover,.dataTables_paginate .next:hover {text-decoration:underline;} .dataTables_paginate .previous:hover,.dataTables_paginate .next:hover,.dataTables_paginate .disabled:hover {border:1px solid transparent!important;} .dataTables_paginate a.disabled,.dataTables_paginate a.disabled:hover {background:none!important; border:none!important; text-decoration:none;} .dataTables_paginate .previous:before,.dataTables_paginate .next:after {} /* building */ .BGvar(--gray-900) {background-color:var(--gray-900);} .BGwhite {background-color:white;} .B0 {border:none!important;} .BT0 {border-top:none;} .BR0 {border-right:none;} .BB0 {border-bottom:none;} .BL0 {border-left:none;} .center {width:100%!important; min-width:auto;} .clearFloat {clear:both; height:0; font-size:1px; line-height:0;} .clear {clear:both!important;} .H50 {height:50px;} .H100 {height:100px;} .H200 {height:200px;} .H300 {height:300px;} .H400 {height:400px;} .H500 {height:500px;} .hide,.mobileShow,.printShow {display:none;} .left {float:left;} img.left {margin:0 1.5em 1em 0;} .LH1 {line-height:1em;} .LH15 {line-height:1.5em;} .LH2 {line-height:2em;} .LH25 {line-height:2.5em;} .LH-auto {line-height:auto;} .list {clear:both;} .list,.list input,.list textarea,.list select {margin-top:-.5em;} .M0 {margin:0!important;} .M1 {margin:1em!important;} .MT5 {margin-top:.5em;} .MT0 {margin-top:0!important;} .MT1 {margin-top:1em;} /* the +/- buttons floated beside a label's field (Add Campaign / Client / Creative Category): centred on the field now that it sits 8px under its label line */ a.right.MT1.PT5 {margin-top:28px;} .MT2 {margin-top:2em;} .MT3 {margin-top:3em;} .MT10 {margin-top:10em!important;} .MT-5 {margin-top:-.5em;} .MT-1 {margin-top:-1em;} .MT-2 {margin-top:-2em;} .MR5 {margin-right:.5em;} .MR0 {margin-right:0!important;} .MR1 {margin-right:1em;} .MR2 {margin-right:2em;} .MR3 {margin-right:3em;} .MR-5 {margin-right:-.5em;} .MR-1 {margin-right:-1em;} .MR-2 {margin-right:-2em;} .MB5 {margin-bottom:.5em;} .MB0 {margin-bottom:0!important;} .MB1 {margin-bottom:1em;} .MB2 {margin-bottom:2em;} .MB3 {margin-bottom:3em;} .MB-5 {margin-bottom:-.5em;} .MB-1 {margin-bottom:-1em;} .MB-2 {margin-bottom:-2em;} .ML5 {margin-left:.5em;} .ML0 {margin-left:0!important;} .ML1 {margin-left:1em;} .ML2 {margin-left:2em;} .ML3 {margin-left:3em;} .ML4 {margin-left:4em;} .ML-5 {margin-left:-.5em;} .ML-1 {margin-left:-1em;} .ML-2 {margin-left:-2em;} .noClear {clear:none!important;} .noShadowB {box-shadow:none!important;} .noWrap {white-space:nowrap!important; overflow:visible;} /* Redmine #18441: Prisma market codes carry a doubled space ("NY NY") that HTML would otherwise collapse. .preserveSpaces keeps the runs and still wraps; .preserveSpacesNoWrap keeps them on one line, for text in drop lists, which are nowrap on purpose and must keep their shape. Both need !important because this sheet loads before layout.css. .preserveSpacesOptions is a marker put on a select2 control or a Handsontable listbox so the rules below reach only that widget; the select2 closed box also needs .select2-selection--single to out-specify select2.min.css, which loads later. vue-select is handled in the components instead, by slots. */ .preserveSpaces {white-space:pre-wrap!important;} .preserveSpacesNoWrap {white-space:pre!important;} .preserveSpacesOptions .select2-results__option, .select2-container.preserveSpacesOptions .select2-selection--single .select2-selection__rendered, .handsontable.listbox.preserveSpacesOptions td {white-space:pre;} .P0 {padding:0!important;} .P1 {padding:1em!important;} .PT0 {padding-top:0;} .PT1 {padding-top:1em;} .PT2 {padding-top:2em;} .PT3 {padding-top:3em;} .PT5 {padding-top:.5em;} .PR0 {padding-right:0;} .PR5 {padding-right:.5em;} .PR1 {padding-right:1em;} .PR2 {padding-right:2em;} .PR3 {padding-right:3em;} .PB0 {padding-bottom:0;} .PB5 {padding-bottom:.5em;} .PB1 {padding-bottom:1em;} .PB15 {padding-bottom:1.5em;} .PB2 {padding-bottom:2em;} .PB3 {padding-bottom:3em;} .PB5 {padding-bottom:.5em;} .PL0 {padding-left:0;} .PL25 {padding-left: 0.25em;} .PL5 {padding-left:.5em;} .PL1 {padding-left:1em;} .PL15 {padding-left:1.5em;} .PL2 {padding-left:2em;} .PL3 {padding-left:3em;} .PL4 {padding-left:4em;} .PL6 {padding-left:6em;} .pushUp {clear:both; display:block; margin:-1.5em 0 1.5em 0;} .right {float:right;} img.right {margin:0 0 1em 1.5em;} .round {border-radius:10px;} .shadowB {box-shadow:1px 1px 0 var(--gray-400);} .shadowBW {box-shadow:1px 1px 0 #FFF;} .show {display:block;} .spacer {padding:0 .6em;} .TAC {text-align:center;} .TAL {text-align:left;} .TAR {text-align:right;} .TGB {text-shadow:0 0 5px var(--gray-400),0 0 5px var(--gray-400),0 0 5px var(--gray-400),0 0 5px var(--gray-400);} .TGW {text-shadow:0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF;} .TTU {text-transform:uppercase;} .W50 {width:50px;} .W80P {width:80%;} .W100 {width:100px;} .W100P {width:100%!important;} .W200 {width:200px;} .W300 {width:300px;} .W400 {width:400px;} .W500 {width:500px;} .WA {width:auto!important;} .WP120, input.WP120[type="text"], input.WP120[type="password"] {width: 120%;} .WP100, input.WP100[type="text"], input.WP100[type="password"] {width: 100%;} .WP95, input.WP95[type="text"], input.WP95[type="password"] {width: 95%;} .WP85, input.WP85[type="text"], input.WP85[type="password"] {width: 85%;} .WP75, input.WP75[type="text"], input.WP75[type="password"] {width: 75%;} .WP66, input.WP66[type="text"], input.WP66[type="password"] {width: 66.66%;} .WP50, input.WP50[type="text"], input.WP50[type="password"] {width: 50%;} .WP33, input.WP33[type="text"], input.WP33[type="password"] {width: 33.33%;} .WP22, input.WP22[type="text"], input.WP22[type="password"] {width: 22.22%;} /* content */ hr {height:1px; margin-bottom:1em; clear:left; border:none;} /* layouts */ .boxWrap,.colWrap {width:100%; float:left; clear:both; text-shadow:none;} .colWrap>div>ul {padding-bottom:0!important;} .boxWrap a,.col2,.col3,.col4,.col5 {width:100%; margin:0 2% 2.15% 0; float:left; display:block; text-decoration:none; box-sizing:border-box;} .boxWrap div,.boxWrap a h1,.boxWrap a h2,.boxWrap a h3,.boxWrap a h4,.boxWrap a h5,.boxWrap a h6 {color:#FFF!important;} .boxWrap img {opacity:0.5; filter:alpha(opacity=50);} .boxWrap div:hover img {opacity:1; filter:alpha(opacity=100);} .box2 a,.col2 {width:48.99%;} .box3 a,.col3 {width:32%;} .box4 a,.col4 {width:23.495%;} .box5 a,.col5 {width:18.40%;} .box2 a:nth-of-type(even),.box3 a:nth-of-type(3n+0),.box4 a:nth-of-type(4n+0),.box5 a:nth-of-type(5n+0),.col2:nth-of-type(even),.col3:nth-of-type(3n+0),.col4:nth-of-type(4n+0),.col5:nth-of-type(5n+0) {margin-right:0;} .box2 a:nth-of-type(2n+1),.box3 a:nth-of-type(3n+1),.box4 a:nth-of-type(4n+1),.box5 a:nth-of-type(5n+1),.col2:nth-of-type(2n+1),.col3:nth-of-type(3n+1),.col4:nth-of-type(4n+1),.col5:nth-of-type(5n+1) {clear:both;} .boxWrap div {width:auto; min-height:130px; height:auto; padding:20px 16px 0 16px; line-height:1.5em;} .boxWrap h1 {font-size:45px;} .col23,.col34,.col45 {width:66%; float:left; margin-bottom:2.15%;} .col34 {width:74.5%;} .col45 {width:79.6%;} div.col23+div.col3,div.col34+div.col4,div.col45+div.col5 {margin:0 0 2.15% 2%;} .captionL,.captionR {float:left; margin:0 1.5em .5em 0; padding:1.5em 1.5em 0 1.5em; background:#FFF; border:1px solid var(--gray-900);} .captionR {float:right; margin:0 0 .5em 1.5em;} .more {width:100%; display:inline-block; border:1px solid var(--gray-900); border-radius:10px; margin-bottom:1.5em; padding:1em 1.25em 0 1.25em; text-shadow:1px 1px 0 #FFF;} /* messages / password strength */ .message,.testResult { width:100%; margin-bottom:1em; padding:.5em; font-weight:bold; float:left; clear:both; border-radius:6px; line-height:1.5em; } #doAjaxWrapper:empty {margin-bottom: 0; padding: 0;} .message img {margin-right:.5em;} /* The banner icon (tags/util/results.tagx) had only the   after it, 4px from the text. */ .message > i:first-child {margin-right:4px;} .message ul {font-weight:normal; margin-bottom:0; padding-bottom:0;} .message ul li {background:transparent url('../images/iface/ballC.gif') 1px .6em no-repeat;} .confirm,.strongPass {color:var(--success); border:1px solid var(--success); background-color:color-mix(in srgb, var(--success) 20%, transparent);} .error,.shortPass,.badPass {color:var(--danger); border:1px solid var(--danger); background-color:var(--danger-tint);} .error ul li {background-image:url('../images/iface/ballE.gif');} /* Field error bars match the Vue field errors (Layout.scss .error): 8px 16px inside (the 1px transparent border counts towards it), 21px line, 6px corners, 4px under the field. */ span.error {display:block; width:100%!important; margin:4px 0 0; padding:7px 15px; clear:both!important; line-height:1.5; border-radius:6px; font-weight:600; box-sizing:border-box!important;} .important,.goodPass {color:var(--warning-dark); border:1px solid var(--warning-dark); background-color:color-mix(in srgb, var(--warning) 15%, transparent);} .important ul li {background-image:url('../images/iface/ballI.gif');} .info {color:var(--info); border:1px solid var(--info); background-color:color-mix(in srgb, var(--info) 5%, transparent);} .info ul li {background-image:url('../images/iface/ballB.gif');} /* Page banners (tags/util/results.tagx) and field error bars (span.error, form:errors) keep their tinted fill but drop the dark outline; transparent rather than none so they keep their size. The password meter shares these colour classes and is unchanged. */ .message.confirm, .message.error, .message.info, .message.important, span.error {border-color:transparent;} /* ...and use the same colours as the Vue banners (Bootstrap .alert-success/-info/-warning/-danger, re-skinned to the app palette in frontend/src/styles/_overrides.scss), not the legacy #1F9D2B / #03C / #CFA214 / #C00. */ .message.confirm {color:var(--success); background-color:var(--success-light);} .message.info {color:color-mix(in srgb, var(--info), black 50%); background-color:color-mix(in srgb, var(--info) 20%, white);} /* Warning: dark amber text and icon, 4.9:1 on the fill (the palette yellow #FDA700 is 1.8:1). Same as Vue .alert-warning. */ .message.important {color:var(--warning-dark); background-color:var(--warning-light);} .message.error, span.error {color:var(--danger); background-color:var(--danger-light);} /* Semi-bold headline like the Vue banner (.alert span, 600) instead of .message's bold (700); lists stay normal. */ .message.confirm, .message.error, .message.info, .message.important {font-weight:600;} /* Banner lists: ordinary bullets (drawn in the text colour, so they always match it) instead of the ball*.gif images, and the text lined up under the headline text: the fixed-width (fa-fw) fa-lg icon plus the 8px gap. */ div.message ul {list-style:disc; margin:4px 0 0; padding-left:calc(1.25em + 12px);} div.message ul li {background-image:none; padding-left:0;} /* Hand-written banners that have no icon of their own (about 40 JSPs) get the same Solid icon as the template ones, drawn in a left gutter so it sits beside whatever the banner holds. A banner that opens with an icon, directly or in its first child div, keeps it. */ div.message:is(.confirm, .error, .info, .important):not(:has(> i:first-child, > div:first-child > i:first-child)) {position:relative; padding-left:38px;} div.message:is(.confirm, .error, .info, .important):not(:has(> i:first-child, > div:first-child > i:first-child))::before {position:absolute; left:8px; top:7px; width:22px; font-family:"Font Awesome 7 Pro"; font-weight:900; font-size:17.5px; line-height:21px; text-align:center;} div.message.confirm:not(:has(> i:first-child, > div:first-child > i:first-child))::before {content:"\f00c";} div.message.error:not(:has(> i:first-child, > div:first-child > i:first-child))::before {content:"\f00d";} div.message.info:not(:has(> i:first-child, > div:first-child > i:first-child))::before {content:"\f05a";} div.message.important:not(:has(> i:first-child, > div:first-child > i:first-child))::before {content:"\f071";} /* ...and their lists start under the text, which the gutter has already moved in. */ div.message:is(.confirm, .error, .info, .important):not(:has(> i:first-child, > div:first-child > i:first-child)) ul {padding-left:1.25em;} .testResult {width:auto; margin:.25em .5em 0 0; height:2.5em; line-height:1.4em; clear:none;} .testResult span {white-space:nowrap; margin:0;} /* sprites */ a.icon {margin:3px 0 1.5em 0; float:left; clear:both; text-decoration:none;} .ccard, .delete, .down, .downT, .email, .flag, .plus, .prev, .print, .up, .upT { width:1.1em; height:1.1em; border:1px solid var(--link-color); float:left; margin-right:.5em; padding:1px; background:#FFF url(../images/iface/down.gif) no-repeat center center; text-decoration:none; } .ccard {background-image:url(../images/iface/ccard.png);} .email {background-image:url(../images/iface/email.gif);} .flag {background-image:url(../images/iface/flag.gif);} .delete {background-image:url(../images/iface/delete.png);} .plus {background-image:url(../images/iface/plusBG.gif);} .print {background-image:url(../images/iface/print.gif);} .up {background-image:url(../images/iface/up.gif);} .downT, .upT {border:none; background:url(../images/iface/down.gif) no-repeat center bottom; margin:-2px .25em 0 -3px;} .upT {background-image:url(../images/iface/next.gif);} .prev {background-image:url(../images/iface/prev.gif);} .ques {background-image:url(../images/iface/ques.gif); border:none; float:none; display:inline; vertical-align:super; background-color:transparent; padding-right:6px;} a.noBorder {text-decoration:underline;} a.noBorder div {border:none; margin-right:.2em;} /* media */ audio,canvas,progress,video {text-shadow:none;} .mediaWrap {margin-bottom:1.5em;} .VIDEO1 video,.VIDEO1 embed,.VIDEO1 iframe,.VIDEO1 object {width:1000px; max-width:100%; height:750px;} .VIDEO2 video,.VIDEO2 embed,.VIDEO2 iframe,.VIDEO2 object {width:500px; max-width:100%; height:375px;} .VIDEO3 video,.VIDEO3 embed,.VIDEO3 iframe,.VIDEO3 object {width:333px; max-width:100%; height:250px;} #mapContainer {width:100%; height: calc(100vh - 64px); border:1px solid var(--gray-300);} #mapContainer.mapContainerIFrame {height:100vh;} /* add-ons */ /* pop-ups */ /* quote box */ .quotesImg p:first-of-type:before {content:url('../images/quotesL.jpg');} .quotesImg p:last-of-type:after {content:url('../images/quotesR.jpg');} .quotes p:before {content:open-quote;} .quotes p:after {content:close-quote;} .quotes i+p:before, .quotes i+p:after {content:''!important;} /* count box */ .dl,.count dt {display:block; margin-top:.75em;} .count {counter-reset:xxx;} .count dt:before {content:counter(xxx, decimal); counter-increment:xxx; font:3.3em 'Open Sans',Arial, Helvetica, sans-serif; position:absolute; top:0; left:-.15em; border-radius:5em; padding:0 .275em; color:#FFF;} .count dt {padding:0 0 0 4.15em; position:relative; min-height:6em;} /* ellipsis */ .EL {margin-bottom:1.5em; overflow:hidden; position:relative; word-break:keep-all;} .EL:before {position:absolute; bottom:0; right:0; content:'\2026'; background-color:#FFF; padding-right:15px;} .EL:after {content:''; position:absolute; height:50px; width:100%; z-index:1;} /* jqueryUI overrides */ .ui-widget-content {background-color:#transparent!important;} .ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active {color:#FFF; text-shadow:none; border:none;} .ui-state-focus {outline:0!important; border:none!important;} .ui-state-default,.ui-widget-header .ui-icon,.ui-icon,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,.ui-progressbar-value,.ui-datepicker-header,.ui-slider-range,.ui-widget-content {background-image:none!important;} .ui-widget-overlay {background:url('../images/iface/fancybox_overlay.png'); opacity:1; filter:none;} .ui-dialog-buttonset {width:100%;} .ui-dialog-buttonset.ui-button:last-child {float:right!important;} #accordion,#datepicker,#progressbar,#slider,#tabs,#tooltip {margin-bottom:1.5em;} /* accordion */ #accordion div {box-sizing:content-box; background:transparent;} .ui-accordion .ui-accordion-header {transition:all .2s ease-in;} .ui-accordion .ui-accordion-icons {padding-left:1em!important;} .ui-accordion .ui-accordion-header {font-weight:bold; border:none!important;} .ui-accordion .ui-accordion-content {padding:1em 1em 0 1em!important; border:none!important;} /* autocomplete colors */ .ui-autocomplete {border-radius:0;} .ui-menu-item,.ui-menu-item a {background:none; border:none!important; transition:none; margin:0!important; padding:0!important;} .ui-menu-item {margin:0!important; padding:0;} .ui-menu-item a {padding:0 .4em!important;} .ui-menu-item a:hover,.ui-menu-item a.ui-state-focus {background:none; border:none!important; display:block!important; border-radius:0; box-sizing:border-box;} .ui-menu-item a:hover,.ui-menu-item a.ui-state-focus {color:#FFF; text-shadow:none; background-color:var(--link-color)!important;}/* match system color */ /* datepicker / timepicker */ #ui-datepicker-div {background-image:none!important; background:#FFF; box-shadow:0 1px 2px rgba(0,0,0,.15); z-index: 2147483628 !important} table.ui-datepicker-calendar,.ui-datepicker .ui-widget-header,.ui-datepicker th,.ui-datepicker td {border:none!important;} #datepicker,.ui-datepicker-inline {background-color:transparent!important;} .ui-datepicker th {padding:0 0.3em!important; background-color:#FFF!important;} select.ui-datepicker-year {min-width:49%!important;}/* IE fix */ .ui-datepicker-trigger {border:none; background:#FFF; padding:0;} .ui-datepicker.ui-datepicker-title,.ui-datepicker-calendar {text-shadow:none;} .ui-datepicker-calendar th {border-right:none; color:var(--gray-700); font-weight:bold;} .ui-datepicker .ui-datepicker-buttonpane {margin:2.5em 0 0;} .ui-datepicker-header {margin:1px 0;} .ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next {transition:none;} /* Angles (\f104/\f105), not carets -- see the same pair in start.css. */ .ui-datepicker .ui-datepicker-prev:before,.ui-datepicker .ui-datepicker-next:before {float:left; color:#FFF; font-family:"Font Awesome 7 Pro"; content:'\f104'; padding:0 5px!important; font-weight:300;} .ui-datepicker .ui-datepicker-next:before {float:right; content:'\f105';} .ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next {background-color:transparent; border:none; opacity:0.7; filter:alpha(opacity=70); cursor:pointer;} .ui-datepicker .ui-datepicker-prev:hover,.ui-datepicker .ui-datepicker-next:hover {background-color:transparent; border:none; opacity:1; filter:alpha(opacity=100); top:2px!important; padding-left:1px;} .ui-datepicker .ui-datepicker-next:hover {padding-right:1px;} #ui-datepicker-div {background-image:none!important; background:#FFF; box-shadow:0 1px 2px rgba(0,0,0,.15);} .ui-timepicker-div.ui-widget-header {margin-bottom:8px;} .ui-timepicker-div dl {text-align:left;} .ui-timepicker-div dl dt {height:25px;} .ui-timepicker-div dl dd {margin:-1.25em 0 10px 65px;} .ui-timepicker-div td {font-size:90%;} /* progressbar */ .ui-progressbar {width:100%!important;} .ui-progressbar .ui-progressbar-value {box-sizing:content-box; border-right:none;} /* slider */ #slider a {transition:none;} /* tabs */ #tabs {background:transparent; border:none!important;} #tabs ul {outline:0!important; border:none!important;} #tabs .ui-state-default a {transition:none; font-weight:normal;} #tabs .ui-tabs-nav {background:transparent!important; border:none; margin-bottom:0 !important; padding-left:0;} #tabs .ui-tabs-nav li, #tabs .ui-tabs-nav li a {height: 32px !important;} #tabs .ui-tabs-nav li.ui-tabs-active a {height: 31px !important;} #tabs .ui-tabs-active {background-color:#FFF; outline:0!important; border-bottom:none !important;} #tabs .ui-tabs-panel {padding:1.5em 1em 1em 1em!important;} .ui-tabs-anchor {outline:0!important; border:none!important; box-shadow:none!important;} /* tooltip */ #tooltip a {cursor:auto;} /* fx */ /* rollovers */ a.roll img {opacity:0.7; filter:alpha(opacity=70); transition:opacity 0.2s ease-in-out, background-color .2s ease-in-out;} a:hover.roll img {opacity:1.0; filter:alpha(opacity=100);} input:focus,textarea:focus,select:focus,input[type="text"]:focus,button:hover,.button:hover,.boxWrap div:hover,button span:after,button.back span:before {transition:all .1s ease-in;} .geopathImg { max-width: 170px; } .clickable { cursor: pointer; } /* highlights for coloring compile grids by icon color 30% GeoMapIconColors mixed with white. */ .Yellow-highlight { background-color: #FDF8B9!important; } .Green-highlight { background-color: #CEE6C5!important; } .Blue-highlight { background-color: #BBDDFB!important; } .Red-highlight { background-color: #F7C8C0!important; } .Purple-highlight { background-color: #D8C5DF!important; } .Orange-highlight { background-color: #FFE0B3!important; } .Navy-highlight { background-color: #C2CFE6!important; } .Pine-highlight { background-color: #B3E1CC!important; } .Maroon-highlight { background-color: #E6BDC8!important; } .Aqua-highlight { background-color: #B3E6F0!important; } .Lime-highlight { background-color: #E6F8BD!important; } .Brown-highlight { background-color: #D8CBC7!important; } .net-media-cost-changed { background-color: var(--highlight)!important; } #errorContainer a:hover {text-decoration: none;} #errorContainer a h2 { text-shadow: none; background: var(--link-color); border-bottom: 2px solid var(--link-hover); color: #FFF; font-size: 16px; font-weight: 100; padding: 8px; margin-bottom: 0px; margin-top: .5em; -webkit-transition: background 500ms ease-out, border 500ms ease-out; -moz-transition: background 500ms ease-out, border 500ms ease-out; -o-transition: background 500ms ease-out, border 500ms ease-out; transition: background 500ms ease-out, border 500ms ease-out; } #errorContainer a h2 {background: var(--danger); border-bottom: 2px solid var(--danger-dark)} #errorContainer a h2:hover {background: var(--danger-dark);} #errorContainer .toggleContentSymbol { float:right; } #errorContainer .content { padding: 8px; overflow: hidden; background: var(--gray-100); border: 1px solid var(--border-color); border-radius: 0 0 6px 6px; } /* The red title bar and the list under it read as one box; collapsed (the toggle shows the plus icon) the bar is rounded all round. */ #errorContainer a h2 {border-radius: 6px 6px 0 0;} #errorContainer a:has(.fa-square-plus) h2 {border-radius: 6px;} /* Fancytree's skin (vendor css, left untouched) draws a square dotted box around the tree. */ ul.ui-fancytree.fancytree-container {border-radius: 6px;} /* Fancybox popups (vendor css: 4px). */ .fancybox-wrap .fancybox-skin {border-radius: 6px;} .changedContractField { background-color: var(--highlight) !important; } details summary {display:list-item;} .inventory-summary-table-container { max-height: 393px; overflow: auto; margin-bottom: 14px; } .inventory-summary-sticky-headers thead th { position: -webkit-sticky; position: sticky; top: 0; background-color: var(--primary)!important; } .fullScreenLink:hover { text-decoration: none; } /* Webfont icons inside a Bootstrap .btn match the Vue buttons' SVG icons (conquerorVue.scss `.btn svg`): 16px beside the 14px label. The 8px gap comes from mr-2 / ml-2 on the icon. line-height:1 stops the icon inheriting the label's tall line box, and -0.03em (measured) puts its centre on the label's centre; `middle` left it 1.7px low. */ .btn > i[class*="fa-"]:not(.fa-stack-1x):not(.fa-stack-2x) {font-size:1rem; line-height:1; vertical-align:-0.03em;} /* Icons beside a button's text label are Regular (400) rather than the app-wide Light (300), so they hold their own next to the semibold uppercase label; icon-only buttons stay Light. CSS cannot see a text node, so "beside a label" is the icon's mr-/ml- gap class, which every labelled button icon carries (and no icon-only one does). The Vue side does the same in components/util/FontAwesomeIcon.js. */ :is(.btn, button) > i.fa-light:is(.mr-1, .mr-2, .mr-3, .ml-1, .ml-2, .ml-3) {--fa-style:400;} /* .no-caret: drop the legacy conqueror.css caret (a.button / button span:after) and the right padding it reserved. */ a.button.no-caret span:after, button.no-caret span:after {content:none;} a.button.no-caret span, button.no-caret span {padding-right:0;} /* .link-caret: an expand / collapse chevron beside a semibold (600) link label is Regular, not the app-wide Light, the same pairing as icons beside button labels (public company page and product profile market lists). */ i.fa-light.link-caret {--fa-style:400;} /* Company page Advertising Category and Venue panels: each group keeps its legacy div.col4 (getSearchCategories() finds groups by it) but sits inside a Bootstrap column, so the old 23.495% float width would squeeze it to a quarter of one. */ #categoryBox .col4, #venueBox .col4 {width:auto; float:none; margin:0 0 1rem;} /* the last group in each column carries no spacing below it, so the panel's own padding is the bottom edge */ #categoryBox .col4:last-child, #venueBox .col4:last-child {margin-bottom:0;} #categoryBox .col4:last-child > p, #venueBox .col4:last-child > p {margin-bottom:0; padding-bottom:0;} /* Company page Geographic Search panel: contain its floated pickers, and lay the two-sided selects out like /user/asset/list (same rules as that page's #sellerAssetListForm ones). */ #geographicPanel {display:flow-root;} #geographicPanel > #searchType {float:none;} /* the global `select {float:left}` put the pickers beside it */ #geographicPanel label:has(> .tsmsselect) {display:flow-root; float:none; width:auto; margin-right:0;} /* each search box is one label; its legacy bottom margin + padding doubled the panel's own padding, as does the select's mb-3 when "Entire United States" shows no box under it */ #geographicPanel > .searchBox > label {margin-bottom:0; padding-bottom:0;} #geographicPanel > #searchType:has(> option[value="ENTIREUS"]:checked) {margin-bottom:0 !important;} /* Available and Selected the same width either side of the buttons' 217px + 36px margins (1px slack for rounding) */ #geographicPanel label:has(> .tsmsselect) > .tsmsselect {width:calc(50% - 127px);} #geographicPanel label:has(> .tsmsselect) > .tsmsoptions {width:217px; margin:0 18px;} #geographicPanel label:has(> .tsmsselect) > .tsmsselect {margin-bottom:0;} /* The Request Quote form's rows use -20px gutters; on the page its column pays for them, inside the fancybox dialog nothing did, so the rows stuck out 20px each side and the dialog scrolled sideways. */ .fancybox-inner > #requestQuote {padding:0 20px;} /* One width for the Request Quote dialog on Company, Product Profile and Asset Details (#18461). Fancybox sizes an inline dialog to its content, so Company's long category names made its dialog ~170px wider than the others. 988px is the width the other two already had; on a phone, leave room for Fancybox's 20px margins + 15px padding. */ .fancybox-inner > #requestQuote {width:min(988px, calc(100vw - 80px)); box-sizing:border-box;} #requestQuote.panel {display:flow-root;} /* contains the floated Request Quote button */ /* The Request Quote error banners (in the dialog) and success banners (on the page) take focus so screen readers read them; they are messages, not controls, so no focus ring. */ #requestQuoteAjaxResultsError:focus, #quoteAjaxResultsError:focus, #ajaxResultsSuccess[tabindex]:focus, #quoteAjaxResultsSuccess:focus {outline:none;} /* The Request Quote submit's Solid caret: the shared .btn > i offset leaves it 2.25px above the centre of the uppercase label's cap height; at 1rem the caret is already the cap height (10.2px vs 10px), so only the offset changes. */ /* The launch button has no id, so it needs the extra classes to outrank the generic .btn > i rule above. */ #submitRequestQuote > i.fa-caret-right, a.btn.no-caret[data-src="#requestQuote"] > i.fa-solid.fa-caret-right {vertical-align:-0.17em;} /* The reCAPTCHA iframe is a fixed 304px; its inline scale(0.92) still overflowed the phone-width dialog (whose holder is 100vw - 120px wide), so .fancybox-inner scrolled sideways by 7px at 375px. Scaled to fit the holder: 0.83 down to a 372px viewport, 0.65 below that (320px phones). !important beats the inline style. */ @media (max-width:420px) {#requestQuote .requestQuoteRecaptcha {transform:scale(0.83) !important; -webkit-transform:scale(0.83) !important;}} @media (max-width:371px) {#requestQuote .requestQuoteRecaptcha {transform:scale(0.65) !important; -webkit-transform:scale(0.65) !important;}} /* The ring spinner and message text of the Vue LoadingOverlay / ProgressMessageOverlay (BootstrapVue b-overlay) for JSP pages: inline loaders use .page-loading-spinner, and showLoadingOverlay() in master.js uses both. The spinner is drawn here rather than with Bootstrap's .spinner-border because Bootstrap's CSS reaches a JSP page only through the Vue header bundle. */ .page-loading-spinner {display:inline-block; width:2rem; height:2rem; vertical-align:middle; border:3.5px solid currentColor; border-right-color:transparent; border-radius:50%; color:var(--primary); /* the account's primary colour, as on the Vue overlay */ animation:page-loading-spin .75s linear infinite;} .page-loading-message {max-width:400px; margin:1rem auto 0; font-size:1.1rem; font-weight:600; color:var(--text-dark);} .page-loading-message p {margin:.5rem 0 0; font-size:1rem; font-weight:400;} @keyframes page-loading-spin {to {transform:rotate(360deg);}} /* Fancybox's loading overlay -- showLoadingOverlay() in master.js, used site-wide -- drawn like the Vue one: the ring spinner instead of Fancybox's sprite and GIF, and the pale blurred cover instead of the dark one when it is the empty box showLoadingOverlay() opens (wrapCSS hideImportant). A dialog keeps its dark backdrop when a bare spinner shows over it. Only the look changes; it still opens and closes through Fancybox. "body" outranks jquery.fancybox-2.1.x.css, which loads after this. */ body #fancybox-loading:not(:has(> .overrideLoading)) {width:2rem; height:2rem; margin:-1rem 0 0 -1rem; background:none; opacity:1;} body #fancybox-loading > div:not(.overrideLoading) {box-sizing:border-box; width:2rem; height:2rem; background:none; border:3.5px solid currentColor; border-right-color:transparent; border-radius:50%; color:var(--primary); animation:page-loading-spin .75s linear infinite;} body .fancybox-overlay:has(> .fancybox-wrap.hideImportant) {background:none;} body .fancybox-overlay:has(> .fancybox-wrap.hideImportant)::before {content:""; position:fixed; top:0; right:0; bottom:0; left:0; background-color:var(--gray-100); opacity:.85; backdrop-filter:blur(2px);} /* With a message (showLoadingOverlay(messageHtml), or a page's own $('#fancybox-loading').html('
...')) it reads like the Vue ProgressMessageOverlay: the ring, then the title, then the text, centred with no white box, on a pale cover of its own -- so it also reads over an open dialog (the Request Quote form) -- unless showLoadingOverlay()'s pale cover is already under it. Pages' own boxes come in two shapes -- an orange h1 + a div holding a Font Awesome spinner + a div of text, or a spinner +
s + text -- with per-page .overrideLoading widths, heights, white boxes and white text (made for the dark cover), so the overrides here are !important, and Fancybox's GIF (#fancybox-loading div) is removed from the inner divs. */ body #fancybox-loading:has(> .overrideLoading) {top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; width:auto; height:auto; margin:0; background:none; opacity:1; cursor:default;} body #fancybox-loading:has(> .overrideLoading)::before {content:""; position:absolute; top:0; right:0; bottom:0; left:0; background-color:var(--gray-100); opacity:.85; backdrop-filter:blur(2px);} body .fancybox-overlay:has(> .fancybox-wrap.hideImportant) ~ #fancybox-loading::before {content:none;} body #fancybox-loading > .overrideLoading {position:relative !important; display:flex; flex-direction:column; align-items:center; width:400px !important; max-width:calc(100vw - 32px) !important; /* the Vue message's 400px block */ height:auto !important; padding:0 !important; border-radius:0; background:none !important; color:var(--text-dark) !important; font-size:1rem; text-align:center;} body #fancybox-loading .overrideLoading div {width:auto !important; height:auto; margin:.5rem 0 0 !important; background:none;} body #fancybox-loading .overrideLoading > i + br, body #fancybox-loading .overrideLoading > i + br + br {display:none;} body #fancybox-loading .overrideLoading h1 {order:1; width:auto !important; margin:0; font-size:1.1rem; font-weight:600; line-height:1.5; color:var(--text-dark);} /* = .progress-message-text */ body #fancybox-loading .overrideLoading > div {order:2;} body #fancybox-loading .overrideLoading > div:has(> i) {order:0; margin:0 !important;} body #fancybox-loading .overrideLoading > .page-loading-spinner {margin-bottom:1rem;} /* b-spinner + mb-3 */ body #fancybox-loading .overrideLoading > .page-loading-message {margin:0 !important; line-height:1.5;} body #fancybox-loading .overrideLoading i.fa-spin, body #fancybox-loading .overrideLoading i.fa-pulse {display:block; box-sizing:border-box; width:2rem; height:2rem; margin:0 auto 1rem; /* b-spinner + mb-3 */ font-size:0; border:3.5px solid currentColor; border-right-color:transparent; border-radius:50%; color:var(--primary) !important; animation:page-loading-spin .75s linear infinite;} body #fancybox-loading .overrideLoading i.fa-spin::before, body #fancybox-loading .overrideLoading i.fa-pulse::before {content:none;} /* select2 hides the original