/* to fix an issue where the next button wraps below the previous button unnecessarily */
.actions>.col-md-6 {
    width: 100% !important;
}
/* when the next button does wrap, make sure there's spacing between the buttons */
.actions>.col-md-6>.btn-group {
    margin-bottom: 1rem;
}

/* initial styling for the help container */
.help-container {
    padding: 1rem;
    background-color: var(--funding-brand-neutral);
}
@media (max-width: 990px) {
  .help-column {
    background-color: var(--funding-brand-neutral);
  }
}

/* add some styling to system errors */
.entity-form>.alert-danger:not(.validation-summary){
    font-size: .9rem;
    border-left: 4px var(--funding-status-red-dark) solid;
}
.entity-form>.alert-danger:not(.validation-summary):before{
    content:"System Error: ";
    font-weight:700;
}

/* fix to datepicker being cut off if it's the last field in the form: put it above the field, and remove the little caret guy */
/* Not sure about this page-wrapper fix. Worried it might have unintended consequences */
#page-wrapper {
    overflow: visible !important;
}
table tbody tr:last-child .bootstrap-datetimepicker-widget {
    inset: -270px 0px auto auto !important;
}
table tbody tr:last-child .bootstrap-datetimepicker-widget:after {
    display:none !important;
}
table tbody tr:last-child .bootstrap-datetimepicker-widget:before {
    display:none !important;
}
/*visual updates to datetimepicker input */
.datetimepicker .input-group-addon.btn {
        border-top-right-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
        border-color: var(--bs-border-color);
        border-left: none;
        padding: .375rem .75rem;
        height: 100% !important;
        min-width: 64px;
}
.datetimepicker .input-group-addon.btn:focus {
        outline: none;
        background-color: var(--funding-status-neutral-light);
}
.datetimepicker .input-group-addon.btn span.fa {
        font-size: 1rem;
        line-height: 1.5rem;
        padding: 0px;
}
.datetimepicker input {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        border-color: #949494;
        border-right: 2px solid;
        /* allows the selection widget to be on the same line as the text input */
        width: auto !important;
}
input:not([type="button"]), select, textarea {
        border-color: var(--bs-border-color) !important;
}

/* REMOVING FOR NOW: media rule for large screen sizes to avoid super large inputs and text boxes */
@media (min-width:1080px){
    /*create a max-width to avoid head-panning*/
    #page-content{
      /*max-width: 800px;*/
    }
    /*let subgrids be an exception, so that columns don't get cut off*/
    #page-content .subgrid{
      /*width: 75vw;*/
    }
}


/*updates to the error messages on application*/

.validation-summary .fa-info-circle:before {
    content: "\f06a"; /*changing the icon to exclamation point*/
    color: var(--funding-status-red-dark);
    font-size: .8rem;
}
.validation-summary{
    border-left: solid var(--funding-status-red-dark) 4px;
    margin-bottom: 32px;
}
.validation-header{
    font-size: 1.2rem !important;
    font-weight: 700;
}
.validation-summary>ul>li {
    font-size: 1rem ;
}
li:not(:last-child) {
    margin-bottom: 4px;
}

/*animation border blink*/
.validation-summary{
    animation: borderblink 1.2s;
    animation-iteration-count: 10;
}
@keyframes borderblink {
  50% {
    border-left-color: transparent;
  }
}

/***********Added 8/28/25*********/
/* Application styles for enhanced form design */
html[dir=ltr] .crmEntityFormView .cell input[type=text], html[dir=ltr] .crmEntityFormView .cell select, html[dir=ltr] .crmEntityFormView .cell textarea {
    float: unset; /* This is to fix the issue of a metadata description below the field covering the input. */
}
label{
    margin-bottom: 4px;
}

.description{
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.4rem;
    color: var(--funding-text-dark);
    margin-bottom: 8px !important;
}
.description:not(:has(.alert)){
    background: var(--funding-brand-neutral);
    padding: 8px 16px;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--funding-brand-dark);
}
.description.below{
    margin-top: 8px !important;
}
.tab-title{
    font-size: 2rem;
    font-weight: 700;
    padding-bottom: 16px;
    margin-bottom: 1rem;
}
.section-title{
    font-size: 1.4rem;
    margin-bottom: 24px !important;
}
.section-title .description{
    font-size: 1rem;
    color: var(--funding-text-dark);
    border-left-width: 6px;
    border-left-style: solid;
    border-left-color: var(--funding-brand-dark);
    padding: 16px 16px;
    background: var(--funding-brand-neutral);
    margin-top: 8px !important;
}
.tab-title .description{
    font-size: 1rem;
    color: var(--funding-text-dark);
    border-left-width: 8px;
    border-left-style: solid;
    border-left-color: var(--funding-brand-dark);
    padding: 16px 16px;
    background: var(--funding-brand-neutral);
    margin-top: 8px !important;
}
.field-label{
    font-weight: normal;
}
.crmEntityFormView .cell{
    padding-left: 0px;
}
td.cell[colspan="1"]{
    padding-right: 0px;
    padding-bottom: 15px;
}
td.clearfix.cell:empty {
    padding: 0px;
}

.crmEntityFormView .cell div.table-info.required label:after {
    color: var(--funding-status-red-dark);
}

/***********Added 8/15/25*********/
/*color styles for use on homepage and grant milestones*/
.badge-primary {
    background-color: var(--funding-status-primary-light);
    border-color: unset;
}
.badge-neutral {
    background-color: var(--funding-status-neutral-light);
    border-color: unset;
}
.badge-yellow {
    background-color: var(--funding-status-yellow-light);
    border-color: unset;
}
.badge-red {
    background-color: var(--funding-status-red-light);
    border-color: unset;
}
.badge-green {
    background-color: var(--funding-status-green-light);
    border-color: unset;
}
.badge-maroon {
    background-color: var(--funding-tag-maroon);
    border-color: unset;
}
.badge-teal {
    background-color: var(--funding-tag-teal);
    border-color: unset;
}
.badge-purple {
    background-color: var(--funding-tag-purple);
    border-color: unset;
}

/*updates to styling of application left nav */
#custom-sidebar {
    padding-left: 0px;
    padding-right: 0px;
}
#custom-menu-title {
    text-align: left !important;
    padding-left: 12px;
    padding-right: 12px;
    font-weight: 500;
    font-size: 1.3rem !important;
    margin-bottom: 12px !important;
}
.custom-nav-link:not(.completed, .custom-nav-active)::before {
    content:"☐";
    margin-right: .5rem;
    color: #fff;
}
.custom-nav-link.completed{
    background-color: unset !important;
}
.custom-nav-link.completed::before {
    content:"☑";
    margin-right: .5rem;
    color: #fff;
}

/*overriding button styles for Previous button*/
#PreviousButton {
    border-color: var(--funding-action-active);
}

/***********Added 7/1/25 after Go-Live******/
/* remove the Private site banner so that screenshots match production */
.private-mode-banner{
    display:none;
}


/**** UI improvements to multi-select input---Updated 7/3/25--- ****/

/* match the border to the standard dropdown */
.msos-container {
    border-radius: .375rem;
    border-color: #ced4da !important;
    }

/* make the caret button fill the space so that it's more easily clicked */
.msos-caret-button {
    min-width: 56px !important;	       
    width: 100% !important;    /* make the button stretch the full width it is given */
    /* match the caret to the standard dropdown */
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    position: absolute; /* make the button stretch the full width of the container */
}
.msos-caret-button .msos-glyph {
    opacity: 0; /* hide the caret glyph but keep the height intact, it's being replaced by the background image above */
}

/* remove the text input container */
.msos-input-container {
    display: none !important;
}

/* Add a label back in to the input since it's removed with the text input */
.msos-caret-container::before {
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem !important;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    content: "Select";
}

/* make the "Select" text justify to the left */
.msos-caret-container {
    justify-content: left !important
}

/* Add a little roundness to the selected items */
.msos-selected-display-item {
    border-radius: 4px;
}

/* make sure the dropdown button doesn't hide (default behavior hides the inputs after selection)*/
.msos-inner-container {
    opacity: 100 !important;
    /* display: block !important; */
}
/***********End Added 7/1/25 after Go-Live******/




/**** UI improvements to lookup input ****/
/* make the whole input clickable by making the search button full-width */
button.btn.btn-default.launchentitylookup {
  width: 100%;
  /* make full width */
  position: absolute;
  /* make the button on top of the input */
  text-align: right;
  /* align the icon to the right */
  border-radius: 6px !important;
  /* fix the borders */
  border-color: transparent;
  /* otherwise it shows two borders */
  background-color: transparent;
  /* otherwise it blocks the input */
}

/* remove the clear button as adds unnecessary complexity and there is a clear button on the lookup modal */
button.btn.btn-default.clearlookupfield {
  display: none !important;
}

/* adjust the input field to accommodate the above changes */
input.form-control.lookup {
  padding-right: 36px;
  /* give extra padding to accommodate search button */
  border-radius: 6px !important;
  /* fix borders */
}

/*** UI Improvements to Checkboxes ***/

/* Lookup checkbox circle */
span.fa.fa-fw.fa-check {
  border-radius: 100px;
  width: 14px;
  height: 14px;
}

span[role=checkbox].fa.fa-fw {
  border-radius: 45px;
  height: 17px;
  width: 17px;
  font-size: 11px;
  padding-top: 3px;
}

/* UI improvement to checkbox alignment */
.checkbox-cell .table-info {
  max-width: 90%;
  /* limit the max-width of checkbox labels to ensure proper alignment. this seems to work down to 209px screen width */
}

/* UI improvement to checkbox size - making the checkboxes larger to be more visually prominent */
.checkbox input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin-top: 5px;
}

/**** UI improvements to subgrid buttons ****/
/*make these buttons smaller, white background */
.btn.action {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 12px;
  background-color: white;
  color: var(--bs-btn-active-bg) !important;
}

/* add space above the subgrid buttons */
.view-toolbar.grid-actions.clearfix {
  padding-top: 8px;
  margin-top: 8px;
}

/* make action button circular */
.dropdown.action button.btn.btn-default {
  padding-bottom: 4px;
  padding-top: 4px;
  padding-left: 8px;
  padding-right: 8px;
}

/*make the font color match the border color */
.btn.action.create-action {
  color: var(--funding-action-active);
  border-color: var(--funding-action-active);
}

.btn.action.create-action:hover {
  color: var(--funding-action-active) !important;
  border-color: var(--funding-action-active);
}

/*make the font color match the border color */
.btn.btn-info.action {
  color: var(--funding-brand-dark) !important;
  border-color: var(--funding-brand-dark);
}
.btn.btn-info.action:hover {
  color: var(--funding-brand-dark) !important;
  border-color: var(--funding-brand-dark);
}

/*make subgrid font smaller*/
.view-grid.table-responsive {
  font-size: 14px;
}

/**** UI improvements to readonly text input ****/
/*make the background of readonly text inputs grey */
input[type=text][readonly] {
  background-color: var(--bs-gray-100);
}

/* General HCAI Theme template */
html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header__skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: #004891;
  /* Bootstrap primary color */
  color: white;
  opacity: 0;
}

.header__skip-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

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

.header__hcai-logo {
  overflow-wrap: break-word;
}

.header__hcai-logo a {
  color: black;
  text-decoration: none;
}

.header__hcai-logo img {
  height: 33px;
  width: auto;
}

.header__hcai-logo span {
  font-size: 12px;
  line-height: 13px;
}

#hcai-nav {
  font-size: 14px;
  padding-bottom: 0px;
}

#titleBar {
  border-bottom: 4px solid #004891;
}

#titleBar h1 {
  font-size: 24px;
  font-weight: bold;
}

#user-menu,
#user-menu * {
  font-size: 14px;
  color: black;
}

#user-menu::before {
  content: "";
  display: inline-block;
  vertical-align: -.6em;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-person-circle' viewBox='0 0 16 16'><path d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0'/><path fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  border: none;
  height: 21px;
  width: 21px;
}

.header__user-menu .dropdown-menu.show {
  z-index: 1025;
}

.header__user-menu .dropdown-menu form {
  min-width: 250px;
}

#main-menu {
  background-color: #E1F3FD;
}

#main-menu .nav-link {
  color: black;
}

#main-menu .nav-link:hover {
  text-decoration: underline;
}

#hcai-nav .nav-link {
  text-decoration: none;
}

#hcai-nav .nav-link:hover {
  text-decoration: none;
}

#main-menu .active {
  background-color: white;
  font-weight: bold;
}

#main-menu .dropdown-toggle[aria-expanded="true"] {
  background-color: white;
}

#main-menu :has(.dropdown-toggle[aria-expanded="true"]) .active {
  background-color: #E1F3FD !important;
}

#main-menu .dropdown-mega .dropdown-menu.desktop-view {
  left: 50%;
  transform: translateX(-50%);
}

#main-menu .disabled {
  color: #6c757d;
}

.footer {
  background-color: #004891;
  color: rgba(255, 255, 255, 0.69);
  font-size: 12px;
}

.footer__menu .nav-item {
  color: white;
  position: relative;
  text-decoration: underline;
}

.footer__menu .nav-item:hover {
  text-decoration: none;
  top: -1px;
}

/* updated in bootstrap file to use funding colors
.btn-primary {
  background-color: #1375d8;
  border-color: #1375d8;
  align-items: center;
  border-radius: 200px;
  display: inline-flex;
  font-size: 16px;
  font-weight: bold;
  justify-content: center;
  margin: 15px 0;
  word-wrap: anywhere;
  padding: .61rem 1.25rem;
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  width: auto;
}

.btn-primary:hover {
  background-color: #004891;
  border-color: #004891;
}
*/

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
span,
a {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.user-menu-link {
  font-size: 14px;
  color: black;
}

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em .25em !important;
  color: #000 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-position-x: center;
  background-position-y: center;
  background-size: .6em;
  background-repeat: no-repeat;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: transparent;
  border: 0;
  border-radius: .375rem;
  opacity: .5 !important;
  /*transform: translate(-5px, -2rem);*/
}

/* 
 Fix for hiding close button value="x" (e.g. on profile)
 and position within parent
*/
input[type="submit"].btn-close {
    text-indent: -9999px;
    float: initial;
    position: absolute;
    top: 5px;
    right: 5px;
}

/* Fix spacing on radio button inputs, 
 `!important` is not the best resolution here but there are highly specific
 class chains being assigned at the crm entity level to overcome and 
 getting too specifix here may introduce brittleness */
.boolean-radio-cell input[type=radio] {
  margin: 5px 5px 5px 10px !important;
}

.picklist input[type=radio] {
  margin: 5px 5px 5px 0px !important;
}

/*.btn-default, .btn-info, .btn-primary{
align-items: center;
border-radius: 200px !important;
display: inline-flex;
font-size: 16px;
font-weight: bold;
justify-content: center;
margin: 15px 0;
word-wrap: anywhere;
padding: .61rem 1.25rem;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
width: auto;
}*/

.btn {
  border-radius: 20px !important;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.launchentitylookup {
  border-top-left-radius: 1px !important;
  border-bottom-left-radius: 1px !important;
  padding-bottom: 5px;
}

.input-group-addon {
  border-top-left-radius: 1px !important;
  border-bottom-left-radius: 1px !important;
  padding-bottom: 6px;
}

.view-search .btn-default {
  border-top-left-radius: 1px !important;
  border-bottom-left-radius: 1px !important;
  padding-bottom: 3px;
  padding-top: 6px;
}

.clearlookupfield {
  border-radius: 2px !important;
  padding-bottom: 5px;
  padding-top: 8px;
}

.view-grid {
  min-height: 13rem !important;
}

ul {
  list-style-position: outside !important;
}

/* banner container & overflow */
.banner {
  position: relative;
  overflow: hidden;
  border-radius: .25rem;
  flex-wrap: wrap;
  padding-top: 7px;
  padding-bottom: 7px !important;
  margin-bottom: 0px;
}

/* top & bottom stripes */
.banner-border-top,
.banner-border-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  overflow: hidden;
}

.banner-border-top {
  top: 0;
}

.banner-border-bottom {
  bottom: 0;
}

/* marquee effect */
/*.marquee {
      width: 200%;
      height: 100%;
      background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.5) 0,
        rgba(255,255,255,0.5) 10px,
        transparent 10px,
        transparent 20px
      );
      /*animation: marquee 80s linear infinite;
    }

    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
*/
@media (max-width: 576px) {

  /* Ensure the banner never collapses too small */
  .banner {
    min-height: 100px;
    /* adjust up/down to taste */
    padding: 1rem;
    /* give it breathing room */
  }

  /* Stack icon, title & message vertically */
  #banner .container {
    flex-direction: column;
    /* instead of row */
    text-align: center;
    /* center all text */
  }

  /* Make the icon a bit larger for touch targets */
  #banner-icon {
    font-size: 2rem;
    /* larger icon */
    margin-bottom: 0.5rem;
    /* space below icon */
  }

  /* Full-width title + message, with a little spacing */
  #banner-title,
  #banner-message {
    display: block;
    width: 100%;
    margin: 0.25rem 0;
    font-size: 0.9rem;
    /* slightly smaller text if needed */
  }

  /* Move close-button under content (optional) */
  #banner-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }
}

/* Help menu styles */
.help-column {
  background-color: white;
}
.help-container {
  color: var(--funding-text-dark)
}
.help-mailbox {
  margin-top: 1rem;
}

.entity-grid .view-grid {
    overflow-x: inherit !important;
}

.table-responsive {
    overflow-x: inherit !important;
}

.h3, h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.crmEntityFormView .section-title {
    margin-bottom: 5px !important;
}

div#EntityFormPanel {
    margin-top: 20px;
}

.tab-title {
    font-size: 1.5rem !important;
}

.control{
  margin-right: 1rem !important;
}

.page-header > h1 {
  font-size: 2rem !important;
}

.filename {
    min-width: 165px !important;
}