/* STYLES FOR PFS PORTAL TEST */
/* Bebas Neue used to be pulled in here via its own @import (a second,
   render-blocking Google Fonts request on top of the one header.html's
   own <link> already makes for Open Sans/Roboto/Montserrat/Raleway/
   Nunito). Removed — add "Bebas+Neue" to that existing <link>'s family
   list in header.html instead, e.g.:
   https://fonts.googleapis.com/css?family=Open+Sans|Roboto|Montserrat|Raleway|Nunito|Bebas+Neue
   so there's just the one font request. */
:root{
  --pfs-blue: #015a9c;
  --pfs-green: #018752;
  --font-display: "Bebas Neue","Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body: "Open Sans","Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
}
body {
    font-family: var(--font-body);
    font-size: 20px;
    color: #ffffff;
    background-color: var(--pfs-blue);
}

footer .footer-bottom {
    background-color: var(--pfs-green);
    padding: 30px;
    color: #ffffff;
    font-size: 20px;
    font-family: var(--font-display);
    clear:both;
}
.footer-bottom span.divide{
  padding:0 10px;
}
.wrapper-body{
    color: #ffffff;
    background-color: var(--pfs-blue);
}


/* REVERTED: turning .container into a flex row (to vertically center
   .navbar-header against #navbar) broke the layout instead — #navbar's
   content ended up overlapping the "Minto Ag Center" band below it.
   Restructuring this legacy Bootstrap 3 float-based nav into flex isn't
   safe to do blind, a turn away from live rendering — every attempt so
   far has had a side effect that only showed up in the next screenshot.
   Falling back to a plain positional nudge instead: it can only move
   the logo itself, so it can't disturb #navbar's layout no matter what
   value it ends up needing.
   The logo asset itself was swapped for a version without the baked-in
   white shield background, so the earlier mix-blend-mode:multiply
   workaround (which faked "no white box" against a still-opaque image)
   is gone — no longer needed now that the PNG is actually transparent. */
.navbar-static-top.navbar-inverse .navbar-brand{
  /* `!important` is required here — .navbar-brand also carries
     Bootstrap's visible-*-block utility classes, which force
     `display: block !important`. A plain (non-!important) `display:
     flex` lost to that earlier and produced a tall, full-width, empty-
     looking block box. No fixed height/overflow this time (that combo
     is what caused the box); just centering, which is safe on its own
     since it doesn't change .navbar-brand's box dimensions. */
  display: flex !important;
  align-items: center;
}
.navbar-static-top.navbar-inverse .navbar-brand a{
  position: relative;
  z-index: 1;
  /* Manual nudge, same technique (and same property) this file's
     ORIGINAL rule used before any of today's changes — it only had the
     wrong sign/amount for what the logo needed once resized. This is a
     visual-only offset: it can't affect #navbar's box, wrapping, or
     position, unlike the flex attempt above. If the logo still isn't
     quite centered once you see it live, this is the one number to
     adjust — nudge it up (smaller/negative) or down (larger) in small
     steps. */
  top: 18px;
}
/* `!important` on width/height is still required to beat the Navbar
   Left snippet's own inline `width: 120px; height: auto;` and keep the
   aspect ratio correct (auto/auto + max-height scales proportionally
   instead of squashing). */
.navbar-static-top.navbar-inverse .navbar-brand a img{
  max-height: 70px !important;
  width: auto !important;
  height: auto !important;
  display: block;
}
/* main nav */
.navbar-static-top.navbar-inverse .navbar-static-top.navbar .navbar-collapse{
    max-height: 120px;
}
.navbar-right{
    float: none!important;
    position: relative;
    margin: 0 auto;
}
.navbar-static-top.navbar-inverse {
    background-color: rgba(255, 255, 255, 0.7) !important;
    max-height: 8rem;
    margin-bottom: 4rem;
}
.navbar-nav{
    float: none;
    margin: 0 auto;
    text-align: center;
}
.navbar-nav > li{
    float: none;
    display: inline-block;
}
/* Was two separate rules for the same selector (one with the font
   properties, one with padding/color) — merged into one. */
.navbar-static-top.navbar .menu-bar > .navbar-nav > li > a{
    font-family: var(--font-display) !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    padding: 18px 50px;
    line-height: 40px;
    border-bottom: 4px solid transparent;
    margin: 0;
    color: var(--pfs-blue);
    outline: none;
}
.navbar-static-top.navbar .menu-bar > .navbar-nav > li:first-child > a{
  top:0;
}
.navbar-static-top.navbar .menu-bar > .navbar-nav > li:first-child > a:hover {
  background-color: #ffffff7a;
  color: var(--pfs-blue);
  border-color: transparent;
}
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-static-top.navbar .menu-bar > .navbar-nav > li > a:hover {
  background-color: #ffffff7a;
  color: var(--pfs-blue);
  border-color: transparent;
}
.navbar #navbar .dropdown-menu{
  margin-top: 0;
  background-color: #bdd4e5;
  padding: 5px 12px;
  text-align: center;
  left: 0;
  border: none;
  float: none;
  right: auto;
}
.dropdown-menu > li > a {
  font-family: var(--font-display);
  padding: 3px 22px;
  line-height: unset;
  color: var(--pfs-blue) !important;
  font-size: 28px;
  margin: 0;
}
.navbar-inverse .navbar-nav > .open > a{
  background-color: #ffffff7a!important;
  color: var(--pfs-blue)!important;
}
.navbar-nav > li .caret{
  display: none;
  border-top: 8px dashed;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
.navbar-static-top.navbar .menu-bar > .navbar-nav > .divider-vertical{
  display: none;
}

/* mobile nav */
.navbar-static-top.navbar .collapse.in{
    margin:2px auto;
}
@media screen and (max-width:1199px){
  .navbar-static-top.navbar-inverse a.navbar-brand{
    font-size: 28px;
    color: var(--pfs-blue);
    font-family: var(--font-display);
    height: auto;
  }
  .navbar-static-top.navbar .menu-bar > .navbar-nav > li:first-child > a::after {
    content: "";
  }
  .navbar-nav > li .imagelink {
    display: none;
  }
  .navbar-static-top.navbar .menu-bar > .navbar-nav > li {
    display: block;
  }

  .navbar-static-top.navbar .menu-bar > .navbar-nav > li.useracct > a,
  .navbar-static-top.navbar .menu-bar > .navbar-nav > li:first-child > a,
  .navbar-static-top.navbar .menu-bar > .navbar-nav > li > a{
    padding: 15px 10px;
    display: block;
    font-size: 32px !important;
    top:0;
  }
  .navbar-static-top.navbar-inverse{
    max-height: unset;
    margin-bottom:2rem;
  }
}

/* typography */
.fa{
  vertical-align: middle;
  margin: 0 4px;
  top:-1px;
}
.page-copy a, .page-copy .a {
    font-family: var(--font-body);
    color: var(--pfs-blue);
}

h1, .h1, .section-landing-heading, .section-landing .row > div .section-landing-heading, .section-inline-search .row > div h1, .section-landing h1, .section-search .header-search h1, .page_section h1, .color-inverse h1, h1 p,
h2, .h2, .section-landing .row > div .section-landing-sub-heading, .page_section h2, .color-inverse h2, h2 p,
h3, .h3, .page_section h3, .color-inverse h3, footer .footer-top h3, .sidebar-home h3,
h4, .h4, footer .footer-bottom h4, footer .footer-top h4, .poll .poll-header h4, .poll .poll-tags h4,
h5, .h5{
    font-family: var(--font-display);
    color:#ffffff;
    font-weight: 400;
}
h1, .h1, .section-landing-heading, .section-landing .row > div .section-landing-heading, .section-inline-search .row > div h1, .section-landing h1, .section-search .header-search h1, .page_section h1, .color-inverse h1, h1 p{
    font-size:75px;
}
h2, .h2, .section-landing .row > div .section-landing-sub-heading, .page_section h2, .color-inverse h2, h2 p{
    font-size: 60px;
}
h3, .h3, .page_section h3, .color-inverse h3, footer .footer-top h3, .sidebar-home h3{
    font-size: 55px;
}
h4, .h4, footer .footer-bottom h4, footer .footer-top h4, .poll .poll-header h4, .poll .poll-tags h4{
    font-size: 45px;
}
h5, .h5{
    font-size: 35px;
}
p, .p, .page_section p, .section-diagonal-left p, .section-diagonal-right p, footer .footer-bottom p {
    font-family: var(--font-body);
}
.btn-primary {
  color: var(--pfs-blue) !important;
  background-color: #fff !important;
  border-color: #d0d0d0 !important;
  padding: 15px 22px;
  border-radius: 5px;
  font-family: var(--font-display);
  font-size: 25px;
}

/* login */
.login-heading-section {
  line-height: inherit;
  color: #333;
  font-weight: 400;
  font-size: 30px;
}

/* navtabs (login) */
.nav-tabs > li > a{
    color: #fff;
}
.nav-tabs > li > a:hover{
    color: #030c3c !important;
}
.page-heading .breadcrumb > li a,
#mainContent .breadcrumb > li a {
  color: #252525;
}
.page-heading .breadcrumb > li a:hover,
#mainContent .breadcrumb > li a:hover{
text-decoration: underline;
  color: #252525;
}
.page-heading{
  margin-top:55px;
}
.well{
  color: #000;
}
.list-group .list-group-item,
.list-group .list-group-item:hover{
  color:#000;
}
#mainContent .page-copy{
  max-width: 98%;
  margin: 0 auto;
  /* Was `6rem 2.5rem` (96px all around) — that top value is exactly the
     dead space between the header and where a page's actual content
     starts, on EVERY page (this rule is site-wide, not per-page).
     Trimmed just the top; left bottom/sides alone since only the gap
     right under the header was flagged. */
  padding: 1.5rem 2.5rem 6rem;
}

.buttongroup{
  text-align: center;
}
.btn.overview a {
  color: var(--pfs-blue) !important;
  font-family: var(--font-display);
  font-size: 3.5rem;
}
.btn.overview {
  background: #e8e8e8;
  margin: 2rem;
  border-radius: 8px;
  padding: 5rem 2rem;
}
.btn.overview:hover{
  background: #fff;
}

@media screen and (max-width:900px){
  .btn.overview {
    width: 80%;
  }
}
#products,
#uoms,
#custFilter {
  margin: 0 4rem 3rem 2rem;
  width: 25% !important;
  color: #000;
}

.container {
  margin-right: auto !important;
  margin-left: auto !important;
}

.page-copy .crmEntityFormView, .page-copy .entitylist, .page-copy .popover-content{
    background-color: #fff;
    color: #000;
    border-radius: 8px;
    border:0;
    padding:1rem 1.2rem;
}

#EntityFormControl .crmEntityFormView, .page-copy .popover-content .modal-title{
    color:#000;
    background: white;
    border-radius: 3px;
    padding: 20px 0;
}
.modal-content .modal-title,
.page-copy .modal-content .modal-title{
  color:#000;
  font-size: 35px;
  max-width: 95%;
  margin: 1rem auto;
}

.page-copy .crmEntityFormView .table,
.page-copy .entitylist .table,
.page-copy .modal-content .table,
.page-copy .popover-content .table{
    font-size: 16px;

}
#EntityFormControl{
  margin-top:25px;
}

#EntityFormPanel h1,
#EntityFormPanel h2{
  font-size: 45px;
}
#EntityFormPanel h3,
#EntityFormPanel h4{
  font-size: 35px;
}
.tab-column legend.section-title,
#EntityFormPanel h1,
#EntityFormPanel h2,
#EntityFormPanel h3,
#EntityFormPanel h4{
  color:#000;
  max-width: 98%;
  margin: 2rem auto;
}

#EntityFormControl .crmEntityFormView .form-control[readonly][disabled],
#EntityFormControl .crmEntityFormView .form-readonly .form-control,
#EntityFormControl .crmEntityFormView .form-control,
#mainContent .form-control{
  background-color: #f6f6f6 !important;
  color: #000;
  border-radius: 2px;
  padding: 4px 12px;
}
.clearlookupfield.btn-default,
.launchentitylookup.btn-default,
.view-toolbar .input-group .btn-default,
#EntityFormControl .crmEntityFormView .btn-default,
.table .btn-default{
    background-color: var(--pfs-blue);
  padding: 4px 10px;
  vertical-align: middle;
  text-align: center;
}
.clearlookupfield.btn-default:hover,
.launchentitylookup.btn-default:hover,
#EntityFormControl .crmEntityFormView .btn-default:hover,
.table .btn-default:hover{
  color: #ffffff;
    background-color: #154a72;
}
.pagination > li > a, .pagination > li > span {
  color: #000;
}
#liquid_form{
  max-width: 85%;
  margin: 0 auto;
}
#tblProduct,
#tblData{
  float: none!important;
  background-color: #ffffff;
  color:#000;
  border-radius: 8px;
}
#addPODModal .modal-content .crmEntityFormView,
#addPODModal .modal-content .crmEntityFormView .form-control{
  background-color: #ffffff !important;
  color:#000;
}


/*SLIDER*/
.slideshow-container .mySlides {
  transition: all 2s linear;
  opacity: 0.2;
  visibility: hidden;
  display: none;
}
.slideshow-container img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: -10rem -4rem -6rem;
}

/* The dots/bullets/indicators */
.dotcontainer .dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dotcontainer .active {
  background-color: #717171;
}

/* Fading animation */
.mySlides.activeslide{
  transition: all 2s linear;
  opacity: 1;
  visibility: visible;
  display: block;
}