/* --- This CSS-stylesheet contains generic styling rules throughout the system --- */
/* Styling components or certain pages are out-sourced to other CSS-files           */

@import url('./css/bbx-page-variables.css');
@import url('./css/bbx-page-animations.css');
@import url('./css/bbx-page-components.css');
@import url('./css/bbx-page-co2.css');
@import url('./css/bbx-page-faq.css');
@import url('./css/bbx-page-map.css');
@import url('./css/bbx-widget-account-selector.css');
@import url('./css/bbx-widget-bar-chart.css');
@import url('./css/bbx-widget-shipment-filter.css');
@import url('./css/bbx-widget-user-messages.css');


/* CSS DIRECTORY
  1. Styling fixes for browsers
  2. Generic styles
  3. Generic panel
  4. Generic form styles
  5. Generic tooltip
  6. Generic icons
  7. Generic tab styles
  8. Generic counter

  10. BCDUI styles

  20. Responsive design
*/

/* === START: 1. Styling fixes for Chrome === */

::-webkit-scrollbar {
  width: 10px;
  background-color: var(--col-blue-snow);
  
}

::-webkit-scrollbar-track {
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: var(--col-liberty-grey);
  min-height: 8%;
}
a:-webkit-any-link:focus-visible {
  outline-offset: 0px;
}
/* === END: 1. Styling fixes for Chrome === */

/* === START: 2. Generic styles === */
@font-face{
  font-family:"Univia W01 Ultra";
  src:url("Fonts/2999566/6cbd6cac-d7eb-4b3b-b9ec-517695462b6e.woff2") format("woff2"),url("Fonts/2999566/a0ba43ce-dd6a-4f5d-b6ea-b4823b8766e7.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Thin";
  src:url("Fonts/2999574/62a00968-be58-4950-910b-39335496eae3.woff2") format("woff2"),url("Fonts/2999574/d971dbda-a176-4ef8-9a25-c6bc42b7dfe8.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Book Italic";
  src:url("Fonts/2999580/d143e3b5-a986-438e-8e7e-6e01196d2cec.woff2") format("woff2"),url("Fonts/2999580/1e4b5680-6a66-4d3d-a8f7-84a2cf816996.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Bold Italic";
  src:url("Fonts/2999584/72ee9a00-fd10-4b47-b3a7-25f7250a8ebb.woff2") format("woff2"),url("Fonts/2999584/5bc656c6-29a8-482e-91de-dbf38f3b08c5.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Light Italic";
  src:url("Fonts/2999590/73ccf041-220f-489c-a7a9-fba279a46cea.woff2") format("woff2"),url("Fonts/2999590/910f16f9-8bc9-4377-b038-89a9dc8257e1.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Light";
  src:url("Fonts/2999592/e33ba059-5c69-499a-b8af-d1ca58b6f866.woff2") format("woff2"),url("Fonts/2999592/19ff256a-7332-4817-bd64-01ed5b42fa9b.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Black Italic";
  src:url("Fonts/2999604/57901e6c-51f1-4751-95bd-33a763640402.woff2") format("woff2"),url("Fonts/2999604/5e7a2951-acb8-4317-a605-df2906c6cdab.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Medium";
  src:url("Fonts/2999606/eb3665f9-88c9-4e37-8c03-65016de80ef2.woff2") format("woff2"),url("Fonts/2999606/3ee2818a-e0eb-47c6-809a-12b7a5840947.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Regular Italic";
  src:url("Fonts/2999614/fa43abbe-1427-4aef-adb6-1ff0a1572499.woff2") format("woff2"),url("Fonts/2999614/fdd5b800-d7d4-4610-abba-66a4e8f6f210.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Thin Italic";
  src:url("Fonts/2999618/3e91f4e3-3a7c-45a0-89a9-7f0913f42e53.woff2") format("woff2"),url("Fonts/2999618/a2e90215-60f8-4227-812d-fe948791dce0.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Regular";
  src:url("Fonts/2999620/d7ce7ab2-eeee-4ceb-9ab7-4fdbf032a77c.woff2") format("woff2"),url("Fonts/2999620/5e5ba327-9f76-4ffb-8a8f-b8ace207d65d.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Black";
  src:url("Fonts/2999624/227e20a2-ce56-48f0-8629-e17c1d41a974.woff2") format("woff2"),url("Fonts/2999624/c83c8809-7835-4347-8b35-fb3cda401516.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Medium Italic";
  src:url("Fonts/2999626/77d7058d-75de-4f0c-a94a-81ac23f2bef9.woff2") format("woff2"),url("Fonts/2999626/658d413b-cfcf-4f89-b508-a57e0c0cf8aa.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Ultra Italic";
  src:url("Fonts/2999628/7af57c29-f335-48d3-ab4c-2e8e15a525ae.woff2") format("woff2"),url("Fonts/2999628/1d8955df-368a-48e1-b0b9-4ea83c52a6a0.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Book";
  src:url("Fonts/2999636/a352856a-ec04-4273-a96a-207ca1a03ce0.woff2") format("woff2"),url("Fonts/2999636/805573fa-8199-452a-bc1c-a2e1a694593c.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Ultra Light Italic";
  src:url("Fonts/2999640/ca030473-c802-446b-9a41-1ccfd968276b.woff2") format("woff2"),url("Fonts/2999640/ebbe7bff-c721-48ba-a0f6-d221f9bfae5b.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Bold";
  src:url("Fonts/2999652/b379ad8a-6056-436c-9098-803da3bc4488.woff2") format("woff2"),url("Fonts/2999652/b35e972c-c7d4-4b11-8151-b97550cd1595.woff") format("woff");
}
@font-face{
  font-family:"Univia W01 Ultra Light";
  src:url("Fonts/2999656/7f4666dd-72ed-46b6-92c3-bc73307cb348.woff2") format("woff2"),url("Fonts/2999656/aa537580-b355-411e-ae90-e52cd237b435.woff") format("woff");
}
@font-face {
  font-family: "Roboto Regular";
  src:url("Fonts/Roboto/roboto-v20-latin-regular.woff2") format("woff2"),url("Fonts/Roboto/roboto-v20-latin-regular.woff") format("woff");
}
@font-face {
  font-family: "DMSans Regular";
  src:url("Fonts/DMSans/DMSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "DMSans Bold";
  src:url("Fonts/DMSans/DMSans-Bold.ttf") format("truetype");
}

body .bcd__outer-wrapper h1,
body .bcd__outer-wrapper h2,
body .bcd__outer-wrapper h3 {
  font-family: var(--font-family-default);
  font-size: var(--font-size-default);
  font-weight: bold !important;
  color: var(--col-text-color-default);
}

body .bcd__outer-wrapper {
  font-family: var(--font-family-default);
  font-size:  var(--font-size-default);
  font-weight: normal;
  color: var(--col-text-color-default);
}

h1 {
  white-space: nowrap;
}

h2 {
  color: var(--col-dark-ocean);
  font-size: 36px;
}

body h2 {
  border-bottom: 0px solid var(--col-white);
  white-space: nowrap;
}

h3 {
  color: var(--col-dark-ocean);
  font-size: 18px !important;
}

h4 {
  color: var(--col-dark-ocean);
  font-size: 18px;
  white-space: nowrap;
}

.clickable:hover {
  cursor: pointer;
}

.card {
  margin: 5px;
  padding: 10px;
  color: var(--col-black-space);
}

.error {
  font-size: 14px;
  color: var(--col-red);
}

.hide {
  display: none;
}

.expand {
  height: 40px;
  transform: translateY(-50px);
  background: var(--col-white);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%);
  padding-top: 50px;
}
.expand:after {
  content: "\f078";
  margin-left: 50%;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 20px;
}

.expand.expanded:after {
   content: "\f077";
}

.expand:hover, .expand.expanded:hover {
   color: var(--col-liberty-grey);
}

.expand.hidden {
  display: none;
}

#top-container.expanded {
  max-height: 100%;
  height: 100%!important;
  transition: height 1s ease-out;
}

.orderHeaderAsc::after {
  display: inline-block;
  content: "\25B2";
  pointer-events: all;
  margin-left: 0.25em;
}

.orderHeaderDesc::after {
  display: inline-block;
  content: "\25BC";
  pointer-events: all;
  margin-left: 0.25em;
}

.horizontal-divide {
  border-top: 1px solid var(--col-liberty-grey-alpha);
  margin: .5em;
}

.vertical-divide {
  border-left: none;
  margin: .5em;
}

/* === END: 2. Generic styles === */

/* === START: 3. Generic panel === */
.panel {
  background-color: var(--col-white);
  color: var(--col-black-space);
  margin-bottom: 2em;
  border-radius: var(--border-radius);
  border-bottom: 1px solid var(--col-blue-snow);
  border-left: 1px solid var(--col-blue-snow);
  border-right: 1px solid var(--col-blue-snow);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.panel h2{
  color: var(--col-dark-ocean);
  font-weight: 600;
  background-color: var(--col-blue-snow);
  border: 0 solid transparent;
  padding: 0.5em 1em;
  text-align: center;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  display:flex;
  justify-content:center;
}

.panelHeader {
  flex: 1 1 90%;
  margin-left: 1em;
}

.panelBody{
  margin: 1em;
}

.panel .panel+.panel {
  margin-top: 5em;  
}

/* === END: 3. Generic panel === */

/* === START: 4. Generic form styles === */
.form-label {
  display: inline-block;
  margin-bottom: 0;
  text-align: right;
  margin-right:0.5em;
} 

div.form-control,
input.form-control,
select.form-control {
  background-color: var(--col-blue-snow);
  border: 2px solid var(--col-blue-snow);
}

input.form-control,
select.form-control {
  box-sizing: border-box;
  height: 40px;
  border-radius: var(--border-radius);
  transition: none;
}

input.form-control:focus,
select.form-control:focus {
  border: 2px solid var(--col-liberty-grey);
  background-color: var(--col-white);
}

input.form-control[readonly],
select.form-control[readonly] {
  border: 1px solid var(--col-liberty-grey-alpha);
  background-color: var(--col-white);
  color: var(--col-liberty-grey-alpha);
}

.btn-close,
.btn-close:active {
  border:none;
  background: var(--col-white);
  outline: 0;
  border-radius: var(--border-radius-button);
  cursor: pointer;
}

/* === END: 4. Generic form styles === */

/* === START: 5. Generic tooltip style === */
.tooltipContainer{
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.tooltip {
  position: absolute;
  visibility: hidden;
  width: auto;
  height: auto;
  border-radius: var(--border-radius);
  padding: .6em;
}

.tooltipContainer:hover .tooltip {
  opacity : 1;
  visibility: visible;
  transition: all 0.1s ease-out;
}

.smart-tooltip {
  position: relative;
  display: inline-block;
}

.smart-tooltip .smart-tooltip-text {
  visibility: hidden;
  background-color: var(--col-primary-dark-blue);
  color: var(--col-white);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--border-radius-button);
  padding: 1em 0.75em; /*16px 12px*/
  position: absolute;
  white-space: pre-wrap;
  line-height: normal;
  z-index: 1000;
  margin: 0;
  font-size: 12pt;
  font-weight: normal;
  opacity: 0;
  transition: opacity 1s;
}

.smart-tooltip:hover .smart-tooltip-text {
  opacity : 1;
  visibility: visible;
  transition: all 0.5s ease-out;
}

.smart-tooltip .smart-tooltip-text.tiny        {width: 9.5em;} /*150px*/
.smart-tooltip .smart-tooltip-text.tiny.right  {margin-left: 0px;}
.smart-tooltip .smart-tooltip-text.tiny.center {margin-left: -4.75em;}
.smart-tooltip .smart-tooltip-text.tiny.left   {margin-left: -9.5em;}

.smart-tooltip .smart-tooltip-text.small        {width: 15.5em;} /*250px*/
.smart-tooltip .smart-tooltip-text.small.right  {margin-left: 0px;}
.smart-tooltip .smart-tooltip-text.small.center {margin-left: -7.75em;}
.smart-tooltip .smart-tooltip-text.small.left   {margin-left: -15.5em;}

.smart-tooltip .smart-tooltip-text.medium        {width: 25em;} /*400px*/
.smart-tooltip .smart-tooltip-text.medium.right  {margin-left: 0px;}
.smart-tooltip .smart-tooltip-text.medium.center {margin-left: -12.5em;}
.smart-tooltip .smart-tooltip-text.medium.left   {margin-left: -25em;}

.smart-tooltip .smart-tooltip-text.big        {width: 37.5em;} /*600px*/
.smart-tooltip .smart-tooltip-text.big.right  {margin-left: 0px;}
.smart-tooltip .smart-tooltip-text.big.center {margin-left: -18.75em;}
.smart-tooltip .smart-tooltip-text.big.left   {margin-left: -37.5em;}

/* 
  this is for the goods description tooltip which could be 4k 
  the whitespace wrap of the tooltip is overwriten and the font-size is smaller

*/
.smart-tooltip .smart-tooltip-text.huge       {width: 75em; white-space: normal; font-size: 8pt;} /*1200px*/
.smart-tooltip .smart-tooltip-text.huge.right  {margin-left: 0px;}
.smart-tooltip .smart-tooltip-text.huge.center {margin-left: -37.5em;}
.smart-tooltip .smart-tooltip-text.huge.left   {margin-left: -75em;}

.smart-tooltip .smart-tooltip-text.bottom {top: 100%; left: 50%; margin-top: 0.5em;}
.smart-tooltip .smart-tooltip-text.top {bottom: 100%; left: 50%; margin-bottom: 0.5em;}

.smart-tooltip .smart-tooltip-text.start {left: 0%;}

/* === END: 5. Generic tooltip style === */

/* === START: 6. Generic icons === */
.info-icon, .faq-icon {
  margin-left: 0.5em;
  margin-right: 0.5em;
  cursor: pointer;
}

.info-icon:after,
.faq-icon a:after {
  display: inline-block;
  color: var(--col-text-color-default);
  font-weight: 900;
}

.info-icon:after{
  font-family: "Font Awesome 5 Free";
  content: "\f05a";
}

.faq-icon a:after{
  font-family: "Font Awesome 5 Free";
  content: "\f059";
}

/* === END: 6. Generic icons === */

/* === START: 8. Generic counter === */

.shipmentCounterSubLabel {
  font-size: .8em;
  color: var(--col-dark-ocean);
}

div.shipmentCounterLabelContainer {
  text-align: left;
  margin-left: 0.25em;
  margin-right: 0.5em;
  display: inline-block;
  vertical-align: middle;
}
/* === END: 8. Generic counter === */

/* === START: 10. BCDUI styles === */
.loadData {
  z-index: 1011;
  position: fixed;
  padding: 0px;
  margin: 0px;
  width: 30%;
  top: 40%;
  left: 35%;
  text-align: center;
  color: var(--col-black);
  border: 3px solid rgb(170, 170, 170);
  background-color: var(--col-white); 
  cursor: wait;
}

.ui-draggable.bcdModalBoxDialog {
  margin-top: 5%;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  -webkit-box-shadow: var(--box-shadow);
}

bcd-checkboxng input,
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  height: 20px;
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid var(--col-liberty-grey);
  border-radius: var(--border-radius);
  background-color: var(--col-blue-snow);
  margin: 0.5em 0.5em;
  vertical-align: sub;
}

bcd-singleselect .bcdSingleSelect label,
.bcdSingleSelect label {
  padding: 0;
  margin: 0 1em 0 0;
}
bcd-singleselect .bcdSingleSelect .bcdRadioItem:last-child label,
.bcdSingleSelect .bcdRadioItem:last-child label {
  margin: 0;
}

  
bcd-singleselect .bcdSingleSelect input[type="radio"],
.bcdSingleSelect input[type="radio"] {
  box-sizing: border-box;
  font-size: var(--font-size-default);
  color: var(--col-text-color-default);
  height: 16px;
  width: 16px;
  accent-color: var(--col-primary-blue);
  background-color: var(--col-blue-snow);
  margin: 0 .5em 0 0;
}

bcd-periodchooser {
  align-self: center;
}

bcd-periodchooser span {
  display: flex;
  flex-direction: row;
}

div.bcdModalBoxContent div.bcdModalMessage div.bcdSuccess div.bcdButton {
  background-color: var(--col-white);
  box-sizing: border-box;
  height: 40px;
  border: 2px solid var(--col-ocean);
  border-radius: var(--border-radius-button);
  color: var(--col-ocean);
  letter-spacing: 1.63px;
  font-size: 14px;
  line-height: 15px;
  text-align: center;
  padding: 12px 6px;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-bottom: 0em;
}

.bcdPeriodChooser .bcdValue {
  box-sizing: border-box;
  height: 40px;
  border: 2px solid var(--col-blue-snow);
  border-radius: var(--border-radius);
  background-color: var(--col-blue-snow);
  transition: none;
  margin-left: 15px !important;
  padding-left: 5px;
}

.bcdPeriodChooser .bcdValue:focus {
  border: 2px solid var(--col-liberty-grey);
  background-color: var(--col-white);
}

.bcdPeriodChooser .bcdValue input,
.bcdPeriodChooser .bcdValue input.bcdDateDelimiter {
  border:none;
  background-color: transparent !important;
}

.bcdChipChooser .bcdTarget .ui-selectee span.bcdItem,
.bcdChipChooser .bcdTarget .ui-selected span.bcdItem {
  font-size: 0.9em;
  padding: .3em .4em;
  border: 1px solid var(--col-dark-ocean);
  display: inline-block;
  background-color: var(--col-blue-snow);
  color: var(--col-dark-ocean);
  border-radius: var(--border-radius);
}

.bcdChipChooser .bcdUpper span.bcdItem i.bcdCloseItem::after {
  font-size: 0.9em;
  font-weight: normal;
  display: inline-block;
  content: "\2716";
  pointer-events: all;
  margin-left:5px;
  color: var(--col-liberty-grey);
  background-color: var(--col-blue-snow);
}

.bcdChipChooser .bcdUpper .bcdConnectable li.bcdConnectableHover i.bcdCloseItem:hover::after {
  color: var(--col-dark-ocean);
}

table.bcdReport {
  border-spacing: 0;
  border-collapse: separate;
  margin:0;
  border: 0px solid var(--col-white);
}

table.bcdReport td,
table.bcdReport th {
  color: var(--col-black-space);
}

.bcdReport tr {
  background-color: var(--col-white);
}

.bcdReport.bcdTree tr.selected {
  background-color: var(--col-blue-5);
}

.bcdReport tr:hover:not(.dummy),
.bcdTree tr:hover:not(.dummy) {
  background-color: var(--col-blue-15)!important;
}

.bcdReport thead tr th  {
  background-color: var(--col-white);
  color: var(--col-black-space);
  border-bottom: 1px solid var(--col-black-space);
  font-weight: 700;
  border-top: 1px solid var(--col-liberty-grey);
  text-align: left;
  position: sticky;
  border-spacing: 0;
  top: 0;
  border-collapse: separate;
  z-index: 100;
}

th.bcdMeasure {
  text-align: left;
}

.bcdGridFoot {
  margin-top: 1em;
  margin-bottom: 1em;
}

div span.bcdPagingPanel * {
  border: none !important;
  color: var(--col-black-space) !important;
}

span.bcdPagingPanel td.bcdPagingButton,
span.bcdPagingPanel td.bcdPagingButtonActive {
  color: var(--col-dark-ocean);
  border-radius: var(--border-radius-button);
  border: none;
}

span.bcdPagingPanel td.bcdPagingButtonActive {
  background-color: var(--col-blue-snow);
}

.bcdTreeRow .bcdTree thead th.bcdMeasure {
  text-align: left;
}

div.bcdModalMessage {
  text-align: center;
}

input.bcdCheckbox.bcdSwitch:after {
  color: var(--col-blue-15);
}

/* need to set this to important as the style is inline at the element */
div.userMessages span.notification {
  background-color: var(--col-red) !important;
  padding: 0.1em 0.7em!important;
}

/* BCDUI alerter */
body #bcdAlerter>div {
  color: var(--col-white);
  font-size: 1.25em;
}

body #bcdAlerter .bcdError {
  background: color-mix(in srgb,var(--col-accent-yellow),transparent 10%);
  border-color: color-mix(in srgb,var(--col-accent-yellow),transparent 10%);

  i {
    color: var(--col-white);
  }
}

body #bcdAlerter .bcdSuccess {
    background: color-mix(in srgb,var(--col-accent-green),transparent 10%);
    border-color: color-mix(in srgb,var(--col-accent-green),transparent 10%);

    i {
      color: var(--col-white);
    }
}

/* responsive do not show drag & drop of cube configurator */
@media only screen and (max-width: 600px) {
  div.bcdCubeDndMatrix {
    display: none;
  }
}
/* === END: 10. BCDUI styles === */

/* === START: 11. Misc === */
div.playwright {
  width: 1px;
  height: 1px;
}
/* === END: 11. Misc === */

/* === START: 20. Responsive Design === */
.flex-table {
  overflow: auto;
  height: 70vh;
}

@media only screen and (max-width: 600px) {
  .flex-table {
    height: 65vh;
  }
}

@media only screen and (min-width: 2400px) {
  .flex-table {
    height: 65vh;
  }
}

@media only screen and (min-width: 1400px) {
  #switchToLargeScreen {
    display: none !important;
  }
}
/* === END: 20. Responsive Design === */


/* =============================================================== */
/* buttons */
/* =============================================================== */
bcd-periodchooser .bcdPeriodChooser .bcdButton,
.bcdPeriodChooser .bcdButton, .bcdButton.btn-primary.zipLink,
.bcdButton.btn-primary, .bcdButton.btn-secondary,
.bcdButton, .btn-outline, .btn-secondary, .btn-primary,
button.btn-outline,
button.btn-secondary,
button.btn-primary {
  font-size: var(--font-size-default);
  font-family: var(--font-family-default);
  font-weight: normal;
  height: 30px;
  border-radius: var(--border-radius-button);
  padding: 10px 15px 10px 15px;
  margin: 0 0 0 0.5em;
  display: inline-block;
  line-height: 0;
  letter-spacing: initial;
  text-align: center;
  align-self: center;
  vertical-align: middle;
  align-content: center;
  cursor: pointer;
  min-width: max-content;
  box-sizing: border-box;
  position: relative;
  & a {
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    margin: 0;
    padding: 0;
  }
}

.bcdButton, .btn-primary, .bcdButton.btn-primary.zipLink,
button.btn-primary {
  color: var(--col-primary-dark-blue);
  background-color: var(--col-blue-15);
  border: 1px solid var(--col-blue-15);
  &:hover {
    color: var(--col-primary-dark-blue);
    background-color: var(--col-blue-snow);
    border: 1px solid var(--col-primary-dark-blue);
  }
}

bcd-periodchooser .bcdPeriodChooser .bcdButton,
.bcdPeriodChooser .bcdButton,
button.btn-outline, .btn-secondary, .btn-outline,
button.btn-secondary {
  color: var(--col-primary-dark-blue);
  background-color: var(--col-blue-15);
  border: 1px solid var(--col-blue-15);
  &:hover {
    color: var(--col-primary-dark-blue);
    background-color: var(--col-blue-snow);
    border: 1px solid var(--col-primary-dark-blue);
  }
}

.btn-primary:not(:disabled):not(.disabled):active:focus, button:focus:not(:focus-visible), .btn-primary.focus, .btn-primary:focus {
  outline: none !important;
  box-shadow: none !important;
}

button .notification {
  font-size: var(--font-size-default);
  font-family: var(--font-family-default);
  font-weight: normal;
  display: none;
  position: absolute;
  top: -.7em;
  right: -.7em;
  padding: .65em .4em;
  min-width: 1.3em;
  border-radius: var(--border-radius-filter);
  background-color: var(--col-red);
  color: var(--col-white);
}

button .fas { font-size: .8em; line-height: 0; }

.smart-table-filter button.btn-primary { margin-left: .75em; }

.overviewContent {
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
}

.bcdEllipsis {
  text-overflow: ellipsis;
  width: 8em;
  overflow: hidden;
  padding-top: 5px;
}

.shipmentCounter {
  color: var(--col-primary-dark-blue);
  font-size: 30pt;
  display: inline;
  vertical-align: baseline;
}
.shipmentCounterLabel {
  color: var(--col-secondary-dark-grey);
  display: inline;
  vertical-align: baseline;
  margin-right: 2em;
}

.shipmentCounterLabelHeader {
  color: var(--col-primary-dark-blue);
  font-size: 25pt;
  font-weight: bold;
}

.nowrap {
  white-space: nowrap;
}