:root{
  --bs-primary-rgb: 3, 68, 130;
  --bs-primary: #034482;
  --lps-top-desktop: 154px;
  --lps-top-mobile: 214px;
  --lps-sticky-top-desktop: 84px;
  --lps-sticky-top-mobile: 214px;
  --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-navbar-color-bright: rgba(255, 255, 255, 0.7);
}

.btn-primary {
  --bs-btn-bg: #034482;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

body {
  background: transparent url(https://web.lps53.org/img/watermark.png) no-repeat scroll -19px 50px!important;
}

.navbar-fixed-top{
  background-color: var(--bs-primary);
}

.container-body {

}

.ms-signin:hover{
  filter: brightness(90%);
}

/*
$custom-spacer: 1rem;
$custom-spacers: (
        6: $custom-spacer * 5,
        7: $custom-spacer * 7,
        8: $custom-spacer * 10,
        9: $custom-spacer * 15,
        10: $custom-spacer * 20,
        11: $custom-spacer * 30,
        12: $custom-spacer * 40,
        13: $custom-spacer * 50,
        14: $custom-spacer * 75,
        15: $custom-spacer 100
);

$spacers: map-merge($spacers,$custom-spacers);
*/
/*$tooltip-max-width: 100%;*/

/*/ Adding custom LPS color to table variants
// This allows .table-lps class which sets background color to color specified for lps
// More colors and names can be added to this which will be appended to table-variants
$table-variants-custom: (
        "lps": $primary
);*/

/*/ Merges default variables table-variants with table-variants-custom defined above
$table-variants: map-merge($table-variants,$table-variants-custom);*/

/*/ Manually set background profile for top navbar*/
.navbar-fixed-top{
  background-color: var(--bs-primary);
}

/*/ Adds margin above and below hamburger for mobile view
// Sets width to 100% for hamburger in mobile view*/
.navbar-toggler{
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}


/*/ Set navbar nav link hover background color to 20% shade, default was not ideal*/
.nav-link:hover{
  background-color: color-mix(in srgb,var(--bs-primary) 80%, black 30%);
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
  cursor: not-allowed;
}

.nav-link:hover {
  color: white;
}

.navbar-text{
  color: var(--bs-navbar-color-bright);
}

.nav-link {
  color: var(--bs-navbar-color-bright);
}

/*/ Removes navbar y padding. This sets buttons at bottom of navbar for better look*/
.navbar {
  padding-top: 0rem;
  padding-bottom: 0rem;
  padding-left: 100px;
  padding-right: 100px;
}
/*/ Set navbar active color, currently unused*/
.navbar-dark:active {
  color: color-mix(in srgb, var(--bs-primary) 80%, black 20%);
}
/*/Set navbar tab border to primary color
//Doing this to leave border there but not show it. Change this color to have border again*/
.nav-tabs {
  border-color: var(--bs-primary);
}

/*/ Set navbar hover text color to white, default is primary color*/
.navbar-dark:hover {
  color: white;
}

.tooltip-inner {
  white-space: normal !important;  /* Allows wrapping */
  word-break: keep-all !important; /* Prevents breaking in the middle of words */
  max-width: 200px; /* Adjust width to control wrapping */
}

/*/ Set min and max limits to resize main content container depending on screen size
// This is because the fixed header changes sizes based on mobile vs desktop view*/
@media only screen and (max-width: 991px) {
  .main-content{
    padding-top: var(--lps-top-mobile);
  }
  footer{
    visibility: hidden;
  }
}

@media only screen and (min-width: 992px) {
  .main-content{
    padding-top: var(--lps-top-desktop);
  }
}

.img-desktop {
  display: none;
}

.img-mobile {
  height: 84px;
  width: auto;
  padding: 5px;
}

@media (min-width: 670px) {
  .img-mobile {
    display: none;

  }

  .img-desktop {
    display: block;

    /* The required Styles */

    width: 100%;

  }
}

@media (max-width: 670px){
  .row-fluid{
    width: 100%;
    display: flex;
    justify-content: center;
  }
}





/****** START OF SIDEBAR CSS ******/

.content-row {
    min-height: calc(100vh - var(--lps-sticky-top-desktop));
}

@media (max-width: 991.98px) {
    .content-row {
        min-height: calc(100vh - var(--lps-sticky-top-mobile));
    }
}

/* Sidebar column — remove the margin hack so the grid can align */
.sidebar {
    backdrop-filter: blur(5px);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

@media (min-width: 992px) {
    .sidebar { max-width: 240px; } /* keep if you like the narrower rail */
    .navbar { padding-left: 240px; padding-right: 240px;}
}

/* The sticky inner wrapper keeps the nav visible and scrollable */
.sidebar-sticky {
  position: sticky;
  top: var(--lps-sticky-top-desktop);
  height: calc(100vh - var(--lps-sticky-top-desktop));
  display: flex;
  flex-direction: column;
}

@media (max-width: 991.98px) {
  .sidebar-sticky {
    top: var(--lps-sticky-top-mobile);
    height: calc(100vh - var(--lps-sticky-top-mobile));
  }
}

.sidebar .nav-link:not(.active):hover {
    background-color: rgb(133 133 133 / 20%);
}

.nav-pills{
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}


/* Mobile/tablet: sidebar should push content down when expanded */
@media (max-width: 991.98px) {
  .sidebar-sticky {
    position: static;   /* not sticky on small screens */
    top: auto;
    height: auto;
  }
}

/* Desktop: keep the nice sticky behavior */
@media (min-width: 992px) {
  .sidebar-sticky {
    position: sticky;
    top: var(--lps-sticky-top-desktop);
    height: calc(100vh - var(--lps-sticky-top-desktop));
    display: flex;
    flex-direction: column;
  }
}

.sidebar-top{
  max-height: 60px;
}

/** Feedback warning in yellow (does not exist in bootstrap 5.3) **/
.is-warning {
  border-color: var(--bs-warning);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffc107' viewBox='0 0 16 16'%3e%3cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.964 0L.165 13.233c-.457.778.091 1.767.982 1.767h13.706c.89 0 1.438-.99.982-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%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);
  padding-right: calc(1.5em + 0.75rem);
}

.warning-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-warning);
}

.is-warning + .warning-feedback {
  display: block;
}

#global-alert{
}

/** Custom Card Hover Background **/
.card-hover:hover{
  background-color: color-mix(in srgb, var(--bs-card-cap-bg), black 7%);
}

/** Button Dropdown Carrot **/
.dropdown-toggle { outline: 0; }

.btn-toggle {
  background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
  background-color: rgb(133 133 133 / 20%);
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

[data-bs-theme="dark"] .btn-toggle::before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}

.btn-toggle[aria-expanded="true"] {
  background-color: rgb(133 133 133 / 20%);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: rgb(133 133 133 / 20%);
}