/**
 * site.scss is the main SASS file which will become site.css when compiled. All
 * SASS partials and imports are included into this file, in cascading order,
 * during the compile.
 *
 * In general, all CSS should be kept to 80 characters wide, with notable
 * exceptions including URLs and gradient syntax.
 *
 * Please reference here for top-level CSS guidelines: https://cssguidelin.es/
 *
 * SASS preprocessor notes beginning with a double forward slash notes will not
 * be included in the compiled CSS.
 *
 */
/*############################# 80 CHARACTERS WIDE ###########################*/
/*
 * Variables
 * 
 * SASS (preprocessor) variables. These are compiled away into CSS at
 * build time.
 *
 */
/* Small devices (landscape phones, 576px and up) */
/* Medium devices (tablets, 768px and up) */
/* Large devices (desktops, 992px and up) */
/* Extra large devices (large desktops, 1200px and up) */
/*
 * Root
 * :root variables are native CSS variables that are not 'compiled away' like
 * SASS variables, allowing them to be manipulated later on in the browser.

 * Most of these pertain to Telerik UI overrides and the WS7 theme engine.
 *
 */
/*
    Accent              --bs-primary
    Color Back          --bs-light
    Color Back Darker   --bs-gray-200
    Color Back Darkest  --bs-gray-400
    Color Back Lighter  --bs-white
    Color Fore          --bs-dark
    Color Fore Lighter  --bs-gray-700
    Color Fore Lightest --bs-secondary
 */
:root {
  --border-accent: var(--size-smallest) var(--bs-primary) solid;
  --border-back: var(--size-smallest) var(--bs-light) solid;
  --border-back-darkest: var(--size-smallest) var(--bs-gray-400) solid;
  --border-fore: var(--size-smallest) var(--bs-dark) solid;
  --border-fore-lighter: var(--size-smallest) var(--bs-gray-700) solid;
  --border-fore-lightest: var(--size-smallest) var(--bs-seconary) solid;
  --border-green: var(--size-smallest) var(--color-green) solid;
  --border-red: var(--size-smallest) var(--color-red) solid;
  --box-shadow-sm-dark: inset 0 0 0 2px var(--color-back-translucent);
  --box-shadow-md-dark: inset 0 0 0 3px var(--color-back-translucent);
  --box-shadow-lg-light: inset 0 0 0 0.25rem var(--color-back-lighter-translucent);
  --box-shadow-back: 0 0 0 calc(var(--font-size-medium) * 0.25) var(--color-back-darker);
  --box-shadow-focus: 0 0 0 0.25rem var(--bs-emphasis-color);
  --box-shadow-focus-inset: inset 0 0 0 0.25rem var(--bs-emphasis-color);
  --box-shadow-accent: 0 0 0 calc(var(--font-size-medium) * 0.25) var(--bs-primary);
  --outline-accent: calc(var(--font-size-medium) * 0.25) solid var(--color-accent-translucent);
  --box-shadow-invalid: 0 0 0 calc(var(--font-size-medium) * 0.25) var(--color-red-semitranslucent);
  --color-accent: #285582;
  --color-accent-translucent: #28558225;
  --color-back: #FAFAFA;
  --color-back-translucent: #00000025;
  --color-back-darker: #EEEEEE;
  --color-back-darkest: #E1E1E1;
  --color-back-lighter: #FFFFFF;
  --color-back-lighter-translucent: #ffffff80;
  --color-fore: #202020;
  --color-fore-lighter: #505050;
  --color-fore-lightest: #606060;
  --color-green: #055F50;
  --color-red: #A02346;
  --color-red-semitranslucent: #A02346E6;
  --font-family: Segoe UI, Helvetica, Arial, sans-serif;
  --font-size-large: 1.25rem;
  --font-size-larger: 2.25rem;
  --font-size-largest: 3.125rem;
  --font-size-medium: 1rem;
  --font-size-small: 0.875rem;
  --font-size-smaller: 0.75rem;
  --font-size-smallest: 0.625rem;
  --height-control: 2.75rem;
  --height-footer: 6.875rem;
  --height-grid: 46.875rem;
  --height-info-bar: 2.1875rem;
  --height-navbar: 4.6875rem;
  --height-title-bar: 2.8125rem;
  --radius-blur: var(--size-smaller);
  --radius-border: var(--size-smaller);
  --size-checkbox: calc(var(--height-control) / 2);
  --size-large: 3.125rem;
  --size-larger: 6.25rem;
  --size-largest: 12.5rem;
  --size-medium: 1.5625rem;
  --size-small: 0.9375rem;
  --size-smaller: 0.3125rem;
  --size-smallest: 0.0625rem;
  --width-selector: 2.1875rem;
}

[data-bs-theme=dark] .btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-body-color);
}

/**
 * KendoUI
 *
 * Overrides of the Telerik UI for Blazor styles. Be especially cautious editing
 * classes here, the selector structure is designed to replicate
 * Telerik UI's native selectors (as succinctly as possible) to ensure they
 * override Telerik's defaults.
 *
 * The selectors in this file should, in general, mimic the selectors found in
 * Telerik UI's 'all.scss' file.
 *
 */
/*------------------------------------*\
  #K-DRAWER
\*------------------------------------*/
/**
 * 1. Telerik default transition; width is specified so theme colors do not
 *    transition.
 * 2. Telerik default transition is used here to smooth motion when the drawer
 *    expands/contracts the content.
 * 3. Set to ensure border is visible when drawer is collapsed.
 * 4. If drawer is expanded.
 * 5. If drawer is collapsed.
 * 6. Highlight selected item in the drawer. Disabled as it does not accurately
 *    indicate the current page. This is a wishlist TODO.
 */
.k-drawer {
  height: 100%;
  -webkit-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out; /* [1] */
  z-index: 1; /* [3] */
}
.k-drawer-container {
  height: 100%;
}
.k-drawer-mini .k-drawer-wrapper {
  width: calc(2rem + 24px) !important;
}
.k-drawer-wrapper {
  height: 100%;
  -webkit-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out; /* [1] */
}
.k-drawer-content {
  height: 100%;
  max-width: 100%;
  -webkit-transition: max-width 300ms ease-in-out;
  transition: max-width 300ms ease-in-out; /* [2] */
}
.k-drawer-item {
  padding: 0;
}
.k-drawer-item.k-selected, .k-drawer-item.k-selected:hover, .k-drawer-item.k-selected.k-hover {
  color: unset;
  background-color: unset;
}
.k-drawer-items {
  height: 100%;
}
.k-drawer-items ul {
  height: 100%;
}

@media (min-width: 992px) {
  .k-drawer {
    height: 100% !important;
    position: fixed !important;
  }
  .k-drawer-container {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
  }
  .k-drawer-expanded .k-drawer-content {
    max-width: calc(100% - 241px); /* [4] */
  }
  .k-drawer-content {
    max-width: calc(100% - 56px); /* [5] */
  }
}
.k-level-1 a, .k-level-1 button {
  padding-left: var(--size-small) !important;
}

.k-selected .nav-link {
  /* [6] */
  /*color: var(--color-accent);
  text-decoration: none !important;*/
}

/*------------------------------------*\
  #K-ICON
\*------------------------------------*/
/**
 * '.k-icon' extended in components/_sidebar.scss
 */
.k-icon {
  font-size: 24px;
}

/*------------------------------------*\
  #K-TOOLBAR
\*------------------------------------*/
/**
 * 1. This button should be hidden by default but the k-hidden class is not
 *    applied for unknown reasons so we manually hide here to prevent spacing
 *    issues.
 */
.k-toolbar-overflow-button {
  display: none; /* [1] */
}

/*------------------------------------*\
  #K-WINDOW
\*------------------------------------*/
.k-window--fullscreen {
  width: 100% !important;
  min-height: 100dvh !important;
  border: 0;
}
.k-window--fullscreen .k-window-titlebar {
  border: 0;
  font-size: calc(1.325rem + 0.9vw);
}
.k-window--fullscreen .k-window-title {
  font-size: calc(1.325rem + 0.9vw);
  padding: var(--size-small) 0 0 0;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-body-color);
}

/*
 * Elements
 *
 * Styling for default html elements (tags) such as <a>, <body>, etc.
 *
 * Properly-scoped class selectors are preferred to directly styling html
 * elements, so this file should be small.
 *
 * For example, 'div' selectors in general represent poor selector intent, for example.
 * See https://cssguidelin.es/#selector-intent for reference.
 *
 */
body, html {
  height: 100%;
}

svg {
  width: 24px;
}

.forceRepaint {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1); /* Applying a transformation */
}

[data-toggle-password] {
  min-width: 4rem;
}

.welcome-page .logo {
  width: 64px;
}

.body-container {
  margin-top: 60px;
  padding-bottom: 40px;
}

.container--compact {
  max-width: 992px;
}

.welcome-page li {
  list-style: none;
  padding: 4px;
}

.logged-out-page iframe {
  display: none;
  width: 0;
  height: 0;
}

.grants-page .card {
  margin-top: 20px;
  border-bottom: 1px solid lightgray;
}
.grants-page .card .card-title {
  font-size: 120%;
  font-weight: bold;
}
.grants-page .card .card-title img {
  width: 100px;
  height: 100px;
}
.grants-page .card label {
  font-weight: bold;
}

.nav-page {
  border-bottom: 1px solid var(--bs-border-color);
}

.tabstrip-notabs .k-tabstrip-items {
  display: none !important;
}

.tabstrip-noborder .k-tabstrip-items-wrapper {
  border: none !important;
}

.tabstrip-noborder .k-tabstrip-content {
  border: none !important;
}

/*
 * Footer
 *
 * Styles pertaining to layout of the footer element.
 *
 */
footer {
  background-color: var(--bs-gray-700);
  margin-top: auto;
  /*bottom: 0;*/
  /*position: absolute;*/
  /*margin-top: calc(-1 * var(--height-footer));*/
}

.footer__content {
  height: var(--height-footer);
}

.footer__content a {
  color: var(--bs-light);
}

.footer__content a:focus, .footer__content a:hover {
  color: var(--bs-gray-400) !important;
}

/*
 * Form
 *
 * Overrides and customizations for the Bootstrap form component(s).
 *
 */
/*------------------------------------*\
  #FORM
\*------------------------------------*/
/**
 * 1. Adds padding to all column-based forms to provide some
 *    separation from the control below. Targetting with mb-3
 *    is not best practice.
 */
form .mb-3 label {
  padding-bottom: 0.25rem; /* [1] */
}

/*------------------------------------*\
  #FORM-CHECK
\*------------------------------------*/
/**
 * 1. Formatting overrides to the Bootstrap checkbox style
 *    These make the defaults more accessible and enable clicking
 *    anywhere on the checkbox line to activate the control.
 * 2. Min height to allow Kendo inputs to grow bigger.
 * 3. For login page where everything is centered.
 */
:not(.form-check-inline).form-check { /* [1] */
  min-height: var(--height-control); /* [2] */
  position: relative;
  border-radius: var(--radius-border);
}

:not(.form-check.form-check-inline) .form-check-input {
  cursor: pointer;
  height: var(--size-checkbox);
  width: var(--size-checkbox);
  margin-top: 0;
}

:not(.form-check.form-check-inline) > .form-check-label {
  cursor: pointer;
  line-height: var(--size-checkbox);
  padding-left: calc(var(--size-checkbox) + var(--size-small));
  width: 100%;
  position: absolute;
  left: 0;
}
:not(.form-check.form-check-inline) > .form-check-label[for=Input_RememberMe] {
  text-align: left; /* [3] */
}

/*------------------------------------*\
  #FORM-CONTROL
\*------------------------------------*/
/**
 * 1. Min height to allow Kendo inputs to grow bigger.
 */
.form-control {
  min-height: var(--height-control); /* [1] */
}

.form-control--list {
  list-style: none;
  padding: var(--size-small);
  height: auto;
  max-height: unset;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.form-control--list > li {
  margin: var(--size-smaller);
}

/*------------------------------------*\
  #FORM-GROUP
\*------------------------------------*/
.form-group {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--size-small);
  margin-top: var(--size-smaller);
}
.form-group__header {
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-emphasis-color);
  font-size: var(--font-size-large);
  padding: 0 1rem var(--size-smaller) 1rem;
}

/*------------------------------------*\
  #FORM-SELECT
\*------------------------------------*/
/**
 * 1. Min height to allow Kendo inputs to grow bigger.
 * 2. Standalong custom class for smaller inputs. Should NOT be used in
 *    conjunction with '.form-control'.
 */
.form-select {
  min-height: var(--height-control); /* [1] */
}

.form-select-sm { /* [2] */
  border: 0 !important;
  /*border-bottom: 2px solid var(--bs-gray-700) !important;*/
  border-radius: 0 !important;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  font-size: var(--font-size-smaller);
  /*letter-spacing: .15em;*/
  min-height: auto;
  padding: 0.25em;
}
.form-select-sm:focus, .form-select-sm:active {
  outline: 0;
  border: 0 !important;
  /*border-bottom: 2px solid var(--bs-primary) !important;*/
  -webkit-box-shadow: none;
          box-shadow: none;
}
.form-select-sm ~ label {
  font-size: var(--font-size-smaller);
}

/*------------------------------------*\
  #FORM-SINGLE-LINE-INPUT
\*------------------------------------*/
/**
 * 1. form-single-line-input was created for checkboxes and other
 *    cases where an input and its label should be placed on the
 *    same line.
 */
.form-single-line-input { /* [1] */ }
.form-single-line-input__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.form-single-line-input__container:has(~ .form-single-line-input__container) {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: var(--size-small);
}
.form-single-line-input__input-container {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
}
.form-single-line-input__label {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  cursor: pointer;
}

/*------------------------------------*\
  #INPUT-GROUP
\*------------------------------------*/
/**
 * 1. Ensures the input group buttons in a lookup list have
 *    correctly sized icons.
 * 2. Ensures emojis are rendered in the intended font color
 */
.input-group > .btn { /* [1] */
  padding: 0;
  width: var(--height-control);
}

.input-group-icon {
  font-family: monospace; /* [2] */
}

/*------------------------------------*\
  #VALIDATION
\*------------------------------------*/
/**
 * 1. Add a border to the default jquery-validation-unobtrusive input class.
 *    jQuery validate is a utility of ASP.NET Core MVC.
 *    Also add a border to Blazor validated forms that set '.invalid'.
 * 2. Important to support Kendo UI overrides.
 * 3. Copied from Bootstrap to add validation icons to asp invalid forms,
 *    as long as they are not the Accent Color input.
 * 4. Bootstrap tooltip overrides.
 * 5. Bootstrap override so they touch the bottom of the form.
 * 6. Align the tooltip right (looks better on mobile),
 *    and add appropriate padding via Bootstrap's gutter variable.
 * 7. Display the Bootstrap tooltip based on jquery-validation-unobtrusive
 *    field styling, a utility of ASP.NET Core MVC.
 * 8. Display the Bootstrap tooltip based on Blazor validation, which sets
 *    the form to '.invalid' if validation fails.
 */
.input-validation-error, .invalid { /* [1] */
  border: var(--border-red) !important; /* [2] */
}
.input-validation-error:not([type=color]), .invalid:not([type=color]) {
  /* [3] */
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23A02346'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.invalid-tooltip { /* [4] */
  background-color: var(--color-red-semitranslucent);
  font-size: var(--font-size-smaller);
  border-radius: calc(var(--font-size-medium) * 0.25);
  margin-top: 0; /* [5] */
  right: calc(var(--bs-gutter-x) * 0.5); /* [6] */
}
.invalid-tooltip.field-validation-error {
  display: block; /* [7] */
}
.invalid-tooltip a {
  color: var(--bs-light);
}
.invalid + .invalid-tooltip {
  display: block; /* [7] */
}

/*
 * Info bar
 *
 * Styles pertaining to the weighstation info bar containing the current site,
 * lane, and user name.
 *
 */
.info-bar {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  border-bottom: var(--border-fore);
  font-size: 1.16625rem;
  font-weight: bold;
}
.info-bar .row {
  height: var(--height-info-bar);
}
.info-bar .col-4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-bar {
  background-color: yellow;
  outline: solid black 1px;
  height: var(--height-control);
}
.feedback-bar a {
  color: black;
}

/*
 * Navbar
 *
 * Overrides and customizations for the Bootstrap navigation component(s).
 *
 */
/*------------------------------------*\
  #NAVBAR
\*------------------------------------*/
/**
 * 1. Ensure that the nav-links are clipped and the sidebar does not scroll on desktop
 *    if the main sidebar is expanded.
 *
 * '.navbar__sidebar' and '.navbar--mobile-menu__dropdown' are extended in base/_breakpoints.scss
 */
.navbar--sidebar {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.navbar--sidebar:first-child {
  max-width: 100%;
}
.navbar--sidebar .nav-item {
  border-bottom: var(--border-back-darkest);
  border-bottom-width: calc(2 * var(--size-smallest));
}
.navbar--sidebar .nav-item[aria-selected=true] {
  border-bottom-color: var(--bs-primary);
  border-bottom-width: var(--size-smaller);
}
.navbar--sidebar .nav-link {
  padding: 0 var(--size-small);
  line-height: var(--height-control);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navbar--sidebar .nav-link.active {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  font-weight: bold;
}
.navbar--mobile-menu__dropdown {
  width: 100%;
  margin: var(--size-medium) 0;
}
.navbar--mobile-menu__dropdown::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.navbar--mobile-menu .nav-link.active {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  font-weight: bold;
}
.navbar--mobile-menu .nav-link {
  padding: 0 var(--size-small);
  line-height: var(--height-control);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navbar--mobile-menu .nav-item {
  border-bottom-color: var(--bs-border-color);
  border-bottom-style: solid;
  border-bottom-width: var(--size-smallest);
}
.navbar--mobile-menu .nav-item[aria-selected=true] {
  border-bottom-color: var(--bs-primary);
}

.sidebar {
  height: 100%;
}
.sidebar__container {
  height: 100%;
}
.sidebar__link {
  width: 100%;
  height: 50px;
  border: 0;
  background-color: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--font-size-large);
  padding: 1px 6px !important;
}
.sidebar__link:focus, .sidebar__link:active:focus {
  -webkit-box-shadow: var(--box-shadow-focus-inset);
          box-shadow: var(--box-shadow-focus-inset);
}
.sidebar__link svg {
  /*            padding: 8px;
              height: 100%;
              width: auto;
              box-sizing: content-box;
              stroke: none;
              overflow: visible;
              fill: currentColor;
              width: unset;
              height: unset;*/
}
.sidebar__link .k-icon {
  padding: 8px;
  height: unset;
  width: unset;
}
.sidebar__link__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px;
}
.sidebar__search {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: none;
  transition: none;
  display: grid;
  padding: 0;
  -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
[expanded] .sidebar__search {
  max-height: 999px;
  /*transition: max-height 450ms cubic-bezier(0.4, 0.0, 0.2, 1);*/
  -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: var(--size-smaller);
}

.toggle-drawer {
  position: absolute;
  height: 40px;
  width: 40px;
  padding: 0px;
  border: 0;
  background-color: transparent;
  color: var(--bs-light);
  cursor: pointer;
  margin-left: 16px;
}
.toggle-drawer svg {
  stroke: none;
}

/**
 * Breakpoints
 *
 * Styles that are applied at specific screen sizes for responsive elements 
 * should be included in this file within the appropriate media query below.
 *
 */
@media (min-width: 992px) {
  .navbar--mobile-menu__dropdown {
    display: none;
  }
  .navbar--sidebar {
    overflow-x: auto;
  }
  .navbar--sidebar .nav-item {
    border-bottom: 0;
    border-right: var(--border-back-darkest);
    border-right-width: calc(2 * var(--size-smallest));
  }
  .navbar--sidebar .nav-item[aria-selected=true] {
    border-right-color: var(--bs-primary);
    border-right-width: var(--size-smaller);
  }
}
/*# sourceMappingURL=wwwroot\css\site.css.map */