@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body, #app {
  height: 100%;
  overflow: auto;  /* Automatically enables scroll bar if content overflows */
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Override to allow modals to scroll rather than growing larger than the screen. */
.blazored-modal {
  max-height: 90vh;
  overflow-y: auto;
}

/* Override to give modal headers a bottom border and remove padding. */
.bm-header {
  padding: 0 !important;
  border-bottom: solid thin lightgray;
}

/* Remove border/box from icons when wrapped within a button */
.icon-button {
  padding: 0;
  border: none;
  background: none;
}

/* Right align the navbar dropdown menus relative to their buttons */
.dropdown-menu-right {
  right: 20%
}

/* Grid class to hide vertical borders in header and body. Border-style prevents search box container upper border. */
.grid-no-borders {
  border-left: 0px;
  border-right: 0px;
  border-style: none;
}

  .grid-no-borders.dxbl-grid .dxbl-grid-table > tbody > tr > td {
    border-left-width: 0px;
  }

  .grid-no-borders.dxbl-grid .dxbl-grid-table > thead > tr > th {
    border-left-width: 0px;
  }

/* Override to grey the background of grid headers */
.dxbl-grid-header-row {
  background-color: rgba(0, 0, 0, 0.08);
}

.modal-mask {
  background-color: rgba(0,0,0,0.5);
}

/* Search box container override to take up the entire grid width and remove applied padding. */
.dxbl-grid > .dxbl-grid-top-panel > .dxbl-grid-search-box-container {
  width: 100%;
  padding: 0;
}

/* Add color change for hovering over a grid */
.row-clickable-grid tbody tr:hover {
  background-color: #e8f1f8 !important; /* The light blue used in the background of the app */
  cursor: pointer;
}

/* Make selected row stay the same light blue color from above */
.row-clickable-grid .dxbl-grid-selected-row {
  background-color: #e8f1f8;
}

/* Prevents nested grid headers from having hover effects that our "row-clickable-grid" class applies */
.row-clickable-grid tbody .detail-grid tr:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Prevents nested grids from having hover effects that our "row-clickable-grid" class applies */
.row-clickable-grid .dxbl-grid-detail-cell {
  background-color: #ffffff;
  pointer-events: none;
}

/* Styles the NavMenu's sidebar. This styling does not apply correctly when contained within NavMenu.razor.css. */
.navmenu-sidebar {
  background-color: #384357 !important;
  border-radius: 0;
  color: white;
  height: 100%;
}

/* Makes the selected/active sidebar item have a different background color. */
#nav-menu .dxbl-treeview-item-container.dxbl-active {
  background-color: #5A667E !important;
}

/*
   The navmenu treeview can be nested (like our Admin section) which displays a dropdown icon.
   If a user isn't logged in or they are not an admin, they are not shown any dropdowns, however, the lefthand space is still displayed.
   This styling is used to hide that lefthand space when we only have the non-authorized / non-admin view.
*/
.flat-nav-item button {
  display: none;
}

/* Override the navmenu's .dxbl-modal-content to prevent it's white border around the blue navmenu. */
#nav-menu .dxbl-modal-content {
  border-color: #44526C;
  border-radius: 0;
}

/* Styles the pop-up editor form for the grid in AppBusinessFunctions.razor. Included here because CSS Isolation would not apply otherwise. */
.appbusfunc-edit-form {
  min-width: 50vw !important;
}

/* Rotation animation used for the loading page spinner */
.rotate {
  animation: rotation 1s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

/* Custom class to style Contact/Applications Details modal */
.view-details {
  /* Copied from Blazored Modal class */
  background-color: #fff;
  padding: 1.5rem;
  box-shadow: 0 2px 2px rgba(0,0,0,.25);
  /* Stretches to full height of screen */
  height: 100vh;
  /* This is here because size option won't work with custom class for some reason */
  max-width: 575px;
  width: 30vw;
  min-width: 350px;
  /* Uses flexbox to dynamically size header and content in case of long names in header */
  display: flex;
  flex-direction: column;
  /* This is required for scrolling inside content to work */
  overflow: hidden;
  /* This cascades to apply to descendants, specifically header and upper info */
  word-break: break-word;
}

/* Custom class for the details modals to position along right side of screen */
.view-details-position .view-details {
  margin-left: auto;
  margin-right: 0;
}

/* Cuts off header for the details modals after 4 lines of text */
.view-details .bm-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Sizes Blazored Modal content div properly */
.view-details .bm-content {
  /* Allows content to take up rest of height available */
  flex-grow: 1;
  /* This allows us to use flex-grow: 1 on descendant divs as above */
  display: flex;
  /* Flex items have a min-height of auto, which we don't want in case of very long content */
  min-height: 0;
}

/* Sets max height of dxmemo components used within edit forms for larger fields such as notes */
.edit-form-memo-max-height {
  max-height: 20vh;
}

/* Colors alternate rows for a grid, allows for no conflict with styling of selected row */
.alternate-row {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Prevent "Actions" command column header from having pointer cursor on hover */
.command-header-hover {
  cursor: default !important;
}

/* Left aligns and styles pill badges (e.g. Active/Inactive) */
.status-badge-left-align {
  display: block;
  width: max-content;
  font-size: var(--dxbl-grid-font-size);
}

/* Adds red asterisk to the caption of a required form field  */
.required-caption:after {
  content: '*';
  color: red;
}

/* Hide nested grid expand/collapse buttons. Only apply this class on rows without data to be displayed in a detail row */
.hideDetailButton .dxbl-grid-expand-button-cell .dxbl-grid-expand-button {
  visibility: hidden;
}

/* Used to center display messages like the loading screen, unauthorized view, and not found view */
.center-message {
  text-align: center;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Bold first letter of each word of app name and italicize all words in app name */
.app-name span::first-letter {
  font-weight: bold;
}

/* Aid to bold first letter of each word of app name (need inline-block for first-letter selector to work) and italicize all words in app name */
.app-name span {
  display: inline-block;
  font-style: italic;
}

/* Suggested solution to push grid filter icons closer to their column header. This is using a private css class and should be tested with each update to DevExpress */
.dxbl-grid-filter-menu-funnel-btn {
  margin-left: unset;
}