/* 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 #CCC;}
.normal {font-weight:normal; font-style:none;}
strong, .bold {font-weight:bold;}
em, .italic {font-style:italic;}
.red, .req {color:#C00 !important;}
.black {color:#000 !important;}
.gray1, .disabled {color:#CCC !important;}
.gray2 {color:#999 !important;}
.gray3 {color:#666 !important;}
.gray4 {color:#333 !important;}
.white {color:#FFF !important;}
.green {color: #1F9D2B}
.impBorder {color:#CFA214;}
.infoBorder {color:#03C;}
.shadow {text-shadow:1px 1px 0 #CCC;}
.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 brand-orange (#F37736) dot drawn in CSS where ball1.gif used to be; still a background-image, so
   the theme overrides (ball1wl.gif) and the banner/alert text-colour bullets replace it as before. */
ul li {padding:0 0 0 14px; background:transparent radial-gradient(circle 2px at center, #F37736 1.5px, transparent 2px) 1px .6em / 4px 4px no-repeat;}
ul ul {margin:.3em .75em; padding:0;}
/* Nested-list bullet: the 2px #F69968 square that ball2.gif was, drawn in CSS (theme overrides still swap it). */
ul ul li {padding-left:13px; background:transparent linear-gradient(#F69968, #F69968) 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;}
/* 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 <br> 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:#666;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:#CCC!important; text-shadow:none!important;-webkit-opacity:1;}
button.disabled, button:disabled {
    opacity: 0.65;
    color: #ffffff !important;
}
select[disabled='disabled'] {margin-right:0;}
select[disabled='disabled']::-ms-value {color:#CCC!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. */
.fieldHelp {margin-left:4px; color:var(--gray-600, #6c757d); font-size:13px; font-weight:400; cursor:help;}
.req + .fieldHelp {margin-left:0;} /* the required asterisk already has its own 7px (MR5) */
.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 #CCC;
    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: #dcdcdc;
}

/* 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 #E0E0E0; padding:7px 9px;}
td>ul {margin-top:1em;}
th {color:#FFF;}
#investmentSummaryTypeSelect {color:#FFF; background-color: #0DADD6}
th,tfoot td {border-top:1px solid #E0E0E0; border-bottom:1px solid #E0E0E0; 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:#F2F2F2!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 #E0E0E0;}
.bothLines {border-top:1px solid #E0E0E0; border-bottom:1px solid #E0E0E0;}
.botLine {border-bottom:1px solid #E0E0E0;}
.force1-4 {width:25%;}
.dropTable {margin:0; border-top:1px solid #E0E0E0; border-bottom:1px solid #E0E0E0; 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: #8f8f8f;
    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 #E0E0E0;}
/* 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:#E0E0E0;}
table.dataTable tfoot th {border-top:#E0E0E0;}
.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;}
/* 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 */
.BGblack {background-color:black;}
.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;}
.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 #CCC;}
.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 #CCC,0 0 5px #CCC,0 0 5px #CCC,0 0 5px #CCC;}
.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 #000;}
.captionR {float:right; margin:0 0 .5em 1.5em;}

.more {width:100%; display:inline-block; border:1px solid #000; 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 &nbsp; 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:#1F9D2B; border:1px solid #1F9D2B; background-color:rgba(31,157,43,.2);}
.error,.shortPass,.badPass {color:#C00; border:1px solid #C00; background-color:rgba(204,0,0,.1);}
.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:#CFA214; border:1px solid #CFA214; background-color:rgba(255,255,0,.15);}
.important ul li {background-image:url('../images/iface/ballI.gif');}
.info {color:#03C; border:1px solid #03C; background-color:rgba(0,51,204,.05);}
.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:#4B9B3D; background-color:#DCEAD9;}
.message.info {color:#0E466C; background-color:#D1E7F6;}
/* 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:#946200; background-color:#FFF6E4;}
.message.error, span.error {color:#C14A39; background-color:#F3DBD7;}
/* 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 #177BBD;
    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 #DADADA;}
#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:#39F!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:#555; 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: #FFFF55!important;
}
#errorContainer a:hover {text-decoration: none;}
#errorContainer a h2 {
    text-shadow: none;
    background: #0dadd6;
    border-bottom: 2px solid #00849f;
    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: #d45659; border-bottom: 2px solid #c24649}
#errorContainer a h2:hover {background: #c24649;}
#errorContainer .toggleContentSymbol {
    float:right;
}
#errorContainer .content {
    padding: 8px;
    overflow: hidden;
    background: #F4F4F4;
    border: 1px solid #CCC;
    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: #FFFF55 !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, #00698F)!important;
}
.fullScreenLink:hover {
    text-decoration: none;
}


:root {
    --sidebar-left-bg-color: #00698F;
    --sidebar-right-bg-color: #005F81;
    --sidebar-bg-color: #005F81;
    --sidebar-color: #fff;
    --sidebar-color-item: #fff;
    --sidebar-action-bg: #00698F;
    --sidebar-item-active: #fff;
    --sidebar-item-active-bg: rgba(218, 218, 218, 0.25);
    --sidebar-icon-active: #005F81;
    --sidebar-item-hover-bg-color: #377E98;
    --sidebar-item-hover-color: #fff;
    --sidebar-item-border-color: transparent;

    --navbar-link-color: #00698F;
    --navbar-link-hover-color: #005F81;
    --navbar-link-hover-bg: transparent;
    --navbar-bg: #f9f9f9;
    --navbar-shadow: none;
    --table-td-bg: #0dadd61a;

    --link-color: #10ADD6;

    --primary: #00698F;
    --primary-light: #005F81;

    --secondary: #F0773F;
    --secondary-light: #D86B39;

    --btn-primary-bg: #00698F;
    --btn-primary-bg-hover: #005F81;
    --btn-primary-disabled-bg: #005F81;
    --btn-primary-disabled-bg-hover: #005F81;

    --btn-secondary-bg: #F0773F;
    --btn-secondary-bg-hover: #D86B39;
    --btn-secondary-outline-bg-hover: #FFFAF8
}

/* Kinetic */
body.wl1345 {
    --sidebar-left-bg-color: #0A2756;
    --sidebar-right-bg-color: #09234D;
    --sidebar-bg-color: #09234D;
    --sidebar-color: #fff;
    --sidebar-color-item: #fff;
    --sidebar-action-bg: #09234D;
    --sidebar-item-active: #fff;
    --sidebar-item-active-bg: rgba(218, 218, 218, 0.25);
    --sidebar-icon-active: #09234D;
    --sidebar-item-hover-bg-color: #0B2A5E;
    --sidebar-item-hover-color: #fff;
    --sidebar-item-border-color: transparent;

    --navbar-link-color: #0A2756;
    --navbar-link-hover-color: #09234D;
    --navbar-link-hover-bg: transparent;
    --navbar-bg: #f9f9f9;
    --navbar-shadow: none;

    --link-color: #10ADD6;

    --primary: #0A2756;
    --primary-light: #09234D;

    --secondary: #00928D;
    --secondary-light: #00B5B1;

    --btn-primary-bg: #0A2756;
    --btn-primary-bg-hover: #0B2A5E;
    --btn-primary-disabled-bg: #0B2A5E;
    --btn-primary-disabled-bg-hover: #0B2A5E;

    --btn-secondary-bg: #007774;
    --btn-secondary-bg-hover: #00B5B1;
    --btn-secondary-outline-bg-hover: #F6FAFA
}

/* OOH Pitch */
body.wl3362 {
    --sidebar-left-bg-color: #CC0000;
    --sidebar-right-bg-color: #990000;
    --sidebar-bg-color: #cc0000;
    --sidebar-color: #fff;
    --sidebar-color-item: #fff;
    --sidebar-action-bg: #cc0000;
    --sidebar-item-active: #fff;
    --sidebar-item-active-bg: rgba(218, 218, 218, 0.25);
    --sidebar-icon-active: #cc0000;
    --sidebar-item-hover-bg-color: #ff000080;
    --sidebar-item-hover-color: #fff;
    --sidebar-item-border-color: transparent;

    --navbar-link-color: #990000;
    --navbar-link-hover-color: #cc0000;
    --navbar-link-hover-bg: transparent;
    --navbar-bg: #f9f9f9;
    --navbar-shadow: none;

    --link-color: #ff0000;

    --primary: #990000;
    --primary-light: #CC0000;

    --secondary: #CC0000;
    --secondary-light: #D86B39;

    --btn-primary-bg: #990000;
    --btn-primary-bg-hover: #cc0000;
    --btn-primary-disabled-bg: #cc0000;
    --btn-primary-disabled-bg-hover: #cc0000;

    --btn-secondary-bg: #CC0000;
    --btn-secondary-bg-hover: #ff00001a;
    --btn-secondary-outline-bg-hover: #ff00001a
}

/* 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, #005f81); /* 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:#333;}
.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, #005f81); 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:#f8f9fa; opacity:.85; backdrop-filter:blur(2px);}
/* With a message (showLoadingOverlay(messageHtml), or a page's own $('#fancybox-loading').html('<div
   class="overrideLoading">...')) 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 + <br/>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:#f8f9fa; 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:#333 !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:#333;} /* = .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, #005f81) !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 <select> with width:1px !important, but Bootstrap's w-100 (width:100% !important)
   won, leaving an invisible, absolutely positioned full-width select that widened its container (the Request
   Quote dialog's "Where would you like to advertise?" scrolled sideways by ~280px). The min-width reset is for
   the `select {min-width:300px}` rule in this file, which otherwise holds it at 300px. */
select.select2-hidden-accessible {min-width:0;}
select.select2-hidden-accessible.w-100 {width:1px !important;}