/**
 * styles added here will override the standard TM4Web styles
 */

/* Uncomment the following and set the height if you want your logo to be above the menu bar. */
/*
.Logo { height: 182px; // set to height of your logo
	padding: 0; margin: 0; float:none; background-color: white; opacity:1;
}
.Logo img {
	height: 182px; // set to height of your logo
}
.MenuContainer { margin-top: 0px; }

*/

/* Uncomment the following to customize the height of the Bill Details Item History grid. */
/*
#bdILT_grid .k-grid-content { max-height: 400px !important; }
*/

/* Uncomment the following to allow printing specific grids/sections, check the id of the grid/section you want to be able to print */
/*
@media print {
  body > * { display: block !important; }
  body > #ContentContainer { display: none !important;}
	body * {
    visibility: hidden;
  }
  #grid, #grid * {
    visibility: visible;
  }
  #traceGrid, #traceGrid * {
    visibility: visible;
  }
}
*/

/* Uncomment the following to use Kendo Web Font Icons */
/*
.k-i-print{ background-image: none; width:1em; height:1em; vertical-align:text-top !important; }
.k-i-print:before { content: "\e10a"; }

.k-i-email{ background-image: none; width:1em; height:1em; vertical-align:text-top !important; }
.k-i-email:before { content: "\e809"; }

.k-i-file-excel{ background-image: none; width:1em; height:1em; vertical-align:text-top !important; }
.k-i-file-excel:before { content: "\e90a"; }

.k-i-file-pdf{ background-image: none; width:1em; height:1em; vertical-align:text-top !important; }
.k-i-file-pdf:before { content: "\e90e"; }

.k-i-aggregate-fields{ background-image: none; width:1em; height:1em; vertical-align:text-top !important; }
.k-i-aggregate-fields:before { content: "\e905"; }

.k-i-hyperlink-open{ background-image: none; width:1em; height:1em; vertical-align:text-top !important; }
.k-i-hyperlink-open:before { content: "\e134"; }

.k-i-rotate{ background-image: none; width:1em; height:1em; vertical-align:text-top !important; }
.k-i-rotate:before { content: "\e50a"; }

.k-i-globe{ background-image: none; width:1em; height:1em; vertical-align:text-top !important; }
.k-i-globe:before { content: "\e672"; }

.k-i-clock{ background-image: none; width:1em; height:1em; vertical-align:text-top !important; }
.k-i-clock:before { content: "\e107"; }

.k-i-email-box{ background-image: none; width:1em; height:1em; vertical-align:text-top !important; }
.k-i-email-box:before { content: "\e80a"; }
*/

/* === Top nav / menu bar === */
#TopMenu, .MenuContainer, .tm4-navbar, .navbar, .header, #header {
  background: #24418d !important;   /* primary blue */
  border-color: #1c3470 !important;
}
#TopMenu a, .MenuContainer a, .tm4-navbar a, .navbar a {
  color: #fff !important;
}

/* === Banner / page title strip === */
.pageTitleBar, .Banner, .banner, .hero, .TitleContainer, .page-title, .PageTitle {
  background: linear-gradient(180deg, #24418d, #1c3470) !important; /* or just #24418d */
  color: #fff !important;
}
.pageTitleBar h1, .Banner h1, .page-title h1 { color: #fff !important; }

/* === jQuery UI headers (dialogs, tabs, datepicker) to match === */
.ui-widget-header,
.ui-state-active,
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
  background: #24418d !important;
  border-color: #1c3470 !important;
  color: #fff !important;
}

/* Section headers like "Contacts", "Details" */
.SectionHeader, .SectionTitle, .TitleBar, .page-section .title,
fieldset legend,
.k-panelbar > .k-item > .k-link {              /* Kendo panel headers */
  background: #24418d !important;              /* Ippolito blue */
  border-color: #1c3470 !important;
  color: #fff !important;
  background-image: none !important;           /* kill with extreme prejudice old gradients */
}

/* Grid header bars (if any) */
.k-grid .k-grid-header,
.k-grid-header, .k-grid-header .k-header {
  background: #24418d !important;
  border-color: #1c3470 !important;
  color: #fff !important;
  background-image: none !important;
}
.k-grid-header .k-header .k-link { color: #fff !important; }

/* Dialog / tab headers to keep everything consistent */
.k-dialog-titlebar,
.ui-widget-header,
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
  background: #24418d !important;
  border-color: #1c3470 !important;
  color: #fff !important;
  background-image: none !important;
}

/* TM4Web section bars (e.g., Contacts, Details, Dates) */
header.Color,
div.Color,
legend.Color,
.SubColor {
  background: #24418d !important;   /* primary */
  border-color: #1c3470 !important; /* darker edge */
  color: #fff !important;
  background-image: none !important;
}

/* Kendo/jQuery headers to keep everything consistent */
.k-panelbar > .k-item > .k-link,
.k-dialog-titlebar,
.ui-widget-header {
  background: #24418d !important;
  border-color: #1c3470 !important;
  color: #fff !important;
}
/* Force TM4Web section bars to Ippolito blue */
body header.Color,
body div.Color,
body legend.Color,
body .SubColor {
  background-color: #24418d !important;
  border-color: #1c3470 !important;
  color: #fff !important;
  background-image: none !important;
}

/* TM4Web section headers (Contacts, Details, Dates, etc.) */
.k-header.tmw_section,
.k-widget.tmw_section > .k-header,
.k-header.tmw_section.k-state-selected,
.k-header.tmw_section.k-state-hover,
.k-header.tmw_section.k-state-focused {
  background-color: #24418d !important;   /* primary */
  border-color: #1c3470 !important;
  color: #fff !important;
  background-image: none !important;      /* kill with extreme prejudice gradients */
}

/* Make the little expand/collapse arrows white too */
.k-header.tmw_section .k-icon,
.k-header.tmw_section .k-i-arrow-n,
.k-header.tmw_section .k-i-arrow-s {
  color: #fff !important;
}

/* Contacts panel column headers (Caller, Shipper, Consignee) */
.k-widget.tmw_section .contacts th.k-header,
.contacts th.k-header,
.contacts th.k-header.k-state-selected,
.contacts th.k-header.k-state-hover,
.contacts th.k-header.k-state-focused {
  background: #24418d !important;     /* primary */
  border-color: #1c3470 !important;
  color: #fff !important;
  background-image: none !important;   /* kill with extreme prejudice gradients */
}

/* Optional: tighten the header row height & spacing */
.contacts th.k-header {
  line-height: 20px !important;
  padding: 6px 10px !important;
}


/* If any icons appear in these headers, make them white too */
.contacts th.k-header .k-icon { color: #fff !important; }

/* Section bar title text (e.g., "Contacts", "Details", "Dates") */
.k-header.tmw_section,
.k-header.tmw_section .k-link,
.k-header.tmw_section span {
  color: #fff !important;
}

/* Column headers inside Contacts (Caller / Shipper / Consignee) */
.contacts th.k-header,
.contacts th.k-header .k-link,
.contacts th.k-header span {
  color: #fff !important;
}

/* Optional: page headings ("Order Entry", "Bill Number: NA") */
.shrinkwrap > h1,
.shrinkwrap > h2,
.pageTitleBar h1,
.pageTitleBar h2 {
  color: #24418d !important; /* or #fff if on a dark bar */
  font-weight: 700;
}

/* Replace "Related Microdea Documents" with "Documents" */
#billDetailsOutput .k-header.tmw_section[data-bind*="IMAGING_HEADER"],
#billDetailsWrapper .k-header.tmw_section[data-bind*="IMAGING_HEADER"]{
  position: relative;
  color: transparent !important;     /* hide original text only */
}

#billDetailsOutput .k-header.tmw_section[data-bind*="IMAGING_HEADER"]::after,
#billDetailsWrapper .k-header.tmw_section[data-bind*="IMAGING_HEADER"]::after{
  content: "Documents";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff !important;
  font-weight: bold;
}

/* ===== TM4Web top nav bar: no underline/line ===== */

/* 0) Make spans inherit colour (some themes wrap text) */
#HeaderBar .k-menu .k-link span,
#TopNav    .k-menu .k-link span,
#MainTopNav .k-menu .k-link span,
#MainTopMenu .k-menu .k-link span,
.header .k-menu .k-link span { color: inherit !important; }

/* 1) Base link reset */
#HeaderBar .k-menu .k-link,
#TopNav    .k-menu .k-link,
#MainTopNav .k-menu .k-link,
#MainTopMenu .k-menu .k-link,
.header .k-menu .k-link {
  color: #fff !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  background: transparent !important;
  background-image: none !important;       /* kill with extreme prejudice CSS underline tricks */
  border: 0 !important;
  border-bottom: 0 !important;             /* kill with extreme prejudice border underline */
  border-image: none !important;
  box-shadow: none !important;              /* kill with extreme prejudice inset underline */
  outline: none !important;
  transition: color .12s ease;
}

/* 2) Remove pseudo-element lines wherever they’re attached */
#HeaderBar .k-menu .k-link::before, #HeaderBar .k-menu .k-link::after,
#TopNav    .k-menu .k-link::before, #TopNav    .k-menu .k-link::after,
#MainTopNav .k-menu .k-link::before, #MainTopNav .k-menu .k-link::after,
#MainTopMenu .k-menu .k-link::before, #MainTopMenu .k-menu .k-link::after,
.header .k-menu .k-link::before, .header .k-menu .k-link::after,
#HeaderBar .k-menu .k-item::before, #HeaderBar .k-menu .k-item::after,
#TopNav    .k-menu .k-item::before, #TopNav    .k-menu .k-item::after,
#MainTopNav .k-menu .k-item::before, #MainTopNav .k-menu .k-item::after,
#MainTopMenu .k-menu .k-item::before, #MainTopMenu .k-menu .k-item::after,
.header .k-menu .k-item::before, .header .k-menu .k-item::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3) Remove theme hover/active backgrounds and bottom borders/shadows */
#HeaderBar .k-menu .k-item,
#TopNav    .k-menu .k-item,
#MainTopNav .k-menu .k-item,
#MainTopMenu .k-menu .k-item,
.header .k-menu .k-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#HeaderBar .k-menu .k-item:hover > .k-link,
#HeaderBar .k-menu .k-item.k-hover > .k-link,
#HeaderBar .k-menu .k-item.k-state-hover > .k-link,
#HeaderBar .k-menu .k-item.k-selected > .k-link,
#HeaderBar .k-menu .k-item.k-state-active > .k-link,
#HeaderBar .k-menu .k-link:hover,
#HeaderBar .k-menu .k-link:focus,
#HeaderBar .k-menu .k-link:active,
#TopNav    .k-menu .k-item:hover > .k-link,
#TopNav    .k-menu .k-item.k-hover > .k-link,
#TopNav    .k-menu .k-item.k-state-hover > .k-link,
#TopNav    .k-menu .k-item.k-selected > .k-link,
#TopNav    .k-menu .k-item.k-state-active > .k-link,
#TopNav    .k-menu .k-link:hover,
#TopNav    .k-menu .k-link:focus,
#TopNav    .k-menu .k-link:active,
#MainTopNav .k-menu .k-item:hover > .k-link,
#MainTopNav .k-menu .k-item.k-hover > .k-link,
#MainTopNav .k-menu .k-item.k-state-hover > .k-link,
#MainTopNav .k-menu .k-item.k-selected > .k-link,
#MainTopNav .k-menu .k-item.k-state-active > .k-link,
#MainTopNav .k-menu .k-link:hover,
#MainTopNav .k-menu .k-link:focus,
#MainTopNav .k-menu .k-link:active,
#MainTopMenu .k-menu .k-item:hover > .k-link,
#MainTopMenu .k-menu .k-item.k-hover > .k-link,
#MainTopMenu .k-menu .k-item.k-state-hover > .k-link,
#MainTopMenu .k-menu .k-item.k-selected > .k-link,
#MainTopMenu .k-menu .k-item.k-state-active > .k-link,
#MainTopMenu .k-menu .k-link:hover,
#MainTopMenu .k-menu .k-link:focus,
#MainTopMenu .k-menu .k-link:active,
.header .k-menu .k-item:hover > .k-link,
.header .k-menu .k-item.k-hover > .k-link,
.header .k-menu .k-item.k-state-hover > .k-link,
.header .k-menu .k-item.k-selected > .k-link,
.header .k-menu .k-item.k-state-active > .k-link,
.header .k-menu .k-link:hover,
.header .k-menu .k-link:focus,
.header .k-menu .k-link:active {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* 4) Colour-only hover (lighter blue) */
#HeaderBar .k-menu .k-link:hover,
#TopNav    .k-menu .k-link:hover,
#MainTopNav .k-menu .k-link:hover,
#MainTopMenu .k-menu .k-link:hover,
.header .k-menu .k-link:hover {
  color:#cfe0ff !important;
}
/* ===== User dropdown (top-right) — readable text on white ===== */

/* Popup container look */
.k-animation-container .k-menu,
.k-animation-container .k-context-menu,
.k-popup .k-menu,
.k-menu-group {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.15) !important;
}

/* Menu items: dark text on white */
.k-animation-container .k-menu .k-item > .k-link,
.k-popup .k-item > .k-link,
.k-menu-group .k-item > .k-link {
  color: #24418d !important;            /* Ippolito blue for text */
  background: #fff !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Hover state in the dropdown */
.k-animation-container .k-menu .k-item:hover > .k-link,
.k-animation-container .k-menu .k-item.k-state-hover > .k-link,
.k-popup .k-item:hover > .k-link,
.k-menu-group .k-item:hover > .k-link {
  background: #f0f4ff !important;       /* light blue hover */
  color: #1c3470 !important;            /* darker blue text */
}

/* Divider lines inside popup */
.k-animation-container .k-menu .k-separator,
.k-popup .k-separator,
.k-menu-group .k-separator {
  border-color: #e5e7eb !important;
}

/* Make drop down items visible*/
.k-animation-container .k-menu .k-link .k-icon,
.k-popup .k-link .k-icon,
.k-menu-group .k-link .k-icon {
  color: #24418d !important;
}

/* Hide Kendo filler rows in Trace grid (rows that are not real data) */
#traceGrid .k-grid-content tr.kendo-data-row:not(.k-master-row),
#traceGrid .k-grid-content-locked tr.kendo-data-row:not(.k-master-row) {
  height: 0 !important;
  background: transparent !important;
}

#traceGrid .k-grid-content tr.kendo-data-row:not(.k-master-row) td,
#traceGrid .k-grid-content-locked tr.kendo-data-row:not(.k-master-row) td {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important; /* collapses any   */
}
/* Hide tiny zoom/sub-pixel gap between banner and hero image */
.ippo-banner {
    margin-bottom: -2px !important;
    position: relative;
    z-index: 5;
    background-color: #24418d !important;
}

.ippo-banner + * {
    margin-top: -1px !important;
    border-top: none !important;
}

/* Fix tiny rendering gaps around custom Ippolito banner */
.ippo-banner {
    margin-bottom: -2px !important;
    position: relative !important;
    z-index: 5;
    background-color: #24418d !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.ippo-banner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    width: 4px;
    background-color: #24418d;
    pointer-events: none;
}

.ippo-banner + * {
    margin-top: -1px !important;
    border-top: none !important;
}