/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minificationfor details on configuring this project to bundle and minify static web assets. */
@import url("/css/client/open-iconic/font/css/open-iconic-bootstrap.min.css");
a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all; }

/*
 Sticky footer styles
-------------------------------------------------- */
html, body {
  font-family: "Roboto", sans-serif !important;
  color: #495057;
  font-size: 0.95rem; }

html, body, #app {
  height: 100%;
  overflow-x: hidden; }

@media (min-width: 768px) {
  html {
    font-size: 16px; } }

.bg-blue {
  background-color: #233a79; }

.container {
  max-width: 960px; }

.pricing-header {
  max-width: 700px; }

.border-top {
  border-top: 1px solid #e5e5e5; }

.border-bottom {
  border-bottom: 1px solid #e5e5e5; }

.box-shadow {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05); }

button.accept-policy {
  font-size: 1rem;
  line-height: inherit; }

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

.invalid {
  outline: 1px solid red; }

.validation-message {
  color: red; }

.small-tool-tip {
  font-size: 0.75rem !important;
  vertical-align: middle !important;
  width: 0.8rem !important;
  padding-left: 6px; }

#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; }

.bs-tooltip-auto[x-placement^=top] .arrow::before,
.bs-tooltip-top .arrow::before {
  border-bottom-color: #f00;
  /* Red */ }

.clickable {
  cursor: pointer; }

.table-hover > tbody > tr.no-hover:hover > td,
.table-hover > tbody > tr.no-hover:hover > th,
.table-hover > thead > tr.no-hover:hover > td,
.table-hover > thead > tr.no-hover:hover > th {
  background-color: white; }

.w-90 {
  width: 90%; }

.card.sticky-top {
  max-height: 80vh; }
  .card.sticky-top .card-body {
    height: min-content;
    overflow-y: auto; }

.divider {
  margin-top: 1rem;
  margin-bottom: 1rem;
  height: 1px;
  overflow: hidden;
  background: #e9ecef; }

label {
  font-size: .88rem;
  color: #7d8287; }

.modal-content {
  border: none;
  border-radius: 50px; }

.main {
  display: flex;
  flex-flow: column;
  height: 100%; }
  .main .navbar {
    flex: 0 1 auto; }
  .main .content {
    flex: 1 1 auto;
    margin-top: -1px; }

.shadow {
  box-shadow: 0px 2px 4px lightgrey; }

.border {
  border: 1px solid lightgray; }

.details-table {
  font-size: .8rem; }

.detail-label {
  background: #003087;
  text-align: right;
  color: white;
  vertical-align: middle;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 1.1rem; }

.detail-data {
  text-align: left;
  vertical-align: middle;
  margin: 0 auto;
  display: flex;
  align-items: center; }

.details-card {
  display: flex;
  flex-flow: column;
  min-height: 100%;
  border-radius: 10px;
  overflow: hidden; }
  .details-card .row {
    flex: 1 1 auto; }
    .details-card .row:not(:first-child) > .detail-data {
      border-top: 1px solid lightgray; }

.info-block-img {
  color: white;
  font-size: xxx-large; }
  .info-block-img.overview {
    background-color: #99d6ea; }
  .info-block-img.labor {
    background-color: #4cb1d0; }
  .info-block-img.parts {
    background-color: #c6aa76; }
  .info-block-img.services {
    background-color: #6CC468; }
  .info-block-img.approval {
    background-color: #003087; }

span.pending {
  border: 1px solid red;
  color: red;
  border-radius: 4px;
  padding: 2px;
  margin: auto; }

div.dropdown-menu {
  left: unset !important;
  right: 0 !important; }

.approval-card {
  border-radius: 10px;
  overflow: hidden;
  cursor: default; }

.pending-item {
  background: #4473c4 !important;
  color: whitesmoke !important; }

.pending {
  color: #4473c4 !important; }

.submitted-item {
  background: #fac000 !important;
  color: black !important; }

.submitted {
  color: #fac000 !important; }

.approved-item {
  background: #548235 !important;
  color: whitesmoke !important; }

.approved {
  color: #548235 !important; }

.removed-item {
  background: #999 !important;
  color: whitesmoke !important; }

.removed {
  color: #999 !important; }

.accordion-toggle {
  cursor: pointer; }

.card-comments .accordion-toggle:after {
  /* symbol for "opening" panels */
  font-family: Icons;
  font-weight: 400;
  font-style: normal;
  content: "\e034";
  float: right;
  color: grey;
  position: absolute;
  right: 30px; }

.card-comments .accordion-toggle.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\e035"; }

.quote-muted {
  opacity: 40%; }

.type-circle {
  min-height: 40px;
  min-width: 40px; }

/*.list-group{
    border-radius: 10px;
    cursor: pointer;
    .list-group-item{
        border-radius: 10px;
    }
}*/
.list-item-muted {
  opacity: 80%; }

.mvh-50 {
  max-height: 50vh;
  overflow-y: auto;
  height: auto; }

/* width */
::-webkit-scrollbar {
  width: 10px; }

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px grey;
  border-radius: 5px; }

/* Handle */
::-webkit-scrollbar-thumb {
  background: lightgrey;
  border-radius: 5px; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: grey; }

.select-pill {
  cursor: pointer; }

.btn-primary:not(:disabled):not(.disabled) {
  background-color: #233a79;
  border-color: #233a79; }
  .btn-primary:not(:disabled):not(.disabled):hover, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled) .active {
    background-color: #1c75a2;
    border-color: #1c75a2; }

.btn:active {
  background-color: #1c75a2;
  border-color: #1c75a2; }

.btn-primary-outline:not(:disabled):not(.disabled):not(.btn-link) {
  border-color: #233a79; }
  .btn-primary-outline:not(:disabled):not(.disabled):not(.btn-link):hover, .btn-primary-outline:not(:disabled):not(.disabled):not(.btn-link):active, .btn-primary-outline:not(:disabled):not(.disabled):not(.btn-link) .active {
    background-color: #233a79;
    border-color: #233a79;
    color: white; }

.btn:active {
  background-color: #1c75a2;
  border-color: #1c75a2; }

a, .btn-link {
  color: #233a79; }
  a:hover, a:active, .btn-link:hover, .btn-link:active {
    color: #1c75a2;
    text-decoration: underline;
    background-color: unset; }

.stacked-element .stacked-title {
  color: #233a79; }

.single-finance-row {
  font-size: 0.75rem; }

.page {
  display: flex;
  align-items: stretch;
  height: 100%; }

.sidebar {
  width: 250px;
  min-height: 100%; }

a[data-toggle=collapse] {
  position: relative; }

.main {
  width: 100%;
  flex: 1;
  height: 100%; }
  .main .content {
    height: calc(100% - 3.5rem); }

.sidebar {
  background-image: linear-gradient(180deg, #233a79 0%, #1c75a2 70%); }
  .sidebar .top-row {
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: flex-start;
    padding-right: 0;
    border: none; }
    .sidebar .top-row a {
      margin-left: 0;
      cursor: pointer; }
    .sidebar .top-row button {
      width: 50px;
      margin-right: 1rem; }

.top-row {
  background-color: #f7f7f7;
  border-bottom: 1px solid #d6d5d5;
  justify-content: flex-end;
  height: 3.5rem;
  display: flex;
  align-items: center; }
  .top-row a, .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem; }
  .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis; }

@media (max-width: 640.98px) {
  .page {
    flex-direction: column; }
    .page .sidebar {
      width: 100%;
      min-height: fit-content; }
  .top-row:not(.auth) {
    display: none; }
  .top-row.auth {
    justify-content: space-between; }
  .top-row a, .top-row .btn-link {
    margin-left: 0; }
  .nav-item {
    font-size: 0.9rem;
    padding: 0.5rem 1rem 0.5rem 1rem; }
    .nav-item a {
      border-radius: 4px; }
  .hide-topbar-collapsed {
    display: none; } }

@media (min-width: 641px) {
  .page {
    flex-direction: row; }
  .sidebar {
    width: 250px;
    height: 100vh;
    position: sticky;
    top: 0; }
  .top-row {
    position: sticky;
    top: 0;
    z-index: 1; }
  .side-nav-hide {
    display: none; }
  .nav-item {
    font-size: 0.9rem;
    padding: 0.5rem 0rem 0.5rem 1rem; }
    .nav-item a {
      border-radius: 4px 0 0 4px; }
  .hide-topbar-collapsed {
    display: flex; } }

.navbar-toggler {
  background-color: rgba(255, 255, 255, 0.1); }

.top-row {
  height: 3.5rem; }

.navbar-brand {
  background-image: url(../img/logo-nowords.png);
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 100%;
  min-width: 100%;
  display: block; }

.oi {
  width: 2rem;
  font-size: 1.1rem;
  vertical-align: text-top;
  top: -2px; }

.nav-item {
  font-size: 0.9rem; }
  .nav-item:first-of-type {
    padding-top: 1rem; }
  .nav-item:last-of-type {
    padding-bottom: 1rem; }
  .nav-item a {
    color: #d7d7d7;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem; }
    .nav-item a.active {
      background-color: rgba(255, 255, 255, 0.25);
      color: white; }
    .nav-item a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: white; }

@media (min-width: 641px) {
  .navbar-toggler {
    display: none; }
  .sidebar > .collapse {
    display: block !important; } }

.master-detail-container {
  display: flex;
  flex-direction: row;
  height: 100%; }
  @media only screen and (max-width: 767px) {
    .master-detail-container .master-container {
      min-width: 100%; }
      .master-detail-container .master-container.selected {
        flex: 0 1 5%;
        min-width: unset; } }
  @media only screen and (min-width: 768px) and (max-width: 1199px) {
    .master-detail-container .master-container {
      min-width: 200px; }
      .master-detail-container .master-container.selected {
        flex: 0 1 4%;
        min-width: unset; } }
  @media only screen and (min-width: 1200px) {
    .master-detail-container .master-container {
      min-width: unset; }
      .master-detail-container .master-container.selected {
        flex: 0 1 2%;
        min-width: unset; } }
  .master-detail-container .master-container {
    display: flex;
    flex-direction: column;
    flex: 0 1 20%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden; }
    .master-detail-container .master-container.selected .master-header, .master-detail-container .master-container.selected .master-form, .master-detail-container .master-container.selected .master-list, .master-detail-container .master-container.selected .master-fill, .master-detail-container .master-container.selected .master-header-button {
      display: none; }
    .master-detail-container .master-container.selected .expand-bar {
      display: block;
      position: relative;
      width: 100%;
      height: 100%; }
      .master-detail-container .master-container.selected .expand-bar .expand-button {
        display: block;
        top: 80px;
        position: absolute;
        left: 0.5em;
        color: #233a79; }
        .master-detail-container .master-container.selected .expand-bar .expand-button span.oi {
          width: 1em; }
    .master-detail-container .master-container .expand-button, .master-detail-container .master-container .expand-bar {
      display: none; }
    .master-detail-container .master-container .master-header {
      flex: 0 1 auto; }
    .master-detail-container .master-container .master-form {
      flex: 0 1 auto; }
      .master-detail-container .master-container .master-form .collapse-button {
        color: #233a79;
        display: flex;
        align-items: center;
        justify-content: center; }
        .master-detail-container .master-container .master-form .collapse-button span.oi {
          width: 1em; }
    .master-detail-container .master-container .master-list {
      flex: 0 1 auto; }
      .master-detail-container .master-container .master-list .list-group-item {
        cursor: pointer; }
      .master-detail-container .master-container .master-list .not-selected {
        color: #CCCCCC; }
    .master-detail-container .master-container .master-fill {
      width: 100%;
      flex: 1 1 auto; }
  .master-detail-container .detail-container {
    flex: 3;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden; }

ul.tree {
  list-style: none;
  margin: 0;
  padding: 0; }
  ul.tree li {
    margin: 0;
    padding: 5px 7px;
    line-height: 20px;
    font-size: 0.8rem; }
    ul.tree li:first-child {
      color: #233a79; }
    ul.tree li div.inline-row {
      padding-right: 3px; }
    ul.tree li ul {
      list-style: none;
      margin: 0;
      padding: 0;
      margin-left: 10px;
      background: white;
      border: 1px solid lightgrey;
      border-radius: 5px; }
      ul.tree li ul li {
        margin: 0;
        padding: 5px 0px 5px 7px;
        line-height: 20px; }
        ul.tree li ul li div.inline-row {
          display: inline-block;
          width: 100%; }
        ul.tree li ul li:first-child {
          color: #233a79; }

.square {
  position: relative;
  width: 50%; }

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%; }

@media only screen and (max-width: 767px) {
  .square-content {
    width: 50%; } }

@media only screen and (min-width: 768px) and (max-width: 1199) {
  .square-content {
    width: 75%; } }

@media only screen and (min-width: 1200px) {
  .square-content {
    width: 90%; } }

.square-content {
  position: absolute;
  border-radius: 10%;
  aspect-ratio: 1; }
  .square-content a {
    text-decoration: none !important;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column; }

.app-link {
  font-size: 3rem !important;
  width: unset; }

.project-status {
  position: absolute;
  top: calc(50% - 13px);
  line-height: 26px;
  display: block;
  font-weight: 900;
  z-index: 1000; }

.selected-tab {
  border: 2px solid grey; }

.hoverable:hover {
  background-color: lightgray; }

.header-row {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center; }
  .header-row h4 {
    margin: 0; }

.person-image-container .person-image {
  object-fit: cover;
  width: 40px;
  border-radius: 50%;
  aspect-ratio: 1; }