@import "https://fonts.googleapis.com/css?family=Roboto:400";

:root {
  --bulma-family-primary: "Roboto", -apple-system, Helvetica, sans-serif;

  /* --bulma-text-rgb: 64, 70, 84;
  --bulma-text-h: 221deg;
  --bulma-text-s: 14%;
  --bulma-text-00-l: 0%; */
  --bulma-text-rgb: 0, 0, 0; /* rgba(0,0,0,0.6) */
  --bulma-text-h: 0deg;
  --bulma-text-s: 0%;
  --bulma-text-l: 0%;
  /* --bulma-text-rgb: 64, 70, 84;
  --bulma-text-h: 221deg;
  --bulma-text-s: 14%;
  --bulma-text-00-l: 0%; */

  --bulma-primary-rgb: 19, 45, 118;
  --bulma-primary-h: 225.45deg;
  --bulma-primary-s: 72.26%;
  --bulma-primary-l: 26.86%;

  --bulma-warning-rgb: 245, 127, 23;
  --bulma-warning-h: 28.78deg;
  --bulma-warning-s: 91.53%;
  --bulma-warning-l: 52.55%;

  --bulma-danger-rgb: 211, 47, 47;
  --bulma-danger-h: 0deg;
  --bulma-danger-s: 64.29%;
  --bulma-danger-l: 50.59%;

  --bulma-info-rgb: 2, 136, 209;
  --bulma-info-h: 200.87deg;
  --bulma-info-s: 98.1%;
  --bulma-info-l: 41.37%;

  /* --bulma-link-hsla: hsla(var(--bulma-link-hsl), 0.6);
  --bulma-link-hsl: var(--bulma-link-h), var(--bulma-link-s),
    var(--bulma-link-l);
  --bulma-link-rgba: rgba(var(--bulma-link-rgb), 0.6); */
  --bulma-link-rgb: 19, 45, 118;
  --bulma-link-h: 225.45deg;
  --bulma-link-s: 72.26%;
  --bulma-link-l: 26.86%;

  /* 
  --bulma-link-rgb: 19, 45, 118;
  --bulma-link-h: 225.45deg;
  --bulma-link-s: 72.26%;
  --bulma-link-l: 26.86%; */

  --bulma-success-rgb: 46, 125, 50;
  --bulma-success-h: 122.53deg;
  --bulma-success-s: 46.2%;
  --bulma-success-l: 33.53%;

  /* 
  --bulma-shadow-rgb: 64, 70, 84;
  --bulma-shadow-h: 221deg;
  --bulma-shadow-s: 14%;
  --bulma-shadow-l: 4%;

  --bulma-dark-rgb: 46, 51, 61;
  --bulma-dark-h: 221deg;
  --bulma-dark-s: 14%;
  --bulma-dark-invert: #f3f4f6;

  --bulma-white-rgb: 255, 255, 255;
  --bulma-white-h: 221deg;
  --bulma-white-s: 14%;
  --bulma-white-l: 100%;
  --bulma-white-invert-l: 4%;
  --bulma-white-invert: #090a0c;
  --bulma-white-on-scheme-l: 35%;

  --bulma-black-rgb: 9, 10, 12;
  --bulma-black-h: 221deg;
  --bulma-black-s: 14%;
  --bulma-black-l: 4%;
  --bulma-black-invert-l: 100%;
  --bulma-black-invert: #fff;
  --bulma-black-on-scheme-l: 4%; */

  /* --bulma-black-bis: #14161a;
  --bulma-black-ter: #1f2229;
  --bulma-grey-darker: #2e333d;
  --bulma-grey-dark: #404654;
  --bulma-grey: #69748c;
  --bulma-grey-light: #abb1bf;
  --bulma-grey-lighter: #d6d9e0;
  --bulma-white-ter: #f3f4f6;
  --bulma-white-bis: #f9fafb; */

  /* --bulma-size-1: 3rem;
  --bulma-size-2: 2.5rem;
  --bulma-size-3: 2rem;
  --bulma-size-4: 1.5rem;
  --bulma-size-5: 1.25rem;
  --bulma-size-6: 1rem;
  --bulma-size-7: .75rem; */

  /* Light Mode Colors */
  --text-primary: rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.6);
  --text-disabled: rgba(0, 0, 0, 0.38);

  --primary-main: #132d76;
  --primary-dark: #1e44aa;
  --primary-light: #839bde;
  --primary-contrastText: #ffffff;

  --secondary-main: #9c27b0;
  --secondary-dark: #7b1fa2;
  --secondary-light: #ce93d8;
  --secondary-contrast: #ffffff;

  --error-main: #d32f2f;
  --error-dark: #c62828;
  --error-light: #ef5350;
  --error-contrast: #ffffff;

  --warning-main: #f57f17;
  --warning-dark: #e65100;
  --warning-light: #ffb74d;
  --warning-contrast: #ffffff;

  --info-main: #0288d1;
  --info-dark: #01579b;
  --info-light: #4fc3f7;
  --info-contrast: #ffffff;

  --success-main: #2e7d32;
  --success-dark: #1b5e20;
  --success-light: #81c784;
  --success-contrast: #ffffff;

  --background-default: #ffffff;
  --background-paper: #ffffff;
  --divider: rgba(0, 0, 0, 0.12);

  /* Common Colors */
  --white: #ffffff;
  --black: #000000;

  /* Breakpoints */
  --breakpoint-xs: 444px;
  --breakpoint-sm: 600px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1536px;

  /* Spacing */
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 40px;
  --spacing-6: 48px;
  --spacing-7: 56px;
  --spacing-8: 64px;
  --spacing-9: 72px;
  --spacing-10: 80px;
  --spacing-11: 88px;
  --spacing-12: 96px;

  /* Shape */
  --border-radius-none: 0;
  --border-radius: 4px;

  /* Typography */
  --font-family: "Roboto", -apple-system, Helvetica, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;

  font-family: var(--font-family, "Roboto", sans-serif);
}

[data-theme="dark"] {
  /* Dark Mode Colors */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-disabled: rgba(255, 255, 255, 0.38);

  --primary-main: #90caf9;
  --primary-dark: #42a5f5;
  --primary-light: #e3f2fd;
  --primary-contrastText: rgba(0, 0, 0, 0.87);

  --secondary-main: #ce93d8;
  --secondary-dark: #ab47bc;
  --secondary-light: #f3e5f5;
  --secondary-contrast: rgba(0, 0, 0, 0.87);

  --error-main: #f44336;
  --error-dark: #d32f2f;
  --error-light: #e57373;
  --error-contrast: #ffffff;

  --warning-main: #ffa726;
  --warning-dark: #f57c00;
  --warning-light: #ffb74d;
  --warning-contrast: rgba(0, 0, 0, 0.87);

  --info-main: #29b6f6;
  --info-dark: #0288d1;
  --info-light: #4fc3f7;
  --info-contrast: rgba(0, 0, 0, 0.87);

  --success-main: #66bb6a;
  --success-dark: #388e3c;
  --success-light: #81c784;
  --success-contrast: rgba(0, 0, 0, 0.87);

  --background-default: #121212;
  --background-paper: #1e1e1e;
  --divider: rgba(255, 255, 255, 0.12);
}

/* Material Color Palette */
:root,
[data-theme="dark"] {
  /* Blue */
  --blue-50: #d2deff;
  --blue-100: #839bde;
  --blue-200: #4a71de;
  --blue-300: #1e44aa;
  --blue-400: #132d76;
  --blue-500: #132d76;
  --blue-600: #132d76;
  --blue-700: #132d76;
  --blue-800: #132d76;
  --blue-900: #132d76;

  /* Red */
  --red-500: #f44336;
  --red-600: #e53935;
  --red-700: #d32f2f;

  /* Purple */
  --purple-200: #ce93d8;
  --purple-300: #ba68c8;
  --purple-400: #ab47bc;
  --purple-500: #9c27b0;

  /* Grey */
  --grey-50: #fafafa;
  --grey-100: #f5f5f5;
  --grey-200: #eeeeee;
  --grey-300: #e0e0e0;
  --grey-400: #bdbdbd;
  --grey-500: #9e9e9e;
  --grey-600: #757575;
  --grey-700: #616161;

  /* Other colors from the palette can be added similarly */
}
h6 {
  /* typography/h5 */
  color: var(--text-secondary, rgba(0, 0, 0, 0.6));  
  font-size: 1.3rem !important;
  font-weight: var(--font-weight-regular, 400) !important;
  line-height: 133.4%;
}

body,
button,
input,
optgroup,
select,
textarea {
  margin: 0;

  font-weight: var(--font-weight-regular, 400) !important;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--text-secondary, rgba(0, 0, 0, 0.6)) !important;

  -webkit-font-smoothing: antialiased;
  font-family: inherit;

  --bulma-control-height: 2.5rem;
}

.select select,
.input,
.textarea {
  font-weight: var(--font-weight-regular, 400);
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.15px;

  color: var(--text-secondary, rgba(0, 0, 0, 0.87));
}

.box {
  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
}

.material-icons.mot-icon.has-text-link + h1,
.material-icons.mot-icon.has-text-link + h2,
.material-icons.mot-icon.has-text-link
  + .material-icons.mot-icon.has-text-link
  + h3,
.material-icons.mot-icon.has-text-link + h4,
.material-icons.mot-icon.has-text-link
  + .material-icons.mot-icon.has-text-link
  + h5,
.material-icons.mot-icon.has-text-link + h6,
.material-icons.mot-icon.has-text-link
  + p
  .material-icons.mot-icon.has-text-link
  + span {
  color: var(--primary-main, rgba(19, 45, 118, 1));
}

/* Global nav*/
.navbar-item,
.navbar-link {
  /* typography/button/medium */
  font-family: var(--font-family, "Roboto", sans-serif);
  font-weight: var(--font-weight-medium, 500);
  font-size: 0.875rem;
  line-height: 1.5rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
}

a.navbar-item.is-active,
a.navbar-item.is-selected,
.navbar-link.is-active,
.navbar-link.is-selected {
  background-color: white;
  color: var(--primary-main, rgba(19, 45, 118, 1));
  border-bottom: 1px solid var(--primary-main, rgba(19, 45, 118, 1));
}

/* Global tabs*/
.tabs li * {
  font-weight: var(--font-weight-medium, 500);
  font-size: 0.875rem !important;
  line-height: 1.5rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
}
.tabs li.is-active a {
  color: var(--primary-main, rgba(19, 45, 118, 1)) !important;
  border-bottom-color: var(--primary-main, rgba(19, 45, 118, 1));
}
.tabs a:hover {
  color: var(--primary-main, rgba(19, 45, 118, 1)) !important;
  border-bottom-color: var(--primary-main, rgba(19, 45, 118, 1));
}
/* is-toggle tabs */
.tabs.is-toggle li * {
  font-weight: var(--font-weight-medium, 500);
  font-size: 0.875rem !important;
  line-height: 1.5rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-primary, rgba(0, 0, 0, 0.87));
}
.tabs.is-toggle li.is-active a {
  color: var(--text-primary, rgba(0, 0, 0, 0.87)) !important;

  --bulma-tabs-toggle-link-active-background-color: var(--grey-300, #e0e0e0);

  --bulma-tabs-toggle-link-active-border-color: var(--divider, #ffffff1f);

  --bulma-tabs-toggle-link-active-color: var(
    --text-primary,
    rgba(0, 0, 0, 0.87)
  );
}

/* Global table styles start*/
/* Table */
table {
  --bulma-table-head-cell-border-width: 0 0 1px;
}

.table tr.is-selected {
  --bulma-table-row-active-color: var(--primary-contrastText, #ffffff);
  --bulma-table-row-active-background-color: var(--primary-main, #132d76);
}

thead th {
  /* typography/table/header */
  font-size: 14px !important;
  line-height: 24px;
  letter-spacing: 0.17px;
  font-weight: var(--font-weight-medium, 500) !important;
  text-decoration: none;
}
thead th * {
  /* typography/table/header */
  font-size: 14px !important;
  line-height: 24px;
  letter-spacing: 0.17px;
  font-weight: var(--font-weight-medium, 500) !important;
  text-decoration: none;
}

tbody td {
  /* typography/body2 */
  font-size: 14px !important;
  line-height: 143%;
  letter-spacing: 0.17px;
  font-weight: var(--font-weight-regular, 400) !important;
}
/* Global table styles end*/

.button {
  font-weight: var(--font-weight-mediun, 500);
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.4px;
  color: var(--text-secondary, rgba(0, 0, 0, 0.6));

  -webkit-font-smoothing: antialiased;
  font-family: inherit;
}

.button.is-primary {
  color: var(--primary-main, #132d76) !important;
  --bulma-button-background-l: var(--bulma-white, white);
  --bulma-button-border-width: 1px;
}

.button:active,
.button.is-active {
  color: var(--text-primary, rgba(0, 0, 0, 0.87)) !important;
  background-color: var(--grey-300, #e0e0e0);
  border-color: var(--divider, #ffffff1f);
}

[class*="is-color-success"],
[class*="has-text-success"] {
  --bulma-color-l: #4db6ac;
  color: var(--bulma-color-l) !important;
}

/* START steps */
.steps-content label {
  font-size: 14px !important;
  line-height: 157%;
  letter-spacing: 0.1px;
  font-weight: var(--font-weight-medium, 500) !important;
}
.steps-content * div {
  font-size: 12px !important;
  line-height: 1rem;
  letter-spacing: 0.4px;
}
.steps.is-small .steps-marker {
  width: 2rem;
  height: 2rem;
}
.steps:not(.is-hollow) .steps-marker:not(.is-hollow),
.steps:not(.is-hollow) .steps-segment.is-active .steps-marker:not(.is-hollow) {
  background-color: #689f38;
}

.steps:not(.is-hollow)
  .steps-segment.is-active
  ~ .steps-segment
  .steps-marker:not(.is-hollow) {
  background-color: var(--text-disabled, rgba(255, 255, 255, 0.38));
  color: var(--primary-contrastText, #ffffff);
}
.steps:not(.is-hollow) .steps-marker:not(.is-hollow).is-danger {
  background-color: var(--error-dark, #c62828) !important;
}
.steps.is-hollow .steps-marker.is-danger,
.steps .steps-marker.is-hollow.is-danger {
  border-color: var(--error-dark, #c62828) !important;
}

.steps:not(.is-vertical).is-dashed .steps-segment:after,
.steps:not(.is-vertical) .steps-segment.is-dashed:after {
  background: #689f38;
}

.steps:not(.is-vertical).is-dashed .steps-segment.is-active:after,
.steps:not(.is-vertical).is-dashed
  .steps-segment.is-active
  ~ .steps-segment:after,
.steps:not(.is-vertical) .steps-segment.is-active.is-dashed:after,
.steps:not(.is-vertical)
  .steps-segment.is-active
  ~ .steps-segment.is-dashed:after {
  background: var(--grey-500, #9e9e9e);
}
@media screen and (width >= 769px), print {
  .steps.is-small:not(.is-vertical).has-content-centered .steps-content {
    margin-top: 2rem;
  }

  .steps.is-small:not(.is-vertical).has-content-centered
    .steps-segment:not(:last-child):after {
    background-color: #689f38;
    height: 0.0625rem;
    top: 1rem;
    left: 70%;
    right: -30%;
  }
  .steps.is-small.is-vertical .steps-segment:not(:last-child):after {
    background-color: #689f38;
    width: 0.0625rem;

    left: 1rem;
    bottom: 0.26rem;
    top: 2.26rem;
  }

  .steps.is-small.is-vertical.has-content-centered .steps-content {
    padding-top: calc(1rem + 0.5em);
  }
}

@media screen and (width < 769px), print {
  .steps.is-small:not(.is-horizontal).has-content-centered .steps-content {
    margin-left: calc(1rem + 0.5em);
  }
  .steps.is-small:not(.is-horizontal).has-content-centered .steps-content {
    padding-top: calc(1rem + 0.5em);
  }

  .steps.is-small.is-vertical.has-content-centered .steps-content {
    padding-top: calc(1rem + 0.5em);
  }
  .steps.is-small:not(.is-horizontal) .steps-segment:not(:last-child):after {
    background-color: #689f38;
    width: 0.0625rem;

    left: 1rem;
    bottom: 0.26rem;
    top: 2.26rem;
  }
}

.steps:not(.is-vertical).is-dashed .steps-segment.is-active:after,
.steps:not(.is-vertical).is-dashed
.steps-segment.is-active ~ .steps-segment:after,
.steps:not(.is-vertical) .steps-segment.is-active.is-dashed:after,
.steps:not(.is-vertical)
.steps-segment.is-active ~ .steps-segment.is-dashed:after {
    background-color: #9E9E9E;
}

.steps:not(.is-vertical).is-danger .steps-segment.is-active:after,
.steps:not(.is-vertical).is-danger
.steps-segment.is-active ~ .steps-segment:after,
.steps:not(.is-vertical) .steps-segment.is-active.is-danger:after,
.steps:not(.is-vertical)
.steps-segment.is-active ~ .steps-segment.is-danger:after {
    background-color: var(--error-dark, #c62828);
}

/* END steps */

/* start Menu */
.navbar-burger,
.menu-list a,
.menu-list button,
.menu-list .menu-item {
  font-family: var(--bulma-family-primary, "Roboto", sans-serif);
  --bulma-menu-item-color-l: var(--bulma-text-rgb, rgba(0, 0, 0, 0.87));
  font-weight: var(--font-weight-regular, 400);
  font-size: 1rem !important;
  line-height: 150%;
  letter-spacing: 0.15px;
}
/* end menu */

.box {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  --bulma-box-radius: 3px;
}

#spend_over_time button.button.is-small.is-primary {
  color: var(--text-primary, rgba(0, 0, 0, 0.87)) !important;
  background-color: var(--grey-300, #e0e0e0);
  border-color: var(--divider, #ffffff1f);
}

#MainContent {
  position: relative;
  overflow: visible;
}

#dashboards {
  padding: 0 1.5rem !important;
  margin-top: 2.625rem;
}

#main_tabs ul {
  position: absolute;
  width: 100vw;
  left: 0;
  top: 0;
  height: 2.625rem;

  justify-content: center;
  background-color: var(--grey-300, #e0e0e0);
}

#in_transit > div.columns > div:nth-child(1) > div > h6 {
  border-top: 2px solid var(--success-dark, #1b5e20);
}
#in_transit > div.columns > div:nth-child(2) > div > h6 {
  border-top: 2px solid var(--error-dark, rgba(198, 40, 40, 1));
}
#in_transit > div.columns > div:nth-child(3) > div > h6 {
  border-top: 2px solid var(--warning-dark, rgba(230, 81, 0, 1));
}

/* Dashboard */
/* Card start */
#in_transit * .box {
  padding: 0;
  hr {
    margin: 0;
  }
}
/* Header */
#in_transit .has-text-weight-semibold.is-size-5 {
  padding: 16px 16px 0px 16px;

  /* typography/h5 */
  font-size: 1.5rem !important;
  font-weight: var(--font-weight-regular, 400) !important;
}
/* Content */
/* Big top cards */
#in_transit .has-text-weight-semibold.is-size-1 {
  padding: var(--spacing-2, 1rem);

  /* typography/h3 */
  color: var(--primary-main, #132d76);
  font-size: 3rem !important;
  font-weight: var(--font-weight-regular, 400) !important;
  line-height: 116.7%;
}
#in_transit .has-text-weight-semibold.is-size-1.has-text-success {
  color: var(--success-dark, #1b5e20) !important;
}
#in_transit .has-text-weight-semibold.is-size-1.has-text-danger {
  color: var(--error-dark, rgba(198, 40, 40, 1)) !important;
}
#in_transit .has-text-weight-semibold.is-size-1.has-text-warning {
  color: var(--warning-dark, rgba(230, 81, 0, 1)) !important;
}

/* Filters */
#in_transit .is-justify-content-space-between {  
  gap: 0.5rem;
}

/* Footer */
#in_transit .is-justify-content-center .material-icons {
  color: var(--primary-main, #132d76);
  font-size: 1.1rem !important;
}
#in_transit .is-justify-content-center span {
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.875rem !important;
  font-weight: var(--font-weight-medium, 500) !important;
  line-height: 1.5rem !important;
}
#in_transit .is-justify-content-center {
  justify-content: space-between !important;
  align-items: center;
  padding: 0.5rem;

  background: var(--grey-100, #f5f5f5);
}
/* Card end */

/* Small bottom cards */
#in_transit .has-text-weight-semibold.is-size-2 {
  padding: var(--spacing-2, 1rem);

  /* typography/h3 */
  color: var(--primary-main, #132d76);
  font-size: 3rem !important;
  font-weight: var(--font-weight-regular, 400) !important;
  line-height: 116.7%;
}
#in_transit .has-text-weight-semibold.is-size-7 {
  /* typography/caption */
  font-size: 0.75rem !important;
  line-height: 166%;
  font-weight: var(--font-weight-regular, 400) !important;

  color: var(--text-primary, rgba(0, 0, 0, 0.87)) !important;
}
#in_transit .has-text-weight-semibold.is-size-7.has-text-danger {
  color: var(--error-dark, #d32f2f) !important;
}

/* Performance tab*/
#performance .has-text-weight-semibold.is-size-5 {
  font-size: var(--font-size-1-5-rem, 1.5rem) !important;
  font-weight: var(--font-weight-regular, 400) !important;
}

/* Emissions */
#emissions .has-text-weight-semibold.is-size-5 {
  font-size: var(--font-size-1-5-rem, 24px) !important;
  font-weight: var(--font-weight-regular, 400) !important;
}

#emissions hr {
  display: none;
}

#emissions .box.has-border-primary div {
  padding-top: 1rem;

  font-size: 2.125rem !important;
  font-weight: var(--font-weight-regular, 400) !important;
  letter-spacing: 0.25px;
  line-height: 123.5%; /* 32.016px */
}

#pinned_shipments a {
  line-height: 22px;
  letter-spacing: 0.46px;
  font-weight: var(--font-weight-medium, 500) !important;

  text-transform: uppercase;
}

#pinned_shipments .is-flex.is-flex-direction-column.p-2 div:nth-child(2),
#pinned_shipments .is-flex.is-flex-direction-column.p-2 div:nth-child(3) {
  /* typography/body/small */
  line-height: 16px;
  letter-spacing: 0.4px;
  font-weight: var(--font-weight-regular, 400) !important;
}
#pinned_shipments .is-flex.is-flex-direction-column.p-2 div:nth-child(4) {
  line-height: 16px;
  letter-spacing: 0.5px;
  font-weight: var(--font-weight-semi-bold, 600) !important;
}

/* Included by AppEng Team */

.crane-background {
  background-image: url(crane-background.png);
}

.c-view-chart {
  width: 100% !important;
  max-height: 300px !important;
  min-height: 300px !important;
}

@media (max-width: 1024px) {
  #MainNavbar {
      height: calc(100vh - 100px)
  }
}

.typeahead.dropdown {
  width: 100%;
  display: block;
}

.typeahead .dropdown-menu {
  width: 100%;
}

.typeahead .dropdown-menu > .dropdown-content {
  max-height: 250px;
  overflow-x: auto;
}

.full-height-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 240px);
}

.full-height-container > * {
  flex-grow: 1;
  overflow-x: auto;
}

@media (max-width: 768px) {
  .full-height-container {
      height: unset !important;
  }
}

iframe[id="jsd-widget"] {
  display: none;
}

input[type=checkbox], input[type=radio] {
  height: 2.5em !important;
  width: 1.5em !important;
}

.button.is-loading {
  box-shadow: none !important;
  pointer-events: none !important;
  color: #0000 !important;
}

#react-root #search-container {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* 
 * 4/17/2025
 */

:root {
    --bulma-link-text: var(--bulma-link);
}

.button.is-primary[disabled] {
    background-color: var(--bulma-white) !important;
}

.title {
    color: var(--text-secondary, rgba(0, 0, 0, 0.6));
}

.navbar-burger, .menu-list a, .menu-list button, .menu-list .menu-item {
    font-size: .8rem !important;
}


@media screen and (width < 769px) {
    /* shipment details container panel */
    nav.level.is-align-items-flex-start.is-flex-wrap-wrap  *{
        text-align: left !important;
    }
    
    /*panel on container details page - left align on mobile device */
    nav.level.custom-level {
        align-items: flex-start !important;
    }

    nav.level.custom-level .level-item.has-text-centered {
        text-align: left !important;
    }

    /* PL filter panel - level style needs some love! */
    nav.level.custom-level .level-left {
        align-items: stretch !important;
        width: 100% !important;
    }

    nav.level.custom-level .level-left .level-item {
        justify-content: start !important;
    }

    /* PO details panel - use flex to share space in between */
    .po-counts {
        margin-left: 0 !important;
    }
}